Storybook

隔离开发与 Story 模型

Storybook 的核心思想是组件驱动开发（Component-Driven Development）：每个 UI 组件在独立的「沙盒」中开发，不依赖页面路由或后端 API。每个Story 描述组件的一种状态，例如 Button 组件可以有 Primary、Secondary、Disabled、Loading 四个 Story，分别展示不同 props 组合下的外观。

这让设计师、QA 和产品可以直接在 Storybook 里审查组件，而不需要跑完整应用。公司的组件设计系统（Design System）往往以 Storybook 作为活文档对外发布。[1]

测试集成与插件

Storybook 7.x（2023 年）引入重大更新：CSF 3（Component Story Format）让 Story 写法更简洁，自动生成 Args Table。与测试工具集成是 Storybook 的重要价值：

• @storybook/test：在 Story 里写交互测试（用 Testing Library 的 API 模拟用户操作），可在 CI 中批量运行。
• Chromatic（Storybook 公司的商业产品）：对每个 Story 做视觉回归测试，检测 PR 中的 UI 像素级变化。

Storybook 支持 React、Vue 3、Angular、Svelte、Web Components 等多个框架，且不依赖具体的构建工具（Vite、Webpack 均支持）。