Migrate Percy from CircleCI to Github Actions

.github/workflows/percy-baseline.yml

@@ -0,0 +1,20 @@
+name: Update Percy Baseline
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  snapshot:
+    name: Take Percy snapshots
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout SCM
+        uses: actions/checkout@v4
+
+      - uses: ./.github/workflows/percy-snapshot
+        with:
+          branch_name: main
+          commitsh: ${{ github.sha }}
+          percy_token_write: ${{ secrets.PERCY_TOKEN_WRITE }}

.github/workflows/percy-snapshot/action.yml

@@ -0,0 +1,81 @@
+name: Percy Snapshot
+description: Builds storybook, captures example snapshots, & uploads them to Percy
+inputs:
+  pr_number:
+    required: false
+    description: Identifier of a pull request to associate with this Percy build. I.E. github.com/{repo}/pull/{pr_number}
+  commitsh:
+    required: true
+    description: SHA signature of commit triggering the build
+  branch_name:
+    required: true
+    description: Name of the branch that Percy is being run against
+  percy_token_write:
+    required: true
+    description: Percy token with write access
+outputs:
+  build_link:
+    description: Link to the Percy build triggered by this workflow
+    value: ${{ steps.percy_snapshot.outputs.build_link }}
+  build_id:
+    description: ID of the Percy build triggered by this workflow
+    value: ${{ steps.percy_snapshot.outputs.build_id }}
+  org_id:
+    description: ID of the organization associated with the Percy build
+    value: ${{ steps.percy_snapshot.outputs.org_id }}
+runs:
+  using: composite
+  steps:
+    - name: Install NodeJS
+      uses: actions/setup-node@v4.0.2
+      with:
+        node-version: 20
+
+    # https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#chrome-headless-doesnt-launch-on-unix
+    - name: Install dependencies
+      shell: bash
+      run: |
+        sudo apt-get update
+        sudo apt-get -y upgrade
+        sudo apt-get -yq install gconf-service libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxss1 libxtst6 libappindicator1 libnss3 libasound2 libatk1.0-0 libc6 ca-certificates fonts-liberation lsb-release xdg-utils wget libgbm-dev
+        yarn install
+
+    - name: Take snapshots & upload to Percy
+      shell: bash
+      id: percy_snapshot
+      env:
+        PERCY_TOKEN: ${{ inputs.percy_token_write }}
+        # This identifies the diff by name in the percy diffs list
+        PERCY_BRANCH: ${{ inputs.branch_name }}
+        PERCY_COMMIT: ${{ inputs.commitsh }}
+        PERCY_CLIENT_ERROR_LOGS: false
+        # If PR number is set & a Percy-GHA integration is set up, this allows Percy to set status on the PR
+        PERCY_PULL_REQUEST: ${{ inputs.pr_number }}
+      run: |
+        set -e
+        # Start a percy build and capture the stdout
+
+        # Start a percy build and capture the stdout and stderr
+        percy_output=$(yarn percy 2>&1)
+
+        echo "$percy_output"
+
+        # Fail if the Percy stdout contains "Build not created"
+        if echo "$percy_output" | grep -q "Build not created"; then
+          echo "Percy build not created."
+          exit 1
+        else
+          echo "Percy build created successfully"
+        fi
+
+        # Extract the build link from the stdout of the snapshot command
+        build_link=$(echo "$percy_output" | sed -n 's/.*Finalized build #.*: \(https:\/\/percy.io\/[^ ]*\).*/\1/p')
+
+        # Using '/' to split the $build_link, extract the organization and build identifiers
+        org_id=$(echo "$build_link" | cut -d '/' -f 4)
+        build_id=$(echo "$build_link" | cut -d '/' -f 7)
+
+        echo "build_link=$build_link" >> $GITHUB_OUTPUT
+        echo "org_id=$org_id" >> $GITHUB_OUTPUT
+        echo "build_id=$build_id" >> $GITHUB_OUTPUT
+        echo "Percy build created at $build_link"

.github/workflows/pr-percy-prepare.yml

