add vitest

.changeset/clever-eagles-repeat.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/dry-turkeys-lay.md

@@ -0,0 +1,2 @@
+---
+---

.eslintrc.js

@@ -39,7 +39,7 @@ module.exports = {
     "sort-imports-es6-autofix",
     "ssr-friendly",
     "jsx-a11y",
-    "jest",
+    "vitest",
   ],
   rules: {
     "@typescript-eslint/adjacent-overload-signatures": "error",
@@ -177,19 +177,19 @@ module.exports = {
         pathGroupsExcludedImportTypes: [],
       },
     ],
-    "jest/consistent-test-it": ["error", { fn: "it" }],
-    "jest/expect-expect": "error",
-    "jest/no-commented-out-tests": "error",
-    "jest/no-conditional-expect": "error",
-    "jest/no-focused-tests": "error",
-    "jest/no-disabled-tests": "error",
-    "jest/no-standalone-expect": "error",
-    "jest/no-test-return-statement": "error",
-    "jest/prefer-equality-matcher": "error",
-    "jest/require-top-level-describe": "error",
-    "jest/valid-describe-callback": "error",
-    "jest/valid-expect": "error",
-    "jest/valid-title": "error",
+    "vitest/consistent-test-it": ["error", { fn: "it" }],
+    "vitest/expect-expect": "error",
+    "vitest/no-commented-out-tests": "error",
+    "vitest/no-conditional-expect": "error",
+    "vitest/no-focused-tests": "error",
+    "vitest/no-disabled-tests": "error",
+    "vitest/no-standalone-expect": "error",
+    "vitest/no-test-return-statement": "error",
+    "vitest/prefer-equality-matcher": "error",
+    "vitest/require-top-level-describe": "error",
+    "vitest/valid-describe-callback": "error",
+    "vitest/valid-expect": "error",
+    "vitest/valid-title": "error",
     "jsdoc/check-alignment": "off",
     "jsdoc/check-indentation": "off",
     "jsdoc/newline-after-description": "off",
