Merge f9439fb into ad78d5f

.gitignore

@@ -48,3 +48,4 @@ Thumbs.db
 
 # Storybook
 /stories/auto
+*storybook.log

.storybook/main.js

@@ -1,15 +1,21 @@
-// Note: addon-measure is forced to false in order to avoid it enabled in ZeroHeight
+/** @type { import('@storybook/html-vite').StorybookConfig } */
 const config = {
-  "stories": ["../stories/**/*.stories.@(js|jsx|ts|tsx)"],
-  "addons": ["@storybook/addon-a11y", {
-    name: "@storybook/addon-essentials",
-    options: {
-      measure: false
-    }
-  }, "@storybook/addon-themes", "@storybook/preset-scss"],
-  "framework": "@storybook/html-webpack5",
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/html-vite",
+    options: {},
+  },
   docs: {
-    autodocs: true
-  }
+    autodocs: "tag",
+  },
 };
 export default config;

.storybook/preview-head.html

@@ -21,4 +21,4 @@
 <link href="https://boosted.orange.com/docs/5.3/assets/css/docs.css" rel="stylesheet" crossorigin="anonymous">
 
 <!-- Boosted Js: Use of defer because it allows to load only once the bundle (Storybook issue) -->
-<script src="https://cdn.jsdelivr.net/npm/boosted/dist/js/boosted.bundle.min.js" crossorigin="anonymous" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/boosted/dist/js/boosted.bundle.min.js" crossorigin="anonymous" defer></script>

.storybook/preview.js

@@ -1,38 +1,13 @@
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-import { withThemeByDataAttribute } from '@storybook/addon-themes';
-import './storybook.scss';
-import prettier from 'prettier/esm/standalone';
-import htmlParser from 'prettier/esm/parser-html';
-
-export const preview = {
+/** @type { import('@storybook/html').Preview } */
+const preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/,
+        date: /Date$/i,
       },
-      expanded: true
-    },
-    viewport: { viewports: INITIAL_VIEWPORTS },
-    docs: {
-      transformSource: (src) => {
-        // Remove `() => `` from stories
-        const match = /^\(\) => [`'"](.*)['`"]$/sm.exec(src);
-        // Pretty print the Docs code source
-        return match ? prettier.format(match[1].trim(), {printWidth: 120, parser: "html", plugins: [htmlParser]}) : src;
-      }
     },
   },
-  decorators: [
-    withThemeByDataAttribute({
-      themes: {
-        light: 'light',
-        dark: 'dark',
-      },
-      defaultTheme: 'light',
-      attributeName: 'data-bs-theme',
-    }),
-  ]
-}
+};
+
 export default preview;