Update vite deps, use vite for Storybook, replace jest with vitest

Author: askoufis

.storybook/main.js

@@ -0,0 +1,28 @@
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+import type { StorybookConfig } from '@storybook/html-vite';
+import { defaultClientConditions, defaultServerConditions } from 'vite';
+
+export default {
+  stories: ['../packages/**/*.stories.@(ts|tsx)'],
+  framework: '@storybook/html-vite',
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  viteFinal: (config) => {
+    config.plugins ??= [];
+    config.plugins.push(vanillaExtractPlugin());
+
+    config.resolve = {
+      // Tell Vite to load workspace packages directly from the source TypeScript files.
+      conditions: ['@capsizecss/src', ...defaultClientConditions],
+    };
+
+    config.ssr ??= {};
+    config.ssr.resolve = {
+      // Tell Vite to load workspace packages directly from the source TypeScript files.
+      conditions: ['@capsizecss/src', ...defaultServerConditions],
+    };
+
+    return config;
+  },
+} satisfies StorybookConfig;

.storybook/main.ts

@@ -7,19 +7,19 @@
     "%packages": "pnpm --filter='@capsizecss/*' --aggregate-output",
     "%site": "pnpm --filter=./site",
     "start": "pnpm site:start",
-    "test": "jest",
+    "test": "vitest run",
     "format": "prettier --write .",
     "lint": "manypkg check && prettier --check . && tsc",
-    "dev": "pnpm unpack:generate && pnpm %packages dev && pnpm metrics:generate",
+    "dev": "pnpm unpack:generate && pnpm metrics:generate",
     "build": "pnpm %packages build && pnpm generate",
     "generate": "pnpm unpack:generate && pnpm metrics:generate",
     "copy-readme": "node scripts/copy-readme",
     "version": "changeset version && pnpm install --lockfile-only",
     "prepare-release": "pnpm copy-readme && pnpm build",
     "release": "pnpm prepare-release && pnpm site:build && pnpm site:deploy && changeset publish",
     "chromatic": "chromatic",
-    "storybook": "start-storybook --quiet --port 6006",
-    "storybook:build": "build-storybook",
+    "storybook": "storybook dev --quiet --port 6006",
+    "storybook:build": "pnpm build && storybook build",
     "site:start": "pnpm %site start",
     "site:build": "pnpm %site build",
     "site:serve": "pnpm %site serve",
@@ -45,24 +45,21 @@
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1",
     "@manypkg/cli": "^0.21.4",
-    "@storybook/addon-viewport": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/cli": "^6.5.16",
-    "@storybook/html": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@types/jest": "^29.5.11",
+    "@storybook/builder-vite": "^10.0.7",
+    "@storybook/html-vite": "^10.0.7",
     "@types/node": "^22.18.8",
-    "@vanilla-extract/webpack-plugin": "^2.3.4",
+    "@vanilla-extract/vite-plugin": "^5.1.1",
     "chromatic": "^11.3.0",
     "husky": "^8.0.3",
     "is-ci": "^3.0.1",
-    "jest": "^29.7.0",
     "prettier": "^3.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "storybook": "^10.0.7",
     "tsdown": "^0.16.1",
-    "typescript": "^5.3.3",
-    "webpack": "^5.90.0"
+    "typescript": "^5.9.3",
+    "vite": "^7.2.2",
+    "vitest": "^4.0.9"
   },
   "packageManager": "pnpm@9.6.0",
   "volta": {

babel.config.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
   createFontStack,
   quoteIfNeeded,

jest.config.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { createStyleObject } from './createStyleObject';
 
 const fontMetrics = {

package.json

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { createStyleString } from './createStyleString';
 
 describe('createStyleString', () => {

packages/core/src/createFontStack.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { getCapHeight } from './';
 
 describe('getCapHeight', () => {

packages/core/src/createStyleObject.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { precomputeValues } from './';
 
 describe('precomputeValues', () => {