@nuskin/nextgen-header 1.0.0 → 1.2.0

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@nuskin/nextgen-header",
-  "version": "1.0.0",
+  "version": "1.2.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 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",
+    "start": "nodemon --watch src --ext js,jsx,css --delay 2 --exec \"yarn build:local && node server-launcher.js\"",
+    "build": "yarn build:local",
+    "build:local": "cross-env CMS_ENV=local yarn build:server:dev && cross-env CMS_ENV=local yarn build:client:dev && yarn build-storybook",
+    "build-dev": "cross-env CMS_ENV=dev yarn build:server:dev && cross-env CMS_ENV=dev yarn build:client:dev && yarn build-storybook",
+    "build-test": "cross-env CMS_ENV=test yarn build:server:dev && cross-env CMS_ENV=test yarn build:client:dev && yarn build-storybook",
     "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",
@@ -18,6 +19,7 @@
     "test": "jest",
     "integration-test": "echo 'Integration test not yet implemented'",
     "lint": "eslint src/ --ext .js,.jsx",
+    "build-storybook": "cross-env SB_DISABLE_TELEMETRY=1 CI=true storybook build -o dist/storybook",
     "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": [
@@ -56,7 +58,10 @@
     "contentstack": "^3.26.0",
     "prop-types": "^15.8.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "@mui/icons-material": "^5.0.0",
+    "@mui/material": "^5.0.0",
+    "@mui/system": "^5.0.0"
   },
   "engines": {
     "node": ">=24.0.0"
@@ -70,6 +75,11 @@
     "@loadable/babel-plugin": "^5.13.2",
     "@loadable/component": "^5.16.4",
     "@loadable/server": "^5.16.5",
+    "@mui/icons-material": "^5.15.0",
+    "@mui/material": "^5.15.0",
+    "@mui/system": "^5.15.0",
+    "@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",
@@ -99,6 +109,9 @@
     "@loadable/webpack-plugin": "5.15.2",
     "@module-federation/enhanced": "0.15.0",
     "@module-federation/node": "2.7.7",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/react-webpack5": "^8.4.7",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "babel-jest": "^29.7.0",
@@ -116,6 +129,7 @@
     "process": "^0.11.10",
     "rimraf": "5.0.8",
     "shx": "^0.4.0",
+    "storybook": "^8.4.7",
     "style-loader": "^3.3.0",
     "typescript": "^5.9.3",
     "webpack": "^5.88.0",

package/readme.md

@@ -96,9 +96,11 @@ For the **webpack / MFE** build, dotenv files are loaded per build via `CMS_ENV`
 
 | Command | Description |
 |---------|-------------|
-| `yarn start` | Rebuild and run the Express server (see `server-launcher.js`) |
-| `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 start` | On each `src/` change: runs **`yarn build:local`** (MFE client + server webpack + **Storybook** static → `dist/storybook/`), then starts the Express server (`server-launcher.js`) |
+| `yarn build` | Same as **`yarn build:local`** |
+| `yarn build:local` | Client + server **webpack** in **development** mode with `CMS_ENV=local`, then **Storybook** static output to `dist/storybook/` (alongside MF assets under `dist/`). **`yarn start`** runs this on each rebuild. Use **`yarn build-prod`** for production mode + minification (**Storybook is not** included on `build-prod`). |
 | `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 build-storybook` | Storybook static build → **`dist/storybook/`** (included in **`yarn build:local`** / **`yarn start`**; use `CI=true` in automation to avoid interactive prompts) |
 | `yarn test` | Jest + coverage |
 | `yarn lint` | ESLint on `src/` |
 
@@ -120,7 +122,16 @@ The host must load `remoteEntry.js` and consume the `./App` expose.
 - `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)
 
-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.
+The **npm library** currently exports only **`Header`** (the `Main` shell under that name); Contentstack helpers are not part of the published API yet. Header UI data is loaded from mock **`Header*Service`** modules until real `getContent` wiring; replace **`HEADER_CONTENT_ENTRY_UID`** in [`src/header/constants.js`](src/header/constants.js) when the slug/UID strategy is decided.
+
+## Header scaffold (`src/header/`)
+
+- **`HeaderView`** — header regions; receives each **`header*Service`** as its own prop. Each region calls async **`get*`** methods on its service (for example **`getLogoCopy`**, **`getNavigationTree`**) in **`useEffect`**, then renders; placeholders show until copy resolves. Click/search handlers still call the same service methods.
+- **`HeaderContainer`** — resolves locale, builds default **`services`** (or uses injected **`services`**) with **`createHeader*Service`**, and passes each service into **`HeaderView`** as explicit props. Server **`renderAndExtractContext`** does not preload header data yet; SSR markup includes the header shell with per-region loading placeholders until real SSR hydration or client fetch completes.
+- **`src/header/constants.js`** — `HEADER_CONTENT_ENTRY_UID` placeholder with **TODO** until the real Contentstack entry UID exists.
+- **Storybook** — [`src/header/components/HeaderView.stories.jsx`](src/header/components/HeaderView.stories.jsx); config under [`.storybook/`](.storybook/). After **`yarn start`** or **`yarn build:local`**, open **`dist/storybook/index.html`** (or serve **`dist/storybook/`**). For a live dev server with HMR on port 6006: `cross-env SB_DISABLE_TELEMETRY=1 npx storybook dev -p 6006`.
+
+**TODO:** Exclude **`dist/storybook/`** from production CDN / static deploy when tightening the pipeline (Storybook is for local dev and non-prod review).
 
 ## GitLab CI