chromatic.yml

# .github/workflows/chromatic.yml

# Workflow name
name: 'Chromatic'

defaults:
  run:
    working-directory: frontend

# Event for the workflow
on:
  push:
    branches:
      - develop
  pull_request:
    types: [opened, reopened, synchronize]

# List of jobs
jobs:
  # JOB to run change detection
  changes:
    runs-on: ubuntu-latest
    # Set job outputs to values from filter step
    outputs:
      frontend: ${{ steps.filter.outputs.frontend }}
    steps:
      - uses: actions/checkout@v2
      - uses: dorny/paths-filter@v2
        id: filter
        with:
          filters: |
            frontend:
              - shared/**
              - frontend/**

  chromatic-deployment:
    needs: changes
    if: ${{ needs.changes.outputs.frontend == 'true' }}
    # Operating System
    runs-on: ubuntu-latest
    # Job steps
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
          cache-dependency-path: '**/package-lock.json'
      - name: Install dependencies
        run: npm i
        # 👇 Adds Chromatic as a step in the workflow
      - name: Publish to Chromatic
        uses: chromaui/action@v1
        # Chromatic GitHub Action options
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          workingDir: frontend
          autoAcceptChanges: develop
          exitOnceUploaded: true
          onlyChanged: true
          storybookBaseDir: frontend
          # Skip running Chromatic on dependabot PRs
          skip: dependabot/**
          # Only run when the frontend directory has changes
          untraced: '!(frontend)/**'