ui-soxo-bootstrap-core 2.6.32-dev.7 → 2.6.32-dev.8

package/.github/workflows/npm-publish.yml

@@ -1,59 +1,40 @@
-name: Node.js Package
-
-on:
-  release:
-    types: [created]
-
-jobs:
-  publish-npm:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      id-token: write
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          registry-url: https://registry.npmjs.org/
-      - run: npm install -g npm@latest
-      - run: npm install
-
-      - name: Determine npm dist-tag
-        id: dist_tag
-        shell: bash
-        run: |
-          VERSION=$(node -p "require('./package.json').version")
-          echo "package.json version: $VERSION"
-          echo "release tag:          ${GITHUB_REF_NAME}"
-          if [[ "v${VERSION}" != "${GITHUB_REF_NAME}" ]]; then
-            echo "::error::Release tag '${GITHUB_REF_NAME}' does not match package.json version 'v${VERSION}'."
-            echo "::error::Bump the version with 'npm version' and re-create the release."
-            exit 1
-          fi
-          if [[ "$VERSION" == *-dev* ]]; then
-            echo "tag=dev" >> "$GITHUB_OUTPUT"
-            echo "Will publish with dist-tag: dev"
-          else
-            echo "tag=latest" >> "$GITHUB_OUTPUT"
-            echo "Will publish with dist-tag: latest"
-          fi
-
-      - name: Diagnose npm + OIDC environment
-        shell: bash
-        run: |
-          echo "--- versions ---"
-          node --version
-          npm --version
-          echo "--- OIDC env presence (must both be 'yes' for trusted publishing) ---"
-          echo "ACTIONS_ID_TOKEN_REQUEST_URL set:   ${ACTIONS_ID_TOKEN_REQUEST_URL:+yes}"
-          echo "ACTIONS_ID_TOKEN_REQUEST_TOKEN set: ${ACTIONS_ID_TOKEN_REQUEST_TOKEN:+yes}"
-          echo "--- effective .npmrc (user) ---"
-          cat ~/.npmrc 2>/dev/null || echo "(none)"
-          echo "--- effective .npmrc (project) ---"
-          cat .npmrc 2>/dev/null || echo "(none)"
-          echo "--- npm config (auth-related) ---"
-          npm config get registry
-          npm config get //registry.npmjs.org/:_authToken || true
-
-      - run: npm publish --provenance --access public --tag ${{ steps.dist_tag.outputs.tag }} --loglevel=verbose
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+      - run: npm install
+
+      - name: Determine npm dist-tag
+        id: dist_tag
+        shell: bash
+        run: |
+          VERSION=$(node -p "require('./package.json').version")
+          echo "package.json version: $VERSION"
+          echo "release tag:          ${GITHUB_REF_NAME}"
+          if [[ "v${VERSION}" != "${GITHUB_REF_NAME}" ]]; then
+            echo "::error::Release tag '${GITHUB_REF_NAME}' does not match package.json version 'v${VERSION}'."
+            echo "::error::Bump the version with 'npm version' and re-create the release."
+            exit 1
+          fi
+          if [[ "$VERSION" == *-dev* ]]; then
+            echo "tag=dev" >> "$GITHUB_OUTPUT"
+            echo "Will publish with dist-tag: dev"
+          else
+            echo "tag=latest" >> "$GITHUB_OUTPUT"
+            echo "Will publish with dist-tag: latest"
+          fi
+
+      - run: npm publish --access public --tag ${{ steps.dist_tag.outputs.tag }}
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/DEVELOPER_GUIDE.md

@@ -17,7 +17,7 @@ Incorrect versioning or incorrect tags will break the publish pipeline — follo
 - Publishing via GitHub Release UI
 - How GitHub Action Detects Release Type
 - Summary Table
-- CI/CD Authentication (Trusted Publishing)
+- CI/CD Authentication (Granular Access Token)
 - Common Mistakes & Fixes
 
 ---
@@ -258,10 +258,10 @@ npm publish --tag dev
 
 The workflow reads the `version` field from `package.json` at publish time:
 
-| Condition                    | Command                                                 | Result                             |
-| ---------------------------- | ------------------------------------------------------- | ---------------------------------- |
-| Version contains `-dev`      | `npm publish --provenance --access public --tag dev`    | Publishes to the `dev` dist-tag    |
-| Version has no `-dev` suffix | `npm publish --provenance --access public --tag latest` | Publishes to the `latest` dist-tag |
+| Condition                    | Command                                    | Result                             |
+| ---------------------------- | ------------------------------------------ | ---------------------------------- |
+| Version contains `-dev`      | `npm publish --access public --tag dev`    | Publishes to the `dev` dist-tag    |
+| Version has no `-dev` suffix | `npm publish --access public --tag latest` | Publishes to the `latest` dist-tag |
 
 The workflow also enforces that the GitHub release tag matches `v<version>` from `package.json` and fails the run immediately if they diverge — this prevents the most common publish failure described below.
 
