Feat/#251 select component

apps/core/app/test/page.tsx

@@ -0,0 +1,33 @@
+import { Input } from "@repo/ui/components/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@repo/ui/components/select";
+
+const Page = () => {
+  return (
+    <div className="container flex flex-wrap gap-6 min-h-screen w-full justify-center p-10">
+      <Select>
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="Format" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Release date</SelectLabel>
+            <SelectItem value="Popularity">Popularity</SelectItem>
+            <SelectItem value="Highest price">Highest price</SelectItem>
+            <SelectItem value="Lowest price">Lowest price</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <Input label="Label" placeholder="Placeholder" helperText="Helper Text" />
+    </div>
+  );
+};
+
+export default Page;

apps/storybook/src/stories/select.stories.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+} from "@repo/ui/components/select";
+
+const meta: Meta = {
+  title: "Components/Select",
+  tags: ["autodocs"],
+  component: Select,
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Select>;
+
+export const Default: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger>
+        <SelectValue placeholder="Select an option" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Options</SelectLabel>
+          <SelectItem value="option-1">Option 1</SelectItem>
+          <SelectItem value="option-2">Option 2</SelectItem>
+          <SelectItem value="option-3">Option 3</SelectItem>
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectLabel>More Options</SelectLabel>
+          <SelectItem value="option-4">Option 4</SelectItem>
+          <SelectItem value="option-5">Option 5</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const WithCustomStyling: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="bg-gray-100 border-gray-300 text-gray-700">
+        <SelectValue placeholder="Custom styling" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="custom-1">Custom Option 1</SelectItem>
+        <SelectItem value="custom-2">Custom Option 2</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};

packages/ui/src/components/atoms/base-input.tsx

@@ -6,39 +6,36 @@ import { cva, type VariantProps } from "class-variance-authority";
 export interface BaseInputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
     VariantProps<typeof baseInputVariants> {
-      error?: boolean;
-    }
+  error?: boolean;
+}
 
-export const baseInputVariants = cva("", {
-  variants: {
-    size: {
-      sm: "px-4 py-2.5 h-9",
-      md: "px-4 py-2.5 h-[52px]",
-      lg: "px-4 py-4 h-14",
+export const baseInputVariants = cva(
+  "flex h-10 w-full bg-card rounded-md border border-border ring-offset-background file:border-0 file:bg-transparent  transition-shadow duration-500 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 text-sm file:text-sm placeholder:text-muted-foreground font-normal file:font-medium focus:ring-2 focus:ring-primary focus:ring-offset-2",
+  {
+    variants: {
+      size: {
+        sm: "px-4 py-2.5 h-9",
+        md: "px-4 py-2.5 h-[52px]",
+        lg: "px-4 py-4 h-14",
+      },
+      error: {
+        true: "ring-2 ring-error focus-visible:ring-error focus-visible:ring-offset-2",
+      },
+    },
+    defaultVariants: {
+      size: "md",
     },
-    error:{
-      true: "ring-2 ring-error focus-visible:ring-error focus-visible:ring-offset-2",
-    }
-  },
-  defaultVariants: {
-    size: "md",
   },
-});
+);
 
 const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>(
   (props, ref) => {
-    const { size, className, type, error , ...resProps } = props;
+    const { size, className, type, error, ...resProps } = props;
 
     return (
       <input
         type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border border-border ring-offset-background file:border-0 file:bg-transparent  transition-shadow duration-500 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-          "bg-card  text-foreground",
-          "text-sm file:text-sm placeholder:text-muted-foreground font-normal file:font-medium",
-          "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
-          baseInputVariants({ size,error, className }),
-        )}
+        className={cn(baseInputVariants({ size, error, className }))}
         ref={ref}
         {...resProps}
       />

packages/ui/src/components/atoms/select.tsx

@@ -1,16 +1,17 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
 
-import { cn } from "@repo/ui/lib/utils"
+import { cn } from "@repo/ui/lib/utils";
+import { baseInputVariants } from "./base-input";
 
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
 
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -19,8 +20,9 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
+      "flex h-10 w-full items-center justify-between rounded-lg border border-input  px-3 py-2 text-sm  placeholder:text-muted-foreground focus:outline-none  disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      baseInputVariants({ size: "sm" }),
+      className,
     )}
     {...props}
   >
@@ -29,8 +31,8 @@ const SelectTrigger = React.forwardRef<
       <ChevronDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -40,14 +42,14 @@ const SelectScrollUpButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      className
+      className,
     )}
     {...props}
   >
     <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -57,15 +59,15 @@ const SelectScrollDownButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      className
+      className,
     )}
     {...props}
   >
     <ChevronDown className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
-))
+));
 SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+  SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -75,10 +77,10 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative  z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border bg-card text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
+        className,
       )}
       position={position}
       {...props}
@@ -88,28 +90,28 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
         )}
       >
         {children}
       </SelectPrimitive.Viewport>
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    className={cn("py-1.5 pl-8  pr-2 text-sm font-semibold", className)}
     {...props}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -118,8 +120,8 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      "relative flex w-full  cursor-default select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-background focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
     )}
     {...props}
   >
@@ -131,8 +133,8 @@ const SelectItem = React.forwardRef<
 
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -143,8 +145,8 @@ const SelectSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
@@ -157,4 +159,4 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
-}
+};