nishant-design-system/.storybook/main.js

Sense UI components library

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.jsx'],
  features: {buildStoriesJson: true},
  // Add any Storybook addons you want here: https://storybook.js.org/addons/
  addons: [
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
        babelOptions: {},
        sourceLoaderOptions: null,
        transcludeMarkdown: true,
      },
    },
    'storybook-css-modules',
    '@storybook/addon-a11y',
    '@storybook/addon-essentials',
    '@storybook/testing-react',
    'storybook-vscode-component/register',
  ],
  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}]],
      },
    });

    // fonts
    config.module.rules.push({
      test: /\.(png|woff|woff2|eot|ttf|svg)$/,
      use: [
        {
          loader: 'file-loader',
          query: {
            name: '[name].[ext]',
          },
        },
      ],
      include: path.resolve(__dirname, '../'),
    });
    config.resolve.extensions.push('.js', '.jsx');

    return config;
  },
  staticDirs: ['public'],
};