@customafk/lunas-ui 0.0.20 → 0.0.22

package/packages/stories/ui/breadcrumb.stories.tsx

@@ -0,0 +1,172 @@
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { ChevronDownIcon, SlashIcon } from 'lucide-react'
+
+const meta = {
+  title: 'Components/Breadcrumb',
+  component: Breadcrumb,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Breadcrumb>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  render: () => {
+    return (
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <a href="/">Home</a>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger className="flex items-center gap-1">
+                <BreadcrumbEllipsis className="size-4" />
+                <span className="sr-only">Toggle menu</span>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem>Documentation</DropdownMenuItem>
+                <DropdownMenuItem>Themes</DropdownMenuItem>
+                <DropdownMenuItem>GitHub</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <a href="/docs/components">Components</a>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    )
+  },
+}
+
+export const CustomSeparator: Story = {
+  args: {},
+  render: () => {
+    return (
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator>
+            <SlashIcon />
+          </BreadcrumbSeparator>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    )
+  },
+}
+
+export const WithDropdown: Story = {
+  args: {},
+  render: () => {
+    return (
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <a href="/">Home</a>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator>
+            <SlashIcon />
+          </BreadcrumbSeparator>
+          <BreadcrumbItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger className="flex items-center gap-1 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5">
+                Components
+                <ChevronDownIcon />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem>Documentation</DropdownMenuItem>
+                <DropdownMenuItem>Themes</DropdownMenuItem>
+                <DropdownMenuItem>GitHub</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator>
+            <SlashIcon />
+          </BreadcrumbSeparator>
+          <BreadcrumbItem>
+            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    )
+  },
+}
+
+export const Collapsed: Story = {
+  args: {},
+  render: () => {
+    return (
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <a href="/">Home</a>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbEllipsis />
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <a href="/docs/components">Components</a>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    )
+  },
+}
+
+export const LinkComponent: Story = {
+  args: {},
+  render: () => {
+    return (
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <a href="/">Home</a>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <a href="/components">Components</a>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    )
+  },
+}

package/packages/stories/ui/button.stories.tsx

@@ -0,0 +1,181 @@
+import { Button } from '@/components/ui/button'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: 'Button',
+    size: 'default',
+    className: 'w-40',
+  },
+}
+
+export const DefaultSecondary: Story = {
+  args: {
+    ...Default.args,
+    color: 'secondary',
+  },
+}
+
+export const DefaultSuccess: Story = {
+  args: {
+    ...Default.args,
+    color: 'success',
+  },
+}
+
+export const DefaultImportant: Story = {
+  args: {
+    ...Default.args,
+    color: 'important',
+  },
+}
+
+export const DefaultInfo: Story = {
+  args: {
+    ...Default.args,
+    color: 'info',
+  },
+}
+
+export const DefaultWarning: Story = {
+  args: {
+    ...Default.args,
+    color: 'warning',
+  },
+}
+
+export const DefaultDanger: Story = {
+  args: {
+    ...Default.args,
+    color: 'danger',
+  },
+}
+
+export const OutlineMuted: Story = {
+  args: {
+    ...Default.args,
+    variant: 'outline',
+    color: 'muted',
+  },
+}
+
+export const OutlinePrimary: Story = {
+  args: {
+    ...Default.args,
+    variant: 'outline',
+    color: 'primary',
+  },
+}
+
+export const OutlineSecondary: Story = {
+  args: {
+    ...Default.args,
+    variant: 'outline',
+    color: 'secondary',
+  },
+}
+
+export const OutlineSuccess: Story = {
+  args: {
+    ...Default.args,
+    variant: 'outline',
+    color: 'success',
+  },
+}
+
+export const OutlineImportant: Story = {
+  args: {
+    ...Default.args,
+    variant: 'outline',
+    color: 'important',
+  },
+}
+
+export const OutlineInfo: Story = {
+  args: {
+    ...Default.args,
+    variant: 'outline',
+    color: 'info',
+  },
+}
+
+export const OutlineWarning: Story = {
+  args: {
+    ...Default.args,
+    variant: 'outline',
+    color: 'warning',
+  },
+}
+
+export const OutlineDanger: Story = {
+  args: {
+    ...Default.args,
+    variant: 'outline',
+    color: 'danger',
+  },
+}
+
+export const GhostPrimary: Story = {
+  args: {
+    ...Default.args,
+    variant: 'ghost',
+    color: 'primary',
+  },
+}
+
+export const GhostSecondary: Story = {
+  args: {
+    ...Default.args,
+    variant: 'ghost',
+    color: 'secondary',
+  },
+}
+
+export const GhostSuccess: Story = {
+  args: {
+    ...Default.args,
+    variant: 'ghost',
+    color: 'success',
+  },
+}
+
+export const GhostImportant: Story = {
+  args: {
+    ...Default.args,
+    variant: 'ghost',
+    color: 'important',
+  },
+}
+
+export const GhostInfo: Story = {
+  args: {
+    ...Default.args,
+    variant: 'ghost',
+    color: 'info',
+  },
+}
+
+export const GhostWarning: Story = {
+  args: {
+    ...Default.args,
+    variant: 'ghost',
+    color: 'warning',
+  },
+}
+
+export const GhostDanger: Story = {
+  args: {
+    ...Default.args,
+    variant: 'ghost',
+    color: 'danger',
+  },
+}

