Merge pull request #475 from codegouvfr/revert-470-feat/upgrade-storybook

Revert "feat(storybook): upgrade from v6 to v10"

Author: garronej

.eslintignore

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

.storybook/DocsContainer.tsx .storybook/DocsContainer.js.storybook/DocsContainer.tsx renamed to .storybook/DocsContainer.js

@@ -1,44 +1,33 @@
-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 React, { useEffect } from "react";
+import { DocsContainer as BaseContainer } from "@storybook/addon-docs";
+import { useDarkMode } from "storybook-dark-mode";
 import { darkTheme, lightTheme } from "./customTheme";
 import "../dist/dsfr/utility/icons/icons.min.css";
 import "../dist/dsfr/dsfr.css";
 import { useIsDark } from "../dist/useIsDark";
 import { startReactDsfr } from "../dist/spa";
 import { fr } from "../dist/fr";
 import { MuiDsfrThemeProvider } from "../dist/mui";
-import { TableOfContentsCustom, TocType } from "./TableOfContents";
 
 startReactDsfr({
     "defaultColorScheme": "system",
     "useLang": () => "fr"
 });
 
-export const DocsContainer = ({ children, context }: PropsWithChildren<DocsContainerProps>) => {
+export const DocsContainer = ({ children, context }) => {
     const isStorybookUiDark = useDarkMode();
     const { setIsDark } = useIsDark();
 
-    useEffect(() => {
-        setIsDark(isStorybookUiDark);
-    }, [isStorybookUiDark]);
+    useEffect(
+        ()=> {
+            setIsDark(isStorybookUiDark);
+        },
+        [isStorybookUiDark]
+    );
 
     const backgroundColor = fr.colors.decisions.background.default.grey.default;
 
-    // took from addon-docs/src/blocks/DocsContainer.tsx
-    let toc: TocType | undefined;
-    try {
-        const meta = context.resolveOf("meta", ["meta"]);
-        toc = meta.preparedMeta.parameters?.docs?.toc;
-    } catch (err) {
-        // No meta, falling back to project annotations
-        toc = context?.projectAnnotations?.parameters?.docs?.toc;
-    }
-
     return (
         <>
             <style>{`
@@ -63,12 +52,26 @@ export const DocsContainer = ({ children, context }: PropsWithChildren<DocsConta
                 }
 
             `}</style>
-            <BaseContainer context={context} theme={isStorybookUiDark ? darkTheme : lightTheme}>
+            <BaseContainer
+                context={{
+                    ...context,
+                    "storyById": id => {
+                        const storyContext = context.storyById(id);
+                        return {
+                            ...storyContext,
+                            "parameters": {
+                                ...storyContext?.parameters,
+                                "docs": {
+                                    ...storyContext?.parameters?.docs,
+                                    "theme": isStorybookUiDark ? darkTheme : lightTheme
+                                }
+                            }
+                        };
+                    }
+                }}
+            >
                 <MuiDsfrThemeProvider>
-                    <Unstyled>
-                        {toc && <TableOfContentsCustom channel={context.channel} />}
-                        {children}
-                    </Unstyled>
+                    {children}
                 </MuiDsfrThemeProvider>
             </BaseContainer>
         </>

.storybook/Stories.tsx

@@ -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/TableOfContents.tsx

@@ -0,0 +1,19 @@
+module.exports = {
+    "stories": [
+        "../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",
+        "@storybook/addon-essentials",
+        "storybook-dark-mode",
+        "@storybook/addon-a11y"
+    ],
+    "core": {
+        "builder": "webpack5"
+    },
+    "staticDirs": ["../dist", "./static"]
+};

.storybook/customTheme.js

@@ -33,24 +33,4 @@
 	[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>