用途:为前端项目配置 Storybook,用于组件文档与测试。
主要能力:初始化 Storybook 并选择框架;配置 Controls、Actions、a11y、Interactions、Coverage、Designs、Chromatic 等插件;用 CSF3 编写故事并设置 argTypes、args、play 交互测试;用 MDX 编写文档;配置主题、背景、视口、全局装饰器;接入 Chromatic 视觉回归与 test-runner 无障碍测试;构建静态站点并部署到 GitHub Pages。
使用方式:运行 npx storybook@latest init,或指定框架如 npx storybook@latest init --type react、--type nextjs、--type vue3。在 .storybook/main.ts 配置 stories、addons、framework、docs、staticDirs、typescript 与 viteFinal;在 .storybook/preview.ts 配置 parameters、globalTypes、decorators。故事文件使用 @storybook/react 的 Meta、StoryObj 与 @storybook/test 的 fn、within、userEvent、expect。测试可安装 @storybook/test-runner 并配置 preVisit/postVisit 注入 axe 检查无障碍。构建用 storybook build,部署示例使用 peaceiris/actions-gh-pages。
适用场景:组件库文档、UI 开发调试、交互与无障碍测试、视觉回归、设计令牌展示。
限制:资料未提供具体版本要求、收费与价格信息、性能数据及对各框架的完整兼容性说明。