Storybook Guide

// Button.stories.tsx import type { Meta, StoryObj } from '@storybook/react'; import { Button } from './Button'; const meta = { title: 'UI/Button', component: Button, parameters: { layout: 'centered', }, tags: ['autodocs'], argTypes: { variant: { control: 'select', options: ['primary', 'secondary', 'danger'], }, size: { control: 'radio', options: ['sm', 'md', 'lg'], }, onClick: { action: 'clicked' }, }, } satisfies Meta<typeof Button>; export default meta; type Story = StoryObj<typeof meta>; export const Primary: Story = { args: { variant: 'primary', size: 'md', children: 'Click Me', }, }; export const Disabled: Story = { args: { ...Primary.args, disabled: true, }, }; export const AllSizes: Story = { render: () => ( <div style={{ display: 'flex', gap: '8px' }}> <Button size="sm">Small</Button> <Button size="md">Medium</Button> <Button size="lg">Large</Button> </div> ), };

// Global decorator (.storybook/preview.ts) import type { Preview } from '@storybook/react'; import { ThemeProvider } from '../src/ThemeProvider'; const preview: Preview = { decorators: [ (Story) => ( <ThemeProvider theme="light"> <div style={{ padding: '24px' }}> <Story /> </div> </ThemeProvider> ), ], parameters: { backgrounds: { default: 'light', values: [ { name: 'light', value: '#ffffff' }, { name: 'dark', value: '#1c2035' }, ], }, }, };