Improve chromatic workflow (#4770)

* only run post deployment link on PRs

* add check for chromatic token job

* replace deprecated  set-output with github_env

* tweak

* add turbosnap config for vite

* sb tweak

* remove (incompatible) turbosnap

* remove redundant flag

* remove turbosnap

.github/workflows/ui.yml

@@ -57,9 +57,16 @@ jobs:
         run: |
           . venv/bin/activate
           pnpm run test:ct
-  chromatic-deployment:
+  check-chromatic-token:
     runs-on: ubuntu-latest
-    if: ${{ !contains( github.event.pull_request.labels.*.name, 'no-visual-update') }}
+    steps:
+      - name: check for chromatic token
+        run: echo "token_exists=$([[ -n ${{ secrets.CHROMATIC_PROJECT_TOKEN }} ]] && echo true || echo false)" >> $GITHUB_OUTPUT
+
+  chromatic-deployment:
+    needs: check-chromatic-token
+    runs-on: ubuntu-latest
+    if: ${{ !contains( github.event.pull_request.labels.*.name, 'no-visual-update') }} && needs.check-chromatic-token.outputs.token_exists == 'true' 
     steps:
       - uses: actions/checkout@v3
         with:
@@ -82,6 +89,7 @@ jobs:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           token: ${{ secrets.GITHUB_TOKEN }}
       - name: post deployment link to PR
+        if: ${{ github.event_name == 'pull_request' }}
         uses: thollander/actions-comment-pull-request@v2
         with:
           message: |

js/storybook/main.ts

@@ -1,5 +1,6 @@
-/** @type { import('@storybook/svelte-vite').StorybookConfig } */
-const config = {
+import type { StorybookConfig } from "@storybook/svelte-vite";
+
+const config: StorybookConfig = {
 	stories: ["../../**/*.mdx", "../../**/*.stories.@(js|jsx|ts|tsx|svelte)"],
 	addons: [
 		"@storybook/addon-links",

package.json

@@ -39,8 +39,8 @@
 		"@changesets/cli": "^2.26.1",
 		"@csstools/postcss-global-data": "^2.0.0",
 		"@gradio/tootils": "workspace:^0.0.1",
-		"@playwright/test": "^1.35.1",
 		"@playwright/experimental-ct-svelte": "^1.35.1",
+		"@playwright/test": "^1.35.1",
 		"@sveltejs/vite-plugin-svelte": "^2.4.2",
 		"@tailwindcss/forms": "^0.5.0",
 		"@testing-library/dom": "^9.0.0",
@@ -84,6 +84,7 @@
 		"vitest": "^0.32.0"
 	},
 	"devDependencies": {
+		"@playwright/test": "^1.35.1",
 		"@storybook/addon-a11y": "^7.0.24",
 		"@storybook/addon-essentials": "^7.0.23",
 		"@storybook/addon-interactions": "^7.0.23",
@@ -96,7 +97,6 @@
 		"@storybook/svelte-vite": "^7.0.23",
 		"@storybook/testing-library": "^0.2.0",
 		"@storybook/theming": "^7.0.23",
-		"@playwright/test": "^1.35.1",
 		"@types/three": "^0.152.0",
 		"chromatic": "^6.19.9",
 		"react": "^18.2.0",
@@ -112,4 +112,4 @@
 			".."
 		]
 	}
-}
+}

scripts/build_frontend.sh

@@ -5,6 +5,8 @@ source scripts/helpers.sh
 
 pnpm_required
 
+python scripts/generate_theme.py
+
 echo "Building the frontend..."
 pnpm i --frozen-lockfile
 pnpm build