upgrade from 8 to 9

Author: lsagetlethias

.eslintignore

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

.storybook/customTheme.js

@@ -1,4 +1,4 @@
-import { create } from "@storybook/theming";
+import { create } from "storybook/theming";
 
 const brandImage= "logo.png";
 const brandTitle= "@codegouvfr/react-dsfr";

.storybook/main.js

@@ -14,16 +14,11 @@ module.exports = {
 
     "addons": [
         "@storybook/addon-links",
-        "@storybook/addon-essentials",
         "storybook-dark-mode",
         "@storybook/addon-a11y",
-        "@storybook/addon-mdx-gfm",
-        "@storybook/addon-webpack5-compiler-swc"
+        "@storybook/addon-webpack5-compiler-swc",
+        "@storybook/addon-docs"
     ],
 
-    "staticDirs": ["../dist", "./static"],
-
-    docs: {
-        autodocs: true
-    }
+    "staticDirs": ["../dist", "./static"]
 };

.storybook/preview.js

@@ -9,7 +9,7 @@ export const parameters = {
             "date": /Date$/,
         },
     },
-    "backgrounds": { "disable": true },
+    "backgrounds": { disabled: true },
     "darkMode": {
         "light": lightTheme,
         "dark": darkTheme,
@@ -18,7 +18,7 @@ export const parameters = {
         "container": DocsContainer
     },
     "viewport": {
-        "viewports": {
+        options: {
             "1440p": {
                 "name": "1440p",
                 "styles": {
@@ -126,3 +126,4 @@ const { getHardCodedWeight } = (() => {
 
     return { getHardCodedWeight };
 })();
+export const tags = ["autodocs"];

package.json

@@ -83,16 +83,11 @@
         "@gouvfr/dsfr-chart": "^1.0.0",
         "@mui/icons-material": "^5.14.18",
         "@mui/material": "^5.14.18",
-        "@storybook/addon-a11y": "8.6.15",
-        "@storybook/addon-actions": "8.6.15",
-        "@storybook/addon-essentials": "8.6.15",
-        "@storybook/addon-interactions": "8.6.15",
-        "@storybook/addon-links": "8.6.15",
-        "@storybook/addon-mdx-gfm": "8.6.15",
+        "@storybook/addon-a11y": "9.1.17",
+        "@storybook/addon-docs": "9.1.17",
+        "@storybook/addon-links": "9.1.17",
         "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-        "@storybook/nextjs": "8.6.15",
-        "@storybook/react": "8.6.15",
-        "@storybook/test": "8.6.15",
+        "@storybook/nextjs": "9.1.17",
         "@tanstack/react-virtual": "^3.0.0-beta.39",
         "@types/css": "^0.0.33",
         "@types/jsdom": "^21.1.7",
@@ -107,9 +102,9 @@
         "babel-loader": "^8.3.0",
         "chromatic": "^6.17.2",
         "css": "^3.0.0",
-        "eslint": "^7.26.0",
+        "eslint": "^8",
         "eslint-config-prettier": "^8.3.0",
-        "eslint-plugin-storybook": "^0.6.7",
+        "eslint-plugin-storybook": "9.1.17",
         "evt": "^2.4.2",
         "fzf": "^0.5.1",
         "husky": "^4.3.8",
@@ -125,7 +120,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "remixicon": "^4.2.0",
-        "storybook": "8.6.15",
+        "storybook": "9.1.17",
         "svgo": "^3.3.2",
         "ts-node": "^10.9.1",
         "tss-react": "^4.9.1",

stories/Follow.stories.tsx

@@ -1,8 +1,7 @@
 import { Follow, type FollowProps } from "../dist/Follow";
 import { sectionName } from "./sectionName";
 import { getStoryFactory } from "./getStory";
-import { action } from "@storybook/addon-actions";
-import React from "react";
+import { action } from "storybook/actions";
 
 const { meta, getStory } = getStoryFactory<FollowProps>({
     sectionName,

stories/Pictograms.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs/blocks";
 import { Pictograms } from "./picto/Pictograms";
 
 <Meta

stories/colorHelper.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs/blocks";
 import { ColorHelper } from "./ColorHelper";
 
 <Meta

stories/intro.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs/blocks";
 import { useDarkMode } from "storybook-dark-mode";
 import { RotatingLogo } from "./RotatingLogo";