Storybook 5.1
React Native • 无障碍功能 • Context • 预设 • 文档更新
盛夏来临，Storybook 团队很高兴为 UI 开发者带来全新的省时功能。Storybook 是世界上最流行的 UI 组件浏览器，5.1 版本包括
- 📱 移动端：用于 React Native 的独立软件包架构
- 🎟 A11y 插件：实时无障碍功能检查和可视化反馈
- 🛠 Context 插件：用于主题、国际化等的新 UI
- 🎛 预设：用于 babel、webpack 和插件的单行配置
此外，获取 Storybook Docs 的技术预览，以从您现有的 stories 中自动生成丰富的文档。
📱React Native 回归！
用于 React Native (RN) 的 Storybook 强势回归，更胜以往。RN 服务器现在是完全可选的。它使用与 Web 版 Storybook 相同的代码库，从而解决了兼容性问题 (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 撰写的功能帖子，了解有关改进的更多信息！
由 Alex Wilson、Arman Sargsyan、Dominic Nguyen 和 Jimmy Somsanith 全面修订。最初由 Jaco Bovenschen 贡献。
🛠 新的 Contexts 插件
5.1 还引入了一个全新的插件 Contexts，由 Leo Y. Li 贡献。addon-contexts 使您可以轻松地使用简单的下拉 UI 为组件提供数据上下文。例如，您的组件可能会根据主题或语言环境呈现不同的效果
Contexts 插件简单而灵活。它允许您为下拉列表指定图标、一组选项，以及在您的 stories 中检索所选选项的简便方法。有关更多信息，请参阅软件包 README。
🎛 使用 Storybook Presets 实现轻松配置
告别您的 Storybook 配置问题！
您是否知道，高达 18% 的 Storybook 支持问题与配置问题有关？！其中许多问题可归因于在高度灵活的工具（babel、webpack）之上构建，而没有适当的抽象概念与之配合。
Presets 通过单行配置解决了这个问题，由 Igor Davydkin 和 Michael Shilman (我) 贡献。想要用 Typescript 编写您的 stories？添加 @storybook/preset-typescript 软件包，并将以下行添加到 .storybook/presets.js
module.exports = ['@storybook/preset-typescript'];Presets 可以组合使用，以便轻松地根据您的喜好自定义 Storybook。有关预设的更多信息，请查看文档。
升级到 Storybook 5.1
如果您正在运行 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 Docs 技术预览
我很高兴宣布 Storybook Docs 的技术预览，这是一个帮助您自动将现有组件 stories 转换为丰富文档的插件。
- ⚡️从您现有的 Storybook 自动生成文档
- 🏗 “Doc blocks”，方便的文档组件，适用于常见的用例，如 UI 预览、属性表和源代码。
- ✅ 向后兼容来自
addon-notes和addon-info的旧文档。 - 📝 使用 story 嵌入进行自由形式的 MDX 创作
要试用技术版本，请按照Storybook Docs 技术预览指南中的说明进行操作。欢迎在我们的 Discord 上的 #docs-mode 频道中提供反馈和讨论。
// A new story API
<Story name="Your cool story">
<Button>Send</Button>
</Story>由 Michael Shilman (我!)、Igor Davydkin、Lionel Benychou、Norbert de Langen 和 Tom Coleman 进行初步开发。由 Dominic Nguyen 进行设计和主题设置。特别感谢抢先使用者 Pål Nes、Jeroen Reumkens、Bart Ledoux 和 Tom Speak。
感谢社区
Storybook 是近 700 位社区贡献者 的共同成果，并由顶级的维护者组成的指导委员会组织。还要感谢在 Open Collective 上的慷慨捐款。
如果 Storybook 使您的 UI 开发人员工作流程更轻松，请帮助 Storybook 变得更好。您可以贡献新功能、修复错误或改进文档。在 Discord 上加入我们，在 Open Collective 上支持我们，或者直接在 Github 上开始参与。
代码贡献者
@44px @aamct2 @alexan @anru @antony @armanio @armujahid @arnabsen @arnaudmanaranche @aspidov @benediktvaldez @bennypowers @benoitdion @breadadams @cam-stitt @clehnert-psl @codebyalex @colinrtaylor @coryhouse @curtishumphrey @devrelm @domyen @dougmacknz @dwightjack @eddiemonge @ehzhang @electricg @elevatebart @eskelcz @evolutionxbox @expe-lbenychou @fonger @forbeslindesay @gaetanmaisse @glazy @glitchperfect @gokatz @hipstersmoothie @hypnosphi @jamisuomalainen @jangerhofer @joefraley @jonrimmer @jsomsanith @kaidjohnson @kennethtruong @kohakukun @konstantindenerz @kroeder @krustal @kudryavtsevmd @lauritzsh @leovanhaaren @leoyli @lgraziani2712 @lhguerra @libetl @lifeiscontent @lonyele @lozinsky @lucas-carl @lukeaskew @malykhinvi @mansoorbashabellary @maraisr @marina-mosti @masup9@mattfwood @maximsagan @means88 @mickaelzhang @mikach @mikaelcarpenter @mohamedmansour @mohsinulhaq @mortal94@mrmckeb @myoxocephalus @mzdunek93 @n1ck @ndelangen @pajter @petekp @pgoforth @philipp-srf @phoenixton @rafaelfbs @rajatrao777 @rmevans9 @robotnicka @sairus2k @samouss @sergeyzwezdin @shaundon @shilman @shimisun @simenb@snowystinger @spy-seth @steffengorenflo @stephanemw @sto3psl @thekogmo @thollander @tmeasday @toshi1127 @trevordmiller @trevoreyre @tzkuei @vanpacheco @viniciuskneves @vpicone @wilau2 @wuweiweiwu @xdvarpunen @yjoer @zewish @zsalzbank