@customafk/lunas-ui 0.0.21 → 0.0.23

package/packages/stories/ui/input.stories.tsx

@@ -0,0 +1,38 @@
+import { Input } from '@/components/ui/input'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Components/Input',
+  component: Input,
+} satisfies Meta<typeof Input>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter text here',
+  },
+}
+
+export const FileInput: Story = {
+  args: {
+    type: 'file',
+    placeholder: 'Upload a file',
+  },
+}
+
+export const Error: Story = {
+  args: {
+    placeholder: 'Error input',
+    'aria-invalid': true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    placeholder: 'Disabled input',
+    disabled: true,
+  },
+}

package/packages/stories/ui/label.stories.tsx

@@ -0,0 +1,17 @@
+import { Label } from '@/components/ui/label'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Components/Label',
+  component: Label,
+} satisfies Meta<typeof Label>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: 'Label',
+  },
+}

package/packages/stories/ui/multi-select.stories.tsx

@@ -0,0 +1,29 @@
+import { MultipleSelector } from '@/components/ui/multi-select'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta: Meta<typeof MultipleSelector> = {
+  title: 'Components/MultiSelect',
+  component: MultipleSelector,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    placeholder: 'Select options',
+    className: 'w-64',
+    onChange: (selectedOptions) => {
+      console.log('Selected options:', selectedOptions)
+    },
+    onAddNewItem: () => {
+      console.log('New item added:')
+    },
+  },
+}

package/packages/stories/ui/popover.stories.tsx

@@ -0,0 +1,52 @@
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Components/Popover',
+  component: Popover,
+} satisfies Meta<typeof Popover>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" color="muted">
+          Open popover
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="leading-none font-medium">Dimensions</h4>
+            <p className="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
+          </div>
+          <div className="grid gap-2">
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="width">Width</Label>
+              <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="maxWidth">Max. width</Label>
+              <Input id="maxWidth" defaultValue="300px" className="col-span-2 h-8" />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="height">Height</Label>
+              <Input id="height" defaultValue="25px" className="col-span-2 h-8" />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="maxHeight">Max. height</Label>
+              <Input id="maxHeight" defaultValue="none" className="col-span-2 h-8" />
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+}

package/packages/stories/ui/progress.stories.tsx

@@ -0,0 +1,17 @@
+import { Progress } from '@/components/ui/progress'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+const meta = {
+  tags: ['autodocs'],
+  title: 'Components/Progress',
+  component: Progress,
+} satisfies Meta<typeof Progress>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    value: 60,
+    className: 'w-72',
+  },
+}

package/packages/stories/ui/radio-group.stories.tsx

@@ -0,0 +1,31 @@
+import { Label } from '@/components/ui/label'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+const meta = {
+  tags: ['autodocs'],
+  title: 'Components/RadioGroup',
+  component: RadioGroup,
+} satisfies Meta<typeof RadioGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  render: () => (
+    <RadioGroup defaultValue="comfortable">
+      <div className="flex items-center gap-3">
+        <RadioGroupItem value="default" id="r1" />
+        <Label htmlFor="r1">Default</Label>
+      </div>
+      <div className="flex items-center gap-3">
+        <RadioGroupItem value="comfortable" id="r2" />
+        <Label htmlFor="r2">Comfortable</Label>
+      </div>
+      <div className="flex items-center gap-3">
+        <RadioGroupItem value="compact" id="r3" />
+        <Label htmlFor="r3">Compact</Label>
+      </div>
+    </RadioGroup>
+  ),
+}

package/packages/stories/ui/select.stories.tsx

@@ -0,0 +1,31 @@
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+const meta = {
+  tags: ['autodocs'],
+  title: 'Components/Select',
+  component: Select,
+} satisfies Meta<typeof Select>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  render: () => (
+    <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>
+  ),
+}

package/packages/stories/ui/separator.stories.tsx

@@ -0,0 +1,31 @@
+import { Separator } from '@/components/ui/separator'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+const meta = {
+  tags: ['autodocs'],
+  title: 'Components/Separator',
+  component: Separator,
+} satisfies Meta<typeof Separator>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <div>
+        <div className="space-y-1">
+          <h4 className="text-sm leading-none font-medium">Radix Primitives</h4>
+          <p className="text-muted-foreground text-sm">An open-source UI component library.</p>
+        </div>
+        <Separator className="my-4" />
+        <div className="flex h-5 items-center space-x-4 text-sm">
+          <div>Blog</div>
+          <Separator orientation="vertical" />
+          <div>Docs</div>
+          <Separator orientation="vertical" />
+          <div>Source</div>
+        </div>
+      </div>
+    )
+  },
+}

