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

Storybook Extras

Storybook addons library with a bunch of useful features along with other nice-to-haves and definitely silly features.

Table of Contents

Getting started

  1. Install the addon:
yarn add @storybook-extras/preset -D
  1. Add the addon
// .storybook/main.js
module.exports = {
    ...
    "addons": [
        "@storybook-extras/preset",
        ...
    ],
    ...
}
  1. To disable the built-in features, add the following to your main.js:
// .storybook/main.js
module.exports = {
    ...
    "addons": [
        "@storybook-extras/preset",
        ...
    ],
    ...
    "extras": {
        // disable Angular addon
        // by default it will only be added ONLY if the `framework` is set to `@storybook/angular`
        "angular": false,

        // disable console logs
        // further options are configurable in the `preview.js` file
        // please see the `Console` addon docs for more info
        "console": false,

        // disable markdown/html docs
        "markdown": false,
        // set options for markdown/html docs
        "markdown": {
            "mdInclude": path.join(process.cwd(), 'src'),
            "mdExclude": [/\.component.html$/] // exclude angular component html files
        }

        // disable swagger docs completely
        "swagger": false,
        // set openapi url for swagger docs
        "swagger": {
            "openapiURL": "https://petstore.swagger.io/v2/swagger.json"
        },

    }
}
  1. Refer to the sections below for the documentation of the respective addons.

Demo/Chromatic

Find the published demo storybook on chromatic here

Addons

Addon Description Version
Preset Storybook Extras addon.preset.img Docs
Angular Extra features for Angular Docs
Console Logs Display console logs in the storybook addon.console.img Docs
Markdown/HTML Docs Display markdown/html docs in the storybook addon.markdown.img Docs
OpenAPI/Swagger UI Display OpenAPI/Swagger UI in the storybook addon.swagger.img Docs
Toolbar Buttons Makes adding a custom toolbar button a breathe addon.toolbars.img Docs
Story Variants Display all variants of a story in one story page all together addon.variants.img Docs
Join the community
5,883 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI