docs(1477): fix errors in tab component story #2217
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: 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 | |
| cd ../../ | |
| 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 "[email protected]" | |
| 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 }} | |