upgrade to Storybook 8.4

.storybook/main.ts

@@ -10,10 +10,10 @@ const config: StorybookConfig = {
   addons: [
     '@chromatic-com/storybook',
     '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
     '@storybook/addon-a11y',
     '@storybook/addon-coverage',
     '@storybook/addon-designs',
+    '@storybook/experimental-addon-test'
   ],
   typescript: {
     reactDocgen: 'react-docgen',

.storybook/vitest.setup.ts

@@ -2,8 +2,6 @@ import { beforeAll } from 'vitest';
 import { setProjectAnnotations } from '@storybook/react';
 import * as projectAnnotations from './preview';
 
-// This is an important step to apply the right configuration when testing your stories.
-// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
 const project = setProjectAnnotations([projectAnnotations]);
 
 beforeAll(project.beforeAll);

package.json

@@ -57,22 +57,21 @@
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
-    "@chromatic-com/storybook": "^2.0.2",
+    "@chromatic-com/storybook": "^3.2.1",
     "@ladle/react": "^4.1.2",
-    "@storybook/addon-a11y": "^8.3.0",
+    "@storybook/addon-a11y": "^8.4.0",
     "@storybook/addon-coverage": "^1.0.4",
     "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-essentials": "^8.3.0",
-    "@storybook/addon-interactions": "^8.3.0",
-    "@storybook/addon-themes": "^8.3.0",
-    "@storybook/blocks": "^8.3.0",
-    "@storybook/experimental-addon-test": "^8.3.0",
-    "@storybook/manager-api": "^8.3.0",
-    "@storybook/react": "^8.3.0",
-    "@storybook/react-vite": "^8.3.0",
-    "@storybook/test": "^8.3.0",
+    "@storybook/addon-essentials": "^8.4.0",
+    "@storybook/addon-themes": "^8.4.0",
+    "@storybook/blocks": "^8.4.0",
+    "@storybook/experimental-addon-test": "^8.4.0",
+    "@storybook/manager-api": "^8.4.0",
+    "@storybook/react": "^8.4.0",
+    "@storybook/react-vite": "^8.4.0",
+    "@storybook/test": "^8.4.0",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.3.0",
+    "@storybook/theming": "^8.4.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/react-hooks": "^8.0.1",
@@ -104,19 +103,19 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.10.1",
     "happy-dom": "^14.12.3",
     "husky": ">=6",
     "istanbul": "^0.4.5",
     "jest-junit": "^16.0.0",
     "lint-staged": ">=10",
     "msw": "^2.2.2",
-    "msw-storybook-addon": "^2.0.2",
+    "msw-storybook-addon": "^2.0.3",
     "playwright": "^1.46.0",
     "prettier": "^3.2.5",
     "react-is": "^18.3.1",
     "react-test-renderer": "^18.3.1",
-    "storybook": "^8.3.0",
+    "storybook": "^8.4.0",
     "vite": "^4.0.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",

vitest.workspace.ts

@@ -9,7 +9,7 @@ export default defineWorkspace([
     extends: 'vite.config.ts',
     plugins: [
       // See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest
-      storybookTest(),
+      storybookTest({ configDir: '.storybook' }),
     ],
     test: {
       name: 'storybook',
@@ -21,17 +21,7 @@ export default defineWorkspace([
       },
       // Make sure to adjust this pattern to match your stories files.
       include: ['**/*.stories.?(m)[jt]s?(x)'],
-      setupFiles: ['./.storybook/vitest.setup.ts'],
+      setupFiles: ['.storybook/vitest.setup.ts'],
     },
   },
-  // This is just to test legacy code, ignore this.
-  {
-    extends: 'vite.config.ts',
-    test: {
-      name: 'portable-stories',
-      environment: 'happy-dom',
-      include: ['**/*.test.tsx'],
-      setupFiles: ['./ps-setup.ts'],
-    },
-  },
-]);
+]);