docs: upgrade storybook to v7

canonical · Nov 10, 2023 · 5be9897 · 5be9897
1 parent 4915006
commit 5be9897
Show file tree

Hide file tree

Showing 4 changed files with 4,320 additions and 6,509 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,14 +1,13 @@
 const path = require("path");
 
-module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
+const config = {
   stories: ["../src/**/*.stories.@(js|ts|jsx|tsx|mdx)"],
+
   addons: [
     "@storybook/addon-docs",
     "@storybook/addon-controls",
     "@storybook/addon-a11y",
+    "@storybook/addon-mdx-gfm",
   ],
   webpackFinal: async (config, { configType }) => {
     config.module.rules.push({
@@ -18,4 +17,17 @@ module.exports = {
     });
     return config;
   },
+
+  docs: {
+    autodocs: false,
+  },
+
+  core: {},
+
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
 };
+
+export default config;
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,7 +1,6 @@
 import { themes } from "@storybook/theming";
 import "vanilla-framework/scss/build.scss";
 
-// or global addParameters
 export const parameters = {
   docs: {
     theme: themes.vanillaish,

diff --git a/package.json b/package.json
@@ -27,14 +27,15 @@
     "@babel/preset-typescript": "7.23.2",
     "@percy/cli": "1.27.3",
     "@percy/storybook": "4.3.7",
-    "@storybook/addon-a11y": "6.5.16",
-    "@storybook/addon-controls": "6.5.16",
-    "@storybook/addon-docs": "6.5.16",
-    "@storybook/addons": "6.5.16",
-    "@storybook/builder-webpack5": "6.5.16",
-    "@storybook/manager-webpack5": "6.5.16",
-    "@storybook/react": "6.5.16",
-    "@storybook/theming": "6.5.16",
+    "@storybook/addon-a11y": "7.5.3",
+    "@storybook/addon-essentials": "7.5.3",
+    "@storybook/addon-interactions": "7.5.3",
+    "@storybook/addon-links": "7.5.3",
+    "@storybook/addon-mdx-gfm": "7.5.3",
+    "@storybook/addon-onboarding": "1.0.8",
+    "@storybook/blocks": "7.5.3",
+    "@storybook/react": "7.5.3",
+    "@storybook/react-webpack5": "7.5.3",
     "@testing-library/cypress": "9.0.0",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "5.17.0",
@@ -61,6 +62,7 @@
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-testing-library": "5.11.1",
     "jest": "27.5.1",
     "npm-package-json-lint": "5.4.2",
@@ -70,6 +72,7 @@
     "react-dom": "18.2.0",
     "sass": "1.69.3",
     "sass-loader": "10.4.1",
+    "storybook": "7.5.3",
     "style-loader": "3.3.3",
     "stylelint": "15.11.0",
     "stylelint-config-prettier": "9.0.5",
@@ -99,7 +102,11 @@
   "resolutions": {
     "@types/react": "18.2.28",
     "@types/react-dom": "18.2.13",
-    "postcss": "^8.3.11"
+    "postcss": "^8.3.11",
+    "string-width": "^4",
+    "jackspeak": "^2",
+    "strip-ansi": "^6.0.0",
+    "strip-ansi-cjs": "^8.0.0"
   },
   "peerDependencies": {
     "@types/react": "^17.0.2 || ^18.0.0",
@@ -113,9 +120,9 @@
     "build-local": "NODE_ENV=production babel src --out-dir dist --copy-files --extensions '.js,.jsx,.ts,.tsx'",
     "build-declaration": "tsc --project tsconfig.json && tsc-alias -p tsconfig.json",
     "build-watch": "yarn run build-local --watch",
-    "build-docs": "build-storybook -c .storybook -o docs",
+    "build-docs": "storybook build -c .storybook -o docs",
     "clean": "rm -rf node_modules dist .out",
-    "docs": "start-storybook --port ${PORT:-9009}",
+    "docs": "storybook dev -p ${PORT:-9009}",
     "link-packages": "yarn install && yarn build && yarn link && cd node_modules/react && yarn link && cd ../react-dom && yarn link",
     "lint-js": "eslint src",
     "lint-style": "stylelint src/**/*.scss",