sb.yml

name: Build and publish storybook

# Run this workflow every time a new commit pushed to your repository
on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master
  workflow_dispatch:

# Allow one concurrent deployment
concurrency:
  group: 'pages-${{ github.ref_name }}' # unique builds for branch/tag name
  cancel-in-progress: true

jobs:
  storybook:
    name: Create storybook build
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - name: Set up backend environment
        uses: maykinmedia/setup-django-backend@v1.2
        with:
          apt-packages: 'libxml2 libxmlsec1 libxmlsec1-openssl gdal-bin'
          python-version: '3.10'
          optimize-postgres: 'no'
          setup-node: 'yes'
          npm-ci-flags: '--legacy-peer-deps'

      - name: Build Storybook docs
        run: |
          python src/manage.py collectstatic --noinput
          npm run build-storybook
        env:
          DJANGO_SETTINGS_MODULE: openforms.conf.ci
          API_BASE_URL: 'http://localhost:8000'

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./storybook-static

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
    permissions:
      contents: read
      pages: write
      id-token: write

    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/master' && github.event_name == 'push' # Exclude PRs
    needs: storybook
    steps:
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v4
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

  chromatic:
    name: Chromatic (interaction & visual tests)
    runs-on: ubuntu-latest
    needs:
      - storybook

    # do not run in forks
    if: github.event_name == 'push' || ! github.event.pull_request.head.repo.fork

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
        with:
          fetch-depth: 0 # 👈 Required to retrieve git history

      - name: Download build artifact
        uses: actions/download-artifact@v4
        with:
          name: github-pages
          path: ./storybook-static

      - name: Extract artifact
        run: |
          tar -xvf artifact.tar
          rm artifact.tar
        working-directory: ./storybook-static

      - name: Publish to Chromatic
        uses: chromaui/action@latest
        if: github.event.pull_request.draft == false || github.event.push
        with:
          autoAcceptChanges: master
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          storybookBuildDir: ./storybook-static
          onlyChanged: true