docs(storybook): v8

.storybook/main.ts

@@ -6,9 +6,11 @@ export default {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
   ],
-  framework: { name: "@storybook/react-vite" },
+  framework: {
+    name: "@storybook/react-vite",
+    options: {}
+  },
   core: {
-    builder: "@storybook/builder-vite",
-    disableTelemetry: true,
+    disableTelemetry: true
   },
 };

.storybook/preview.tsx

@@ -3,7 +3,6 @@ import { DevTools } from "jotai-devtools";
 import React from "react";
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
       color: /(background|color)$/i,

package.json

@@ -36,6 +36,7 @@
     "build": "tsc --build ./tsconfig.build.json",
     "sb": "yarn storybook",
     "sb:build": "storybook build",
+    "sb:up": "yarn dlx storybook@latest upgrade",
     "storybook": "storybook dev",
     "semantic-release": "semantic-release",
     "lint": "eslint --ext .tsx,.ts ./src",
@@ -53,18 +54,15 @@
     "@semantic-release/github": "^9.2.4",
     "@semantic-release/npm": "^11.0.1",
     "@semantic-release/release-notes-generator": "^12.1.0",
-    "@storybook/addon-actions": "7.6.3",
-    "@storybook/addon-docs": "7.6.3",
-    "@storybook/addon-essentials": "7.6.3",
-    "@storybook/addon-interactions": "7.6.3",
-    "@storybook/addon-links": "7.6.3",
-    "@storybook/builder-vite": "^7.6.3",
-    "@storybook/jest": "0.2.3",
-    "@storybook/manager-api": "^7.6.3",
-    "@storybook/react": "7.6.3",
-    "@storybook/react-vite": "^7.6.3",
-    "@storybook/testing-library": "0.2.2",
-    "@storybook/theming": "7.6.3",
+    "@storybook/addon-actions": "^8.0.0",
+    "@storybook/addon-docs": "^8.0.0",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/manager-api": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-vite": "^8.0.0",
+    "@storybook/theming": "^8.0.0",
     "@testing-library/jest-dom": "6.1.5",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.1",
@@ -93,14 +91,15 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
     "semantic-release": "^22.0.8",
-    "storybook": "7.6.3",
+    "storybook": "^8.0.0",
     "tailwindcss": "^3.3.5",
     "typescript": "5.3.3",
     "vite": "^5.0.11",
     "vitest": "1.1.3",
     "zod": "^3.22.4"
   },
   "dependencies": {
+    "@storybook/test": "8.0.0",
     "react-render-prop-type": "0.1.0"
   },
   "publishConfig": {

src/components/number-field/NumberField.stories.tsx

@@ -1,5 +1,5 @@
 import { numberField } from "@form-atoms/field";
-import { userEvent, within } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/test";
 
 import { NumberField } from "./NumberField";
 import { FormStory, meta, optionalField } from "../../stories/story-form";

vitest.config.mts → vite.config.mts

@@ -1,8 +1,12 @@
+/// <reference types="vitest" />
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
   plugins: [react()],
+  define: {
+    "process.env": {},
+  },
   test: {
     globals: true,
     environment: "happy-dom",