Storybook 6.4

Storybook 是领先的用于开发组件和页面的 UI 开发工作坊。在过去五年里，它从一个利基工具发展成为前端领域的标准配置，被 Twitter、Github、BBC 和《纽约时报》等公司的团队使用。

随着 Storybook 用户群的增长，其用例也随之增加。早期的用户使用 Storybook 来开发设计系统和库的组件。现在，团队使用它来构建、测试和文档化各种复杂的关联组件——甚至整个应用程序页面！

隔离构建 UI 有助于进行压力测试和发现边缘情况。但隔离复杂的组件会带来新的挑战，因为它们通常管理自己的状态和/或从外部源加载数据。

Storybook 6.4 让构建关联组件和页面变得更容易

• ▶️ 交互式故事（stories），用于模拟用户行为和调试工具
• ⚡️ 按需架构，构建体积减小 3 倍，加载时间更快
• ⛸ Automigrate + 版本化文档，让升级更容易
• 📋 Linter，用于强制执行 Storybook 最佳实践
• 💯 数百项其他修复和用户体验改进

交互式故事（stories）

Storybook 允许你以一种称为故事（story）的结构化格式捕获组件的各种状态。每个故事通过隔离渲染组件并提供 props 和模拟数据来模拟特定的 UI 状态。

然而，有些 UI 状态只能通过用户交互（点击、拖动、轻触、输入等）才能达到。以前在 Storybook 中无法对此进行建模。为了解决这个问题，我们在 Storybook 6.4 中添加了一个新的构造，称为 play 函数。它允许你在故事渲染后运行脚本化的交互。

请看这个用于填写表单以触发验证的 play 函数

// AccountForm.stories.js
import { within, userEvent } from '@storybook/testing-library';
import { AccountForm } from './AccountForm';

export default { component: AccountForm };

export const VerificationSuccess = {
  args: { passwordVerification: true },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.type(canvas.getByTestId('email'), 'michael@chromatic.com');
    await userEvent.type(canvas.getByTestId('password1'), 'k32904n£#1kjad', { delay: 50 });
    await userEvent.type(canvas.getByTestId('password2'), 'k32904n£#1kjad', { delay: 50 });
    await userEvent.click(canvas.getByTestId('submit'));
  },
};

Play 函数解锁了捕获组件用例的新方法，同时也带来了一些独特的挑战。例如，如果一个交互失败了，是你的组件有 bug，还是 play 函数需要更新？

为了帮助调试这种情况，我们推出了一款实验性新插件 Storybook Interactions。安装后，它会可视化 play 函数的每一步

这还只是冰山一角。我们还创建了一个 Storybook linter，帮助你编写格式良好的故事和 play 函数。要了解更多信息，请查看交互式故事发布公告。

按需架构

当你编写故事时，你将组件示例、指南和 API 全部集中在一个地方。团队在线发布故事，以便更容易进行审查和协作。

Storybook 现在包含的故事比以往任何时候都多。现在很常见看到项目有数百个组件和数千个故事。但我们最初的构建过程并未针对这种规模进行优化，这导致了加载时间变慢。

我们与 Webpack 和 Shopify UX 工程团队合作，创建了一种新的按需架构。这是一项根本性的改变，使得静态构建的包体积减小 3 倍，加载时间加快 4 倍。

这是如何实现的？这一性能飞跃是通过重构 Storybook 核心来实现的，使其可以独立加载每个故事，而不是将它们打包成一个单一的庞大捆绑包。

新的核心拥有比其前身更强大的测试，这为 Storybook 的未来奠定了坚实的基础！更重要的是，它为我们进一步的性能优化（如基于文件的缓存和延迟编译）做好了准备。

要了解更多信息，请阅读按需架构发布公告。

精简的工具和文档

Storybook 是一个快速发展的项目。在完成日常工作的同时跟上所有变化可能会很困难。这就是为什么我们正在精简我们的工具和文档，以使升级变得轻松自如。

