feat: upgraded to storybook 8 and vite-framework

Author: Jontii

.github/workflows/nodejs.yml

@@ -9,7 +9,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [18.x, 20.x]
 
     steps:
     - uses: actions/checkout@v1

package.json

@@ -37,7 +37,6 @@
   "devDependencies": {
     "@babel/core": "^7.21.4",
     "@babel/eslint-parser": "^7.21.3",
-    "babel-loader": "^9.1.2",
     "eslint": "^8.37.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",

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

@@ -1,25 +1,20 @@
-import remarkGfm from 'remark-gfm';
-
-export default {
+const config = {
     stories: [
-        '../stories/**/*stories.mdx',
-        '../stories/**/*stories.@(js|jsx|ts|tsx)',
+        '../stories/**/*.mdx',
+        '../stories/**/stories.@(js|jsx|mjs|ts|tsx)',
     ],
     addons: [
-        '@storybook/addon-links',
-        {
-            name: '@storybook/addon-docs',
-            options: {
-                mdxPluginOptions: {
-                    mdxCompileOptions: {
-                        remarkPlugins: [remarkGfm],
-                    },
-                },
-            },
-        },
-        '@storybook/addon-viewport',
-        '@storybook/addon-toolbars',
         '../../mock-addon/preset.js',
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
     ],
-    framework: '@storybook/react-webpack5',
+    framework: {
+        name: '@storybook/react-vite',
+        options: {},
+    },
+    docs: {
+        autodocs: 'tag',
+    },
 };
+export default config;

packages/mock-addon-docs/package.json

@@ -15,20 +15,21 @@
   "author": "Farhad Yasir(nutboltu)",
   "license": "MIT",
   "devDependencies": {
-    "@storybook/addon-actions": "^7.4.2",
-    "@storybook/addon-essentials": "^7.4.2",
-    "@storybook/addon-interactions": "^7.4.2",
-    "@storybook/addon-links": "^7.4.2",
-    "@storybook/react-webpack5": "^7.4.2",
+    "@storybook/addon-actions": "^8.0.5",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-interactions": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/react": "^8.0.6",
+    "@storybook/react-vite": "^8.0.6",
     "@storybook/storybook-deployer": "^2.8.16",
-    "storybook": "^7.4.2"
+    "storybook": "^8.0.5"
   },
   "dependencies": {
     "axios": "^1.3.4",
     "react": "^18.2.0",
-    "react-code-blocks": "0.0.9-0",
+    "react-code-blocks": "^0.0.9-0",
     "react-dom": "^18.2.0",
-    "remark-gfm": "^3.0.1",
-    "superagent": "^8.0.9"
+    "superagent": "^8.0.9",
+    "vite": "^5.2.8"
   }
 }

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import LinkTo from '@storybook/addon-links/react';
 
-import { buttonStyles, inputStyles, formStyles, labelStyles } from './styles';
+import { buttonStyles, inputStyles, formStyles } from './styles';
 import { Container } from '../container';
 import { Response } from '../response';
 import { DEFAULT_URL } from '../../utils';

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

@@ -12,10 +12,10 @@ jobs:
       - name: Prepare repository
         run: git fetch --unshallow --tags
 
-      - name: Use Node.js 14.x
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 18.x
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1

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

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-mock",
-  "version": "4.3.0",
+  "version": "5.0.0",
   "description": "A storybook addon to mock fetch/XHR request",
   "keywords": [
     "storybook",
@@ -44,18 +44,18 @@
     "release": "yarn build && auto shipit"
   },
   "dependencies": {
-    "@storybook/addons": "^7.4.2",
-    "@storybook/blocks": "^7.4.2",
-    "@storybook/channels": "^7.4.2",
-    "@storybook/components": "^7.4.2",
-    "@storybook/core-events": "^7.4.2",
-    "@storybook/manager-api": "^7.4.2",
-    "@storybook/theming": "^7.4.2",
+    "@storybook/blocks": "^8.0.5",
+    "@storybook/channels": "^8.0.5",
+    "@storybook/components": "^8.0.5",
+    "@storybook/core-events": "^8.0.5",
+    "@storybook/manager-api": "^8.0.5",
+    "@storybook/preview-api": "^8.0.5",
+    "@storybook/theming": "^8.0.5",
     "mock-xmlhttprequest": "^8.1.0",
     "path-to-regexp": "^6.2.1",
     "polished": "^4.2.2",
     "prop-types": "^15.8.1",
-    "storybook": "^7.4.2",
+    "storybook": "^8.0.5",
     "whatwg-fetch": "^3.6.19"
   },
   "devDependencies": {

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

@@ -1,6 +1,6 @@
-import { addons, types } from '@storybook/addons';
 import { ADDON_ID, PANEL_ID } from '../utils/constants';
 import { Panel } from '../Panel';
+import { addons, types } from '@storybook/manager-api';
 
 addons.register(ADDON_ID, () => {
     // Register the panel

packages/mock-addon-docs/stories/examples/components/get-component/index.jsx

@@ -1,7 +1,7 @@
 import { FORCE_RE_RENDER, STORY_CHANGED } from '@storybook/core-events';
-import { addons } from '@storybook/addons';
 import { EVENTS, PARAM_KEY, GLOBAL_PARAM_KEY } from './utils/constants';
 import faker from './utils/faker';
+import { addons } from '@storybook/manager-api';
 
 const getParameter = (parameters, key, defaultValue) => {
     return parameters[key] || defaultValue;