Storybook 5.0

我们在 2019 年伊始推出了 Storybook 5.0 (SB5)，这是迄今为止我们最大的版本。以下是其包含的内容

• 🎨 Storybook 开发者体验的全面革新
• 💅 主题就绪的组件库
• 🛠 插件的演进式前端架构
• 🖼 全新的 Storybook 网站

继续阅读以了解项目更新、改进概览和升级说明。

Storybook 的进展和未来展望

Storybook 是世界上最受欢迎的 UI 组件工作台。它为包括 React、Vue、Angular、React Native 和 Ember 在内的每个主要视图层实现结构化的 UI 开发、测试和文档编写。

📈 创纪录的采用率：Storybook 是 Airbnb、Slack、Squarespace、Lyft、Dropbox 等 UI 巨头的首选工具。其采用率在行业和开源项目中持续增长，最近月 npm 下载量超过 450 万次。

👩‍💻 蓬勃发展的社区：Storybook 社区最近超过了 600 位贡献者，并在 Github 上获得了 3.4 万颗星，使我们跻身星数排名前 40 的 Javascript 项目。社区比以往任何时候都更加强大。为了指导项目走向未来，我们成立了一个 指导委员会，由顶级维护者组成。

🛠 专业级工具：2018 年，我们专注于构建 Storybook 平台：扩展视图层支持、插件交叉兼容性以及与 JavaScript 工具共同发展。现在在 2019 年，我们通过以下方式改进开发者体验：

• 优先考虑用户反馈
• 让 Storybook 以你想要的所有方式进行配置
• 通过更小、更频繁的版本发布来稳定平台

向新的 Storybook 问好

SB5 的核心是一个漂亮的新用户界面。具有讽刺意味的是，对于这样一个广泛使用的 UI 开发工具，Storybook 本身在设计方面却有许多不足之处。Storybook 的新设计是自项目开始以来的首次重大改版。

新的 UI 解决了自 2016 年以来积累的用户反馈。它拥有

• 🌓 具有浅色和深色主题的新设计
• 🛠 用于轻松访问插件的画布工具栏
• 🗺 带有直观菜单的全面改进的导航侧边栏
• 🗜 重新设计的插件面板，带有方便的按钮来切换可见性和方向
• ⌨️ 改进的、用户可配置的键盘快捷键
• 🌍 消除长查询参数字符串的新 URL 结构

这些升级改进了整个 Storybook 视图层、插件和集成的生态系统。在 Meet Storybook’s new design 中阅读有关此项目的更多信息。

UI 由 Dominic Nguyen 设计。由 Norbert de Langen、Dominic Nguyen、Tom Coleman、Jessica Koch、Alexandre Bodin 以及更多贡献者实现。

重用 Storybook 的组件

Storybook 是用 Storybook 构建的。我们正在发布 @storybook/components 库，以加速开发、推广最佳实践并试用我们自己的 UI 工作流程。这意味着插件开发者可以更快地构建与 Storybook UI 一致的插件。

Storybook Components 使用 React 和 Emotion 实现。该库包含 Storybook 界面的所有构建块，专为桌面和移动设备打造，并且可以通过 Emotion 灵活的主题 API 进行自定义。

发布该库实现了几个不同的目标

• ⚡️加速开发：我们记录常见用例、自动化可视化测试并推广代码重用
• ✨ 推广最佳实践：我们的长期目标是，该库将成为如何在 Storybook 中构建良好文档的设计系统的典范。我们还有很长的路要走，但 SB5 是第一步。
• 🏗 改进工作流程：我们试用自己的产品。SB5 的许多改进都来自于在 Storybook 中构建我们的组件库。

在 Storybook 的 Official Storybook 中查看该库，并继续关注更多文档，因为我们将继续为 Storybook 社区构建此资源。

根据你的需求自定义 Storybook

Storybook 还拥有一个新的前端架构，以改进自定义。Storybook 一直提供可hack的插件和构建配置 API；现在 SB5 开始开放用户界面以进行配置

主题 API

Storybook 中的主题设置比以往任何时候都更容易、更一致且更好看。这通过新的主题 API 实现，该 API 改进了 4.0 版本中提供的先前 API。

Storybook 开箱即用地包含了手工制作的“浅色”和“深色”主题。这些主题是独立的，可用作自定义的起点。这是一个简单的示例，可帮助你入门

SB5 的主题系统被抽象为一组核心变量。这简化了开发人员的主题设置，同时在 Storybook 的 UI 发展时更容易保持向后兼容性。有关 SB5 中主题设置的更多信息，请参阅更新后的 Theming 文档。

