sheriffMoose / storybook-ngx

Storybook addon for extra Angular configurations

Storybook Angular Extras

Storybook addon that adds few features to the original Angular Storybook integration.

## 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",
        ...
    ],
    ...
}

3. 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.