import type { StorybookConfig } from '@storybook/angular';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    // '@storybook/addon-essentials', // Commented out due to compatibility issues with Storybook v9
    // '@storybook/addon-interactions', // Commented out due to compatibility issues with Storybook v9
  ],
  framework: {
    name: '@storybook/angular',
    options: {},
  },
  // docs: {
  //   autodocs: 'tag',
  // },
  staticDirs: ['../src/stories/assets', '../src/app/styles/typo'], // Pour les assets statiques et les polices
  webpackFinal: async (config) => {
    // Add support for MDX files
    if (config.module?.rules) {
      config.module.rules.push({
        test: /\.mdx?$/,
        use: [
          {
            loader: require.resolve('@mdx-js/loader'),
          },
        ],
      });

      // Add support for font files
      config.module.rules.push({
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/',
            },
          },
        ],
      });
    }

    // Add alias for tilde (~) notation to resolve to the project root
    if (!config.resolve) {
      config.resolve = {};
    }
    if (!config.resolve.alias) {
      config.resolve.alias = {};
    }
    config.resolve.alias['~src'] = require('path').resolve(__dirname, '../src');

    return config;
  },
};

export default config;