Storybook 7.1
Storybook 7.1 发布啦！包含应用内引导、零配置样式支持、TypeScript 代码片段以及更多功能。
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 addon 官方支持
- 💯 数百项更多 修复和改进
让我们深入细节，分享更多关于 Storybook 未来发展方向的信息。
应用内引导
Storybook 支持 React、Vue、Angular、Web components、Svelte、Webpack 和 Vite 以及超过 400 个集成的生态系统。这使其成为迄今为止功能最强大的组件工作台。
然而，这种强大功能是有代价的：在新项目中设置 Storybook 并不总是那么容易。
在 Storybook 7.1 中，我们通过引入 面向新用户的引导流程 来平滑这个学习曲线。它会在 Storybook 中为您定位，指导您编写您的第一个 story，并指导您查阅有关如何自定义项目的文档！
首先，引导流程将在所有新的 React 项目中提供。我们将在未来的版本中将其扩展到涵盖所有主要框架。
阅读更多关于 Storybook 新的应用内引导的信息
Joe Vaughan
零配置样式支持
Storybook 7.1 为 Storybook 的 Styling addon 带来了额外的火力，现在可以自动为 Tailwind、Material UI、Emotion 和 styled-components 配置 Storybook！
我们将在未来的版本中向此列表添加其他库。
阅读更多关于 Storybook 7.1 中的零配置样式支持的信息
Shaun Evening
API 参考文档
今年早些时候，当我们与 Storybook 用户分享一项调查时，最常要求的改进是完善的 API 文档。您提出了要求，我们已经交付了！
在 Storybook 的文档中，我们为 配置文件、ArgTypes 和 Storybook Docs 中的 Doc blocks 引入了 API 参考。我们还将 Storybook 的文档设为以 TypeScript 为先，因为 TS 占所有 Storybook 项目的 80% 以上。
阅读更多关于 Storybook 7.1 的文档改进的信息
Kyle Gach
Vue 3 源代码片段和响应式
Vue 是 Storybook 第二受欢迎的渲染器，每周 npm 下载量接近 50 万次。尽管 Vue 很受欢迎，但由于维护人员较少，因此对它的支持落后于其他流行的框架。
在 7.1 中，我们有两位新的 Vue 维护人员，Chakir Qatab 和 Kasper Peulen，他们极大地改善了 Vue 体验。感谢他们，Storybook 7.1 包含了对 Vue 3 源代码片段的关键错误修复，以及在您更新控件时的响应式渲染。
UI 文档目录
通过 Storybook 7.0 Docs，我们对 UI 文档功能进行了全面改革。它包含了对大多数用户的巨大改进——极大地清理了信息架构、MDX 处理 和 Doc Blocks 等等。
然而，7.0 的 Docs 对重度 Docs 用户来说包含了特别具有颠覆性的变化。Storybook 7.0 没有在选项卡中显示文档，而是将它们显示为侧边栏菜单项。由于不再有文档选项卡，因此单击侧边栏中的 story 会直接转到该 story。这意味着不再可能通过单击侧边栏在大型文档页面中滚动。
为了解决这个问题，我们添加了一个可选的目录，它浮动在页面的右侧。当与隐藏侧边栏中 story 的 --docs CLI 标志结合使用时，您可以实现类似于 Storybook 6.0 中“经典”文档的面向文档的 UX。
要全局启用此功能，您可以在 .storybook/preview.js 文件中设置 docs.toc 参数
export default {
parameters: {
docs: { toc: { /* options */ } }
}
};
有关选项的完整列表，请参阅我们的文档。
Figma design addon 官方支持
作为 7.1 的一部分，我们升级了流行的 Designs addon，使其与 Storybook 7.0 兼容。我们还将其引入 Storybook 的核心以实现更紧密的集成。如果您当前使用 storybook-addon-designs，请升级到 @storybook/addon-designs 以获取最新的热门功能。
衷心感谢 Shota Fuji，他创建了这个 addon 并继续帮助维护它！
Figma 合作伙伴关系
Storybook 与 各种设计工具 集成。其中，Figma 是我们社区中最受欢迎的。这就是为什么我们很高兴成为 Figma Dev Mode 的官方合作伙伴，Dev Mode 是一种用于简化 开发者移交 的新工作流程。
了解更多关于将 Storybook 引入 Figma 以及将 Figma 引入 Storybook 的信息
Dominic Nguyen
数百项更多改进
每个 Storybook 版本都包含数百项遍及堆栈的小改进。
Storybook 7.1 包含许多值得注意的性能改进
- Esbuild 不再在
node_modules上运行，从而节省了数秒的开发启动时间。#23018 - 您现在可以用 SWC 替换 Babel，以加快开发和生产构建速度。#22075
- 您现在可以使用 SWC 而不是 terser 进行缩小，以加快生产构建速度。#22843
- 我们延迟加载
react-docgen-typescript以加快 React TS 开发启动速度。#23019
我们还将大多数 Storybook 包转换为严格模式 TypeScript，以帮助捕获错误并提高可维护性。这项工作由 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 年编写 story 的方式。如果您是 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