Merge pull request #1460 from Infineon/1458-speed-up-build-process-du…

…ring-github-actions-deployment-process Enhancement: add github actions caching option
Infineon · Sep 16, 2024 · cebdfaa · cebdfaa
2 parents 4b76e9d + 2755936
commit cebdfaa
Show file tree

Hide file tree

Showing 150 changed files with 17,514 additions and 3,805 deletions.
diff --git a/.github/workflows/github_pages_storybook_preview.yml b/.github/workflows/github_pages_storybook_preview.yml
@@ -27,19 +27,24 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
-      - name: Cache dependencies for packages/components
+      - name: Cache node modules
+        id: cache-npm
         uses: actions/cache@v3
         with:
-          path: packages/components/node_modules
-          key: ${{ runner.os }}-npm-packages-components-${{ hashFiles('packages/components/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-npm-packages-components-
+            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-
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GH_TOKEN }}
 
       - name: Install and Build
         run: |
-          npm install --scope=@infineon/infineon-design-system-stencil
+          npm install
           npm run build:storybook
 
       - name: Deploy preview

diff --git a/.github/workflows/shipit_master_and_example_apps_deployment.yml b/.github/workflows/shipit_master_and_example_apps_deployment.yml
@@ -30,13 +30,27 @@ jobs:
       - name: Install jq
         run: sudo apt-get update && sudo apt-get install -y jq
 
-      - name: Build stencil
+      - 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 install --scope=@infineon/infineon-design-system-stencil
+        run: |
           npm run build:components
           cd packages/components
           VERSION=$(auto shipit --dry-run --quiet)
@@ -51,29 +65,40 @@ jobs:
         run: sleep 10s
         shell: bash
 
-      - name: Clear NPM cache
-        if: steps.build.outputs.SKIP_REMAINING == 'false'
-        run: npm cache clean --force
-
       - 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
+          
+          # Update Angular package
           cd packages/components-angular/projects/component-library
           jq --arg VERSION "$VERSION" '.peerDependencies["@infineon/infineon-design-system-stencil"] = $VERSION' package.json > package.json.tmp && mv package.json.tmp package.json          
+          cd ../../
           npm install
-          cd ../../../../
+          cd ../../
+
+          # Update Vue package
           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
+
+          # Update React package
           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 ../../
+
+          # 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 .
@@ -159,12 +184,12 @@ jobs:
 
       - name: Update package.json with version
         run: |
-          cd examples/wrapper-components/react-javascript
+          cd examples/wrapper-components/react-vite-js
           jq --arg VERSION "${{ needs.stencil-library-release.outputs.VERSION }}" '.dependencies["@infineon/infineon-design-system-react"] = $VERSION' package.json > package.json.tmp && mv package.json.tmp package.json
 
       - name: Install and Build
         run: |
-          cd examples/wrapper-components/react-javascript
+          cd examples/wrapper-components/react-vite-js
           npm i
           npm install @infineon/infineon-design-system-stencil@$VERSION
           npm run build
@@ -173,7 +198,7 @@ jobs:
       - 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.
+          folder: examples/wrapper-components/react-vite-js/dist/ # The folder the action should deploy.
           target-folder: react-example
           clean-exclude: |
             angular-example/
@@ -205,8 +230,9 @@ jobs:
         run: |
           cd packages/components-angular
           jq --arg VERSION "${{ needs.stencil-library-release.outputs.VERSION }}" '.dependencies["@infineon/infineon-design-system-angular"] = $VERSION' package.json > package.json.tmp && mv package.json.tmp package.json
+          cd projects/component-library
+          jq --arg VERSION "${{ needs.stencil-library-release.outputs.VERSION }}" '.peerDependencies["@infineon/infineon-design-system-stencil"] = $VERSION' package.json > package.json.tmp && mv package.json.tmp package.json      
 
-  
       - name: Install and Build
         run: |
           cd packages/components-angular

diff --git a/.github/workflows/shipit_pr_and_example_apps_deployment.yml b/.github/workflows/shipit_pr_and_example_apps_deployment.yml
@@ -33,13 +33,27 @@ jobs:
       - name: Install jq
         run: sudo apt-get update && sudo apt-get install -y jq
 
-      - name: Install dependencies for all packages, build and deploy Stencil core package
+      - 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 install --scope=@infineon/infineon-design-system-stencil
+        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"
@@ -61,11 +75,6 @@ jobs:
           sleep 10s
         shell: bash
 
-
-      - name: Clear NPM cache
-        if: steps.build.outputs.SKIP_REMAINING == 'false'
-        run: npm cache clean --force
-
       - name: Update Dependencies in Angular, Vue and React packages
         if: steps.build.outputs.SKIP_REMAINING == 'false'
         id: update-wrapper-dependencies
@@ -82,8 +91,9 @@ jobs:
           # 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 ../../../../
+          cd ../../
 
           # Update Vue package
           cd packages/components-vue
@@ -185,13 +195,13 @@ jobs:
 
       - name: Update package.json with canary version
         run: |
-          cd examples/wrapper-components/react-javascript
+          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-javascript
+          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
@@ -203,7 +213,7 @@ jobs:
         uses: rossjrw/pr-preview-action@v1
         id: preview
         with:
-          source-dir: ./examples/wrapper-components/react-javascript/build
+          source-dir: ./examples/wrapper-components/react-vite-js/dist
           umbrella-dir: pr-preview-react-example
           token: ${{ secrets.GH_TOKEN }}
 
@@ -235,7 +245,7 @@ jobs:
         run: |
           cd packages/components-angular
           npm install
-          npm install @infineon/infineon-design-system-stencil@$CANARY_VERSION
+          # npm install @infineon/infineon-design-system-stencil@$CANARY_VERSION
           npm run build my-app
 
       - name: Deploy preview

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -18,18 +18,18 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0 # fetch all tags for ship-it
-      - name: Clean working directory
-        run: git clean -fdx
 
       - name: Use Node.js 18.x
         uses: actions/setup-node@v4
         with:
           node-version: 18
           registry-url: "https://registry.npmjs.org"
 
-      - name: Run tests # releasing as a github npm package
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GH_TOKEN }}
-        run: | 
-          npm install
+        run: |
           npm run test
