FEC-294: update NPM package publishing setup

.changeset/eighty-baths-work.md

@@ -0,0 +1,105 @@
+---
+'@commercetools-uikit/design-system': patch
+'@commercetools-local/generator-package-json': patch
+'@commercetools-local/generator-readme': patch
+'@commercetools-uikit/calendar-time-utils': patch
+'@commercetools-uikit/calendar-utils': patch
+'@commercetools-uikit/accessible-hidden': patch
+'@commercetools-uikit/avatar': patch
+'@commercetools-uikit/accessible-button': patch
+'@commercetools-uikit/flat-button': patch
+'@commercetools-uikit/icon-button': patch
+'@commercetools-uikit/link-button': patch
+'@commercetools-uikit/primary-button': patch
+'@commercetools-uikit/secondary-button': patch
+'@commercetools-uikit/secondary-icon-button': patch
+'@commercetools-uikit/card': patch
+'@commercetools-uikit/collapsible': patch
+'@commercetools-uikit/collapsible-motion': patch
+'@commercetools-uikit/collapsible-panel': patch
+'@commercetools-uikit/constraints': patch
+'@commercetools-uikit/data-table': patch
+'@commercetools-uikit/data-table-manager': patch
+'@commercetools-uikit/dropdown-menu': patch
+'@commercetools-uikit/field-errors': patch
+'@commercetools-uikit/field-label': patch
+'@commercetools-uikit/field-warnings': patch
+'@commercetools-uikit/async-creatable-select-field': patch
+'@commercetools-uikit/async-select-field': patch
+'@commercetools-uikit/creatable-select-field': patch
+'@commercetools-uikit/date-field': patch
+'@commercetools-uikit/date-range-field': patch
+'@commercetools-uikit/date-time-field': patch
+'@commercetools-uikit/localized-multiline-text-field': patch
+'@commercetools-uikit/localized-text-field': patch
+'@commercetools-uikit/money-field': patch
+'@commercetools-uikit/multiline-text-field': patch
+'@commercetools-uikit/number-field': patch
+'@commercetools-uikit/password-field': patch
+'@commercetools-uikit/radio-field': patch
+'@commercetools-uikit/search-select-field': patch
+'@commercetools-uikit/select-field': patch
+'@commercetools-uikit/text-field': patch
+'@commercetools-uikit/time-field': patch
+'@commercetools-uikit/filters': patch
+'@commercetools-uikit/grid': patch
+'@commercetools-uikit/icons': patch
+'@commercetools-uikit/async-creatable-select-input': patch
+'@commercetools-uikit/async-select-input': patch
+'@commercetools-uikit/checkbox-input': patch
+'@commercetools-uikit/creatable-select-input': patch
+'@commercetools-uikit/date-input': patch
+'@commercetools-uikit/date-range-input': patch
+'@commercetools-uikit/date-time-input': patch
+'@commercetools-uikit/input-utils': patch
+'@commercetools-uikit/localized-money-input': patch
+'@commercetools-uikit/localized-multiline-text-input': patch
+'@commercetools-uikit/localized-rich-text-input': patch
+'@commercetools-uikit/localized-text-input': patch
+'@commercetools-uikit/money-input': patch
+'@commercetools-uikit/multiline-text-input': patch
+'@commercetools-uikit/number-input': patch
+'@commercetools-uikit/password-input': patch
+'@commercetools-uikit/radio-input': patch
+'@commercetools-uikit/rich-text-input': patch
+'@commercetools-uikit/rich-text-utils': patch
+'@commercetools-uikit/search-select-input': patch
+'@commercetools-uikit/search-text-input': patch
+'@commercetools-uikit/select-input': patch
+'@commercetools-uikit/select-utils': patch
+'@commercetools-uikit/selectable-search-input': patch
+'@commercetools-uikit/text-input': patch
+'@commercetools-uikit/time-input': patch
+'@commercetools-uikit/toggle-input': patch
+'@commercetools-uikit/label': patch
+'@commercetools-uikit/link': patch
+'@commercetools-uikit/loading-spinner': patch
+'@commercetools-uikit/messages': patch
+'@commercetools-uikit/notifications': patch
+'@commercetools-uikit/pagination': patch
+'@commercetools-uikit/primary-action-dropdown': patch
+'@commercetools-uikit/progress-bar': patch
+'@commercetools-uikit/quick-filters': patch
+'@commercetools-uikit/spacings-inline': patch
+'@commercetools-uikit/spacings-inset': patch
+'@commercetools-uikit/spacings-inset-squish': patch
+'@commercetools-uikit/spacings-stack': patch
+'@commercetools-uikit/stamp': patch
+'@commercetools-uikit/tag': patch
+'@commercetools-uikit/text': patch
+'@commercetools-uikit/tooltip': patch
+'@commercetools-uikit/view-switcher': patch
+'@commercetools-uikit/hooks': patch
+'@commercetools-uikit/i18n': patch
+'@commercetools-uikit/localized-utils': patch
+'@commercetools-uikit/utils': patch
+'@commercetools-uikit/buttons': patch
+'@commercetools-uikit/fields': patch
+'@commercetools-uikit/inputs': patch
+'@commercetools-uikit/spacings': patch
+'@commercetools-frontend/ui-kit': patch
+'@commercetools-local/storybook': patch
+'visual-testing-app': patch
+---
+
+Adopt trusted publishing on NPM

