chromatic.yml

# Workflow name
name: "Chromatic"

# Event for the workflow
on:
  pull_request:
    types: [opened, reopened, synchronize]

  push:
    branches:
      - main

# List of jobs
jobs:
  optimize_ci:
    runs-on: ubuntu-latest
    outputs:
      skip: ${{ steps.check_skip.outputs.skip }}
    steps:
      - name: Optimize CI
        id: check_skip
        uses: withgraphite/graphite-ci-action@main
        with:
          graphite_token: ${{ secrets.GRAPHITE_CI_OPTIMIZER_TOKEN }}
  # JOB to run change detection
  changes:
    runs-on: ubuntu-latest
    # Set job outputs to values from filter step
    outputs:
      ui: ${{ steps.filter.outputs.ui }}
      studio: ${{ steps.filter.outputs.studio }}
    steps:
      - uses: actions/checkout@v4
      # For pull requests it's not necessary to checkout the code
      - uses: dorny/paths-filter@v3
        id: filter
        with:
          filters: |
            ui:
              - 'packages/components/**'
            studio:
              - 'apps/studio/**'
              - 'packages/components/src/interfaces/**'
              - 'packages/components/src/types/**'
  ui:
    needs: [changes, optimize_ci]
    # Only run if the user is not a bot and has changes
    if: ${{ !endsWith(github.actor , 'bot') && !endsWith(github.actor, '[bot]') && needs.changes.outputs.ui == 'true' && needs.optimize_ci.outputs.skip == 'false'}}
    # Operating System
    runs-on: ubuntu-latest
    environment: staging
    # Job steps
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0 # Required for v4
      - name: Setup
        uses: ./.github/actions/setup
      # 👇 Adds Chromatic as a step in the workflow
      - name: Publish to Chromatic
        uses: chromaui/action@latest
        # Chromatic GitHub Action options
        with:
          workingDir: packages/components
          storybookBaseDir: packages/components
          projectToken: ${{ secrets.CHROMATIC_COMPONENTS_PROJECT_TOKEN }}
          onlyChanged: true
          exitOnceUploaded: true
          autoAcceptChanges: main
          # Skip running Chromatic on dependabot PRs
          skip: dependabot/**
  studio:
    needs: [changes, optimize_ci]
    # Only run if the user is not a bot and has changes
    if: ${{ !endsWith(github.actor , 'bot') && !endsWith(github.actor, '[bot]') && needs.changes.outputs.studio == 'true' && needs.optimize_ci.outputs.skip == 'false' }}
    # Operating System
    runs-on: ubuntu-latest
    environment: staging
    # Job steps
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0 # Required for v4
      - name: Setup
        uses: ./.github/actions/setup
      - name: Build Isomer Components
        run: npm run --workspace packages/components build
      # 👇 Adds Chromatic as a step in the workflow
      - name: Publish to Chromatic
        uses: chromaui/action@latest
        # Chromatic GitHub Action options
        with:
          workingDir: apps/studio
          storybookBaseDir: apps/studio
          projectToken: ${{ secrets.CHROMATIC_STUDIO_PROJECT_TOKEN }}
          onlyChanged: true
          exitOnceUploaded: true
          autoAcceptChanges: main
          # Skip running Chromatic on dependabot PRs
          skip: dependabot/**