shipit_master_and_example_apps_deployment.yml

name: Deploy Stencil Web components Library to NPM

on:
  push:
    branches:
     - master
 
jobs:
  stencil-library-release:
    outputs:
      VERSION: ${{ steps.build.outputs.VERSION }}
    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:
          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: Build stencil
        id: build
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

        run: | 
          npm install --scope=@infineon/infineon-design-system-stencil
          npm run build:components
          cd packages/components
          VERSION=$(auto shipit --dry-run --quiet)
          echo "Publishing: $VERSION"
          echo "VERSION=$VERSION" >> $GITHUB_ENV
          echo "VERSION=$VERSION" >> $GITHUB_OUTPUT
          echo "Set version as Github Env and Github Output: $VERSION"
          echo "WEBEX_MESSAGE=New package release - Version: $VERSION" >> $GITHUB_ENV
          auto shipit

      - name: Sleep for 10 seconds #needed because we had runtime issues where the wrappers are not getting the newest version
        run: sleep 10s
        shell: bash

      - name: Update Dependencies in Angular, Vue and React packages
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
        run: | 
          echo "VERSION: $VERSION"
          echo "Installing Stencil library for Angular, Vue and React: $VERSION"
          lerna version $VERSION --no-git-tag-version --y
          cd packages/components-angular/projects/component-library
          npm install @infineon/infineon-design-system-stencil@$VERSION
          cd ../../../../
          cd packages/components-vue
          # Use jq to update the version directly in package.json
          jq --arg VERSION "$VERSION" '.dependencies["@infineon/infineon-design-system-stencil"] = $VERSION' package.json > package.json.tmp && mv package.json.tmp package.json          
          npm install
          cd ../components-react
          jq --arg VERSION "$VERSION" '.dependencies["@infineon/infineon-design-system-stencil"] = $VERSION' package.json > package.json.tmp && mv package.json.tmp package.json          
          npm install
          cd ../../
          git config user.name "github-actions"
          git config user.email "github-actions@github.com"
          git add .
          git commit -m "Update Stencil library version to $VERSION"
          git push origin HEAD:master   

      - name: Build and deploy Angular, Vue and React packages
        id: build-and-deploy-wrappers
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
        run: | 
          lerna version $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 --verbose
          cd ../../../../components-react
          npm publish
          cd ../components-vue
          npm publish   


#deploy gh-pages for example applications based on the master branch:
  deploy-master-vue:
    needs: stencil-library-release  
    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 examples/wrapper-components/vue-javascript
          npm i
          echo "Installing package with version: ${{ needs.stencil-library-release.outputs.VERSION }}"
          npm install @infineon/infineon-design-system-vue@latest
          npm run build

      - name: Deploy Vue Example🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: examples/wrapper-components/vue-javascript/dist/ # The folder the action should deploy.
          target-folder: vue-example
          clean-exclude: |
            angular-example/
            react-example/
            vanilla-example/
            pr-preview/
            pr-preview-vue-example/
            pr-preview-react-example/
            pr-preview-angular-example/
            pr-preview-vanilla-example/
          force: false
  
  deploy-master-react:
    needs: stencil-library-release  
    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 examples/wrapper-components/react-javascript
          npm i
          echo "Installing package with version: ${{ needs.stencil-library-release.outputs.VERSION }}"
          npm i @infineon/infineon-design-system-react@latest
          npm run build

      - name: Deploy React Example🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: examples/wrapper-components/react-javascript/build/ # The folder the action should deploy.
          target-folder: react-example
          clean-exclude: |
            angular-example/
            vanilla-example/
            vue-example/
            pr-preview/
            pr-preview-vue-example/
            pr-preview-react-example/
            pr-preview-angular-example/
            pr-preview-vanilla-example/
          force: false
   
  deploy-master-angular:
    needs: stencil-library-release  
    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
          npm i @infineon/infineon-design-system-angular@latest
          npm run build my-app
           
      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: packages/components-angular/dist/my-app/ # The folder the action should deploy.
          target-folder: angular-example
          clean-exclude: |
            react-example/
            vanilla-example/
            vue-example/
            pr-preview/
            pr-preview-vue-example/
            pr-preview-react-example/
            pr-preview-angular-example/
            pr-preview-vanilla-example/
          force: false
  
  deploy-master-vanilla:
    needs: stencil-library-release  
    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 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 🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: examples/stencil-components/vanilla-cdn/dist # The folder the action should deploy.
          target-folder: vanilla-example
          clean-exclude: |
            angular-example/
            react-example/
            vue-example/
            pr-preview/
            pr-preview-vue-example/
            pr-preview-react-example/
            pr-preview-angular-example/
            pr-preview-vanilla-example/
          force: false

  send-webex-notification:
    needs: [stencil-library-release, deploy-master-vue, deploy-master-react, deploy-master-angular, deploy-master-vanilla]
    runs-on: ubuntu-latest
    steps:
      - name: Send Webex Notification
        run: |
          VERSION=${{ needs.stencil-library-release.outputs.VERSION }}
          WEBEX_MESSAGE="**VERSION UPDATE**\nA new version has been released: [$VERSION](https://github.com/Infineon/infineon-design-system-stencil/releases/tag/v$VERSION)\nFollow the link to see what's included in this release."
          curl https://webexapis.com/v1/messages -X POST -H "Authorization: Bearer ${{ secrets.WEBEX_TOKEN }}" -H "Content-Type: application/json" -d "{\"roomId\":\"${{ secrets.WEBEX_ROOM_ID }}\",\"markdown\":\"$WEBEX_MESSAGE\"}"
        shell: bash