.github/workflows/main.yml

@@ -12,6 +12,7 @@ on:
 
 permissions:
   contents: read
+  pull-requests: write  # Required for size-limit-action to comment on PRs
 
 jobs:
   build_lint_and_test:
@@ -70,14 +71,18 @@ jobs:
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
 
 
-      - name: Checking bundle size of visual testing app
+      - name: Set bundlewatch environment variables
+        id: bundlewatch
+        run: |
+          echo "repo_name=$(echo '${{ github.repository }}' | cut -d'/' -f2)" >> $GITHUB_OUTPUT
+        shell: bash
+
+      - name: Checking bundle size
         run: yarn bundlesize
-        # env:
-        # NOTE: it seems that currently bundlesize server is having problems
-        # resulting in status code 500. Because of that, the bundlesize script
-        # is not able to handle the response, resulting in the exit code command
-        # to be 0, which makes the test pass.
-        # To keep the bundlesize check, we avoid passing the token to the command.
-        # This results in the script to run and fail in case of error, but no status
-        # code is reported to the github PR.
-        #   BUNDLESIZE_GITHUB_TOKEN: ${{ secrets.BUNDLESIZE_GITHUB_TOKEN }}
+        env:
+          BUNDLEWATCH_GITHUB_TOKEN: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}
+          CI_REPO_OWNER: ${{ github.repository_owner }}
+          CI_REPO_NAME: ${{ steps.bundlewatch.outputs.repo_name }}
+          CI_COMMIT_SHA: ${{ github.sha }}
+          CI_BRANCH: ${{ github.ref_name }}
+          CI_PULL_REQUEST_NUMBER: ${{ github.event.pull_request.number }}

.github/workflows/release.yml

@@ -7,6 +7,7 @@ on:
 
 permissions:
   id-token: write
+  contents: read
 
 jobs:
   release:
@@ -31,14 +32,20 @@ jobs:
           token: ${{ steps.generate_github_token.outputs.token }}
 
       - name: Setup Node (uses version in .nvmrc)
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v6
         with:
           node-version-file: '.nvmrc'
 
       - name: Get yarn cache
         id: yarn-cache
         run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
 
+
+      - name: Verify npm version
+        run: |
+          npm --version
+          # Ensure latest npm is installed for trusted publishing (OIDC)
+
       - uses: actions/cache@v4
         with:
           path: ${{ steps.yarn-cache.outputs.dir }}
@@ -49,16 +56,6 @@ jobs:
       - name: Install dependencies
         run: yarn install --immutable
 
-      - name: Creating .npmrc
-        run: |
-          cat << EOF > "$HOME/.npmrc"
-            provenance=true
-            email=npmjs@commercetools.com
-            //registry.npmjs.org/:_authToken=$NPM_TOKEN
-          EOF
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
       - name: Building packages
         run: yarn build
 

.nvmrc

@@ -1 +1 @@
-22
+24

package.json

@@ -30,7 +30,7 @@
     "test:bundle": "jest --config jest.bundle.config.js",
     "test:visual": "jest --config jest.visual.config.js --runInBand",
     "vrt:components": "percy exec -- yarn test:visual",
-    "bundlesize": "bundlesize",
+    "bundlesize": "bundlewatch --config bundlesize.config.json",
     "test:bundle:watch": "jest --config jest.bundle.config.js --watch",
     "changeset": "changeset",
     "changeset:version-and-format": "changeset version && yarn prettier --write --parser json '**/package.json' && YARN_ENABLE_IMMUTABLE_INSTALLS=false yarn install",
@@ -94,7 +94,7 @@
     "got": "14.5.0"
   },
   "engines": {
-    "node": ">=22",
+    "node": ">=24",
     "npm": ">=6",
     "yarn": ">=3"
   },
@@ -136,7 +136,7 @@
     "@typescript-eslint/parser": "8.46.0",
     "babel-jest": "29.7.0",
     "browserslist": "4.26.3",
-    "bundlesize": "0.18.2",
+    "bundlewatch": "^0.4.1",
     "colors": "1.4.0",
     "commander": "^13.1.0",
     "conventional-changelog-cli": "5.0.0",