@campfire-interactive/shell-header 0.1.1

package/dist/index.d.ts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface AppDefinition {
+    id: string;
+    name: string;
+    icon: string;
+    /** Local dev port (e.g., 3000). Omit if the app doesn't run locally. */
+    localPort?: number;
+}
+interface ShellUser {
+    name: string;
+    email: string;
+    avatarUrl?: string;
+}
+interface ShellHeaderProps {
+    /** Current app ID — used to highlight the active app in the switcher */
+    appId: string;
+    /** Current user info for the avatar menu */
+    user: ShellUser;
+    /** App IDs the user is authorized to access in the current tenant */
+    authorizedApps: string[];
+    /** Unread notification count */
+    notificationCount?: number;
+    /** Called when the notification bell is clicked */
+    onNotificationClick?: () => void;
+    /** Called when logout is clicked */
+    onLogout?: () => void;
+    /** Optional center content (breadcrumbs, page title, etc.) */
+    children?: React.ReactNode;
+}
+
+declare function ShellHeader({ appId, user, authorizedApps, notificationCount, onNotificationClick, onLogout, children, }: ShellHeaderProps): react_jsx_runtime.JSX.Element;
+
+declare const appCatalog: AppDefinition[];
+/**
+ * Derive the app URL from the current hostname.
+ * - localhost → localhost:<localPort>
+ * - *.dev.campfiresuite.com → <id>.dev.campfiresuite.com
+ * - *.campfiresuite.com → <id>.campfiresuite.com
+ */
+declare function getAppUrl(app: AppDefinition): string;
+
+export { type AppDefinition, ShellHeader, type ShellHeaderProps, type ShellUser, appCatalog, getAppUrl };

package/dist/index.js

