Storybook 6.0

Storybook 是世界上最受欢迎的组件工作坊，被行业巨头、初创公司和开源项目广泛采用。它组织组件及其状态，为所有主要视图层构建 UI 开发、测试和文档。

6.0 版本的发布为专业前端开发者重塑了 Storybook。

我们调研了 BBC、IBM、Cisco 和 Shopify 等公司的领先团队。这些团队成功地扩展了组件库并开创了自己的最佳实践。

新版 Storybook 整合了这些最佳实践，以便所有团队都能受益。此外，我们移除了样板代码和繁琐配置，以简化您的开发体验。它包括

• 💎 基本要素: 零配置设置
• 🧬 Args: 下一代动态故事格式
• 🎛 Controls: 实时编辑组件示例
• 🌐 组合: 组合多个 Storybook
• 📚 文档: 项目全面升级改造

6.0 几乎与 5.X 完全向后兼容。迁移指南 »

我们目前的进展

Storybook 是构建 UI 组件的事实标准。它为所有主要框架提供了结构化的 UI 开发和文档支持。

📈 创纪录的采用率。 Storybook 使用量持续增长，近期已超过 50,000 个公开仓库以及每月 700 万次的 npm 下载量。我们看到 Vue、Angular 和 Web Component 社区的增长尤其迅速。

👩‍💻 蓬勃发展的社区。 根据 GitHub 的数据，Storybook 是 2019 年增长最快的十大开源项目之一。近期贡献者数量已超过 1000 人，并且 star 数达到 50,000。

🧪 平台创新。 我们成功推出了多项核心平台改动，同时确保了用户的稳定性。值得一提的是，Component Story Format 是一种可移植的组件示例标准。Storybook Docs 为无数生产级设计系统提供支持，包括我们自己的设计系统。

基本要素：零配置设置

零配置设置是高级用户最常要求的功能之一。受益于 Storybook 可配置性的领先团队也希望我们“简化”设置。这是因为他们希望公司内的其他团队也能使用 Storybook。一个强大的零配置设置使得采用 UI 组件变得更容易。

Storybook 6.0 预先配置了最佳实践功能。这些功能之前作为插件提供。现在这些 Essential（基本要素）插件已得到调整、文档化，并随 Storybook 一起发布。此外，内置了 TypeScript 支持，因此您也不必为此担心。

了解更多，请阅读这篇文章：👉 零配置 Storybook »

Args：下一代故事格式

关于 6.0 您会注意到的第二件事是一个可选的、新的故事结构：Args，它构成了开发者体验的核心

export const Basic = (args) => <Button {...args} />;
Basic.args = { label: 'hello' };

Storybook 的深度用户会编写成百上千个故事。他们希望找到更多方式通过可移植性、可重用性和增值功能，让这些投入获得回报。

Storybook Args 是编写故事的基础性改变。作为用户，您现在可以声明故事的输入：“args”及其初始值。Storybook 及其插件随后会动态修改这些 args，实现诸如自动生成的控件、用于事件日志记录的自动生成操作，甚至自定义工具栏等功能。

Args 还具有人体工程学方面的优势，让您能够

• 🗜 减少故事的大小和复杂性
• 🚚 重用跨故事的共享数据
• ♻️ 在更多工具中复用故事

了解更多，请阅读这篇文章：👉 Storybook Args 介绍 »

Controls：无需代码的实时编辑

最早受益于 Storybook Args 的功能之一是 Controls，这是一个新插件，无数开发者都要求过，它允许您无需修改代码即可动态编辑组件的输入。Controls 是用于快速进行组件实验的自动生成 UI。

如果您熟悉 Storybook，这可能看起来类似于它所取代的 Knobs 插件。但这种相似性只是表面上的。由于 Controls 是自动生成的，因此无需编写额外代码，并且在您修改 API 时也无需维护。Controls 代码也更具可移植性，因为它不依赖于 Storybook 特定的 API。

