feat(ui): add stories for all components

.storybook/addons/toggle-dark-mode/addon-constants.ts

@@ -6,6 +6,6 @@ export const TOOL_TITLE = "Toggle Dark Mode (D)";
 export const globalTypes = {
   darkMode: {
     description: "Global dark mode for components",
-    defaultValue: "",
+    defaultValue: "true",
   },
 };

.storybook/preview.css

@@ -0,0 +1,24 @@
+.dark .sbdocs {
+  background: #000 !important;
+  color: #fff !important;
+}
+
+.dark .sbdocs-title, 
+.dark .sb-anchor h2, 
+.dark .sb-anchor h3, 
+.dark .sb-anchor h4, 
+.dark .docblock-argstable thead,
+.dark [class^="css-"] thead th {
+  color: #fff !important;
+}
+
+.sbdocs-preview,
+.dark .sbdocs-preview {
+  background: var(--background) !important;
+  color: var(--foreground) !important;
+}
+
+.sb-bar {
+  background: var(--background) !important;
+  color: var(--foreground) !important;
+}

.storybook/preview.ts

@@ -1,4 +1,5 @@
 import "../src/globals.css";
+import "./preview.css";
 
 import type { Preview } from "@storybook/react";
 import * as darkModeConstants from "./addons/toggle-dark-mode/addon-constants";

src/components/ui/menubar.tsx

@@ -218,8 +218,20 @@ const MenubarShortcut = ({
 MenubarShortcut.displayname = "MenubarShortcut";
 
 export {
-  Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup,
-  MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent,
-  MenubarSubTrigger, MenubarTrigger
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarPortal,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
 };
-

src/stories/accordion.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../components/ui/accordion';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'UI/Accordion',
+  component: Accordion,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+export const Default: Story = {
+  render: () => (
+    <Accordion type="single" collapsible>
+      <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 matches the other components' aesthetic.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};

src/stories/alert-dialog.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '../components/ui/alert-dialog';
+import { Button } from '../components/ui/button';
+
+const meta: Meta<typeof AlertDialog> = {
+  title: 'UI/AlertDialog',
+  component: AlertDialog,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof AlertDialog>;
+
+export const Default: Story = {
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Open Alert Dialog</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>
+  ),
+};

src/stories/alert.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Alert, AlertDescription, AlertTitle } from '../components/ui/alert';
+
+const meta: Meta<typeof Alert> = {
+  title: 'UI/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Alert>;
+
+export const Default: Story = {
+  render: () => (
+    <Alert>
+      <AlertTitle>Alert Title</AlertTitle>
+      <AlertDescription>This is an alert description.</AlertDescription>
+    </Alert>
+  ),
+};
+
+export const Destructive: Story = {
+  render: () => (
+    <Alert variant="destructive">
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>This is a destructive alert.</AlertDescription>
+    </Alert>
+  ),
+};

src/stories/aspect-ratio.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AspectRatio } from '../components/ui/aspect-ratio';
+
+const meta: Meta<typeof AspectRatio> = {
+  title: 'UI/AspectRatio',
+  component: AspectRatio,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof AspectRatio>;
+
+export const Default: Story = {
+  render: () => (
+    <AspectRatio ratio={16 / 9} className="bg-slate-50 dark:bg-slate-800">
+      <img
+        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+        alt="by Drew Beamer"
+        className="rounded-md object-cover"
+      />
+    </AspectRatio>
+  ),
+};

src/stories/avatar.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar, AvatarFallback, AvatarImage } from '../components/ui/avatar';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'UI/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  ),
+};

src/stories/badge.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from '../components/ui/badge';
+
+const meta: Meta<typeof Badge> = {
+  title: 'UI/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
+  render: () => <Badge>Default</Badge>,
+};
+
+export const Secondary: Story = {
+  render: () => <Badge variant="secondary">Secondary</Badge>,
+};
+
+export const Destructive: Story = {
+  render: () => <Badge variant="destructive">Destructive</Badge>,
+};
+
+export const Outline: Story = {
+  render: () => <Badge variant="outline">Outline</Badge>,
+};

src/stories/breadcrumb.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '../components/ui/breadcrumb';
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: 'UI/Breadcrumb',
+  component: Breadcrumb,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Breadcrumb>;
+
+export const Default: Story = {
+  render: () => (
+    <Breadcrumb>
+      <Breadcrumb>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </Breadcrumb>
+    </Breadcrumb>
+  ),
+};

src/stories/button.stories.ts → src/stories/button.stories.tsx

@@ -4,11 +4,11 @@ import { Button } from "../components/ui/button";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: "Example/Button",
+  title: "UI/Button",
   component: Button,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: "centered",
+    // layout: "centered",
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"],
@@ -39,3 +39,19 @@ export const Secondary: Story = {
     children: "Secondary",
   },
 };
+
+export const Destructive: Story = {
+  render: () => <Button variant="destructive">Destructive Button</Button>,
+};
+
+export const Outline: Story = {
+  render: () => <Button variant="outline">Outline Button</Button>,
+};
+
+export const Ghost: Story = {
+  render: () => <Button variant="ghost">Ghost Button</Button>,
+};
+
+export const Link: Story = {
+  render: () => <Button variant="link">Link Button</Button>,
+};

src/stories/card.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../components/ui/card';
+
+const meta: Meta<typeof Card> = {
+  title: 'UI/Card',
+  component: Card,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  render: () => (
+    <Card>
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card Description</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>Card Content</p>
+      </CardContent>
+      <CardFooter>
+        <p>Card Footer</p>
+      </CardFooter>
+    </Card>
+  ),
+};

src/stories/checkbox.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Checkbox } from '../components/ui/checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'UI/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {
+  render: () => <Checkbox />,
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="terms" />
+      <label
+        htmlFor="terms"
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        Accept terms and conditions
+      </label>
+    </div>
+  ),
+};

src/stories/collapsible.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../components/ui/collapsible';
+import { Button } from '../components/ui/button';
+
+const meta: Meta<typeof Collapsible> = {
+  title: 'UI/Collapsible',
+  component: Collapsible,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Collapsible>;
+
+export const Default: Story = {
+  render: () => (
+    <Collapsible>
+      <CollapsibleTrigger asChild>
+        <Button variant="outline">Toggle</Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="p-4 mt-2 rounded-md bg-slate-100">
+          Content that can be collapsed
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  ),
+};