Storybook 是什么？

问题

网络的普适性正将更多复杂性推向前端。这始于响应式网页设计，它将每个用户界面从一个变成了 10 个、100 个、1000 个不同的用户界面。随着时间的推移，设备、浏览器、可访问性、性能和异步状态等额外的要求也接踵而至。

像 React、Vue 3 和 Angular 这样的组件驱动工具帮助将复杂的 UI 分解成简单的组件，但它们并非万能药。随着前端的发展，组件的数量不断膨胀。成熟的项目可能包含数百个组件，产生数千种不同的变体。

更复杂的是，这些 UI 难以调试，因为它们与业务逻辑、交互状态和应用上下文交织在一起。

现代前端的广度压垮了现有的工作流程。开发者必须考虑无数的 UI 变体，但却没有能力开发或组织所有这些变体。最终导致 UI 更难构建、工作体验更差，而且容易出问题。

UI multiverse

解决方案

在隔离环境中构建 UI

现在，UI 的每个部分都是一个组件。组件的超能力在于你不需要启动整个应用就能看到它们如何渲染。你可以通过传入 props、模拟数据或模拟事件，在隔离环境中渲染特定变体。

Storybook 被打包成一个小型、仅用于开发的工作坊，与你的应用并行存在。它提供了一个隔离的 iframe 来渲染组件，不受应用业务逻辑和上下文的干扰。这有助于你专注于开发组件的每个变体，甚至是那些难以触及的边界情况。

将 UI 变体捕获为“Stories”

在隔离环境中开发组件变体时，将其保存为一个 story。Stories 是一种声明式语法，用于提供 props 和模拟数据来模拟组件变体。每个组件可以有多个 stories。每个 story 都允许你展示该组件的一个特定变体，以验证外观和行为。

你为精细的 UI 组件变体编写 stories，然后在开发、测试和文档中利用这些 stories。

Histogram.stories.ts|tsx

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Histogram } from './Histogram';
 
const meta = {
  component: Histogram,
} satisfies Meta<typeof Histogram>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const Default: Story = {
  args: {
    dataType: 'latency',
    showHistogramLabels: true,
    histogramAccentColor: '#1EA7FD',
    label: 'Latency distribution',
  },
};

Storybook 记录每个 Story

Storybook 是一个包含你的 UI 组件及其 stories 的交互式目录。过去，你必须启动应用，导航到某个页面，然后将 UI 调整到正确状态。这极大地浪费时间并阻碍了前端开发。有了 Storybook，你可以跳过所有这些步骤，直接在特定状态下处理 UI 组件。

Storybook 如何融入我的项目？

Storybook 被打包成一个小型、仅用于开发的工作坊，与你的应用并行存在。通过运行命令来安装它。

在开发过程中，在独立的 Node 进程中运行它。如果你在隔离环境中处理 UI，你只需要运行 Storybook。

Storybook 支持我喜欢的库吗？

Storybook 旨在与行业标准工具和平台集成，以简化设置。感谢我们雄心勃勃的开发者社区，我们已经取得了重大进展。有数百个插件和教程介绍了如何在各种项目中设置 Storybook。

如果你正在使用一个小众框架或新发布的工具，我们可能还没有针对它的集成。你可以考虑先自己创建一个概念验证，为社区的其他人铺平道路。

Storybook 的推荐工作流程是什么？

每个团队及其工作流程都各不相同。Storybook 旨在可增量采用。团队可以逐步尝试各种功能，看看哪种最适合他们。

大多数社区成员选择组件驱动的工作流程。UI 在隔离环境中从“底部向上”开发，从基本组件开始，然后逐步组合以组装页面。

在隔离环境中构建每个组件，并为其变体编写 stories。
将小型组件组合在一起，以实现更复杂的功能。
通过组合复合组件来组装页面。
将页面集成到你的项目中，连接数据和业务逻辑。

优点

为组件编写 stories 时，你会免费获得许多额外的优点。

📝 开发更健壮的 UI

隔离组件和页面，并将其用例作为stories进行跟踪。验证 UI 中难以触及的边界情况。使用插件模拟组件所需的一切——上下文、API 请求、设备特性等。

✅ 以更少的精力测试 UI，且无不稳定性

Stories 是一种实用、可重现的方式来跟踪 UI 状态。在开发期间使用它们进行抽样测试 UI。Storybook 提供了内置的工作流程，用于自动化的交互、可访问性和视觉测试。或者通过将 stories 导入到其他 JavaScript 测试工具中，将它们用作测试用例。

📚 为你的团队记录 UI 以便重用

Storybook 是你 UI 的唯一真实来源。Stories 索引了你所有的组件及其各种状态，让你的团队能够轻松找到和重用现有 UI 模式。Storybook 还会从这些 stories 自动生成文档。

📤 分享 UI 的实际工作方式

Stories 展示了 UI 的实际工作方式，而不仅仅是预期工作方式的图片。这使得每个人都能就当前生产环境中的内容保持一致。发布 Storybook 以获得团队成员的批准。或者将其嵌入到 Wiki、Markdown 和 Figma 中，以简化协作。

🚦 自动化 UI 工作流程

Storybook 与你的持续集成工作流程兼容。将其添加为 CI 步骤，以自动化用户界面测试，与团队成员一起审查实现，并获得利益相关者的批准。

一次编写 Stories，随处重用

Storybook 由基于 JavaScript ES6 模块的开放标准组件 Story 格式 (CSF) 提供支持。这使得 stories 能够在开发、测试和设计工具之间互操作。每个 story 都被导出为一个 JavaScript 函数，让你可以在其他工具中重用它。没有供应商锁定。

使用 Jest 或 Vitest 以及 Testing Library 重用 stories 来验证交互。将它们放入 Chromatic 进行视觉测试。使用 Axe 审计 stories 的可访问性。或者使用 Playwright 和 Cypress 测试用户流程。重用以零额外成本解锁更多工作流程。

Storybook 专为帮助你更快地开发复杂 UI 而构建，具有更高的健壮性和更低的维护成本。它被数百家领先公司和数千名开发者使用。