对于喜欢冒险的主题作者，还有一个“逃生舱口”，允许你 hack 底层的 Emotion 主题 API。

插件 API

SB5 包含一个扩展的插件 API，其中包含插件连接到 UI 的两种新方式：工具栏和选项卡。

• 工具栏：插件现在可以将 UI 添加到……稍等一下……工具栏！！这使得用户可以发现并立即控制插件。Viewport、Backgrounds 和 A11y 插件都展示了这项新功能。
• 选项卡：插件还可以向主故事面板添加新选项卡，以将替代视图嵌入到你的故事中。Notes 插件展示了此功能，我们很快将构建更多创造性的集成。

这些新钩子仅仅是我们如何向插件开放 SB5，同时保持简单、精简 API 的开始。

对于插件用户，安装和配置在 SB5 中没有改变。对于对新 API 感兴趣的插件作者，请参阅 Storybook 插件文档。

全新的网站

SB5 发布的锦上添花之作是 Storybook 的新网站。这个令人惊叹的网站阐明了 Storybook 最常见的优势——灵感来自大型社区的聚会、讨论、演示文稿和博客文章。

由 Dominic Nguyen 设计，并由 Igor Davydkin、Sacha Greif、orta 和 Aparajita Fishman 进行评审/QA。该网站由 Dominic、Tom、Dale Blackburn、Lucas Carl 和 Chak Shun Yu 使用 Gatsby 实现。它是关于如何在 Storybook 中系统地构建网站的绝佳参考点。

“但是我为什么需要 Storybook？”

用户经常问为什么选择 Storybook？Storybook 有许多用例：组件浏览器、样式指南、UI 文档、游乐场、沙箱、工作台和库。太多了，以至于难以描述——即使对于维护者来说也是如此。

我很高兴地宣布一个新的介绍视频，它将一劳永逸地回答这个长期存在的问题。在不到两分钟的时间里，你将了解为什么隔离组件开发对于现代应用程序至关重要，以及 Storybook 如何帮助你做到这一点。

令人叹为观止的介绍视频由 Daniel Egerev 制作动画，并由 Dominic Nguyen 执导。

升级到 Storybook 5.0

如果你正在运行 Storybook 4.x，则升级到 5.0 非常简单。我整理了一份 5.0 升级指南来指导你完成升级。如果你正在使用 3.x 版本，4.0 升级指南也将有所帮助。

如果你是 Storybook 的新手，请查看 Storybook 教程，以获得 React/Angular/Vue 的分步演练。

或者，如果你更喜欢直接上手，只需 30 秒即可将 SB5 添加到现有项目中

cd my-project
npx -p @storybook/cli sb init
yarn storybook

感谢社区

Storybook 是 600 多名社区提交者的产品，由顶级维护者的 指导委员会 组织。感谢 Open Collective 上的慷慨捐款，我们拥有 2 万美元的年度预算，用于基础设施、贡献者的赠品、文档和推广。

Storybook 5.0 包含以下人员的代码贡献：@backbone87 @bertho-zero @dandean @domyen @donaldpipowitch @ebrearley @gabrielcsapo @gaetanmaisse @gbakernet @gongreg @greysteil @hypnosphi @igor-borisov @igor-dv @jessica-koch @jessidhia @jhummel @johot @jure @keraito @koenpunt @kroeder @kwm14 @kylemh @lauriejones @loklaan @maacky @manbeartm @marcobiedermann @martinmckenna @matteo-hertel @misund @mrmckeb @myoxocephalus @ndelangen @nitaking @pascalduez @petersendidit @pgoforth @pickra @piperchester @pksunkara @psyked @rwoverdijk @sayegh7 @sharils @shilman @tmeasday @tomraithel @web-padawan @wuweiweiwu

SB5 是我们第一次进行协调的 RC 流程。感谢所有测试和报告问题的人，特别感谢 MVP 的 Alex Wilson 和 Leo Y. Li 为 SB5 进行了全面的测试。

如果 Storybook 为您的 UI 开发流程带来愉悦和效率，请考虑帮助 Storybook 变得更好。 无论是贡献像这篇文章中描述的新功能、修复错误，还是帮助改进文档，每次发布都需要付出大量的工作。 请在 Discord 上加入我们，在 Open Collective 上支持我们，或者直接参与 Github。

有疑问或赞扬？ 请在 Twitter, Discord, Github 上或在下面的评论中打个招呼。 请 👏 为这篇文章鼓掌并分享，以帮助更多人发现它。