Configuring Storybook for React.js Projects

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

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

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);

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;
  },
};