storybook.yml

name: Storybook

on:
  push:
    branches:
      - develop
      - main
    # Only run if CSS/JS/MD-related files changed.
    paths:
      - '.github/workflows/storybook.yml'
      - 'assets/**'
      - '!assets/**/__tests__/**/*.js'
      - '!assets/**/test/*.js'
      - '!assets/**/*.test.js'
      - 'storybook/**'
      - '**.scss'
      - '.nvmrc'
      - '**/package.json'
      - 'package-lock.json'
  pull_request:
    branches:
      - develop
      - main
      - 'feature/**'
    # Only run if CSS/JS/MD-related files changed.
    paths:
      - '.github/workflows/storybook.yml'
      - 'assets/**'
      - '!assets/**/__tests__/**/*.js'
      - '!assets/**/test/*.js'
      - '!assets/**/*.test.js'
      - 'storybook/**'
      - '**.scss'
      - '.nvmrc'
      - '**/package.json'
      - 'package-lock.json'
    types:
      - opened
      - closed
      - reopened
      - synchronize
      - ready_for_review

concurrency:
  group: storybook-${{ github.event_name }}-${{ github.ref }}
  cancel-in-progress: true

env:
  GCS_BUCKET: site-kit-storybook

jobs:
  build-storybook:
    name: Build Storybook
    runs-on: ubuntu-latest
    timeout-minutes: 20
    if: |
      false == (
        (
          github.event_name == 'pull_request' && (
            github.event.action == 'closed' ||
            github.event.pull_request.draft == true ||
            contains( github.head_ref, 'dependabot/' )
          )
        ) ||
        github.event.pull_request.head.repo.fork
      )
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js (.nvmrc)
        uses: actions/setup-node@v4
        with:
          node-version-file: .nvmrc
          cache: npm
      - name: npm install
        run: npm i -w assets -w storybook -w tests/js --include-workspace-root
      - name: Build Storybook
        run: npm run build:storybook
      - name: Upload artifacts
        uses: actions/upload-artifact@v4
        with:
          name: storybook-files
          path: dist

  deploy-storybook:
    name: Deploy Storybook
    runs-on: ubuntu-latest
    needs: build-storybook
    steps:
      - name: Download artifacts
        uses: actions/download-artifact@v4
        with:
          name: storybook-files
          path: dist
      
      - name: Set branch environment variables
        id: branch-target
        if: github.event_name != 'pull_request'
        run: echo "dir=${GITHUB_REF##*/}" >> "$GITHUB_OUTPUT"
      
      - name: Set PR environment variables
        id: pr-target
        if: github.event_name == 'pull_request'
        env:
          PULL_REQUEST_NUMBER: ${{ github.event.number }}
        run: echo "dir=pull/${PULL_REQUEST_NUMBER}" >> "$GITHUB_OUTPUT"
      
      - uses: google-github-actions/auth@v3
        with:
          credentials_json: ${{ secrets.GCP_CREDENTIALS }}
      
      - name: Upload files
        uses: google-github-actions/upload-cloud-storage@v2
        with:
          path: dist
          destination: ${{ env.GCS_BUCKET }}/${{ env.TARGET_DIR }}
          parent: false
          process_gcloudignore: false
        env:
          TARGET_DIR: ${{ steps.branch-target.outputs.dir }}${{ steps.pr-target.outputs.dir }}

      # Update files in Storybook without content hashes to not be cached.
      - name: Upload no-cache files
        uses: google-github-actions/upload-cloud-storage@v2
        with:
          path: dist
          glob: '!(*.js*)'
          destination: ${{ env.GCS_BUCKET }}/${{ env.TARGET_DIR }}
          parent: false
          process_gcloudignore: false
          headers: |-
            cache-control: no-store
        env:
          TARGET_DIR: ${{ steps.branch-target.outputs.dir }}${{ steps.pr-target.outputs.dir }}

  add-comment-to-pr:
    name: Add comment to PR
    runs-on: ubuntu-latest
    if: github.event_name == 'pull_request'
    needs: deploy-storybook
    permissions:
      pull-requests: write
    steps:
      - name: Check the comment exists
        id: find-comment
        uses: peter-evans/find-comment@v3
        with:
          issue-number: ${{ github.event.pull_request.number }}
          comment-author: github-actions[bot]
          body-includes: Storybook is ready
      - name: Get comment body
        id: get-comment-body
        # Setting a multi-line output requires escaping line-feeds. See <https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#multiline-strings>.
        run: |
          body="Storybook is ready:
          - View [Storybook](https://storage.googleapis.com/${{ env.GCS_BUCKET }}/pull/${{ github.event.pull_request.number }}/index.html)"
          delimiter="${body//$'\n'/'%0A'}"
          echo "body<<${delimiter}" >> "$GITHUB_OUTPUT"
          echo "$body" >> "$GITHUB_OUTPUT"
          echo "${delimiter}" >> "$GITHUB_OUTPUT"
      - name: Create comment on PR with link to Storybook
        if: ${{ steps.find-comment.outputs.comment-id == '' }}
        uses: peter-evans/create-or-update-comment@v4
        with:
          issue-number: ${{ github.event.pull_request.number }}
          body: ${{ steps.get-comment-body.outputs.body }}

  test-storybook:
    name: Test Storybook
    runs-on: ubuntu-latest
    needs: build-storybook
    timeout-minutes: 20
    if: |
      false == (
        (
          github.event_name == 'pull_request' && (
            github.event.action == 'closed' ||
            github.event.pull_request.draft == true ||
            contains( github.head_ref, 'dependabot/' )
          )
        ) ||
        github.event.pull_request.head.repo.fork
      )
    steps:
      - uses: actions/checkout@v4
      - name: Download artifacts
        uses: actions/download-artifact@v4
        with:
          name: storybook-files
          path: dist
      - name: Setup Node.js (.nvmrc)
        uses: actions/setup-node@v4
        with:
          node-version-file: .nvmrc
          cache: npm
      - name: npm install
        run: npm i -w assets -w storybook -w tests/js --include-workspace-root
      # TODO: #10473 will complete the migration to Storybook test-runner as storyshots is deprecated.
      # - name: Test Storybook
      #   run: npm run test:storybook