Angular Extras

Storybook addon to add extra configurations for Angular applications.

View on 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.

Features

  • โšก๏ธ Zero config setup.
  • ๐Ÿ“š Supports latest Storybook v7.
  • ๐Ÿ…ฐ๏ธ Supports latest Angular v15.
  • ๐Ÿ“” Coverage Instrumentation for Test-Runner
  • ๐Ÿงช Auto injector for Angular services
  • ๐Ÿฆฅ Lazy loading documentation
  • ๐Ÿ’ฌ Source code display
  • ๐ŸŒฏ Story Wrappers selector toolbar
  • ๐Ÿ’ป Console Logs Panel
  • ๐Ÿ“ƒ Auto Markdown & HTML Docs support
  • ๐Ÿ‘จโ€๐Ÿ’ป Swagger/OpenAPI Integration

Getting started

  1. Install the addon:
yarn add @sheriffmoose/storybook-ngx -D
  1. Add the addon
// .storybook/main.js
module.exports = {
    ...
    "addons": [
        "@sheriffmoose/storybook-ngx",
        ...
    ],
    ...
}
  1. Refer to the sections below for the documentation of the built-in features.

Demo/Chromatic

Find the published demo storybook on chromatic here

Migration Plan

These features each have their own addon, and are available for all frameworks. They still work the same way as before, but are under new name and new refactored code.

Feature Previously New Addon
๐Ÿ“” Coverage Instrumentation for Test-Runner @sheriffMoose/storybook-ngx @storybook-extras/coverage
๐Ÿงช Auto injector for Angular services @sheriffMoose/storybook-ngx @storybook-extras/angular
๐Ÿฆฅ Lazy loading documentation @sheriffMoose/storybook-ngx @storybook-extras/angular
๐Ÿ’ฌ Source code display @sheriffMoose/storybook-ngx @storybook-extras/angular
๐ŸŒฏ Story Wrappers selector toolbar @sheriffMoose/storybook-ngx @storybook-extras/angular
๐Ÿ“ƒ Auto Markdown & HTML Docs support @sheriffMoose/storybook-md @storybook-extras/markdown
๐Ÿ’ป Console Logs Panel Part of @sheriffMoose/storybook-ngx @storybook-extras/console
๐Ÿ‘จโ€๐Ÿ’ป Swagger/OpenAPI Integration Part of @sheriffMoose/storybook-ngx @storybook-extras/swagger

Credits

  • Thanks for JS Devtools for their amazing coverage istanbul loader, we are also working on integration this instrumentation into @storybook/addon-coverage.
  • Thanks for @storybook/addon-backgrounds for the inspiration for the wrappers selector feature.
  • This would not have been possible without the official @storybook/angular framework.
  • Thanks for the team behind the official Storybook Addon Kit specially @winkerVSbecks for the amazing work they put into this kit that was very helpful for generating this addon.