@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/accordion/Accordion.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './index'
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A vertically stacked set of interactive headings that reveal or hide associated content.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Accordion>
+
+export const Default: Story = {
+  args: {
+    type: 'single',
+    collapsible: true,
+    className: 'w-[400px]',
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It adheres to the WAI-ARIA design pattern.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles that match the other components.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It's animated by default, but you can disable it if you prefer.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+}
+
+export const Multiple: Story = {
+  render: () => (
+    <Accordion type="multiple" className="w-[400px]">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
+        <AccordionContent>
+          Yes. Set type="multiple" to allow multiple items to be open at once.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>How does it work?</AccordionTrigger>
+        <AccordionContent>
+          Each item can be toggled independently when using the multiple type.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>What about accessibility?</AccordionTrigger>
+        <AccordionContent>
+          Full keyboard navigation and screen reader support is included.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+}
+
+export const DefaultOpen: Story = {
+  render: () => (
+    <Accordion type="single" defaultValue="item-1" className="w-[400px]">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>This item is open by default</AccordionTrigger>
+        <AccordionContent>
+          Use the defaultValue prop to set which item should be open initially.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>This item is closed</AccordionTrigger>
+        <AccordionContent>
+          Click to expand this content.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+}

package/src/components/alert/Alert.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Alert, AlertTitle, AlertDescription } from './index'
+import { AlertCircle, Terminal, Info, CheckCircle2 } from 'lucide-react'
+
+const meta: Meta<typeof Alert> = {
+  title: 'Components/Alert',
+  component: Alert,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Displays a callout for user attention with optional title, description, and icon.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'destructive'],
+      description: 'The visual style of the alert',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Alert>
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+  },
+  render: (args) => (
+    <Alert {...args} className="w-[400px]">
+      <Terminal className="h-4 w-4" />
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>
+        You can add components to your app using the cli.
+      </AlertDescription>
+    </Alert>
+  ),
+}
+
+export const Destructive: Story = {
+  render: () => (
+    <Alert variant="destructive" className="w-[400px]">
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>
+        Your session has expired. Please log in again.
+      </AlertDescription>
+    </Alert>
+  ),
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[400px]">
+      <Alert>
+        <Info className="h-4 w-4" />
+        <AlertTitle>Information</AlertTitle>
+        <AlertDescription>
+          This is a default alert with some useful information.
+        </AlertDescription>
+      </Alert>
+      <Alert variant="destructive">
+        <AlertCircle className="h-4 w-4" />
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>
+          Something went wrong. Please try again later.
+        </AlertDescription>
+      </Alert>
+    </div>
+  ),
+}
+
+export const WithoutIcon: Story = {
+  render: () => (
+    <Alert className="w-[400px]">
+      <AlertTitle>Note</AlertTitle>
+      <AlertDescription>
+        Alerts can be displayed without an icon if needed.
+      </AlertDescription>
+    </Alert>
+  ),
+}
+
+export const TitleOnly: Story = {
+  render: () => (
+    <Alert className="w-[400px]">
+      <CheckCircle2 className="h-4 w-4" />
+      <AlertTitle>Successfully saved!</AlertTitle>
+    </Alert>
+  ),
+}

