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