feat(storybook): expanded coverage for structural components (batch 4)

- Added stories for: Label, Skeleton, ScrollArea, Toast, Collapsible, Sidebar
- Covered layout and feedback components

apps/web/src/components/ui/Collapsible.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Collapsible, CollapsibleCard } from './collapsible';
+import { Button } from './button';
+import { Settings } from 'lucide-react';
+
+const meta = {
+    title: 'UI/Collapsible',
+    component: Collapsible,
+    tags: ['autodocs'],
+    argTypes: {
+        defaultOpen: { control: 'boolean' },
+        showChevron: { control: 'boolean' },
+        open: { control: 'boolean' },
+    },
+} satisfies Meta<typeof Collapsible>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        trigger: <h3 className="text-lg font-semibold p-2">Click to expand</h3>,
+        children: <div className="p-4 border border-kodo-steel rounded-md mt-2">Content hidden by default</div>,
+    },
+};
+
+export const CollapsibleCardExample: Story = {
+    render: () => (
+        <CollapsibleCard
+            title="Advanced Settings"
+            icon={<Settings className="w-4 h-4" />}
+            className="w-[400px]"
+        >
+            <div className="space-y-4">
+                <div className="text-sm text-kodo-content-dim">
+                    Configure advanced options for your project.
+                </div>
+                <div className="flex justify-end">
+                    <Button size="sm">Save Changes</Button>
+                </div>
+            </div>
+        </CollapsibleCard>
+    ),
+};

apps/web/src/components/ui/Label.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Label } from './label';
+import { Input } from './input';
+
+const meta = {
+    title: 'UI/Label',
+    component: Label,
+    tags: ['autodocs'],
+    argTypes: {
+        children: { control: 'text' },
+    },
+    args: {
+        children: 'Email Address',
+    }
+} satisfies Meta<typeof Label>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithInput: Story = {
+    render: (args) => (
+        <div className="grid w-full max-w-sm items-center gap-1.5">
+            <Label htmlFor="email" {...args} />
+            <Input type="email" id="email" placeholder="Email" />
+        </div>
+    ),
+};

apps/web/src/components/ui/ScrollArea.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ScrollArea } from './scroll-area';
+
+const meta = {
+    title: 'UI/ScrollArea',
+    component: ScrollArea,
+    tags: ['autodocs'],
+    args: {
+        className: 'h-[200px] w-[350px] rounded-md border p-4',
+    }
+} satisfies Meta<typeof ScrollArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: (args) => (
+        <ScrollArea {...args}>
+            <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
+            {Array.from({ length: 50 }).map((_, i, a) => (
+                <div key={i}>
+                    <div className="text-sm">
+                        Tag {a.length - i}
+                    </div>
+                    {i !== a.length - 1 && <div className="my-2 h-px bg-kodo-steel" />}
+                </div>
+            ))}
+        </ScrollArea>
+    ),
+};

apps/web/src/components/ui/Sidebar.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Sidebar } from './Sidebar';
+import { Filter, User } from 'lucide-react';
+
+const meta = {
+    title: 'UI/Sidebar',
+    component: Sidebar,
+    tags: ['autodocs'],
+    argTypes: {
+        position: {
+            control: 'radio',
+            options: ['left', 'right'],
+        },
+        width: { control: 'text' },
+        collapsible: { control: 'boolean' },
+    },
+    parameters: {
+        layout: 'fullscreen',
+    },
+    decorators: [
+        (Story) => (
+            <div className="h-[500px] w-full relative flex border bg-kodo-void">
+                <Story />
+                <div className="flex-1 p-8">
+                    <h1 className="text-2xl font-bold mb-4">Main Content</h1>
+                    <p className="text-kodo-content-dim">
+                        The sidebar sits alongside this content.
+                    </p>
+                </div>
+            </div>
+        ),
+    ],
+} satisfies Meta<typeof Sidebar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LeftSidebar: Story = {
+    args: {
+        title: 'Filters',
+        icon: <Filter className="w-4 h-4" />,
+        position: 'left',
+        children: (
+            <div className="p-4 space-y-4">
+                <div className="h-20 bg-white/5 rounded-md" />
+                <div className="h-20 bg-white/5 rounded-md" />
+                <div className="h-20 bg-white/5 rounded-md" />
+            </div>
+        ),
+    },
+};
+
+export const RightSidebar: Story = {
+    args: {
+        title: 'User Profile',
+        icon: <User className="w-4 h-4" />,
+        position: 'right',
+        children: (
+            <div className="p-4 space-y-4">
+                <div className="text-sm text-kodo-content-dim">User details go here</div>
+            </div>
+        ),
+    },
+    decorators: [
+        (Story) => (
+            <div className="h-[500px] w-full relative flex border bg-kodo-void">
+                <div className="flex-1 p-8">
+                    <h1 className="text-2xl font-bold mb-4">Main Content</h1>
+                </div>
+                <Story />
+            </div>
+        ),
+    ],
+};

