chore: update storybook docs with videos #532
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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/[email protected] | |
| 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/[email protected] | |
| 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/[email protected] | |
| 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/[email protected] | |
| 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 |