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

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
    {
      name: 'storybook-addon-turbo-build',
      options: {
        // Please refer below tables for available options
        optimizationLevel: 2
      }
    }
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  docs: {
    autodocs: "tag",
    defaultName: "Usage",
  },
  webpackFinal: (defaultConfig) => {
    if (defaultConfig.module?.rules) {
      // exclude svg from file-loader
      defaultConfig.module.rules = defaultConfig.module.rules.map((rule) => {
        if (typeof rule === 'object' && rule?.test instanceof RegExp && rule['test'].test(".svg")) {
          return {
            ...rule,
            exclude: /\.svg$/i,
          };
        }
        return rule;
      })

      defaultConfig.module.rules.push({
        test: /\.svg$/i,
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              // Keep viewBox so icons scale correctly when width/height are overridden via props.
              // SVGO's default preset often removes it.
              svgoConfig: {
                plugins: [
                  {
                    name: 'preset-default',
                    params: {
                      overrides: {
                        removeViewBox: false,
                      },
                    },
                  },
                ],
              },
            },
          },
          {
            loader: 'raw-loader',
          },
        ],
      });
    }

    return defaultConfig;
  }
};
export default config;