package/src/components/alert-dialog/AlertDialog.stories.tsx

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from './index'
+import { Button } from '../button'
+
+const meta: Meta<typeof AlertDialog> = {
+  title: 'Components/AlertDialog',
+  component: AlertDialog,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A modal dialog that interrupts the user with important content and expects a response.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof AlertDialog>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => (
+    <AlertDialog {...args}>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Delete Account</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+}
+
+export const Destructive: Story = {
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive">Delete</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete this item?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will permanently delete this item. This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+            Delete
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+}
+
+export const LogoutConfirmation: Story = {
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="ghost">Log out</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Log out of your account?</AlertDialogTitle>
+          <AlertDialogDescription>
+            You will be logged out of your account on this device. You can log
+            back in at any time.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Log out</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+}
+
+export const SaveChanges: Story = {
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Discard Changes</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Unsaved changes</AlertDialogTitle>
+          <AlertDialogDescription>
+            You have unsaved changes. Are you sure you want to leave? Your
+            changes will be lost.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Keep editing</AlertDialogCancel>
+          <AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+            Discard
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+}

package/src/components/aspect-ratio/AspectRatio.stories.tsx

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { AspectRatio } from './index'
+
+const meta: Meta<typeof AspectRatio> = {
+  title: 'Components/AspectRatio',
+  component: AspectRatio,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Displays content within a desired ratio.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    ratio: {
+      control: 'number',
+      description: 'The desired aspect ratio',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof AspectRatio>
+
+export const Default: Story = {
+  args: {
+    ratio: 16 / 9,
+    className: 'bg-muted rounded-md overflow-hidden',
+  },
+  render: (args) => (
+    <div className="w-[450px]">
+      <AspectRatio {...args}>
+        <img
+          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+          alt="Photo by Drew Beamer"
+          className="h-full w-full object-cover"
+        />
+      </AspectRatio>
+    </div>
+  ),
+}
+
+export const Square: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <AspectRatio ratio={1} className="bg-muted rounded-md overflow-hidden">
+        <img
+          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+          alt="Photo by Drew Beamer"
+          className="h-full w-full object-cover"
+        />
+      </AspectRatio>
+    </div>
+  ),
+}
+
+export const Portrait: Story = {
+  render: () => (
+    <div className="w-[250px]">
+      <AspectRatio ratio={3 / 4} className="bg-muted rounded-md overflow-hidden">
+        <img
+          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+          alt="Photo by Drew Beamer"
+          className="h-full w-full object-cover"
+        />
+      </AspectRatio>
+    </div>
+  ),
+}
+
+export const Ratios: Story = {
+  render: () => (
+    <div className="flex gap-4 flex-wrap">
+      <div className="w-[200px]">
+        <p className="text-sm text-muted-foreground mb-2">16:9</p>
+        <AspectRatio ratio={16 / 9} className="bg-muted rounded-md flex items-center justify-center">
+          <span className="text-muted-foreground text-sm">16:9</span>
+        </AspectRatio>
+      </div>
+      <div className="w-[200px]">
+        <p className="text-sm text-muted-foreground mb-2">4:3</p>
+        <AspectRatio ratio={4 / 3} className="bg-muted rounded-md flex items-center justify-center">
+          <span className="text-muted-foreground text-sm">4:3</span>
+        </AspectRatio>
+      </div>
+      <div className="w-[200px]">
+        <p className="text-sm text-muted-foreground mb-2">1:1</p>
+        <AspectRatio ratio={1} className="bg-muted rounded-md flex items-center justify-center">
+          <span className="text-muted-foreground text-sm">1:1</span>
+        </AspectRatio>
+      </div>
+      <div className="w-[200px]">
+        <p className="text-sm text-muted-foreground mb-2">21:9</p>
+        <AspectRatio ratio={21 / 9} className="bg-muted rounded-md flex items-center justify-center">
+          <span className="text-muted-foreground text-sm">21:9</span>
+        </AspectRatio>
+      </div>
+    </div>
+  ),
+}
+
+export const WithVideo: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <AspectRatio ratio={16 / 9} className="bg-black rounded-md overflow-hidden">
+        <iframe
+          src="https://www.youtube.com/embed/dQw4w9WgXcQ"
+          title="Video"
+          className="h-full w-full"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        />
+      </AspectRatio>
+    </div>
+  ),
+}

package/src/components/avatar/Avatar.stories.tsx

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Avatar, AvatarImage, AvatarFallback } from './index'
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'An image element with a fallback for representing the user.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Avatar>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => (
+    <Avatar {...args}>
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  ),
+}
+
+export const WithFallback: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarImage src="/broken-image.jpg" alt="@user" />
+      <AvatarFallback>JD</AvatarFallback>
+    </Avatar>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Avatar className="h-6 w-6">
+        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarFallback className="text-xs">CN</AvatarFallback>
+      </Avatar>
+      <Avatar className="h-8 w-8">
+        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarFallback className="text-xs">CN</AvatarFallback>
+      </Avatar>
+      <Avatar>
+        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
+      <Avatar className="h-14 w-14">
+        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
+      <Avatar className="h-20 w-20">
+        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarFallback className="text-xl">CN</AvatarFallback>
+      </Avatar>
+    </div>
+  ),
+}
+
+export const Group: Story = {
+  render: () => (
+    <div className="flex -space-x-4">
+      <Avatar className="border-2 border-background">
+        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
+      <Avatar className="border-2 border-background">
+        <AvatarFallback>AB</AvatarFallback>
+      </Avatar>
+      <Avatar className="border-2 border-background">
+        <AvatarFallback>CD</AvatarFallback>
+      </Avatar>
+      <Avatar className="border-2 border-background">
+        <AvatarFallback>+3</AvatarFallback>
+      </Avatar>
+    </div>
+  ),
+}
+
+export const FallbackColors: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Avatar>
+        <AvatarFallback className="bg-primary text-primary-foreground">AB</AvatarFallback>
+      </Avatar>
+      <Avatar>
+        <AvatarFallback className="bg-destructive text-destructive-foreground">CD</AvatarFallback>
+      </Avatar>
+      <Avatar>
+        <AvatarFallback className="bg-secondary text-secondary-foreground">EF</AvatarFallback>
+      </Avatar>
+      <Avatar>
+        <AvatarFallback className="bg-accent text-accent-foreground">GH</AvatarFallback>
+      </Avatar>
+    </div>
+  ),
+}