Automigrate 赋予你超能力，自动将你的 Storybook 更新到最新的推荐实践。例如，你正在使用 Webpack5，但你的 Storybook 仍然是 Webpack4？运行 npx sb automigrate，它将检查升级路径，解释发现的问题，并提供自动更新依赖、配置和代码的选项。从 6.4 版本开始，automigrate 将作为升级过程的一部分运行。

Linter 有助于确保你的故事格式良好，并使用最新的语法。这个新的辅助工具由 Yann Braga 和 Michael Shilman (我！) 开发。如果你已经在使用 ESlint，在升级到 6.4 时将自动安装 Storybook linter。

版本化文档现已可用！无法升级？你可以访问远至 6.0 的旧版本。想在实验性功能稳定之前试用吗？7.0 的 WIP 文档现在只需点击即可访问。这项巨大的用户体验改进是由 Kyle Gach 和 João Cardoso 带来的。

Feature flags（功能标志） 为需要立即使用实验性或破坏性功能的用户提供了便利，而不会干扰其他人。例如，很多人都面临 Storybook 依赖 Emotion 10 的挑战。现在你可以使用 emotionAlias 功能标志解除 emotion 的依赖限制

module.exports = {
  features: { emotionAlias: false }
}

有关功能标志的完整列表，请参阅我们的类型定义。

鉴于涉及的范围广泛和开发节奏快速，我们意识到这里还有很多工作要做。但我们希望这能使你的 6.4 升级比以往版本更易于管理。我们将继续在 Storybook 的这个领域努力，直到我们... 搞定它。🥁

框架改进

Storybook 支持所有主要的 web 前端框架，并且在每个版本中，我们都努力改进框架支持。Storybook 6.4 包含以下框架改进：

React: 感谢 Norbert de Langen，我们将 reach-router 升级到了 react-router 6。这解决了与 React 17 项目相关的 npm7 错误。

Angular: 感谢 Thibaud Avenier、Stefanos Lignos 和 Juri Strumpflohner 与 Nx 团队合作进行的英勇工作，现已支持 Angular 13。

Web-components: 大量的文档改进。包括由 Chris Garrett 和 Benny Powers 提供的 HTML 和 web-components 动态生成的源代码片段，以及由 Pascal Schilp 提供的 自定义元素 manifest ArgsTable 支持。

React Native (RN): Storybook for RN 的维护者 Danny Williams 为我们带来了 一种开发和文档化 RN 组件的新方法。我们传统的 RN 支持在原生设备上渲染你的组件。这个新包使用 React Native Web 在浏览器中渲染它们，以便更容易共享。此外，它还与最新版本的 Storybook 及其全套插件和工具兼容。

数百项其他改进

Storybook 在各个层面持续改进。6.4 版本包含数百项其他修复、功能和调整。查看与 6.4.0-* 匹配的更新日志，获取完整的变更列表。亮点包括：

• ✅ 由 Angeliki Papadopoulou 提供的更好的侧边栏切换 UI
• ✅ 由 Deen Denno 提供的为 a11y 添加跳至 Canvas 侧边栏链接
• ✅ 由 Gert Hengeveld 提供的Globals URL 参数
• ✅ 由 Norbert  de Langen 提供的选择退出 safe-eval 以符合内容安全策略
• ✅ 由 Michael Shilman 提供的自动构建和更新 stories.json，以便更轻松地进行组合
• ✅ 由 Michael Shilman 提供的根据文件路径自动生成组件标题

1 分钟安装

将现有 Storybook 项目升级到 6.4

npx sb@latest upgrade

如果你从 5.x 或更早版本升级，请查看Storybook 6 迁移指南。

或者，对于全新安装，将 Storybook 引导到现有应用中

npx sb@latest init

参与其中

专业 UI 开发者每天都依赖 Storybook。当你采用 Storybook 时，你将获得一套工具、强大的插件和开箱即用的集成，从而加速开发。

该项目由 1,400 多名开源贡献者维护，并由指导委员会指导。如果你有兴趣贡献，请在 GitHub 上查看 Storybook，创建 issue 或提交 pull request。在 Open Collective 上捐赠。在 Discord 与我们聊天——通常有维护者在线。通过关注 Twitter 上的 Storybook 动态并订阅我们的邮件列表，及时了解最新消息。