Percy test

.github/workflows/percy.yml

@@ -0,0 +1,111 @@
+name: Percy Visual Regression
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+    paths:
+      - 'packages/skin/src/sass/**'
+      - 'packages/skin/src/tokens/**'
+      - 'packages/skin/.storybook/**'
+  push:
+    branches: ["main"]
+    paths:
+      - 'packages/skin/src/sass/**'
+      - 'packages/skin/src/tokens/**'
+      - 'packages/skin/.storybook/**'
+
+concurrency:
+  group: "percy-${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.ref }}"
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+  pull-requests: write
+  checks: write
+  statuses: write
+
+jobs:
+  percy-pr:
+    name: Percy Snapshots (PR)
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0  # Need full history for git diff
+
+      - name: Fetch base branch
+        run: |
+          git fetch origin main:main
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+
+      - name: Install dependencies
+        run: npm i
+
+      - name: Detect changed components
+        id: detect
+        run: |
+          cd packages/skin
+          CHANGED=$(node scripts/detect-changed-components.js)
+          echo "components=$CHANGED" >> $GITHUB_OUTPUT
+          echo "Changed components: $CHANGED"
+
+      - name: Build Storybook for Percy
+        if: steps.detect.outputs.components != ''
+        run: npm run build:snapshots -w packages/skin
+
+      - name: Run Percy (Partial)
+        if: steps.detect.outputs.components != '' && steps.detect.outputs.components != 'all'
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+          PERCY_PARTIAL_BUILD: 1
+          STORIES: ${{ steps.detect.outputs.components }}
+        run: npm run snapshots -w packages/skin
+
+      - name: Run Percy (All)
+        if: steps.detect.outputs.components == 'all'
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+        run: npm run snapshots:all -w packages/skin
+
+      - name: Wait for Percy build and comment on PR
+        if: steps.detect.outputs.components != ''
+        env:
+          PERCY_READ_TOKEN: ${{ secrets.PERCY_READ_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          COMMIT_SHA: ${{ github.event.pull_request.head.sha }}
+          GITHUB_REPOSITORY: ${{ github.repository }}
+        run: |
+          cd packages/skin
+          node scripts/percy-wait-and-comment.js
+
+  percy-main:
+    name: Percy Baseline (Main Branch)
+    if: github.ref == 'refs/heads/main'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+
+      - name: Install dependencies
+        run: npm i
+
+      - name: Build Storybook for Percy
+        run: npm run build:snapshots -w packages/skin
+
+      - name: Run Percy (All - Auto-approve)
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+          PERCY_ENABLE_AUTOCOMMIT: true  # Auto-approve baselines on main
+        run: npm run snapshots:all -w packages/skin

package.json

@@ -64,6 +64,7 @@
     "@marko/type-check": "^2.1.13",
     "@marko/vite": "^5.4.2",
     "@mdx-js/mdx": "^3.1.1",
+    "@octokit/rest": "^22.0.0",
     "@percy/cli": "^1.31.7",
     "@percy/storybook": "^9.1.0",
     "@rollup/plugin-typescript": "^12.3.0",