Merge pull request #4802 from JReinhold/storybook-8-3

UI: Upgrade to Storybook `8.3.0-beta.0`, add Vitest to UI package

packages/ui/.storybook/main.ts

@@ -6,7 +6,8 @@ const config: StorybookConfig = {
 	addons: [
 		getAbsolutePath('@storybook/addon-links'),
 		getAbsolutePath('@storybook/addon-essentials'),
-		getAbsolutePath('storybook-dark-mode')
+		getAbsolutePath('storybook-dark-mode'),
+		getAbsolutePath('@storybook/experimental-addon-test')
 	],
 	framework: {
 		name: getAbsolutePath('@storybook/sveltekit'),

packages/ui/.storybook/preview.ts

@@ -8,7 +8,8 @@ const preview: Preview = {
 		backgrounds: { disable: true },
 		controls: {
 			matchers: {
-				color: /(background|color)$/i,
+				// matches "background" and "color" but not "solidBackground" as that is a boolean arg
+				color: /(?<!solid)(background|color)$/i,
 				date: /Date$/i
 			}
 		},

packages/ui/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/sveltekit';
+import * as projectAnnotations from './preview';
+
+const project = setProjectAnnotations(projectAnnotations);
+
+beforeAll(project.beforeAll);

packages/ui/package.json

@@ -21,16 +21,20 @@
 		"prepublishOnly": "pnpm run package",
 		"prepare": "svelte-kit sync",
 		"storybook": "storybook dev --no-open -p 6006",
-		"storybook:build": "storybook build"
+		"storybook:build": "storybook build",
+		"test": "vitest run --mode development",
+		"test:watch": "vitest --watch --mode development",
+		"playwright:install": "playwright install --with-deps chromium"
 	},
 	"devDependencies": {
 		"@csstools/postcss-bundler": "^1.0.15",
-		"@storybook/addon-docs": "^8.2.7",
-		"@storybook/addon-essentials": "^8.2.7",
-		"@storybook/addon-links": "^8.2.7",
-		"@storybook/blocks": "^8.2.7",
-		"@storybook/svelte": "^8.2.7",
-		"@storybook/sveltekit": "^8.2.7",
+		"@storybook/addon-docs": "^8.3.0",
+		"@storybook/addon-essentials": "^8.3.0",
+		"@storybook/addon-links": "^8.3.0",
+		"@storybook/blocks": "^8.3.0",
+		"@storybook/experimental-addon-test": "^8.3.0",
+		"@storybook/svelte": "^8.3.0",
+		"@storybook/sveltekit": "^8.3.0",
 		"@sveltejs/adapter-static": "catalog:svelte",
 		"@sveltejs/kit": "catalog:svelte",
 		"@sveltejs/package": "^2.3.2",
@@ -38,20 +42,23 @@
 		"@terrazzo/cli": "^0.0.11",
 		"@terrazzo/plugin-css": "^0.0.9",
 		"@types/postcss-pxtorem": "^6.0.3",
+		"@vitest/browser": "^2.0.5",
 		"autoprefixer": "^10.4.19",
 		"cpy-cli": "^5.0.0",
 		"date-fns": "^2.30.0",
+		"playwright": "^1.46.1",
 		"postcss": "^8.4.38",
 		"postcss-cli": "^11.0.0",
 		"postcss-minify": "^1.1.0",
 		"postcss-nesting": "^12.1.5",
 		"postcss-pxtorem": "^6.1.0",
 		"rimraf": "^6.0.1",
-		"storybook": "^8.2.7",
+		"storybook": "^8.3.0",
 		"storybook-dark-mode": "^4.0.2",
 		"svelte": "catalog:svelte",
 		"svelte-check": "catalog:svelte",
-		"vite": "catalog:"
+		"vite": "catalog:",
+		"vitest": "^2.0.5"
 	},
 	"peerDependencies": {
 		"svelte": "^4.0.0 || ^5.0.0-0"

packages/ui/tsconfig.json

@@ -21,6 +21,7 @@
 		"postcss.config.js",
 		"vite.config.js",
 		"vite.config.ts",
+		"vitest.workspace.ts",
 		"src/**/*.js",
 		"src/**/*.ts",
 		"src/**/*.svelte",

packages/ui/vitest.workspace.ts

@@ -0,0 +1,21 @@
+import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
+import { storybookSveltekitPlugin } from '@storybook/sveltekit/vite-plugin';
+import { defineWorkspace } from 'vitest/config';
+
+export default defineWorkspace([
+	'vite.config.ts',
+	{
+		extends: 'vite.config.ts',
+		plugins: [storybookTest({ storybookScript: 'pnpm storybook' }), storybookSveltekitPlugin()],
+		test: {
+			browser: {
+				enabled: true,
+				headless: true,
+				name: 'chromium',
+				provider: 'playwright'
+			},
+			include: ['**/*.stories.?(m)[jt]s?(x)'],
+			setupFiles: ['./.storybook/vitest.setup.ts']
+		}
+	}
+]);

turbo.json

@@ -24,8 +24,9 @@
 		"check": {
 			"dependsOn": ["@gitbutler/ui#package"]
 		},
+		"playwright:install": {},
 		"test": {
-			"dependsOn": ["@gitbutler/ui#package"]
+			"dependsOn": ["@gitbutler/ui#package", "playwright:install"]
 		},
 		"//#globallint": {
 			// Root rules require dependencies to manually be listed https://github.com/vercel/turbo/discussions/7481