@@ -0,0 +1,37 @@
+name: "Prepare Percy build"
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  copy_artifact:
+    name: Copy changed files to GHA artifact
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+        with:
+          sparse-checkout: |
+            src/
+
+      - name: Populate artifact directory
+        run: |
+          mkdir -p artifact
+          cp -R src/ artifact/.
+
+      # Archive the PR number associated with this workflow since it won't be available in the base workflow context
+      # https://github.com/orgs/community/discussions/25220
+      - name: Archive PR data
+        if: github.event_name=='pull_request'
+        working-directory: artifact
+        run: |
+          echo ${{ github.event.number }} > pr_num.txt
+          echo ${{ github.event.pull_request.head.sha }} > pr_head_sha.txt
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: "percy-testing-web-artifact"
+          path: artifact/*

.github/workflows/pr-percy-snapshots.yml

@@ -0,0 +1,77 @@
+name: "Percy screenshots"
+
+on:
+  workflow_run:
+    workflows:
+      - "Prepare Percy build"
+    types:
+      - completed
+
+jobs:
+  upload:
+    name: Build project with proposed changes & take Percy snapshots
+    if: github.event.workflow_run.conclusion=='success'
+    runs-on: ubuntu-latest
+    outputs:
+      pr_head_sha: ${{ steps.get_pr_data.outputs.sha }}
+      pr_number: ${{ steps.get_pr_data.outputs.pr_number }}
+      percy_build_link: ${{ steps.percy_snapshot.outputs.build_link }}
+      percy_org_id: ${{ steps.percy_snapshot.outputs.org_id }}
+      percy_build_id: ${{ steps.percy_snapshot.outputs.build_id }}
+    steps:
+      - name: Checkout SCM
+        uses: actions/checkout@v4
+
+      - name: Remove SCM directories that will be replaced by artifact files
+        run: rm -rf src/
+
+      - name: Download artifact from workflow run
+        uses: actions/download-artifact@v4
+        with:
+          name: "percy-testing-web-artifact"
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          repository: ${{ github.event.workflow_run.repository.full_name }}
+          run-id: ${{ github.event.workflow_run.id }}
+
+      - name: Get PR data
+        if: github.event.workflow_run.event=='pull_request'
+        id: get_pr_data
+        run: |
+          echo "sha=$(cat pr_head_sha.txt)" >> $GITHUB_OUTPUT
+          echo "pr_number=$(cat pr_num.txt)" >> $GITHUB_OUTPUT
+
+      - name: Take snapshots & upload to Percy
+        id: percy_snapshot
+        uses: "./.github/workflows/percy-snapshot"
+        with:
+          branch_name: "pull/${{ steps.get_pr_data.outputs.pr_number }}"
+          pr_number: ${{ steps.get_pr_data.outputs.pr_number }}
+          commitsh: ${{ steps.get_pr_data.outputs.sha }}
+          percy_token_write: ${{ secrets.PERCY_TOKEN_WRITE }}
+
+  # Add a check to the PR to show that screenshots were sent to Percy
+  # https://docs.github.com/en/rest/checks/runs?apiVersion=2022-11-28#create-a-check-run
+  apply_pr_check:
+    name: Apply PR check
+    needs: upload
+    if: github.event.workflow_run.event=='pull_request'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Apply PR check
+        id: create_check_run
+        uses: octokit/request-action@v2.x
+        with:
+          route: POST /repos/${{ github.repository }}/check-runs
+          owner: octokit
+          repo: request-action
+          name: "percy_upload"
+          head_sha: ${{ needs.upload.outputs.pr_head_sha }}
+          status: completed
+          conclusion: success
+          details_url: ${{ needs.upload.outputs.percy_build_link }}
+          output: |
+            title: "Percy build"
+            summary: "Percy build #${{ needs.upload.outputs.percy_build_id }} created"
+            text: "Percy build was created at ${{ needs.upload.outputs.percy_build_link }}"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package.json

@@ -123,7 +123,7 @@
     "build-declaration": "tsc --project tsconfig.json && tsc-alias -p tsconfig.json",
     "build-watch": "yarn run build-local --watch",
     "build-docs": "storybook build -c .storybook -o docs",
-    "clean": "rm -rf node_modules dist .out",
+    "clean": "rm -rf node_modules dist .out docs",
     "docs": "storybook dev -p ${PORT:-9009}",
     "link-packages": "yarn install && yarn build && yarn link && cd node_modules/react && yarn link && cd ../react-dom && yarn link",
     "lint-js": "eslint src",