feat: upgrade storybook and add ToC

Author: lsagetlethias

.storybook/main.ts

@@ -1,13 +1,8 @@
-import { StorybookConfig } from "@storybook/react-vite";
+import { defineMain } from "@storybook/react-vite/node";
 
-export default {
-    framework: {
-        name: "@storybook/react-vite",
-        options: {}
-    },
+export default defineMain({
+    framework: "@storybook/react-vite",
     features: {
-        controls: true,
-        viewport: true,
         backgrounds: false
     },
     stories: [
@@ -23,4 +18,4 @@ export default {
         "@storybook/addon-docs"
     ],
     staticDirs: ["../dist", "./static"]
-} satisfies StorybookConfig;
+});

.storybook/preview.tsx

@@ -1,8 +1,50 @@
 import { darkTheme, lightTheme } from "./customTheme";
 import { DocsContainer } from "./DocsContainer";
-import { Preview } from "@storybook/react-vite";
+import { definePreview } from "@storybook/react-vite";
+import addonDocs from "@storybook/addon-docs";
+import addonLinks from "@storybook/addon-links";
+import addonA11y from "@storybook/addon-a11y";
+import { AddonTypes, PreviewAddon } from "storybook/internal/csf";
+import { ThemeVars } from "storybook/theming";
+import { ViewMode } from "storybook/internal/types";
 
-const preview: Preview = {
+interface DarkModeTypes extends AddonTypes {
+    parameters: {
+        darkMode?: {
+            light: ThemeVars;
+            dark: ThemeVars;
+        };
+    };
+}
+
+interface ViewModeTypes extends AddonTypes {
+    parameters: {
+        viewMode?: ViewMode;
+    };
+}
+
+interface PreviewTabsTypes extends AddonTypes {
+    parameters: {
+        previewTabs?: {
+            [key: string]: {
+                hidden: boolean;
+            };
+        };
+    };
+}
+
+const noop = <T extends AddonTypes>() => ({} as PreviewAddon<T>);
+
+export default definePreview({
+    // CSF Next syntax with custom additions for autocompletion
+    addons: [
+        addonDocs(),
+        addonLinks(),
+        addonA11y(),
+        noop<DarkModeTypes>(),
+        noop<ViewModeTypes>(),
+        noop<PreviewTabsTypes>()
+    ],
     tags: ["autodocs"],
     parameters: {
         actions: { argTypesRegex: "^on[A-Z].*" },
@@ -12,12 +54,14 @@ const preview: Preview = {
                 date: /Date$/
             }
         },
+        viewMode: "canvas",
         darkMode: {
             light: lightTheme,
             dark: darkTheme
         },
         docs: {
-            container: DocsContainer
+            container: DocsContainer,
+            toc: true
         },
         viewport: {
             options: {
@@ -115,6 +159,4 @@ const preview: Preview = {
             }
         }
     }
-};
-
-export default preview;
+});

package.json

@@ -83,10 +83,10 @@
         "@gouvfr/dsfr-chart": "^1.0.0",
         "@mui/icons-material": "^5.14.18",
         "@mui/material": "^5.14.18",
-        "@storybook/addon-a11y": "10.1.11",
-        "@storybook/addon-docs": "10.1.11",
-        "@storybook/addon-links": "10.1.11",
-        "@storybook/react-vite": "^10.1.11",
+        "@storybook/addon-a11y": "10.2.1",
+        "@storybook/addon-docs": "10.2.1",
+        "@storybook/addon-links": "10.2.1",
+        "@storybook/react-vite": "^10.2.1",
         "@tanstack/react-virtual": "^3.0.0-beta.39",
         "@types/css": "^0.0.33",
         "@types/jsdom": "^21.1.7",
@@ -98,13 +98,13 @@
         "@types/yargs-parser": "^21.0.3",
         "@typescript-eslint/eslint-plugin": "^5.43.0",
         "@typescript-eslint/parser": "^5.43.0",
-        "@vueless/storybook-dark-mode": "^10.0.4",
+        "@vueless/storybook-dark-mode": "^10.0.7",
         "babel-loader": "^8.3.0",
         "chromatic": "^6.17.2",
         "css": "^3.0.0",
         "eslint": "^8",
         "eslint-config-prettier": "^8.3.0",
-        "eslint-plugin-storybook": "10.1.11",
+        "eslint-plugin-storybook": "10.2.1",
         "evt": "^2.4.2",
         "fzf": "^0.5.1",
         "husky": "^4.3.8",
@@ -120,7 +120,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "remixicon": "^4.2.0",
-        "storybook": "10.1.11",
+        "storybook": "10.2.1",
         "svgo": "^3.3.2",
         "ts-node": "^10.9.1",
         "tss-react": "^4.9.1",