Storybook version upgrade

ui/.storybook/main.js

@@ -1,7 +1,27 @@
 export default {
-  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  stories: ['../packages/shared/**/src/**/*.stories.@(js|jsx|ts|tsx)'],
+
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-mdx-gfm',
+    'storybook-dark-mode',
+    '@chromatic-com/storybook',
+  ],
+
   core: {
-    builder: '@storybook/builder-vite', // 👈 The builder enabled here.
+    disableTelemetry: true,
+  },
+
+  docs: {},
+
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
   },
 };

ui/.storybook/preview.js

@@ -14,3 +14,4 @@ export const parameters = {
     classTarget: 'html',
   },
 };
+export const tags = ['autodocs'];

ui/package.json

@@ -35,29 +35,23 @@
     "@babel/plugin-proposal-export-default-from": "7.24.7",
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
     "@babel/preset-env": "7.24.7",
+    "@chromatic-com/storybook": "^1",
     "@ianvs/prettier-plugin-sort-imports": "3.7.2",
     "@mdx-js/loader": "2.3.0",
     "@next/bundle-analyzer": "12.3.4",
     "@next/eslint-plugin-next": "12.3.4",
     "@next/mdx": "12.3.4",
-    "@storybook/addon-actions": "7.6.19",
-    "@storybook/addon-docs": "7.6.19",
-    "@storybook/addon-essentials": "7.6.19",
-    "@storybook/addon-interactions": "7.6.19",
-    "@storybook/addon-links": "7.6.19",
-    "@storybook/addon-mdx-gfm": "7.6.19",
-    "@storybook/addon-outline": "7.6.19",
-    "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "7.6.17",
-    "@storybook/addon-styling": "0.3.2",
-    "@storybook/builder-vite": "^8.1.11",
-    "@storybook/node-logger": "7.6.19",
-    "@storybook/preset-create-react-app": "7.6.19",
-    "@storybook/preset-typescript": "3.0.0",
-    "@storybook/react": "7.6.19",
-    "@storybook/react-webpack5": "7.6.19",
-    "@storybook/testing-library": "0.2.2",
-    "@svgr/webpack": "6.5.1",
+    "@storybook/addon-actions": "^8.1.11",
+    "@storybook/addon-docs": "^8.1.11",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/addon-mdx-gfm": "^8.1.11",
+    "@storybook/addon-outline": "^8.1.11",
+    "@storybook/node-logger": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@storybook/react-vite": "^8.1.11",
+    "@storybook/test": "^8.1.11",
     "@swc/cli": "0.3.12",
     "@swc/core": "1.6.1",
     "@swc/jest": "0.2.36",
@@ -112,16 +106,15 @@
     "rimraf": "3.0.2",
     "sass": "1.77.6",
     "sass-loader": "13.3.3",
-    "storybook": "7.6.19",
-    "storybook-dark-mode": "2.1.1",
+    "storybook": "^8.1.11",
+    "storybook-dark-mode": "4.0.2",
     "style-loader": "3.3.4",
     "ts-jest": "29.1.5",
     "ts-node": "10.9.2",
     "tsc-watch": "6.2.0",
     "typescript": "5.4.5",
     "vite": "^5.3.1",
-    "vitest": "^1.6.0",
-    "webpack": "5.92.1"
+    "vitest": "^1.6.0"
   },
   "eslintConfig": {
     "overrides": [