web-ui/src/components/SidebarNavItem.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import { HomeIcon, UserCircleIcon, UsersIcon } from '@heroicons/react/24/outline';
import { SidebarNavItem } from './SidebarNavItem';

const meta = {
    title: 'Components/SidebarNavItem',
    component: SidebarNavItem,
    tags: ['autodocs'],
    parameters: {
        layout: 'padded',
        docs: {
            description: {
                component:
                    'Sidebar navigation link with active state styling and collapsed/expanded rendering mode.',
            },
        },
    },
    argTypes: {
        to: {
            description: 'Destination route path.',
            control: 'text',
            table: { type: { summary: 'string' } },
        },
        label: {
            description: 'Navigation item label.',
            control: 'text',
            table: { type: { summary: 'string' } },
        },
        icon: {
            description: 'Icon component rendered before the label.',
            control: false,
            table: { type: { summary: 'ComponentType<SVGProps<SVGSVGElement>>' } },
        },
        collapsed: {
            description: 'Collapsed state. When true, desktop view shows icon-only rail style.',
            control: 'boolean',
            table: { type: { summary: 'boolean' } },
        },
        onClick: {
            description: 'Optional click callback (for example to close mobile drawer).',
            action: 'clicked',
            table: { type: { summary: '() => void' } },
        },
    },
    args: {
        to: '/',
        label: 'Dashboard',
        icon: HomeIcon,
        collapsed: false,
    },
} satisfies Meta<typeof SidebarNavItem>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Expanded: Story = {
    render: (args) => (
        <nav className="flex w-56 flex-col gap-1">
            <SidebarNavItem {...args} />
            <SidebarNavItem to="/users" label="Users" icon={UsersIcon} collapsed={args.collapsed} />
            <SidebarNavItem
                to="/profile"
                label="Profile"
                icon={UserCircleIcon}
                collapsed={args.collapsed}
            />
        </nav>
    ),
};

export const Collapsed: Story = {
    args: {
        collapsed: true,
    },
    render: (args) => (
        <nav className="flex w-14 flex-col gap-1">
            <SidebarNavItem {...args} />
            <SidebarNavItem to="/users" label="Users" icon={UsersIcon} collapsed />
            <SidebarNavItem to="/profile" label="Profile" icon={UserCircleIcon} collapsed />
        </nav>
    ),
};