feat(storybook): upgrade to Storybook 9 ✨

.github/workflows/build.yml

@@ -0,0 +1,33 @@
+name: Validate Build 📦
+
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout 🛒
+        uses: actions/checkout@v1
+
+      - name: Configure Node 🔧
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+      - name: Install Dependencies 📦
+        run: |
+          npm install -g yarn
+          yarn
+          yarn run ci
+        env:
+          CI: true
+
+      - name: Validate Code Style 📏
+        run: |
+          yarn lint
+
+      - name: Validate Build ✅
+        run: |
+          yarn build
+        env:
+          CI: true

.nvmrc

@@ -1 +1 @@
-lts/hydrogen
+lts/jod

package.json

@@ -49,4 +49,4 @@
     "webpack": "^5.77.0",
     "yarn-deduplicate": "^6.0.1"
   }
-}
+}

packages/mock-addon-docs/.storybook/main.js

@@ -1,20 +1,40 @@
+import { createRequire } from 'node:module';
+import { dirname, join } from 'node:path';
+import remarkGfm from 'remark-gfm';
+
+const require = createRequire(import.meta.url);
 const config = {
     stories: [
         '../stories/**/*.mdx',
         '../stories/**/stories.@(js|jsx|mjs|ts|tsx)',
     ],
+
     addons: [
-        '../../mock-addon/src/preset/manager.js',
+        getAbsolutePath('../../mock-addon/src/preset/manager.js'),
         '@storybook/addon-links',
-        '@storybook/addon-essentials',
-        '@storybook/addon-interactions',
+        {
+            name: '@storybook/addon-docs',
+            options: {
+                mdxPluginOptions: {
+                    mdxCompileOptions: {
+                        remarkPlugins: [remarkGfm],
+                    },
+                },
+            },
+        },
     ],
+
     framework: {
         name: '@storybook/react-vite',
         options: {},
     },
-    docs: {
-        autodocs: 'tag',
-    }
 };
 export default config;
+
+function getAbsolutePath(value) {
+    if (value.startsWith('.') || value.startsWith('/')) {
+        return require.resolve(value);
+    }
+
+    return dirname(require.resolve(join(value, 'package.json')));
+}

packages/mock-addon-docs/package.json

@@ -1,35 +1,33 @@
 {
-  "name": "storybook-addon-mock-docs",
-  "version": "1.0.0",
-  "description": "A package with documentation and example for storybook-addon-mock",
-  "main": "index.js",
-  "scripts": {
-    "lint": "eslint .",
-    "lint:fix": "yarn run lint --fix",
-    "test": "echo \"Error: no test specified\"",
-    "storybook": "storybook dev -p 6006",
-    "build": "storybook build",
-    "serve-storybook": "serve storybook-static"
-  },
-  "keywords": [],
-  "author": "Farhad Yasir(nutboltu)",
-  "license": "MIT",
-  "devDependencies": {
-    "@storybook/addon-actions": "^8.0.8",
-    "@storybook/addon-essentials": "^8.0.8",
-    "@storybook/addon-interactions": "^8.0.8",
-    "@storybook/addon-links": "^8.0.8",
-    "@storybook/react": "^8.0.8",
-    "@storybook/react-vite": "^8.0.8",
-    "@storybook/storybook-deployer": "^2.8.16",
-    "storybook": "^8.0.8"
-  },
-  "dependencies": {
-    "axios": "^1.3.4",
-    "react": "^18.2.0",
-    "react-code-blocks": "^0.0.9-0",
-    "react-dom": "^18.2.0",
-    "superagent": "^8.0.9",
-    "vite": "^5.2.8"
-  }
+    "name": "storybook-addon-mock-docs",
+    "version": "1.0.0",
+    "description": "A package with documentation and example for storybook-addon-mock",
+    "main": "index.js",
+    "scripts": {
+        "lint": "eslint .",
+        "lint:fix": "yarn run lint --fix",
+        "test": "echo \"Error: no test specified\"",
+        "storybook": "storybook dev -p 6006",
+        "build": "storybook build",
+        "serve-storybook": "serve storybook-static"
+    },
+    "keywords": [],
+    "author": "Farhad Yasir(nutboltu)",
+    "license": "MIT",
+    "devDependencies": {
+        "@storybook/addon-docs": "^9.0.12",
+        "@storybook/addon-links": "^9.0.12",
+        "@storybook/react-vite": "^9.0.12",
+        "@storybook/storybook-deployer": "^2.8.16",
+        "remark-gfm": "^4.0.1",
+        "storybook": "^9.0.12"
+    },
+    "dependencies": {
+        "axios": "^1.3.4",
+        "react": "^18.2.0",
+        "react-code-blocks": "^0.0.9-0",
+        "react-dom": "^18.2.0",
+        "superagent": "^8.0.9",
+        "vite": "^5.2.8"
+    }
 }

packages/mock-addon-docs/stories/docs/advanced-setup.mdx

@@ -1,5 +1,5 @@
 
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs/blocks';
 import { Footer } from './footer';
 
 <Meta title="Docs/Advanced setup" />

packages/mock-addon-docs/stories/docs/installation-setup.mdx

@@ -1,5 +1,5 @@
 
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs/blocks';
 import LinkTo from '@storybook/addon-links/react';
 import { Footer } from './footer';
 

packages/mock-addon-docs/stories/docs/introduction.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs/blocks';
 import Logo from '../assets/logo.svg';
 import { Footer } from './footer';
 

