New
Component Story Format 3 is hereAutomate with Chromatic
Storybook Day 2023
Star76,605
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Angular Extras
Storybook addon to add extra configurations for Angular applications.
npm install @sheriffmoose/storybook-ngx
Last updated 10 days ago
85
Downloads per week
Readme View on GitHub
logo

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",
        ...
    ],
    ...
}
  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.
Join the community
5,898 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI