fix: storybook up to v7

.github/workflows/storybook.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Install NodeJS
         uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: "20"
           cache: "yarn"
 
       - name: Install dependencies
@@ -28,7 +28,6 @@ jobs:
 
       - name: Deploy
         run: |
-          export NODE_OPTIONS='--openssl-legacy-provider'
           git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
           yarn storybook:deploy:action
         env:

.gitignore

@@ -53,4 +53,7 @@ robots.txt
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+
+# storybook
+/.out

.node-version

@@ -0,0 +1 @@
+20

.storybook/DocsContainer.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { DocsContainer as BaseContainer } from "@storybook/addon-docs";
+import { DocsContainer } from "@storybook/blocks";
 import { useDarkMode } from "storybook-dark-mode";
 import { darkTheme, lightTheme } from "./customTheme";
 import "@codegouvfr/react-dsfr/dsfr/dsfr.css";
@@ -14,14 +14,13 @@ startReactDsfr({
   langIfNoProvider: "fr",
 });
 
-export const DocsContainer = ({ children, context }) => {
+export const CustomDocsContainer = (props) => {
   const isStorybookUiDark = useDarkMode();
   const { setIsDark } = useIsDark();
 
   useEffect(() => {
     setIsDark(isStorybookUiDark);
   }, [isStorybookUiDark]);
-
   const backgroundColor = useColors().decisions.background.default.grey.default;
 
   return (
@@ -44,26 +43,11 @@ 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,
-                },
-              },
-            };
-          },
-        }}
-      >
-        {children}
-      </BaseContainer>
+
+      <DocsContainer
+        {...props}
+        theme={isStorybookUiDark ? darkTheme : lightTheme}
+      />
     </>
   );
 };

.storybook/main.js

@@ -2,13 +2,19 @@ const path = require("path");
 
 module.exports = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "storybook-dark-mode",
   ],
-  framework: "@storybook/react",
+
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+
   webpackFinal: async (config, { configType }) => {
     config.module.rules.push({
       test: /\.mjs$/,
@@ -17,5 +23,10 @@ module.exports = {
     });
     return config;
   },
+
   staticDirs: ["./static"],
+
+  docs: {
+    autodocs: true,
+  },
 };

.storybook/preview.js

@@ -1,105 +1,100 @@
 import { darkTheme, lightTheme } from "./customTheme";
-import { DocsContainer } from "./DocsContainer";
+import { CustomDocsContainer } from "./DocsContainer";
 
 export const 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
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
     },
-    "viewport": {
-        "viewports": {
-            "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",
-                },
-            }
+  },
+  backgrounds: { disable: true },
+  darkMode: {
+    light: lightTheme,
+    dark: darkTheme,
+  },
+  viewMode: "docs",
+  docs: {
+    container: CustomDocsContainer,
+  },
+  viewport: {
+    viewports: {
+      "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, b) =>
-            getHardCodedWeight(b[1].kind) - getHardCodedWeight(a[1].kind),
-    },
-};
-
-const { getHardCodedWeight } = (() => {
-
-    const orderedPagesPrefix = [
+  },
+  options: {
+    storySort: (a, b) => {
+      const orderedPagesPrefix = [
         "🇫🇷 Introduction",
         //"components",
         "components/Header",
@@ -108,18 +103,19 @@ const { getHardCodedWeight } = (() => {
         "components/Tabs",
         "components/Stepper",
         "components/Button",
-    ];
-
-    function getHardCodedWeight(kind) {
-
+      ];
+      function getHardCodedWeight(kind) {
         for (let i = 0; i < orderedPagesPrefix.length; i++) {
-            if (kind.toLowerCase().startsWith(orderedPagesPrefix[i].toLowerCase())) {
-                return orderedPagesPrefix.length - i;
-            }
+          if (
+            kind.toLowerCase().startsWith(orderedPagesPrefix[i].toLowerCase())
+          ) {
+            return orderedPagesPrefix.length - i;
+          }
         }
 
         return 0;
-    }
-
-    return { getHardCodedWeight };
-})();
+      }
+      return getHardCodedWeight(b.title) - getHardCodedWeight(a.title);
+    },
+  },
+};