chromatic.yml

# .github/workflows/chromatic.yml

# Workflow name
name: 📖 Storybook (via Chromatic)

# Event for the workflow
on:
  # 👇 Triggers the workflow on push events to the main branch
  push:
    branches:
      - main
  # 👇 Triggers the workflow on pull request events to the main branch
  pull_request:
    branches:
      - main
    paths-ignore:
      - 'packages/ui-tests/cypress/**'
    types: [opened, synchronize, reopened, ready_for_review]

# List of jobs
jobs:
  chromatic-deployment:
    if: github.repository == 'KaotoIO/kaoto' && github.actor != 'renovate[bot]' && !github.event.pull_request.draft
    # Operating System
    runs-on: ubuntu-latest
    # Job steps
    steps:
      - uses: actions/checkout@v4
        with:
          # 👇 Fetches all Git history so that Chromatic can compare against the previous version
          fetch-depth: 0

      - uses: actions/setup-node@v4
        with:
          node-version: '20.x'
          registry-url: 'https://registry.npmjs.org'
          scope: '@kaoto'
          cache: 'yarn'

      - uses: actions/setup-java@v4
        with:
          distribution: 'temurin'
          java-version: '17'
          cache: 'maven'

      # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
      - name: Install dependencies
        run: yarn

      # 👇 Builds the kaoto/ui in library mode
      - name: Build ui library
        run: yarn workspace @kaoto/kaoto run build:lib

      # 👇 Adds Chromatic as a step in the workflow
      - name: Publish to Chromatic
        uses: chromaui/action@v11
        # Chromatic GitHub Action options
        with:
          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/en/deploy/ to obtain it
          projectToken: chpt_7a4940aa65b14ab
          token: ${{ secrets.GITHUB_TOKEN }}
          buildScriptName: build:storybook
          workingDir: packages/ui-tests