Vitest 4 and Storybook 10

.changeset/eager-impalas-begin.md

@@ -0,0 +1,5 @@
+---
+"vitest-plugin-vis": major
+---
+
+Update to Vitest v4

.changeset/soft-turkeys-talk.md

@@ -0,0 +1,5 @@
+---
+"vitest-plugin-vis": patch
+---
+
+Build with `tsdown`

.changeset/some-candles-care.md

@@ -0,0 +1,5 @@
+---
+"storybook-addon-vis": major
+---
+
+Update to Storybook 10

.changeset/stale-lines-listen.md

@@ -0,0 +1,5 @@
+---
+"storybook-addon-vis": minor
+---
+
+Add `defineStorybookVis()`

.cursor/rules/cursor-rules.mdc

@@ -75,3 +75,9 @@ function badExample() {
 6. Default rule type to `Agent Requested` and add the rule purpose to the `description`.
 
 7. Update [master.mdc](mdc:.cursor/rules/master.mdc) to reference the new rule and describe its purpose
+
+8. When writing code snippets in markdown, follow the same code formatting as in real code:
+   - Use proper indentation (spaces or tabs, consistent with project style)
+   - Maintain consistent spacing and line breaks
+   - Follow the same style guide as the actual codebase
+   - Code examples should be formatted exactly as they would appear in source files

.github/workflows/pull-request.yml

@@ -13,7 +13,7 @@ jobs:
       matrix:
         os:
           - ubuntu-latest
-          # - windows-latest
+          - windows-latest
         node-version:
           - 20
           - 22

.github/workflows/release.yml

@@ -11,7 +11,7 @@ jobs:
       matrix:
         os:
           - ubuntu-latest
-          # - windows-latest
+          - windows-latest
         node-version:
           - 20
           - 22

.gitignore

@@ -57,6 +57,7 @@ node_modules
 vite*.timestamp*
 
 # project
+.nowhere
 **/__screenshots__
 **/__snapshots__/*/__diff_output__
 **/__snapshots__/*/__results__

.npmrc

@@ -1 +0,0 @@
-public-hoist-pattern[]=@changesets/config

.vscode/ltex.dictionary.en-US.txt

@@ -4,3 +4,5 @@ addon
 pathe
 Vis
 async
+addon-docs
+Addon

.vscode/settings.json

@@ -71,6 +71,7 @@
 		"testid",
 		"tsup",
 		"vite",
+		"vitejs",
 		"Vitest"
 	],
 	"editor.codeActionsOnSave": {
@@ -102,5 +103,6 @@
 	"typescript.preferences.importModuleSpecifierEnding": "js",
 	"typescript.preferences.includePackageJsonAutoImports": "on",
 	"typescript.tsdk": "node_modules/typescript/lib",
-	"typescript.tsserver.web.projectWideIntellisense.enabled": true
+	"typescript.tsserver.web.projectWideIntellisense.enabled": true,
+	"yaml.format.singleQuote": true
 }

biome.jsonc

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.2.5/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.3.6/schema.json",
 	"extends": ["@repobuddy/biome/recommended"],
 	"vcs": {
 		"enabled": true,
@@ -13,9 +13,13 @@
 			"**",
 			"!**/node_modules/",
 			"!**/.vscode/**/*.txt",
+			"!**/.dist",
 			"!**/esm",
 			"!**/*.code-workspace",
-			"!**/tailwind.css"
+			"!**/tailwind.css",
+			"!packages/storybook-addon-vis/.storybook/local-preset.cjs",
+			"!packages/storybook-addon-vis/manager.js",
+			"!packages/storybook-addon-vis/preset.js"
 		]
 	},
 	"formatter": {

package.json

@@ -11,25 +11,29 @@
 		"clean:vis:local": "turbo clean:vis:local",
 		"coverage": "turbo coverage",
 		"cs": "changeset",
+		"knip": "knip --config .knip.jsonc",
 		"nuke": "turbo nuke && rimraf node_modules",
 		"release": "pnpm build && changeset publish",
+		"sav": "pnpm --filter=./packages/storybook-addon-vis",
+		"sc3": "pnpm --filter=testcase-sb-csf-3",
+		"scm": "pnpm --filter=testcase-sb-csf-mix",
+		"scn": "pnpm --filter=testcase-sb-csf-next",
+		"t:t": "turbo t:t",
 		"test": "turbo test",
-		"test:u": "turbo test -- -u",
 		"test:trv": "vitest run --project=testcase-react-vite-ts",
+		"test:u": "turbo test -- -u",
 		"trv": "pnpm --filter=testcase-react-vite-ts",
 		"tt": "pnpm --filter=testcase-themes",
 		"tv": "pnpm --filter=testcase-vpv",
 		"tw": "pnpm --filter=testcase-workspace",
 		"v": "turbo check coverage",
-		"verify": "turbo check test:type coverage testcase",
-		"verify:ci": "turbo check test:type coverage:u testcase:u --concurrency=1",
+		"verify": "turbo check t:t coverage testcase",
+		"verify:ci": "turbo check t:t coverage:u testcase:u --concurrency=1",
 		"version": "changeset version",
-		"sav": "pnpm --filter=./packages/storybook-addon-vis",
 		"vis": "pnpm --filter=./packages/storybook-addon-vis",
 		"vpv": "pnpm --filter=./packages/vitest-plugin-vis",
 		"w": "turbo w",
-		"w:trv": "vitest --project=testcase-react-vite-ts",
-		"knip": "knip --config .knip.jsonc"
+		"w:trv": "vitest --project=testcase-react-vite-ts"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.3.6",
@@ -46,7 +50,7 @@
 		"playwright": "latest",
 		"rimraf": "^6.0.1",
 		"turbo": "^2.6.0",
-		"typescript": "^5.9.3",
+		"typescript": "catalog:",
 		"vitest": "catalog:",
 		"webdriverio": "^9.12.2"
 	},