apps/web/src/components/ui/Skeleton.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Skeleton } from './skeleton';
+
+const meta = {
+    title: 'UI/Skeleton',
+    component: Skeleton,
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['text', 'circular', 'rectangular'],
+        },
+        width: { control: 'text' },
+        height: { control: 'text' },
+    },
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        width: 200,
+        height: 20,
+    },
+};
+
+export const CardLoading: Story = {
+    render: () => (
+        <div className="flex flex-col space-y-3 w-[300px]">
+            <Skeleton className="h-[125px] w-full rounded-xl" />
+            <div className="space-y-2">
+                <Skeleton className="h-4 w-[250px]" />
+                <Skeleton className="h-4 w-[200px]" />
+            </div>
+        </div>
+    ),
+};
+
+export const AvatarLoading: Story = {
+    render: () => (
+        <div className="flex items-center space-x-4">
+            <Skeleton className="h-12 w-12 rounded-full" />
+            <div className="space-y-2">
+                <Skeleton className="h-4 w-[250px]" />
+                <Skeleton className="h-4 w-[200px]" />
+            </div>
+        </div>
+    ),
+};
+
+export const Circular: Story = {
+    args: {
+        variant: 'circular',
+        width: 50,
+        height: 50,
+    },
+};

apps/web/src/components/ui/Toast.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Toast } from './Toast';
+import { useState } from 'react';
+import { Button } from './button';
+
+const meta = {
+    title: 'UI/Toast',
+    component: Toast,
+    tags: ['autodocs'],
+    argTypes: {
+        type: {
+            control: 'select',
+            options: ['success', 'error', 'info'],
+        },
+        message: { control: 'text' },
+    },
+    args: {
+        id: '1',
+        type: 'info',
+        message: 'This is a toast message',
+        onClose: () => console.log('Close clicked'),
+    }
+} satisfies Meta<typeof Toast>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Success: Story = {
+    args: {
+        type: 'success',
+        message: 'Operation completed successfully!',
+    },
+};
+
+export const Error: Story = {
+    args: {
+        type: 'error',
+        message: 'Something went wrong. Please try again.',
+    },
+};
+
+export const ToastDemo: Story = {
+    render: () => {
+        const [toasts, setToasts] = useState<Array<{ id: string; type: 'success' | 'error' | 'info'; message: string }>>([]);
+
+        const addToast = (type: 'success' | 'error' | 'info') => {
+            const id = Math.random().toString(36).substr(2, 9);
+            setToasts([...toasts, { id, type, message: `New ${type} toast message` }]);
+        };
+
+        const removeToast = (id: string) => {
+            setToasts(toasts.filter((t) => t.id !== id));
+        };
+
+        return (
+            <div className="space-y-4">
+                <div className="flex gap-2">
+                    <Button onClick={() => addToast('info')}>Show Info</Button>
+                    <Button variant="outline" className="border-green-500 text-green-500" onClick={() => addToast('success')}>Show Success</Button>
+                    <Button variant="destructive" onClick={() => addToast('error')}>Show Error</Button>
+                </div>
+                <div className="fixed bottom-4 right-4 flex flex-col items-end gap-2">
+                    {toasts.map((toast) => (
+                        <Toast
+                            key={toast.id}
+                            {...toast}
+                            onClose={removeToast}
+                        />
+                    ))}
+                </div>
+            </div>
+        );
+    },
+};