package/packages/stories/ui/card.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import { Input } from '@/components/ui/input'
+
+const meta = {
+  title: 'Components/Card',
+  component: Card,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Card>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  render: () => {
+    return (
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <CardTitle>Login to your account</CardTitle>
+          <CardDescription>Enter your email below to login to your account</CardDescription>
+          <CardAction>
+            <Button variant="ghost">Sign Up</Button>
+          </CardAction>
+        </CardHeader>
+        <CardContent>
+          <form>
+            <div className="flex flex-col gap-6">
+              <div className="grid gap-2">
+                <Label htmlFor="email">Email</Label>
+                <Input id="email" type="email" placeholder="m@example.com" required />
+              </div>
+              <div className="grid gap-2">
+                <div className="flex items-center">
+                  <Label htmlFor="password">Password</Label>
+                  <a href="#" className="ml-auto inline-block text-sm underline-offset-4 hover:underline">
+                    Forgot your password?
+                  </a>
+                </div>
+                <Input id="password" type="password" required />
+              </div>
+            </div>
+          </form>
+        </CardContent>
+        <CardFooter className="flex-col gap-2">
+          <Button type="submit" className="w-full">
+            Login
+          </Button>
+          <Button variant="outline" color="muted" className="w-full">
+            Login with Google
+          </Button>
+        </CardFooter>
+      </Card>
+    )
+  },
+}

package/packages/stories/ui/checkbox.stories.tsx

@@ -0,0 +1,48 @@
+import { Checkbox } from '@/components/ui/checkbox'
+import { Label } from '@/components/ui/label'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Checkbox>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  render: () => {
+    return (
+      <div className="flex flex-col gap-6">
+        <div className="flex items-center gap-3">
+          <Checkbox id="terms" />
+          <Label htmlFor="terms">Accept terms and conditions</Label>
+        </div>
+        <div className="flex items-start gap-3">
+          <Checkbox id="terms-2" defaultChecked />
+          <div className="grid gap-2">
+            <Label htmlFor="terms-2">Accept terms and conditions</Label>
+            <p className="text-muted-foreground text-sm">By clicking this checkbox, you agree to the terms and conditions.</p>
+          </div>
+        </div>
+        <div className="flex items-start gap-3">
+          <Checkbox id="toggle" disabled />
+          <Label htmlFor="toggle">Enable notifications</Label>
+        </div>
+        <Label className="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
+          <Checkbox
+            id="toggle-2"
+            defaultChecked
+            className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
+          />
+          <div className="grid gap-1.5 font-normal">
+            <p className="text-sm leading-none font-medium">Enable notifications</p>
+            <p className="text-muted-foreground text-sm">You can enable or disable notifications at any time.</p>
+          </div>
+        </Label>
+      </div>
+    )
+  },
+}

