Configuring Storybook for React.js Projects

Library with name storybook lets you handy organize pretty functional showroom for all implemented components in your system.

Apart of ability render component, you can interact with added components: different events, variations, custom params... and manipulate them right through interface!

Configuring storybook

Install dependencies

yarn install @storybook/react @types/storybook__react @storybook/preset-create-react-app @storybook/builder-webpack5 @storybook/manager-webpack5

Add command to package.json

"storybook": "NODE_OPTIONS='--openssl-legacy-provider' start-storybook -p 9009 -s public"

Create folder .storybook in root of your project
Create file .storybook/preview.tsx with content:

import React from 'react';
import { configure, addDecorator } from '@storybook/react';
import { TestProvider } from '../src/utils/tests';
import { store } from '../src/redux/store';

const req = require.context('../src', true, /\.stories\.tsx$/);

function loadStories() {
  req.keys().forEach(req);
}

// Test provider contains all necessary react contexts for proper application work, such as redux context, @mui/theme provider, and so on
addDecorator((S) => (
  <TestProvider store={store}>
    <S />
  </TestProvider>
));

configure(loadStories, module);

Create file .storybook/main.js with content:

const path = require('path');

module.exports = {
  addons: ['@storybook/preset-create-react-app'],
  core: {
    builder: 'webpack5',
  },
  // feel free to modify webpack config here as well
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: 'javascript/auto',
    });

    // my custom alias for pretty-path module resolution. ~ sign points to root of src folder
    config.resolve.alias['~'] = path.resolve(__dirname, '../src');

    return config;
  },
};