Upgrade to Storybook v7

.babelrc.json

@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.github/workflows/on-branch-push.yml

@@ -30,7 +30,7 @@ jobs:
         with:
           node-version: 20.10.0
       - uses: ./.github/actions/pnpm-install
-      - run: pnpm exec build-storybook --docs --quiet
+      - run: pnpm exec storybook build --docs --quiet
   check-frontend-code-quality:
     name: Check frontend code quality
     needs: build

.github/workflows/on-mainline-push.yml

@@ -35,7 +35,7 @@ jobs:
         with:
           node-version: 20.10.0
       - uses: ./.github/actions/pnpm-install
-      - run: pnpm exec build-storybook --docs --quiet
+      - run: pnpm exec storybook build --docs --quiet
       - name: Store Storybook build output
         uses: actions/upload-artifact@v3
         with:

.storybook/main.js

@@ -1,8 +1,6 @@
 module.exports = {
-  addons: ["@storybook/addon-docs"],
-  core: {
-    builder: "webpack5",
-  },
+  addons: ["@storybook/addon-docs", "@storybook/addon-mdx-gfm"],
+
   stories: [
     // Intro
     "../src/@cy7/docs/intro/HelloWorld.stories.mdx",
@@ -25,4 +23,13 @@ module.exports = {
     "../src/@cy7/docs/website/Overview.stories.mdx",
     "../src/@cy7/docs/website/**/*.stories.{mdx,tsx}",
   ],
+
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
+  },
 };

README.md

@@ -68,4 +68,4 @@ You can read more about this project's code quality guidance in the [developer g
 - **Format all code with Prettier:** `pnpm exec prettier --write .`
 - **Run all code quality checks at once:** `pnpm exec lefthook run check-all`
 - **Run Storybook:** `pnpm run storybook`
-- **Build Storybook:** `pnpm exec build-storybook --docs`
+- **Build Storybook:** `pnpm exec storybook build --docs`

package.json

@@ -7,15 +7,17 @@
   "sideEffects": false,
   "dependencies": {
     "@babel/core": "^7.23.7",
+    "@babel/preset-env": "^7.23.7",
+    "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@dangerfarms/eslint-config-df": "^6.2.0",
     "@mdx-js/react": "^3.0.0",
     "@stitches/react": "^1.2.8",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-docs": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^6.5.16",
+    "@storybook/addon-actions": "^7.6.7",
+    "@storybook/addon-docs": "^7.6.7",
+    "@storybook/addon-mdx-gfm": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-webpack5": "^7.6.7",
     "@types/jest": "^26.0.24",
     "@types/node": "^20.10.6",
     "@types/prismjs": "^1.26.3",
@@ -64,6 +66,7 @@
     "react-dom": "^18.2.0",
     "react-innertext": "^1.1.5",
     "react-typography": "^0.16.23",
+    "storybook": "^7.6.7",
     "typescript": "^4.9.5",
     "typography": "^0.16.24",
     "webpack": "5.89.0"
@@ -83,7 +86,7 @@
     "build": "gatsby build",
     "start": "GATSBY_GRAPHQL_IDE=playground gatsby develop",
     "test": "jest",
-    "storybook": "start-storybook -p 8001 --docs"
+    "storybook": "storybook dev -p 8001 --docs"
   },
   "repository": {
     "type": "git",