@@ -320,7 +320,7 @@ module.exports = {
       },
     },
     {
-      files: ["**/bin/**", "jest.setup.ts"],
+      files: ["**/bin/**", "vitest.setup.ts"],
       rules: {
         "no-console": "off",
       },

.github/actions/branch-preview/action.yml

@@ -29,7 +29,7 @@ runs:
         body-includes: ":sparkles: Here is your branch preview! :sparkles:"
 
     - name: Create or update comment
-      uses: peter-evans/create-or-update-comment@v3
+      uses: peter-evans/create-or-update-comment@v4
       with:
         comment-id: ${{ steps.findComment.outputs.comment-id }}
         issue-number: ${{ inputs.prNumber }}

.github/workflows/ci.yml → .github/workflows/lint.yml

@@ -1,4 +1,4 @@
-name: ci
+name: lint
 
 on:
   push:
@@ -53,12 +53,3 @@ jobs:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - run: pnpm lint:styles
-
-  jest:
-    if: github.head_ref != 'changeset-release/main'
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-    steps:
-      - uses: actions/checkout@v4
-      - uses: ./.github/actions/setup
-      - run: pnpm test:ci

.github/workflows/test-stories.yaml

@@ -62,7 +62,7 @@ jobs:
         with:
           artifactName: ${{ env.ARTIFACT_NAME }}
       - name: Storybook tests (1/3)
-        run: pnpm -F @docs/storybook test -- --shard 1/3
+        run: pnpm turbo @docs/storybook#test:storybook -- --shard 1/3
 
   storybook-tests-2:
     name: "test-storybook"
@@ -78,7 +78,7 @@ jobs:
         with:
           artifactName: ${{ env.ARTIFACT_NAME }}
       - name: Storybook tests (2/3)
-        run: pnpm -F @docs/storybook test -- --shard 2/3
+        run: pnpm turbo @docs/storybook#test:storybook -- --shard 2/3
 
   storybook-tests-3:
     name: "test-storybook"
@@ -94,7 +94,7 @@ jobs:
         with:
           artifactName: ${{ env.ARTIFACT_NAME }}
       - name: Storybook tests (3/3)
-        run: pnpm -F @docs/storybook test -- --shard 3/3
+        run: pnpm turbo @docs/storybook#test:storybook -- --shard 3/3
 
   chromatic:
     needs: run-check

.github/workflows/test-unit.yml

@@ -0,0 +1,52 @@
+name: test unit
+
+on:
+  push:
+    branches-ignore:
+      - main
+
+  # When Changesets opens a PR it does not trigger GitHub actions,
+  # because its token does not have permission to. This is a hack
+  # to allow one of us to trigger GitHub actions for a changesets PR
+  # by enabling automerge on the PR.
+  pull_request_target:
+    types:
+      - auto_merge_enabled
+    branches:
+      - main # the target branch of the PR
+    paths:
+      - "**/CHANGELOG.md" # only changesets releases touch changelogs
+
+jobs:
+  unit-tests:
+    if: github.head_ref != 'changeset-release/main'
+    name: "vitest"
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - name: Unit tests
+        run: pnpm test -- -- --run --shard=1/3
+
+  unit-tests-2:
+    if: github.head_ref != 'changeset-release/main'
+    name: "vitest"
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - name: Unit tests
+        run: pnpm test -- -- --run --shard=2/3
+
+  unit-tests-3:
+    if: github.head_ref != 'changeset-release/main'
+    name: "vitest"
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - name: Unit tests
+        run: pnpm test -- -- --run --shard=3/3

docs/.storybook/main.ts

@@ -1,6 +1,5 @@
 import path, { join, dirname } from "path"
 import type { StorybookConfig } from "@storybook/react-vite"
-import { mergeAlias } from "vite"
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -25,6 +24,14 @@ const config: StorybookConfig = {
     "storybook-addon-pseudo-states",
   ],
   framework: "@storybook/react-vite",
+  core: {
+    builder: {
+      name: "@storybook/builder-vite",
+      options: {
+        viteConfigPath: path.resolve(__dirname, "../../vite.config.ts"),
+      },
+    },
+  },
   staticDirs: [
     {
       from: "../assets",
@@ -46,43 +53,5 @@ const config: StorybookConfig = {
       },
     },
   },
-  viteFinal: viteConfig => ({
-    ...viteConfig,
-    resolve: {
-      alias: mergeAlias(
-        [
-          {
-            // this is required for the SCSS modules
-            find: /^~(.*)$/,
-            replacement: "$1",
-          },
-          {
-            // monorepo workspace aliases
-            find: /^\@kaizen(.*)$/,
-            replacement: path.resolve(__dirname, "../../packages$1"),
-          },
-        ],
-        {
-          "~storybook": path.resolve(__dirname, "../"),
-          "~components": path.resolve(
-            __dirname,
-            "../../packages/components/src"
-          ),
-          "~design-tokens": path.resolve(
-            __dirname,
-            "../../packages/design-tokens/src"
-          ),
-          "~tailwind": path.resolve(__dirname, "../../packages/tailwind/src"),
-          // i18n-react-intl package attempts to import locales from this path.
-          // When rollup attempts to import from the 'find' path, it will be
-          // redirected to import from the replacement path (Same as KAIO rollup config).
-          "__@cultureamp/i18n-react-intl/locales": path.resolve(
-            __dirname,
-            "../../packages/components/locales"
-          ),
-        }
-      ),
-    },
-  }),
 }
 export default config

docs/package.json

@@ -12,7 +12,7 @@
     "build:test": "storybook build --test",
     "build:chromatic": "storybook build --webpack-stats-json",
     "build:tailwind": "npx tailwindcss -i ./tailwind.css -o ./.storybook/preview.css",