packages/mock-addon-docs/stories/docs/user-guide.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs/blocks';
 import { Footer } from './footer';
 
 <Meta title="Docs/User guide" />

packages/mock-addon/package.json

@@ -1,97 +1,92 @@
 {
-  "name": "storybook-addon-mock",
-  "version": "5.0.0",
-  "description": "A storybook addon to mock fetch/XHR request",
-  "keywords": [
-    "storybook",
-    "mock",
-    "http-mock",
-    "fetch-mock",
-    "xhr-mock",
-    "mock-data",
-    "storybook-addon",
-    "data-state",
-    "storybook-mock-request",
-    "mock-request"
-  ],
-  "author": "Farhad Yasir (nutboltu)",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/nutboltu/storybook-addon-mock.git"
-  },
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/ts/index.d.ts",
-  "files": [
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
-  "scripts": {
-    "clean": "rimraf ./dist",
-    "buildBabel": "concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"",
-    "buildBabel:cjs": "babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"",
-    "buildBabel:esm": "babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"",
-    "prebuild": "yarn clean",
-    "build": "yarn buildBabel",
-    "build:watch": "yarn buildBabel:esm -- --watch",
-    "lint": "eslint .",
-    "lint:fix": "yarn run lint --fix",
-    "test": "jest src",
-    "prerelease": "zx scripts/prepublish-checks.mjs",
-    "release": "yarn build && auto shipit"
-  },
-  "dependencies": {
-    "@storybook/blocks": "^8.0.8",
-    "@storybook/channels": "^8.0.8",
-    "@storybook/components": "^8.0.8",
-    "@storybook/core-events": "^8.0.8",
-    "@storybook/manager-api": "^8.0.8",
-    "@storybook/preview-api": "^8.0.8",
-    "@storybook/theming": "^8.0.8",
-    "mock-xmlhttprequest": "^8.1.0",
-    "path-to-regexp": "^6.2.1",
-    "polished": "^4.2.2",
-    "prop-types": "^15.8.1",
-    "storybook": "^8.0.8",
-    "whatwg-fetch": "^3.6.19"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.21.0",
-    "@babel/preset-env": "^7.21.4",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.4",
-    "auto": "^10.43.0",
-    "boxen": "^5.0.1",
-    "concurrently": "^6.2.0",
-    "dedent": "^0.7.0",
-    "rimraf": "^3.0.2",
-    "typescript": "^4.9.4",
-    "zx": "^1.14.1"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
+    "name": "storybook-addon-mock",
+    "version": "5.0.0",
+    "description": "A storybook addon to mock fetch/XHR request",
+    "keywords": [
+        "storybook",
+        "mock",
+        "http-mock",
+        "fetch-mock",
+        "xhr-mock",
+        "mock-data",
+        "storybook-addon",
+        "data-state",
+        "storybook-mock-request",
+        "mock-request"
+    ],
+    "author": "Farhad Yasir (nutboltu)",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/nutboltu/storybook-addon-mock.git"
     },
-    "react-dom": {
-      "optional": true
-    }
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "storybook": {
-    "displayName": "Mock API Request",
-    "supportedFrameworks": [
-      "react",
-      "vue"
+    "main": "dist/cjs/index.js",
+    "module": "dist/esm/index.js",
+    "types": "dist/ts/index.d.ts",
+    "files": [
+        "dist/**/*",
+        "README.md",
+        "*.js",
+        "*.d.ts"
     ],
-    "icon": "https://raw.githubusercontent.com/nutboltu/storybook-addon-mock/master/assets/logo.svg"
-  }
+    "scripts": {
+        "clean": "rimraf ./dist",
+        "buildBabel": "concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"",
+        "buildBabel:cjs": "babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"",
+        "buildBabel:esm": "babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"",
+        "prebuild": "yarn clean",
+        "build": "yarn buildBabel",
+        "build:watch": "yarn buildBabel:esm -- --watch",
+        "lint": "eslint .",
+        "lint:fix": "yarn run lint --fix",
+        "test": "jest src",
+        "prerelease": "zx scripts/prepublish-checks.mjs",
+        "release": "yarn build && auto shipit"
+    },
+    "dependencies": {
+        "mock-xmlhttprequest": "^8.1.0",
+        "path-to-regexp": "^6.2.1",
+        "polished": "^4.2.2",
+        "prop-types": "^15.8.1",
+        "storybook": "^9.0.12",
+        "whatwg-fetch": "^3.6.19"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.21.0",
+        "@babel/preset-env": "^7.21.4",
+        "@babel/preset-react": "^7.18.6",
+        "@babel/preset-typescript": "^7.21.4",
+        "auto": "^10.43.0",
+        "boxen": "^5.0.1",
+        "concurrently": "^6.2.0",
+        "dedent": "^0.7.0",
+        "rimraf": "^3.0.2",
+        "storybook": "^9.0.12",
+        "typescript": "^4.9.4",
+        "zx": "^1.14.1"
+    },
+    "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "storybook": "^9.0.12"
+    },
+    "peerDependenciesMeta": {
+        "react": {
+            "optional": true
+        },
+        "react-dom": {
+            "optional": true
+        }
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "storybook": {
+        "displayName": "Mock API Request",
+        "supportedFrameworks": [
+            "react",
+            "vue"
+        ],
+        "icon": "https://raw.githubusercontent.com/nutboltu/storybook-addon-mock/master/assets/logo.svg"
+    }
 }