Storybook 6.0
生产级组件开发
Storybook 是世界上最受欢迎的组件工作台，被行业巨头、初创公司和开源项目广泛采用。它组织组件及其状态，为每个主要的视图层构建 UI 开发、测试和文档结构。
6.0 版本为专业前端开发者重新打造了 Storybook。
我们调研了 BBC、IBM、思科和 Shopify 等公司的领先团队。这些团队已成功扩展了组件库，并率先实践了他们自己的最佳实践。
新的 Storybook 融入了这些最佳实践，以便所有团队都能从中受益。更重要的是，我们移除了样板代码和配置，以简化您的开发者体验。它包括
- 💎 Essentials（核心功能）：零配置设置
- 🧬 Args（参数）：下一代动态 Story 格式
- 🎛 Controls（控件）：实时编辑组件示例
- 🌐 Composition（组合）：组合多个 Storybook
- 📚 Documentation（文档）：完整的项目大修
6.0 几乎完全向后兼容 5.X。 迁移指南 »
我们的进展
Storybook 是构建 UI 组件的事实标准。它为每个主要框架实现了结构化的 UI 开发和文档。
📈 采用率创新纪录。Storybook 的使用量持续增长，最近已超过 50,000 个公共仓库和每月 700 万次 npm 下载。我们尤其看到 Vue、Angular 和 Web Component 社区的快速增长。
👩💻 蓬勃发展的社区。根据 GitHub 的数据，Storybook 是 2019 年增长最快的 10 个开源项目之一。它最近突破了 1000 名贡献者 和 50,000 星。
🧪 平台创新。我们成功推出了几项核心平台变更，同时确保了用户的稳定性。值得注意的是，Component Story Format（组件故事格式） 是组件示例的可移植标准。Storybook Docs 为无数 生产设计系统 提供支持，包括 我们自己的。
Essentials（核心功能）：零配置设置
零配置设置是高级用户最需要的功能之一。从 Storybook 的可配置性中获益的领先团队也希望我们“简化”设置。这是因为他们希望公司内部的其他团队也使用 Storybook。强大的零配置设置使采用 UI 组件变得更容易。
Storybook 6.0 预配置了最佳实践功能。这些功能以前作为插件提供。现在，这些 Essential 插件已经过调整、记录并与 Storybook 一起发布。此外，TypeScript 支持已内置，因此您无需担心。
要了解更多信息，请阅读帖子：👉 《零配置 Storybook »》
Args（参数）：下一代 Story 格式
关于 6.0，您会注意到的第二件事是可选的新 Story 构造 Args，它位于开发者体验的核心
export const Basic = (args) => <Button {...args} />;
Basic.args = { label: 'hello' };认真的 Storybook 用户编写数百甚至数千个 Story。他们希望有更多方法通过可移植性、重用和增值功能来使这项投资获得回报。
Storybook Args 是编写 Story 的基础性变革。作为用户，您现在可以将 Story 的输入声明为“args”和初始值。Storybook 及其插件随后将动态修改 args，从而实现诸如自动生成的控件、用于事件日志记录的自动生成操作，甚至自定义工具栏等功能。
Args 还具有符合人体工程学的优势，使您能够
- 🗜 减少 Story 的大小和复杂性
- 🚚 在 Story 之间重用固定数据
- ♻️ 在更广泛的工具中回收 Story
要了解更多信息，请阅读帖子： 👉 《Introducing Storybook Args »》
Controls（控件）：无需代码的实时编辑
Controls 是首批受益于 Storybook Args 的功能之一，它是一个由无数开发者要求的新插件，允许您在不接触代码的情况下动态编辑组件的输入。Controls 是用于快速组件实验的自动生成 UI。
如果您熟悉 Storybook，这可能看起来类似于 Knobs，它所取代的插件。但这种相似性只是表面现象。由于控件是自动生成的，因此无需编写额外的代码，并且在修改 API 时无需维护。控件代码也更具可移植性，因为它不依赖于特定于 Storybook 的 API。
Controls 插件对于专业开发者来说是一个胜利：不仅可以更轻松地自行探索新的组件状态，而且您的 Storybook 可以立即让非技术团队成员更容易访问以获取反馈。
要了解更多信息，请阅读帖子： 👉 《Storybook Controls »》
Composition（组合）：组合 Storybook
Storybook 6 中最令人兴奋的功能之一是 Composition（组合）：能够在本地 Storybook 中浏览来自任何 Storybook 的组件。
此功能是由 IBM、思科和 Chromatic 的团队要求的，他们管理大型 UI 项目，在这些项目中聚合分布式项目非常有用。
Composition（组合）还解锁了新的用例。例如，现在可以在单个组合的 Storybook 中开发 React、Vue 和 Angular 的跨框架设计系统。它还可以在您在 Storybook 中开发应用程序屏幕时浏览设计系统文档。
要了解更多信息，请阅读帖子： 👉 《Storybook Composition »》。
文档大修
最后一个请求 — 由 Betterment 和几乎所有我们交谈过的团队提出 — 是关于 Storybook 本身更好的文档。即使是投入大量资金且具有深厚 Storybook 专业知识的团队也将此列为他们的主要痛点之一。
我们听取了意见，并从头开始完全重新设计和重写了 Storybook 的文档
由 Learn Storybook 的编辑 Dominic Nguyen 和 Tom Coleman 领导，这是您一直想要的编写良好、全面的 Storybook 参考文档。
要了解更多信息，请查看网站： 👉 《Storybook Documentation »》
更多数百项改进
除了重大更改外，我们还改进了现有功能并修复了数百个错误。一些亮点包括
- 布局参数。内置填充/全屏/居中 Story。
- 样式化 Story 排序。指定函数或节顺序以便于排序。
- 动态源代码片段。在 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 的最新消息。