@@ -0,0 +1,221 @@
+// src/ShellHeader.tsx
+import "@campfire-interactive/design-tokens/tokens.css";
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/styles.css
+styleInject(".cfi-sh-header {\n  display: flex;\n  align-items: center;\n  height: var(--cfi-shell-header-height, 48px);\n  padding: 0 var(--cfi-spacing-md, 1rem);\n  background: var(--cfi-color-gray-900, #111827);\n  color: white;\n  font-family: var(--cfi-font-family, system-ui, sans-serif);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  box-shadow: var(--cfi-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07));\n  position: relative;\n  z-index: 50;\n}\n.cfi-sh-left {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n.cfi-sh-center {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 var(--cfi-spacing-md, 1rem);\n  overflow: hidden;\n}\n.cfi-sh-right {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-xs, 0.25rem);\n  flex-shrink: 0;\n}\n.cfi-sh-app-switcher {\n  position: relative;\n}\n.cfi-sh-app-trigger {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  padding: var(--cfi-spacing-xs, 0.25rem) var(--cfi-spacing-sm, 0.5rem);\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  color: white;\n  cursor: pointer;\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  font-family: inherit;\n  transition: background 150ms, border-color 150ms;\n}\n.cfi-sh-app-trigger:hover {\n  background: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.15);\n}\n.cfi-sh-app-name {\n  font-weight: 500;\n}\n.cfi-sh-chevron-open {\n  transform: rotate(180deg);\n}\n.cfi-sh-app-dropdown {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  min-width: 220px;\n  background: white;\n  border-radius: var(--cfi-radius-lg, 0.5rem);\n  box-shadow: var(--cfi-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));\n  border: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  padding: var(--cfi-spacing-xs, 0.25rem);\n  z-index: 100;\n}\n.cfi-sh-app-item {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  color: var(--cfi-color-gray-700, #374151);\n  text-decoration: none;\n  cursor: pointer;\n  transition: background 100ms;\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  font-family: inherit;\n}\n.cfi-sh-app-item:hover {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n}\n.cfi-sh-app-item-active {\n  background: var(--cfi-color-primary-50, #fff7ed);\n  color: var(--cfi-color-primary-700, #c2410c);\n  font-weight: 500;\n}\n.cfi-sh-app-item-active:hover {\n  background: var(--cfi-color-primary-100, #ffedd5);\n}\n.cfi-sh-icon-btn {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: transparent;\n  border: none;\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  color: var(--cfi-color-gray-300, #d1d5db);\n  cursor: pointer;\n  transition: background 150ms, color 150ms;\n}\n.cfi-sh-icon-btn:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: white;\n}\n.cfi-sh-badge {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: var(--cfi-color-error, #ef4444);\n  color: white;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n  border-radius: 99px;\n}\n.cfi-sh-user-menu {\n  position: relative;\n}\n.cfi-sh-avatar-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  background: var(--cfi-color-primary-600, #ea580c);\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: opacity 150ms;\n}\n.cfi-sh-avatar-btn:hover {\n  opacity: 0.85;\n}\n.cfi-sh-avatar-img {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  object-fit: cover;\n}\n.cfi-sh-avatar-initials {\n  color: white;\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  font-weight: 600;\n  font-family: inherit;\n}\n.cfi-sh-user-dropdown {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  min-width: 200px;\n  background: white;\n  border-radius: var(--cfi-radius-lg, 0.5rem);\n  box-shadow: var(--cfi-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));\n  border: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  z-index: 100;\n}\n.cfi-sh-user-header {\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n  display: flex;\n  flex-direction: column;\n}\n.cfi-sh-user-name {\n  font-weight: 500;\n  color: var(--cfi-color-gray-900, #111827);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n}\n.cfi-sh-user-email {\n  color: var(--cfi-color-gray-500, #6b7280);\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n}\n.cfi-sh-divider {\n  height: 1px;\n  background: var(--cfi-color-gray-200, #e5e7eb);\n}\n.cfi-sh-menu-item {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  width: 100%;\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n  background: none;\n  border: none;\n  color: var(--cfi-color-gray-700, #374151);\n  cursor: pointer;\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  font-family: inherit;\n  transition: background 100ms;\n}\n.cfi-sh-menu-item:hover {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n}\n");
+
+// src/AppSwitcher.tsx
+import { useState, useRef, useEffect } from "react";
+
+// src/appCatalog.ts
+var appCatalog = [
+  { id: "si", name: "Supplier Intelligence", icon: "Building2", localPort: 3e3 },
+  { id: "masterdata", name: "Master Data", icon: "Database", localPort: 3100 },
+  { id: "forecast", name: "Forecasting", icon: "TrendingUp", localPort: 3200 },
+  { id: "pim", name: "Price Index", icon: "BarChart3", localPort: 3300 },
+  { id: "cpq", name: "CPQ", icon: "Calculator", localPort: 3400 },
+  { id: "omsf", name: "OMSF", icon: "FileText", localPort: 3500 },
+  { id: "identity", name: "Identity", icon: "Shield", localPort: 3600 }
+];
+function getAppUrl(app) {
+  const host = typeof window !== "undefined" ? window.location.hostname : "";
+  const protocol = typeof window !== "undefined" ? window.location.protocol : "https:";
+  if (host === "localhost" || host === "127.0.0.1") {
+    return app.localPort ? `http://localhost:${app.localPort}` : "#";
+  }
+  if (host.includes(".dev.")) {
+    return `${protocol}//${app.id}.dev.campfiresuite.com`;
+  }
+  return `${protocol}//${app.id}.campfiresuite.com`;
+}
+
+// src/icons.tsx
+import {
+  Building2,
+  Database,
+  TrendingUp,
+  BarChart3,
+  Calculator,
+  FileText,
+  Shield,
+  LayoutGrid,
+  Bell,
+  ChevronDown,
+  LogOut,
+  User
+} from "lucide-react";
+var iconMap = {
+  Building2,
+  Database,
+  TrendingUp,
+  BarChart3,
+  Calculator,
+  FileText,
+  Shield
+};
+function getIcon(name) {
+  return iconMap[name] || LayoutGrid;
+}
+
+// src/AppSwitcher.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function AppSwitcher({ currentAppId, authorizedApps }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const currentApp = appCatalog.find((a) => a.id === currentAppId);
+  const visibleApps = appCatalog.filter((a) => authorizedApps.includes(a.id));
+  useEffect(() => {
+    function handleClickOutside(e) {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    if (open) document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+  const CurrentIcon = currentApp ? getIcon(currentApp.icon) : LayoutGrid;
+  return /* @__PURE__ */ jsxs("div", { className: "cfi-sh-app-switcher", ref, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "cfi-sh-app-trigger",
+        onClick: () => setOpen(!open),
+        "aria-expanded": open,
+        "aria-haspopup": "true",
+        children: [
+          /* @__PURE__ */ jsx(CurrentIcon, { size: 18 }),
+          /* @__PURE__ */ jsx("span", { className: "cfi-sh-app-name", children: currentApp?.name || "Apps" }),
+          /* @__PURE__ */ jsx(ChevronDown, { size: 14, className: open ? "cfi-sh-chevron-open" : void 0 })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { className: "cfi-sh-app-dropdown", children: visibleApps.map((app) => {
+      const Icon = getIcon(app.icon);
+      const isCurrent = app.id === currentAppId;
+      return /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: isCurrent ? void 0 : getAppUrl(app),
+          className: `cfi-sh-app-item ${isCurrent ? "cfi-sh-app-item-active" : ""}`,
+          onClick: isCurrent ? (e) => {
+            e.preventDefault();
+            setOpen(false);
+          } : void 0,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { size: 16 }),
+            /* @__PURE__ */ jsx("span", { children: app.name })
+          ]
+        },
+        app.id
+      );
+    }) })
+  ] });
+}
+
+// src/NotificationBell.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function NotificationBell({ count = 0, onClick }) {
+  return /* @__PURE__ */ jsxs2("button", { className: "cfi-sh-icon-btn", onClick, "aria-label": "Notifications", children: [
+    /* @__PURE__ */ jsx2(Bell, { size: 18 }),
+    count > 0 && /* @__PURE__ */ jsx2("span", { className: "cfi-sh-badge", children: count > 99 ? "99+" : count })
+  ] });
+}
+
+// src/UserMenu.tsx
+import { useState as useState2, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function UserMenu({ user, onLogout }) {
+  const [open, setOpen] = useState2(false);
+  const ref = useRef2(null);
+  useEffect2(() => {
+    function handleClickOutside(e) {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    if (open) document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+  const initials = user.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  return /* @__PURE__ */ jsxs3("div", { className: "cfi-sh-user-menu", ref, children: [
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        className: "cfi-sh-avatar-btn",
+        onClick: () => setOpen(!open),
+        "aria-expanded": open,
+        "aria-haspopup": "true",
+        children: user.avatarUrl ? /* @__PURE__ */ jsx3("img", { src: user.avatarUrl, alt: user.name, className: "cfi-sh-avatar-img" }) : /* @__PURE__ */ jsx3("span", { className: "cfi-sh-avatar-initials", children: initials })
+      }
+    ),
+    open && /* @__PURE__ */ jsxs3("div", { className: "cfi-sh-user-dropdown", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "cfi-sh-user-header", children: [
+        /* @__PURE__ */ jsx3("span", { className: "cfi-sh-user-name", children: user.name }),
+        /* @__PURE__ */ jsx3("span", { className: "cfi-sh-user-email", children: user.email })
+      ] }),
+      /* @__PURE__ */ jsx3("div", { className: "cfi-sh-divider" }),
+      /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          className: "cfi-sh-menu-item",
+          onClick: () => {
+            setOpen(false);
+            onLogout?.();
+          },
+          children: [
+            /* @__PURE__ */ jsx3(LogOut, { size: 14 }),
+            /* @__PURE__ */ jsx3("span", { children: "Sign out" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/ShellHeader.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ShellHeader({
+  appId,
+  user,
+  authorizedApps,
+  notificationCount,
+  onNotificationClick,
+  onLogout,
+  children
+}) {
+  return /* @__PURE__ */ jsxs4("header", { className: "cfi-sh-header", children: [
+    /* @__PURE__ */ jsx4("div", { className: "cfi-sh-left", children: /* @__PURE__ */ jsx4(AppSwitcher, { currentAppId: appId, authorizedApps }) }),
+    /* @__PURE__ */ jsx4("div", { className: "cfi-sh-center", children }),
+    /* @__PURE__ */ jsxs4("div", { className: "cfi-sh-right", children: [
+      /* @__PURE__ */ jsx4(NotificationBell, { count: notificationCount, onClick: onNotificationClick }),
+      /* @__PURE__ */ jsx4(UserMenu, { user, onLogout })
+    ] })
+  ] });
+}
+export {
+  ShellHeader,
+  appCatalog,
+  getAppUrl
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@campfire-interactive/shell-header",
+  "version": "0.1.1",
+  "description": "Shared shell header with app switcher for Campfire Suite",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@campfire-interactive/design-tokens": "*",
+    "lucide-react": "^0.460.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "esbuild-css-modules-plugin": "^3.1.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  }
+}