• Getting started
• Demo
• Addons

Getting started

1. Install the addon:

yarn add @storybook-extras/preset -D

2. Add the addon

// .storybook/main.ts
import { StorybookConfig } from '@storybook/angular';
import { ExtrasConfig } from '@storybook-extras/preset';

const config: StorybookConfig & ExtrasConfig = {
    ...
    "addons": [
        "@storybook-extras/preset",
        ...
    ],
    ...
}

export default config;

3. To disable the built-in features, add the following to your main.js:

// .storybook/main.ts
import { StorybookConfig } from '@storybook/angular';
import { ExtrasConfig } from '@storybook-extras/preset';

const config: StorybookConfig & ExtrasConfig = {
    ...
    "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": {
            "includes": path.join(process.cwd(), 'src'),
            "excludes": [/\.component.html$/], // exclude angular component html files
        }

        // disable swagger docs completely
        "swagger": false,
        // set openapi url for swagger docs
        "swagger": {
            "stories": [
                {
                    "title": "Swagger UI",
                    "url": "https://petstore.swagger.io/v2/swagger.json"
                }
            ]
        },

    }
}

export default config;

4. Refer to the sections below for the documentation of the respective addons.

Demo

Find the published demo storybook on Chromatic here

Addons

| | Addon | Description | Version | | | ----------------------------------------------------------------------------------------------------------------------------- | ------------------ | -------------------------------------------------------------- | -------------------------------------------- | ----------------------------- | | | Preset | Storybook Extras | | Docs | | | Angular | Extra features for Angular | | Docs | | | Console Logs | Display console logs in the storybook | | Docs | | | Markdown/HTML Docs | Display markdown/html docs in the storybook | | Docs | | | OpenAPI/Swagger UI | Display OpenAPI/Swagger UI in the storybook | | Docs | | | Toolbar Buttons | Makes adding a custom toolbar button a breathe | | Docs | | | Story Variants | Display all variants of a story in one story page all together | | Docs |