Storybook Docs 抢先看
将 stories 转化为鲜活的文档
Storybook 是世界上最受欢迎的 UI 组件工作台。 它为包括 React、Vue、Angular、React Native 和 Ember 在内的每个主要视图层实现了结构化的 UI 开发和测试。
现在我们正在为 Storybook 的文档功能增压。Stories 已经捕获了组件的关键状态。Storybook Docs 可以轻松地自动将这些 stories 转化为世界一流的文档。
等等，但是为什么呢？
Storybook 提供了 story 构造，用于捕获组件的关键状态。只需少量工作，您就可以获得基本的组件文档，因此它们非常适合敏捷团队。
但是，如果您想要深入的组件文档呢？或者创建设计系统站点来扩展 UI 库的采用呢？
目前，您必须从插件和 docgen 库中拼凑文档。或者您可以使用 Gatsby、Docz、Styleguidist 等构建单独的文档站点。这意味着 Storybook 用户最终花费在文档工具上的时间比实际编写文档的时间还多。
Storybook 使创建设计系统变得非常简单
如何扩展 UI 库
如果您可以按下一个按钮并导出一个美观的独立设计系统，供您的团队/用户使用，会怎么样？
借助 Storybook Docs，您可以快速生成设计系统文档（具有直观的默认设置），根据自己的喜好进行自定义，并将最佳实践分享给您的团队。
工作原理
- 📦 Doc Blocks: 一组文档组件，作为文档的构建块，可在 Storybook 中使用，并可嵌入到任何文档系统中。
- 📕 Component Story Format: 一种新的 stories 编写格式，更加用户友好，并且可以更轻松地将 Stories 嵌入到其他上下文中。
- 📄 MDX 支持: 具有表现力的文档编写，与 Storybook 的 UI 和工具集成。
- 📤 模板 & 静态导出: 在 Storybook 中实现的最佳实践设计系统，以及使任何人都可以使用其组件库有效地编写文档的模板。
Canvas, Props, Type, Preview, Colors, Icons
Doc Blocks
Storybook Docs 的第一阶段是构建一组用于记录组件和 stories 的核心组件。具体来说
- Canvas. 嵌入带有工具栏和源代码的 Storybook Canvas
- Props. 在表格中记录组件输入
- Type. 显示排版缩放和用法
- Preview. 嵌入任意 stories
- Colors. 显示您的调色板
- Icons. 记录您的图标集
由 Storybook 5.0 设计师 Dominic Nguyen 精心设计，Doc Blocks 可嵌入到 Storybook 的 UI 中，并且还将与 Gatsby 和 Next 等其他静态站点框架兼容。Storybook Docs 将从 React、Vue 和 Angular stories 生成这些 blocks；我们计划与社区一起将它们扩展到其他视图层。
作为该项目的第一个可交付成果，我们将重新实现 Info addon 作为 SB Docs 的一部分，但它将显示在插件面板中，支持多个视图层。
Component Story Format
Storybook 当前的 story 格式将 Storybook 的数据结构（“story store”）作为创作体验的一部分公开。这使得创作体验比需要的更加繁琐。这也使得将 stories 嵌入到其他文档系统中更加困难。
Tom Coleman 设计 了一种替代的 story 格式，并在 SB5 中 进行了原型设计。Docs 基于此格式构建，以实现流畅的创作体验，该体验可移植到其他文档系统。
MDX 支持
Storybook Docs 的第三个方面是 MDX 支持。MDX 是组件时代的 Markdown。MDX 在 Markdown 中嵌入 JSX，使您可以使用 Markdown 的简洁语法（例如 # heading）和 JSX 来处理更高级的组件。并且 Storybook 的 MDX 与我们支持的所有视图层兼容，包括 Vue、Angular 和许多其他视图层。
Docs 基于 Norbert de Langen 对 Notes 插件的改进以及 Igor Davydkin 的 MDX 原型设计而构建。它将尝试向后兼容 stories 中现有的 notes。
Docs 相当于 Info 插件的功能将只是一个特定的 note 模板实例，该实例为每个 story 自动生成。
SB Docs 概念验证的屏幕录像
模板 & 静态导出
Doc Blocks、Component Story Format 和 MDX 支持为开发人员提供了通用的工具，可以解决任何数量的与文档相关的用例。
Storybook Docs 的最后一部分是将这些工具组合到一个简化的最佳实践工作流程中，使每个 Storybook 用户都可以更轻松地编写文档。为此，我们将
- 研究/原型设计: 研究现有的设计系统，编纂最佳实践，并在 Storybook 自身组件库的文档中实施这些实践
- 模板化: 将这些功能构建到现成的模板中，该模板编码了供所有人使用的最佳实践。
- 导出: 使其易于静态导出独立的文档站点，
build-docs镜像build-storybook的用法。具体细节待定。
这必然是当前正在进行的较长设计周期的一部分。
参与进来
Storybook 由优秀的开源贡献者维护，并由顶级维护者的指导委员会指导。
如果您想帮助将 Storybook Docs 变为现实，请与我们合作，帮助构建 Doc Blocks 并为其设计主题。或者确保 SB Docs 支持您喜欢的视图层。或者只是对不断演进的设计提供反馈——我们很乐意让您参与进来！
在 Storybook 的 Discord 聊天 #docs-mode 和 GitHub 上加入我们。我们欢迎来自新开发人员和经验丰富的资深人士的贡献。