@brokr/sdk 1.0.0 → 2.0.0

package/dist/react-notifications.mjs

@@ -0,0 +1,254 @@
+"use client";
+
+// src/react/notifications/NotificationBell.tsx
+import React3, { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+
+// src/react/notifications/use-notifications.ts
+import { useContext } from "react";
+
+// src/react/notifications/provider.tsx
+import React2, {
+  createContext,
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+
+// src/notifications/config.ts
+function defineNotifications(config) {
+  return config;
+}
+
+// src/notifications/registry.ts
+function resolveNotificationType(registry, type, data) {
+  const entry = registry[type ?? "default"];
+  if (!entry) {
+    return { image: null, href: null, variant: "default", suppressKey: null };
+  }
+  let image = null;
+  try {
+    image = entry.imageResolver?.(data) ?? null;
+  } catch {
+  }
+  let href = null;
+  try {
+    href = entry.hrefResolver?.(data) ?? null;
+  } catch {
+  }
+  let suppressKey = null;
+  try {
+    suppressKey = entry.suppressKey?.(data) ?? null;
+  } catch {
+  }
+  return {
+    image,
+    href,
+    variant: entry.defaultVariant ?? "default",
+    suppressKey
+  };
+}
+
+// src/react/notifications/Toast.tsx
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+// src/react/notifications/provider.tsx
+var NotificationsContext = createContext(null);
+
+// src/react/notifications/use-notifications.ts
+function useNotifications() {
+  const ctx = useContext(NotificationsContext);
+  if (!ctx) {
+    throw new Error(
+      "useNotifications() requires <BrokrProvider notifications> or <BrokrProvider notifications={config}>. Pass the notifications prop to enable the notification system."
+    );
+  }
+  return ctx;
+}
+
+// src/react/notifications/NotificationBell.tsx
+function timeAgo(iso) {
+  const diff = Date.now() - new Date(iso).getTime();
+  const mins = Math.floor(diff / 6e4);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+function NotificationBell() {
+  const { notifications, unreadCount, markRead, markAllRead, isLoading, registry } = useNotifications();
+  const [open, setOpen] = useState3(false);
+  const containerRef = useRef3(null);
+  const markReadTimerRef = useRef3(null);
+  const toggle = useCallback3(() => setOpen((o) => !o), []);
+  useEffect3(() => {
+    if (markReadTimerRef.current) {
+      clearTimeout(markReadTimerRef.current);
+      markReadTimerRef.current = null;
+    }
+    if (open && unreadCount > 0) {
+      markReadTimerRef.current = setTimeout(() => {
+        markAllRead();
+      }, 800);
+    }
+    return () => {
+      if (markReadTimerRef.current) {
+        clearTimeout(markReadTimerRef.current);
+        markReadTimerRef.current = null;
+      }
+    };
+  }, [open, unreadCount, markAllRead]);
+  useEffect3(() => {
+    if (!open) return;
+    function handleClick(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+  useEffect3(() => {
+    if (!open) return;
+    function handleKey(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open]);
+  const sorted = useMemo3(
+    () => [...notifications].sort(
+      (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+    ),
+    [notifications]
+  );
+  const handleItemClick = useCallback3((notif) => {
+    if (!notif.read) markRead(notif.id);
+    const notifData = notif.data ?? {};
+    const notifType = notif.type ?? notifData.type ?? "default";
+    const resolved = resolveNotificationType(registry, notifType, notifData);
+    const href = resolved.href ?? notif.href ?? notifData.href ?? null;
+    if (href) {
+      window.location.assign(href);
+    }
+  }, [markRead, registry]);
+  return /* @__PURE__ */ React3.createElement("div", { className: "brokr-notif-bell-wrap", ref: containerRef }, /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      type: "button",
+      className: "brokr-notif-bell",
+      onClick: toggle,
+      "aria-label": `Notifications${unreadCount > 0 ? ` (${unreadCount} unread)` : ""}`,
+      "aria-expanded": open
+    },
+    /* @__PURE__ */ React3.createElement("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React3.createElement("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }), /* @__PURE__ */ React3.createElement("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })),
+    unreadCount > 0 && /* @__PURE__ */ React3.createElement("span", { className: "brokr-notif-badge" }, unreadCount > 99 ? "99+" : unreadCount)
+  ), open && /* @__PURE__ */ React3.createElement("div", { className: "brokr-notif-dropdown", role: "menu" }, /* @__PURE__ */ React3.createElement("div", { className: "brokr-notif-dropdown-header" }, /* @__PURE__ */ React3.createElement("span", { className: "brokr-notif-dropdown-title" }, "Notifications"), unreadCount > 0 && /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      type: "button",
+      className: "brokr-notif-mark-all",
+      onClick: markAllRead
+    },
+    "Mark all read"
+  )), /* @__PURE__ */ React3.createElement("div", { className: "brokr-notif-dropdown-list" }, isLoading ? /* @__PURE__ */ React3.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ React3.createElement("span", { className: "brokr-notif-empty-text" }, "Loading\u2026")) : sorted.length === 0 ? /* @__PURE__ */ React3.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ React3.createElement("span", { className: "brokr-notif-empty-text" }, "No notifications yet")) : sorted.map((notif) => {
+    const notifData = notif.data ?? {};
+    const notifType = notifData.type ?? "default";
+    const resolved = resolveNotificationType(registry, notifType, notifData);
+    return /* @__PURE__ */ React3.createElement(
+      "button",
+      {
+        key: notif.id,
+        type: "button",
+        className: `brokr-notif-item${notif.read ? "" : " brokr-notif-item--unread"}`,
+        onClick: () => handleItemClick(notif),
+        role: "menuitem"
+      },
+      resolved.image ? /* @__PURE__ */ React3.createElement(
+        "img",
+        {
+          src: resolved.image.url,
+          alt: resolved.image.alt,
+          className: "brokr-notif-item-logo"
+        }
+      ) : /* @__PURE__ */ React3.createElement("span", { className: `brokr-notif-item-dot brokr-notif-item-dot--${notif.variant}` }),
+      /* @__PURE__ */ React3.createElement("div", { className: "brokr-notif-item-body" }, /* @__PURE__ */ React3.createElement("span", { className: "brokr-notif-item-title" }, notif.title), /* @__PURE__ */ React3.createElement("span", { className: "brokr-notif-item-message" }, notif.message)),
+      /* @__PURE__ */ React3.createElement("span", { className: "brokr-notif-item-time" }, timeAgo(notif.createdAt))
+    );
+  }))));
+}
+
+// src/react/notifications/NotificationList.tsx
+import React4, { useCallback as useCallback4, useMemo as useMemo4 } from "react";
+function formatTimestamp(iso) {
+  const date = new Date(iso);
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  }).format(date);
+}
+function NotificationListSkeleton() {
+  return /* @__PURE__ */ React4.createElement("div", { className: "brokr-notif-list-items" }, [1, 2, 3].map((i) => /* @__PURE__ */ React4.createElement("div", { key: i, className: "brokr-notif-list-row brokr-notif-list-row--skeleton" }, /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-item-dot brokr-notif-item-dot--skeleton" }), /* @__PURE__ */ React4.createElement("div", { className: "brokr-notif-item-body" }, /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-item-title brokr-skeleton-line", style: { width: "60%" } }), /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-item-message brokr-skeleton-line", style: { width: "80%" } })), /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-item-time brokr-skeleton-line", style: { width: 48 } }))));
+}
+function NotificationList() {
+  const { notifications, unreadCount, markRead, markAllRead, isLoading, registry } = useNotifications();
+  const sorted = useMemo4(
+    () => [...notifications].sort(
+      (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+    ),
+    [notifications]
+  );
+  const handleClick = useCallback4((notif) => {
+    if (!notif.read) markRead(notif.id);
+    const notifData = notif.data ?? {};
+    const notifType = notif.type ?? notifData.type ?? "default";
+    const resolved = resolveNotificationType(registry, notifType, notifData);
+    const href = resolved.href ?? notif.href ?? notifData.href ?? null;
+    if (href) {
+      window.location.assign(href);
+    }
+  }, [markRead, registry]);
+  return /* @__PURE__ */ React4.createElement("div", { className: "brokr-notif-list" }, /* @__PURE__ */ React4.createElement("div", { className: "brokr-notif-list-header" }, /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-list-title" }, "Notifications"), unreadCount > 0 && /* @__PURE__ */ React4.createElement(
+    "button",
+    {
+      type: "button",
+      className: "brokr-notif-mark-all",
+      onClick: markAllRead
+    },
+    "Mark all read"
+  )), isLoading ? /* @__PURE__ */ React4.createElement(NotificationListSkeleton, null) : sorted.length === 0 ? /* @__PURE__ */ React4.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ React4.createElement("svg", { "aria-hidden": "true", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round", strokeLinejoin: "round", style: { opacity: 0.3 } }, /* @__PURE__ */ React4.createElement("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }), /* @__PURE__ */ React4.createElement("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })), /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-empty-text" }, "No notifications yet")) : /* @__PURE__ */ React4.createElement("div", { className: "brokr-notif-list-items" }, sorted.map((notif) => {
+    const notifData = notif.data ?? {};
+    const notifType = notif.type ?? notifData.type ?? "default";
+    const resolved = resolveNotificationType(registry, notifType, notifData);
+    return /* @__PURE__ */ React4.createElement(
+      "button",
+      {
+        key: notif.id,
+        type: "button",
+        className: `brokr-notif-list-row${notif.read ? "" : " brokr-notif-list-row--unread"}`,
+        onClick: () => handleClick(notif)
+      },
+      resolved.image ? /* @__PURE__ */ React4.createElement(
+        "img",
+        {
+          src: resolved.image.url,
+          alt: resolved.image.alt,
+          className: "brokr-notif-item-logo"
+        }
+      ) : /* @__PURE__ */ React4.createElement("span", { className: `brokr-notif-item-dot brokr-notif-item-dot--${notif.variant}` }),
+      /* @__PURE__ */ React4.createElement("div", { className: "brokr-notif-item-body" }, /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-item-title" }, notif.title), /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-item-message" }, notif.message)),
+      /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-item-time" }, formatTimestamp(notif.createdAt))
+    );
+  })));
+}
+export {
+  NotificationBell,
+  NotificationList,
+  defineNotifications,
+  useNotifications
+};