packages/storybook-addon-vis/.storybook/main.ts

@@ -1,5 +1,15 @@
+import { defineStorybookVis } from '#storybook-addon-vis/node'
 import type { StorybookConfig } from '@storybook/react-vite'
-import { dirname, join } from 'node:path'
+import { dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+	return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)))
+}
 
 const config: StorybookConfig = {
 	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -8,33 +18,22 @@ const config: StorybookConfig = {
 		getAbsolutePath('@storybook/addon-vitest'),
 		getAbsolutePath('storybook-addon-tag-badges'),
 		getAbsolutePath('@storybook-community/storybook-dark-mode'),
-		{
-			name: getAbsolutePath('storybook-addon-vis'),
-			options: {
-				visProjects: [
-					{
-						snapshotRootDir: '__vis__/linux',
-					},
-					{
-						snapshotRootDir: '__vis__/local',
-					},
-				],
-			},
-		},
+		defineStorybookVis({
+			visProjects: [
+				{
+					snapshotRootDir: '__vis__/linux',
+				},
+				{
+					snapshotRootDir: '__vis__/local',
+				},
+			],
+		}),
 	],
 	tags: {
 		internal: {
 			excludeFromSidebar: process.env.NODE_ENV === 'production',
 		},
 	},
-	framework: {
-		name: getAbsolutePath('@storybook/react-vite'),
-		options: {},
-	},
-	docs: {},
+	framework: getAbsolutePath('@storybook/react-vite'),
 }
 export default config
-
-function getAbsolutePath(value: string) {
-	return dirname(require.resolve(join(value, 'package.json')))
-}

packages/storybook-addon-vis/.storybook/manager.ts

@@ -1,7 +1,7 @@
 import { brandTitle } from '@repobuddy/storybook/manager'
 import { tagBadges } from '@repobuddy/storybook/storybook-addon-tag-badges'
-import { addons } from 'storybook/internal/manager-api'
-import { themes } from 'storybook/internal/theming'
+import { addons } from 'storybook/manager-api'
+import { themes } from 'storybook/theming'
 
 addons.setConfig({
 	tagBadges,

packages/storybook-addon-vis/.storybook/preview.ts

@@ -16,6 +16,7 @@ const preview: Preview = {
 			},
 		},
 		docs: {
+			codePanel: true,
 			container: createDarkModeDocsContainer(),
 		},
 		options: {

packages/storybook-addon-vis/package.json

@@ -24,29 +24,31 @@
 	},
 	"type": "module",
 	"imports": {
+		"#storybook-addon-vis/node": "./src/node.ts",
 		"#storybook-addon-vis/vitest-plugin": "./src/vitest-plugin.ts"
 	},
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
-			"import": "./dist/index.js",
-			"require": "./dist/index.cjs"
+			"import": "./dist/index.js"
 		},
 		"./manager": "./dist/manager.js",
 		"./matcher": {
 			"types": "./dist/matcher.d.ts",
-			"import": "./dist/matcher.js",
-			"require": "./dist/matcher.cjs"
+			"import": "./dist/matcher.js"
 		},
-		"./preset": "./dist/preset.cjs",
+		"./node": {
+			"types": "./dist/node.d.mts",
+			"import": "./dist/node.mjs"
+		},
+		"./preset": "./dist/preset.mjs",
 		"./vitest-setup": {
 			"types": "./dist/vitest-setup.d.ts",
-			"import": "./dist/vitest-setup.js",
-			"require": "./dist/vitest-setup.cjs"
+			"import": "./dist/vitest-setup.js"
 		},
 		"./vitest-plugin": {
-			"types": "./dist/vitest-plugin.d.ts",
-			"import": "./dist/vitest-plugin.js"
+			"types": "./dist/vitest-plugin.d.mts",
+			"import": "./dist/vitest-plugin.mjs"
 		},
 		"./package.json": "./package.json"
 	},
