feat: add CheckboxSection filter component

dashboard/src/components/Filter/CheckboxSection.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import CheckboxSection from './CheckboxSection';
+
+const ActionsData = {
+  onClickItem: fn(),
+};
+
+const meta: Meta<typeof CheckboxSection> = {
+  title: 'Filter CheckboxSection',
+  component: CheckboxSection,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    ...ActionsData,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    items: ['linux-5.15.y', 'Status:failed', 'Status: Warnings'],
+    title: 'Branch',
+    subtitle: 'Please select one or more Branches',
+  },
+};
+
+export const WithSubSections: Story = {
+  args: {
+    title: 'Error Summary',
+    subsections: [
+      {
+        title: 'Errors',
+        items: ['linux-5.15.y', 'Status:failed', 'Status: Warnings'],
+        onClickItem: ActionsData.onClickItem,
+      },
+      {
+        title: 'Warnings',
+        items: ['linux-5.15.y', 'Status:failed', 'Status: Warnings'],
+        onClickItem: ActionsData.onClickItem,
+      },
+    ],
+  },
+};

dashboard/src/components/Filter/CheckboxSection.tsx

@@ -0,0 +1,112 @@
+import cls from 'classnames';
+
+import { useCallback, useMemo } from 'react';
+
+import Checkbox from '../Checkbox/Checkbox';
+
+type TOnClickItem = (itemIdx: number, isChecked: boolean) => void;
+
+interface ICheckboxSectionItem {
+  text: string;
+  onClickItem: TOnClickItem;
+  idx: number;
+}
+
+interface ICheckboxList {
+  items: string[];
+  onClickItem: TOnClickItem;
+}
+
+interface ICheckboxSubsection {
+  items: string[];
+  title: string;
+  onClickItem: TOnClickItem;
+}
+
+interface ICheckboxSection {
+  items?: string[];
+  title: string;
+  subtitle?: string;
+  subsections?: ICheckboxSubsection[];
+  onClickItem: TOnClickItem;
+  className?: string;
+}
+
+const CheckboxSectionItem = ({
+  text,
+  onClickItem,
+  idx,
+}: ICheckboxSectionItem): JSX.Element => {
+  const handleOnToggle = useCallback(
+    (isChecked: boolean) => onClickItem(idx, isChecked),
+    [idx, onClickItem],
+  );
+  return <Checkbox onToggle={handleOnToggle} text={text} />;
+};
+
+const CheckboxList = ({ items, onClickItem }: ICheckboxList): JSX.Element => {
+  const itemComponents = useMemo(
+    () =>
+      items.map((text, idx) => (
+        <CheckboxSectionItem
+          key={text}
+          text={text}
+          idx={idx}
+          onClickItem={onClickItem}
+        />
+      )),
+    [items, onClickItem],
+  );
+
+  return (
+    <div className="flex flex-wrap gap-y-6 gap-x-4 max-w-[1000px]">
+      {itemComponents}
+    </div>
+  );
+};
+
+const CheckboxSubsection = ({
+  title,
+  items,
+  onClickItem,
+}: ICheckboxSubsection): JSX.Element => {
+  return (
+    <div>
+      <h4 className="font-medium text-sm text-dimGray mb-2 mt-6">{title}</h4>
+      <CheckboxList items={items} onClickItem={onClickItem} />
+    </div>
+  );
+};
+
+const CheckboxSection = ({
+  items,
+  title,
+  subtitle,
+  onClickItem,
+  subsections,
+  className,
+}: ICheckboxSection): JSX.Element => {
+  const subsectionComponents = useMemo(
+    () =>
+      subsections?.map(subsection => (
+        <CheckboxSubsection
+          key={subsection.title}
+          title={subsection.title}
+          items={subsection.items}
+          onClickItem={subsection.onClickItem}
+        />
+      )),
+    [subsections],
+  );
+
+  return (
+    <div className={cls(className)}>
+      <h3 className="font-semibold text-xl text-dimGray mb-2">{title}</h3>
+      <h4 className="text-sm text-dimGray mb-6">{subtitle}</h4>
+      {items && <CheckboxList items={items} onClickItem={onClickItem} />}
+      {subsectionComponents}
+    </div>
+  );
+};
+
+export default CheckboxSection;

dashboard/tailwind.config.js

@@ -39,6 +39,7 @@ module.exports = {
         "lightGray": '#F4F4F4',
         "mediumGray": '#EAEAEA',
         "darkGray": '#D6D6D6',
+        "dimGray": '#454545',
         "black": '#000000',
         "lightRed": '#FFBBBB',
         "yellow": '#FFD27C',