package/src/components/button/Button.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from 'storybook/test'
 import { Button } from './index'
 import { Mail, Loader2, ChevronRight } from 'lucide-react'
 
@@ -14,6 +15,9 @@ const meta: Meta<typeof Button> = {
     },
   },
   tags: ['autodocs'],
+  args: {
+    onClick: fn(),
+  },
   argTypes: {
     variant: {
       control: 'select',
@@ -33,19 +37,25 @@ const meta: Meta<typeof Button> = {
       control: 'boolean',
       description: 'Whether to render as a child component (for composition)',
     },
+    children: {
+      control: 'text',
+      description: 'Button content',
+    },
   },
 }
 
 export default meta
 type Story = StoryObj<typeof Button>
 
-// Default button
+// Default button with working controls
 export const Default: Story = {
   args: {
     children: 'Button',
     variant: 'default',
     size: 'default',
+    disabled: false,
   },
+  render: (args) => <Button {...args} />,
 }
 
 // All variants
@@ -108,6 +118,7 @@ export const Disabled: Story = {
     children: 'Disabled',
     disabled: true,
   },
+  render: (args) => <Button {...args} />,
 }
 
 // As link

package/src/components/calendar/Calendar.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Calendar } from './index'
+import * as React from 'react'
+import { DateRange } from 'react-day-picker'
+
+const meta: Meta<typeof Calendar> = {
+  title: 'Components/Calendar',
+  component: Calendar,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A date picker component with single and range selection support.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Calendar>
+
+export const Default: Story = {
+  render: function CalendarDemo() {
+    const [date, setDate] = React.useState<Date | undefined>(new Date())
+
+    return (
+      <Calendar
+        mode="single"
+        selected={date}
+        onSelect={setDate}
+      />
+    )
+  },
+}
+
+export const WithRange: Story = {
+  render: function CalendarRangeDemo() {
+    const [range, setRange] = React.useState<DateRange | undefined>({
+      from: new Date(),
+      to: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
+    })
+
+    return (
+      <Calendar
+        mode="range"
+        selected={range}
+        onSelect={setRange}
+        numberOfMonths={2}
+      />
+    )
+  },
+}
+
+export const MultipleMonths: Story = {
+  render: function CalendarMultipleDemo() {
+    const [date, setDate] = React.useState<Date | undefined>(new Date())
+
+    return (
+      <Calendar
+        mode="single"
+        selected={date}
+        onSelect={setDate}
+        numberOfMonths={2}
+      />
+    )
+  },
+}
+
+export const DisabledDates: Story = {
+  render: function CalendarDisabledDemo() {
+    const [date, setDate] = React.useState<Date | undefined>(new Date())
+
+    return (
+      <Calendar
+        mode="single"
+        selected={date}
+        onSelect={setDate}
+        disabled={(date) => date < new Date() || date.getDay() === 0 || date.getDay() === 6}
+      />
+    )
+  },
+}
+
+export const WithFooter: Story = {
+  render: function CalendarFooterDemo() {
+    const [date, setDate] = React.useState<Date | undefined>()
+
+    return (
+      <div className="space-y-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+        />
+        <p className="text-sm text-muted-foreground text-center">
+          {date ? `Selected: ${date.toLocaleDateString()}` : 'Pick a date'}
+        </p>
+      </div>
+    )
+  },
+}