storybook-preview.yml

name: Deploy Storybook Preview
env:
  VERCEL_TEAM: ${{ secrets.VERCEL_TEAM }}
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID_STORYBOOK }}
  PR_NUMBER: ${{ github.event.number }}
on:
  workflow_dispatch:
  pull_request:
    types: [opened, synchronize]
    paths:
      - 'packages/**'
      - '.storybook/**'
      - 'assets/**'
jobs:
  Deploy-Preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Use node 20 and yarn cache
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'yarn'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Build
        run: yarn build

      - name: Install Vercel CLI
        run: yarn add vercel@latest

      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build Project Artifacts
        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}

      - id: deploy
        name: Deploy Project Artifacts to Vercel
        run: echo "url=$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT

      - name: Set Vercel alias
        run: vercel alias --token=${{ secrets.VERCEL_TOKEN }} --scope=${{ secrets.VERCEL_TEAM }} set ${{ steps.deploy.outputs.url }} storybook-pr-${{ env.PR_NUMBER }}.dev.designsystemet.no

      - name: Find Preview Comment
        uses: peter-evans/find-comment@v2
        id: fc
        with:
          issue-number: ${{ env.PR_NUMBER }}
          body-includes: |
            **Preview deployments for this pull request:**

      - run: echo ${{ steps.fc.outputs.comment-id }}
        if: success() && env.PR_NUMBER

      - name: Find Storybook deployment
        uses: actions-ecosystem/action-regex-match@v2
        id: regex-storefront
        with:
          text: ${{ steps.fc.outputs.comment-body }}
          regex: '🖥 \[Storefront\]\((https:\/\/[^)]+)\) `[^`]+`'

      - name: Get current time in CEST
        uses: josStorer/get-current-time@v2
        id: current-time
        with:
          format: D. MMM YYYY - HH:mm
          timezone: Europe/Oslo

      - name: Update comment with deployment
        uses: peter-evans/create-or-update-comment@v3
        with:
          issue-number: ${{ env.PR_NUMBER }}
          comment-id: ${{ steps.fc.outputs.comment-id }}
          edit-mode: replace
          reactions: rocket, eyes
          body: |
            **Preview deployments for this pull request:**

            📖 [Storybook](https://storybook-pr-${{ env.PR_NUMBER }}.dev.designsystemet.no) `${{ steps.current-time.outputs.formattedTime }} (Norwegian time)`

            ${{ steps.regex-storefront.outputs.match }}

            See all deployments at [https://dev.designsystemet.no](https://dev.designsystemet.no)