Storybook 7.1

Storybook 7.1 发布了！新版本带来应用内引导、零配置样式支持、TypeScript 代码片段等更多功能。

Michael Shilman

2023年7月19日 — @mshilman

最后更新 2023年7月20日

Storybook 是用于 UI 组件开发、文档编写和测试的行业标准工作坊。Twitter、GitHub、BBC 和《纽约时报》等团队都在使用它。

继 Storybook 7.0 于四月发布后，我们计划推出更频繁、规模更小的未来版本。这将有助于 Storybook 与前端生态系统的变化保持同步，同时为用户简化升级流程。

今天，我们很高兴为您带来首个此类版本：Storybook 7.1，其中包含了大量改进。

🏄‍♀️ 应用内引导，帮助您学习 Storybook
💅 零配置样式支持，支持 Tailwind、Material UI、styled-components 和 Emotion
🗃️ API 参考文档
✅ TypeScript优先的代码片段
📗 Vue 3 源码片段和响应性改进
📇 文档目录
🎨 Figma Design 插件官方支持
💯 数百项其他修复和改进

让我们深入了解详情，并分享 Storybook 的未来发展方向。

应用内引导

Storybook 支持 React、Vue、Angular、Web components、Svelte、Webpack 和 Vite，以及一个包含 400 多个集成的生态系统。这使其成为迄今为止最强大的组件工作坊。

然而，这种强大功能也伴随着一定的代价：在新的项目中设置 Storybook 并不总是最容易的。

在 Storybook 7.1 中，我们通过为新用户引入引导流程来简化学习曲线。它将指导您熟悉 Storybook，引导您编写第一个故事，并指引您查看有关如何自定义项目的文档！

A demonstration of the onboarding flow within Storybook 7.1

首先，引导流程将在所有新的 React 项目中提供。我们将在未来的版本中将其扩展到涵盖所有主要框架。

了解更多关于 Storybook 新的应用内引导

零配置样式支持

Storybook 7.1 为Storybook 的 Styling 插件带来了额外动力，现在它可以自动配置 Storybook 以支持 Tailwind、Material UI、Emotion 和 styled-components！

A demonstration of the styling addon automatically configuring Storybook for Tailwind

我们将在未来的版本中向此列表添加更多库。

了解更多关于 Storybook 7.1 中的零配置样式支持

API 参考文档

今年早些时候，我们在 Storybook 用户中进行了一项调查，最常被请求的改进是提供完善的 API 文档。你们提出来了，我们做到了！

在 Storybook 的文档中，我们引入了配置文件、ArgTypes 以及 Storybook Docs 中的 Doc blocks 的 API 参考。我们还将 Storybook 的文档改为了 TypeScript 优先，因为 TS 占所有 Storybook 项目的 80% 以上。

了解更多关于 Storybook 7.1 的文档改进

Vue 3 源码片段和响应性

Vue 是 Storybook 第二受欢迎的渲染器，每周 npm 下载量接近 50万。尽管 Vue 很受欢迎，但由于维护者较少，其支持一直落后于其他流行的框架。

在 7.1 中，我们有两位新的 Vue 维护者，Chakir Qatab 和 Kasper Peulen，他们极大地改善了 Vue 的体验。感谢他们，Storybook 7.1 包含了对 Vue 3 源码片段的关键 bug 修复以及更新控件时的响应式渲染。

A demo of Vue 3 source snippets in Storybook 7.1

UI 文档目录

通过Storybook 7.0 Docs，我们对 UI 文档功能进行了全面改革。这为大多数用户带来了巨大的改进——显著清理了信息架构、MDX 处理和Doc Blocks 等等。

然而，7.0 的文档对于重度文档用户来说包含了特别具有破坏性的变化。Storybook 7.0 不再以标签页的形式显示文档，而是将其显示为侧边栏菜单项。由于不再有文档标签页，点击侧边栏中的一个故事会直接跳转到该故事。这意味着通过点击侧边栏无法再在大文档页面内滚动。

为了解决这个问题，我们添加了一个可选的目录，它会浮动在页面的右侧。与隐藏侧边栏中故事的 --docs CLI 标志结合使用时，您可以获得类似于 Storybook 6.0 中“经典”文档的面向文档的用户体验。

Table of contents for Docs in Storybook's UI

要全局启用此功能，您可以在您的 .storybook/preview.js 文件中设置 docs.toc 参数

export default {
  parameters: {
    docs: { toc: { /* options */ } }
  }
};

有关完整的选项列表，请参阅我们的文档。

Figma Design 插件官方支持

