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 dependencies for all packages, build and deploy Stencil core package
        id: build
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

        run: | 
          npm install --scope=@infineon/infineon-design-system-stencil
          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 }}
        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
          cd packages/components-angular/projects/component-library
          npm install @infineon/infineon-design-system-stencil@$CANARY_VERSION
          cd ../../../../
          cd packages/components-vue
          npm install @infineon/infineon-design-system-stencil@$CANARY_VERSION
          cd ../components-react
          npm install @infineon/infineon-design-system-stencil@$CANARY_VERSION
     
      - 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: Install and Build
        run: |
          cd examples/wrapper-components/vue-javascript
          npm i
          echo "Installing package with canary version: ${{ needs.stencil-library-release.outputs.CANARY_VERSION }}"
          npm i @infineon/infineon-design-system-vue@${{ needs.stencil-library-release.outputs.CANARY_VERSION }}
          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: Install and Build
        run: |
          cd examples/wrapper-components/react-javascript
          npm i
          echo "Installing package with canary version: ${{ needs.stencil-library-release.outputs.CANARY_VERSION }}"
          npm i @infineon/infineon-design-system-react@${{ needs.stencil-library-release.outputs.CANARY_VERSION }}
          npm run build
      - name: Deploy preview
        uses: rossjrw/pr-preview-action@v1
        id: preview
        with:
          source-dir: ./examples/wrapper-components/react-javascript/build
          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: Install and Build
        run: |
          cd packages/components-angular
          npm i
          echo "Installing package with canary version: ${{ needs.stencil-library-release.outputs.CANARY_VERSION }}"
          npm i @infineon/infineon-design-system-angular@${{ needs.stencil-library-release.outputs.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 }}