@spaced-out/ui-design-system/.storybook/main.js

Sense UI components library

const path = require('path');
module.exports = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.jsx'],

  features: {
    buildStoriesJson: true,
  },

  // Add any Storybook addons you want here: https://storybook.js.org/addons/
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
        babelOptions: {},
        sourceLoaderOptions: null,
        transcludeMarkdown: true,
      },
    }, // 'storybook-vscode-component/register', This is not supported in storybook 7
    'storybook-css-modules',
    '@storybook/addon-a11y',
    '@storybook/addon-webpack5-compiler-babel',
    '@chromatic-com/storybook',
  ],

  babel: async (options) => ({
    ...options,
    sourceType: 'unambiguous',
    presets: [
      [
        '@babel/preset-env',
        {
          targets: [
            'last 2 Chrome versions',
            'last 2 Safari versions',
            'last 2 Firefox versions',
            'last 2 Edge versions',
            'last 3 iOS Major versions',
          ],
        },
      ],
      '@babel/preset-react',
      '@babel/preset-flow',
    ],
    plugins: ['macros'],
  }),

  webpackFinal: async (config) => {
    config.module.rules = config.module.rules.map((rule) => {
      if (rule.test && rule.test.toString().includes('woff')) {
        return {
          ...rule,
          test: /\.(svg|ico|jpg|jpeg|png|gif|webp|cur|ani|pdf)(\?.*)?$/,
        };
      }
      return rule;
    });
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader?modules=true', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });
    config.module.rules.push({
      test: /\.(js|jsx)$/,
      loader: require.resolve('babel-loader'),
      options: {
        presets: [
          [
            'react-app',
            {
              flow: true,
              typescript: false,
            },
          ],
        ],
      },
    });

    config.resolve.extensions.push('.js', '.jsx');
    return config;
  },

  staticDirs: ['public', '../design-tokens'],

  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },

  typescript: {
    reactDocgen: 'react-docgen-typescript',
  },
};