shipit_pr_and_example_apps_deployment.yml

name: Deploy canary releases and update example apps on Github pages

on:
  pull_request:
    types:
      - opened
      - reopened
      - synchronize # canary on new commit

jobs:
  stencil-library-release:
    outputs:
      CANARY_VERSION: ${{ steps.build.outputs.CANARY_VERSION }}
      SKIP_REMAINING: ${{ steps.build.outputs.SKIP_REMAINING }}
    runs-on: ubuntu-latest
    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')" # job will not run, if triggered via ship-it
    steps:
      - name: checkout
        uses: actions/checkout@v4
        with:
          ref: ${{ github.ref }}
          fetch-depth: 0 # fetch all tags for ship-it

      - name: download + setup auto
        uses: auto-it/setup-auto@v1

      - name: Use Node.js 20.x
        uses: actions/setup-node@v4
        with:
          node-version: 20
          registry-url: "https://registry.npmjs.org"

      - name: Install jq
        run: sudo apt-get update && sudo apt-get install -y jq

      - 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-
    
      - name: Install dependencies for all packages
        run: npm install

      - name: Build and deploy Stencil core package
        id: build
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
        run: |
          npm run build:components
          if [ "${{ github.actor }}" = "dependabot[bot]" ]; then
            echo "Skipping creation of a canary release due to workflow trigger being a Dependabot PR"
            echo "SKIP_REMAINING=true" >> $GITHUB_OUTPUT
          else 
            cd packages/components
            CANARY_VERSION=$(auto shipit --dry-run --quiet)
            echo "CANARY_VERSION=$CANARY_VERSION" >> $GITHUB_ENV
            echo "CANARY_VERSION=$CANARY_VERSION" >> $GITHUB_OUTPUT
            echo "SKIP_REMAINING=false" >> $GITHUB_OUTPUT
            echo "WEBEX_MESSAGE=New package release - Version: $CANARY_VERSION" >> $GITHUB_ENV
            echo "Publishing: $CANARY_VERSION"
            auto shipit
          fi

      - name: Sleep for 10 seconds #needed because we had runtime issues where the wrappers are not getting the newest version
        run: |
          echo "Skip Remaining: ${{ steps.build.outputs.SKIP_REMAINING }}"  
          sleep 10s
        shell: bash
      
      - name: Update Dependencies in Angular, Vue and React packages
        if: steps.build.outputs.SKIP_REMAINING == 'false'
        id: update-wrapper-dependencies
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
          BRANCH_NAME: ${{ github.event_name == 'pull_request' && github.head_ref || github.ref_name }}
          CANARY_VERSION: ${{ steps.build.outputs.CANARY_VERSION }}

        run: |
          echo "CANARY_VERSION: $CANARY_VERSION"
          echo "Installing Stencil library for Angular, Vue and React: $CANARY_VERSION"
          lerna version $CANARY_VERSION --no-git-tag-version --y
      
          # Update Angular package
          cd packages/components-angular/projects/component-library
          jq --arg CANARY_VERSION "$CANARY_VERSION" '.peerDependencies["@infineon/infineon-design-system-stencil"] = $CANARY_VERSION' package.json > package.json.tmp && mv package.json.tmp package.json
          npm install
          cd ../../../../
      
          # Update Vue package
          cd packages/components-vue
          jq --arg CANARY_VERSION "$CANARY_VERSION" '.dependencies["@infineon/infineon-design-system-stencil"] = $CANARY_VERSION' package.json > package.json.tmp && mv package.json.tmp package.json
          npm install
      
          # Update React package
          cd ../components-react
          jq --arg CANARY_VERSION "$CANARY_VERSION" '.dependencies["@infineon/infineon-design-system-stencil"] = $CANARY_VERSION' package.json > package.json.tmp && mv package.json.tmp package.json
          npm install
          cd ../../
      
          # Verify updates
          echo "Verifying updates in Angular package"
          jq '.peerDependencies["@infineon/infineon-design-system-stencil"]' packages/components-angular/projects/component-library/package.json
          echo "Verifying updates in Vue package"
          jq '.dependencies["@infineon/infineon-design-system-stencil"]' packages/components-vue/package.json
          echo "Verifying updates in React package"
          jq '.dependencies["@infineon/infineon-design-system-stencil"]' packages/components-react/package.json
      
          git config user.name "github-actions"
          git config user.email "github-actions@github.com"
          git add .
          git commit -m "Update Stencil library version to $CANARY_VERSION"
          git push origin HEAD:$BRANCH_NAME
      

      - name: Build and deploy Angular, Vue and React packages
        if: steps.build.outputs.SKIP_REMAINING == 'false'
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
        run: |
          lerna version $CANARY_VERSION --no-git-tag-version --y
          npm run build:components-angular
          npm run build:components-react
          npm run build:components-vue
          cd packages/components-angular/dist/@infineon/infineon-design-system-angular
          npm publish --tag canary
          cd ../../../../components-react
          npm publish --tag canary
          cd ../components-vue
          npm publish --tag canary

  #deploy gh-pages previews for example applications:
  deploy-preview-vue:
    needs: stencil-library-release  
    if: needs.stencil-library-release.outputs.SKIP_REMAINING == 'false'
    runs-on: ubuntu-latest
    outputs:
      deployment-url: ${{ steps.preview.outputs.deployment-url }}
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Use Node.js 20.x
        uses: actions/setup-node@v4
        with:
          node-version: 20
          registry-url: https://registry.npmjs.org
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

      - name: Update package.json with canary version
        run: |
          cd examples/wrapper-components/vue-javascript
          jq --arg CANARY_VERSION "${{ needs.stencil-library-release.outputs.CANARY_VERSION }}" '.dependencies["@infineon/infineon-design-system-vue"] = $CANARY_VERSION' package.json > package.json.tmp && mv package.json.tmp package.json

      - name: Install and Build
        run: |
          cd examples/wrapper-components/vue-javascript
          npm i
          npm run build

      - name: Deploy preview
        id: preview       
        uses: rossjrw/pr-preview-action@v1
        with:
          source-dir: ./examples/wrapper-components/vue-javascript/dist
          umbrella-dir: pr-preview-vue-example
          token: ${{ secrets.GH_TOKEN }}

  deploy-preview-react:
    needs: stencil-library-release  
    if: needs.stencil-library-release.outputs.SKIP_REMAINING == 'false'
    runs-on: ubuntu-latest
    outputs:
      deployment-url: ${{ steps.preview.outputs.deployment-url }}
    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: Update package.json with canary version
        run: |
          cd examples/wrapper-components/react-vite-js
          jq --arg CANARY_VERSION "${{ needs.stencil-library-release.outputs.CANARY_VERSION }}" '.dependencies["@infineon/infineon-design-system-react"] = $CANARY_VERSION' package.json > package.json.tmp && mv package.json.tmp package.json


      - name: Install and Build
        run: |
          cd examples/wrapper-components/react-vite-js
          REACT_VERSION=$(jq -r '.dependencies["@infineon/infineon-design-system-react"]' package.json)
          STENCIL_VERSION=$(npm list @infineon/infineon-design-system-stencil --depth=1 | grep @infineon/infineon-design-system-stencil@ | awk -F@ '{print $3}')
          jq --arg CANARY_VERSION "$CANARY_VERSION" '.dependencies["@infineon/infineon-design-system-react"] = $CANARY_VERSION' package.json > package.json.tmp && mv package.json.tmp package.json
          echo "Installed version Stencil: $STENCIL_VERSION - Installed version React: $REACT_VERSION"
          npm install
          npm run build

      - name: Deploy preview
        uses: rossjrw/pr-preview-action@v1
        id: preview
        with:
          source-dir: ./examples/wrapper-components/react-vite-js/dist
          umbrella-dir: pr-preview-react-example
          token: ${{ secrets.GH_TOKEN }}

  deploy-preview-angular:
    needs: stencil-library-release  
    if: needs.stencil-library-release.outputs.SKIP_REMAINING == 'false'
    outputs:
      deployment-url: ${{ steps.preview.outputs.deployment-url }}
    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: Update package.json with canary version
        run: |
          cd packages/components-angular
          jq --arg CANARY_VERSION "${{ needs.stencil-library-release.outputs.CANARY_VERSION }}" '.dependencies["@infineon/infineon-design-system-angular"] = $CANARY_VERSION' package.json > package.json.tmp && mv package.json.tmp package.json
          # cd projects/component-library
          # jq --arg CANARY_VERSION "${{ needs.stencil-library-release.outputs.CANARY_VERSION }}" '.peerDependencies["@infineon/infineon-design-system-stencil"] = $CANARY_VERSION' package.json > package.json.tmp && mv package.json.tmp package.json      
      - name: Install and Build
        run: |
          cd packages/components-angular
          npm install
          # npm install @infineon/infineon-design-system-stencil@$CANARY_VERSION
          npm run build my-app

      - name: Deploy preview
        uses: rossjrw/pr-preview-action@v1
        id: preview
        with:
          source-dir: ./packages/components-angular/dist/my-app
          umbrella-dir: pr-preview-angular-example
          token: ${{ secrets.GH_TOKEN }}

  deploy-preview-vanilla:
    needs: stencil-library-release  
    if: needs.stencil-library-release.outputs.SKIP_REMAINING == 'false'
    runs-on: ubuntu-latest
    outputs:
      deployment-url: ${{ steps.preview.outputs.deployment-url }}
    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: Update CDN Link in Vanilla example app & build
        run: | 
          cd examples/stencil-components/vanilla-cdn
          npm install
          npm run update-link
          npm run build

      - name: Deploy preview
        uses: rossjrw/pr-preview-action@v1
        id: preview
        with:
          source-dir: ./examples/stencil-components/vanilla-cdn/dist
          umbrella-dir: pr-preview-vanilla-example
          token: ${{ secrets.GH_TOKEN }}
  
  update-pr-comment: # add comment on github
    needs: [deploy-preview-vue, deploy-preview-react, deploy-preview-angular, deploy-preview-vanilla]
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Update comment in PR
        uses: actions/github-script@v4
        with:
          script: |
            const prNumber = context.payload.pull_request.number;
            const vueUrl = "${{ needs.deploy-preview-vue.outputs.deployment-url }}";
            const reactUrl = "${{ needs.deploy-preview-react.outputs.deployment-url }}";
            const angularUrl = "${{ needs.deploy-preview-angular.outputs.deployment-url }}";
            const vanillaUrl = "${{ needs.deploy-preview-vanilla.outputs.deployment-url }}";
            const EXAMPLE_APPS_IDENTIFIER = "--EXAMPLE-APPS-PREVIEW--";
            const newText = `--EXAMPLE-APPS-PREVIEW--\nPR Preview URLs:\n- Vue example: ${vueUrl}\n- React example: ${reactUrl}\n- Angular example: ${angularUrl}\n- Vanilla example: ${vanillaUrl}`;
  
            const {data: comments} = await github.issues.listComments({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: prNumber
            });
            const appsComment = comments.find(c => c.body.startsWith(EXAMPLE_APPS_IDENTIFIER));

            if (appsComment) {
              await github.issues.updateComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                comment_id: appsComment.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 }}