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

package/package-dist/index.css

@@ -0,0 +1,71 @@
+/* src/styles/globals.css */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Roboto",
+    "Oxygen",
+    "Ubuntu",
+    "Cantarell",
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.6;
+  color: #333;
+}
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 10px;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+  line-height: 1.2;
+  margin-bottom: 1rem;
+}
+p {
+  margin-bottom: 1rem;
+}
+button {
+  font-family: inherit;
+  cursor: pointer;
+  border: none;
+  outline: none;
+}
+a {
+  color: #008ab0;
+  text-decoration: none;
+}
+a:link {
+  color: #008ab0;
+}
+a:visited {
+  color: #008ab0;
+}
+a:hover {
+  text-decoration: underline;
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+@media (max-width: 768px) {
+  .container {
+    padding: 0 10px;
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/package-dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles/globals.css"],"sourcesContent":["/* Global styles */\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  line-height: 1.6;\n  color: #333;\n}\n\n.container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 10px;\n}\n\n/* Typography */\nh1, h2, h3, h4, h5, h6 {\n  font-weight: 600;\n  line-height: 1.2;\n  margin-bottom: 1rem;\n}\n\np {\n  margin-bottom: 1rem;\n}\n\n/* Buttons */\nbutton {\n  font-family: inherit;\n  cursor: pointer;\n  border: none;\n  outline: none;\n}\n\n/* Links */\na {\n  color: #008ab0;\n  text-decoration: none;\n}\n\na:link {\n  color: #008ab0;\n}\n\na:visited {\n  color: #008ab0;\n}\n\na:hover {\n  text-decoration: underline;\n}\n\n/* Images */\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .container {\n    padding: 0 10px;\n  }\n}"],"mappings":";AACA;AACE,UAAQ;AACR,WAAS;AACT,cAAY;AACd;AAEA;AACE;AAAA,IAAa,aAAa;AAAA,IAAE,kBAAkB;AAAA,IAAE,UAAU;AAAA,IAAE,QAAQ;AAAA,IAAE,QAAQ;AAAA,IAC5E,QAAQ;AAAA,IAAE,WAAW;AAAA,IAAE,WAAW;AAAA,IAAE,YAAY;AAAA,IAAE,gBAAgB;AAAA,IAClE;AACF,0BAAwB;AACxB,2BAAyB;AACzB,eAAa;AACb,SAAO;AACT;AAEA,CAAC;AACC,aAAW;AACX,UAAQ,EAAE;AACV,WAAS,EAAE;AACb;AAGA;AAAI;AAAI;AAAI;AAAI;AAAI;AAClB,eAAa;AACb,eAAa;AACb,iBAAe;AACjB;AAEA;AACE,iBAAe;AACjB;AAGA;AACE,eAAa;AACb,UAAQ;AACR,UAAQ;AACR,WAAS;AACX;AAGA;AACE,SAAO;AACP,mBAAiB;AACnB;AAEA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,mBAAiB;AACnB;AAGA;AACE,aAAW;AACX,UAAQ;AACV;AAGA,QAAO,WAAY;AACjB,GAnDD;AAoDG,aAAS,EAAE;AACb;AACF;","names":[]}

package/package-dist/index.d.ts

@@ -0,0 +1,51 @@
+import type { Context, FC } from "react";
+
+export const HeaderPlaceholder: FC;
+
+export interface MainProps {
+  isMFE?: boolean;
+}
+
+export const Main: FC<MainProps>;
+
+export interface HeaderMFEContextValue {
+  isMFE: boolean;
+}
+
+export const HeaderMFEContext: Context<HeaderMFEContextValue>;
+
+export function getLocale(options?: { url?: string }): {
+  locale: string;
+  language: string;
+  country: string;
+};
+
+export function getStackConfig(): {
+  contentType: string;
+  locale: string;
+};
+
+export const stack: unknown;
+
+export function getContent(
+  args?: {
+    url?: string;
+    uid?: string;
+    contentType?: string;
+    language?: string;
+    referenceFields?: string[];
+  },
+): Promise<unknown | null>;
+
+export function initLivePreview(): void;
+
+export const onEntryChange: (...args: unknown[]) => unknown;
+
+export function isEditingMode(): boolean;
+
+export const CONTENTSTACK_API_KEY: string | undefined;
+export const CONTENTSTACK_DELIVERY_TOKEN: string | undefined;
+export const CONTENTSTACK_ENVIRONMENT: string | undefined;
+export const CONTENTSTACK_PREVIEW_TOKEN: string | undefined;
+export const referenceFields: string[];
+export const VB_EmptyBlockParentClass: string;

package/package-dist/index.js

@@ -0,0 +1,285 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/library/index.js
+var index_exports = {};
+__export(index_exports, {
+  CONTENTSTACK_API_KEY: () => CONTENTSTACK_API_KEY,
+  CONTENTSTACK_DELIVERY_TOKEN: () => CONTENTSTACK_DELIVERY_TOKEN,
+  CONTENTSTACK_ENVIRONMENT: () => CONTENTSTACK_ENVIRONMENT,
+  CONTENTSTACK_PREVIEW_TOKEN: () => CONTENTSTACK_PREVIEW_TOKEN,
+  HeaderMFEContext: () => HeaderMFEContext,
+  HeaderPlaceholder: () => HeaderPlaceholder,
+  Main: () => Main_default,
+  VB_EmptyBlockParentClass: () => VB_EmptyBlockParentClass,
+  getContent: () => getContent,
+  getLocale: () => getLocale,
+  getStackConfig: () => getStackConfig,
+  initLivePreview: () => initLivePreview,
+  isEditingMode: () => isEditingMode,
+  onEntryChange: () => onEntryChange,
+  referenceFields: () => referenceFields,
+  stack: () => stack
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/HeaderPlaceholder.jsx
+var import_react = __toESM(require("react"));
+function HeaderPlaceholder() {
+  return /* @__PURE__ */ import_react.default.createElement("header", { role: "banner", "data-testid": "header-placeholder" }, /* @__PURE__ */ import_react.default.createElement("p", null, "Header MFE \u2014 TODO: implement header content"));
+}
+
+// src/Main.js
+var import_react2 = __toESM(require("react"));
+var import_prop_types = __toESM(require("prop-types"));
+var import_react_router_dom = require("react-router-dom");
+
+// src/styles/Main.styled.js
+var import_styled = __toESM(require("@emotion/styled"));
+var AppContainer = import_styled.default.div`
+  font-family: "Inter", sans-serif;
+`;
+
+// src/utils/locale.js
+function getLocaleCodeFromUrl(options) {
+  var _a, _b;
+  const { url = "", defaultLocale = "" } = options ?? {};
+  let localeAsArr = [];
+  let tempUrl = url || typeof location != "undefined" && location.href;
+  if (tempUrl) {
+    if (!(tempUrl == null ? void 0 : tempUrl.includes("https://")) && !(tempUrl == null ? void 0 : tempUrl.includes("http://"))) {
+      tempUrl = `https://domain.com${tempUrl}`;
+    }
+    const updatedUrl = new URL(tempUrl);
+    const pathParams = updatedUrl.pathname;
+    if (pathParams) {
+      const pathList = (_a = pathParams == null ? void 0 : pathParams.split("/")) == null ? void 0 : _a.filter(Boolean);
+      if (pathList.length > 1) {
+        localeAsArr = pathList;
+      }
+    }
+    if (localeAsArr.length > 2) {
+      localeAsArr = localeAsArr.slice(0, 2);
+    }
+  }
+  localeAsArr = localeAsArr.reverse();
+  if (localeAsArr.length === 0) {
+    localeAsArr = defaultLocale.split("_");
+  }
+  return `${(_b = localeAsArr[1]) == null ? void 0 : _b.toUpperCase()}-${localeAsArr[0]}`;
+}
+function getLocale({ url } = {}) {
+  var _a, _b;
+  const currentLocale = getLocaleCodeFromUrl(url ? { url } : null);
+  const splitLocale = currentLocale == null ? void 0 : currentLocale.split("-");
+  return {
+    locale: currentLocale,
+    language: (_a = splitLocale == null ? void 0 : splitLocale[1]) == null ? void 0 : _a.toLowerCase(),
+    country: (_b = splitLocale == null ? void 0 : splitLocale[0]) == null ? void 0 : _b.toUpperCase()
+  };
+}
+
+// src/Main.js
+var HeaderMFEContext = (0, import_react2.createContext)({ isMFE: true });
+function Main({ isMFE = true }) {
+  let { country, language } = getLocale();
+  country = country.toLocaleLowerCase();
+  language = language.toLocaleLowerCase();
+  const baseName = isMFE ? `/${country}/${language}` : `/${country}/${language}/static/header-mfe`;
+  return /* @__PURE__ */ import_react2.default.createElement(HeaderMFEContext.Provider, { value: { isMFE } }, /* @__PURE__ */ import_react2.default.createElement(import_react_router_dom.BrowserRouter, { basename: baseName }, /* @__PURE__ */ import_react2.default.createElement(AppContainer, null, /* @__PURE__ */ import_react2.default.createElement(import_react_router_dom.Routes, null, /* @__PURE__ */ import_react2.default.createElement(import_react_router_dom.Route, { path: "*", element: /* @__PURE__ */ import_react2.default.createElement(HeaderPlaceholder, null) })))));
+}
+Main.propTypes = {
+  isMFE: import_prop_types.default.bool
+};
+var Main_default = Main;
+
+// src/utils/config.js
+function getStackConfig() {
+  const { locale } = getLocale();
+  return {
+    contentType: process.env.CONTENTSTACK_HEADER_CONTENT_TYPE || "",
+    locale
+  };
+}
+
+// src/utils/contentstack.js
+var import_delivery_sdk = __toESM(require("@contentstack/delivery-sdk"));
+var import_live_preview_utils = __toESM(require("@contentstack/live-preview-utils"));
+var import_utils = require("@contentstack/utils");
+
+// src/constants.js
+var CONTENTSTACK_API_KEY = process.env.CONTENTSTACK_API_KEY;
+var CONTENTSTACK_DELIVERY_TOKEN = process.env.CONTENTSTACK_DELIVERY_TOKEN;
+var CONTENTSTACK_ENVIRONMENT = process.env.CONTENTSTACK_ENVIRONMENT;
+var CONTENTSTACK_PREVIEW_TOKEN = process.env.CONTENTSTACK_PREVIEW_TOKEN;
+var referenceFields = [];
+var VB_EmptyBlockParentClass = "visual-builder__empty-block-parent";
+
+// src/utils/contentstack.js
+var _stack = null;
+function getStack() {
+  if (!_stack) {
+    _stack = import_delivery_sdk.default.stack({
+      apiKey: CONTENTSTACK_API_KEY,
+      deliveryToken: CONTENTSTACK_DELIVERY_TOKEN,
+      environment: CONTENTSTACK_ENVIRONMENT,
+      live_preview: {
+        enable: true,
+        preview_token: CONTENTSTACK_PREVIEW_TOKEN,
+        host: "rest-preview.contentstack.com"
+      }
+    });
+  }
+  return _stack;
+}
+var BRIDGED_CONFIG_KEYS = ["live_preview", "headers", "environment"];
+var stack = new Proxy(
+  {},
+  {
+    get(_, prop) {
+      var _a;
+      const s = getStack();
+      if (BRIDGED_CONFIG_KEYS.includes(prop)) {
+        return (_a = s.config) == null ? void 0 : _a[prop];
+      }
+      return s[prop];
+    },
+    set(_, prop, value) {
+      const s = getStack();
+      if (BRIDGED_CONFIG_KEYS.includes(prop)) {
+        if (!s.config) return false;
+        s.config[prop] = value;
+        return true;
+      }
+      s[prop] = value;
+      return true;
+    },
+    has(_, prop) {
+      if (BRIDGED_CONFIG_KEYS.includes(prop)) return true;
+      return prop in getStack();
+    },
+    ownKeys() {
+      return [
+        .../* @__PURE__ */ new Set([...Reflect.ownKeys(getStack()), ...BRIDGED_CONFIG_KEYS])
+      ];
+    },
+    getOwnPropertyDescriptor(_, prop) {
+      var _a;
+      if (BRIDGED_CONFIG_KEYS.includes(prop)) {
+        return {
+          configurable: true,
+          enumerable: true,
+          writable: true,
+          value: (_a = getStack().config) == null ? void 0 : _a[prop]
+        };
+      }
+      return Object.getOwnPropertyDescriptor(getStack(), prop);
+    }
+  }
+);
+var _livePreviewInitialized = false;
+var onEntryChange = import_live_preview_utils.default.onEntryChange.bind(
+  import_live_preview_utils.default
+);
+function initLivePreview() {
+  if (_livePreviewInitialized) return;
+  _livePreviewInitialized = true;
+  import_live_preview_utils.default.init({
+    ssr: false,
+    enable: true,
+    mode: "builder",
+    stackSdk: stack,
+    stackDetails: {
+      apiKey: CONTENTSTACK_API_KEY,
+      environment: CONTENTSTACK_ENVIRONMENT
+    },
+    clientUrlParams: {
+      host: "app.contentstack.com"
+    },
+    editButton: {
+      enable: false
+    }
+  });
+}
+function isEditingMode() {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  if (window.self !== window.top) {
+    return true;
+  }
+  const params = new URLSearchParams(window.location.search);
+  return params.has("visual-builder") || params.has("contentstack") || params.has("live_preview");
+}
+var getContent = async ({
+  url,
+  uid,
+  contentType,
+  language,
+  referenceFields: referenceFields2 = []
+} = {}) => {
+  const tryFetch = async (locale) => {
+    var _a;
+    const CT = stack.contentType(contentType);
+    let fetched = null;
+    if (uid) {
+      fetched = await CT.entry(uid).locale(locale).includeReference(referenceFields2).fetch();
+    } else if (url) {
+      const urlWithSlash = url.startsWith("/") ? url : `/${url}`;
+      const result = await CT.entry().locale(locale).includeReference(referenceFields2).query({ url: urlWithSlash }).find();
+      fetched = (_a = result.entries) == null ? void 0 : _a[0];
+    }
+    if (isEditingMode() && fetched) {
+      (0, import_utils.addEditableTags)(fetched, contentType, true, language, {
+        useLowerCaseLocale: false
+      });
+    }
+    return fetched;
+  };
+  try {
+    const result = await tryFetch(language);
+    return result;
+  } catch (error) {
+    console.warn(
+      "Failed to fetch content with language:",
+      language,
+      error.message
+    );
+    try {
+      const fallbackResult = await tryFetch("en");
+      return fallbackResult;
+    } catch (fallbackError) {
+      console.warn(
+        "Failed to fetch content with fallback language:",
+        fallbackError.message
+      );
+      return null;
+    }
+  }
+};
+//# sourceMappingURL=index.js.map

package/package-dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/library/index.js","../src/components/HeaderPlaceholder.jsx","../src/Main.js","../src/styles/Main.styled.js","../src/utils/locale.js","../src/utils/config.js","../src/utils/contentstack.js","../src/constants.js"],"sourcesContent":["/**\n * Public API for `@nuskin/nextgen-header` npm consumers.\n * Does not include the Module Federation app entry, Express server, or bootstrap.\n */\n\nexport { default as HeaderPlaceholder } from \"../components/HeaderPlaceholder\";\nexport { default as Main, HeaderMFEContext } from \"../Main\";\nexport { getLocale } from \"../utils/locale\";\nexport { getStackConfig } from \"../utils/config\";\nexport {\n  stack,\n  getContent,\n  initLivePreview,\n  onEntryChange,\n  isEditingMode,\n} from \"../utils/contentstack\";\nexport {\n  CONTENTSTACK_API_KEY,\n  CONTENTSTACK_DELIVERY_TOKEN,\n  CONTENTSTACK_ENVIRONMENT,\n  CONTENTSTACK_PREVIEW_TOKEN,\n  referenceFields,\n  VB_EmptyBlockParentClass,\n} from \"../constants\";\n","import React from \"react\";\n\n/**\n * Stub shell for the future header. Replace with real navigation/branding when\n * Contentstack content types and UX are defined.\n */\nexport default function HeaderPlaceholder() {\n  return (\n    <header role=\"banner\" data-testid=\"header-placeholder\">\n      <p>Header MFE — TODO: implement header content</p>\n    </header>\n  );\n}\n","import React, { createContext } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Routes, Route, BrowserRouter } from \"react-router-dom\";\nimport HeaderPlaceholder from \"./components/HeaderPlaceholder\";\nimport { AppContainer } from \"./styles/Main.styled\";\nimport \"./styles/globals.css\";\nimport { getLocale } from \"./utils/locale\";\n\nexport const HeaderMFEContext = createContext({ isMFE: true });\n\nfunction Main({ isMFE = true }) {\n  let { country, language } = getLocale();\n  country = country.toLocaleLowerCase();\n  language = language.toLocaleLowerCase();\n\n  const baseName = isMFE\n    ? `/${country}/${language}`\n    : `/${country}/${language}/static/header-mfe`;\n\n  return (\n    <HeaderMFEContext.Provider value={{ isMFE }}>\n      <BrowserRouter basename={baseName}>\n        <AppContainer>\n          <Routes>\n            <Route path=\"*\" element={<HeaderPlaceholder />} />\n          </Routes>\n        </AppContainer>\n      </BrowserRouter>\n    </HeaderMFEContext.Provider>\n  );\n}\n\nMain.propTypes = {\n  isMFE: PropTypes.bool,\n};\n\nexport default Main;\n","import styled from \"@emotion/styled\";\n\nexport const AppContainer = styled.div`\n  font-family: \"Inter\", sans-serif;\n`;\n","/**\n * Extracts the locale code from the provided URL or the current URL.\n *\n * @param options - An object with the following properties:\n * @param options.url - The URL to extract the locale code from. If not provided, the current URL will be used.\n * @param options.defaultLocale - The default locale code to use if the locale cannot be extracted from the URL.\n * @returns The locale code in the format \"language_COUNTRY\".\n */\nfunction getLocaleCodeFromUrl(options) {\n  const { url = \"\", defaultLocale = \"\" } = options ?? {};\n\n  let localeAsArr = [];\n\n  let tempUrl = url || (typeof location != \"undefined\" && location.href);\n\n  if (tempUrl) {\n    /* adding dummy domain since express originalUrl will not have request domain */\n    if (!tempUrl?.includes(\"https://\") && !tempUrl?.includes(\"http://\")) {\n      tempUrl = `https://domain.com${tempUrl}`;\n    }\n    const updatedUrl = new URL(tempUrl);\n\n    const pathParams = updatedUrl.pathname;\n    if (pathParams) {\n      const pathList = pathParams?.split(\"/\")?.filter(Boolean);\n      if (pathList.length > 1) {\n        localeAsArr = pathList;\n      }\n    }\n\n    if (localeAsArr.length > 2) {\n      localeAsArr = localeAsArr.slice(0, 2);\n    }\n  }\n  localeAsArr = localeAsArr.reverse();\n\n  if (localeAsArr.length === 0) {\n    localeAsArr = defaultLocale.split(\"_\");\n  }\n\n  return `${localeAsArr[1]?.toUpperCase()}-${localeAsArr[0]}`;\n}\n\nfunction getLocale({ url } = {}) {\n  const currentLocale = getLocaleCodeFromUrl(url ? { url } : null);\n  const splitLocale = currentLocale?.split(\"-\");\n\n  return {\n    locale: currentLocale,\n    language: splitLocale?.[1]?.toLowerCase(),\n    country: splitLocale?.[0]?.toUpperCase(),\n  };\n}\nexport { getLocale };\n","import { getLocale } from \"./locale\";\n\n/**\n * Stack-related config for Contentstack calls (e.g. getContent).\n * Set CONTENTSTACK_HEADER_CONTENT_TYPE in env when the header content type exists.\n */\nfunction getStackConfig() {\n  const { locale } = getLocale();\n  return {\n    contentType: process.env.CONTENTSTACK_HEADER_CONTENT_TYPE || \"\",\n    locale,\n  };\n}\n\nexport { getStackConfig };\n","import contentstack from \"@contentstack/delivery-sdk\";\nimport ContentstackLivePreview from \"@contentstack/live-preview-utils\";\nimport { addEditableTags } from \"@contentstack/utils\";\nimport {\n  CONTENTSTACK_API_KEY,\n  CONTENTSTACK_DELIVERY_TOKEN,\n  CONTENTSTACK_ENVIRONMENT,\n  CONTENTSTACK_PREVIEW_TOKEN,\n} from \"../constants\";\n\n/**\n * Contentstack delivery stack, live preview, and entry fetch.\n * TODO: Call getContent from header UI once CONTENTSTACK_HEADER_CONTENT_TYPE and\n * URL/slug strategy are defined; wire initLivePreview / onEntryChange in Visual Builder.\n */\n\n// Lazy-initialize the stack to avoid \"API key is required\" errors\n// when this module is loaded via Module Federation on the host server\n// (where env vars may not be available).\nlet _stack = null;\nfunction getStack() {\n  if (!_stack) {\n    _stack = contentstack.stack({\n      apiKey: CONTENTSTACK_API_KEY,\n      deliveryToken: CONTENTSTACK_DELIVERY_TOKEN,\n      environment: CONTENTSTACK_ENVIRONMENT,\n      live_preview: {\n        enable: true,\n        preview_token: CONTENTSTACK_PREVIEW_TOKEN,\n        host: \"rest-preview.contentstack.com\",\n      },\n    });\n  }\n  return _stack;\n}\n\nconst BRIDGED_CONFIG_KEYS = [\"live_preview\", \"headers\", \"environment\"];\n\nexport const stack = new Proxy(\n  {},\n  {\n    get(_, prop) {\n      const s = getStack();\n      if (BRIDGED_CONFIG_KEYS.includes(prop)) {\n        return s.config?.[prop];\n      }\n      return s[prop];\n    },\n    set(_, prop, value) {\n      const s = getStack();\n      if (BRIDGED_CONFIG_KEYS.includes(prop)) {\n        if (!s.config) return false;\n        s.config[prop] = value;\n        return true;\n      }\n      s[prop] = value;\n      return true;\n    },\n    has(_, prop) {\n      if (BRIDGED_CONFIG_KEYS.includes(prop)) return true;\n      return prop in getStack();\n    },\n    ownKeys() {\n      return [\n        ...new Set([...Reflect.ownKeys(getStack()), ...BRIDGED_CONFIG_KEYS]),\n      ];\n    },\n    getOwnPropertyDescriptor(_, prop) {\n      if (BRIDGED_CONFIG_KEYS.includes(prop)) {\n        return {\n          configurable: true,\n          enumerable: true,\n          writable: true,\n          value: getStack().config?.[prop],\n        };\n      }\n      return Object.getOwnPropertyDescriptor(getStack(), prop);\n    },\n  },\n);\n\nlet _livePreviewInitialized = false;\n\nexport const onEntryChange = ContentstackLivePreview.onEntryChange.bind(\n  ContentstackLivePreview,\n);\n\nexport function initLivePreview() {\n  if (_livePreviewInitialized) return;\n  _livePreviewInitialized = true;\n\n  ContentstackLivePreview.init({\n    ssr: false,\n    enable: true,\n    mode: \"builder\",\n    stackSdk: stack,\n    stackDetails: {\n      apiKey: CONTENTSTACK_API_KEY,\n      environment: CONTENTSTACK_ENVIRONMENT,\n    },\n    clientUrlParams: {\n      host: \"app.contentstack.com\",\n    },\n    editButton: {\n      enable: false,\n    },\n  });\n}\n\nexport function isEditingMode() {\n  if (typeof window === \"undefined\") {\n    return false;\n  }\n  if (window.self !== window.top) {\n    return true;\n  }\n\n  const params = new URLSearchParams(window.location.search);\n  return (\n    params.has(\"visual-builder\") ||\n    params.has(\"contentstack\") ||\n    params.has(\"live_preview\")\n  );\n}\n\nexport const getContent = async ({\n  url,\n  uid,\n  contentType,\n  language,\n  referenceFields = [],\n} = {}) => {\n  const tryFetch = async (locale) => {\n    const CT = stack.contentType(contentType);\n    let fetched = null;\n\n    if (uid) {\n      fetched = await CT.entry(uid)\n        .locale(locale)\n        .includeReference(referenceFields)\n        .fetch();\n    } else if (url) {\n      const urlWithSlash = url.startsWith(\"/\") ? url : `/${url}`;\n      const result = await CT.entry()\n        .locale(locale)\n        .includeReference(referenceFields)\n        .query({ url: urlWithSlash })\n        .find();\n      fetched = result.entries?.[0];\n    }\n    if (isEditingMode() && fetched) {\n      addEditableTags(fetched, contentType, true, language, {\n        useLowerCaseLocale: false,\n      });\n    }\n\n    return fetched;\n  };\n\n  try {\n    const result = await tryFetch(language);\n    return result;\n  } catch (error) {\n    console.warn(\n      \"Failed to fetch content with language:\",\n      language,\n      error.message,\n    );\n    try {\n      const fallbackResult = await tryFetch(\"en\");\n      return fallbackResult;\n    } catch (fallbackError) {\n      console.warn(\n        \"Failed to fetch content with fallback language:\",\n        fallbackError.message,\n      );\n      return null;\n    }\n  }\n};\n","const CONTENTSTACK_API_KEY = process.env.CONTENTSTACK_API_KEY;\nconst CONTENTSTACK_DELIVERY_TOKEN = process.env.CONTENTSTACK_DELIVERY_TOKEN;\nconst CONTENTSTACK_ENVIRONMENT = process.env.CONTENTSTACK_ENVIRONMENT;\nconst CONTENTSTACK_PREVIEW_TOKEN = process.env.CONTENTSTACK_PREVIEW_TOKEN;\n\n/**\n * Reference field UIDs for `includeReference` when fetching header entries.\n * TODO: populate when the header content model uses references.\n */\nconst referenceFields = [];\n\n// SSR-safe constant — avoids importing @contentstack/live-preview-utils\n// which accesses `window` at module load time.\nconst VB_EmptyBlockParentClass = \"visual-builder__empty-block-parent\";\n\nexport {\n  CONTENTSTACK_API_KEY,\n  CONTENTSTACK_DELIVERY_TOKEN,\n  CONTENTSTACK_ENVIRONMENT,\n  CONTENTSTACK_PREVIEW_TOKEN,\n  referenceFields,\n  VB_EmptyBlockParentClass,\n};\n"],"mappings":"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","names":["React","import_react","styled","React","PropTypes","contentstack","ContentstackLivePreview","referenceFields"]}

package/package-dist/index.mjs

@@ -0,0 +1,253 @@
+// src/components/HeaderPlaceholder.jsx
+import React from "react";
+function HeaderPlaceholder() {
+  return /* @__PURE__ */ React.createElement("header", { role: "banner", "data-testid": "header-placeholder" }, /* @__PURE__ */ React.createElement("p", null, "Header MFE \u2014 TODO: implement header content"));
+}
+
+// src/Main.js
+import React2, { createContext } from "react";
+import PropTypes from "prop-types";
+import { Routes, Route, BrowserRouter } from "react-router-dom";
+
+// src/styles/Main.styled.js
+import styled from "@emotion/styled";
+var AppContainer = styled.div`
+  font-family: "Inter", sans-serif;
+`;
+
+// src/utils/locale.js
+function getLocaleCodeFromUrl(options) {
+  var _a, _b;
+  const { url = "", defaultLocale = "" } = options ?? {};
+  let localeAsArr = [];
+  let tempUrl = url || typeof location != "undefined" && location.href;
+  if (tempUrl) {
+    if (!(tempUrl == null ? void 0 : tempUrl.includes("https://")) && !(tempUrl == null ? void 0 : tempUrl.includes("http://"))) {
+      tempUrl = `https://domain.com${tempUrl}`;
+    }
+    const updatedUrl = new URL(tempUrl);
+    const pathParams = updatedUrl.pathname;
+    if (pathParams) {
+      const pathList = (_a = pathParams == null ? void 0 : pathParams.split("/")) == null ? void 0 : _a.filter(Boolean);
+      if (pathList.length > 1) {
+        localeAsArr = pathList;
+      }
+    }
+    if (localeAsArr.length > 2) {
+      localeAsArr = localeAsArr.slice(0, 2);
+    }
+  }
+  localeAsArr = localeAsArr.reverse();
+  if (localeAsArr.length === 0) {
+    localeAsArr = defaultLocale.split("_");
+  }
+  return `${(_b = localeAsArr[1]) == null ? void 0 : _b.toUpperCase()}-${localeAsArr[0]}`;
+}
+function getLocale({ url } = {}) {
+  var _a, _b;
+  const currentLocale = getLocaleCodeFromUrl(url ? { url } : null);
+  const splitLocale = currentLocale == null ? void 0 : currentLocale.split("-");
+  return {
+    locale: currentLocale,
+    language: (_a = splitLocale == null ? void 0 : splitLocale[1]) == null ? void 0 : _a.toLowerCase(),
+    country: (_b = splitLocale == null ? void 0 : splitLocale[0]) == null ? void 0 : _b.toUpperCase()
+  };
+}
+
+// src/Main.js
+var HeaderMFEContext = createContext({ isMFE: true });
+function Main({ isMFE = true }) {
+  let { country, language } = getLocale();
+  country = country.toLocaleLowerCase();
+  language = language.toLocaleLowerCase();
+  const baseName = isMFE ? `/${country}/${language}` : `/${country}/${language}/static/header-mfe`;
+  return /* @__PURE__ */ React2.createElement(HeaderMFEContext.Provider, { value: { isMFE } }, /* @__PURE__ */ React2.createElement(BrowserRouter, { basename: baseName }, /* @__PURE__ */ React2.createElement(AppContainer, null, /* @__PURE__ */ React2.createElement(Routes, null, /* @__PURE__ */ React2.createElement(Route, { path: "*", element: /* @__PURE__ */ React2.createElement(HeaderPlaceholder, null) })))));
+}
+Main.propTypes = {
+  isMFE: PropTypes.bool
+};
+var Main_default = Main;
+
+// src/utils/config.js
+function getStackConfig() {
+  const { locale } = getLocale();
+  return {
+    contentType: process.env.CONTENTSTACK_HEADER_CONTENT_TYPE || "",
+    locale
+  };
+}
+
+// src/utils/contentstack.js
+import contentstack from "@contentstack/delivery-sdk";
+import ContentstackLivePreview from "@contentstack/live-preview-utils";
+import { addEditableTags } from "@contentstack/utils";
+
+// src/constants.js
+var CONTENTSTACK_API_KEY = process.env.CONTENTSTACK_API_KEY;
+var CONTENTSTACK_DELIVERY_TOKEN = process.env.CONTENTSTACK_DELIVERY_TOKEN;
+var CONTENTSTACK_ENVIRONMENT = process.env.CONTENTSTACK_ENVIRONMENT;
+var CONTENTSTACK_PREVIEW_TOKEN = process.env.CONTENTSTACK_PREVIEW_TOKEN;
+var referenceFields = [];
+var VB_EmptyBlockParentClass = "visual-builder__empty-block-parent";
+
+// src/utils/contentstack.js
+var _stack = null;
+function getStack() {
+  if (!_stack) {
+    _stack = contentstack.stack({
+      apiKey: CONTENTSTACK_API_KEY,
+      deliveryToken: CONTENTSTACK_DELIVERY_TOKEN,
+      environment: CONTENTSTACK_ENVIRONMENT,
+      live_preview: {
+        enable: true,
+        preview_token: CONTENTSTACK_PREVIEW_TOKEN,
+        host: "rest-preview.contentstack.com"
+      }
+    });
+  }
+  return _stack;
+}
+var BRIDGED_CONFIG_KEYS = ["live_preview", "headers", "environment"];
+var stack = new Proxy(
+  {},
+  {
+    get(_, prop) {
+      var _a;
+      const s = getStack();
+      if (BRIDGED_CONFIG_KEYS.includes(prop)) {
+        return (_a = s.config) == null ? void 0 : _a[prop];
+      }
+      return s[prop];
+    },
+    set(_, prop, value) {
+      const s = getStack();
+      if (BRIDGED_CONFIG_KEYS.includes(prop)) {
+        if (!s.config) return false;
+        s.config[prop] = value;
+        return true;
+      }
+      s[prop] = value;
+      return true;
+    },
+    has(_, prop) {
+      if (BRIDGED_CONFIG_KEYS.includes(prop)) return true;
+      return prop in getStack();
+    },
+    ownKeys() {
+      return [
+        .../* @__PURE__ */ new Set([...Reflect.ownKeys(getStack()), ...BRIDGED_CONFIG_KEYS])
+      ];
+    },
+    getOwnPropertyDescriptor(_, prop) {
+      var _a;
+      if (BRIDGED_CONFIG_KEYS.includes(prop)) {
+        return {
+          configurable: true,
+          enumerable: true,
+          writable: true,
+          value: (_a = getStack().config) == null ? void 0 : _a[prop]
+        };
+      }
+      return Object.getOwnPropertyDescriptor(getStack(), prop);
+    }
+  }
+);
+var _livePreviewInitialized = false;
+var onEntryChange = ContentstackLivePreview.onEntryChange.bind(
+  ContentstackLivePreview
+);
+function initLivePreview() {
+  if (_livePreviewInitialized) return;
+  _livePreviewInitialized = true;
+  ContentstackLivePreview.init({
+    ssr: false,
+    enable: true,
+    mode: "builder",
+    stackSdk: stack,
+    stackDetails: {
+      apiKey: CONTENTSTACK_API_KEY,
+      environment: CONTENTSTACK_ENVIRONMENT
+    },
+    clientUrlParams: {
+      host: "app.contentstack.com"
+    },
+    editButton: {
+      enable: false
+    }
+  });
+}
+function isEditingMode() {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  if (window.self !== window.top) {
+    return true;
+  }
+  const params = new URLSearchParams(window.location.search);
+  return params.has("visual-builder") || params.has("contentstack") || params.has("live_preview");
+}
+var getContent = async ({
+  url,
+  uid,
+  contentType,
+  language,
+  referenceFields: referenceFields2 = []
+} = {}) => {
+  const tryFetch = async (locale) => {
+    var _a;
+    const CT = stack.contentType(contentType);
+    let fetched = null;
+    if (uid) {
+      fetched = await CT.entry(uid).locale(locale).includeReference(referenceFields2).fetch();
+    } else if (url) {
+      const urlWithSlash = url.startsWith("/") ? url : `/${url}`;
+      const result = await CT.entry().locale(locale).includeReference(referenceFields2).query({ url: urlWithSlash }).find();
+      fetched = (_a = result.entries) == null ? void 0 : _a[0];
+    }
+    if (isEditingMode() && fetched) {
+      addEditableTags(fetched, contentType, true, language, {
+        useLowerCaseLocale: false
+      });
+    }
+    return fetched;
+  };
+  try {
+    const result = await tryFetch(language);
+    return result;
+  } catch (error) {
+    console.warn(
+      "Failed to fetch content with language:",
+      language,
+      error.message
+    );
+    try {
+      const fallbackResult = await tryFetch("en");
+      return fallbackResult;
+    } catch (fallbackError) {
+      console.warn(
+        "Failed to fetch content with fallback language:",
+        fallbackError.message
+      );
+      return null;
+    }
+  }
+};
+export {
+  CONTENTSTACK_API_KEY,
+  CONTENTSTACK_DELIVERY_TOKEN,
+  CONTENTSTACK_ENVIRONMENT,
+  CONTENTSTACK_PREVIEW_TOKEN,
+  HeaderMFEContext,
+  HeaderPlaceholder,
+  Main_default as Main,
+  VB_EmptyBlockParentClass,
+  getContent,
+  getLocale,
+  getStackConfig,
+  initLivePreview,
+  isEditingMode,
+  onEntryChange,
+  referenceFields,
+  stack
+};
+//# sourceMappingURL=index.mjs.map

package/package-dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/HeaderPlaceholder.jsx","../src/Main.js","../src/styles/Main.styled.js","../src/utils/locale.js","../src/utils/config.js","../src/utils/contentstack.js","../src/constants.js"],"sourcesContent":["import React from \"react\";\n\n/**\n * Stub shell for the future header. Replace with real navigation/branding when\n * Contentstack content types and UX are defined.\n */\nexport default function HeaderPlaceholder() {\n  return (\n    <header role=\"banner\" data-testid=\"header-placeholder\">\n      <p>Header MFE — TODO: implement header content</p>\n    </header>\n  );\n}\n","import React, { createContext } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Routes, Route, BrowserRouter } from \"react-router-dom\";\nimport HeaderPlaceholder from \"./components/HeaderPlaceholder\";\nimport { AppContainer } from \"./styles/Main.styled\";\nimport \"./styles/globals.css\";\nimport { getLocale } from \"./utils/locale\";\n\nexport const HeaderMFEContext = createContext({ isMFE: true });\n\nfunction Main({ isMFE = true }) {\n  let { country, language } = getLocale();\n  country = country.toLocaleLowerCase();\n  language = language.toLocaleLowerCase();\n\n  const baseName = isMFE\n    ? `/${country}/${language}`\n    : `/${country}/${language}/static/header-mfe`;\n\n  return (\n    <HeaderMFEContext.Provider value={{ isMFE }}>\n      <BrowserRouter basename={baseName}>\n        <AppContainer>\n          <Routes>\n            <Route path=\"*\" element={<HeaderPlaceholder />} />\n          </Routes>\n        </AppContainer>\n      </BrowserRouter>\n    </HeaderMFEContext.Provider>\n  );\n}\n\nMain.propTypes = {\n  isMFE: PropTypes.bool,\n};\n\nexport default Main;\n","import styled from \"@emotion/styled\";\n\nexport const AppContainer = styled.div`\n  font-family: \"Inter\", sans-serif;\n`;\n","/**\n * Extracts the locale code from the provided URL or the current URL.\n *\n * @param options - An object with the following properties:\n * @param options.url - The URL to extract the locale code from. If not provided, the current URL will be used.\n * @param options.defaultLocale - The default locale code to use if the locale cannot be extracted from the URL.\n * @returns The locale code in the format \"language_COUNTRY\".\n */\nfunction getLocaleCodeFromUrl(options) {\n  const { url = \"\", defaultLocale = \"\" } = options ?? {};\n\n  let localeAsArr = [];\n\n  let tempUrl = url || (typeof location != \"undefined\" && location.href);\n\n  if (tempUrl) {\n    /* adding dummy domain since express originalUrl will not have request domain */\n    if (!tempUrl?.includes(\"https://\") && !tempUrl?.includes(\"http://\")) {\n      tempUrl = `https://domain.com${tempUrl}`;\n    }\n    const updatedUrl = new URL(tempUrl);\n\n    const pathParams = updatedUrl.pathname;\n    if (pathParams) {\n      const pathList = pathParams?.split(\"/\")?.filter(Boolean);\n      if (pathList.length > 1) {\n        localeAsArr = pathList;\n      }\n    }\n\n    if (localeAsArr.length > 2) {\n      localeAsArr = localeAsArr.slice(0, 2);\n    }\n  }\n  localeAsArr = localeAsArr.reverse();\n\n  if (localeAsArr.length === 0) {\n    localeAsArr = defaultLocale.split(\"_\");\n  }\n\n  return `${localeAsArr[1]?.toUpperCase()}-${localeAsArr[0]}`;\n}\n\nfunction getLocale({ url } = {}) {\n  const currentLocale = getLocaleCodeFromUrl(url ? { url } : null);\n  const splitLocale = currentLocale?.split(\"-\");\n\n  return {\n    locale: currentLocale,\n    language: splitLocale?.[1]?.toLowerCase(),\n    country: splitLocale?.[0]?.toUpperCase(),\n  };\n}\nexport { getLocale };\n","import { getLocale } from \"./locale\";\n\n/**\n * Stack-related config for Contentstack calls (e.g. getContent).\n * Set CONTENTSTACK_HEADER_CONTENT_TYPE in env when the header content type exists.\n */\nfunction getStackConfig() {\n  const { locale } = getLocale();\n  return {\n    contentType: process.env.CONTENTSTACK_HEADER_CONTENT_TYPE || \"\",\n    locale,\n  };\n}\n\nexport { getStackConfig };\n","import contentstack from \"@contentstack/delivery-sdk\";\nimport ContentstackLivePreview from \"@contentstack/live-preview-utils\";\nimport { addEditableTags } from \"@contentstack/utils\";\nimport {\n  CONTENTSTACK_API_KEY,\n  CONTENTSTACK_DELIVERY_TOKEN,\n  CONTENTSTACK_ENVIRONMENT,\n  CONTENTSTACK_PREVIEW_TOKEN,\n} from \"../constants\";\n\n/**\n * Contentstack delivery stack, live preview, and entry fetch.\n * TODO: Call getContent from header UI once CONTENTSTACK_HEADER_CONTENT_TYPE and\n * URL/slug strategy are defined; wire initLivePreview / onEntryChange in Visual Builder.\n */\n\n// Lazy-initialize the stack to avoid \"API key is required\" errors\n// when this module is loaded via Module Federation on the host server\n// (where env vars may not be available).\nlet _stack = null;\nfunction getStack() {\n  if (!_stack) {\n    _stack = contentstack.stack({\n      apiKey: CONTENTSTACK_API_KEY,\n      deliveryToken: CONTENTSTACK_DELIVERY_TOKEN,\n      environment: CONTENTSTACK_ENVIRONMENT,\n      live_preview: {\n        enable: true,\n        preview_token: CONTENTSTACK_PREVIEW_TOKEN,\n        host: \"rest-preview.contentstack.com\",\n      },\n    });\n  }\n  return _stack;\n}\n\nconst BRIDGED_CONFIG_KEYS = [\"live_preview\", \"headers\", \"environment\"];\n\nexport const stack = new Proxy(\n  {},\n  {\n    get(_, prop) {\n      const s = getStack();\n      if (BRIDGED_CONFIG_KEYS.includes(prop)) {\n        return s.config?.[prop];\n      }\n      return s[prop];\n    },\n    set(_, prop, value) {\n      const s = getStack();\n      if (BRIDGED_CONFIG_KEYS.includes(prop)) {\n        if (!s.config) return false;\n        s.config[prop] = value;\n        return true;\n      }\n      s[prop] = value;\n      return true;\n    },\n    has(_, prop) {\n      if (BRIDGED_CONFIG_KEYS.includes(prop)) return true;\n      return prop in getStack();\n    },\n    ownKeys() {\n      return [\n        ...new Set([...Reflect.ownKeys(getStack()), ...BRIDGED_CONFIG_KEYS]),\n      ];\n    },\n    getOwnPropertyDescriptor(_, prop) {\n      if (BRIDGED_CONFIG_KEYS.includes(prop)) {\n        return {\n          configurable: true,\n          enumerable: true,\n          writable: true,\n          value: getStack().config?.[prop],\n        };\n      }\n      return Object.getOwnPropertyDescriptor(getStack(), prop);\n    },\n  },\n);\n\nlet _livePreviewInitialized = false;\n\nexport const onEntryChange = ContentstackLivePreview.onEntryChange.bind(\n  ContentstackLivePreview,\n);\n\nexport function initLivePreview() {\n  if (_livePreviewInitialized) return;\n  _livePreviewInitialized = true;\n\n  ContentstackLivePreview.init({\n    ssr: false,\n    enable: true,\n    mode: \"builder\",\n    stackSdk: stack,\n    stackDetails: {\n      apiKey: CONTENTSTACK_API_KEY,\n      environment: CONTENTSTACK_ENVIRONMENT,\n    },\n    clientUrlParams: {\n      host: \"app.contentstack.com\",\n    },\n    editButton: {\n      enable: false,\n    },\n  });\n}\n\nexport function isEditingMode() {\n  if (typeof window === \"undefined\") {\n    return false;\n  }\n  if (window.self !== window.top) {\n    return true;\n  }\n\n  const params = new URLSearchParams(window.location.search);\n  return (\n    params.has(\"visual-builder\") ||\n    params.has(\"contentstack\") ||\n    params.has(\"live_preview\")\n  );\n}\n\nexport const getContent = async ({\n  url,\n  uid,\n  contentType,\n  language,\n  referenceFields = [],\n} = {}) => {\n  const tryFetch = async (locale) => {\n    const CT = stack.contentType(contentType);\n    let fetched = null;\n\n    if (uid) {\n      fetched = await CT.entry(uid)\n        .locale(locale)\n        .includeReference(referenceFields)\n        .fetch();\n    } else if (url) {\n      const urlWithSlash = url.startsWith(\"/\") ? url : `/${url}`;\n      const result = await CT.entry()\n        .locale(locale)\n        .includeReference(referenceFields)\n        .query({ url: urlWithSlash })\n        .find();\n      fetched = result.entries?.[0];\n    }\n    if (isEditingMode() && fetched) {\n      addEditableTags(fetched, contentType, true, language, {\n        useLowerCaseLocale: false,\n      });\n    }\n\n    return fetched;\n  };\n\n  try {\n    const result = await tryFetch(language);\n    return result;\n  } catch (error) {\n    console.warn(\n      \"Failed to fetch content with language:\",\n      language,\n      error.message,\n    );\n    try {\n      const fallbackResult = await tryFetch(\"en\");\n      return fallbackResult;\n    } catch (fallbackError) {\n      console.warn(\n        \"Failed to fetch content with fallback language:\",\n        fallbackError.message,\n      );\n      return null;\n    }\n  }\n};\n","const CONTENTSTACK_API_KEY = process.env.CONTENTSTACK_API_KEY;\nconst CONTENTSTACK_DELIVERY_TOKEN = process.env.CONTENTSTACK_DELIVERY_TOKEN;\nconst CONTENTSTACK_ENVIRONMENT = process.env.CONTENTSTACK_ENVIRONMENT;\nconst CONTENTSTACK_PREVIEW_TOKEN = process.env.CONTENTSTACK_PREVIEW_TOKEN;\n\n/**\n * Reference field UIDs for `includeReference` when fetching header entries.\n * TODO: populate when the header content model uses references.\n */\nconst referenceFields = [];\n\n// SSR-safe constant — avoids importing @contentstack/live-preview-utils\n// which accesses `window` at module load time.\nconst VB_EmptyBlockParentClass = \"visual-builder__empty-block-parent\";\n\nexport {\n  CONTENTSTACK_API_KEY,\n  CONTENTSTACK_DELIVERY_TOKEN,\n  CONTENTSTACK_ENVIRONMENT,\n  CONTENTSTACK_PREVIEW_TOKEN,\n  referenceFields,\n  VB_EmptyBlockParentClass,\n};\n"],"mappings":"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","names":["React","React","referenceFields"]}

package/package.json

@@ -0,0 +1,132 @@
+{
+  "name": "@nuskin/nextgen-header",
+  "version": "1.0.0-library-setup.1",
+  "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",
+    "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",
+    "build:server:dev": "rimraf dist/server && yarn webpack --mode development --progress --config config/webpack.server.js",
+    "build:server:prod": "rimraf dist/server && yarn webpack --mode production --progress --config config/webpack.server.js",
+    "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"
+  },
+  "keywords": [
+    "react",
+    "header",
+    "micro-frontend",
+    "contentstack"
+  ],
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "package-dist",
+    "readme.md"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "package-dist/**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./package-dist/index.d.ts",
+      "import": "./package-dist/index.mjs",
+      "require": "./package-dist/index.js"
+    },
+    "./index.css": "./package-dist/index.css"
+  },
+  "peerDependencies": {
+    "@contentstack/delivery-sdk": "^4.10.0",
+    "@contentstack/live-preview-utils": "^4.1.0",
+    "@contentstack/utils": "1.7.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "contentstack": "^3.26.0",
+    "prop-types": "^15.8.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^7.7.0"
+  },
+  "engines": {
+    "node": ">=24.0.0"
+  },
+  "dependencies": {
+    "@contentstack/delivery-sdk": "^4.10.3",
+    "@contentstack/live-preview-utils": "^4.1.2",
+    "@contentstack/utils": "1.7.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@loadable/babel-plugin": "^5.13.2",
+    "@loadable/component": "^5.16.4",
+    "@loadable/server": "^5.16.5",
+    "contentstack": "^3.26.2",
+    "core-js": "^3.39.0",
+    "cross-env": "7.0.3",
+    "dotenv": "^17.2.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.4",
+    "eslint-plugin-prettier": "^5.2.4",
+    "eslint-plugin-spellcheck": "^0.0.20",
+    "eslint-plugin-unused-imports": "^3.1.0",
+    "express": "^4.21.2",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "prettier": "^3.5.3",
+    "prop-types": "^15.8.1",
+    "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": {
+    "@babel/core": "^7.22.0",
+    "@babel/node": "7.24.7",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/preset-env": "^7.22.0",
+    "@babel/preset-react": "^7.22.0",
+    "@emotion/babel-plugin": "^11.13.5",
+    "@loadable/webpack-plugin": "5.15.2",
+    "@module-federation/enhanced": "0.15.0",
+    "@module-federation/node": "2.7.7",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.0",
+    "css-loader": "^6.8.0",
+    "dotenv-webpack": "^8.1.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "identity-obj-proxy": "^3.0.0",
+    "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",
+    "webpack-dev-server": "^4.15.0",
+    "webpack-federation-stats-plugin": "1.1.0",
+    "webpack-manifest-plugin": "^5.0.1",
+    "webpack-merge": "6.0.1"
+  }
+}