package/packages/stories/ui/sheet.stories.tsx

@@ -0,0 +1,50 @@
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Components/Sheet',
+  component: Sheet,
+} satisfies Meta<typeof Sheet>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline" color="muted">
+          Open
+        </Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>Make changes to your profile here. Click save when you&apos;re done.</SheetDescription>
+        </SheetHeader>
+        <div className="grid flex-1 auto-rows-min gap-6 overflow-y-auto px-4">
+          <div className="grid gap-3">
+            <Label htmlFor="sheet-demo-name">Name</Label>
+            <Input id="sheet-demo-name" defaultValue="Pedro Duarte" />
+          </div>
+          <div className="grid gap-3">
+            <Label htmlFor="sheet-demo-username">Username</Label>
+            <Input id="sheet-demo-username" defaultValue="@peduarte" />
+          </div>
+        </div>
+        <SheetFooter>
+          <Button type="submit">Save changes</Button>
+          <SheetClose asChild>
+            <Button variant="outline" color="muted">
+              Close
+            </Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  ),
+}

package/packages/stories/ui/skeleton.stories.tsx

@@ -0,0 +1,27 @@
+import { Skeleton } from '@/components/ui/skeleton'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Components/Skeleton',
+  component: Skeleton,
+} satisfies Meta<typeof Skeleton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <div className="h-32 w-120">
+        <div className="flex w-full items-center space-x-4">
+          <Skeleton className="size-12 min-w-12 rounded-full" />
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-[250px]" />
+            <Skeleton className="h-4 w-[200px]" />
+          </div>
+        </div>
+      </div>
+    )
+  },
+}

package/packages/stories/ui/switch.stories.tsx

@@ -0,0 +1,21 @@
+import { Label } from '@/components/ui/label'
+import { Switch } from '@/components/ui/switch'
+import type { Meta } from '@storybook/react-vite'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Components/Switch',
+  component: Switch,
+} satisfies Meta<typeof Switch>
+
+export default meta
+type Story = Meta<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Switch id="airplane-mode" />
+      <Label htmlFor="airplane-mode">Airplane Mode</Label>
+    </div>
+  ),
+}

package/packages/stories/ui/table.stories.tsx

