chore(percy): added automated targeted Percy build on PRs and releases

Author: ArtBlue

.github/workflows/baseline-visual-regression.yml

@@ -0,0 +1,67 @@
+# This workflow runs Percy visual regression tests after a PR tagged with "package: skin"
+# is merged into the main branch. It extracts the list of stories from the PR body
+# and runs snapshots for those stories to update the visual regression baselines.
+
+name: Percy Merged Visual Regression Baselines
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  post-merge-snapshots:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checkout the repository
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      # Set up Node.js
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      # Install dependencies
+      - name: Install dependencies
+        run: npm install
+        working-directory: ./packages/skin
+
+      # Extract target stories from PR body
+      - name: Extract target stories
+        id: extract_stories
+        run: |
+          # Get the last merged PR details
+          PR_BODY=$(gh pr view $(git log -1 --pretty=format:"%s" | grep -oP '#\d+') --json body -q '.body')
+          if [[ $PR_BODY == *"package: skin"* ]]; then
+            STORIES=$(echo "$PR_BODY" | awk '/Percy Stories/{getline; print}')
+            if [ -z "$STORIES" ]; then
+              echo "No Percy Stories found in PR body."
+              exit 0
+            fi
+            echo "stories=$STORIES" >> $GITHUB_ENV
+          else
+            echo "No relevant PR found for package: skin."
+            exit 0
+          fi
+        working-directory: ./packages/skin
+
+      # Debug: Print extracted stories
+      - name: Debug extracted stories
+        run: echo "Extracted stories: $stories"
+        working-directory: ./packages/skin
+
+      # Run Percy for the extracted stories
+      - name: Run Percy visual tests
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+        run: |
+          if [ -z "$stories" ]; then
+            echo "No target stories found. Skipping Percy tests."
+            exit 0
+          fi
+          echo "Running Percy for stories: $stories"
+          npm run snapshots "$stories"
+        working-directory: ./packages/skin

.github/workflows/pr-visual-regression.yml

@@ -0,0 +1,58 @@
+# This workflow runs Percy visual regression tests for pull requests. It extracts the list of stories
+# from the PR body and runs snapshots for those stories to validate visual changes before merging.
+# If Percy detects visual differences, the workflow fails to block merging.
+
+name: Percy PR Visual Regression Tests
+
+on:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - reopened
+      - edited
+      - labeled
+
+jobs:
+  visual-regression:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checkout the repository
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      # Set up Node.js
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      # Install dependencies
+      - name: Install dependencies
+        run: npm install
+        working-directory: ./packages/skin
+
+      # Extract target stories from PR body
+      - name: Extract target stories
+        id: extract_stories
+        run: |
+          STORIES=$(echo "${{ github.event.pull_request.body }}" | awk '/Percy Stories/{getline; print}')
+          if [ -z "$STORIES" ]; then
+            echo "No Percy Stories found in PR body."
+            exit 0
+          fi
+          echo "stories=$STORIES" >> $GITHUB_ENV
+        working-directory: ./packages/skin
+
+      # Debug: Print extracted stories
+      - name: Debug extracted stories
+        run: echo "Extracted stories: $stories"
+        working-directory: ./packages/skin
+
+      # Run Percy for the extracted stories
+      - name: Run Percy visual tests
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+        run: npm run snapshots --stories "$stories"
+        working-directory: ./packages/skin