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

Sense UI components library

import type {StorybookConfig} from '@storybook/react-webpack5';
import path from 'node:path';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.tsx'],

  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        // Not needed with automatic runtime, but harmless if you keep it
        configureJSX: false,
        babelOptions: {},
        sourceLoaderOptions: null,
        transcludeMarkdown: true,
      },
    },
    'storybook-css-modules',
    '@storybook/addon-a11y',
    // Forces Babel (not SWC) so our plugins run on TSX:
    '@storybook/addon-webpack5-compiler-babel',
    '@chromatic-com/storybook',
  ],

  // Global Babel for anything SB pipes through its own babel pass
  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', {runtime: 'automatic', development: true}],
      '@babel/preset-typescript',
    ],
    plugins: ['macros', '@regrapes/babel-plugin-add-react-memo-displayname'],
  }),

  webpackFinal: async (config) => {
    // Fix font rule clobbering images
    config.module!.rules = (config.module!.rules || []).map((rule: any) => {
      if (rule.test && rule.test.toString().includes('woff')) {
        return {
          ...rule,
          test: /\.(svg|ico|jpg|jpeg|png|gif|webp|cur|ani|pdf)(\?.*)?$/,
        };
      }
      return rule;
    });

    // SCSS modules support (matches your current setup)
    config.module!.rules!.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader?modules=true', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Ensure TSX goes through babel-loader (so plugins above actually run)
    config.module!.rules!.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve('babel-loader'),
      options: {
        presets: [['react-app', {flow: false, typescript: true}]],
        plugins: ['@regrapes/babel-plugin-add-react-memo-displayname'],
      },
    });

    (config.resolve!.extensions as string[]).push('.ts', '.tsx');
    return config;
  },

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

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

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

export default config;