Add Chromatic workflow and script in package.json

Created a new Chromatic workflow for Github Actions and added a Chromatic script in package.json. The workflow file includes instructions for checking out code, installing Node.js and dependencies, and finally publishing to Chromatic. In package.json, script name for building Storybook has been updated and a new script for Chromatic was included.

Signed-off-by: Giovanni Ravalico <[email protected]>

.github/workflows/chromatic.yml

@@ -0,0 +1,42 @@
+name: "Chromatic"
+on: push
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: current
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

packages/ui/package.json

@@ -11,9 +11,10 @@
 	},
 	"type": "module",
 	"scripts": {
-		"build:storybook": "storybook build",
+		"build-storybook": "storybook build",
 		"check": "biome check .",
 		"check:fix": "biome check --apply .",
+		"chromatic": "npx chromatic",
 		"clean": "scripty",
 		"components-add": "pnpm dlx shadcn-ui@latest add",
 		"components-diff": "pnpm dlx shadcn-ui@latest diff",