New
Storybook for full-stack developersAutomate with Chromatic
Star75,295
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-loader
<h1 align="center">
npm install storybook-loader
Last updated over 3 years ago
1.5k
Downloads per week
Readme View on GitHub

storybook-loader

npm version Build Status dependencies Status devDependencies Status codecov

Description in medium

auto-load all stories in storybook by storybook-load

Table of Contents

Description

storybook-loader is a package for storybook to automatically load ALL files in a folder.

storybook-loader analyze the webpack's require.context return value and load the analyzed results to storyies.

After finishing the configuration, you will be free from manually adding story, as storybook-loader will load it for you automatically.

Installation

storybook-loader is available as an npm package.

npm install --save--dev storybook-loader

How to use

Steps of loading javascript component

  1. Create xxx.stories.js under the target folder.

    import { loadJSStories } from 'storybook-loader';
    
    const req = require.context('./');
    
    loadJSStories(req);
    
  2. Create sub folder and add js files.

    The following structure:

    ./rootPattern1.js
    ./folder1/pattern1.js
    ./folder1/pattern2.js
    ./folder2/pattern1.jsx
    ./folder2/pattern2.jsx
    

    will display like this(rootPattern1 will be ignored):

    folder1
    |-pattern1
    |-pattern2
    folder2
    |-pattern1
    |-pattern2
    

Steps of loading markdown

  1. Create xxx.stories.js under the target folder.

    storybook 4.x

    import { loadMDStories } from 'storybook-loader';
    import { doc } from 'storybook-readme';
    
    const req = require.context('./');
    const options = {
      // decorate md's content
      contentFuncList: [
        doc,
      ],
      // [optional] hide AddOnPanel
      storySubFuncList: [
        [
          'addParameters',
          [{ options: { showAddonPanel: false } }],
        ],
      ],
    }
    
    loadMDStories(req, options);
    

    storybook 5.x

    import { loadMDStories } from 'storybook-loader';
    import { doc } from 'storybook-readme';
    
    const req = require.context('./');
    const options = {
      // decorate md's content
      contentFuncList: [
        doc,
      ],
      // [optional] hide AddOnPanel
      storySubFuncList: [
        [
          'addParameters',
          [{ options: { showPanel: false } }],
        ],
      ],
    }
    
    loadMDStories(req, options);
    
  2. Create sub folder and add md files.

    The following structure:

    ./rootPattern1.md
    ./folder1/pattern1.md
    ./folder1/pattern2.md
    ./folder2/pattern1.md
    ./folder2/pattern2.md
    

    will display like this(rootPattern1 will be ignored):

    folder1
    |-pattern1
    |-pattern2
    folder2
    |-pattern1
    |-pattern2
    

Steps of loading javascript component with markdown

When you not only like to load js components, but also show notes in control panel.

  1. Create xxx.stories.js under the target folder.

    storybook 4.x

    import { loadJSWithNotesStories } from 'storybook-loader';
    import { withNotes } from '@storybook/addon-notes';
    
    const req = require.context('./');
    const options = {
      // [optional] you can also addDecorator(withNotes) in config.js
      storySubFuncList: [
        [
          'addDecorator',
          [withNotes],
        ],
      ],
    };
    
    loadJSWithNotesStories(reqList, options);
    

    storybook 5.x

    import { loadJSWithNotesStories } from 'storybook-loader';
    
    const req = require.context('./');
    
    loadJSWithNotesStories(reqList);
    
  2. Create sub folder and add md files.

    The following structure:

    ./folder1/pattern1.js
    ./folder1/pattern1.md
    ./folder1/pattern2.js
    ./folder1/pattern2.md
    ./folder2/pattern1.jsx
    ./folder2/pattern1.md
    ./folder2/pattern2.jsx
    

    will display like this

    folder1
    |-pattern1 (display folder1/pattern1.md in notes panel)
    |-pattern2 (display folder1/pattern2.md in notes panel)
    folder2
    |-pattern1 (display folder2/pattern1.md in notes panel)
    |-pattern2 (display nothing in notes panel)
    

Instructions

parameter

No. Parameter Required Type Default Description
1 requireContext object / object list instance of require.context OR an object return the same architecture to require.context
2 options object { groupByFolder: true, folderNameWhenEmpty: 'ALL' } *see options below for more details
3 thirdParamMakerOptions object { loader: mdLoader, formatter: formatWithNotesObject } *see options below for more details

options

storySubFuncList

  • Default: []

  • Description: list of sub functions in storiesOf to call

  • Attention: parameters of sub function MUST be an array

  • Example:

     -- NO.1 --------------------------------------------------------
     storySubFuncList: [ 
       'subFunc1',
       [ 'addDecorator', [withNotes] ],
       [ 'addParameters', [{ options: { showPanel: false } }] ],
     ]
     ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
     stories.subFunc1();
     stories.addDecorator(withNotes);
     stories.addParameters({ options: { showPanel: false } });
    

