Upgrade storybook and swap to vite

.storybook/main.js

-const config = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+module.exports = {
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "@storybook/preset-create-react-app"
+    "@chromatic-com/storybook"
   ],
-  webpackFinal: async (config) => {
-    config.resolve.fallback = {
-      http: require.resolve("stream-http"),
-      https: require.resolve("https-browserify")
-    };
-    return config;
-  },
+
   framework: {
-    name: "@storybook/react-webpack5",
+    name: "@storybook/react-vite",
     options: {}
   },
-  staticDirs: ["../public"]
-};
 
-export default config;
+  core: {
+    disableTelemetry: true,
+    builder: '@storybook/builder-vite', // 👈 The builder enabled here.
+  },
+
+  staticDirs: ["../public"],
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript"
+  }
+};

.storybook/preview.js

@@ -5,16 +5,18 @@ import { handlers } from "../src/mocks/handlers";
 initialize({}, handlers);
 
 const preview = {
-  parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" }
-  },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/
     }
   },
-  loaders: [mswLoader]
+
+  loaders: [mswLoader],
+  tags: ["autodocs"],
+  msw: {
+    handlers: handlers
+  }
 };
 
 export default preview;

package.json

@@ -58,15 +58,17 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@chromatic-com/storybook": "^3.2.2",
     "@craco/craco": "^7.1.0",
     "@mui/x-license-pro": "^6.10.2",
     "@rtk-query/codegen-openapi": "^1.2.0",
-    "@storybook/addon-essentials": "^7.6.3",
-    "@storybook/addon-interactions": "^7.6.3",
-    "@storybook/addon-links": "^7.6.3",
-    "@storybook/preset-create-react-app": "^7.6.10",
-    "@storybook/react": "^7.6.3",
-    "@storybook/react-webpack5": "^7.6.3",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-links": "^8.4.2",
+    "@storybook/preset-create-react-app": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-vite": "^8.4.2",
+    "@storybook/react-webpack5": "^8.4.2",
     "@testing-library/cypress": "^10.0.2",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
@@ -86,10 +88,10 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "https-browserify": "^1.0.0",
     "msw": "^2.6.2",
-    "msw-storybook-addon": "^1.10.0",
+    "msw-storybook-addon": "^2.0.3",
     "prettier": "^3.3.3",
     "prop-types": "^15.8.1",
-    "storybook": "^7.6.3",
+    "storybook": "^8.4.2",
     "stream-http": "^3.2.0",
     "typescript": "^4.9.5",
     "vite": "^5.4.10",