wix-storybook-utils

Collection of utilities for documenting React components in Storybook.

wix-storybook-utils comes as a webpack loader for storybook to scrape components data and document them as stories.

Install

npm install wix-storybook-utils --save-dev

Use

Applying webpack loader will allow you to write .story.js files.

/.storybook/webpack.config.js

const merge = require('lodash/merge');
const path = require('path');

module.exports = (config, env, storybookConfig) =>
  merge(storybookConfig, {
    context: path.resolve(__dirname, '..', 'src'),

    module: {
      rules: newConfig.module.rules.concat({
        test: /\.story\.js$/,
        loader: 'wix-storybook-utils/loader',
        options: {
          plugins: [],
          storyConfig: {
            moduleName: 'my-project',
            repoBaseURL: 'https://github.com/wix/my-project/tree/master/src/',
            issueURL: 'https://github.com/wix/my-project/issues/new'
          }
        }
      })
    }
  });

optional plugins array can be used to change the output of default parser.

Example (dummy) plugin could be written like this:

  // ...
  plugins: [
    path.resolve(__dirname, '.storybook/stylable-metadata-plugin.js')
  ]
  // ...

Where plugin would contain following code:

module.exports = function({source, metadata}) {
  return {metadata: {...metadata, sourceLength: source.length}}
}

In addition to source and metadata, plugin also receives basePath.

In this case plugin returns a number but it could also return any other serializable value or a promise which resolves with such value.

Then one could use plugin section in story configuration:

  plugin((section, storyConfig) => <div>{storyConfig.metadata.sourceLength}</div>)

Above section would output number of characters in story configuration source code.

/src/MyComponent/docs/index.story.js

Read more about .story.js files in usage and sections documents.

import MyComponent from '../MyComponent';

export default {
  category: 'Components',
  storyName: 'MyComponent',

  component: MyComponent,
  componentPath: '../',

  componentProps: {
    value: 'hello world'
  },
};

/stories/index.js

import '../src/components/MyComponent/docs/index.story';

Contributing

• git clone git@github.com:wix/wix-ui.git
• cd wix-ui/packages/wix-storybook-utils
• npm install
• npm start - start storybook at localhost:6006
• npm test - run unit tests
• npm run test -- --watch - run unit tests in watch mode
• npm run build create transpiled code in /dist