@@ -59,7 +61,7 @@
 		"!**/*.{spec,test,unit,accept,integrate,system,perf,stress,stories,study}.*"
 	],
 	"scripts": {
-		"build": "tsup --tsconfig tsconfig.tsup.json",
+		"build": "tsdown --tsconfig tsconfig.build.json",
 		"build:sb": "cross-env NODE_ENV=production storybook build",
 		"clean": "rimraf coverage dist esm --glob *.tsbuildinfo vitest.*.timestamp*",
 		"clean:vis:local": "rimraf __vis__/local",
@@ -72,11 +74,10 @@
 		"sb": "storybook dev -p 6006",
 		"sb:build": "cross-env NODE_ENV=production storybook build",
 		"t:n": "vitest run -c vitest.config.node.ts",
-		"t:wb": "cross-env BROWSER=firefox BROWSERPROVIDER=webdriverio vitest run",
+		"t:pw": "vitest run -c vitest.config.playwright.ts",
+		"t:t": "tsc --noEmit",
+		"t:wd": "cross-env BROWSER=firefox BROWSERPROVIDER=webdriverio vitest run",
 		"test": "vitest run",
-		"test:node": "vitest run -c vitest.config.node.ts",
-		"test:pw": "vitest run -c vitest.config.playwright.ts",
-		"test:type": "tsc --noEmit",
 		"test:u": "vitest run -u",
 		"v": "run-p build cov",
 		"w": "vitest",
@@ -93,18 +94,20 @@
 		"vitest-plugin-vis": "workspace:^"
 	},
 	"devDependencies": {
-		"@repobuddy/storybook": "^2.0.0",
-		"@storybook-community/storybook-dark-mode": "^6.0.8",
-		"@storybook/addon-docs": "^9.1.16",
-		"@storybook/addon-vitest": "9.1.16",
-		"@storybook/react-vite": "^9.1.16",
+		"@repobuddy/storybook": "^2.1.2",
+		"@storybook-community/storybook-dark-mode": "catalog:",
+		"@storybook/addon-docs": "^10.1.2",
+		"@storybook/addon-vitest": "^10.1.2",
+		"@storybook/react-vite": "^10.1.2",
 		"@tailwindcss/cli": "^4.1.7",
 		"@tailwindcss/vite": "^4.1.14",
 		"@testing-library/react": "^16.0.1",
-		"@types/react": "^19.2.2",
-		"@types/react-dom": "^19.2.1",
-		"@vitejs/plugin-react": "^5.0.0",
+		"@types/react": "catalog:",
+		"@types/react-dom": "catalog:",
+		"@vitejs/plugin-react": "catalog:",
 		"@vitest/browser": "catalog:",
+		"@vitest/browser-playwright": "catalog:",
+		"@vitest/browser-webdriverio": "catalog:",
 		"@vitest/coverage-istanbul": "catalog:",
 		"@vitest/expect": "catalog:",
 		"boxen": "^8.0.1",
@@ -114,22 +117,22 @@
 		"playwright": "latest",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
-		"storybook": "^9.1.16",
-		"storybook-addon-tag-badges": "^3.0.0",
+		"storybook": "^10.1.2",
+		"storybook-addon-tag-badges": "^3.0.2",
 		"tailwindcss": "^4.1.14",
-		"tsup": "^8.3.5",
-		"typescript": "^5.9.3",
+		"tsdown": "^0.16.6",
+		"typescript": "catalog:",
 		"vite": "catalog:",
 		"vitest": "catalog:",
-		"vitest-browser-react": "^1.0.0",
+		"vitest-browser-react": "catalog:",
 		"webdriverio": "latest",
 		"zx": "^8.0.0"
 	},
 	"peerDependencies": {
-		"@storybook/addon-vitest": "^9.1.10",
-		"@vitest/browser": "^2 || ^3",
-		"storybook": "^9.1.10",
-		"vitest": "^2 || ^3"
+		"@storybook/addon-vitest": "^10.1.2",
+		"@vitest/browser": "^4",
+		"storybook": "^10.1.2",
+		"vitest": "^4"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -144,7 +147,9 @@
 			"src/manager.tsx"
 		],
 		"nodeEntries": [
-			"./src/preset.ts"
+			"./src/node.ts",
+			"./src/preset.ts",
+			"./src/vitest-plugin.ts"
 		]
 	},
 	"storybook": {

packages/storybook-addon-vis/preset.js

@@ -1 +1 @@
-export * from './dist/preset.cjs'
+export * from './dist/preset.mjs'