docs: 📝 Improve documentation in SB

- Ajout des différentes dimensions des appareils retenus par le DSFR dans les viewports
- Ajout de tests de composants pour les onglets et la modale

Author: laruiss

.storybook/main.js

@@ -1,30 +1,61 @@
 import { mergeConfig } from 'vite'
 
 module.exports = {
-  "stories": ["../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))"],
-  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", {
-    name: '@storybook/addon-postcss',
-    options: {
-      postcssLoaderOptions: {
-        implementation: require('postcss')
+  stories: ["../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss')
+        }
       }
     }
-  }],
+  ],
   staticDirs: ['../public'],
   framework: {
     name: "@storybook/vue3-vite",
     options: {}
   },
+  features: {
+    storyStoreV7: true,
+  },
   docs: {
     autodocs: true
   },
+  /**
+   * Extend Vite config
+   * @param {import('vite').UserConfig} config
+   * @param {'DEVELOPMENT'|'PRODUCTION'} [configType]
+   * @returns {Promise<*>}
+   */
   async viteFinal(config, {
     configType
   }) {
-    return mergeConfig(config, {
-      define: {
-        'process.env': {}
-      }
-    });
+    // return mergeConfig(config, {
+    //   define: {
+    //     ...config.define,
+    //     'process.env': {},
+    //   }
+    // });
+    config.optimizeDeps = configType === 'PRODUCTION' ? config.optimizeDeps : {
+      ...(config.optimizeDeps || {}),
+      include: [
+        ...(config?.optimizeDeps?.include || []),
+        // Fix: `@storybook/addon-interactions` exports is not defined or `jest-mock` does not provide an export named 'fn'
+        'jest-mock',
+        // Optional, but prevents error flashing in the Storybook component preview iframe:
+        // Fix: failed to fetch dynamically import module, avoid cache miss for dependencies on the first load
+        '@storybook/components',
+        '@storybook/store',
+        // Add all addons that imported in the `preview.js` or `preview.ts` file and used in exported constants
+        '@storybook/addon-links'
+      ],
+    }
+    config.define = { ...config.define, 'process.env': {}}
+    return config;
   }
-};
+};

.storybook/preview-head.html

@@ -0,0 +1,4 @@
+<script>
+  // Fix: add `jest` to global
+  window.global = window
+</script>

.storybook/preview.js

@@ -1,7 +1,7 @@
+import * as jest from "@storybook/jest"
 import { defineComponent } from 'vue'
 import { setup } from '@storybook/vue3'
 import { FocusTrap } from 'focus-trap-vue'
-
 // import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import '../src/assets/variables-fdr.css'
@@ -12,6 +12,8 @@ import './theme.css'
 
 import {OhVueIcon as VIcon} from 'oh-vue-icons'
 
+window.jest = jest
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
@@ -20,6 +22,53 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  backgrounds: {
+    values: [
+      {name: 'black', value: '#000'},
+      {name: 'dark', value: '#222'},
+      {name: 'light', value: '#eee'},
+      {name: 'white', value: '#fff'},
+    ]
+  },
+  viewport: {
+    viewports: {
+      DSFR_XS: {
+        name: 'DSFR XS',
+        styles: {
+          width: '320px',
+          height: '768px',
+        },
+      },
+      DSFR_SM: {
+        name: 'DSFR SM',
+        styles: {
+          width: '576px',
+          height: '1024px',
+        },
+      },
+      DSFR_MD: {
+        name: 'DSFR MD',
+        styles: {
+          width: '768px',
+          height: '1200px',
+        },
+      },
+      DSFR_LG: {
+        name: 'DSFR LG',
+        styles: {
+          width: '992px',
+          height: '1600px',
+        },
+      },
+      DSFR_XL: {
+        name: 'DSFR XL',
+        styles: {
+          width: '1440px',
+          height: '1900px',
+        },
+      },
+    }
+  },
   options: {
     storySort: {
       method: 'alphabetical',