diff --git a/examples/wrapper-components/react-javascript/package.json b/examples/wrapper-components/react-javascript/package.json
@@ -2,6 +2,7 @@
   "name": "react-javascript",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@infineon/infineon-design-system-react": "25.0.0--canary.1441.ca9dec8363140ebe58dae80cfc492b4bbe42f2da.0",
     "@testing-library/jest-dom": "^5.16.5",

diff --git a/examples/wrapper-components/react-javascript/public/logo192.png b/examples/wrapper-components/react-javascript/public/logo192.png
diff --git a/examples/wrapper-components/react-javascript/public/logo512.png b/examples/wrapper-components/react-javascript/public/logo512.png
diff --git a/examples/wrapper-components/react-javascript/src/App.js b/examples/wrapper-components/react-javascript/src/App.js
@@ -1,39 +1,39 @@
 import './App.scss';
-import Alert from './components/Alert/Alert'
-import Link from './components/Link/Link';
-import Button from './components/Button/button';
-import TextField from './components/TextField/TextField';
-import ProgressBar from './components/ProgressBar/ProgressBar';
-import SearchBar from './components/SearchBar/SearchBar';
-import Accordion from './components/Accordion/Accordion';
-import RadioButton from './components/RadioButton/RadioButton';
-import Sidebar from './components/Sidebar/Sidebar'
-import NumberIndicator from './components/NumberIndicator/NumberIndicator'
-import Spinner from './components/Spinner/Spinner'
-import Checkbox from './components/Checkbox/Checkbox';
-import Navbar from './components/Navbar/Navbar';
-import SearchField from './components/SearchField/SearchField';
-import IconButton from './components/IconButton/IconButton';
-import Tabs from './components/Tabs/Tabs';
-import Tag from './components/Tag/Tag';
-import Switch from './components/Switch/Switch';
-import Card from './components/Card/Card';
-import Dropdown from './components/Dropdown/Dropdown';
-import DatePicker from './components/DatePicker/DatePicker';
-import Tooltip from './components/Tooltip/Tooltip';
-import SingleSelect from './components/SingleSelect/SingleSelect';
-import MultiSelect from './components/MultiSelect/MultiSelect';
-import Pagination from './components/Pagination/Pagination';
-import BasicTable from './components/BasicTable/BasicTable';
-import Breadcrumbs from './components/Breadcrumbs/Breadcrumbs';
-import Modal from './components/Modal/Modal';
-import Badge from './components/Badge/Badge'
-import Footer from './components/Footer/Footer'
-import Icon from './components/Icon/Icon';
-import Slider from './components/Slider/Slider'
-import Status from './components/Status/Status'
-import Chip from './components/Chip/Chip'
-import Stepper from './components/Stepper/Stepper';
+import Alert from './components/Alert/Alert.js'
+import Link from './components/Link/Link.js';
+import Button from './components/Button/button.js';
+import TextField from './components/TextField/TextField.js';
+import ProgressBar from './components/ProgressBar/ProgressBar.js';
+import SearchBar from './components/SearchBar/SearchBar.js';
+import Accordion from './components/Accordion/Accordion.js';
+import RadioButton from './components/RadioButton/RadioButton.js';
+import Sidebar from './components/Sidebar/Sidebar.js';
+import NumberIndicator from './components/NumberIndicator/NumberIndicator.js'
+import Spinner from './components/Spinner/Spinner.js';
+import Checkbox from './components/Checkbox/Checkbox.js';
+import Navbar from './components/Navbar/Navbar.js';
+import SearchField from './components/SearchField/SearchField.js';
+import IconButton from './components/IconButton/IconButton.js';
+import Tabs from './components/Tabs/Tabs.js';
+import Tag from './components/Tag/Tag.js';
+import Switch from './components/Switch/Switch.js';
+import Card from './components/Card/Card.js';
+import Dropdown from './components/Dropdown/Dropdown.js';
+import DatePicker from './components/DatePicker/DatePicker.js';
+import Tooltip from './components/Tooltip/Tooltip.js';
+import SingleSelect from './components/SingleSelect/SingleSelect.js';
+import MultiSelect from './components/MultiSelect/MultiSelect.js';
+import Pagination from './components/Pagination/Pagination.js';
+import BasicTable from './components/BasicTable/BasicTable.js';
+import Breadcrumbs from './components/Breadcrumbs/Breadcrumbs.js';
+import Modal from './components/Modal/Modal.js';
+import Badge from './components/Badge/Badge.js';
+import Footer from './components/Footer/Footer.js'
+import Icon from './components/Icon/Icon.js';
+import Slider from './components/Slider/Slider.js'
+import Status from './components/Status/Status.js'
+import Chip from './components/Chip/Chip.js'
+import Stepper from './components/Stepper/Stepper.js';
 
 
 function App() {

diff --git a/examples/wrapper-components/react-javascript/src/components/Accordion/Accordion.js b/examples/wrapper-components/react-javascript/src/components/Accordion/Accordion.js
@@ -1,6 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { IfxAccordion, IfxButton } from '@infineon/infineon-design-system-react';
-import { IfxAccordionItem } from '@infineon/infineon-design-system-react';
+import { IfxAccordion, IfxAccordionItem, IfxButton } from '@infineon/infineon-design-system-react';
 
 function Accordion() {
 

diff --git a/examples/wrapper-components/react-javascript/src/index.js b/examples/wrapper-components/react-javascript/src/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 // import './index.scss';
-import reportWebVitals from './reportWebVitals';
+import reportWebVitals from './reportWebVitals.js';
 import { defineCustomElements } from '@infineon/infineon-design-system-react';
-import App from './App';
-import ErrorBoundary from './ErrorBoundary';
+import App from './App.js';
+import ErrorBoundary from './ErrorBoundary.js';
 
 defineCustomElements();
 
@@ -17,7 +17,6 @@ root.render(
   </React.StrictMode>
 );
 
-reportWebVitals();
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

diff --git a/examples/wrapper-components/react-typescript/.eslintrc.cjs b/examples/wrapper-components/react-typescript/.eslintrc.cjs