chore: upgrade to storybook 7

nl-design-system · Jul 11, 2023 · a424092 · a424092
1 parent bf0e345
commit a424092
Show file tree

Hide file tree

Showing 9 changed files with 2,052 additions and 4,746 deletions.
diff --git a/documentation/introduction.stories.mdx b/documentation/introduction.stories.mdx
@@ -1,6 +1,6 @@
-import { Description, Meta } from "@storybook/addon-docs";
+import { Markdown, Meta } from "@storybook/addon-docs";
 import markdown from "./introduction.md";
 
 <Meta title="Example/Intro" />
 
-<Description>{markdown}</Description>
+<Markdown>{markdown}</Markdown>
diff --git a/documentation/license.stories.mdx b/documentation/license.stories.mdx
@@ -1,6 +1,6 @@
-import { Description, Meta } from "@storybook/addon-docs";
+import { Markdown, Meta } from "@storybook/addon-docs";
 import markdown from "../LICENSE.md";
 
 <Meta title="Example/Open Source License" />
 
-<Description>{markdown}</Description>
+<Markdown>{markdown}</Markdown>
diff --git a/documentation/notice.stories.mdx b/documentation/notice.stories.mdx
@@ -1,6 +1,6 @@
-import { Description, Meta } from "@storybook/addon-docs";
+import { Markdown, Meta } from "@storybook/addon-docs";
 import markdown from "../NOTICE.md";
 
 <Meta title="Example/Toestemming voor gebruik" />
 
-<Description>{markdown}</Description>
+<Markdown>{markdown}</Markdown>
diff --git a/documentation/package.json b/documentation/package.json
@@ -11,7 +11,7 @@
   "devDependencies": {
     "@babel/core": "7.21.3",
     "@mdx-js/react": "1.6.22",
-    "@storybook/addon-docs": "6.5.16",
+    "@storybook/addon-docs": "7.0.26",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "4.9.5",

diff --git a/packages/components-css/package.json b/packages/components-css/package.json
@@ -11,7 +11,7 @@
   "devDependencies": {
     "@babel/core": "7.21.3",
     "@mdx-js/react": "1.6.22",
-    "@storybook/addon-docs": "6.5.16",
+    "@storybook/addon-docs": "7.0.26",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "4.9.5",

diff --git a/packages/storybook/.babelrc.json b/packages/storybook/.babelrc.json
@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}
diff --git a/packages/storybook/config/main.js b/packages/storybook/config/main.js
@@ -8,9 +8,11 @@ module.exports = {
     '@storybook/addon-viewport/register',
     '@storybook/preset-scss',
   ],
-  framework: '@storybook/react',
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
   core: {
-    builder: '@storybook/builder-webpack5',
     disableTelemetry: true,
   },
   docs: {

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -13,32 +13,34 @@
     "url": "git@github.com:nl-design-system/example.git"
   },
   "scripts": {
-    "build": "build-storybook --output-dir dist/ --config-dir config/",
+    "build": "storybook build --output-dir dist/ --config-dir config/",
     "clean": "rimraf dist/",
-    "storybook": "start-storybook --config-dir config/ --port 6006"
+    "storybook": "storybook dev --config-dir config/ --port 6006"
   },
   "devDependencies": {
     "@babel/core": "7.21.3",
-    "@etchteam/storybook-addon-status": "4.2.2",
-    "@storybook/addon-actions": "6.5.16",
-    "@storybook/addon-a11y": "6.5.16",
-    "@storybook/addon-docs": "6.5.16",
-    "@storybook/addon-interactions": "6.5.16",
-    "@storybook/addon-links": "6.5.16",
-    "@storybook/addon-viewport": "6.5.16",
-    "@storybook/builder-webpack5": "6.5.16",
-    "@storybook/manager-webpack5": "6.5.16",
-    "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "6.5.16",
-    "@storybook/testing-library": "0.0.13",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.11",
+    "@babel/preset-env": "7.22.7",
+    "@babel/preset-react": "7.22.5",
+    "@babel/preset-typescript": "7.22.5",
+    "@etchteam/storybook-addon-status": "4.2.4",
     "@example/assets": "workspace:*",
     "@example/components-css": "workspace:*",
-    "@example/documentation": "workspace:*",
     "@example/design-tokens": "workspace:*",
+    "@example/documentation": "workspace:*",
     "@example/font": "workspace:*",
     "@example/web-components-stencil": "workspace:*",
+    "@storybook/addon-a11y": "7.0.26",
+    "@storybook/addon-actions": "7.0.26",
+    "@storybook/addon-docs": "7.0.26",
+    "@storybook/addon-interactions": "7.0.26",
+    "@storybook/addon-links": "7.0.26",
+    "@storybook/addon-viewport": "7.0.26",
+    "@storybook/preset-scss": "1.0.3",
+    "@storybook/react": "7.0.26",
+    "@storybook/react-webpack5": "7.0.26",
+    "@storybook/testing-library": "0.2.0",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
     "babel-loader": "9.1.2",
     "css-loader": "6.7.3",
     "react": "18.2.0",
@@ -47,9 +49,9 @@
     "rimraf": "4.4.1",
     "sass": "1.59.3",
     "sass-loader": "13.2.1",
+    "storybook": "7.0.26",
     "style-loader": "3.3.2",
     "typescript": "4.9.5",
     "webpack": "5.76.3"
-  },
-  "dependencies": {}
+  }
 }