---
name: Chromatic

on:
  push:
    paths-ignore:
      - '.github/workflows/**'

jobs:
  chromatic:
    name: Chromatic
    runs-on: ubuntu-20.04

    steps:
      - name: Set up Node
        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
        with:
          node-version: "16"

      - name: Checkout repo
        uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
        with:
          fetch-depth: 0

      - name: Cache npm
        id: npm-cache
        uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8 # v3.3.1
        with:
          path: "~/.npm"
          key: ${{ runner.os }}-npm-chromatic-${{ hashFiles('**/package-lock.json') }}

      - name: Install Node dependencies
        run: npm ci
      
      # Manual build the storybook to resolve a chromatic/storybook bug related to TurboSnap
      - name: Build Storybook
        run: npm run build-storybook:ci

      - name: Publish to Chromatic
        uses: chromaui/action@a89b674adf766dbde41ad9ea2b2b60b91188a0f0
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          storybookBuildDir: ./storybook-static
          exitOnceUploaded: true
          onlyChanged: true
          externals: "[\"libs/components/**/*.scss\", \"libs/components/tailwind.config*.js\"]"