wix-storybook-utils

    4.0.35 • Public • Published

    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

    Install

    npm i wix-storybook-utils

    DownloadsWeekly Downloads

    201

    Version

    4.0.35

    License

    MIT

    Unpacked Size

    1.65 MB

    Total Files

    999

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar