chromatic.yml

# Chromatic Main and Active PRs only
# Trigger example found here: https://github.com/chromaui/chromatic-cli/blob/main/.github/workflows/chromatic-main-and-prs.yml

name: Chromatic

on:
    push:
        branches:
            - main
    pull_request:
        # Opened, synchronize, or reopened are the default types
        # We added ready_for_review to trigger the workflow is passed from draft to ready_for_review
        types: ["opened", "synchronize", "reopened", "ready_for_review"]
        # Workflows will not run on pull_request activity if the pull request has a merge conflict. The merge conflict must be resolved first.
        # By default, a workflow only runs when a pull_request event's activity type is opened, synchronize, or reopened.
        branches-ignore:
            - changeset-release/*

concurrency:
    group: chromatic-${{ github.head_ref || github.ref }}
    cancel-in-progress: true

jobs:
    chromatic:
        if: github.event.pull_request.draft == false
        runs-on: ubuntu-latest
        permissions:
            contents: write
            pull-requests: write
        steps:
            -   name: Checkout Commit
                uses: actions/checkout@v4
                with:
                    fetch-depth: 0

            -   name: Install Node.js
                uses: actions/setup-node@v4
                with:
                    node-version-file: ".nvmrc"

            -   uses: pnpm/action-setup@v4
                name: Install pnpm
                id: pnpm-install
                with:
                    version: 9
                    run_install: false

            -   name: Get pnpm store directory
                id: pnpm-cache
                shell: bash
                run: |
                    echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT

            -   name: Setup pnpm cache
                uses: actions/cache@v4
                with:
                    path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
                    key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
                    restore-keys: |
                        ${{ runner.os }}-pnpm-store-

            -   name: Install dependencies
                run: pnpm i --frozen-lockfile

            -   name: Build Packages
                run: pnpm build:pkg

            -   name: Publish to Chromatic
                uses: chromaui/action@v1
                id: chromatic
                with:
                    projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
                    traceChanged: true
                    onlyChanged: true # TurboSnap
                    exitOnceUploaded: true # The PRs will be marked as success/failure based on the Chromatic build status
                    skip: ${{ github.event.pull_request.draft == true }}

            -   name: Write to Github comment
                uses: thollander/actions-comment-pull-request@v2
                with:
                    message: |
                        [View Storybook](${{ steps.chromatic.outputs.storybookUrl }})
                    comment_tag: storybook_url
                if: github.event_name == 'pull_request'