Angular Extras

Storybook 插件,为 Angular 应用程序添加额外配置。

在 Github 上查看

## Announcement

I have recently decided on splitting this addon into multiple other addons. So, we will be moving to @storybook-extras repo which will contain all the addons. This will make it easier to maintain and also to add new features. I will be working on this in the next few weeks.

This addon will be deprecated in favor of the new addons. And it will be pointing to the new addons for the features. So, you can still use it as it is. But, I will be adding new features to the new addons.

For more information the features and new addons, please refer to the documentation available at the [`@storybook-extras`](https://github.com/sheriffMoose/storybook-extras) repo.

特性

  • ⚡️ 零配置设置。
  • 📚 支持最新的 Storybook v7。
  • 🅰️ 支持最新的 Angular v15。
  • 📔 覆盖率检测工具用于测试运行器
  • 🧪 Angular 服务的自动注入器
  • 🦥 延迟加载文档
  • 💬 源代码显示
  • 🌯 Story Wrappers 选择器工具栏
  • 💻 控制台日志面板
  • 📃 自动 Markdown 和 HTML 文档支持
  • 👨‍💻 Swagger/OpenAPI 集成

入门

  1. 安装插件
yarn add @sheriffmoose/storybook-ngx -D
  1. 添加插件
// .storybook/main.js
module.exports = {
    ...
    "addons": [
        "@sheriffmoose/storybook-ngx",
        ...
    ],
    ...
}
  1. 有关内置功能的文档,请参阅以下部分。

演示/Chromatic

在 Chromatic 上找到已发布的演示 Storybook 这里

迁移计划

这些功能都有自己的插件,适用于所有框架。它们的工作方式与以前相同,但名称和重构的代码不同。

特性 之前 新插件
📔 覆盖率检测工具用于测试运行器 @sheriffMoose/storybook-ngx @storybook-extras/coverage
🧪 Angular 服务的自动注入器 @sheriffMoose/storybook-ngx @storybook-extras/angular
🦥 延迟加载文档 @sheriffMoose/storybook-ngx @storybook-extras/angular
💬 源代码显示 @sheriffMoose/storybook-ngx @storybook-extras/angular
🌯 Story Wrappers 选择器工具栏 @sheriffMoose/storybook-ngx @storybook-extras/angular
📃 自动 Markdown 和 HTML 文档支持 @sheriffMoose/storybook-md @storybook-extras/markdown
💻 控制台日志面板 @sheriffMoose/storybook-ngx 的一部分 @storybook-extras/console
👨‍💻 Swagger/OpenAPI 集成 @sheriffMoose/storybook-ngx 的一部分 @storybook-extras/swagger

致谢

  • 感谢 JS Devtools 提供了他们出色的 coverage istanbul loader,我们也正在努力将这种检测工具集成到 @storybook/addon-coverage 中。
  • 感谢 @storybook/addon-backgroundswrappers selector 功能提供灵感。
  • 如果没有官方的 @storybook/angular 框架,这一切都将无法实现。
  • 感谢官方 Storybook Addon Kit 团队,特别是 @winkerVSbecks 为此套件付出了巨大的努力,这对于生成这个插件非常有帮助。