Storybook指南
CSF 3 故事格式
// 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'],
},
onClick: { action: 'clicked' },
},
} satisfies Meta<typeof Button>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
variant: 'primary',
children: '点击我',
},
};
export const Disabled: Story = {
args: {
...Primary.args,
disabled: true,
},
};
装饰器 (Decorators)
// 全局装饰器 (.storybook/preview.ts)
const preview: Preview = {
decorators: [
(Story) => (
<ThemeProvider theme="light">
<div style={{ padding: '24px' }}>
<Story />
</div>
</ThemeProvider>
),
],
parameters: {
backgrounds: {
default: 'light',
values: [
{ name: '浅色', value: '#ffffff' },
{ name: '深色', value: '#1c2035' },
],
},
},
};
常用插件
| 插件 | 用途 |
|---|---|
| @storybook/addon-controls | 交互式 Props 面板（内置） |
| @storybook/addon-actions | 记录回调调用（内置） |
| @storybook/addon-a11y | 无障碍审计面板 |
| @storybook/addon-viewport | 响应式视口测试 |
| @storybook/addon-docs | 自动生成组件文档 |
| @chromatic-com/storybook | Chromatic 视觉回归测试 |
| storybook-dark-mode | 深色/浅色模式切换 |