chromatic.yml

name: Chromatic

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

permissions:
  contents: write
  pull-requests: write
  repository-projects: write

concurrency:
  group: chromatic-${{ github.ref }}
  cancel-in-progress: true

jobs:
  determine-affected:
    runs-on: ubuntu-latest
    outputs:
      html_affected: ${{ steps.check-html-affected.outputs.html_affected }}
      react_affected: ${{ steps.check-react-affected.outputs.react_affected }}
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22

      - name: Install dependencies
        run: |
          corepack enable
          pnpm install --frozen-lockfile --ignore-scripts

      - name: Determine affected projects
        id: affected
        run: |
          pnpm nx show projects --affected --base=origin/main~1 --head=HEAD > affected.txt
          cat affected.txt

      - name: Set environment output if HTML package is affected
        id: check-html-affected
        run: |
          if grep -q "@govie-frontend/storybook" affected.txt; then
            echo "html_affected=true" >> "$GITHUB_OUTPUT"
          else
            echo "html_affected=false" >> $GITHUB_OUTPUT
          fi
      - name: Set environment output if React package is affected
        id: check-react-affected
        run: |
          if grep -q "@govie-react/storybook" affected.txt; then
            echo "react_affected=true" >> $GITHUB_OUTPUT
          else
            echo "react_affected=false" >> $GITHUB_OUTPUT
          fi

  chromatic-html:
    runs-on: ubuntu-latest
    environment: dev
    needs: determine-affected
    if: ${{ needs.determine-affected.outputs.html_affected == 'true' }}
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 22

      - name: Install dependencies
        run: |
          corepack enable
          pnpm install --frozen-lockfile --ignore-scripts

      - name: Install Playwright
        run: npx playwright install --with-deps

      - name: Storybook build
        run: pnpm html:storybook:build

      - name: Serve Storybook and run tests
        run: pnpm html:storybook:test

      - name: Publish Global HTML Library to Chromatic
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN_HTML }}
          storybookBuildDir: packages/html/storybook/storybook-static
          autoAcceptChanges: "main"

  chromatic-react:
    runs-on: ubuntu-latest
    environment: dev
    needs: determine-affected
    if: ${{ needs.determine-affected.outputs.react_affected == 'true' }}
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 22

      - name: Install dependencies
        run: |
          corepack enable
          pnpm install --frozen-lockfile --ignore-scripts

      - name: Install Playwright
        run: npx playwright install --with-deps

      - name: Storybook build
        run: pnpm react:storybook:build

      - name: Serve Storybook and run tests
        run: pnpm react:storybook:test

      - name: Publish React Library to Chromatic
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN_REACT }}
          storybookBuildDir: packages/react/storybook/storybook-static
          autoAcceptChanges: "main"