作为 7.1 的一部分，我们已将流行的Designs 插件升级，使其与 Storybook 7.0 兼容。我们还将其纳入 Storybook 的核心，以实现更紧密的集成。如果您目前使用 storybook-addon-designs，请升级到 @storybook/addon-designs 以获取最新功能。

非常感谢创建并持续帮助维护该插件的Shota Fuji！

Figma 合作关系

Storybook 集成了各种设计工具。其中，Figma 是我们社区中最受欢迎的。这就是为什么我们很高兴成为 Figma Dev Mode 的官方合作伙伴，Dev Mode 是一种用于简化开发者交接的新工作流程。

Storybook starring in the keynote at Config 2023

了解更多关于将 Storybook 引入 Figma 以及将 Figma 引入 Storybook 的信息

数百项其他改进

Storybook 的每个版本都包含数百项从底层到顶层的较小改进。

Storybook 7.1 包含许多值得注意的性能改进

Esbuild 不再运行在 node_modules 上，节省了几秒钟的开发启动时间。#23018
您现在可以使用 SWC 替换 Babel，以加快开发和生产构建速度。#22075
您现在可以使用 SWC 代替 terser 进行压缩，以加快生产构建速度。#22843
我们对 react-docgen-typescript 进行惰性加载，以加快 React TS 开发启动速度。#23019

我们还将大多数 Storybook 包转换为严格模式的 TypeScript，以帮助捕获 bug 并提高可维护性。这项工作由Kasper Peulen 领导，并得到了社区贡献者Jen Chan、Martin Kuriacka、Efren Aragon、Taehyeon Kim、Fredrick Ugonna、Kyle Tsang、KT、María Simó 和 EDuToit 的贡献支持。

有关完整的更改列表，请参阅7.1 预发布更新日志。

通往 8.0 之路

Storybook 7.1 是我们迈向 8.0 的第一站。我们将改进启动速度、安装大小/占用空间和稳定性。

8.0 中的一个关键破坏性变更将是移除遗留的 storiesOf API，这是 2017-2019 年间编写故事的方式。如果您是 storiesOf 用户，请查看我们的 RFC 以了解这对您意味着什么。

升级到 Storybook 7.1

要将您的 Storybook 升级到 7.1，请运行

npx storybook@latest upgrade

有关从早于 Storybook 7 的版本升级的指南，请查看 Storybook 7 迁移指南。

或者，对于全新安装，请使用以下命令将 Storybook 引导到现有应用中

npx storybook@latest init

参与其中

专业的 UI 开发者每天都依赖 Storybook。采用 Storybook 后，您将获得一套工具、强大的插件以及开箱即用的集成，从而加快开发速度。

该项目由 2023 多名开源贡献者维护，并由一个指导委员会指导。如果您有兴趣贡献，请在 GitHub 上查看 Storybook，创建 issue 或提交 pull request。在 Open Collective 上捐赠。在 Discord 中与我们交流。在 Twitter 和 LinkedIn 上关注 Storybook 新闻，或订阅我们的邮件列表。

致谢

非常感谢所有为 Storybook 7.1 做出贡献的人们！

核心团队

@cdedreuille @chakas3 @dannyhw @domyen @ianvs @jreinhold @joe-vaughan @jonniebigodes @integrayshaun @kasperpeulen @kylegach @MichaelArestad @ndelangen @shilman (我本人!) @tmeasday @valentinpalkovic @vanessayuenn @yannbf @winkerVSbecks

社区贡献者

@0916dhkim @1234tgk @adityakrmodak @amerlander @andarist @auctumnus @bashmish @benmccann @coliff @darleendenno @daves28 @dschungelabenteuer @dubbs @dxb-story @edutoit @efrenaragon96 @felixrizzolli @fezvrasta @filiptammergard @g-cappai @gitstart @gufah @hcvdhaar @hobbes7878 @honzahruby @idesigncode @jackw @jared-christensen @joaonunomota @joeycozza @joriswitteman @joshbolduc @jpzwarte @junghoe @kolife01 @kubijo @kuriacka @kyletsang @literalpie @liwn9527 @luk-z @manbearwiz @mandarini @mariasimo @mariocadenas @martinnabhan @mdornseif @medihack @michens @miily8310s @mvarendorff @notwoods @noviceguru @orangecms @pascalfiv @pruthvip15 @redbugz @roel-t @sheriffmoose @showrin @sitogi @sjwilczynski @smeagol74 @sookmax @specialdoom @syabro @taehyeon-envoi @thtliife @ubugnu @usrrname @webblocksapp @wise-introvert @ygkn @yilun-sun @youngboy @zachtball