feat: add filter Drawer component

closes #76

dashboard/src/components/Filter/Drawer.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { IoClose } from 'react-icons/io5';
+
+import { Button } from '../ui/button';
+
+import {
+  Drawer as UIDrawer,
+  DrawerContent,
+  DrawerFooter,
+  DrawerClose,
+  DrawerTrigger,
+} from '../ui/drawer';
+import { Separator } from '../ui/separator';
+
+interface IDrawerLink {
+  treeURL: string;
+  onRefresh: () => void;
+}
+
+interface IFilterDrawer extends IDrawerLink {
+  children?: React.ReactNode;
+  onCancel: () => void;
+  onFilter: () => void;
+}
+
+const DrawerHeader = (): JSX.Element => {
+  return (
+    <header className="mb-7 w-full">
+      <div className="w-[1400px] mx-auto flex items-center justify-between mb-4">
+        <span className="font-bold text-2xl/[42px]">
+          <FormattedMessage id="filter.filtering" />
+        </span>
+        <DrawerClose asChild>
+          <IoClose className="w-6 h-6 cursor-pointer" />
+        </DrawerClose>
+      </div>
+      <Separator />
+    </header>
+  );
+};
+
+const DrawerLink = ({ treeURL, onRefresh }: IDrawerLink): JSX.Element => {
+  return (
+    <div className="flex justify-between items-center mb-8">
+      <div className="w-[766px] h-[52px] px-4 py-2 bg-white border border-darkGray flex flex-col">
+        <span className="text-xs text-darkGray2">
+          <FormattedMessage id="filter.treeURL" />
+        </span>
+        <a
+          className="text-base text-dimBlack underline"
+          href={treeURL}
+          target="_bank"
+        >
+          {treeURL}
+        </a>
+      </div>
+      <Button
+        onClick={onRefresh}
+        variant="outline"
+        className="w-[200px] rounded-full border-2 border-black"
+      >
+        <FormattedMessage id="filter.refresh" />
+      </Button>
+    </div>
+  );
+};
+
+const Drawer = ({
+  treeURL,
+  children,
+  onRefresh,
+  onCancel,
+  onFilter,
+}: IFilterDrawer): JSX.Element => {
+  return (
+    <UIDrawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open Drawer</Button>
+      </DrawerTrigger>
+
+      <DrawerContent className="flex items-center px-4 bg-lightGray max-h-screen">
+        <DrawerHeader />
+        <section className="overflow-y-auto max-h-full">
+          <DrawerLink treeURL={treeURL} onRefresh={onRefresh} />
+          <div className="w-[1000px] rounded-lg bg-white">
+            {React.Children.map(children, (child, idx) => (
+              <>
+                {idx != 0 && <Separator />}
+                <div className="px-6 py-10">{child}</div>
+              </>
+            ))}
+          </div>
+        </section>
+
+        <DrawerFooter className="flex flex-row justify-end w-full h-20 bg-white text-dimGray mt-6 gap-x-6">
+          <DrawerClose asChild>
+            <Button variant="ghost" onClick={onCancel}>
+              Cancel
+            </Button>
+          </DrawerClose>
+          <DrawerClose
+            asChild
+            className="w-[200px] rounded-full bg-lightBlue text-white"
+          >
+            <Button variant="outline" onClick={onFilter}>
+              Filter
+            </Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </UIDrawer>
+  );
+};
+
+export default Drawer;

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

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { IntlProvider } from 'react-intl';
+import { flatten } from 'flat';
+
+import { LOCALES } from '../../../locales/constants';
+
+import { messages } from '../../../locales/messages';
+
+import FilterDrawer from '../Drawer';
+
+import CheckboxSection from '../CheckboxSection';
+import TimeRangeSection from '../TimeRangeSection';
+import SummarySection from '../SummarySection';
+
+const ActionsData = {
+  onRefresh: fn(),
+  onCancel: fn(),
+  onFilter: fn(),
+};
+
+const meta: Meta<typeof FilterDrawer> = {
+  title: 'FilterDrawer',
+  component: FilterDrawer,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  decorators: [
+    (): JSX.Element => (
+      <IntlProvider
+        messages={flatten(messages[LOCALES.EN_US])}
+        locale={LOCALES.EN_US}
+      >
+        <FilterDrawer
+          treeURL="https://git.kernel.org/pub/scm/linux/kernel/git/stable/linux-stable-rc.git"
+          {...ActionsData}
+        >
+          <SummarySection {...summarySectionProps} />
+          <CheckboxSection {...checkboxSectionProps} />
+          <CheckboxSection {...checkboxSectionProps} />
+          <TimeRangeSection {...timeRangeSectionProps} />
+        </FilterDrawer>
+      </IntlProvider>
+    ),
+  ],
+};
+
+const summarySectionProps = {
+  title: 'Tree',
+  columns: [
+    { title: 'Tree', value: 'stable-rc' },
+    { title: 'Matainer', value: 'Shannon Nelson' },
+    {
+      title: 'Commit/tag',
+      value: '5.15.150-rc1 - 3ab4d9c9e190217ee7e974c70b96795cd2f74611',
+    },
+  ],
+};
+
+const checkboxSectionProps = {
+  items: ['linux-5.15.y', 'Status:failed', 'Status: Warnings'],
+  title: 'Branch',
+  subtitle: 'Please select one or more Branches',
+  onClickItem: (idx: number, isChecked: boolean): void =>
+    console.log(idx, isChecked),
+};
+
+const onChangeM = (e: React.FormEvent<HTMLInputElement>): void =>
+  console.log(e.target);
+const timeRangeSectionProps = {
+  title: 'Timing',
+  subtitle: 'Please select a range of timing:',
+  min: 0,
+  max: 100,
+  onMinChange: onChangeM,
+  onMaxChange: onChangeM,
+};

dashboard/src/locales/messages/index.ts

@@ -27,6 +27,9 @@ export const messages = {
     filter: {
       min: 'Min',
       max: 'Max',
+      filtering: 'Filtering',
+      treeURL: 'Tree URL',
+      refresh: 'Refresh',
     },
   },
 };

dashboard/tailwind.config.js

@@ -32,14 +32,16 @@ module.exports = {
         "accordion-up": "accordion-up 0.2s ease-out",
       },
       colors: {
-        'bgSecondary' : '#343638',
-        'lightBlue': '#11B3E6', 
+        'bgSecondary': '#343638',
+        'lightBlue': '#11B3E6',
         'onSecondary-10': '#FFFFFF1A',
         "white": '#FFFFFF',
         "lightGray": '#F4F4F4',
         "mediumGray": '#EAEAEA',
         "darkGray": '#D6D6D6',
+        "darkGray2": '#767676',
         "dimGray": '#454545',
+        "dimBlack": '#333333',
         "black": '#000000',
         "lightRed": '#FFBBBB',
         "yellow": '#FFD27C',