update Storybook and examples

.storybook/main.js

@@ -3,10 +3,9 @@ const config = {
   stories: ["../src/components/**/*.stories.@(js|jsx)"],
   staticDirs: ["../public"],
   addons: [
-    "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
     "@storybook/addon-a11y",
+    "@storybook/experimental-addon-test"
   ],
   framework: {
     name: "@storybook/react-vite",

.storybook/preview.js

@@ -4,7 +4,9 @@ import "../src/index.css";
 import { initialize, mswLoader } from "msw-storybook-addon";
 
 // Initialize MSW
-initialize();
+initialize({
+  quiet: true
+});
 
 /** @type { import('@storybook/react').Preview } */
 const preview = {

.storybook/vitest.setup.js

@@ -0,0 +1,9 @@
+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);

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package.json

@@ -1,57 +1,61 @@
 {
   "name": "intro-storybook-react-template",
   "version": "0.2.0",
+  "private": true,
   "description": "Starter template to get up and running quickly with React and Storybook",
-  "author": "Chromatic <https://chromatic.com/>",
-  "type": "module",
+  "bugs": {
+    "url": "https://github.com/chromaui/intro-storybook-react-template/issues"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/chromaui/intro-storybook-react-template"
   },
-  "bugs": {
-    "url": "https://github.com/chromaui/intro-storybook-react-template/issues"
-  },
   "license": "MIT",
-  "private": true,
+  "author": "Chromatic <https://chromatic.com/>",
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "build-storybook": "storybook build",
+    "dev": "vite",
+    "init-msw": "msw init public/",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "test-storybook": "vitest --project=storybook"
+  },
   "dependencies": {
     "@reduxjs/toolkit": "^2.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.0.4"
   },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "init-msw": "msw init public/",
-    "test-storybook": "test-storybook"
-  },
   "devDependencies": {
-    "@storybook/addon-a11y": "^7.6.6",
-    "@storybook/addon-essentials": "^7.6.6",
-    "@storybook/addon-interactions": "^7.6.6",
-    "@storybook/addon-links": "^7.6.6",
-    "@storybook/blocks": "^7.6.6",
-    "@storybook/react": "^7.6.6",
-    "@storybook/react-vite": "^7.6.6",
-    "@storybook/test": "^7.6.6",
-    "@storybook/test-runner": "^0.16.0",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@vitejs/plugin-react": "^3.1.0",
-    "chromatic": "^10.1.0",
-    "msw": "^1.2.1",
-    "msw-storybook-addon": "^1.10.0",
+    "@storybook/addon-a11y": "^8.4.0",
+    "@storybook/addon-essentials": "^8.4.0",
+    "@storybook/blocks": "^8.4.0",
+    "@storybook/experimental-addon-test": "^8.4.4",
+    "@storybook/react": "^8.4.0",
+    "@storybook/react-vite": "^8.4.0",
+    "@storybook/test": "^8.4.0",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/browser": "^2.1.5",
+    "chromatic": "^11.18.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-storybook": "^0.8.0",
+    "msw": "^2.3.0",
+    "msw-storybook-addon": "^2.0.3",
+    "playwright": "^1.49.0",
     "prop-types": "^15.8.1",
-    "storybook": "^7.6.6",
-    "vite": "^4.2.0"
-  },
-  "resolutions": {
-    "jackspeak": "2.1.1"
+    "storybook": "^8.4.0",
+    "vite": "^5.2.0",
+    "vitest": "^2.1.5"
   },
   "msw": {
     "workerDirectory": "public"
-  }
+  },
+  "packageManager": "yarn@4.5.1"
 }