upgrade from 6 to 8

Author: lsagetlethias

.storybook/main.js

@@ -1,19 +1,29 @@
 module.exports = {
+    "framework": {
+        name: "@storybook/nextjs",
+        options: {}
+    },
+
     "stories": [
-        "../stories/*.stories.mdx",
+        "../stories/*.mdx",
         "../stories/*.stories.@(ts|tsx)",
         "../stories/blocks/*.stories.@(ts|tsx)",
         "../stories/charts/*.stories.@(ts|tsx)",
-        "../stories/picto/*.stories.@(ts|tsx)",
+        "../stories/picto/*.stories.@(ts|tsx)"
     ],
+
     "addons": [
         "@storybook/addon-links",
         "@storybook/addon-essentials",
         "storybook-dark-mode",
-        "@storybook/addon-a11y"
+        "@storybook/addon-a11y",
+        "@storybook/addon-mdx-gfm",
+        "@storybook/addon-webpack5-compiler-swc"
     ],
-    "core": {
-        "builder": "webpack5"
-    },
-    "staticDirs": ["../dist", "./static"]
+
+    "staticDirs": ["../dist", "./static"],
+
+    docs: {
+        autodocs: true
+    }
 };

package.json

@@ -22,8 +22,8 @@
         "_format": "prettier '**/*.{ts,tsx,json,md}'",
         "format": "yarn _format --write",
         "format:check": "yarn _format --list-different",
-        "storybook": "start-storybook -p 6006",
-        "build-storybook": "build-storybook",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
         "prestorybook": "yarn build && node dist/bin/react-dsfr update-icons",
         "prebuild-storybook": "yarn prestorybook"
     },
@@ -83,15 +83,16 @@
         "@gouvfr/dsfr-chart": "^1.0.0",
         "@mui/icons-material": "^5.14.18",
         "@mui/material": "^5.14.18",
-        "@storybook/addon-a11y": "^6.5.16",
-        "@storybook/addon-actions": "^6.5.13",
-        "@storybook/addon-essentials": "^6.5.13",
-        "@storybook/addon-interactions": "^6.5.13",
-        "@storybook/addon-links": "^6.5.13",
-        "@storybook/builder-webpack5": "^6.5.13",
-        "@storybook/manager-webpack5": "^6.5.13",
-        "@storybook/react": "^6.5.13",
-        "@storybook/testing-library": "^0.0.13",
+        "@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-webpack5-compiler-swc": "^3.0.0",
+        "@storybook/nextjs": "8.6.15",
+        "@storybook/react": "8.6.15",
+        "@storybook/test": "8.6.15",
         "@tanstack/react-virtual": "^3.0.0-beta.39",
         "@types/css": "^0.0.33",
         "@types/jsdom": "^21.1.7",
@@ -102,6 +103,7 @@
         "@types/react-dom": "18.0.6",
         "@typescript-eslint/eslint-plugin": "^5.43.0",
         "@typescript-eslint/parser": "^5.43.0",
+        "@vueless/storybook-dark-mode": "^10.0.4",
         "babel-loader": "^8.3.0",
         "chromatic": "^6.17.2",
         "css": "^3.0.0",
@@ -123,7 +125,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "remixicon": "^4.2.0",
-        "storybook-dark-mode": "^1.1.2",
+        "storybook": "8.6.15",
         "svgo": "^3.3.2",
         "ts-node": "^10.9.1",
         "tss-react": "^4.9.1",

stories/Pictograms.stories.mdx stories/Pictograms.mdxstories/Pictograms.stories.mdx renamed to stories/Pictograms.mdx

@@ -1,9 +1,9 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/blocks";
 import { Pictograms } from "./picto/Pictograms";
 
 <Meta
-    title="🖼️ Pictograms"
-    parameters={{
+  title="🖼️ Pictograms"
+  parameters={{
         "viewMode": "docs",
         "previewTabs": {
             "canvas": { "hidden": true },
@@ -15,5 +15,5 @@ import { Pictograms } from "./picto/Pictograms";
 />
 
 <div style={{ "margin": "0 auto", "maxWidth": 1000 }}>
-    <Pictograms />
+  <Pictograms />
 </div>

stories/colorHelper.stories.mdx stories/colorHelper.mdxstories/colorHelper.stories.mdx renamed to stories/colorHelper.mdx

@@ -1,9 +1,9 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/blocks";
 import { ColorHelper } from "./ColorHelper";
 
 <Meta
-    title="🎨 Color Helper" 
-    parameters={{
+  title="🎨 Color Helper"
+  parameters={{
         "viewMode": "docs",
         "previewTabs": {
             "canvas": { "hidden": true },
@@ -15,5 +15,5 @@ import { ColorHelper } from "./ColorHelper";
 />
 
 <div style={{ "margin": "0 auto", "maxWidth": 1000 }}>
-    <ColorHelper />
+  <ColorHelper />
 </div>

stories/intro.mdx

@@ -0,0 +1,41 @@
+import { Meta } from "@storybook/blocks";
+import { useDarkMode } from "storybook-dark-mode";
+import { RotatingLogo } from "./RotatingLogo";
+
+<Meta
+  title="🇫🇷 Introduction"
+  parameters={{
+        "viewMode": "docs",
+        "previewTabs": {
+            "canvas": { "hidden": true },
+            "zoom": { "hidden": true },
+            "storybook/background": { "hidden": true },
+            "storybook/viewport": { "hidden": true },
+        },
+    }}
+/>
+
+<div style={{ "margin": "0 auto", "maxWidth": "700px", "textAlign": "center" }}>
+  <div style={{ "display": "flex", "justifyContent": "center" }}>
+    <RotatingLogo style={{ "width": 250 }} />
+  </div>
+
+  <br />
+
+  🇫🇷 <i>The <a href="https://www.systeme-de-design.gouv.fr/">French State Design System</a> React toolkit</i> 🇫🇷
+
+  <br />
+
+  [Github](https://github.com/codegouvfr/react-dsfr) - [Documentation](https://react-dsfr.codegouv.studio/)
+
+  <iframe width="560" height="315" src="https://www.youtube.com/embed/5q88JgXUAY4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />
+
+  <br />
+
+  This Storybook website serves as your daily companion for developing with React-DSFR.
+  It not only provides visibility into the available components but also allows you to preview them in various states,
+  enabling you to copy and paste the code directly into your project.
+
+  Additionally, this website features a handy [color helper tool](/?path=/docs/%F0%9F%8E%A8-color-helper--page).
+  This tool empowers you to navigate through the DSFR color palette and choose the most fitting shades for your specific use cases.
+</div>