@isi-ui7/bos7-shared 0.2.0

package/src/shell/app-shell-layout.tsx

@@ -0,0 +1,494 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useI18n, useUi7Labels, type Ui7Locale } from "@isi-ui7/i18n";
+import { useAuth as defaultUseAuth } from "../auth7";
+import { handleShellProfileAction } from "./interaction";
+import { setupBranchVisibilitySync, switchBranchById } from "./branch";
+
+export interface AppShellAuthState {
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  user: {
+    name?: string | null;
+    email?: string | null;
+    roles?: string[] | null;
+    branch_id?: string | null;
+  } | null;
+  login: () => void;
+  logout: () => Promise<void> | void;
+}
+
+export type ShellNavItemLike = any;
+
+export interface ShellNotificationLike {
+  id?: string;
+  read?: boolean;
+  [key: string]: unknown;
+}
+
+interface Branch {
+  id: string;
+  name: string;
+  code?: string;
+  is_primary?: boolean;
+  is_current?: boolean;
+}
+
+interface RouterLike {
+  push: (href: string) => void;
+}
+
+interface ThemeLike {
+  displayName?: string;
+}
+
+interface NotificationBellLike {
+  badgeCount: number;
+  markAllRead: () => void;
+  onItemClick: (n: ShellNotificationLike) => void;
+  fetchBadge: () => void;
+}
+
+interface NotificationBellOptionsLike {
+  apiBase?: string;
+  enabled?: boolean;
+  onNavigate?: (href: string) => void;
+}
+
+interface UiShellLikeProps {
+  productName: string;
+  headerPrefix: string;
+  headerThemeVariant: any;
+  navItems: any[];
+  sideNavItems: ShellNavItemLike[];
+  sideNavMode: string;
+  onSideNavSelect: (href: string) => void;
+  notifications: {
+    badgeCount: number;
+    /** Bumping this value forces ui-shell to re-fetch the panel list. */
+    fetchKey?: number;
+    onFetch: () => Promise<ShellNotificationLike[]>;
+    onMarkAllRead: () => void;
+    onItemClick: (n: ShellNotificationLike) => void;
+    viewAllHref: string;
+    viewAllTarget: string;
+  };
+  userProfile: {
+    name: string;
+    role?: string;
+    email: string;
+  };
+  profileActions: string[];
+  onProfileAction: (action: string) => void;
+  profileExtra?: ReactNode;
+  apps: {
+    onFetch: () => Promise<Array<{ href: string }>>;
+    onAppSelect: (app: { href: string }) => void;
+  };
+  children: ReactNode;
+}
+
+export type AppSwitchMode = "push" | "location";
+
+export interface AppShellLayoutDeps {
+  usePathname: () => string;
+  useRouter: () => RouterLike;
+  useTheme: () => { theme: ThemeLike };
+  useNotificationBell: (opts: NotificationBellOptionsLike) => NotificationBellLike;
+  GlobalTheme: any;
+  ModalProvider: any;
+  UiShell: any;
+  useAuth?: () => AppShellAuthState;
+}
+
+export interface AppShellLayoutProps {
+  children: ReactNode;
+  deps: AppShellLayoutDeps;
+  navItems: ShellNavItemLike[];
+  markActive: (items: ShellNavItemLike[], pathname: string) => ShellNavItemLike[];
+  appNameFallback: string;
+  auth7UiUrlFallback?: string;
+  portalUrlFallback?: string;
+  roleFallback?: string;
+  appSwitchMode?: AppSwitchMode;
+  resolveNotificationHref?: (href: string, navigate: (href: string) => void) => void;
+  notificationsViewAllHref?: string;
+  notificationsViewAllTarget?: string;
+  hideMenuButton?: boolean;
+  disableAppsMenu?: boolean;
+  sideNavMode?: "drilldown" | "overlay";
+  sideNavItems?: ShellNavItemLike[];
+}
+
+function BranchDropdown({
+  branches,
+  currentBranch,
+  onSwitch,
+}: {
+  branches: Branch[];
+  currentBranch: Branch | null;
+  onSwitch: (branch: Branch) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const { t } = useI18n();
+
+  return (
+    <div data-testid="branch-selector" className="profile-branch-dropdown">
+      <button type="button" className="profile-branch-dropdown__trigger" onClick={() => setOpen((v) => !v)} aria-expanded={open}>
+        <span className="profile-branch-dropdown__current">
+          <span className="profile-branch-section__label" style={{ margin: 0 }}>{t("ui7.branchLabel", "Cabang")}</span>
+          <span className="profile-branch-item__code">{currentBranch?.code || currentBranch?.name || "—"}</span>
+        </span>
+        <span className="profile-branch-dropdown__chevron" aria-hidden="true">{open ? "▲" : "▼"}</span>
+      </button>
+      {open && (
+        <div className="profile-branch-dropdown__list">
+          {branches.length === 0 && (
+            <button type="button" className="profile-branch-item profile-branch-item--active" onClick={() => setOpen(false)}>
+              <span className="profile-branch-item__code">{currentBranch?.code || currentBranch?.name || "—"}</span>
+            </button>
+          )}
+          {branches.map((b) => (
+            <button
+              key={b.id}
+              type="button"
+              className={`profile-branch-item${b.id === currentBranch?.id ? " profile-branch-item--active" : ""}`}
+              onClick={() => {
+                setOpen(false);
+                if (b.id !== currentBranch?.id) onSwitch(b);
+              }}
+            >
+              <span className="profile-branch-item__code">{b.code || b.name}</span>
+              {b.code && b.name && b.code !== b.name && <span className="profile-branch-item__name">{b.name}</span>}
+              {b.id === currentBranch?.id && <span className="profile-branch-item__check" aria-hidden="true">✓</span>}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function LanguageSelector() {
+  const { t, locale, setLocale } = useI18n();
+  const [open, setOpen] = useState(false);
+  const itemClass = (value: Ui7Locale) =>
+    `profile-branch-item${locale === value ? " profile-branch-item--active" : ""}`;
+  const currentLabel =
+    locale === "en" ? t("ui7.languageEn", "English") : t("ui7.languageId", "Bahasa Indonesia");
+  const titleLabel = locale === "en" ? "Language" : "Bahasa";
+  const setLocalePreference = useCallback((next: Ui7Locale) => {
+    setLocale(next);
+    void fetch("/api/auth/preferences", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ locale: next }),
+    }).catch(() => {});
+  }, [setLocale]);
+
+  return (
+    <div data-testid="language-selector" className="profile-branch-dropdown">
+      <button type="button" className="profile-branch-dropdown__trigger" onClick={() => setOpen((v) => !v)} aria-expanded={open}>
+        <span className="profile-branch-dropdown__current">
+          <span className="profile-branch-section__label" style={{ margin: 0 }}>
+            {titleLabel}
+          </span>
+          <span className="profile-branch-item__code">{currentLabel}</span>
+        </span>
+        <span className="profile-branch-dropdown__chevron" aria-hidden="true">{open ? "▲" : "▼"}</span>
+      </button>
+      {open && (
+        <div className="profile-branch-dropdown__list">
+          <button type="button" className={itemClass("id")} onClick={() => { setLocalePreference("id"); setOpen(false); }}>
+            <span className="profile-branch-item__code">{t("ui7.languageId", "Bahasa Indonesia")}</span>
+            {locale === "id" && <span className="profile-branch-item__check" aria-hidden="true">✓</span>}
+          </button>
+          <button type="button" className={itemClass("en")} onClick={() => { setLocalePreference("en"); setOpen(false); }}>
+            <span className="profile-branch-item__code">{t("ui7.languageEn", "English")}</span>
+            {locale === "en" && <span className="profile-branch-item__check" aria-hidden="true">✓</span>}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function AppShellLayout({
+  children,
+  deps,
+  navItems,
+  markActive,
+  appNameFallback,
+  auth7UiUrlFallback = "http://localhost:3001",
+  portalUrlFallback = "https://portal.bos7.local",
+  roleFallback = "",
+  appSwitchMode = "location",
+  resolveNotificationHref,
+  notificationsViewAllHref,
+  notificationsViewAllTarget = "bos7PortalNotificationsWindow",
+  hideMenuButton = false,
+  disableAppsMenu = false,
+  sideNavMode = "drilldown",
+  sideNavItems,
+}: AppShellLayoutProps) {
+  const corporateId = process.env.NEXT_PUBLIC_CORPORATE_ID || "carbon-default";
+  const appName = process.env.NEXT_PUBLIC_APP_NAME || appNameFallback;
+  const auth7UiUrl = process.env.NEXT_PUBLIC_AUTH7_URL || auth7UiUrlFallback;
+  const portalUrl = process.env.NEXT_PUBLIC_PORTAL_URL || portalUrlFallback;
+
+  const pathname = deps.usePathname();
+  const router = deps.useRouter();
+  const useAuthHook = deps.useAuth ?? defaultUseAuth;
+  const { isAuthenticated, isLoading, user, login, logout } = useAuthHook();
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) login();
+  }, [isLoading, isAuthenticated, login]);
+
+  const { badgeCount, markAllRead, onItemClick, fetchBadge } = deps.useNotificationBell({
+    apiBase: "/api/notifications",
+    enabled: isAuthenticated,
+  });
+
+  useEffect(() => {
+    const handler = () => fetchBadge();
+    window.addEventListener("notif:badge-refresh", handler);
+    return () => window.removeEventListener("notif:badge-refresh", handler);
+  }, [fetchBadge]);
+
+  const handleNotifItemClick = useCallback((n: ShellNotificationLike) => {
+    if (!n.read && n.id) {
+      fetch(`/api/notifications/${n.id}/read`, { method: "PATCH" })
+        .then(() => fetchBadge())
+        .catch(() => {});
+    }
+    onItemClick({ ...n, actionHref: undefined });
+    const actionHref = typeof n.actionHref === "string" ? n.actionHref : "";
+    if (actionHref) {
+      if (resolveNotificationHref) {
+        resolveNotificationHref(actionHref, (href: string) => router.push(href));
+      } else {
+        router.push(actionHref);
+      }
+    }
+  }, [onItemClick, fetchBadge, resolveNotificationHref, router]);
+
+  const resolvedSideNavItems = useMemo(() => markActive(navItems, pathname), [markActive, navItems, pathname]);
+
+  // Pre-auth render: never expose the page tree directly — pages may call
+  // hooks (useModal, etc.) that require providers only mounted in the
+  // authenticated branch below. When another tab logs out, `isAuthenticated`
+  // flips to false synchronously and the redirect is async — without this
+  // guard the page re-renders bare and crashes with
+  // "useModal must be used within <ModalProvider>".
+  if (isLoading || !isAuthenticated) {
+    return (
+      <div style={{ padding: "2rem", color: "#525252" }}>
+        {isLoading ? "Loading…" : "Redirecting to sign-in…"}
+      </div>
+    );
+  }
+
+  return (
+    <ThemedShellLayout
+      deps={deps}
+      corporateId={corporateId}
+      appName={appName}
+      auth7UiUrl={auth7UiUrl}
+      portalUrl={portalUrl}
+      roleFallback={roleFallback}
+      appSwitchMode={appSwitchMode}
+      notificationsViewAllHref={notificationsViewAllHref ?? `${portalUrl}/notifications`}
+      notificationsViewAllTarget={notificationsViewAllTarget}
+      hideMenuButton={hideMenuButton}
+      disableAppsMenu={disableAppsMenu}
+      sideNavMode={sideNavMode}
+      sideNavItems={sideNavItems ?? resolvedSideNavItems}
+      resolvedSideNavItems={resolvedSideNavItems}
+      notifBadgeCount={badgeCount}
+      userName={user?.name}
+      userEmail={user?.email}
+      userRole={user?.roles?.[0]}
+      userBranchId={user?.branch_id}
+      onNavigate={(href: string) => router.push(href)}
+      onMarkAllRead={markAllRead}
+      onNotifItemClick={handleNotifItemClick}
+      onLogout={() => { void logout(); }}
+    >
+      {children}
+    </ThemedShellLayout>
+  );
+}
+
+function ThemedShellLayout({
+  deps,
+  corporateId,
+  children,
+  ...rest
+}: {
+  deps: AppShellLayoutDeps;
+  corporateId: string;
+  children: ReactNode;
+} & Omit<Parameters<typeof ShellInner>[0], "deps" | "children">) {
+  const GlobalTheme = deps.GlobalTheme;
+  const ProviderModal = deps.ModalProvider;
+  const labels = useUi7Labels();
+  return (
+    <GlobalTheme corporateId={corporateId} variant="white" labels={labels}>
+      <ProviderModal>
+        <ShellInner deps={deps} {...rest}>
+          {children}
+        </ShellInner>
+      </ProviderModal>
+    </GlobalTheme>
+  );
+}
+
+function ShellInner({
+  deps,
+  appName,
+  auth7UiUrl,
+  portalUrl,
+  roleFallback,
+  appSwitchMode,
+  notificationsViewAllHref,
+  notificationsViewAllTarget,
+  hideMenuButton,
+  disableAppsMenu,
+  sideNavMode,
+  sideNavItems,
+  resolvedSideNavItems,
+  notifBadgeCount,
+  userName,
+  userEmail,
+  userRole,
+  userBranchId,
+  onNavigate,
+  onMarkAllRead,
+  onNotifItemClick,
+  onLogout,
+  children,
+}: {
+  deps: AppShellLayoutDeps;
+  appName: string;
+  auth7UiUrl: string;
+  portalUrl: string;
+  roleFallback: string;
+  appSwitchMode: AppSwitchMode;
+  notificationsViewAllHref: string;
+  notificationsViewAllTarget: string;
+  hideMenuButton: boolean;
+  disableAppsMenu: boolean;
+  sideNavMode: "drilldown" | "overlay";
+  sideNavItems: ShellNavItemLike[];
+  resolvedSideNavItems: ShellNavItemLike[];
+  notifBadgeCount: number;
+  userName?: string | null;
+  userEmail?: string | null;
+  userRole?: string | null;
+  userBranchId?: string | null;
+  onNavigate: (href: string) => void;
+  onMarkAllRead: () => void;
+  onNotifItemClick: (n: ShellNotificationLike) => void;
+  onLogout: () => void;
+  children: ReactNode;
+}) {
+  const { theme } = deps.useTheme();
+  const [branches, setBranches] = useState<Branch[]>([]);
+  const [currentBranch, setCurrentBranch] = useState<Branch | null>(null);
+
+  useEffect(() => {
+    fetch("/api/auth/branches")
+      .then((r) => (r.ok ? r.json() : null))
+      .then((d: { branches?: Branch[] } | null) => {
+        if (!d?.branches?.length) {
+          if (userBranchId) {
+            const fallback = { id: userBranchId, name: userBranchId, code: userBranchId, is_current: true };
+            setBranches([fallback]);
+            setCurrentBranch(fallback);
+          }
+          return;
+        }
+        const normalized = d.branches.map((b: Branch) => ({ ...b, is_current: b.id === userBranchId }));
+        setBranches(normalized);
+        setCurrentBranch(normalized.find((b) => b.is_current) ?? normalized[0]);
+      })
+      .catch(() => {
+        if (userBranchId) {
+          const fallback = { id: userBranchId, name: userBranchId, code: userBranchId, is_current: true };
+          setBranches([fallback]);
+          setCurrentBranch(fallback);
+        }
+      });
+  }, [userBranchId]);
+
+  useEffect(() => setupBranchVisibilitySync(userBranchId ?? undefined), [userBranchId]);
+
+  const switchBranch = useCallback(async (branch: Branch) => {
+    const ok = await switchBranchById(branch.id);
+    if (ok) window.location.reload();
+  }, []);
+
+  const roleDisplay = userRole
+    ? `${userRole.charAt(0).toUpperCase()}${userRole.slice(1)}`
+    : roleFallback || undefined;
+
+  const profileExtra = (
+    <>
+      <BranchDropdown branches={branches} currentBranch={currentBranch} onSwitch={switchBranch} />
+      <LanguageSelector />
+    </>
+  );
+
+  const ShellUi = deps.UiShell;
+
+  return (
+    <ShellUi
+      productName={appName}
+      headerPrefix={theme.displayName ?? "Core7"}
+      headerThemeVariant="g90"
+      navItems={[]}
+      sideNavItems={sideNavItems}
+      sideNavMode={sideNavMode}
+      onSideNavSelect={onNavigate}
+      notifications={{
+        badgeCount: notifBadgeCount,
+        // fetchKey ties the panel list to the SSE-driven badge counter.
+        // ui-shell re-fetches whenever fetchKey changes, so a new notification
+        // (which bumps badgeCount via useNotificationBell) also refreshes the
+        // panel — including while it's currently open.
+        fetchKey: notifBadgeCount,
+        onFetch: () => fetch("/api/notifications").then((r) => r.json()).then((d) => d.notifications as ShellNotificationLike[]),
+        onMarkAllRead,
+        onItemClick: onNotifItemClick,
+        viewAllHref: notificationsViewAllHref,
+        viewAllTarget: notificationsViewAllTarget,
+      }}
+      userProfile={{
+        name: userName || "User",
+        role: roleDisplay,
+        email: userEmail || "",
+      }}
+      profileActions={["profile", "change-password", "logout"]}
+      onProfileAction={(action: string) => handleShellProfileAction(action, auth7UiUrl, onLogout)}
+      profileExtra={profileExtra}
+      apps={disableAppsMenu
+        ? undefined
+        : {
+            onFetch: () => fetch("/api/apps").then((r) => r.json()).then((d) => d.apps as Array<{ href: string }>),
+            onAppSelect: (app: { href: string }) => {
+              if (appSwitchMode === "push") {
+                onNavigate(app.href);
+                return;
+              }
+              window.location.href = app.href;
+            },
+          }}
+      hideMenuButton={hideMenuButton}
+    >
+      {children}
+    </ShellUi>
+  );
+}

package/src/shell/branch.ts

@@ -0,0 +1,48 @@
+function readCookie(name: string): string | undefined {
+  return document.cookie
+    .split("; ")
+    .find((entry) => entry.startsWith(`${name}=`))
+    ?.split("=")[1];
+}
+
+export async function switchBranchById(
+  branchId: string,
+  endpoint = "/api/auth/switch-branch"
+): Promise<boolean> {
+  try {
+    const res = await fetch(endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ branch_id: branchId }),
+    });
+    return res.ok;
+  } catch {
+    return false;
+  }
+}
+
+export function setupBranchVisibilitySync(
+  currentBranchId: string | null | undefined,
+  options?: {
+    cookieName?: string;
+    endpoint?: string;
+    onSynced?: () => void;
+  }
+): () => void {
+  const cookieName = options?.cookieName ?? "bos7_branch";
+  const endpoint = options?.endpoint ?? "/api/auth/switch-branch";
+  const onSynced = options?.onSynced ?? (() => window.location.reload());
+
+  const sync = () => {
+    if (document.visibilityState !== "visible") return;
+    const cookieBranch = readCookie(cookieName);
+    if (!cookieBranch || cookieBranch === currentBranchId) return;
+
+    void switchBranchById(cookieBranch, endpoint).then((ok) => {
+      if (ok) onSynced();
+    });
+  };
+
+  document.addEventListener("visibilitychange", sync);
+  return () => document.removeEventListener("visibilitychange", sync);
+}

package/src/shell/interaction.ts

@@ -0,0 +1,17 @@
+export type ShellProfileAction = "profile" | "change-password" | "logout" | string;
+
+export function handleShellProfileAction(
+  action: ShellProfileAction,
+  auth7UiUrl: string,
+  onLogout: () => void
+): void {
+  if (action === "profile") {
+    window.open(`${auth7UiUrl}/profile`, "_blank");
+    return;
+  }
+  if (action === "change-password") {
+    window.open(`${auth7UiUrl}/security/change-password`, "_blank");
+    return;
+  }
+  onLogout();
+}

package/src/shell/provider.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import type { ComponentType, ReactNode } from "react";
+import { AuthProvider } from "../auth7/provider";
+import { I18nProvider } from "@isi-ui7/i18n";
+
+type ProviderLayoutProps = {
+  children: ReactNode;
+};
+
+type SharedShellProviderProps = {
+  children: ReactNode;
+  Layout: ComponentType<ProviderLayoutProps>;
+};
+
+type SharedShellProviderOptions = {
+  withAuth?: boolean;
+  dictionaries?: Partial<Record<"id" | "en", Record<string, string>>>;
+};
+
+export function createShellProvider(options?: SharedShellProviderOptions) {
+  const withAuth = options?.withAuth ?? true;
+  const dictionaries = options?.dictionaries;
+
+  return function SharedShellProvider({ children, Layout }: SharedShellProviderProps) {
+    const content = (
+      <I18nProvider dictionaries={dictionaries}>
+        <Layout>{children}</Layout>
+      </I18nProvider>
+    );
+    if (!withAuth) return content;
+    return <AuthProvider>{content}</AuthProvider>;
+  };
+}

package/src/style-contract.test.ts

@@ -0,0 +1,59 @@
+import {
+  getUi7FormContractClassName,
+  getUi7FormDensityClassName,
+  normalizeUi7FormDensity,
+  UI7_FORM_VISUAL_CLASSNAMES,
+  UI7_FORM_VISUAL_TOKENS
+} from "./style-contract";
+
+describe("ui7 form visual contract", () => {
+  it("exposes stable visual tokens", () => {
+    expect(UI7_FORM_VISUAL_TOKENS).toEqual({
+      labelSpacing: "6px",
+      labelFontSize: "12px",
+      labelFontWeight: 500,
+      labelLineHeight: "16px",
+      inputFontSize: "14px",
+      inputFontWeight: 400,
+      inputLineHeight: "20px",
+      controlHeight: "40px",
+      textareaMinHeight: "88px",
+      rowGap: "16px",
+      sectionGap: "24px",
+      columnGap: "16px",
+      readonlyBackground: "#f4f4f4",
+      readonlyCursor: "default"
+    });
+  });
+
+  it("normalizes density aliases without breaking compact defaults", () => {
+    expect(normalizeUi7FormDensity("compact")).toBe("compact");
+    expect(normalizeUi7FormDensity("comfortable")).toBe("comfortable");
+    expect(normalizeUi7FormDensity("normal")).toBe("comfortable");
+    expect(normalizeUi7FormDensity(undefined)).toBe("compact");
+  });
+
+  it("maps density to stable class names", () => {
+    expect(getUi7FormDensityClassName("compact")).toBe(UI7_FORM_VISUAL_CLASSNAMES.densityCompact);
+    expect(getUi7FormDensityClassName("normal")).toBe(
+      UI7_FORM_VISUAL_CLASSNAMES.densityComfortable
+    );
+  });
+
+  it("builds a scope class list for consumers", () => {
+    expect(
+      getUi7FormContractClassName({
+        density: "comfortable",
+        readonly: true,
+        className: "custom-form-scope"
+      })
+    ).toBe(
+      [
+        UI7_FORM_VISUAL_CLASSNAMES.scope,
+        UI7_FORM_VISUAL_CLASSNAMES.densityComfortable,
+        UI7_FORM_VISUAL_CLASSNAMES.readonly,
+        "custom-form-scope"
+      ].join(" ")
+    );
+  });
+});