Storybook 5.1

React Native • 可访问性 • 上下文 • 预设 • 文档更新

Michael Shilman

6月05日, 2019 — @mshilman

最后更新 10月09日, 2020

夏天到了，Storybook 团队很高兴为 UI 开发者带来新的省力功能。Storybook 是世界上最受欢迎的 UI 组件浏览器，5.1 版本包括：

此外，还可以获得 Storybook 文档的技术预览版，以便从现有故事中自动生成丰富的文档。

Storybook for React Native (RN) 回来了，而且比以往更好。RN 服务器现在完全可选。它使用了与 Storybook for Web 相同的代码库，解决了兼容性问题 (RN 0.59)，修复了长期存在的错误，并使得该软件包未来的维护工作更容易。

此外，新的 ondevice-actions 包提供了用于在设备上记录用户操作的 UI。这是朝着更简单、更流畅的 RN 体验迈出的又一步。

感谢 Benoit Dion 牵头 RN 发布，以及 Igor Davydkin、Gytis Vinclovas、Norbert de Langen、Richard Evans 和 Forbes Lindesay 在 RN 支持方面所做的工作。有关升级说明，请参阅 MIGRATION.md。

Storybook 的 a11y 插件使你在构建 UI 时轻松审查 UI 的可访问性。现在，该插件拥有了一个新的超能力，可以直接在你的组件 UI 上高亮显示问题，帮助精确找出可访问性问题的确切位置。在贡献者 Alex Wilson 的功能文章中阅读更多关于改进的内容！

5.1 版本还引入了一个全新的插件，Contexts，由 Leo Y. Li 贡献。addon-contexts 通过简单的下拉 UI 轻松地为你的组件提供数据上下文。例如，你的组件可能基于主题或语言区域设置呈现不同的外观

Contexts 简单而灵活。它允许你为下拉菜单指定图标、一组选项，并提供一种简单的方式在你的故事中检索所选选项。欲了解更多信息，请参阅包的 README。

告别你的 Storybook 配置烦恼！

你知道吗，高达 18% 的 Storybook 支持问题与配置问题有关？！其中许多问题可归因于在高度灵活的工具（babel、webpack）基础上构建，但缺乏适当的抽象层。

预设通过单行配置解决了这个问题，由 Igor Davydkin 和 Michael Shilman（我）贡献。想用 Typescript 编写你的故事吗？添加 @storybook/preset-typescript 包，并在 .storybook/presets.js 中添加以下行：

module.exports = ['@storybook/preset-typescript'];

预设可以组合，轻松地根据你的喜好定制 Storybook。有关预设的更多信息，请查看文档。

如果你正在运行 Storybook 5.0，升级到 5.1 应该轻而易举。如果你使用 4.x 版本，我们提供了 5.0 升级指南来引导你完成。如果你仍然使用 3.x 版本（天哪！），4.0 升级指南应该会有所帮助。

Storybook 新手？请查看 Storybook 教程，获取 React/Angular/Vue 的分步指导。或者直接在你的项目中使用它

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

我很高兴宣布 Storybook 文档的技术预览版，这是一个插件，可以帮助你自动将现有组件故事转化为丰富的文档。

要试用技术发布版本，请按照 Storybook 文档技术预览指南中的说明操作。欢迎在我们的 Discord 的 #docs-mode 频道中提供反馈和讨论。

// A new story API

<Story name="Your cool story">
  <Button>Send</Button>
</Story>

Storybook 是近 700 位社区提交者共同努力的成果，由顶尖维护者组成的指导委员会组织。同时也要感谢在 Open Collective 上的慷慨捐助。

如果 Storybook 让你的 UI 开发流程更轻松，请帮助 Storybook 变得更好。你可以贡献新功能、修复 bug 或改进文档。在 Discord 上加入我们，在 Open Collective 上支持我们，或直接在 Github 上参与。

热门文章