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
• 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