Feat/multi select

package.json

@@ -12,17 +12,19 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-slider": "^1.1.2",
-    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "lucide-react": "^0.323.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-select": "^5.8.0",
     "tailwind-merge": "^2.2.1",
     "tailwind-variants": "^0.2.0",
     "tailwindcss-animate": "^1.0.7"

src/App.tsx

@@ -1,11 +1,30 @@
 import "./App.css";
+import { SelectInput } from "./components";
 
 function App() {
   return (
     <main>
       <h1 className='text-xl'>
         Please run storybook to see all the components
       </h1>
+      <SelectInput
+        // multiple
+        className='w-[500px]'
+        options={[
+          {
+            label: "Option 1",
+            value: "option1",
+          },
+          {
+            label: "Option 2",
+            value: "option2",
+          },
+          {
+            label: "Option 3",
+            value: "option3",
+          },
+        ]}
+      />
     </main>
   );
 }

src/components/atoms/Checkbox/index.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "@radix-ui/react-icons";
+
+import { cn } from "@/lib/utils";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "focus-visible:ring-ring data-[state=checked]:text-primary-foreground peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <CheckIcon className='h-4 w-4' />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

src/components/atoms/Select/Select.stories.tsx

@@ -1,45 +1,86 @@
-import { Meta, StoryObj } from "@storybook/react";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "./";
+import type { Meta, StoryObj } from "@storybook/react";
+import { SelectInput } from ".";
 
-const meta = {
-  title: "Design System/Atoms/Select",
-  component: () => (
-    <Select>
-      <SelectTrigger className='w-[180px]'>
-        <SelectValue placeholder='Select a fruit' />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectGroup>
-          <SelectLabel>Fruits</SelectLabel>
-          <SelectItem value='apple'>Apple</SelectItem>
-          <SelectItem value='banana'>Banana</SelectItem>
-          <SelectItem value='blueberry'>Blueberry</SelectItem>
-          <SelectItem value='grapes'>Grapes</SelectItem>
-          <SelectItem value='pineapple'>Pineapple</SelectItem>
-        </SelectGroup>
-      </SelectContent>
-    </Select>
-  ),
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<{}>;
+const meta: Meta<typeof SelectInput> = {
+  title: "Design System/Molecules/SelectInput",
+  component: SelectInput,
+  tags: ["autodocs"],
+};
 
 export default meta;
+type Story = StoryObj<typeof SelectInput>;
+
+const options = [
+  { value: "1", label: "Option 1" },
+  { value: "2", label: "Option 2" },
+  { value: "3", label: "Option 3" },
+  { value: "4", label: "Option 4" },
+  { value: "5", label: "Option 5" },
+  { value: "6", label: "Option 6" },
+  { value: "7", label: "Option 7" },
+  { value: "8", label: "Option 8" },
+  { value: "9", label: "Option 9" },
+  { value: "10", label: "Option 10" },
+  { value: "11", label: "Option 11" },
+  { value: "12", label: "Option 12" },
+  { value: "13", label: "Option 13" },
+  { value: "14", label: "Option 14" },
+  { value: "15", label: "Option 15" },
+  { value: "16", label: "Option 16" },
+  { value: "17", label: "Option 17" },
+  { value: "18", label: "Option 18" },
+  { value: "19", label: "Option 19" },
+  { value: "20", label: "Option 20" },
+  { value: "21", label: "Option 21" },
+  { value: "22", label: "Option 22" },
+  { value: "23", label: "Option 23" },
+  { value: "24", label: "Option 24" },
+  { value: "25", label: "Option 25" },
+  { value: "26", label: "Option 26" },
+  { value: "27", label: "Option 27" },
+  { value: "28", label: "Option 28" },
+  { value: "29", label: "Option 29" },
+  { value: "30", label: "Option 30" },
+];
 
-type Story = StoryObj<typeof meta>;
+export const BasicSelect: Story = {
+  args: {
+    options,
+    value: { value: "1", label: "Option 1" },
+  },
+};
+export const ErrorState: Story = {
+  args: {
+    error: "This is a required field & cannot be empty",
+    required: true,
+    label: "Error Select",
+    options,
+  },
+};
+
+export const DisabledSelect: Story = {
+  args: {
+    disabled: true,
+    options,
+  },
+};
+
+export const RequiredSelect: Story = {
+  args: {
+    required: true,
+    label: "Required Select",
+    options,
+  },
+};
 
-//render componente
-export const SelectDemo: Story = {
+export const MultiSelect: Story = {
   args: {
     required: true,
+    label: "Multi Select",
+    multiple: true,
+    options,
+    closeMenuOnSelect: false,
+    isClearable: true,
+    error: "This is a required field & cannot be empty",
   },
 };