ng-implementation/old-sae-airwatch/.storybook/main.ts

import {StorybookConfig} from '@storybook/angular';
import * as path from 'path';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-docs',
    // '@storybook/addon-viewport',
    // Removed deprecated addons:
    // '@storybook/addon-backgrounds' - no longer exists in Storybook 9.0+
    // '@storybook/addon-controls' - no longer exists in Storybook 9.0+
    // ... autres addons
  ],
  framework: {
    name: '@storybook/angular',
    options: {}
  },
  webpackFinal: async (config) => {
    if (config.module?.rules) {
      // Support MDX
      config.module.rules.push({
        test: /\.mdx?$/,
        use: [{loader: require.resolve('@mdx-js/loader')}],
      });

      // Support fonts amélioré
      config.module.rules.push({
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        type: 'asset/resource',
        generator: {filename: 'fonts/[name].[contenthash][ext]'},
      });

      // Support for remixicon font files specifically
      config.module.rules.push({
        test: /remixicon.*\.(woff|woff2|eot|ttf|svg)$/,
        type: 'asset/resource',
        generator: {filename: 'fonts/[name].[contenthash][ext]'},
      });

      // Add CSS loader rule to handle @font-face declarations
      config.module.rules.push({
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              url: true
            }
          }
        ]
      });

      // NOUVELLE SOLUTION : Configurer css-loader pour gérer les URLs
      const scssRules = config.module.rules.filter(rule => {
        if (rule && typeof rule === 'object' && 'test' in rule && rule.test) {
          const testString = rule.test.toString();
          return testString.includes('scss') || testString.includes('sass');
        }
        return false;
      });

      scssRules.forEach(rule => {
        if (rule && typeof rule === 'object' && 'use' in rule && Array.isArray(rule.use)) {
          const cssLoaderIndex = rule.use.findIndex((loader: any) => {
            if (typeof loader === 'string') {
              return loader.includes('css-loader');
            }
            return loader && loader.loader && loader.loader.includes('css-loader');
          });

          if (cssLoaderIndex !== -1) {
            const cssLoader = rule.use[cssLoaderIndex] as any;
            if (typeof cssLoader === 'object' && cssLoader.options) {
              cssLoader.options.url = {
                filter: (url: string) => {
                  // Skip problematic URLs with complex relative paths
                  if (url.includes('../../../../my-workspace/')) {
                    return false;
                  }
                  return true;
                }
              };
            }
          }
        }
      });
    }

    // Alias
    if (!config.resolve) config.resolve = {};
    if (!config.resolve.alias) config.resolve.alias = {};

    config.resolve.alias['~src'] = path.resolve(__dirname, '../src');
    config.resolve.alias['sae-lib'] = path.resolve(__dirname, '../../my-workspace/projects/sae-lib');

    // Ajouter un alias pour remixicon
    config.resolve.alias['remixicon'] = path.resolve(__dirname, '../node_modules/remixicon');

    // Modules resolution
    if (!config.resolve.modules) config.resolve.modules = [];
    config.resolve.modules.push(path.resolve(__dirname, '../node_modules'));

    config.resolve.symlinks = true;

    return config;
  }
};

export default config;