package/readme.md

@@ -0,0 +1,114 @@
+# Header MFE (`@nuskin/nextgen-header`)
+
+This repository produces **two** deployables:
+
+1. **Module Federation app** — Webpack builds `remoteEntry` and static assets for CDN/S3 (via GitLab `static-client-app` pipeline). Host apps load the remote as `header_mfe` / `./App`.
+2. **npm package** — `yarn build:package` emits `package-dist/` for **`@nuskin/nextgen-header`** on npmjs (via GitLab `npm-module-ci` release / pre-release jobs).
+
+The UI is intentionally minimal (`HeaderPlaceholder`). Replace it when navigation, Contentstack types, and analytics are defined.
+
+## Prerequisites
+
+- **Node.js 24+** (see `engines` in `package.json` and `.nvmrc` for `nvm` / `fnm`)
+- Yarn
+- Contentstack stack credentials (for real API calls)
+
+## Install (monorepo / local development)
+
+```bash
+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):
+
+```bash
+yarn add @nuskin/nextgen-header
+```
+
+**Example**
+
+```jsx
+import {
+  HeaderPlaceholder,
+  Main,
+  getLocale,
+  getStackConfig,
+} from "@nuskin/nextgen-header";
+import "@nuskin/nextgen-header/index.css";
+```
+
+- **Exports** are defined in [`src/library/index.js`](src/library/index.js) (barrel for the published API).
+- **Types** ship as [`src/library/index.d.ts`](src/library/index.d.ts) (copied to `package-dist/index.d.ts` on build).
+- **Styles**: the library build emits Emotion-related CSS under `package-dist/index.css`; import `@nuskin/nextgen-header/index.css` (see `package.json` `exports["./index.css"]`).
+
+**Build the tarball locally**
+
+```bash
+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.)
+
+### 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.
+
+## Environment variables
+
+Dotenv files are loaded per **webpack** build via `CMS_ENV` (see `package.json` scripts): `.env.local`, `.env.dev`, `.env.test`, `.env.prod`.
+
+| Variable | Purpose |
+|----------|---------|
+| `CONTENTSTACK_API_KEY` | Stack API key |
+| `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_BASENAME` is injected at build time from the client webpack config (static asset path segment).
+
+## Scripts
+
+| 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 test` | Jest + coverage |
+| `yarn lint` | ESLint on `src/` |
+
+## Host integration (Module Federation)
+
+| Item | Value |
+|------|--------|
+| Remote / global name | `header_mfe` (`globalThis['header_mfe']` on the server remote) |
+| Static public path | `/static/header-mfe/` |
+| Exposed module | `./App` only |
+
+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.
+
+## 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
+
+No header entry is fetched in the UI yet; wire `getContent` when the slug/UID strategy is decided.
+
+## GitLab CI
+
+- **`npm-module-ci.yml`** — release / pre-release publish to npmjs (`PRIVATE_NPM: "false"`); runs `yarn build:package` before publish.
+- **`static-client-app.yml`** — static MFE deploy; `APP_NAME` / `CONTENT_TYPE_UID` are set for that pipeline.
+
+## Local HTTPS / Storefront
+
+If your team still integrates with Storefront UI over HTTPS and a hosts file entry (e.g. `local.nuskin.com`), align URLs and micro-frontend resolution with that app’s documentation. This repo does not ship Storefront config.
+
+## License
+
+ISC