Building professional and quality React component using Storybook

StoryBook

Steps to Install Storybook:

Open your project. Run below command

npx sb init

Yarn package manager is default package manager used to add storybook in case both npm and yarn are installed. If you need to run npm then use below command:

npx sb init --use-npm

Using WebPack5:

npx sb init --builder webpack5

Run story book using below command:

npm run storybook

Common Issues

• In some cases while running storybook, core-js creates issue due to conflicting version with babel. To resolve this add core-js@3 as dev dependency to your package. This should resolve such issues, in case it still gives issue check for conflicting version of babel or core-js. Running npm update helped in my case.

• In case some modules are not accessible by storybook, it could be due to webpack alias missing in storybook webpack, in that case updating modules in ./storybook/main.js can help. Using alias with webpack, need to registered with storybook webpack also to resolve dependencies during storybook build phase.

• Default SVG Support Issues - default loader for svg files returns file addresses. In case project is using svg as React components directly, webpack need to be updated to use "@svgr/webpack" module, to add svg loader update ./storybook/main.js webpackFinal property as below:

webpackFinal: async (config, { configType }) => {
    // remove svg from existing rule
    config.module.rules = config.module.rules.map(data => {
      if (/svg\|/.test( String( data.test ) ))
        data.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/;
      return data;
    });

    // use svgr for svg files
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });
    
    // Use alias as setup in project webpack
    config.resolve.alias = {
      ...config.resolve.alias,
      "components": path.resolve(__dirname, '../components/'),
      "assets": path.resolve(__dirname, '../assets/')
    };
    return config;
}