Upgrade Vite and related dependencies (#733)

* Upgrade Vite and related dependencies

Updated Vite, @vitejs/plugin-react, vite-plugin-dts, and vitest to latest versions in package.json. Added Node.js engine requirement. Updated Vite build config with new target and external mapping for react/jsx-runtime.

* Update GitHub Actions to latest versions and Node 22

Upgraded actions/checkout to v4 and actions/setup-node to v4 in deployment workflow. Updated Node.js version from 20.x to 22.x for both unit-tests and build jobs.

* Update Chromatic to v13.3.4 and use latest GitHub Action

Bumped Chromatic dependency to version 13.3.4 in package.json and yarn.lock. Updated the deployment workflow to use chromaui/action@latest for publishing to Chromatic.

* Set fetch-depth to 0 in deployment workflow

Configures the checkout action to fetch the full git history, which is required for Chromatic to determine baseline commits during deployment.

* Remove @radix-ui/rect from yarn.lock

Author: vineethasok

.github/workflows/deployment.yml

@@ -11,10 +11,10 @@ jobs:
   unit-tests:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: '22.x'
       - name: Enable Corepack
         run: corepack enable
       - name: Install dependencies
@@ -33,17 +33,19 @@ jobs:
     runs-on: ubuntu-latest
     # Job steps
     steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
         with:
-          node-version: '20.x'
+          fetch-depth: 0  # Required for Chromatic to determine baseline commits
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22.x'
       - name: Enable Corepack
         run: corepack enable
       - name: Install dependencies
         run: yarn install --immutable
         # 👇 Adds Chromatic as a step in the workflow
       - name: Publish to Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@latest
         # Chromatic GitHub Action options
         with:
           # 👇 Chromatic projectToken, refer to the manage page to obtain it.

package.json

@@ -95,9 +95,9 @@
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^8",
     "@typescript-eslint/parser": "^8",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^5.1.2",
     "babel-plugin-styled-components": "^2.1.4",
-    "chromatic": "^13.3.3",
+    "chromatic": "^13.3.4",
     "date-fns": "4.1.0",
     "dayjs": "1.11.13",
     "eslint": "^9",
@@ -118,9 +118,9 @@
     "ts-node": "^10.9.1",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8",
-    "vite": "^5.2.11",
-    "vite-plugin-dts": "^3.9.1",
-    "vitest": "^2.0.3",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^2.1.8",
     "watch": "^1.0.2"
   },
   "peerDependencies": {
@@ -133,5 +133,8 @@
     "@types/react": "18.3.2",
     "@types/react-dom": "18.3.0"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "engines": {
+    "node": ">=22.12.0"
+  }
 }

vite.config.ts

@@ -24,6 +24,7 @@ if (!isBundledBuild) {
 }
 
 const buildOptions: BuildOptions = {
+  target: 'baseline-widely-available',
   emptyOutDir: false,
   minify: false,
   lib: {
@@ -42,6 +43,7 @@ const buildOptions: BuildOptions = {
         react: "React",
         "styled-components": "styled",
         "react-dom": "ReactDOM",
+        "react/jsx-runtime": "jsxRuntime",
       },
     },
   },