@@ -281,9 +281,9 @@ The workflow also enforces that the GitHub release tag matches `v<version>` from
 
 ---
 
-# 🔐 CI/CD Authentication (Trusted Publishing)
+# 🔐 CI/CD Authentication (Granular Access Token)
 
-As of npm's 2025 policy changes, classic automation tokens (`NPM_TOKEN`) are deprecated. This repo now authenticates to npm via **OIDC Trusted Publishing** — GitHub Actions exchanges a short-lived OIDC token for a publish token at run time, so **no secret is stored in the repository**.
+As of npm's 2025 policy changes, **classic automation tokens** (`npm_xxx` legacy tokens) are deprecated. This repo authenticates to npm using a **Granular Access Token (GAT)** — npm's current recommended token type for CI/CD. The token is stored as a GitHub repository secret named `NPM_TOKEN`.
 
 ## What this means for developers
 
@@ -291,24 +291,34 @@ Nothing. You still follow the same flow: `npm version` → push tag → create G
 
 ## What this means for maintainers
 
-The first-time setup on npmjs.com must be done once per package:
+The first-time setup must be done once per package:
 
-1. Log in to [npmjs.com](https://www.npmjs.com) → open the package (`ui-soxo-bootstrap-core`) → **Settings**.
-2. Under **Trusted Publisher**, click **Add trusted publisher** and fill in:
-   - Publisher: **GitHub Actions**
-   - Organization or user: `soxo-tech`
-   - Repository: `bootstrap-core`
-   - Workflow filename: `npm-publish.yml`
-   - Environment name: *(leave blank)*
-3. Save. Any old `NPM_TOKEN` repository secret can be removed.
+1. Log in to [npmjs.com](https://www.npmjs.com) as a user with publish rights to `ui-soxo-bootstrap-core`.
+2. Top-right avatar → **Access Tokens** → **Generate New Token** → **Granular Access Token**.
+3. Configure the token:
+   - **Name**: `ui-soxo-bootstrap-core CI publish`
+   - **Expiration**: 1 year (set a calendar reminder to rotate)
+   - **Packages and scopes**: Select **Only select packages and scopes** → choose `ui-soxo-bootstrap-core` → permission **Read and write**
+   - **IP allowlist**: leave blank (GitHub Actions runner IPs rotate)
+4. Generate and **copy the token immediately** — npm only shows it once.
+5. In GitHub: repo **Settings** → **Secrets and variables** → **Actions** → **New repository secret**:
+   - Name: `NPM_TOKEN`
+   - Secret: paste the token from step 4
+
+When the token expires, repeat steps 2–5 and replace the `NPM_TOKEN` secret.
 
 ## Runtime requirements
 
-The workflow runs on Node 20 and upgrades npm to the latest CLI (`npm install -g npm@latest`) because OIDC trusted publishing requires **npm ≥ 11.5.1**. The `--provenance` flag attaches a verifiable build attestation to every published version, visible on the npmjs.com package page.
+The workflow runs on Node 20. The token is passed to `npm publish` via the `NODE_AUTH_TOKEN` environment variable, which `actions/setup-node` wires into `~/.npmrc` automatically when `registry-url` is set.
 
-## If publish fails with `403 Forbidden` or `ENEEDAUTH`
+## If publish fails
 
-The trusted publisher config on npmjs.com no longer matches the workflow. Check that org, repo, and workflow filename match exactly — including case.
+| Symptom | Likely cause | Fix |
+| --- | --- | --- |
+| `404 Not Found - PUT https://registry.npmjs.org/...` with no auth-related notices | `NPM_TOKEN` secret is missing, expired, or revoked | Re-create the GAT (steps 2–5) and re-publish |
+| `403 Forbidden` | The GAT exists but doesn't have write access to this package | Recreate the token with **Read and write** on `ui-soxo-bootstrap-core` |
+| `EOTP` / `ENEEDOTP` | The npm user enforces 2FA on writes and the token isn't allowed to bypass it | Recreate as a GAT (GATs bypass 2FA for their selected packages by design) |
+| `Tag does not match package.json version` (workflow error) | Release tag and `package.json` version diverge | Always bump with `npm version` — never tag manually |
 
 ---
 

package/core/lib/components/global-header/global-header.js

@@ -79,6 +79,7 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
   }, []);
   useEffect(() => {}, [state.theme]);
   return (
+    <>
     <div
       className={`global-header ${process.env.REACT_APP_THEME}  ${isConnected && !kiosk ? 'connected' : ''}`}
       style={{
@@ -236,7 +237,8 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
         </div>
         {/* Right Section of the Component Loader Ends */}
       </div>
-      {licAlert && licenseData && (
+    </div>
+     {licAlert && licenseData && (
         <div
           style={{
             top: 0,
@@ -249,7 +251,7 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
           <LicenseAlert data={licenseData} />
         </div>
       )}
-    </div>
+   </>
   );
 }
 export default function GlobalHeader(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.32-dev.7",
+  "version": "2.6.32-dev.8",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"