feat(storybook): upgrade from v6 to v10

.eslintignore

@@ -4,4 +4,4 @@ CHANGELOG.md
 .yarn_home/
 /test/integration/
 /storybook-static/
-
+!.storybook

.storybook/DocsContainer.js → .storybook/DocsContainer.tsx

@@ -1,7 +1,6 @@
-
-import React, { useEffect } from "react";
-import { DocsContainer as BaseContainer } from "@storybook/addon-docs";
-import { useDarkMode } from "storybook-dark-mode";
+import React, { PropsWithChildren, useEffect } from "react";
+import { DocsContainer as BaseContainer, DocsContainerProps } from "@storybook/addon-docs/blocks";
+import { useDarkMode } from "@vueless/storybook-dark-mode";
 import { darkTheme, lightTheme } from "./customTheme";
 import "../dist/dsfr/utility/icons/icons.min.css";
 import "../dist/dsfr/dsfr.css";
@@ -15,16 +14,13 @@ startReactDsfr({
     "useLang": () => "fr"
 });
 
-export const DocsContainer = ({ children, context }) => {
+export const DocsContainer = ({ children, ...rest }: PropsWithChildren<DocsContainerProps>) => {
     const isStorybookUiDark = useDarkMode();
     const { setIsDark } = useIsDark();
 
-    useEffect(
-        ()=> {
-            setIsDark(isStorybookUiDark);
-        },
-        [isStorybookUiDark]
-    );
+    useEffect(() => {
+        setIsDark(isStorybookUiDark);
+    }, [isStorybookUiDark]);
 
     const backgroundColor = fr.colors.decisions.background.default.grey.default;
 
@@ -52,27 +48,8 @@ export const DocsContainer = ({ children, context }) => {
                 }
 
             `}</style>
-            <BaseContainer
-                context={{
-                    ...context,
-                    "storyById": id => {
-                        const storyContext = context.storyById(id);
-                        return {
-                            ...storyContext,
-                            "parameters": {
-                                ...storyContext?.parameters,
-                                "docs": {
-                                    ...storyContext?.parameters?.docs,
-                                    "theme": isStorybookUiDark ? darkTheme : lightTheme
-                                }
-                            }
-                        };
-                    }
-                }}
-            >
-                <MuiDsfrThemeProvider>
-                    {children}
-                </MuiDsfrThemeProvider>
+            <BaseContainer {...rest} theme={isStorybookUiDark ? darkTheme : lightTheme}>
+                <MuiDsfrThemeProvider>{children}</MuiDsfrThemeProvider>
             </BaseContainer>
         </>
     );

.storybook/customTheme.js → .storybook/customTheme.ts

@@ -1,10 +1,10 @@
-import { create } from "@storybook/theming";
+import { create } from "storybook/theming";
 
-const brandImage= "logo.png";
-const brandTitle= "@codegouvfr/react-dsfr";
-const brandUrl= "https://github.com/codegouvfr/react-dsfr";
-const fontBase= '"Marianne", arial, sans-serif';
-const fontCode= "monospace";
+const brandImage = "logo.png";
+const brandTitle = "@codegouvfr/react-dsfr";
+const brandUrl = "https://github.com/codegouvfr/react-dsfr";
+const fontBase = '"Marianne", arial, sans-serif';
+const fontCode = "monospace";
 
 export const darkTheme = create({
     "base": "dark",

.storybook/main.ts

@@ -0,0 +1,25 @@
+import { StorybookConfig } from "@storybook/react-vite";
+
+export default {
+    framework: {
+        name: "@storybook/react-vite",
+        options: {}
+    },
+    features: {
+        controls: true
+    },
+    stories: [
+        "../stories/*.mdx",
+        "../stories/*.stories.@(ts|tsx)",
+        "../stories/blocks/*.stories.@(ts|tsx)",
+        "../stories/charts/*.stories.@(ts|tsx)",
+        "../stories/picto/*.stories.@(ts|tsx)"
+    ],
+    addons: [
+        "@storybook/addon-links",
+        "@vueless/storybook-dark-mode",
+        "@storybook/addon-a11y",
+        "@storybook/addon-docs"
+    ],
+    staticDirs: ["../dist", "./static"]
+} satisfies StorybookConfig;

.storybook/preview.tsx

@@ -0,0 +1,132 @@
+import { darkTheme, lightTheme } from "./customTheme";
+import { DocsContainer } from "./DocsContainer";
+import { Parameters, Preview } from "@storybook/react-vite";
+
+const preview: Preview = {
+    tags: ["autodocs"],
+    parameters: {
+        "actions": { "argTypesRegex": "^on[A-Z].*" },
+        "controls": {
+            "matchers": {
+                "color": /(background|color)$/i,
+                "date": /Date$/
+            }
+        },
+        "backgrounds": { disable: true },
+        "darkMode": {
+            "light": lightTheme,
+            "dark": darkTheme
+        },
+        "docs": {
+            "container": DocsContainer
+        },
+        "viewport": {
+            options: {
+                "1440p": {
+                    "name": "1440p",
+                    "styles": {
+                        "width": "2560px",
+                        "height": "1440px"
+                    }
+                },
+                "fullHD": {
+                    "name": "Full HD",
+                    "styles": {
+                        "width": "1920px",
+                        "height": "1080px"
+                    }
+                },
+                "macBookProBig": {
+                    "name": "MacBook Pro Big",
+                    "styles": {
+                        "width": "1024px",
+                        "height": "640px"
+                    }
+                },
+                "macBookProMedium": {
+                    "name": "MacBook Pro Medium",
+                    "styles": {
+                        "width": "1440px",
+                        "height": "900px"
+                    }
+                },
+                "macBookProSmall": {
+                    "name": "MacBook Pro Small",
+                    "styles": {
+                        "width": "1680px",
+                        "height": "1050px"
+                    }
+                },
+                "pcAgent": {
+                    "name": "PC Agent",
+                    "styles": {
+                        "width": "960px",
+                        "height": "540px"
+                    }
+                },
+                "iphone12Pro": {
+                    "name": "Iphone 12 pro",
+                    "styles": {
+                        "width": "390px",
+                        "height": "844px"
+                    }
+                },
+                "iphone5se": {
+                    "name": "Iphone 5/SE",
+                    "styles": {
+                        "width": "320px",
+                        "height": "568px"
+                    }
+                },
+                "ipadPro": {
+                    "name": "Ipad pro",
+                    "styles": {
+                        "width": "1240px",
+                        "height": "1366px"
+                    }
+                },
+                "Galaxy s9+": {
+                    "name": "Galaxy S9+",
+                    "styles": {
+                        "width": "320px",
+                        "height": "658px"
+                    }
+                }
+            }
+        },
+        "options": {
+            "storySort": (a: any, b: any) =>
+                getHardCodedWeight(b[1].kind) - getHardCodedWeight(a[1].kind)
+        }
+    }
+};
+
+export default preview;
+
+const { getHardCodedWeight } = (() => {
+    const orderedPagesPrefix = [
+        "🇫🇷 Introduction",
+        //"components",
+        "components/Header",
+        "components/Footer",
+        "components/consentManagement",
+        "components/Alert",
+        "components/Tabs",
+        "components/Stepper",
+        "components/Button",
+        "components/FranceConnectButton",
+        "components/ProConnectButton"
+    ];
+
+    function getHardCodedWeight(kind: string) {
+        for (let i = 0; i < orderedPagesPrefix.length; i++) {
+            if (kind.toLowerCase().startsWith(orderedPagesPrefix[i].toLowerCase())) {
+                return orderedPagesPrefix.length - i;
+            }
+        }
+
+        return 0;
+    }
+
+    return { getHardCodedWeight };
+})();