make storybook working for airwatch

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

@@ -1,59 +1,86 @@
-import type { StorybookConfig } from '@storybook/angular';
+import {StorybookConfig} from '@storybook/angular';
+import * as path from 'path';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
   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
+    '@storybook/addon-docs',
+    // ... autres addons
   ],
   framework: {
     name: '@storybook/angular',
-    options: {},
+    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) {
+      // Support MDX
       config.module.rules.push({
         test: /\.mdx?$/,
-        use: [
-          {
-            loader: require.resolve('@mdx-js/loader'),
-          },
-        ],
+        use: [{loader: require.resolve('@mdx-js/loader')}],
       });
 
-      // Add support for font files
+      // Support fonts amélioré
       config.module.rules.push({
         test: /\.(woff|woff2|eot|ttf|otf)$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[name].[ext]',
-              outputPath: 'fonts/',
-            },
-          },
-        ],
+        type: 'asset/resource',
+        generator: {filename: 'fonts/[name].[contenthash][ext]'},
+      });
+
+      // 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;
+                }
+              };
+            }
+          }
+        }
       });
     }
 
-    // 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');
+    // 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, '../node_modules/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;
-

old-sae-airwatch/.storybook/preview.ts

@@ -1,12 +1,8 @@
-
-import type { Preview } from '@storybook/angular';
-
-// Import des styles globaux
-import '../src/app/styles/styles.scss';
+import type {Preview} from '@storybook/angular';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
+    actions: {argTypesRegex: '^on[A-Z].*'},
     controls: {
       matchers: {
         color: /(background|color)$/i,