Upgrade storybook

.storybook/main.ts

@@ -1,17 +1,24 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "@storybook/addon-webpack5-compiler-swc",
+    "@chromatic-com/storybook"
   ],
+
   framework: {
     name: "@storybook/react-webpack5",
     options: {},
   },
-  docs: {
-    autodocs: "tag",
-  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript"
+  }
 };
 export default config;

package.json

@@ -44,18 +44,20 @@
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
-    "@storybook/addon-essentials": "^7.4.5",
-    "@storybook/addon-interactions": "^7.4.5",
-    "@storybook/addon-links": "^7.4.5",
-    "@storybook/blocks": "^7.4.5",
-    "@storybook/react": "^7.4.5",
-    "@storybook/react-webpack5": "^7.4.5",
-    "@storybook/testing-library": "^0.2.1",
+    "@chromatic-com/storybook": "^3",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-webpack5": "^8.4.7",
+    "@storybook/test": "^8.4.7",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@types/array.prototype.flatmap": "^1.2.2",
     "@types/node": "^16.7.10",
-    "@types/react": "^16.14.0",
+    "@types/react": "^18.0.0",
     "@types/react-select": "^3.0.26",
     "@typescript-eslint/eslint-plugin": "^6.5.0",
     "@typescript-eslint/parser": "^6.5.0",
@@ -77,22 +79,23 @@
     "postcss": "^8.3.6",
     "prettier": "^2.3.2",
     "prop-types": "^15.8.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-select": "^4.0.2",
     "rollup": "^3.20.2",
     "rollup-plugin-dts": "^5.3.0",
     "rollup-plugin-postcss": "^4.0.1",
     "rollup-plugin-typescript2": "^0.35.0",
     "scheduler": "^0.20.0",
-    "storybook": "^7.4.5",
+    "storybook": "^8.4.7",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
     "ts-jest": "^29.1.0",
     "tslib": "^2.3.1",
     "typedoc": "^0.23.28",
     "typedoc-plugin-rename-defaults": "^0.6.4",
-    "typescript": "4.9.5"
+    "typescript": "4.9.5",
+    "webpack": "^5.97.1"
   },
   "jest": {
     "preset": "ts-jest",