Controls 插件对专业开发者来说是一个福音：您不仅可以更轻松地自行探索新的组件状态，而且您的 Storybook 也能立刻让非技术队友更方便地提供反馈。

了解更多，请阅读这篇文章：👉 Storybook Controls »

组合：组合多个 Storybook

Storybook 6 中最令人兴奋的功能之一是组合（Composition）：能够在本地 Storybook 中浏览来自任何 Storybook 的组件。

IBM、Cisco 和 Chromatic 的团队要求开发此功能，他们负责大型 UI 项目，在这些项目中，汇总分布式项目非常有用。

组合功能还解锁了新的使用场景。例如，现在可以在单个组合的 Storybook 中，开发跨 React、Vue 和 Angular 框架的设计系统。它还使得在 Storybook 中开发应用屏幕时，可以同时浏览设计系统文档。

了解更多，请阅读这篇文章：👉 Storybook 组合 »。

文档全面升级改造

最后一个要求——来自 Betterment 以及我们几乎与之交谈过的每个团队——是改进 Storybook 本身的文档。即使是投入大量精力、拥有深厚 Storybook 专业知识的团队，也将此列为他们的主要痛点之一。

我们听取了意见，并从零开始彻底重新设计和重写了 Storybook 的文档

由 Learn Storybook 的编辑 Dominic Nguyen 和 Tom Coleman 主导，这是您一直想要的、编写精良、内容全面的 Storybook 参考资料。

了解更多，请访问该网站：👉 Storybook 文档 »

数百项其他改进

除了主要变更之外，我们改进了现有功能并修复了数百个错误。部分亮点包括

• 布局参数。内置了带内边距/全屏/居中的故事模式。
• 样式化的故事排序。可以指定函数或部分顺序以便轻松排序。
• 动态源码片段。在 React 中，使用实时的控件值渲染 JSX。
• 版本发布说明。升级后查看新增内容。
• Yarn 2。支持下一代包管理。

查看完整列表请参见：👉 CHANGELOG.md »

1 分钟安装

要尝试这些功能，请将现有项目升级到 Storybook 6.0

npx sb upgrade

在大多数情况下，这足以让您开始使用新版本。但如果您遇到困难，我们随时为您提供帮助。

查看完整指南请参见：👉 Storybook 6 迁移指南 »

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

npx sb init

您将获得完整的开箱即用 6.0 配置，包括本文中描述的所有内容，以及一个为新用户设计的精美入门体验。

参与贡献

Storybook 6.0 由以下贡献者倾力呈现

@adamborowski @ajkl2533 @amannn @andre-brdoch @asudoh @atanasster @brandonseydel @cavanwagg @chrisj-skinner @christianwiedemann @cpgruber @daniel-ac-martin @domyen @eric-hc @fernandopasik @fjorgemota @frassinier @fred-el-jolo @gaetanmaisse @ghengeveld @graup @hipstersmoothie @hypnosphi @igor-dv @isaacplmann @john015 @johnalbin @jonspalmer @jorisw @kdnk @kevin940726 @kruthivijay31 @kylesuss @lifeiscontent @luke-j @marcobiedermann @markhuot @marklb @marklyck @matheo @matus12 @mbelsky @mdchristians @mkamranhamid @mrmckeb @nad182 @nanoblit @ndelangen @niedzielski @okovpashko @orpheusp @papistan @pyrolistical @rek @sarioglu @sean-codes @sekiya9311 @shilman @skovy @tmeasday @tomastomaslol @tooppaaa @vvanpo @wormwlrm @yannbf

该项目由 1000 多名开源贡献者维护，并由一个由顶级维护者组成的指导委员会指导。如果您有兴趣贡献，可以在 GitHub 上查看 Storybook，创建一个 issue，或提交 pull request。在 Open Collective 上捐赠。在 Discord 中与我们聊天——通常会有一位维护者在线。

通过在 Twitter 上以及订阅我们的官方邮件列表，了解 Storybook 最新动态。