From a211bf0e0a3f78645c88eac78a660414c8e1b736 Mon Sep 17 00:00:00 2001 From: Jordan Dominion Date: Sun, 24 Nov 2024 06:31:09 -0500 Subject: [PATCH] Setup Chromatic (#32) Co-authored-by: Jeremiah <42397676+jlsnow301@users.noreply.github.com> --- .github/workflows/chromatic-security.yml | 75 ++++++++++++++++++++++++ .github/workflows/chromatic.yml | 47 +++++++++++++++ package.json | 1 + pnpm-lock.yaml | 3 + 4 files changed, 126 insertions(+) create mode 100644 .github/workflows/chromatic-security.yml create mode 100644 .github/workflows/chromatic.yml diff --git a/.github/workflows/chromatic-security.yml b/.github/workflows/chromatic-security.yml new file mode 100644 index 0000000..bbb5cca --- /dev/null +++ b/.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 }} diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml new file mode 100644 index 0000000..6b99ed2 --- /dev/null +++ b/.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 diff --git a/package.json b/package.json index 556717a..ed6f9fa 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 818b438..20582f2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -63,6 +63,9 @@ importers: '@vitejs/plugin-react-swc': specifier: ^3.7.1 version: 3.7.1(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)(terser@5.36.0)) + chromatic: + specifier: ^11.18.1 + version: 11.18.1 glob: specifier: ^11.0.0 version: 11.0.0