@@ -0,0 +1,82 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import type { Meta } from '@storybook/react-vite'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Components/Table',
+  component: Table,
+} satisfies Meta<typeof Table>
+
+export default meta
+type Story = Meta<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <div className="bg-background border-border-weak w-200 min-w-200 overflow-hidden rounded-md border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[100px]">Invoice</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Method</TableHead>
+            <TableHead className="text-right">Amount</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {invoices.map((invoice) => (
+            <TableRow key={invoice.invoice}>
+              <TableCell className="font-medium">{invoice.invoice}</TableCell>
+              <TableCell>{invoice.paymentStatus}</TableCell>
+              <TableCell>{invoice.paymentMethod}</TableCell>
+              <TableCell className="text-right">{invoice.totalAmount}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  ),
+}
+const invoices = [
+  {
+    invoice: 'INV001',
+    paymentStatus: 'Paid',
+    totalAmount: '$250.00',
+    paymentMethod: 'Credit Card',
+  },
+  {
+    invoice: 'INV002',
+    paymentStatus: 'Pending',
+    totalAmount: '$150.00',
+    paymentMethod: 'PayPal',
+  },
+  {
+    invoice: 'INV003',
+    paymentStatus: 'Unpaid',
+    totalAmount: '$350.00',
+    paymentMethod: 'Bank Transfer',
+  },
+  {
+    invoice: 'INV004',
+    paymentStatus: 'Paid',
+    totalAmount: '$450.00',
+    paymentMethod: 'Credit Card',
+  },
+  {
+    invoice: 'INV005',
+    paymentStatus: 'Paid',
+    totalAmount: '$550.00',
+    paymentMethod: 'PayPal',
+  },
+  {
+    invoice: 'INV006',
+    paymentStatus: 'Pending',
+    totalAmount: '$200.00',
+    paymentMethod: 'Bank Transfer',
+  },
+  {
+    invoice: 'INV007',
+    paymentStatus: 'Unpaid',
+    totalAmount: '$300.00',
+    paymentMethod: 'Credit Card',
+  },
+]

package/packages/stories/ui/tabs.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta } from '@storybook/react-vite'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Components/Tabs',
+  component: Tabs,
+} satisfies Meta<typeof Tabs>
+
+export default meta
+type Story = Meta<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <div className="flex w-200 max-w-sm flex-col gap-6">
+      <Tabs defaultValue="account">
+        <TabsList>
+          <TabsTrigger value="account">Account</TabsTrigger>
+          <TabsTrigger value="password">Password</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">
+          <Card>
+            <CardHeader>
+              <CardTitle>Account</CardTitle>
+              <CardDescription>Make changes to your account here. Click save when you&apos;re done.</CardDescription>
+            </CardHeader>
+            <CardContent className="grid gap-6">
+              <div className="grid gap-3">
+                <Label htmlFor="tabs-demo-name">Name</Label>
+                <Input id="tabs-demo-name" defaultValue="Pedro Duarte" />
+              </div>
+              <div className="grid gap-3">
+                <Label htmlFor="tabs-demo-username">Username</Label>
+                <Input id="tabs-demo-username" defaultValue="@peduarte" />
+              </div>
+            </CardContent>
+            <CardFooter>
+              <Button>Save changes</Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+        <TabsContent value="password">
+          <Card>
+            <CardHeader>
+              <CardTitle>Password</CardTitle>
+              <CardDescription>Change your password here. After saving, you&apos;ll be logged out.</CardDescription>
+            </CardHeader>
+            <CardContent className="grid gap-6">
+              <div className="grid gap-3">
+                <Label htmlFor="tabs-demo-current">Current password</Label>
+                <Input id="tabs-demo-current" type="password" />
+              </div>
+              <div className="grid gap-3">
+                <Label htmlFor="tabs-demo-new">New password</Label>
+                <Input id="tabs-demo-new" type="password" />
+              </div>
+            </CardContent>
+            <CardFooter>
+              <Button>Save password</Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  ),
+}

package/packages/stories/ui/textarea.stories.tsx

@@ -0,0 +1,15 @@
+import { Textarea } from '@/components/ui/textarea'
+import type { Meta } from '@storybook/react-vite'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Components/Textarea',
+  component: Textarea,
+} satisfies Meta<typeof Textarea>
+
+export default meta
+type Story = Meta<typeof meta>
+
+export const Default: Story = {
+  render: () => <Textarea className="w-100" placeholder="Type your message here." rows={5} />,
+}

package/packages/stories/ui/toaster.stories.tsx

@@ -0,0 +1,87 @@
+import { toast } from 'sonner'
+
+import { Button } from '@/components/ui/button'
+import { Toaster } from '@/components/ui/sonner'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/Toaster',
+  component: Toaster,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+} satisfies Meta<typeof Toaster>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <>
+        <Button onClick={() => toast.info('Default notification', { description: 'This will be closed on 3000ms' })}>Toggle Notification</Button>
+        <Toaster />
+      </>
+    )
+  },
+}
+
+export const Success: Story = {
+  render: () => {
+    return (
+      <>
+        <Button onClick={() => toast.success('Success notification', { description: 'This will be closed on 3000ms' })}>Toggle Notification</Button>
+        <Toaster />
+      </>
+    )
+  },
+}
+
+export const Info: Story = {
+  render: () => {
+    return (
+      <>
+        <Button onClick={() => toast.info('Info notification', { description: 'This will be closed on 3000ms' })}>Toggle Notification</Button>
+        <Toaster />
+      </>
+    )
+  },
+}
+
+export const Loading: Story = {
+  render: () => {
+    return (
+      <>
+        <Button onClick={() => toast.loading('Loading notification', { description: 'This will be closed on 3000ms' })}>Toggle Notification</Button>
+        <Toaster />
+      </>
+    )
+  },
+}
+
+export const Warning: Story = {
+  render: () => {
+    return (
+      <>
+        <Button onClick={() => toast.warning('Warning notification', { description: 'This will be closed on 3000ms' })}>Toggle Notification</Button>
+        <Toaster />
+      </>
+    )
+  },
+}
+
+export const Error: Story = {
+  render: () => {
+    return (
+      <>
+        <Button onClick={() => toast.error('Error notification', { description: 'This will be closed on 3000ms' })}>Toggle Notification</Button>
+        <Toaster />
+      </>
+    )
+  },
+}