交互式 Story 生成

你是否还记得第一次接触 Storybook 的组件故事格式 (CSF)？CSF 是一种简洁的 API，用于编写组件故事——捕捉关键 UI 状态的 JavaScript 代码片段。创建一个最小的故事可以像编写一个空对象 ({}) 一样简单，但 CSF 功能丰富且可扩展，允许你创建、文档化和测试即使是最复杂的 UI 组件、状态和行为。

但说实话。当你第一次深入了解 CSF 时，可能会感到不知所措。你可能会在尝试理解其所有细微之处时感到迷茫。

这就是为什么我们很高兴推出交互式 Story 生成功能——一种生成 CSF Story 的全新方式。现在，在 Storybook 8.1 中，你可以

• 🎛️ 使用控件创建新 Story
• 💾 保存对现有 Story 的修改
• ✨ 从 Storybook 的 UI 添加新组件

这是可用性方面的一大飞跃。这意味着你可以在 UI 中试验你的组件，并从有趣的状态中创建 Story，而无需离开浏览器。这也降低了非开发人员团队成员贡献的门槛。请继续阅读以了解详情以及如何在你的工作流程中集成它。

什么是 Storybook？

Storybook 是创建、测试和文档化 UI 组件的行业标准。你可以在 Storybook 中导入一个组件，无论它有多复杂，并在一个独立的沙箱环境中，使用示例进行开发。这些示例——称为“stories”——随后可以随时重新访问，并可用于自动化测试和组件文档。

这是一个用组件故事格式 (CSF) 编写的基本 Story 的示例

// MyComponent.stories.ts
import { Meta, StoryObj } from '@storybook/react';
import { MyComponent } from './MyComponent';

const meta = {
  component: MyComponent,
} satisfies Meta<typeof MyComponent>;

type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  // The specific props for "Primary" can be defined here.
}

CSF 入门简单，但也足够灵活，可以容纳即使是最复杂的组件。想要模拟你的 Redux Store 或 http 请求？或者用不同的主题文档化你的组件？没问题。Storybook 可以将你的组件定义为任何所需的状态，并将其记录为一个 story。

从 UI 保存新 Story

第一次我编写了一个 story，并在 Storybook 中看到我的组件栩栩如生时，那是一种解放的感觉！拥有一个游乐场，而无需启动我的主应用程序并使其进入特定状态，这使得开发变得如此容易。

一旦第一个组件的 story 准备就绪，你通常会想要创建更多 story。例如，即使是一个简单的按钮，也可以呈现多种形式：主要的或次要的、大的或小的、带或不带图标等等。感谢 TypeScript 和自动完成功能，这可以很快完成。但是，如果你根本不必为 story 编写代码呢？

自 Storybook 8.1 起，我们现在可以缩短这个过程：如果组件的 story 存在，我们现在可以基于该现有 story 创建新 story，或者直接从 Storybook 的 UI 修改现有 story。这就像更改 story 的控件并按下“保存”或“新建”按钮一样简单。

新的或修改后的 story 将作为代码更改出现在该组件的 CSF 文件中，并将自动格式化以匹配你项目的代码风格和格式。要完成此过程，请将其视为任何其他代码更改并提交到你的存储库。不再需要在浏览器和编辑器之间来回跳转。

从 UI 添加新组件

如果你的项目使用 React，我们在侧边栏中放置了一个加号图标，用于从 Storybook UI 查找和添加新组件。Storybook 分析组件并创建一个新的 story 文件，其中包含所需属性的占位符值。不再需要在目录中搜索或在编辑器中创建新文件。现在一切都在 Storybook 中直接管理。

就像创建 story 一样，创建新的组件 story 文件将产生代码更改，然后你可以将其提交到你的存储库。

顺便说一句，组件搜索也支持 glob 模式！

立即试用

交互式 story 生成在 Storybook 8.1 中可用。在新项目中试用它

npx storybook@latest init

或升级现有项目

npx storybook@latest upgrade

要了解有关交互式 story 生成（以及用于生成它们的控件）的更多信息，请参阅Storybook 文档。

下一步是什么

交互式 story 生成是稳定的，并且今天在 Storybook 8.1 中可用。我们正在考虑以下增强功能

1. 创建和编辑 story 可用于所有渲染器，但从 UI 添加新组件的功能目前仅限 React 功能。我们希望在未来将其推广到所有渲染器。
2. 添加新组件容易出错。例如，如果你的组件需要特定的上下文提供程序才能正确渲染，这不是 Storybook 可以轻松推断出来的。但是，我们可以更好地显示该错误并帮助你快速解决它。我们计划这样做！
3. 生成单个 story 并允许你从 UI 编辑它是向前迈出的一大步。但是，生成像 Storybook GPT 这样的整套 story 呢？这也是我们正在探索的一个方向。

有关我们正在考虑和积极开展的项目的概述，请查看Storybook 的路线图。