ui-soxo-bootstrap-core 2.6.40-dev.1 → 2.6.40-dev.12

package/PUBLISHING.md

@@ -0,0 +1,333 @@
+# Publishing `ui-soxo-bootstrap-core` to npm
+
+Complete guide for developers.
+
+---
+
+## Table of contents
+
+1. [Quick reference](#quick-reference)
+2. [Branch & version strategy](#branch--version-strategy)
+3. [`npm version` keys explained](#npm-version-keys-explained)
+4. [Publishing a dev pre-release (from `develop`)](#publishing-a-dev-pre-release-from-develop)
+5. [Publishing a stable release (from `master`)](#publishing-a-stable-release-from-master)
+6. [Verifying & installing](#verifying--installing)
+7. [Rules & dos / don'ts](#rules--dos--donts)
+8. [How auth works](#how-auth-works)
+9. [Troubleshooting](#troubleshooting)
+
+---
+
+## Quick reference
+
+| Branch    | Version format    | npm dist-tag | Example          | Who installs                          |
+| --------- | ----------------- | ------------ | ---------------- | ------------------------------------- |
+| `develop` | `X.Y.Z-dev.N`     | `dev`        | `2.6.40-dev.11`  | Devs testing pre-releases             |
+| `master`  | `X.Y.Z`           | `latest`     | `2.6.40`         | Default install for everyone          |
+
+---
+
+## Branch & version strategy
+
+```
+feature branches  ──►  develop  ──►  master
+                       (dev tag)    (latest tag)
+```
+
+- All day-to-day work merges into `develop`.
+- Each meaningful commit on `develop` can be published as a `-dev.N` pre-release for QA / integration testing.
+- When the code is ready for production, **merge `develop` → `master`**, then bump and tag a stable version on `master`.
+- `master` is the source of `latest` on npm. End users get this by default.
+
+---
+
+## `npm version` keys explained
+
+`npm version <key>` bumps `package.json`, creates a commit, **and** creates a git tag in one shot. Use it instead of editing `package.json` by hand.
+
+### Stable bumps (use on `master`)
+
+| Key       | From    | To       | When to use                                       |
+| --------- | ------- | -------- | ------------------------------------------------- |
+| `patch`   | 2.6.40  | 2.6.41   | Bug fixes only, no API change                     |
+| `minor`   | 2.6.40  | 2.7.0    | New features, backwards-compatible                |
+| `major`   | 2.6.40  | 3.0.0    | Breaking changes (consumers must update code)     |
+
+```bash
+npm version patch   # → 2.6.41
+npm version minor   # → 2.7.0
+npm version major   # → 3.0.0
+```
+
+### Pre-release bumps (use on `develop`)
+
+| Key                                | From            | To                  | When to use                                 |
+| ---------------------------------- | --------------- | ------------------- | ------------------------------------------- |
+| `prerelease --preid=dev`           | 2.6.40-dev.10   | 2.6.40-dev.11       | Another iteration of the current pre-release |
+| `prepatch --preid=dev`             | 2.6.40          | 2.6.41-dev.0        | Start pre-releases for the next patch       |
+| `preminor --preid=dev`             | 2.6.40          | 2.7.0-dev.0         | Start pre-releases for the next minor       |
+| `premajor --preid=dev`             | 2.6.40          | 3.0.0-dev.0         | Start pre-releases for the next major       |
+
+```bash
+npm version prerelease --preid=dev   # → 2.6.40-dev.11 (most common on develop)
+npm version preminor   --preid=dev   # → 2.7.0-dev.0   (kick off next minor cycle)
+```
+
+### Explicit version
+
+If you know the exact string you want:
+
+```bash
+npm version 2.6.40-dev.12
+npm version 2.7.0
+```
+
+### Useful flags
+
+| Flag                  | Effect                                                         |
+| --------------------- | -------------------------------------------------------------- |
+| `--no-git-tag-version` | Bump `package.json` only — no commit, no tag (rarely needed)   |
+| `-m "Release %s"`     | Custom commit message; `%s` is replaced with the new version   |
+
+---
+
+## Publishing a dev pre-release (from `develop`)
+
+Use this for every internal QA / integration build.
+
+### Step 1 — Make sure `develop` is up to date
+
+```bash
+git checkout develop
+git pull
+```
+
+### Step 2 — Bump the version
+
+Pick **one**:
+
+```bash
+# Common case: next dev iteration of current version
+npm version prerelease --preid=dev
+# Example: 2.6.40-dev.10 → 2.6.40-dev.11
+```
+
+```bash
+# Starting a new patch/minor/major cycle
+npm version preminor --preid=dev
+# Example: 2.6.40 → 2.7.0-dev.0
+```
+
+```bash
+# Or explicit
+npm version 2.6.40-dev.12
+```
+
+`npm version` automatically:
+- Updates `package.json`
+- Creates a commit `2.6.40-dev.11`
+- Creates a git tag `v2.6.40-dev.11`
+
+### Step 3 — Push commit & tag
+
+```bash
+git push origin develop --follow-tags
+```
+
+### Step 4 — Create a GitHub Release
+
+1. Go to https://github.com/soxo-tech/bootstrap-core/releases
+2. Click **Draft a new release**
+3. **Choose a tag** → pick the tag you just pushed (e.g. `v2.6.40-dev.11`)
+4. Title: same as the tag (`v2.6.40-dev.11`)
+5. Description: short summary of what's in this build (optional but recommended)
+6. ✅ Tick **Set as a pre-release** (so it's flagged as not stable)
+7. Click **Publish release**
+
+GitHub Actions will run the `npm-publish.yml` workflow and publish to npm with `dist-tag: dev`.
+
+### Step 5 — Verify
+
+Wait ~1–2 minutes, then:
+
+```bash
+npm view ui-soxo-bootstrap-core dist-tags
+# Expect: { latest: '<some stable>', dev: '2.6.40-dev.11' }
+```
+
+---
+
+## Publishing a stable release (from `master`)
+
+Use this when a `develop` snapshot has been QA'd and is ready for production.
+
+### Step 1 — Merge `develop` into `master`
+
+```bash
+git checkout master
+git pull
+git merge develop
+git push
+```
+
+Resolve any conflicts as you normally would. Don't squash unless you have a reason to.
+
+### Step 2 — Bump the version on `master`
+
+Pick the bump that matches the change scope (relative to the last **stable** version on npm):
+
+```bash
+npm version patch    # 2.6.40 → 2.6.41  (bug fixes)
+npm version minor    # 2.6.40 → 2.7.0   (new features)
+npm version major    # 2.6.40 → 3.0.0   (breaking changes)
+```
+
+This creates a commit and a tag like `v2.6.41` (no `-dev` suffix).
+
+### Step 3 — Push commit & tag
+
+```bash
+git push origin master --follow-tags
+```
+
+### Step 4 — Create a GitHub Release
+
+1. Go to https://github.com/soxo-tech/bootstrap-core/releases
+2. **Draft a new release**
+3. **Choose a tag** → pick the stable tag (e.g. `v2.6.41`)
+4. Title: `v2.6.41`
+5. Description: changelog — what's new, what's fixed, any breaking changes
+6. ❌ Do **not** tick "Set as a pre-release"
+7. Click **Publish release**
+
+GitHub Actions publishes to npm with `dist-tag: latest`.
+
+### Step 5 — Verify
+
+```bash
+npm view ui-soxo-bootstrap-core dist-tags
+# Expect: { latest: '2.6.41', dev: '...' }
+```
+
+### Step 6 (optional but recommended) — Sync `develop`
+
+After a stable release, fast-forward `develop` to include the new version commit so the next dev cycle starts from the right place:
+
+```bash
+git checkout develop
+git merge master
+git push
+```
+
+---
+
+## Verifying & installing
+
+### Check what's published
+
+```bash
+npm view ui-soxo-bootstrap-core dist-tags
+npm view ui-soxo-bootstrap-core versions --json
+```
+
+### Install in another project
+
+```bash
+# Latest stable (from master)
+npm install ui-soxo-bootstrap-core
+
+# Latest dev pre-release (from develop)
+npm install ui-soxo-bootstrap-core@dev
+
+# Specific version
+npm install ui-soxo-bootstrap-core@2.6.40-dev.11
+```
+
+---
+
+## Rules & dos / don'ts
+
+| ✅ Do                                                  | ❌ Don't                                          |
+| ----------------------------------------------------- | ------------------------------------------------ |
+| Use `npm version` to bump (it tags atomically)        | Edit `package.json` version by hand              |
+| Tag matches `package.json` exactly                    | Publish manually from your laptop                |
+| `develop` → only `-dev.N` versions                    | Tag a stable `2.6.40` from `develop`             |
+| `master` → only stable versions                       | Tag a `-dev` version from `master`               |
+| Push with `--follow-tags`                             | Forget to push the tag (Release won't find it)   |
+| Create a GitHub Release to trigger publish            | Reuse / move existing tags                       |
+
+---
+
+## How auth works
+
+Publishing uses **OIDC trusted publishing** — no `NPM_TOKEN` secret to rotate.
+
+When the workflow runs:
+1. GitHub Actions issues a short-lived OIDC token identifying the workflow + repo + ref.
+2. The npm CLI exchanges that token for a one-time publish credential.
+3. npm validates against the Trusted Publisher config on npmjs.com (`soxo-tech/bootstrap-core` + `npm-publish.yml`).
+4. Publish succeeds.
+
+If you ever need to inspect or change auth:
+- https://www.npmjs.com/package/ui-soxo-bootstrap-core/access — Trusted Publisher config
+- [.github/workflows/npm-publish.yml](.github/workflows/npm-publish.yml) — the workflow
+
+---
+
+## Troubleshooting
+
+### "Release tag does not match `package.json` version"
+
+The workflow checks that the git tag is exactly `v<package.json version>`. If they don't match, the workflow fails fast.
+
+**Fix:** Delete the Release & tag, run `npm version <correct>` to bump cleanly, push, and re-create the Release.
+
+### Workflow runs but `npm publish` fails with 404
+
+Likely auth issue. Check:
+1. **Trusted Publisher exists** on https://www.npmjs.com/package/ui-soxo-bootstrap-core/access
+2. **Repository** field is `bootstrap-core` (not `soxo-bootstrap-core`)
+3. **Workflow filename** is `npm-publish.yml` (just the filename, not the path)
+4. **Organization or user** is `soxo-tech`
+
+### Workflow fails with 422 "Unsupported source repository visibility: private"
+
+Someone added `--provenance` to the publish step. Provenance requires a public repo. Remove `--provenance` from the `npm publish` line in [.github/workflows/npm-publish.yml](.github/workflows/npm-publish.yml).
+
+### Version already exists on npm
+
+You can't republish the same version. Bump again and create a new Release.
+
+### Tag pushed but no Release auto-publishes
+
+The workflow trigger is `on: release: [created]` — pushing a tag alone doesn't publish. You must **create a Release on GitHub** for the workflow to fire.
+
+---
+
+## Diagram of the full flow
+
+```
+   ┌─────────────────┐
+   │  feature/*       │
+   └────────┬─────────┘
+            │ merge
+            ▼
+   ┌─────────────────┐
+   │  develop          │
+   │                   │ ── npm version prerelease --preid=dev
+   │                   │ ── git push --follow-tags
+   │                   │ ── GitHub Release (pre-release)
+   │                   │     ↓
+   │                   │  workflow publishes  →  npm @dev
+   └────────┬─────────┘
+            │ merge (when stable)
+            ▼
+   ┌─────────────────┐
+   │  master           │
+   │                   │ ── npm version patch | minor | major
+   │                   │ ── git push --follow-tags
+   │                   │ ── GitHub Release (stable)
+   │                   │     ↓
+   │                   │  workflow publishes  →  npm @latest
+   └─────────────────┘
+```

package/babel.config.js

@@ -1,3 +1,3 @@
-module.exports = {
-    "presets": ["@babel/preset-env", "@babel/preset-react"]
+module.exports = {
+    "presets": ["@babel/preset-env", "@babel/preset-react"]
 };

package/core/components/component-loader/component-loader.js

@@ -1,125 +1,125 @@
-/**
- * 
- * Component Loader is ins
- * 
- */
-
-
-import React, { Suspense, useState, useEffect } from "react";
-
-// import { BrowserRouter } from "react-router-dom";
-
-// import "./index.css";
-
-import { ComponentWrapper } from "../../components/component-wrapper/component-wrapper";
-
-
-
-const App = () => {
-
-    // Configuration to store the env of the application
-    const [configuration, setConfiguration] = useState({});
-
-    useEffect(() => {
-
-        loadConfiguration();
-
-    }, [])
-
-    /**
-     * Load the configuration 
-     */
-    async function loadConfiguration() {
-
-
-        let domain = "qms-dubai";
-        // let domain = window.location.host.split(".")[0];
-
-        const result = await fetch(`https://hgrntky25ejsmw3zobq3u6lk3q0tploo.lambda-url.ap-northeast-1.on.aws/?domain=${domain}`).then((result) => {
-            return result.json();
-        })
-
-        if (result.length && result[0].other_details) {
-
-            let appConfiguration = JSON.parse(result[0].other_details);
-
-            console.log(appConfiguration);
-
-
-
-            console.log("Starting application with ", appConfiguration);
-
-            window.process = {
-                env: appConfiguration
-            }
-
-            // Setting the title
-            document.title = appConfiguration.REACT_APP_WEBSITE_NAME
-
-            setConfiguration({
-                ...appConfiguration,
-            });
-
-        }
-    }
-
-    return (<ComponentLoader configuration={configuration} />)
-
-
-    // return (
-    //   <Suspense fallback={<div>Loading now...</div>}>
-
-    //     {/* Component Wrapper */}
-    //     <ComponentWrapper component={configuration} {...configuration} />
-    //     {/* Component Wrapper Ends */}
-
-    //   </Suspense>
-    // )
-};
-
-/**
- * Realizing the MFE setup can do not just load applications , 
- * It can also be used foro loading component on fly 
- * 
- */
-export function ComponentLoader({ configuration }) {
-
-
-    window.process = {
-        env: configuration
-    }
-
-    console.log('here 5.2',configuration);
-
-    let component = {
-        "url": "http://localhost:8085/remoteEntry.js",
-        // "url": "https://qms-soxo.web.app/remoteEntry.js",
-        // "url": "http://localhost:9090/remoteEntry.js",
-        // "url": configuration.REACT_APP_URL,
-        "scope": "Application",
-        // "scope": "ReportingUI",
-        "name": "Tokens",
-        "props": {
-            "props1": "propsvalue"
-        }
-    }
-
-    return (<>
-
-        <Suspense fallback={<div>Loading now...</div>}>
-
-            {/* Component Wrapper */}
-            <ComponentWrapper component={configuration} {...configuration} />
-            {/* Component Wrapper Ends */}
-
-        </Suspense>
-
-    </>)
-
-}
-
-
-
-export default App;
-
-
+/**
+ * 
+ * Component Loader is ins
+ * 
+ */
+
+
+import React, { Suspense, useState, useEffect } from "react";
+
+// import { BrowserRouter } from "react-router-dom";
+
+// import "./index.css";
+
+import { ComponentWrapper } from "../../components/component-wrapper/component-wrapper";
+
+
+
+const App = () => {
+
+    // Configuration to store the env of the application
+    const [configuration, setConfiguration] = useState({});
+
+    useEffect(() => {
+
+        loadConfiguration();
+
+    }, [])
+
+    /**
+     * Load the configuration 
+     */
+    async function loadConfiguration() {
+
+
+        let domain = "qms-dubai";
+        // let domain = window.location.host.split(".")[0];
+
+        const result = await fetch(`https://hgrntky25ejsmw3zobq3u6lk3q0tploo.lambda-url.ap-northeast-1.on.aws/?domain=${domain}`).then((result) => {
+            return result.json();
+        })
+
+        if (result.length && result[0].other_details) {
+
+            let appConfiguration = JSON.parse(result[0].other_details);
+
+            console.log(appConfiguration);
+
+
+
+            console.log("Starting application with ", appConfiguration);
+
+            window.process = {
+                env: appConfiguration
+            }
+
+            // Setting the title
+            document.title = appConfiguration.REACT_APP_WEBSITE_NAME
+
+            setConfiguration({
+                ...appConfiguration,
+            });
+
+        }
+    }
+
+    return (<ComponentLoader configuration={configuration} />)
+
+
+    // return (
+    //   <Suspense fallback={<div>Loading now...</div>}>
+
+    //     {/* Component Wrapper */}
+    //     <ComponentWrapper component={configuration} {...configuration} />
+    //     {/* Component Wrapper Ends */}
+
+    //   </Suspense>
+    // )
+};
+
+/**
+ * Realizing the MFE setup can do not just load applications , 
+ * It can also be used foro loading component on fly 
+ * 
+ */
+export function ComponentLoader({ configuration }) {
+
+
+    window.process = {
+        env: configuration
+    }
+
+    console.log('here 5.2',configuration);
+
+    let component = {
+        "url": "http://localhost:8085/remoteEntry.js",
+        // "url": "https://qms-soxo.web.app/remoteEntry.js",
+        // "url": "http://localhost:9090/remoteEntry.js",
+        // "url": configuration.REACT_APP_URL,
+        "scope": "Application",
+        // "scope": "ReportingUI",
+        "name": "Tokens",
+        "props": {
+            "props1": "propsvalue"
+        }
+    }
+
+    return (<>
+
+        <Suspense fallback={<div>Loading now...</div>}>
+
+            {/* Component Wrapper */}
+            <ComponentWrapper component={configuration} {...configuration} />
+            {/* Component Wrapper Ends */}
+
+        </Suspense>
+
+    </>)
+
+}
+
+
+
+export default App;
+
+