chromatic.yml

name: "Chromatic"

on:
  pull_request:
  workflow_dispatch:
  push:
    branches: [master]

jobs:
  chromatic-deployment:
    name: "Deploy Storybook to Chromatic"
    strategy:
      matrix:
        os: ["ubuntu-20.04"]
        node_version: ["18.20.2"]
        npm_version: ["10.9.0"]
    runs-on: ${{matrix.os}}
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0 # Chromatic requires git history
          ref: ${{ github.event.pull_request.head.sha }} # Chromatic needs the PR branch, not the merge to master
      - name: "Deps: Node"
        uses: actions/setup-node@v4
        with:
          node-version: ${{matrix.node_version}}
      - name: "Deps: npm"
        run: npm install --global npm@${{matrix.npm_version}}
      - name: Pre-build report
        run: |
          set -xueo pipefail
          lsb_release -a
          which node
          node --version
          which npm
          npm --version
      - name: "Ensure desired tool versions"
        # The build machine may come with newer tools than we are ready for.
        run: |
          set -xueo pipefail
          [[ $(node --version) == v${{matrix.node_version}} ]]
          [[ $(npm --version) == ${{matrix.npm_version}} ]]

      - name: "Deps: RealtimeServer npm"
        run: cd src/RealtimeServer && (npm ci || (sleep 3m && npm ci))
      - name: "Deps: Frontend npm"
        run: cd src/SIL.XForge.Scripture/ClientApp && (npm ci || (sleep 3m && npm ci))

      - name: "Build: Backend, RealtimeServer"
        run: cd src/RealtimeServer && npm run build
      - name: "Build: Frontend"
        run: cd src/SIL.XForge.Scripture/ClientApp && npm run build

      - name: Build Storybook
        run: cd src/SIL.XForge.Scripture/ClientApp && npm run build-storybook -- --webpack-stats-json
      - id: publish
        name: Publish to Chromatic
        uses: chromaui/action@v11.3.0
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          workingDir: src/SIL.XForge.Scripture/ClientApp
          storybookBuildDir: storybook-static
          # Auto accept changes on master branch so we have a clean baseline
          autoAcceptChanges: "master"
          # Ignore any past builds on the branch that triggered the workflow. This prevents rebased branches from
          # having the wrong baseline. On master this shouldn't have any effect because autoAcceptChanges is true.
          ignoreLastBuildOnBranch: ${{ github.ref }}
          onlyChanged: true
          externals: |
            - '*.scss'
      - name: Run Storybook tests
        run: cd src/SIL.XForge.Scripture/ClientApp && npm run test-storybook -- --no-index-json
        env:
          TARGET_URL: "${{steps.publish.outputs.storybookUrl}}"