Skip to content

Latest commit

 

History

History
 
 

storysource

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 

Storybook Storysource Addon

This addon is used to show stories source in the addon panel.

Framework Support

Storysource Demo

Getting Started

First, install the addon

npm install -D @storybook/addon-storysource

Add this line to your addons.js file

import '@storybook/addon-storysource/register';

Use this hook to a custom webpack.config. This will generate a decorator call in every story:

module.exports = {
  module: {
    rules: [
      {
        test: /\.stories\.jsx?$/,
        loaders: [require.resolve('@storybook/addon-storysource/loader')],
        enforce: 'pre',
      },
    ],
  },
};

Loader Options

The loader can be customized with the following options:

parser

The parser that will be parsing your code to AST (based on prettier)

Alowed values:

  • javascript - default
  • typescript

Usage:

module.exports = {
  module: {
    rules: [
      {
        test: /\.stories\.jsx?$/,
        loaders: [
          {
            loader: require.resolve('@storybook/addon-storysource/loader'),
            options: { parser: 'typescript' }
          }
        ],
        enforce: 'pre',
      },
    ],
  },
};

prettierConfig

The prettier configuration that will be used to format the story source in the addon panel.

Defaults:

{
  printWidth: 120,
  tabWidth: 2,
  bracketSpacing: true,
  trailingComma: 'es5',
  singleQuote: true,
}

Usage:

module.exports = {
  module: {
    rules: [
      {
        test: /\.stories\.jsx?$/,
        loaders: [
          {
            loader: require.resolve('@storybook/addon-storysource/loader'),
            options: {
              prettierConfig: {
                printWidth: 80,
                singleQuote: false,
              }
            }
          }
        ],
        enforce: 'pre',
      },
    ],
  },
};

uglyCommentsRegex

The array of regex that is used to remove "ugly" comments.

Defaults:

[/^eslint-.*/, /^global.*/]

Usage:

module.exports = {
  module: {
    rules: [
      {
        test: /\.stories\.jsx?$/,
        loaders: [
          {
            loader: require.resolve('@storybook/addon-storysource/loader'),
            options: {
              uglyCommentsRegex: [
                /^eslint-.*/, 
                /^global.*/,
              ]
            }
          }
        ],
        enforce: 'pre',
      },
    ],
  },
};

injectDecorator

Tell storysource whether you need inject decorator.If false, you need to add the decorator by yourself;

Defaults: true

Usage:

module.exports = {
  module: {
    rules: [
      {
        test: /\.stories\.jsx?$/,
        loaders: [
          {
            loader: require.resolve('@storybook/addon-storysource/loader'),
            options: { injectDecorator: false }
          }
        ],
        enforce: 'pre',
      },
    ],
  },
};