@nuskin/nextgen-header 1.0.0-library-setup.1 → 1.1.0

package/package.json

@@ -1,16 +1,15 @@
 {
   "name": "@nuskin/nextgen-header",
-  "version": "1.0.0-library-setup.1",
+  "version": "1.1.0",
   "description": "Header micro-frontend and npm component library",
   "main": "package-dist/index.js",
   "module": "package-dist/index.mjs",
   "types": "package-dist/index.d.ts",
   "scripts": {
-    "start": "nodemon --watch src --ext js,jsx,css --delay 2 --exec \"yarn serve\"",
-    "serve": "yarn build && node server-launcher.js",
-    "build": "cross-env CMS_ENV=local NODE_ENV=production yarn build:server:dev && yarn build:client:dev",
-    "build-dev": "cross-env CMS_ENV=dev NODE_ENV=production yarn build:server:dev && cross-env CMS_ENV=dev NODE_ENV=production yarn build:client:dev",
-    "build-test": "cross-env CMS_ENV=test NODE_ENV=production yarn build:server:dev && cross-env CMS_ENV=test NODE_ENV=production yarn build:client:dev",
+    "start": "nodemon --watch src --ext js,jsx,css --delay 2 --exec \"yarn build && node server-launcher.js\"",
+    "build": "cross-env CMS_ENV=local yarn build:server:dev && yarn build:client:dev",
+    "build-dev": "cross-env CMS_ENV=dev yarn build:server:dev && cross-env CMS_ENV=dev yarn build:client:dev",
+    "build-test": "cross-env CMS_ENV=test yarn build:server:dev && cross-env CMS_ENV=test yarn build:client:dev",
     "build-prod": "cross-env CMS_ENV=prod NODE_ENV=production yarn build:server:prod && cross-env CMS_ENV=prod NODE_ENV=production yarn build:client:prod",
     "build:client:dev": "rimraf --glob dist/*.js dist/*.js.map dist/loadable-stats.json dist/index.html && yarn webpack --mode development --progress --config config/webpack.client.js",
     "build:client:prod": "rimraf --glob dist/*.js dist/*.js.map dist/loadable-stats.json dist/index.html && yarn webpack --mode production --progress --config config/webpack.client.js",
@@ -19,8 +18,7 @@
     "test": "jest",
     "integration-test": "echo 'Integration test not yet implemented'",
     "lint": "eslint src/ --ext .js,.jsx",
-    "build:package": "rimraf package-dist && tsup && shx cp src/library/index.d.ts package-dist/index.d.ts",
-    "prepublishOnly": "yarn build:package"
+    "build:package": "rimraf package-dist && webpack --mode production --config config/webpack.library.js && shx cp src/library/index.d.ts package-dist/index.d.ts"
   },
   "keywords": [
     "react",
@@ -58,8 +56,7 @@
     "contentstack": "^3.26.0",
     "prop-types": "^15.8.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^7.7.0"
+    "react-dom": "^18.2.0"
   },
   "engines": {
     "node": ">=24.0.0"
@@ -73,6 +70,8 @@
     "@loadable/babel-plugin": "^5.13.2",
     "@loadable/component": "^5.16.4",
     "@loadable/server": "^5.16.5",
+    "@nuskin/foundation-theme": "1.8.0",
+    "@nuskin/foundation-ui-components": "^2.2.0",
     "contentstack": "^3.26.2",
     "core-js": "^3.39.0",
     "cross-env": "7.0.3",
@@ -90,7 +89,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-gtm-module": "^2.0.11",
-    "react-router-dom": "^7.7.1",
     "regenerator-runtime": "0.14.1"
   },
   "devDependencies": {
@@ -115,12 +113,12 @@
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",
+    "mini-css-extract-plugin": "^2.9.2",
     "nodemon": "^3.1.14",
     "process": "^0.11.10",
     "rimraf": "5.0.8",
     "shx": "^0.4.0",
     "style-loader": "^3.3.0",
-    "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "webpack": "^5.88.0",
     "webpack-cli": "^5.1.0",

package/readme.md

@@ -7,6 +7,22 @@ This repository produces **two** deployables:
 
 The UI is intentionally minimal (`HeaderPlaceholder`). Replace it when navigation, Contentstack types, and analytics are defined.
 
+## Domain language (header UI)
+
+Shared vocabulary for Nu Skin header work—use these names in code, docs, and Contentstack discussions so everyone means the same region of the UI.
+
+![Domain language diagram for the Nu Skin header](docs/header-domain-language.png)
+
+| Term | Description |
+|------|-------------|
+| **Logo** | Brand mark (e.g. NU SKIN), top-left. |
+| **Utility bar** | Top-right strip: currency / language, Nu Skin Rewards, account (Sign Up / Sign In), cart with badge. |
+| **Search bar** | Product search field (e.g. “Product Search”). Kept **separate from the utility bar** so future features can be added between or around them without coupling. |
+| **Top navigation** | Primary horizontal category row under the logo (e.g. Devices, Beauty & Skincare, Health & Wellness). |
+| **Jump to** | Left column in the expanded mega-menu: quick links (e.g. Most Popular, Science, Kits & Bundles). |
+| **Categories** | Horizontal row inside the mega-menu that expresses the active hierarchy (e.g. Skincare → Concerns → Key ingredients). |
+| **Sub categories** | Vertical link lists under each **Categories** heading (e.g. Anti-Aging, Lines & Wrinkles, Dry Skin under Concerns). |
+
 ## Prerequisites
 
 - **Node.js 24+** (see `engines` in `package.json` and `.nvmrc` for `nvm` / `fnm`)
@@ -21,22 +37,27 @@ yarn install
 
 ## NPM library (`@nuskin/nextgen-header`)
 
-Install in a host application that already provides the peer dependencies (React 18, Emotion, React Router 7, Contentstack SDKs):
+Install in a host application that already provides the peer dependencies (React 18, Emotion, Contentstack SDKs):
 
 ```bash
 yarn add @nuskin/nextgen-header
 ```
 
+**Public export** (see [`src/library/index.js`](src/library/index.js)):
+
+| Export | Description |
+|--------|-------------|
+| **`Header`** | **`AppContainer`** styling plus **market/language** resolution (browser URL or explicit props; SSR via **`requestUrl`** in **`renderAndExtractContext`**). Renders the header placeholder inside. |
+
 **Example**
 
 ```jsx
-import {
-  HeaderPlaceholder,
-  Main,
-  getLocale,
-  getStackConfig,
-} from "@nuskin/nextgen-header";
+import { Header } from "@nuskin/nextgen-header";
 import "@nuskin/nextgen-header/index.css";
+
+// CSR: optional market/language; SSR: pass props or wire `requestUrl` in `renderAndExtractContext`.
+<Header />
+<Header market="US" language="en" />
 ```
 
 - **Exports** are defined in [`src/library/index.js`](src/library/index.js) (barrel for the published API).
@@ -49,15 +70,17 @@ import "@nuskin/nextgen-header/index.css";
 yarn build:package
 ```
 
-**Publish** (CI runs `yarn build:package` before `npm publish` via `prepublishOnly`; align with your org’s versioning and `yarn npm publish` / tags.)
+**Publish** (GitLab **release** / **pre-release** jobs run `yarn build:package` in `before_script` before publish; align with your org’s versioning and `yarn npm publish` / tags. For a local publish, run `yarn build:package` first.)
 
 ### Peer dependencies
 
-Declared in `package.json` under `peerDependencies`: `react`, `react-dom`, `prop-types`, `react-router-dom`, `@emotion/react`, `@emotion/styled`, Contentstack packages, and `contentstack`. Your app must install compatible versions.
+Declared in `package.json` under `peerDependencies`: `react`, `react-dom`, `prop-types`, `@emotion/react`, `@emotion/styled`, Contentstack packages, and `contentstack`. Your app must install compatible versions.
 
 ## Environment variables
 
-Dotenv files are loaded per **webpack** build via `CMS_ENV` (see `package.json` scripts): `.env.local`, `.env.dev`, `.env.test`, `.env.prod`.
+For the **webpack / MFE** build, dotenv files are loaded per build via `CMS_ENV` (see `package.json` scripts): `.env.local`, `.env.dev`, `.env.test`, `.env.prod`. The **npm library** does not expose these values on its public API; consumers still configure the usual `CONTENTSTACK_*` variables in their own environment so internal Contentstack helpers can run.
+
+### MFE / webpack (`CMS_ENV`)
 
 | Variable | Purpose |
 |----------|---------|
@@ -65,8 +88,7 @@ Dotenv files are loaded per **webpack** build via `CMS_ENV` (see `package.json`
 | `CONTENTSTACK_DELIVERY_TOKEN` | Delivery token |
 | `CONTENTSTACK_ENVIRONMENT` | Environment name |
 | `CONTENTSTACK_PREVIEW_TOKEN` | Preview token (Visual Builder / live preview) |
-| `CONTENTSTACK_HEADER_CONTENT_TYPE` | Content type UID for header entries (set when the model exists) |
-| `REACT_APP_GTM_KEY_DEV` / `REACT_APP_GTM_KEY_TEST` | Optional; used by `src/utils/datalayer.js` if present |
+| `REACT_APP_GTM_KEY` | Optional; used by `src/utils/datalayer.js` if present |
 
 `REACT_APP_BASENAME` is injected at build time from the client webpack config (static asset path segment).
 
@@ -75,8 +97,8 @@ Dotenv files are loaded per **webpack** build via `CMS_ENV` (see `package.json`
 | Command | Description |
 |---------|-------------|
 | `yarn start` | Rebuild and run the Express server (see `server-launcher.js`) |
-| `yarn build` | Production-oriented client + server **webpack** build (`CMS_ENV=local`) |
-| `yarn build:package` | **Library** build to `package-dist/` (tsup + types); required before `npm publish` |
+| `yarn build` | Client + server **webpack** build in **development** mode with `CMS_ENV=local` (same as `build:*:dev`). Use **`yarn build-prod`** for production mode + minification. |
+| `yarn build:package` | **Library** build to `package-dist/` via [`config/webpack.library.js`](config/webpack.library.js) (dual CJS/ESM + extracted CSS + copied `index.d.ts`); required before `npm publish` |
 | `yarn test` | Jest + coverage |
 | `yarn lint` | ESLint on `src/` |
 
@@ -90,15 +112,15 @@ Dotenv files are loaded per **webpack** build via `CMS_ENV` (see `package.json`
 
 The host must load `remoteEntry.js` and consume the `./App` expose.
 
-Router **basename** in MFE mode follows `/:country/:language` from the URL (see `src/utils/locale.js`). Standalone dev uses the same; non-MFE basename includes `/static/header-mfe` for static hosting scenarios.
+**Locale:** The npm **`Header`** export accepts **`market`** / **`language`** (see [`src/utils/locale.js`](src/utils/locale.js) `resolveHeaderLocale`). On **SSR**, pass them explicitly or rely on Express passing **`requestUrl`** into **`renderAndExtractContext`**. On **CSR**, they are optional; URL parsing **throws** if `window` is missing or the path is invalid. The header does not ship React Router; the host owns routing.
 
 ## Contentstack
 
 - `src/utils/contentstack.js` — stack proxy, `getContent`, `initLivePreview`, `onEntryChange`, `isEditingMode`
-- `src/utils/config.js` — `getStackConfig()` reads `CONTENTSTACK_HEADER_CONTENT_TYPE` and locale from the URL
-- `src/constants.js` — `referenceFields` (empty; TODO when the header model uses references), `VB_EmptyBlockParentClass` for Visual Builder empty blocks
+- `src/utils/config.js` — `getStackConfig()` returns a fixed header content type (internal to that module) and locale from the URL
+- `src/constants.js` — Contentstack credentials from env (used by the webpack/MFE build and internally by `contentstack.js`; not exported from the npm package)
 
-No header entry is fetched in the UI yet; wire `getContent` when the slug/UID strategy is decided.
+The **npm library** currently exports only **`Header`** (the `Main` shell under that name); Contentstack helpers are not part of the published API yet. No header entry is fetched in the UI yet; wire `getContent` when the slug/UID strategy is decided.
 
 ## GitLab CI