Skip to content

sheriffMoose/storybook-extras

Repository files navigation

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.ts
import { StorybookConfig } from '@storybook/angular';
import { ExtrasConfig } from '@storybook-extras/preset';

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

export default config;
  1. 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;
  1. 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 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