pdh-design-system/.storybook/main.ts

PDH Design System React Components

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

import * as path from 'node:path'


const config: StorybookConfig = {
  stories: [
    '../src/**/*.mdx', 
    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'
  ],
  staticDirs: ['../assets'],

  addons: [
    '@storybook/addon-webpack5-compiler-swc',
    '@storybook/addon-links',
    '@chromatic-com/storybook',
    '@vueless/storybook-dark-mode',
    ({
      name: "@storybook/addon-styling-webpack",

      options: {
        rules: [
          // Replaces any existing Sass rules with given rules
          {
            test: /\.s[ac]ss$/i,
            use: [
              "style-loader",
              "css-loader",
              "sass-loader",
            ],
          },
        ],
      }
    }),
    {
      name: '@storybook/addon-docs',
    }
  ],
  webpackFinal: (config) => {
    if (!config.resolve) {
      config.resolve = {};
    }
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve('./src'),
      '@atoms': path.resolve('./src/atoms'),
      '@molecules': path.resolve('./src/molecules'),
      '@organisms': path.resolve('./src/organisms'),
      '@foundations': path.resolve('./src/foundations')
    }
    return config
  },

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

    options: {
      builder: {
        fsCache: true,
        fastRefresh: true
      }
    }
  },

  docs: {},

  typescript: {
    reactDocgen: 'react-docgen-typescript',
  }
};
export default config;