previews.yml

name: Native UI Previews

on:
  pull_request:
    types: [opened, synchronize, reopened]
    paths:
      - 'packages/native-ui/**'
      - 'apps/native-ui-storybook/**'
  push:
    branches:
      - main
    paths:
      - 'packages/native-ui/**'
      - 'apps/native-ui-storybook/**'

env:
  CI: true

jobs:
  build-for-android:
    name: Build for Android
    runs-on: macos-13-large
    concurrency:
      group: preview-android-${{ github.ref }}
      cancel-in-progress: true
    steps:
      - name: 🔍 Check if Android build should be skipped
        id: check_skip
        run: |
          SKIP=false
          if [ "${{ github.event_name }}" == "push" ]; then
            if [[ "${{ github.event.head_commit.message }}" == *"[skip-android]"* ]] || [[ "${{ github.event.head_commit.message }}" == *"[skip-native]"* ]] || [[ "${{ github.event.head_commit.message }}" == *"Version Packages"* ]]; then
              SKIP=true
            fi
          elif [ "${{ github.event_name }}" == "pull_request" ]; then
            if [[ "${{ github.event.pull_request.title }}" == *"[skip-android]"* ]] || [[ "${{ github.event.pull_request.title }}" == *"[skip-native]"* ]] || [[ "${{ github.event.pull_request.body }}" == *"[skip-android]"* ]] || [[ "${{ github.event.pull_request.body }}" == *"[skip-native]"* ]]; then
              SKIP=true
            fi
          fi
          echo "skip=$SKIP" >> "$GITHUB_OUTPUT"

      - name: 🔧 Setup pnpm
        if: steps.check_skip.outputs.skip == 'false'
        uses: pnpm/action-setup@v4
        with:
          version: 8

      - name: 📂 Checkout code
        if: steps.check_skip.outputs.skip == 'false'
        uses: actions/checkout@v3

      - name: 🔧 Setup Node
        uses: actions/setup-node@v2
        if: steps.check_skip.outputs.skip == 'false'
        with:
          node-version: '18.x'
          registry-url: 'https://registry.npmjs.org'
          cache: 'pnpm'

      - name: ☕ Setup Java
        uses: actions/setup-java@v4
        if: steps.check_skip.outputs.skip == 'false'
        with:
          distribution: 'zulu'
          java-version: '17.0.10'
          java-package: jdk
          architecture: x64

      - name: 🔧 Setup EAS
        uses: expo/expo-github-action@v8
        if: steps.check_skip.outputs.skip == 'false'
        with:
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}

      - name: 📦 Install dependencies
        run: pnpm install --frozen-lockfile
        if: steps.check_skip.outputs.skip == 'false'
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

      - name: 🔄 Restore .env
        if: steps.check_skip.outputs.skip == 'false' && github.event.action == 'synchronize' && !github.event_name != 'push'
        working-directory: ./apps/native-ui-storybook
        run: |
          GITHUB_PAT_TOKEN=${{ secrets.DS_ACTION_READ_PAT }} ARTIFACT_NAME=${{ github.event.pull_request.base.sha }}-env-android node ./scripts/getArtifacts.js

      - name: 🤖 Build Android APK Bundle
        if: steps.check_skip.outputs.skip == 'false'
        working-directory: ./apps/native-ui-storybook
        run: pnpm run build:preview:android

      - name: 🔐 Create/Read .env
        if: steps.check_skip.outputs.skip == 'false'
        run: touch ./apps/native-ui-storybook/.env.android && cat ./apps/native-ui-storybook/.env.android

      - name: 🔄 Load .env file
        if: steps.check_skip.outputs.skip == 'false'
        uses: xom9ikk/dotenv@v2
        with:
          path: ./apps/native-ui-storybook
          mode: 'android'

      - name: ⬆️ Upload new bundle to Appetize
        uses: appetizeio/github-action-appetize@v1.0.1
        id: appetizeio_github_action_appetize
        if: steps.check_skip.outputs.skip == 'false' && (github.event.action == 'opened' || github.event.action == 'reopened' || (!env.ANDROID_API_KEY && github.event_name == 'pull_request'))
        with:
          apiToken: ${{ secrets.APPETIZE_API_TOKEN }}
          appFile: /Users/runner/work/design-systems/design-systems/apps/native-ui-storybook/build/native-ui.apk
          platform: 'android'

      - name: 📝 Add output to .env
        if: steps.check_skip.outputs.skip == 'false' && (github.event.action == 'opened' || github.event.action == 'reopened' || !env.ANDROID_API_KEY)
        working-directory: ./apps/native-ui-storybook
        run: |
          if [ "${{ github.event_name }}" == "push" ]; then
            echo "ANDROID_API_KEY=${{ secrets.APPETIZE_PUBLIC_KEY_ANDROID }}" >> .env.android
          elif [ ${{steps.appetizeio_github_action_appetize.outputs.publicKey}} ]; then
            echo "ANDROID_API_KEY=${{ steps.appetizeio_github_action_appetize.outputs.publicKey }}" >> .env.android
          else
            echo "No public key found"
          fi

      - name: 🔄 Reload .env file
        uses: xom9ikk/dotenv@v2
        if: steps.check_skip.outputs.skip == 'false'
        with:
          path: ./apps/native-ui-storybook
          mode: 'android'

      - name: 💾 Save .env
        uses: actions/upload-artifact@v4
        if: steps.check_skip.outputs.skip == 'false' && github.event_name == 'pull_request' && env.ANDROID_API_KEY
        with:
          name: ${{ github.event.pull_request.base.sha }}-env-android
          path: ./apps/native-ui-storybook/.env.android
          include-hidden-files: true
          overwrite: true

      - name: ⬆️ Upload updated bundle to Appetize
        uses: appetizeio/github-action-appetize@v1.0.1
        if: steps.check_skip.outputs.skip == 'false' && (github.event.action != 'opened' && env.ANDROID_API_KEY)
        with:
          apiToken: ${{ secrets.APPETIZE_API_TOKEN }}
          publicKey: ${{ env.ANDROID_API_KEY }}
          appFile: /Users/runner/work/design-systems/design-systems/apps/native-ui-storybook/build/native-ui.apk
          platform: 'android'

      - name: ✅ Done
        run: echo "Job done"

  build-for-ios:
    name: Build for iOS
    runs-on: macos-13-xlarge
    concurrency:
      group: preview-ios-${{ github.ref }}
      cancel-in-progress: true
    steps:
      - name: 🔍 Check if iOS build should be skipped
        id: check_skip
        run: |
          SKIP=false
          if [ "${{ github.event_name }}" == "push" ]; then
            if [[ "${{ github.event.head_commit.message }}" == *"[skip-ios]"* ]] || [[ "${{ github.event.head_commit.message }}" == *"[skip-native]"* ]] || [[ "${{ github.event.head_commit.message }}" == *"[Version Packages]"* ]]; then
              SKIP=true
            fi
          elif [ "${{ github.event_name }}" == "pull_request" ]; then
            if [[ "${{ github.event.pull_request.title }}" == *"[skip-ios]"* ]] || [[ "${{ github.event.pull_request.title }}" == *"[skip-native]"* ]] || [[ "${{ github.event.pull_request.body }}" == *"[skip-ios]"* ]] || [[ "${{ github.event.pull_request.body }}" == *"[skip-native]"* ]]; then
              SKIP=true
            fi
          fi
          echo "skip=$SKIP" >> "$GITHUB_OUTPUT"

      - name: 🔧 Setup pnpm
        uses: pnpm/action-setup@v4
        if: steps.check_skip.outputs.skip == 'false'
        with:
          version: 8

      - name: 📂 Checkout code
        uses: actions/checkout@v3
        if: steps.check_skip.outputs.skip == 'false'

      - name: 🔧 Setup Node
        uses: actions/setup-node@v2
        if: steps.check_skip.outputs.skip == 'false'
        with:
          node-version: '18.x'
          registry-url: 'https://registry.npmjs.org'
          cache: 'pnpm'

      - name: 🍏 Setup Xcode
        uses: maxim-lobanov/setup-xcode@v1
        if: steps.check_skip.outputs.skip == 'false'
        with:
          xcode-version: '15.2.0'

      - name: 🔧 Setup EAS
        uses: expo/expo-github-action@v8
        if: steps.check_skip.outputs.skip == 'false'
        with:
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}

      - name: 📦 Install dependencies
        if: steps.check_skip.outputs.skip == 'false'
        run: pnpm install --frozen-lockfile
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

      - name: 🔄 Restore .env
        if: steps.check_skip.outputs.skip == 'false' && github.event.action != 'opened' && github.event.action != 'reopened' && github.event_name == 'pull_request'
        working-directory: ./apps/native-ui-storybook
        run: |
          GITHUB_PAT_TOKEN=${{ secrets.DS_ACTION_READ_PAT }} ARTIFACT_NAME=${{ github.event.pull_request.base.sha }}-env-ios node ./scripts/getArtifacts.js

      - name: 🍎 Build iOS app
        if: steps.check_skip.outputs.skip == 'false'
        working-directory: ./apps/native-ui-storybook
        run: pnpm run build:preview:ios

      - name: 🔐 Create/Read .env
        if: steps.check_skip.outputs.skip == 'false'
        run: touch ./apps/native-ui-storybook/.env.ios && cat ./apps/native-ui-storybook/.env.ios

      - name: 🔄 Load .env file
        uses: xom9ikk/dotenv@v2
        if: steps.check_skip.outputs.skip == 'false'
        with:
          path: ./apps/native-ui-storybook
          mode: 'ios'

      - name: ⬆️ Upload new bundle to Appetize
        uses: appetizeio/github-action-appetize@v1.0.1
        id: appetizeio_github_action_appetize
        if: steps.check_skip.outputs.skip == 'false' && (github.event.action == 'opened' || github.event.action == 'reopened' || (!env.IOS_API_KEY && github.event_name == 'pull_request'))
        with:
          apiToken: ${{ secrets.APPETIZE_API_TOKEN }}
          appFile: /Users/runner/work/design-systems/design-systems/apps/native-ui-storybook/build/native-ui.tar.gz
          platform: 'ios'

      - name: 📝 Add output to .env
        if: steps.check_skip.outputs.skip == 'false' && (github.event.action == 'opened' || github.event.action == 'reopened' || !env.IOS_API_KEY)
        working-directory: ./apps/native-ui-storybook
        run: |
          if [ "${{ github.event_name }}" == "push" ]; then
            echo "IOS_API_KEY=${{ secrets.APPETIZE_PUBLIC_KEY_IOS }}" >> .env.ios
          elif [ ${{steps.appetizeio_github_action_appetize.outputs.publicKey}} ]; then
            echo "IOS_API_KEY=${{ steps.appetizeio_github_action_appetize.outputs.publicKey }}" >> .env.ios
          else
            echo "No public key found"
          fi

      - name: 🔄 Reload .env file
        uses: xom9ikk/dotenv@v2
        if: steps.check_skip.outputs.skip == 'false'
        with:
          path: ./apps/native-ui-storybook
          mode: 'ios'

      - name: 💾 Save .env
        uses: actions/upload-artifact@v4
        if: steps.check_skip.outputs.skip == 'false' && github.event_name == 'pull_request' && env.IOS_API_KEY
        with:
          name: ${{ github.event.pull_request.base.sha }}-env-ios
          path: ./apps/native-ui-storybook/.env.ios
          include-hidden-files: true
          overwrite: true

      - name: ⬆️ Upload updated bundle to Appetize
        uses: appetizeio/github-action-appetize@v1.0.1
        if: steps.check_skip.outputs.skip == 'false' && github.event.action != 'opened' && env.IOS_API_KEY
        with:
          apiToken: ${{ secrets.APPETIZE_API_TOKEN }}
          publicKey: ${{ env.IOS_API_KEY }}
          appFile: /Users/runner/work/design-systems/design-systems/apps/native-ui-storybook/build/native-ui.tar.gz
          platform: 'ios'

      - name: ✅ Done
        run: echo "Job done"

  build-for-web:
    name: Build for Web
    runs-on: ubuntu-latest
    needs:
      - build-for-android
      - build-for-ios
    if: ${{ needs.build-for-android.result != 'failure' && needs.build-for-ios.result != 'failure' }}
    concurrency:
      group: preview-web-${{ github.ref }}
      cancel-in-progress: true
    env:
      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
    steps:
      - name: 📝 Echo needs
        run: |
          echo "Needs: ${{ toJson(needs) }}"

      - name: 🔧 Setup pnpm
        uses: pnpm/action-setup@v4
        with:
          version: 8

      - name: 📂 Checkout code
        uses: actions/checkout@v4

      - name: 🔧 Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '18.x'
          registry-url: 'https://registry.npmjs.org'
          cache: 'pnpm'

      - name: 🔍 Extract branch name
        shell: bash
        run: echo "branch=$(echo ${GITHUB_HEAD_REF##*/})" >> "$GITHUB_OUTPUT"
        id: extract_branch

      - name: 📦 Install dependencies
        run: pnpm install --frozen-lockfile
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

      - name: 📦 Install Vercel CLI
        run: pnpm install --global vercel@latest

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

      - name: 📝 Log commit message and PR details
        run: |
          echo "Commit message: ${{ github.event.head_commit.message }}"
          echo "PR Title: ${{ github.event.pull_request.title }}"
          echo "PR Body: ${{ github.event.pull_request.body }}"

      # Conditional steps for Android
      - name: 🔄 Restore Android .env
        if: |
          (github.event_name != 'push' && !contains(github.event.pull_request.title, '[skip-android]') && !contains(github.event.pull_request.title, '[skip-native]') && !contains(github.event.pull_request.body, '[skip-android]') && !contains(github.event.pull_request.body, '[skip-native]'))
        working-directory: ./apps/native-ui-storybook
        run: |
          GITHUB_PAT_TOKEN=${{ secrets.DS_ACTION_READ_PAT }} ARTIFACT_NAME=${{ github.event.pull_request.base.sha }}-env-android node ./scripts/getArtifacts.js

      - name: 🔄 Load .env.android file
        if: |
          (github.event_name != 'push' && !contains(github.event.pull_request.title, '[skip-android]') && !contains(github.event.pull_request.title, '[skip-native]') && !contains(github.event.pull_request.body, '[skip-android]') && !contains(github.event.pull_request.body, '[skip-native]'))
        uses: xom9ikk/dotenv@v2
        with:
          path: ./apps/native-ui-storybook
          mode: 'android'

      - name: 🔐 Create local .env and add Android key
        if: |
          (github.event_name != 'push' && !contains(github.event.pull_request.title, '[skip-android]') && !contains(github.event.pull_request.title, '[skip-native]') && !contains(github.event.pull_request.body, '[skip-android]') && !contains(github.event.pull_request.body, '[skip-native]'))
        working-directory: ./apps/native-ui-storybook
        run: |
          echo "ANDROID_API_KEY=${{ env.ANDROID_API_KEY }}" >> .env

      # Conditional steps for iOS
      - name: 🔄 Restore iOS .env
        if: |
          (github.event_name != 'push' && !contains(github.event.pull_request.title, '[skip-ios]') && !contains(github.event.pull_request.title, '[skip-native]') && !contains(github.event.pull_request.body, '[skip-ios]') && !contains(github.event.pull_request.body, '[skip-native]'))
        working-directory: ./apps/native-ui-storybook
        run: |
          GITHUB_PAT_TOKEN=${{ secrets.DS_ACTION_READ_PAT }} ARTIFACT_NAME=${{ github.event.pull_request.base.sha }}-env-ios node ./scripts/getArtifacts.js

      - name: 🔄 Load .env.ios file
        if: |
          (github.event_name != 'push' && !contains(github.event.pull_request.title, '[skip-ios]') && !contains(github.event.pull_request.title, '[skip-native]') && !contains(github.event.pull_request.body, '[skip-ios]') && !contains(github.event.pull_request.body, '[skip-native]'))
        uses: xom9ikk/dotenv@v2
        with:
          path: ./apps/native-ui-storybook
          mode: 'ios'

      - name: 🔐 Create local .env and add iOS key
        if: |
          (github.event_name != 'push' && !contains(github.event.pull_request.title, '[skip-ios]') && !contains(github.event.pull_request.title, '[skip-native]') && !contains(github.event.pull_request.body, '[skip-ios]') && !contains(github.event.pull_request.body, '[skip-native]'))
        working-directory: ./apps/native-ui-storybook
        run: |
          echo "IOS_API_KEY=${{ env.IOS_API_KEY }}" >> .env

      - name: 🔐 Create local production .env
        if: |
          (github.event_name == 'push') || 
          (github.event_name != 'push' && (
            contains(github.event.pull_request.title, '[skip-android]') || contains(github.event.pull_request.body, '[skip-android]') ||
            contains(github.event.pull_request.title, '[skip-ios]') || contains(github.event.pull_request.body, '[skip-ios]') ||
            contains(github.event.pull_request.title, '[skip-native]') || contains(github.event.pull_request.body, '[skip-native]')
          ))
        working-directory: ./apps/native-ui-storybook
        run: |
          title='${{ github.event.pull_request.title }}'
          body='${{ github.event.pull_request.body }}'
          if [ "${{ github.event_name }}" == "push" ]; then
            echo "ANDROID_API_KEY=${{ secrets.APPETIZE_PUBLIC_KEY_ANDROID }}" >> .env
            echo "IOS_API_KEY=${{ secrets.APPETIZE_PUBLIC_KEY_IOS }}" >> .env
          elif [[ "$title" == *"[skip-native]"* || "$body" == *"[skip-native]"* ]]; then
            echo "ANDROID_API_KEY=${{ secrets.APPETIZE_PUBLIC_KEY_ANDROID }}" >> .env
            echo "IOS_API_KEY=${{ secrets.APPETIZE_PUBLIC_KEY_IOS }}" >> .env
          elif [[ "$title" == *"[skip-ios]"* || "$body" == *"[skip-ios]"* ]]; then
            echo "ANDROID_API_KEY=${{ env.ANDROID_API_KEY }}" >> .env
          elif [[ "$title" == *"[skip-android]"* || "$body" == *"[skip-android]"* ]]; then
            echo "IOS_API_KEY=${{ env.IOS_API_KEY }}" >> .env
          else
            echo "No public key found"
          fi

      - name: 🔄 Pull Vercel Environment Information
        run: |
          if [ "${{ github.event_name }}" == "pull_request" ]; then
            vercel pull --yes --environment=preview --git-branch=${{ steps.extract_branch.outputs.branch }} --token=${{ secrets.VERCEL_TOKEN }}
          else
            vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
          fi

      - name: 🏗 Build Project Artifacts
        run: |
          if [ "${{ github.event_name }}" == "pull_request" ]; then
            vercel build --token=${{ secrets.VERCEL_TOKEN }}
          else
            vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
          fi

      - name: 🚀 Deploy Project Artifacts to Vercel
        run: |
          if [ "${{ github.event_name }}" == "pull_request" ]; then
            vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} --meta githubCommitRef=${{ github.head_ref }} --meta githubCommitSha=${{ github.sha }} > ./vercel-deploy.log
          else
            vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }} --meta githubCommitSha=${{ github.sha }} > ./vercel-deploy.log
          fi

      - name: 🔍 Extract Deployment URL
        if: github.event_name == 'pull_request'
        id: extract_deployment_url
        run: |
          echo "deployment-url=$(cat ./vercel-deploy.log)" >> "$GITHUB_OUTPUT"

      - name: 💬 Find Comment
        uses: peter-evans/find-comment@v3
        if: github.event_name == 'pull_request'
        id: fc
        with:
          issue-number: ${{ github.event.pull_request.number }}
          comment-author: 'github-actions[bot]'
          body-includes: Storybook Preview

      - name: 💬 Create or update comment
        uses: peter-evans/create-or-update-comment@v4
        if: github.event_name == 'pull_request'
        with:
          comment-id: ${{ steps.fc.outputs.comment-id }}
          issue-number: ${{ github.event.pull_request.number }}
          body: |
            ## 🖥️ Native UI - Storybook Preview

            Visit the Storybook preview URL to see the changes in action.

            - Preview: [${{ steps.extract_deployment_url.outputs.deployment-url }}](${{ steps.extract_deployment_url.outputs.deployment-url }})

            ## 📱 Appetize Previews

            You can view the apps using the link above and choosing the device from the top action bar. Alternatively, you can use the direct links below.

            - [Android](https://appetize.io/embed/${{ env.ANDROID_API_KEY }})
            - [iOS](https://appetize.io/embed/${{ env.IOS_API_KEY }})

            ---
            Last updated from commit ${{ github.sha }}
          edit-mode: replace