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,10 @@
-
-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,
+    Unstyled
+} 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 +18,13 @@ startReactDsfr({
     "useLang": () => "fr"
 });
 
-export const DocsContainer = ({ children, context }) => {
+export const DocsContainer = ({ children, context }: 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,26 +52,9 @@ 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
-                                }
-                            }
-                        };
-                    }
-                }}
-            >
+            <BaseContainer context={context} theme={isStorybookUiDark ? darkTheme : lightTheme}>
                 <MuiDsfrThemeProvider>
-                    {children}
+                    <Unstyled>{children}</Unstyled>
                 </MuiDsfrThemeProvider>
             </BaseContainer>
         </>

.storybook/customTheme.ts

@@ -0,0 +1,35 @@
+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";
+
+export const darkTheme = create({
+    base: "dark",
+    appBg: "#1E1E1E",
+    appContentBg: "#161616",
+    barBg: "#161616",
+    colorSecondary: "#8585F6",
+    textColor: "#FFFFFF",
+    brandImage,
+    brandTitle,
+    brandUrl,
+    fontBase,
+    fontCode
+});
+
+export const lightTheme = create({
+    base: "light",
+    appBg: "#F6F6F6",
+    appContentBg: "#FFFFFF",
+    barBg: "#FFFFFF",
+    colorSecondary: "#000091",
+    textColor: "#212121",
+    brandImage,
+    brandTitle,
+    brandUrl,
+    fontBase,
+    fontCode
+});

.storybook/main.ts

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

.storybook/manager-head.html

@@ -33,4 +33,24 @@
 	[data-parent-id^="hidden"] {
 		display: none !important;
 	}
+
+	/* full manager loader (circle) */
+	body.dark div[aria-label^="Content is loading..."] {
+		border-color: rgb(133, 133, 246) rgba(130, 130, 243, 0.29) rgba(130, 130, 243, 0.29) !important;
+		mix-blend-mode: normal !important;
+	}
+
+	body:not(.dark) div[aria-label^="Content is loading..."] {
+		border-color: rgb(0, 0, 145) rgba(0, 0, 142, 0.29) rgba(0, 0, 142, 0.29) !important;
+		mix-blend-mode: normal !important;
+	}
+
+	/* full manager page loader (dsfr vars not available) */
+	body.dark section[aria-labelledby="main-preview-heading"] div:has(+ #storybook-preview-wrapper) {
+		background-color: #161616 !important;
+	}
+
+	body:not(.dark) section[aria-labelledby="main-preview-heading"] div:has(+ #storybook-preview-wrapper) {
+		background-color: #ffffff !important;
+	}
 </style>

.storybook/preview-head.html

@@ -0,0 +1,49 @@
+<style>
+    /* Override Storybook default grey colors with DSFR grey colors */
+    .sb-preparing-story,
+    .sb-preparing-docs {
+        background-color: var(--background-default-grey) !important;
+    }
+
+    .sb-loader {
+        border-color: var(--border-default-grey);
+        border-top-color: var(--border-default-grey);
+    }
+
+    .sb-previewBlock {
+        background: var(--background-default-grey);
+        border: 1px solid var(--border-default-grey);
+        box-shadow: var(--border-default-grey) 0 1px 3px 0;
+    }
+
+    .sb-previewBlock_header {
+        box-shadow: var(--border-default-grey) 0 -1px 0 0 inset;
+    }
+
+    .sb-previewBlock_icon {
+        background: var(--background-alt-grey);
+    }
+
+    .sb-argstableBlock th span,
+    .sb-argstableBlock td span {
+        background-color: var(--background-default-grey);
+    }
+
+    .sb-argstableBlock-body td {
+        box-shadow:
+            var(--border-contrast-grey) 0 1px 3px 1px,
+            var(--border-default-grey) 0 0 0 1px;
+    }
+
+    .sb-argstableBlock-body tr:not(:first-child) {
+        border-top: 1px solid var(--border-default-grey);
+    }
+
+    .sb-argstableBlock-body td {
+        background: var(--background-default-grey);
+    }
+
+    .sb-argstableBlock-body button {
+        background-color: var(--background-alt-grey);
+    }
+</style>