面向新框架的 Storybook 文档

Storybook 是 React、Vue、Angular、Ember 等的标准 UI 组件工作台。Airbnb、Lyft、Squarespace、Slack、Dropbox 和 33,000 多个公共 GitHub 项目都在使用它。

在 Storybook 5.3 中，我们将加倍投入对 Vue、Angular、Ember 和 Web Component 开发者的承诺。这一切都始于 Storybook Docs，这是一个大胆的项目，旨在为 UI 组件和库自动生成最佳实践文档。

在过去的 4 个月中，SB Docs 已经在生产环境的 React 应用和设计系统中经过实战检验和完善。现在，SB Docs 终于发布了，并且首次支持 Vue、Angular、Ember 和 Web Components！您将获得

• 📚 文档。 当您像往常一样编写 stories 时，Storybook 可以帮助您“免费”获得最佳实践文档。然后，可以使用 MDX 对这些文档进行自定义和详细说明，MDX 是一种允许您在同一文件中编写文档和 stories（组件示例）的格式。
• 📦 DocBlocks。 DocBlocks 是一组漂亮的现成组件，可以混合和匹配，以构建样式指南和组件文档页面（属性表、调色板等）。

🏆 Storybook 是一个通用的 UI 文档工具

Storybook 的目标是为构建组件驱动的 Web UI 提供尽可能最佳的开发者体验。这就是为什么它支持十几种视图层，并且 Storybook 应用程序被设计为与框架无关。

我们对现代 Web 技术和框架的通用兼容方法正在为社区带来回报。每次有人添加功能或修复错误，无论他们选择哪个框架，每个人都会受益。

六个月前，我 宣布了 Storybook Docs，这是一个雄心勃勃的项目，旨在简化组件库和设计系统的构建。我们的第一个 beta 版本侧重于 React，Storybook 最大的用户群体。

今天，我很高兴地宣布首次支持 Vue、Angular、Ember 和 Web Component 文档 — 这得益于我们通用的兼容架构以及优秀的 Storybook 社区的贡献。

📚 Storybook Docs 是如何再次工作的？

Storybook 的核心体验是一个 Canvas，它显示 stories，即隔离的组件示例。例如，下面 Badge 组件的变体被记录为类似于标准 ES6 模块的 stories。然后，Storybook 在隔离的开发环境中显示 Badge:withIcon。

Storybook Docs 将开发环境演变为 UI 文档工具。当您在项目中安装 addon-docs 时，您将获得 自动生成的组件文档，该文档遵循来自 Auth0、Airbnb 和 Microsoft 等社区成员的最佳实践。

如果您想要更大的灵活性，Storybook MDX 是一种方便的方式，可以在同一文件中并排编写完全自定义的长篇文档和 stories

它还允许您混合和匹配 DocBlocks，这是用于组件和样式指南文档的高质量构建块

🎁 更多框架的文档

面向 React 的 Storybook Docs 在 5.2 中发布，并迅速成为领先的 UI 文档工具之一。在 5.3 中，Storybook Docs 将支持扩展到 Vue、Angular、Web components 和 Ember。这包括

• 🗂 属性表生成。 提取所有组件元数据的名称、描述、类型和默认值。
• 📄 组件描述。 从 JSDoc 注释中提取组件描述并在文档中显示它们。
• 🌮 内联 story 渲染。 可选择内联渲染 stories（而不是在 iframe 中），以提高性能并与开发工具兼容。

这使 Vue、Angular、Web components 和 Ember 的集成与 React 集成几乎相同。

以下是新框架的属性表的样子。与 React 属性表不同，这些新的属性表分为多个部分，因为这些新框架支持不同类型的元数据，例如输入、输出、事件、插槽等。

面向 Vue 的 Storybook Docs 由 Aaron Pool 使用 Shota Fuji 和 Bart Ledoux 的 vue docgen 库来完全支持 Vue 组件数据，例如 props、events 和 slots。

面向 Angular 的 Storybook Docs 由 Kai Röder 使用 compodoc 来完全支持 Angular 特定的组件数据，包括 inputs、outputs、properties、methods 和 view children。

面向 Ember 的 Storybook Docs 由 Matthew Irish 使用 JSONDoc 来显示组件属性。

面向 Web components 的 Storybook Docs 由 Thomas Allmer 使用 custom-elements.json 来显示 web component 的属性、props、events、slots 甚至 CSS。

⚡️ 1 分钟安装

想要它吗？首先将您的项目升级到 Storybook 5.3

npx npm-check-updates '/storybook/' -u
npm install # or yarn if you prefer

然后将文档添加到现有项目

npm install @storybook/addon-docs --save-dev # or yarn

最后，将以下行添加到您的 .storybook/main.js 文件中

module.exports = { addons: ['@storybook/addon-docs'] };

有关为您的框架配置 Storybook 的更多信息，请查看 Vue、Angular、Ember、Web components 或 React 的 README 文件。

🚀 我们需要您的帮助来使 Storybook Docs 变得更出色

您可以提供的最简单的帮助是在您的项目中安装 Storybook 5.3，并在 我们的 GitHub 项目 中提出问题和/或提交错误报告。如果您发现可以修复的错误，我们欢迎所有贡献！

我们创建了一个 易于遵循的清单，以针对您喜欢的框架优化 Storybook Docs，因此您可以期待更多社区贡献的优化即将到来。

🙏 感谢社区

Storybook Docs 由 Michael Shilman（我！）、Atanas Stoyanov、Patrick Lafrance、Francis Thibault、Aaron Pool、Kai Röder、Tom Coleman、Norbert de Langen、Lionel Benychou、Matthew Irish、Thomas Allmer 和 Igor Davydkin 开发。由 Dominic Nguyen 进行设计和主题化。特别感谢 MDX 早期采用者 Austin McDaniel、Vince Speelman、Kevin Suttle、Alex Wilson 和 Tom Speak。非常感谢 🙌 Brad Frost 提供的设计系统项目指导。

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