chromatic.yml

# .github/workflows/chromatic.yml

# Workflow name
name: 'Chromatic'

# 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 }}
      emailpreview: ${{ steps.filter.outputs.emailpreview }}
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: dorny/paths-filter@v3
        id: filter
        with:
          filters: |
            frontend:
              - shared/**
              - frontend/**
            emailpreview:
              - react-email-preview/**

  chromatic-deployment-frontend:
    needs: changes
    if: ${{ needs.changes.outputs.frontend == 'true' }}
    # Operating System
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: frontend
    # Job steps
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - 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)/**'

  chromatic-deployment-emailpreview:
    needs: changes
    if: ${{ needs.changes.outputs.emailpreview == 'true' }}
    # Operating System
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: react-email-preview
    # Job steps
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
          cache-dependency-path: '**/package-lock.json'
      - name: Install BE dependencies
        working-directory: src
        run: npm i
      - 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_EMAIL_PROJECT_TOKEN }}
          workingDir: react-email-preview
          autoAcceptChanges: develop
          exitOnceUploaded: true
          onlyChanged: true
          storybookBaseDir: react-email-preview
          # Skip running Chromatic on dependabot PRs
          skip: dependabot/**
          # Only run when the react-email-preview directory has changes
          untraced: '!(react-email-preview)/**'