[🚧 WIP] ✨ feat: filter component

lib/components/Button/Button.stories.tsx

@@ -191,6 +191,10 @@ export const TextButton: Story = {
         </Button>
 
         <Button variant="text" theme="civo" disabled>
+          Text Civo Disabled
+        </Button>
+
+        <Button variant="text" disabled>
           Text Disabled
         </Button>
       </div>

lib/components/Button/Button.variants.ts

@@ -219,7 +219,7 @@ export const buttonVariants = cva(
           'colony:text-zinc-400',
           'civo:bg-white',
           'civo:border-white',
-          'civo:text-zinc-400',
+          'civo:text-civo-primary/45',
         ],
       },
       {

lib/components/Checkbox/Checkbox.tsx

@@ -33,10 +33,13 @@ export const Checkbox: FC<CheckboxProps> = forwardRef<
     const [checked, setChecked] = useToggle(defaultChecked);
     const defaultId = useId();
 
-    const handleChange = useCallback(() => {
-      setChecked();
-      onChange?.();
-    }, [onChange, setChecked]);
+    const handleChange = useCallback(
+      (checked: boolean) => {
+        setChecked(checked);
+        onChange?.(checked);
+      },
+      [onChange, setChecked],
+    );
 
     return (
       <div className="flex items-center gap-2" data-theme={theme}>

lib/components/Checkbox/Checkbox.types.ts

@@ -5,7 +5,7 @@ import { Theme } from '@/domain/theme';
 import { checkboxVariants } from './Checkbox.variants';
 
 export interface CheckboxProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked'>,
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'onChange'>,
     VariantProps<typeof checkboxVariants> {
   ariaLabelledBy?: string;
   className?: string;
@@ -16,5 +16,5 @@ export interface CheckboxProps
   labelClassName?: string;
   name?: string;
   theme?: Theme;
-  onChange?: () => void;
+  onChange?: (checked: boolean) => void;
 }

lib/components/Checkbox/Checkbox.variants.ts

@@ -14,7 +14,7 @@ export const checkboxVariants = cva(
     'text-white',
     'border-kubefirst-primary',
     'colony:border-red-700',
-    'civo:border-civo-primary',
+    'civo:border-zinc-400',
   ],
   {
     variants: {
@@ -32,7 +32,7 @@ export const checkboxVariants = cva(
         class: [
           'bg-kubefirst-primary',
           'colony:bg-red-700',
-          'civo:bg-civo-primary',
+          ['civo:bg-civo-primary', 'civo:border-civo-primary'],
         ],
       },
     ],

lib/components/Datepicker/DatePicker.tsx

@@ -14,6 +14,8 @@ const DatePicker: FC<DatePickerProps> = ({
   className,
   showOutsideDays = true,
   animate = true,
+  arrowClassName,
+  monthsClassName,
   onSelect,
   ...delegated
 }) => {
@@ -47,10 +49,15 @@ const DatePicker: FC<DatePickerProps> = ({
         day: 'text-center text-[14px] leading-[20px]',
         month_caption:
           'text-slate-700 font-semibold text-sm pl-1 h-[32px] flex items-center',
-        months:
+        months: cn(
           'flex flex-col relative px-5 py-4 rounded-lg shadow-md px-6 py-4 w-[307px] justify-center items-center',
+          monthsClassName,
+        ),
         month: 'flex flex-col gap-4',
-        nav: 'absolute right-4 top-3.5 flex justify-center items-center gap-[4px]',
+        nav: cn(
+          'absolute right-4 top-3.5 flex justify-center items-center gap-[4px]',
+          arrowClassName,
+        ),
         outside: 'text-slate-400',
         selected:
           '[&>button]:bg-blue-600 [&>button]:text-white [&>button]:hover:bg-blue-700 [&>button]:transition-all [&>button]:duration-300 [&>button]:rounded-full',

lib/components/Datepicker/DatePicker.types.ts

@@ -8,6 +8,8 @@ type TimeZone = keyof ReturnType<typeof getAllTimezones>;
 
 export type DatePickerProps = Omit<DayPickerPrimitiveProps, 'mode'> &
   VariantProps<typeof datePickerVariants> & {
+    arrowClassName?: string;
+    monthsClassName?: string;
     timeZone?: TimeZone;
     onSelect?: (date: Date) => void;
   };

lib/components/Filter/Filter.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Filter as FilterComponent } from './Filter';
+
+type Story = StoryObj<typeof FilterComponent>;
+
+const meta: Meta<typeof FilterComponent> = {
+  title: 'In Review/Filter',
+  component: FilterComponent,
+};
+
+export const Filter: Story = {
+  args: {
+    statusOptions: [
+      {
+        id: 'creating',
+        label: 'Creating',
+        variant: 'warning',
+      },
+      {
+        id: 'deleting',
+        label: 'Deleting',
+        variant: 'danger',
+      },
+      {
+        id: 'failed',
+        label: 'Failed',
+        variant: 'danger',
+      },
+      {
+        id: 'pending',
+        label: 'Pending',
+        variant: 'info',
+      },
+      {
+        id: 'ready',
+        label: 'Ready',
+        variant: 'success',
+      },
+      {
+        id: 'retrying',
+        label: 'Retrying',
+        variant: 'warning',
+      },
+    ],
+    onSelectStatus: (...status) => {
+      console.log('onSelectStatus', status);
+    },
+  },
+  render: (args) => (
+    <div className="max-w-[350px] flex flex-col gap-2">
+      <FilterComponent {...args} />
+    </div>
+  ),
+};
+
+export default meta;

lib/components/Filter/Filter.tsx

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+
+import { Button } from '@/components/Button/Button';
+import { cn } from '@/utils';
+
+import { FilterProps } from './Filter.types';
+import { filterVariants } from './Filter.variants';
+import { Created, Status, Type } from './components';
+import { FilterProvider } from './contexts';
+
+export const Filter: FC<FilterProps> = ({
+  className,
+  statusOptions = [],
+  onSelectStatus,
+}) => (
+  <FilterProvider onSelectStatus={onSelectStatus}>
+    <div className={cn(filterVariants({ className }))} data-theme="civo">
+      <Status options={statusOptions} />
+      <Created />
+      <Type />
+      <Button
+        type="button"
+        variant="text"
+        appearance="compact"
+        version="alternate"
+        disabled
+      >
+        Reset
+      </Button>
+    </div>
+  </FilterProvider>
+);

lib/components/Filter/Filter.types.ts

@@ -0,0 +1,17 @@
+import { VariantProps } from 'class-variance-authority';
+
+import { BadgeProps } from '../Badge/Badge.types';
+
+import { filterVariants } from './Filter.variants';
+
+export type Option = {
+  id: string;
+  label: string;
+  variant?: BadgeProps['variant'];
+};
+
+export interface FilterProps extends VariantProps<typeof filterVariants> {
+  className?: string;
+  statusOptions?: Option[];
+  onSelectStatus?: (...status: Option[]) => void;
+}

lib/components/Filter/Filter.variants.ts

@@ -0,0 +1,21 @@
+import { cva } from 'class-variance-authority';
+
+export const filterVariants = cva(['flex', 'gap-8', 'items-center']);
+
+export const filterButtonVariants = cva([
+  'flex',
+  'items-center',
+  'gap-1',
+  'text-slate-500',
+  'cursor-pointer',
+  'text-sm',
+]);
+
+export const filterButtonIconVariants = cva([
+  'text-slate-400',
+  'h-[20px]',
+  'w-[20px]',
+  'transition-all',
+  'duration-150',
+  'ease-in-out',
+]);

lib/components/Filter/components/Created/Created.tsx

@@ -0,0 +1,51 @@
+import { ChevronDownIcon } from 'lucide-react';
+
+import { Button } from '@/components/Button/Button';
+import { DatePicker } from '@/components/Datepicker/DatePicker';
+import { cn } from '@/utils';
+
+import {
+  filterButtonIconVariants,
+  filterButtonVariants,
+} from '../../Filter.variants';
+import { useFilterContext } from '../../contexts';
+
+export const Created = () => {
+  const { isCreatedOpen, onOpenCreated } = useFilterContext();
+
+  return (
+    <div className="relative">
+      <button
+        className={cn(filterButtonVariants(), {
+          'text-slate-700': isCreatedOpen,
+        })}
+        onClick={onOpenCreated}
+      >
+        Created
+        <ChevronDownIcon
+          className={cn(filterButtonIconVariants(), {
+            'rotate-180': isCreatedOpen,
+            'text-blue-600': isCreatedOpen,
+          })}
+        />
+      </button>
+
+      {isCreatedOpen && (
+        <div className="absolute top-full mt-1 left-0 bg-white rounded-md shadow-md animate-in fade-in-0 z-10 border border-gray-200 flex flex-col gap-4 py-4 px-6">
+          <DatePicker
+            className="p-0"
+            arrowClassName="-top-1 right-0"
+            monthsClassName="shadow-none p-0 w-auto"
+          />
+
+          <div className="flex justify-end items-center gap-4 py-2">
+            <Button variant="secondary" appearance="compact">
+              Reset
+            </Button>
+            <Button appearance="compact">Apply</Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};