package/packages/stories/ui/command.stories.tsx

@@ -0,0 +1,58 @@
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from '@/components/ui/command'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-react'
+
+const meta = {
+  title: 'Components/Command',
+  component: Command,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Command>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  render: () => {
+    return (
+      <Command className="rounded-lg border shadow-md md:min-w-[450px]">
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Suggestions">
+            <CommandItem>
+              <Calendar />
+              <span>Calendar</span>
+            </CommandItem>
+            <CommandItem>
+              <Smile />
+              <span>Search Emoji</span>
+            </CommandItem>
+            <CommandItem disabled>
+              <Calculator />
+              <span>Calculator</span>
+            </CommandItem>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Settings">
+            <CommandItem>
+              <User />
+              <span>Profile</span>
+              <CommandShortcut>⌘P</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <CreditCard />
+              <span>Billing</span>
+              <CommandShortcut>⌘B</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <Settings />
+              <span>Settings</span>
+              <CommandShortcut>⌘S</CommandShortcut>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    )
+  },
+}

package/packages/stories/ui/dialog.stories.tsx

@@ -0,0 +1,55 @@
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Components/Dialog',
+  component: Dialog,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Dialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  render: () => {
+    return (
+      <Dialog>
+        <form>
+          <DialogTrigger asChild>
+            <Button variant="outline" color="muted">
+              Open Dialog
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="sm:max-w-[425px]">
+            <DialogHeader>
+              <DialogTitle>Edit profile</DialogTitle>
+              <DialogDescription>Make changes to your profile here. Click save when you&apos;re done.</DialogDescription>
+            </DialogHeader>
+            <div className="grid gap-4">
+              <div className="grid gap-3">
+                <Label htmlFor="name-1">Name</Label>
+                <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
+              </div>
+              <div className="grid gap-3">
+                <Label htmlFor="username-1">Username</Label>
+                <Input id="username-1" name="username" defaultValue="@peduarte" />
+              </div>
+            </div>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button variant="outline" color="muted">
+                  Cancel
+                </Button>
+              </DialogClose>
+              <Button type="submit">Save changes</Button>
+            </DialogFooter>
+          </DialogContent>
+        </form>
+      </Dialog>
+    )
+  },
+}

package/packages/stories/ui/dropdown-menu.stories.tsx

@@ -0,0 +1,89 @@
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Components/DropdownMenu',
+  component: DropdownMenu,
+  tags: ['autodocs'],
+} satisfies Meta<typeof DropdownMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  render: () => {
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" color="muted" className="w-24">
+            Open
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56" align="start">
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              Profile
+              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              Billing
+              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              Settings
+              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              Keyboard shortcuts
+              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>Team</DropdownMenuItem>
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
+              <DropdownMenuPortal>
+                <DropdownMenuSubContent>
+                  <DropdownMenuItem>Email</DropdownMenuItem>
+                  <DropdownMenuItem>Message</DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>More...</DropdownMenuItem>
+                </DropdownMenuSubContent>
+              </DropdownMenuPortal>
+            </DropdownMenuSub>
+            <DropdownMenuItem>
+              New Team
+              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>GitHub</DropdownMenuItem>
+          <DropdownMenuItem>Support</DropdownMenuItem>
+          <DropdownMenuItem disabled>API</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            Log out
+            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+  },
+}

package/packages/stories/ui/file-uploader.stories.tsx

@@ -0,0 +1,18 @@
+import { FileUploader } from '@/components/ui/file-uploader'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  tags: ['autodocs'],
+  title: 'Components/FileUploader',
+  component: FileUploader,
+} satisfies Meta<typeof FileUploader>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    maxFileCount: 10,
+    onValueChange: (value) => console.log('onValueChange', value),
+  },
+}