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

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>
        ),
    ],
};