chore: add a base directory for TurboSnap (#9258)

* Add base dir for TurboSnap

* updated main workflow as well

* Add vite configuration

* remove the mergeConfig and return config

.github/workflows/ci.yaml

@@ -568,6 +568,7 @@ jobs:
           # https://www.chromatic.com/docs/github-actions#forked-repositories
           projectToken: 695c25b6cb65
           workingDir: "./site"
+          storybookBaseDir: "./site"
           # Prevent excessive build runs on minor version changes
           skip: "@(renovate/**|dependabot/**)"
           # Run TurboSnap to trace file dependencies to related stories
@@ -593,6 +594,7 @@ jobs:
           buildScriptName: "storybook:build"
           projectToken: 695c25b6cb65
           workingDir: "./site"
+          storybookBaseDir: "./site"
           # Run TurboSnap to trace file dependencies to related stories
           # and tell chromatic to only take snapshots of relevent stories
           onlyChanged: true

site/.storybook/main.js

@@ -1,3 +1,6 @@
+import turbosnap from "vite-plugin-turbosnap"
+import { mergeConfig } from "vite"
+
 module.exports = {
   stories: ["../src/**/*.stories.tsx"],
   addons: [
@@ -11,4 +14,17 @@ module.exports = {
     name: "@storybook/react-vite",
     options: {},
   },
+  async viteFinal(config, { configType }) {
+    config.plugins = config.plugins || []
+    // return the customized config
+    if (configType === "PRODUCTION") {
+      // ignore @ts-ignore because it's not in the vite types yet
+      config.plugins.push(
+        turbosnap({
+          rootDir: config.root || "",
+        }),
+      )
+    }
+    return config
+  },
 }

site/package.json

@@ -21,7 +21,7 @@
     "playwright:test": "playwright test --config=e2e/playwright.config.ts",
     "gen:provisioner": "protoc --plugin=./node_modules/.bin/protoc-gen-ts_proto --ts_proto_out=./e2e/ --ts_proto_opt=outputJsonMethods=false,outputEncodeMethods=encode-no-creation,outputClientImpl=false,nestJs=false,outputPartialMethods=false,fileSuffix=Generated,suffix=hey -I ../provisionersdk/proto ../provisionersdk/proto/provisioner.proto && pnpm exec prettier --ignore-path '/dev/null' --cache --write './e2e/provisionerGenerated.ts'",
     "storybook": "STORYBOOK=true storybook dev -p 6006",
-    "storybook:build": "storybook build --webpack-stats-json",
+    "storybook:build": "storybook build",
     "test": "jest --selectProjects test",
     "test:ci": "jest --selectProjects test --silent",
     "test:coverage": "jest --selectProjects test --collectCoverage",
@@ -172,7 +172,8 @@
     "ts-node": "10.9.1",
     "ts-proto": "1.156.0",
     "typescript": "5.1.6",
-    "vite-plugin-checker": "0.6.0"
+    "vite-plugin-checker": "0.6.0",
+    "vite-plugin-turbosnap": "1.0.2"
   },
   "browserslist": [
     "chrome 66",

site/pnpm-lock.yaml

@@ -431,6 +431,9 @@ devDependencies:
   vite-plugin-checker:
     specifier: 0.6.0
     version: 0.6.0(eslint@8.46.0)(typescript@5.1.6)(vite@4.4.2)
+  vite-plugin-turbosnap:
+    specifier: 1.0.2
+    version: 1.0.2
 
 packages:
 
@@ -13891,6 +13894,10 @@ packages:
       vscode-uri: 3.0.7
     dev: true
 
+  /vite-plugin-turbosnap@1.0.2:
+    resolution: {integrity: sha512-irjKcKXRn7v5bPAg4mAbsS6DgibpP1VUFL9tlgxU6lloK6V9yw9qCZkS+s2PtbkZpWNzr3TN3zVJAc6J7gJZmA==}
+    dev: true
+
   /vite@4.4.2(@types/node@18.17.0):
     resolution: {integrity: sha512-zUcsJN+UvdSyHhYa277UHhiJ3iq4hUBwHavOpsNUGsTgjBeoBlK8eDt+iT09pBq0h9/knhG/SPrZiM7cGmg7NA==}
     engines: {node: ^14.18.0 || >=16.0.0}