Setup Chromatic (#32)

Co-authored-by: Jeremiah <[email protected]>

.github/workflows/chromatic-security.yml

@@ -0,0 +1,75 @@
+name: Chromatic Security
+
+on:
+  pull_request:
+  pull_request_target:
+    types:
+      - opened
+      - reopened
+      - labeled
+      - synchronize
+
+concurrency:
+  group: "chromatic-security-${{ github.head_ref || github.run_id }}-${{ github.event_name }}"
+  cancel-in-progress: true
+
+jobs:
+  security-checkpoint:
+    name: Check Chromatic Clearance
+    if: github.event_name == 'pull_request_target' && (github.event.pull_request.head.repo.id != github.event.pull_request.base.repo.id || github.event.pull_request.user.id == 49699333) && github.event.pull_request.state == 'open'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Generate App Token
+        id: app-token-generation
+        uses: actions/create-github-app-token@v1
+        with:
+          app-id: ${{ secrets.APP_ID }}
+          private-key: ${{ secrets.APP_PRIVATE_KEY }}
+
+      - name: Comment on new Fork PR
+        if: github.event.action == 'opened' && !contains(github.event.pull_request.labels.*.name, 'CI Cleared') && github.event.pull_request.user.id != 49699333
+        uses: thollander/actions-comment-pull-request@fabd468d3a1a0b97feee5f6b9e499eab0dd903f6
+        with:
+          message: Thank you for contributing to ${{ github.event.pull_request.base.repo.name }}! The workflow '${{ github.workflow }}' requires repository secrets and will not run without approval. Maintainers can add the `CI Cleared` label to allow it to run. Note that any changes to chromaitc-security.yml and chromatic.yml will not be reflected.
+          GITHUB_TOKEN: ${{ steps.app-token-generation.outputs.token }}
+
+      - name: Comment on dependabot PR
+        if: github.event.action == 'opened' && !contains(github.event.pull_request.labels.*.name, 'CI Cleared') && github.event.pull_request.user.id == 49699333
+        uses: thollander/actions-comment-pull-request@fabd468d3a1a0b97feee5f6b9e499eab0dd903f6
+        with:
+          message: Check for supply chain attacks, and then add the `CI Cleared` label to allow CI to run.
+          GITHUB_TOKEN: ${{ steps.app-token-generation.outputs.token }}
+
+      - name: "Remove Stale 'CI Cleared' Label"
+        if: github.event.action == 'synchronize' || github.event.action == 'reopened'
+        uses: actions-ecosystem/action-remove-labels@2ce5d41b4b6aa8503e285553f75ed56e0a40bae0
+        with:
+          labels: CI Cleared
+          github_token: ${{ steps.app-token-generation.outputs.token }}
+
+      - name: "Remove 'CI Approval Required' Label"
+        if: (github.event.action == 'synchronize' || github.event.action == 'reopened') || ((github.event.action == 'opened' || github.event.action == 'labeled') && contains(github.event.pull_request.labels.*.name, 'CI Cleared'))
+        uses: actions-ecosystem/action-remove-labels@2ce5d41b4b6aa8503e285553f75ed56e0a40bae0
+        with:
+          labels: CI Approval Required
+          github_token: ${{ steps.app-token-generation.outputs.token }}
+
+      - name: "Add 'CI Approval Required' Label"
+        if: (github.event.action == 'synchronize' || github.event.action == 'reopened') || ((github.event.action == 'opened' || github.event.action == 'labeled') && !contains(github.event.pull_request.labels.*.name, 'CI Cleared'))
+        uses: actions-ecosystem/action-add-labels@18f1af5e3544586314bbe15c0273249c770b2daf
+        with:
+          labels: CI Approval Required
+          github_token: ${{ steps.app-token-generation.outputs.token }}
+
+      - name: Fail if PR has Unlabeled new Commits from User
+        if: (github.event.action == 'synchronize' || github.event.action == 'reopened') || ((github.event.action == 'opened' || github.event.action == 'labeled') && !contains(github.event.pull_request.labels.*.name, 'CI Cleared'))
+        run: exit 1
+
+  chromatic-workflow-call:
+    name: Chromatic
+    needs: security-checkpoint
+    if: (!(cancelled() || failure()) && (needs.security-checkpoint.result == 'success' || (github.event_name != 'pull_request_target' && github.event.pull_request.head.repo.id == github.event.pull_request.base.repo.id && github.event.pull_request.user.id != 49699333)))
+    uses: ./.github/workflows/chromatic.yml
+    secrets: inherit
+    with:
+      pull_request_number: ${{ github.event.pull_request.number }}

.github/workflows/chromatic.yml

@@ -0,0 +1,47 @@
+name: "Chromatic"
+
+on:
+  push:
+  workflow_call:
+    inputs:
+      pull_request_number:
+        description: Pull Request Number
+        required: true
+        type: string
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        if: github.event_name == 'push'
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Checkout (PR)
+        if: github.event_name != 'push'
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: refs/pull/${{ inputs.pull_request_number }}/head
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: "pnpm"
+          cache-dependency-path: "./pnpm-lock.yaml"
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitOnceUploaded: true

package.json

@@ -46,6 +46,7 @@
     "@types/react-dom": "^18.3.0",
     "@types/webpack-env": "^1.18.5",
     "@vitejs/plugin-react-swc": "^3.7.1",
+    "chromatic": "^11.18.1",
     "glob": "^11.0.0",
     "prettier": "^3.3.3",
     "react-popper": "^2.3.0",