Wix Storybook Config

Wix Storybook Config is a collection of decorating functions that help Wix Design Systems teams maintain its storybook configuration in one place.

• decorateMainConfig - general purpose storybook main.js config.
• decorateMainDocsConfig - wix design systems opinionated storybook stories config.
• fully typed and documented options.

⚙️ Installation

First of all, install @storybook/react and @storybook/addon-essentials:

npm install --save-dev @storybook/react @storybook/addon-essentials

🔔 Please note: version 6 or higher is required.

Install additional storybook packages that are mandatory for stylable plugin to work:

npm install --save-dev @storybook/builder-webpack5 @storybook/manager-webpack5

🔔 Please note: webpack 5 or higher is required.

🔧 Decorator Functions

decorateMainConfig

This is a decorator base function for storybook main.js file.

1. Enables webpack 5 and resolves unpolyfilled webpack modules.
2. Adds stylable v4 support with ability to pass options.
3. Add scss support with ability to write .global.scss too.

Example of storybook main.js usage:

// .storybook/main.js

const { decorateMainConfig } = require('wix-storybook-config')

module.exports = decorateMainConfig({
   /**
    * An array of globs that indicates the location of your story files, relative to main.js.
    */
   stories: ['../src/**/*.stories.ts'],
   /**
    * A list of the addons you would like to use.
    */
   addons: ['my-addon'],
   /**
    * A function for modyfing default storybook webpack config.
    */
   webpackFinal: (config) => config,
   /**
    * Stylable Webpack Plugin options.
    */
   stylableWebpackPluginOptions: {
     /**
      * Read more:https://github.com/wix/stylable/tree/master/packages/webpack-plugin#plugin-configuration-options
     */
   },
   /**
    * The rest of the storybook main.js config values. Read more here: https://storybook.js.org/docs/react/configure/overview
    */
   ...rest
})

decorateMainDocsConfig

This is a decorator function for storybook main.js file with opinionated wix storybook utils plugin.

1. Uses decorateMainConfig decorator as base.
2. Adds wix storybook utils plugin with exposed options parameter.

import { decorateMainDocsConfig } from 'wix-storybook-config'

Example of storybook main.js usage:

// .storybook/main.js

const { decorateMainDocsConfig } = require('wix-storybook-config')

module.exports = decorateMainDocsConfig({
   /**
    * An array of globs that indicates the location of your story files, relative to main.js.
    */
   stories: ['../src/**/*.stories.ts'],
   /**
    * A list of the addons you would like to use.
    */
   addons: ['my-addon'],
   /**
    * A function for modyfing default storybook webpack config.
    */
   webpackFinal: (config) => config,
   /**
    * Stylable Webpack Plugin options
    */
   stylableWebpackPluginOptions: {
     /**
      * Read more:https://github.com/wix/stylable/tree/master/packages/webpack-plugin#plugin-configuration-options
     */
   },
    /**
    * Wix Storybook Utils Plugin options
    */
   wixStorybookWebpackUtilsOptions: {
      /**
      * Your package or repo name. Used for constructing import examples for components.
      * import { ComponentName } from 'package-name';
      */
      moduleName: 'package-name',
       /**
       * Your components import format. Used for showing imports in story design tab.
       * @default - import { %componentName } from '%moduleName'
       */
      importFormat: "import { %componentName } from '%moduleName'",
      /**
       *  Absolute path to a file that exports components for every code playground on storybook.
       *  This ensures components playground autocomplete features and ability to copy paste from one
       *  example to another.
       */
      playgroundComponentsPath: path.resolve(__dirname, './playground'),
      /**
      * Your components src folder path in github. Used for constructing component source link
      * in storybook story. Can be seen in storybook story header.
      */
      repoBaseURL:'https://github.com/package-name/src',
      /**
      * Your library url for opening issues. Can be seen in storybook story header.
      */
      issueURL: 'https://open-library-issue.io',
      /**
      * Story feedback section description value.
      */
      feedbackText: 'You can help us improve this component by providing feedback',
      /**
       *  A string representing description in story testkit tab below the title.
       *  Used for adding additional information.
       */
      testkitsWarning: 'Read more here',
      /**
       * Components testkit import path. Used for constructing testkit imports in story testkit tab.
       * Format example: import { <%= component.displayName %>Testkit } from '${importTestkitPath}/testkit/enzyme';
       */
      importTestkitPath: 'package-name/dist',
      /**
       * Components custom testkit import paths. Used for constructing custom testkit import paths per testing platform. @supported vanilla, enzyme, puppeteer.
       * By providing this configuration importTestkitPath parameter will be ignored.
       */
      testkits: {
        vanilla: {
          template: `import { ComponentNameTestkit } from 'package-name/testkit';`,
        }
      },
   },
   /**
    * The rest of the storybook main.js config values. Read more here: https://storybook.js.org/docs/react/configure/overview
    */
   ...rest
})