github_pages_storybook_preview.yml

# Deploys each PR under its own subfolder
name: Deploy PR preview Storybook

on:
  pull_request:
    types:
      - opened
      - reopened
      - synchronize
      - closed

concurrency: preview-${{ github.ref }}

jobs:
  deploy-storybook-preview:
    if: github.actor != 'dependabot[bot]'
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        
      - name: Use Node.js 20
        uses: actions/setup-node@v4
        with:
          node-version: 20
          registry-url: https://registry.npmjs.org
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

      - name: Cache node modules
        id: cache-npm
        uses: actions/cache@v3
        with:
            path: |
              ~/.npm
              **/node_modules
  
            key: ${{ runner.os }}-build-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/lerna.json') }}
            restore-keys: |
              ${{ runner.os }}-build-${{ hashFiles('**/package-lock.json') }}-
              ${{ runner.os }}-build-
        env:
          NODE_AUTH_TOKEN: ${{ secrets.GH_TOKEN }}

      - name: Install and Build
        run: |
          npm install
          npm run build:storybook

      - name: Deploy preview
        uses: rossjrw/pr-preview-action@v1
        id: preview
        with:
          source-dir: ./packages/components/storybook-static
          token: ${{ secrets.GH_TOKEN }}  

      - name: Get preview URL
        run: |
          echo "Preview URL: ${{ steps.preview.outputs.deployment-url }}"

      - name: Update comment in PR # add comment on github
        uses: actions/github-script@v4
        with:
          script: |
            const prNumber = context.payload.pull_request.number;
            const STORYBOOK_IDENTIFIER = "--STORYBOOK-PREVIEW--";
            const newText = `--STORYBOOK-PREVIEW--\n- PR Preview URL for Storybook: ${{ steps.preview.outputs.deployment-url }}`;

            const {data: comments} = await github.issues.listComments({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: prNumber
            });
            const storybookComment = comments.find(c => c.body.startsWith(STORYBOOK_IDENTIFIER));

            if (storybookComment) {
              await github.issues.updateComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                comment_id: storybookComment.id,
                body: newText
              });
            } else {
              await github.issues.createComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                issue_number: prNumber,
                body: newText
              });
            }
        env:
          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}