交互式故事生成

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

但说实话。第一次深入了解 CSF 时，可能会感到不知所措。您可能会在试图掌握其所有细节时感到迷失。

正因如此，我们非常高兴推出 交互式故事生成 功能——一种全新的 CSF 故事生成方式。现在，在 Storybook 8.1 中，您可以

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

这是可用性方面的一个巨大飞跃。这意味着您可以在 UI 中试验您的组件，并在不离开浏览器的情况下从有趣的状态创建故事。它也降低了非开发人员团队成员贡献的门槛。继续阅读以了解详细信息以及如何将其集成到您的工作流程中。

什么是 Storybook？

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

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

// 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 可以定义您组件的任何所需状态，并将其记录为一个故事。

从 UI 保存新故事

当我第一次编写一个故事并看到我的组件在 Storybook 中变得生动起来时，那是一种解放的感觉！拥有一个游乐场，而不必启动我的主应用程序并将其置于特定状态，这使得开发变得更加容易。

一旦第一个组件的故事准备好了，您通常会想创建更多故事。例如，即使是一个简单的 Button，也可以有多种形式：主要或次要、大或小、带或不带图标等等。多亏了 TypeScript 和自动补全，这可以相当快地完成。但如果您根本不必为故事编写代码呢？

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

新的或修改后的故事将作为代码更改出现在该组件的 CSF 文件中，并会自动格式化以匹配您项目的代码风格和格式。要完成此过程，将其视为任何其他代码更改并提交到您的仓库。在浏览器和编辑器之间来回切换不再必要。

从 UI 添加新组件

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

就像创建故事一样，创建新的组件故事文件也会产生代码更改，然后您可以将其提交到您的仓库。

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

立即试用

交互式故事生成功能在 Storybook 8.1 中可用。在新项目中尝试它

npx storybook@latest init

或升级现有项目

npx storybook@latest upgrade

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

下一步计划

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

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

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