diff --git a/apps/core/app/test/page.tsx b/apps/core/app/test/page.tsx new file mode 100644 index 00000000..52b95704 --- /dev/null +++ b/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 ( +
+ + +
+ ); +}; + +export default Page; diff --git a/apps/storybook/src/stories/select.stories.tsx b/apps/storybook/src/stories/select.stories.tsx new file mode 100644 index 00000000..53a1b745 --- /dev/null +++ b/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; + +export const Default: Story = { + render: () => ( + + ), +}; + +export const WithCustomStyling: Story = { + render: () => ( + + ), +}; diff --git a/bun.lockb b/bun.lockb index a6688a70..d8a2f0fe 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/packages/ui/src/components/atoms/base-input.tsx b/packages/ui/src/components/atoms/base-input.tsx index 478c7588..eb6c5b59 100644 --- a/packages/ui/src/components/atoms/base-input.tsx +++ b/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, "size">, VariantProps { - 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( (props, ref) => { - const { size, className, type, error , ...resProps } = props; + const { size, className, type, error, ...resProps } = props; return ( diff --git a/packages/ui/src/components/atoms/select.tsx b/packages/ui/src/components/atoms/select.tsx index ed1283e2..290a2145 100644 --- a/packages/ui/src/components/atoms/select.tsx +++ b/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, @@ -19,8 +20,9 @@ const SelectTrigger = React.forwardRef< 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< -)) -SelectTrigger.displayName = SelectPrimitive.Trigger.displayName +)); +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName; const SelectScrollUpButton = React.forwardRef< React.ElementRef, @@ -40,14 +42,14 @@ const SelectScrollUpButton = React.forwardRef< ref={ref} className={cn( "flex cursor-default items-center justify-center py-1", - className + className, )} {...props} > -)) -SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName +)); +SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName; const SelectScrollDownButton = React.forwardRef< React.ElementRef, @@ -57,15 +59,15 @@ const SelectScrollDownButton = React.forwardRef< ref={ref} className={cn( "flex cursor-default items-center justify-center py-1", - className + className, )} {...props} > -)) +)); SelectScrollDownButton.displayName = - SelectPrimitive.ScrollDownButton.displayName + SelectPrimitive.ScrollDownButton.displayName; const SelectContent = React.forwardRef< React.ElementRef, @@ -75,10 +77,10 @@ const SelectContent = React.forwardRef< {children} @@ -96,8 +98,8 @@ const SelectContent = React.forwardRef< -)) -SelectContent.displayName = SelectPrimitive.Content.displayName +)); +SelectContent.displayName = SelectPrimitive.Content.displayName; const SelectLabel = React.forwardRef< React.ElementRef, @@ -105,11 +107,11 @@ const SelectLabel = React.forwardRef< >(({ className, ...props }, ref) => ( -)) -SelectLabel.displayName = SelectPrimitive.Label.displayName +)); +SelectLabel.displayName = SelectPrimitive.Label.displayName; const SelectItem = React.forwardRef< React.ElementRef, @@ -118,8 +120,8 @@ const SelectItem = React.forwardRef< @@ -131,8 +133,8 @@ const SelectItem = React.forwardRef< {children} -)) -SelectItem.displayName = SelectPrimitive.Item.displayName +)); +SelectItem.displayName = SelectPrimitive.Item.displayName; const SelectSeparator = React.forwardRef< React.ElementRef, @@ -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, -} +};