Storybook Docs 支持新框架

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 组件和库生成最佳实践文档的大胆项目。

SB Docs 在过去 4 个月里已在生产环境的 React 应用和设计系统中经过实战检验和完善。现在，SB Docs 终于推出，对 Vue、Angular、Ember 和 Web Components 提供了一流支持！您将获得：

• 📚 文档。当您像往常一样编写 Stories 时，Storybook 会帮助您“免费”获得最佳实践文档。然后，您可以使用 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 的核心体验是一个显示 stories 的 Canvas，stories 是独立的组件示例。例如，下面的Badge组件的变体被记录为类似于标准 ES6 模块的 stories。Storybook 随后在独立的开发环境中显示 Badge:withIcon。

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

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

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

🎁 支持更多框架的文档

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

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

这使得 Vue、Angular、Web Components 和 Ember 与 React 集成的功能几乎一致。

以下是新框架的属性表外观。与 React 属性表不同，这些新的属性表被划分为多个部分，因为这些新框架支持不同类型的元数据，例如输入 (inputs)、输出 (outputs)、事件 (events)、插槽 (slots) 等。

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

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

Storybook Docs for Ember 由 Matthew Irish 贡献，使用 JSONDoc 显示组件 props。

Storybook Docs for Web Components 由 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 项目中提问和/或提交 bug。如果您发现可以修复的 bug，我们欢迎所有贡献！

我们创建了一个易于遵循的清单，用于针对您喜欢的框架优化 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 变得更好。您可以贡献新功能、修复 bug 或改进文档。加入我们的 Discord，在 Open Collective 上支持我们，或者直接在 GitHub 上参与。