contentFuncList

  • Default: [ ramda.identity ]

  • Description: list of pure functions for decorating file's contents. It's useful when you want to apply hocs(High Order Component) or hofs(High Order Function) to your content like withMUITheme, withLayout...

  • Attention: functions will receive ONLY ONE parameter -- the contents (could be string or React.Component). If function has more than one parameters, you can use util.unaryFunc to apply the rest parameters and then pass it to contentFuncList.

  • Example:

    -- NO.1 --------------------------------------------------------
    function decPrefixMsg(content, msg) {
      return `${msg}: ${content}`;
    }
    
    contentFuncList: [ 
      util.unaryFunc(decPrefixMsg, ['MyMessage is']),
    ]
    ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    stories.add(fileName, decPrefixMsg(content, 'MyMessage is'));
    
    -- NO.2 --------------------------------------------------------
    contentFuncList: [ 
      withMUITheme,
      withLayout,
    ]
    ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    stories.add(fileName, withLayout(withMUITheme(content)));
    

hierarchyRoot

  • Default: ''

  • Description: prefix of stories' name. If you've enabled hierarchyRootSeparator, xxx| will be the name of hierarchyRoot.

  • Example:

    -- NO.1 --------------------------------------------------------
    hierarchyRoot: 'Components|'
    ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    storiesOf('Components|' + folderName, module);
    

groupByFolder

  • Default: true

  • Description: use folder name as the root stories' name.

  • Attention: If you set groupByFolder to false, all stories will be added to ONE root named by folderNameWhenEmpty(default is ALL).

  • Example:

    -- NO.1 --------------------------------------------------------
    groupByFolder: true
    
    /Button/Pattern1.js
    /Button/Pattern2.js
    /TextField/Pattern1.js
    ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    Button
      - Pattern1
      - Pattern2
    TextField
      - Pattern1
      
    -- NO.2 --------------------------------------------------------
    groupByFolder: false
    
    /Button/Pattern1.js
    /Button/Pattern2.js
    /TextField/Pattern1.js
    ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    ALL
      - Pattern1 (the second Pattern1 will be ignored)
      - Pattern2
    

thirdParamMaker

  • Default: null

  • Description: function to make 3rd parameter of stories.add(xx, xx, 3rdParam). thirdParamMaker(instance of require.context, filePath).

  • Attention: this function is called after every single file is loaded.

  • Example: createMDThirdParamMaker

sort

  • Default: true

  • Description: sort files by filename.

sortFunc

  • Default: (a, b) => a.localeCompare(b)

  • Description: sort function. sort by files asc as default.

noExt

  • Default: true

  • Description: display filename in menu without extention.

  • Example:

    -- NO.1 --------------------------------------------------------
    noExt: true
    
    /Button/Pattern1.js
    ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    Button
      - Pattern1
      
    -- NO.2 --------------------------------------------------------
    noExt: false
    
    /Button/Pattern1.js
    ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    Button
      - Pattern1.js
    

noExtRegExp

  • Default: null

  • Description: remove extention regexp.

  • Attention: if noExt is true, will use noExtRegExp > includeRegExp > regExpFromRequireContext.

  • Example: /\.md$/ to remove markdown's extention

includeRegExp

  • Default: null

  • Description: regexp for include files by file's full path.

  • Attention: will use includeRegExp > regExpFromRequireContext.

  • Example: /\.md$/ to add *.md files only.

excludeRegExp

  • Default: null

  • Description: regexp for exclude files by file's full path.

  • Example: /\.stories.js$/ to exclude all *.stories.js.

ignoreDotFolder

  • Default: true

  • Description: ignore files under root folder (. folder)

  • Example: -- NO.1 -------------------------------------------------------- ignoreDotFolder: true

    ./Pattern1.js
    /Button/Pattern1.js
    ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    Button
      - Pattern1
    
    -- NO.2 --------------------------------------------------------
    ignoreDotFolder: false
    
    ./Pattern1.js
    /Button/Pattern1.js
    ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    .
      - Pattern1
    Button
      - Pattern1
    

dotFolderName

  • Default: .

  • Description: used as folder name when it's a dot(.)

  • Example: -- NO.1 -------------------------------------------------------- ignoreDotFolder: false dotFolderName: 'RootFolder'

    ./Pattern1.js
    /Button/Pattern1.js
    ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    RootFolder
      - Pattern1
    Button
      - Pattern1
    

third parameter options

ONLY nessacerry when use loadJSWithNotesStories or loadJsonWithNotesStories. Both of them are using createMDThirdParamMaker to make 3rd parameter in stories.add(xx, xx, 3rd param).

loader

  • Default: mdLoader

  • Description: loader to load files for making third param

formatter

  • Default: formatWithNotesObject() in createMDThirdParamMaker

  • Description: format the content

  • Example

    function formatWithNotesObject(content) {
      return {
        notes: {
          markdown: content,
        },
      };
    }
    

License

This project is licensed under the terms of the MIT license.

Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI