77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
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>
|
|
)
|
|
};
|