-    "test": "test-storybook --skipTags='skip-test' --url http://127.0.0.1:6006",
+    "test:storybook": "test-storybook --skipTags='skip-test' --url http://127.0.0.1:6006",
     "clean": "rimraf './storybook-static' './node_modules' '.turbo'"
   },
   "dependencies": {
@@ -24,6 +24,7 @@
     "@kaizen/design-tokens": "workspace:*",
     "@kaizen/tailwind": "workspace:*",
     "@rollup/plugin-alias": "^5.1.0",
+    "@storybook/builder-vite": "^8.2.9",
     "@storybook/manager-api": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
     "@storybook/test-runner": "^0.19.1",
@@ -33,10 +34,13 @@
     "classnames": "^2.5.1",
     "globals": "^15.9.0",
     "highlight.js": "^11.10.0",
+    "jest-axe": "^9.0.0",
     "sass": "^1.77.8",
     "storybook": "^8.2.9",
-    "tailwindcss": "^3.4.10",
-    "vite": "^5.4.2"
+    "tailwindcss": "^3.4.10"
+  },
+  "peerDependencies": {
+    "vite": ">=5.4.2"
   },
   "eslintConfig": {
     "extends": [

package.json

@@ -12,13 +12,10 @@
     "build": "pnpm turbo build",
     "clean": "pnpm turbo clean && rimraf node_modules && pnpm store prune",
     "test": "pnpm turbo test",
-    "test:ci": "pnpm turbo test:ci",
-    "jest:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --no-cache",
-    "eslint-config": "pnpm eslint -c .eslintrc.js --max-warnings=0",
     "lint": "pnpm lint:js && pnpm lint:md && pnpm lint:format && pnpm lint:styles",
     "lint:ts": "pnpm turbo lint:ts",
-    "lint:js": "pnpm eslint-config '**/*.{ts,tsx,mjs,js}'",
-    "lint:md": "pnpm eslint-config '**/*.{md,mdx}'",
+    "lint:js": "pnpm eslint '**/*.{ts,tsx,mjs,js}' --max-warnings=0",
+    "lint:md": "pnpm eslint '**/*.{md,mdx}' --max-warnings=0",
     "lint:format": "pnpm prettier --check '**/*'",
     "lint:scss": "pnpm stylelint '**/*.scss' --config .stylelintrc-scss.json",
     "lint:css": "pnpm stylelint '**/*.css' --config .stylelintrc-css.mjs",
@@ -58,12 +55,9 @@
     "@storybook/test": "^8.2.9",
     "@storybook/theming": "^8.2.9",
     "@stylistic/eslint-plugin": "^2.6.4",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
-    "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.14.12",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
@@ -74,18 +68,13 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
     "eslint-plugin-ssr-friendly": "^1.3.0",
     "eslint-plugin-storybook": "^0.8.0",
-    "jest": "^29.7.0",
-    "jest-axe": "^9.0.0",
-    "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-static-stubs": "^0.0.1",
+    "eslint-plugin-vitest": "^0.5.4",
     "node-fetch": "^3.3.2",
     "playwright": "^1.46.1",
     "plop": "^4.0.1",
@@ -95,13 +84,13 @@
     "stylelint": "^16.8.2",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-config-standard-scss": "^13.1.0",
-    "ts-jest": "^29.2.4",
-    "ts-node": "^10.9.2",
     "turbo": "^2.0.14",
-    "typescript": "^5.5.4"
+    "typescript": "^5.5.4",
+    "vite": "^5.4.2",
+    "vitest": "^2.0.5",
+    "vitest-axe": "^0.1.0"
   },
   "devDependenciesComments": {
-    "ts-node": "Required for jest",
     "@storybook/*": "Required for Storybook stories across all packages",
     "chromatic": "Required for Storybook stories across all packages",
     "playwright": "Required for github actions setup"

packages/components/__tests__/index.ts

@@ -1 +1 @@
-export * from "./renderWithIntl"
+export * from "./reactIntlMock"