docs: 📝 upgrade storybook & améliorations doc

- mise à jour vers storybook 7.5.3
- ajoute les styles du DSFR pour toutes les docs mdx
- ajoute une page pour prévisualiser toutes les couleurs du DSFR

Author: laruiss

.storybook/main.js

@@ -0,0 +1,29 @@
+import type { StorybookConfig } from "@storybook/vue3-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-themes",
+    "@storybook/addon-styling",
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        }
+      }
+    },
+  ],
+  staticsDir: ['../public'],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+};
+export default config;

.storybook/main.ts

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/manager-api'
+import { themes } from '@storybook/theming'
+import VueDsfrTheme from './vue-dsfr-theme.js'
+
+addons.setConfig({
+  theme: { ...themes.normal, ...VueDsfrTheme },
+})

.storybook/manager.js

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

.storybook/manager.ts

@@ -0,0 +1,96 @@
+import type { Preview } from "@storybook/vue3"
+import { themes } from '@storybook/theming'
+import { withThemeByDataAttribute } from "@storybook/addon-themes"
+
+import { FocusTrap } from 'focus-trap-vue'
+import { defineComponent } from 'vue'
+
+import VueDsfrTheme from './vue-dsfr-theme.js'
+import {OhVueIcon as VIcon} from 'oh-vue-icons'
+
+import '../src/assets/variables-fdr.css'
+import '@gouvfr/dsfr/dist/dsfr.min.css'
+import '@gouvfr/dsfr/dist/utility/utility.main.min.css'
+import '@gouvfr/dsfr/dist/utility/icons/icons.main.min.css'
+
+import '../src/main.css'
+
+import './theme.css'
+
+export const decorators = [
+  withThemeByDataAttribute({
+    themes: {
+      Clair: 'light',
+      Sombre: 'dark',
+    },
+    defaultTheme: 'light',
+    attributeName: 'data-fr-theme',
+  })
+]
+
+const preview: Preview = {
+  parameters: {
+    docs: {
+      theme: { ...themes.normal, ...VueDsfrTheme },
+    },
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    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',
+        order: [
+          'Docs',
+          'Fondamentaux',
+          'Composables',
+          'Composants',
+        ],
+      },
+    }
+  },
+}
+
+export default preview;