Storybook 6.4

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

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

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

Storybook 6.4 让构建连接组件和页面变得更加容易

• ▶️ 交互式故事 模拟用户行为和调试工具
• ⚡️ 按需架构 实现构建体积缩小 3 倍，加载时间更快
• ⛸ 自动迁移 + 版本化文档 让升级更轻松
• 📋 Linter 强制执行 Storybook 最佳实践
• 💯 数百项修复 和生活质量改进

交互式故事

Storybook 使您能够以称为故事的结构化格式捕获组件的各种状态。每个故事通过隔离渲染组件并提供 props 和模拟数据来模拟特定的 UI 状态。

然而，某些 UI 状态只能通过用户交互才能达到——点击、拖动、轻击、输入等。这些状态以前在 Storybook 中是不可能建模的。为了解决这个问题，我们在 Storybook 6.4 中添加了一个新的构造，称为 play function。它使您能够在故事渲染后运行脚本化的交互。

考虑一下这个 play function，它填写表单以触发验证

// 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 function 开辟了捕获组件用例的新方法，并引入了一些独特的挑战。例如，如果交互失败，是组件中的错误还是 play function 需要更新？

为了帮助调试这种情况，我们正在引入一个实验性的新插件 Storybook Interactions。安装后，它会可视化 play function 的每个步骤

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

按需架构

当您编写故事时，您将组件示例、指南和 API 编译到一个地方。团队在线发布故事，以使审查和协作更容易。

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

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

如何实现？这种性能飞跃是通过重新设计 Storybook 核心来实现的，使其能够独立加载每个故事，而不是将它们打包到一个单一的整体 bundle 中。

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

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

精简的工具和文档

Storybook 是一个快速发展的项目。在完成日常工作的同时，很难跟上所有变化。这就是为什么我们正在精简我们的工具和文档，以使升级毫不费力。

自动迁移 为您提供自动将 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 为您带来的。

功能标志 解锁实验性或突破性功能，这些功能可供那些立即需要它们的人使用，而不会打扰其他人。例如，你们中的许多人一直受到 Storybook 对 Emotion 10 的依赖的挑战。您现在可以使用 emotionAlias 功能标志取消固定 emotion 依赖项

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

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

凭借庞大的表面积和快速的开发节奏，我们意识到在这方面还有很多工作要做。但我们希望这可以使您的 6.4 升级比以前的版本更易于管理。我们将继续在这方面努力，直到我们... 做到完美。🥁

框架改进

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

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

更多数百项改进

Storybook 在各个层面上都在不断改进。6.4 包含更多数百项修复、功能和调整。浏览与 6.4.0-* 匹配的 更新日志 以获取完整的更改列表。亮点包括

• ✅ 改进侧边栏切换的 UI，由 Angeliki Papadopoulou 提供
• ✅ 为 a11y 跳过画布侧边栏链接，由 Deen Denno 提供
• ✅ 全局 URL 参数，由 Gert Hengeveld 提供
• ✅ 选择退出 safe-eval 以符合内容安全策略 (Content Security Policy)，由 Norbert  de Langen 提供
• ✅ 自动构建和更新 stories.json 以简化组合 (composition)，由 Michael Shilman 提供
• ✅ 根据文件路径自动生成组件标题，由 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 的最新消息。