@ilivemylife/react-sdk 0.1.0

package/dist/index.js

@@ -0,0 +1,631 @@
+// src/ssoHelpers.ts
+function getSsoLoginUrl(ssoUrl, options = {}) {
+  const { addTimestamp = true, route = "", clientId } = options;
+  const baseUrl = route ? `${ssoUrl}/${route}` : ssoUrl;
+  const params = new URLSearchParams();
+  if (addTimestamp) {
+    params.append("timestamp", Date.now().toString());
+  }
+  if (clientId) {
+    params.append("client_id", clientId);
+  }
+  const queryString = params.toString();
+  return queryString ? `${baseUrl}?${queryString}` : baseUrl;
+}
+function popupCenterParams(width, height) {
+  return {
+    left: window.screen.width / 2 - width / 2,
+    top: window.screen.height / 2 - height / 2
+  };
+}
+function isValidSsoOrigin(event, ssoUrl) {
+  try {
+    const expectedOrigin = new URL(ssoUrl).origin;
+    return event.origin === expectedOrigin;
+  } catch {
+    return false;
+  }
+}
+
+// src/useIlmlSso.ts
+import { useCallback, useEffect, useRef } from "react";
+var MESSENGER_TYPES = ["messengerReady", "messengerInitialized"];
+function useIlmlSso(opts) {
+  const {
+    ssoUrl,
+    ssoRoute,
+    clientId,
+    onSsoData,
+    onError,
+    onClose,
+    responseType = "loginSuccess",
+    windowName = "ilmlSsoLogin",
+    width = 500,
+    height = 700
+  } = opts;
+  const loginWindowRef = useRef(null);
+  const processingRef = useRef(false);
+  const openLogin = useCallback(() => {
+    if (loginWindowRef.current && !loginWindowRef.current.closed) {
+      loginWindowRef.current.focus();
+      return;
+    }
+    processingRef.current = false;
+    const url = getSsoLoginUrl(ssoUrl, { route: ssoRoute, clientId });
+    const pos = popupCenterParams(width, height);
+    const popup = window.open(
+      url,
+      windowName,
+      `width=${width},height=${height},toolbar=no,location=no,directories=no,status=no,menubar=no,copyhistory=no,top=${pos.top},left=${pos.left}`
+    );
+    loginWindowRef.current = popup;
+    if (!onClose) return;
+    if (!popup) {
+      onClose();
+      return;
+    }
+    const poll = window.setInterval(() => {
+      if (popup.closed) {
+        window.clearInterval(poll);
+        if (!processingRef.current) onClose();
+      }
+    }, 300);
+  }, [ssoUrl, ssoRoute, clientId, windowName, width, height, onClose]);
+  const onMessage = useCallback(
+    async (event) => {
+      if (!isValidSsoOrigin(event, ssoUrl)) return;
+      if (MESSENGER_TYPES.includes(event.data?.type)) return;
+      let parsed;
+      try {
+        parsed = JSON.parse(event.data?.type);
+      } catch {
+        return;
+      }
+      if (parsed?.name === "loginError") {
+        onError?.("loginError");
+        return;
+      }
+      if (parsed?.name === "signupError") {
+        onError?.("signupError");
+        return;
+      }
+      if (parsed?.name === responseType) {
+        if (processingRef.current) return;
+        processingRef.current = true;
+        const data = event.data?.data;
+        if (data?.accessToken) {
+          try {
+            localStorage.setItem("walletAccessToken", data.accessToken);
+          } catch {
+          }
+        }
+        if (loginWindowRef.current && !loginWindowRef.current.closed) {
+          loginWindowRef.current.close();
+        }
+        await onSsoData(data ?? {});
+      }
+    },
+    [ssoUrl, responseType, onSsoData, onError]
+  );
+  useEffect(() => {
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [onMessage]);
+  return { openLogin };
+}
+
+// src/IlmlChat.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function IlmlChat({ ssoUrl, nodeId, token, isNodeReady, className, style }) {
+  const iframeRef = useRef2(null);
+  const mountedRef = useRef2(true);
+  const [loading, setLoading] = useState(true);
+  useEffect2(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  useEffect2(() => {
+    setLoading(true);
+  }, [nodeId]);
+  const expectedOrigin = (() => {
+    try {
+      return new URL(ssoUrl).origin;
+    } catch {
+      return "";
+    }
+  })();
+  const resolveToken = useCallback2(() => {
+    if (token != null) return token;
+    try {
+      return localStorage.getItem("walletAccessToken");
+    } catch {
+      return null;
+    }
+  }, [token]);
+  const handshake = useCallback2(async () => {
+    if (isNodeReady) {
+      for (let attempt = 0; attempt < 15; attempt++) {
+        if (!mountedRef.current) return;
+        if (await isNodeReady(nodeId)) break;
+        await new Promise((resolve) => setTimeout(resolve, 1e3));
+      }
+    }
+    const win = iframeRef.current?.contentWindow;
+    if (!mountedRef.current || !win) return;
+    win.postMessage({ type: "initMessenger", token: resolveToken() }, expectedOrigin);
+    setLoading(false);
+  }, [isNodeReady, nodeId, resolveToken, expectedOrigin]);
+  const handleMessage = useCallback2(
+    (event) => {
+      if (!expectedOrigin || event.origin !== expectedOrigin) return;
+      const { type } = event.data || {};
+      if (type === "messengerReady") void handshake();
+      else if (type === "messengerInitialized") setLoading(false);
+    },
+    [expectedOrigin, handshake]
+  );
+  useEffect2(() => {
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [handleMessage]);
+  const iframeUrl = `${ssoUrl}/embed/app?node=${encodeURIComponent(nodeId)}`;
+  return /* @__PURE__ */ jsxs("div", { className, style: { position: "relative", ...style }, children: [
+    /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        ref: iframeRef,
+        src: iframeUrl,
+        title: "iLiveMyLife Chat",
+        style: { width: "100%", height: "100%", border: "none" },
+        allow: "microphone; camera",
+        sandbox: "allow-scripts allow-same-origin allow-forms allow-popups"
+      }
+    ),
+    loading ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 10,
+          background: "#fff",
+          color: "#64748b",
+          fontSize: 13
+        },
+        children: [
+          /* @__PURE__ */ jsx("style", { children: "@keyframes ilml-chat-spin{to{transform:rotate(360deg)}}" }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                width: 22,
+                height: 22,
+                border: "2px solid #e2e8f0",
+                borderTopColor: "#0178d4",
+                borderRadius: "50%",
+                animation: "ilml-chat-spin 0.8s linear infinite"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: "Loading chat\u2026" })
+        ]
+      }
+    ) : null
+  ] });
+}
+
+// src/IlmlChatWidget.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var iconBtn = {
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  color: "rgba(255,255,255,0.82)",
+  fontSize: 14,
+  lineHeight: 1,
+  padding: "2px 6px",
+  borderRadius: 4,
+  textDecoration: "none",
+  display: "inline-flex",
+  alignItems: "center"
+};
+function IlmlChatWidget({
+  ssoUrl,
+  nodeId,
+  token,
+  title,
+  onClose,
+  onMinimize,
+  isNodeReady,
+  allowFullscreen = true,
+  allowTall = true,
+  accentColor = "#0178d4",
+  className,
+  style
+}) {
+  const [expanded, setExpanded] = useState2(false);
+  const [tall, setTall] = useState2(false);
+  const openInAppUrl = `${ssoUrl}/item/${encodeURIComponent(nodeId)}`;
+  const dockStyle = {
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    height: "70vh",
+    maxHeight: 520,
+    width: "92vw",
+    maxWidth: 360,
+    borderRadius: 16,
+    background: "#fff",
+    boxShadow: "0 20px 50px rgba(0,0,0,0.25)",
+    ...style,
+    // Tall mode wins over any consumer height in `style`: fill (almost) the whole viewport height,
+    // leaving a small margin, at the docked width.
+    ...tall ? { height: "94vh", maxHeight: "94vh" } : {}
+  };
+  const fullStyle = {
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    position: "fixed",
+    inset: 0,
+    zIndex: 1400,
+    background: "#fff"
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: expanded ? void 0 : className, style: expanded ? fullStyle : dockStyle, children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 4,
+          padding: "8px 12px",
+          background: accentColor,
+          color: "#fff",
+          flexShrink: 0
+        },
+        children: [
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              onClick: onMinimize,
+              disabled: !onMinimize,
+              title: onMinimize ? "Minimize" : void 0,
+              style: {
+                ...iconBtn,
+                flex: 1,
+                minWidth: 0,
+                textAlign: "left",
+                color: "#fff",
+                fontWeight: 600,
+                fontSize: 14,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                display: "block",
+                cursor: onMinimize ? "pointer" : "default"
+              },
+              children: title || "Chat"
+            }
+          ),
+          /* @__PURE__ */ jsx2("a", { href: openInAppUrl, target: "_blank", rel: "noopener", title: "Open in iLiveMyLife", style: iconBtn, children: "\u2197" }),
+          allowTall && !expanded ? /* @__PURE__ */ jsx2("button", { onClick: () => setTall((v) => !v), title: tall ? "Restore height" : "Full height", style: iconBtn, children: "\u2195" }) : null,
+          allowFullscreen ? /* @__PURE__ */ jsx2("button", { onClick: () => setExpanded((v) => !v), title: expanded ? "Restore" : "Full screen", style: iconBtn, children: expanded ? "\u2750" : "\u26F6" }) : null,
+          onMinimize ? /* @__PURE__ */ jsx2("button", { onClick: onMinimize, title: "Minimize", style: iconBtn, children: "\u2014" }) : null,
+          onClose ? /* @__PURE__ */ jsx2("button", { onClick: onClose, title: "Close", style: { ...iconBtn, fontSize: 18 }, children: "\xD7" }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2(IlmlChat, { ssoUrl, nodeId, token, isNodeReady, style: { flex: 1, minHeight: 0 } })
+  ] });
+}
+
+// src/IlmlButton.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function IlmlButton({
+  href,
+  onClick,
+  disabled,
+  target,
+  rel,
+  type = "button",
+  className,
+  style,
+  children
+}) {
+  const cls = `ilml-btn${className ? ` ${className}` : ""}`;
+  if (href) {
+    return /* @__PURE__ */ jsx3("a", { href, onClick, target, rel, className: cls, style, "aria-disabled": disabled || void 0, children });
+  }
+  return /* @__PURE__ */ jsx3("button", { type, onClick, disabled, className: cls, style, children });
+}
+
+// src/useIlmlProfile.ts
+import { useEffect as useEffect3, useState as useState3 } from "react";
+var DEFAULT_GRAPHQL_URL = "https://api.ilivemylife.io/graphql/v1";
+var ME_QUERY = "{ me { id displayName fullName email currentAvatar { uri } } }";
+function useIlmlProfile(token, opts = {}) {
+  const graphqlUrl = opts.graphqlUrl || DEFAULT_GRAPHQL_URL;
+  const [state, setState] = useState3({
+    profile: null,
+    loading: false,
+    invalid: false
+  });
+  useEffect3(() => {
+    if (!token) {
+      setState({ profile: null, loading: false, invalid: false });
+      return;
+    }
+    let alive = true;
+    setState((s) => ({ ...s, loading: true, invalid: false }));
+    (async () => {
+      try {
+        const res = await fetch(graphqlUrl, {
+          method: "POST",
+          headers: { "content-type": "application/json", "access-token": token },
+          body: JSON.stringify({ query: ME_QUERY })
+        });
+        if (!alive) return;
+        const json = await res.json().catch(() => null);
+        const me = json?.data?.me;
+        if (me?.id) {
+          setState({
+            profile: {
+              id: me.id,
+              name: me.displayName || me.fullName || me.email || "Account",
+              avatar: me.currentAvatar?.uri || void 0,
+              email: me.email
+            },
+            loading: false,
+            invalid: false
+          });
+          return;
+        }
+        const code = json?.errors?.[0]?.extensions?.code;
+        const authFailed = code === "UNAUTHENTICATED" || res.status === 401 || res.status === 403;
+        setState({ profile: null, loading: false, invalid: authFailed });
+      } catch {
+        if (alive) setState({ profile: null, loading: false, invalid: false });
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, [token, graphqlUrl]);
+  return state;
+}
+
+// src/useIlmlSession.ts
+import { useCallback as useCallback3, useEffect as useEffect4, useSyncExternalStore } from "react";
+var ME_QUERY2 = "{ me { id displayName fullName email currentAvatar { uri } } }";
+var ACCESS_TOKEN_HEADER = "access-token";
+var cfg = null;
+function configure(opts) {
+  if (cfg) return;
+  cfg = {
+    graphqlUrl: opts.graphqlUrl,
+    onNewToken: opts.onNewToken,
+    tokenKey: opts.tokenKey || "walletAccessToken",
+    profileKey: opts.profileKey || "ilmlProfile"
+  };
+}
+function getItem(key) {
+  try {
+    return typeof window !== "undefined" ? window.localStorage.getItem(key) : null;
+  } catch {
+    return null;
+  }
+}
+function setItem(key, value) {
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
+}
+function removeItem(key) {
+  try {
+    window.localStorage.removeItem(key);
+  } catch {
+  }
+}
+function readToken() {
+  return cfg ? getItem(cfg.tokenKey) : null;
+}
+function readCachedProfile() {
+  if (!cfg) return null;
+  const raw = getItem(cfg.profileKey);
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+var sessionCache = { token: null, profile: null };
+var firedTokens = /* @__PURE__ */ new Set();
+function fireNewToken(token) {
+  if (!cfg?.onNewToken || firedTokens.has(token)) return;
+  firedTokens.add(token);
+  try {
+    const r = cfg.onNewToken(token);
+    if (r && typeof r.then === "function") {
+      r.then(void 0, () => firedTokens.delete(token));
+    }
+  } catch {
+    firedTokens.delete(token);
+  }
+}
+var sessionListeners = /* @__PURE__ */ new Set();
+var sessionReady = false;
+var sessionInitialized = false;
+function notifySession() {
+  sessionListeners.forEach((cb) => cb());
+}
+function subscribeSession(cb) {
+  sessionListeners.add(cb);
+  return () => {
+    sessionListeners.delete(cb);
+  };
+}
+function setSessionToken(token) {
+  const tokenKey = cfg?.tokenKey || "walletAccessToken";
+  const profileKey = cfg?.profileKey || "ilmlProfile";
+  if (token) {
+    setItem(tokenKey, token);
+    fireNewToken(token);
+  } else {
+    removeItem(tokenKey);
+    removeItem(profileKey);
+    sessionCache.profile = null;
+  }
+  sessionCache.token = token;
+  notifySession();
+}
+function signOutIlmlSession() {
+  setSessionToken(null);
+}
+function getIlmlToken() {
+  return sessionCache.token ?? readToken();
+}
+function initSessionOnce() {
+  if (sessionInitialized || typeof window === "undefined" || !cfg) return;
+  sessionInitialized = true;
+  const t = readToken();
+  sessionCache.token = t;
+  if (t && !sessionCache.profile) sessionCache.profile = readCachedProfile();
+  if (t) fireNewToken(t);
+  sessionReady = true;
+  window.addEventListener("storage", (e) => {
+    if (!cfg || e.key !== cfg.tokenKey) return;
+    const next = readToken();
+    if (next === sessionCache.token) return;
+    sessionCache.token = next;
+    if (!next) sessionCache.profile = null;
+    else fireNewToken(next);
+    notifySession();
+  });
+  notifySession();
+}
+var profileState = { token: null, profile: null, loading: false, invalid: false };
+var profileListeners = /* @__PURE__ */ new Set();
+var profileLatestToken = null;
+function subscribeProfile(cb) {
+  profileListeners.add(cb);
+  return () => {
+    profileListeners.delete(cb);
+  };
+}
+function notifyProfile() {
+  profileListeners.forEach((cb) => cb());
+}
+async function ensureProfile(token) {
+  if (!cfg) return;
+  const t = token || null;
+  if (!t) {
+    profileLatestToken = null;
+    if (profileState.token !== null || profileState.profile) {
+      profileState = { token: null, profile: null, loading: false, invalid: false };
+      notifyProfile();
+    }
+    return;
+  }
+  if (profileState.token === t && profileState.profile && !profileState.loading) return;
+  if (profileState.token === t && profileState.invalid) return;
+  if (profileLatestToken === t && profileState.loading) return;
+  profileLatestToken = t;
+  profileState = { token: t, profile: profileState.token === t ? profileState.profile : null, loading: true, invalid: false };
+  notifyProfile();
+  try {
+    const res = await fetch(cfg.graphqlUrl, {
+      method: "POST",
+      headers: { "content-type": "application/json", [ACCESS_TOKEN_HEADER]: t },
+      body: JSON.stringify({ query: ME_QUERY2 })
+    });
+    const json = await res.json().catch(() => null);
+    if (profileLatestToken !== t) return;
+    const me = json?.data?.me;
+    if (me?.id) {
+      const profile = {
+        id: me.id,
+        name: me.displayName || me.fullName || me.email || "Account",
+        avatar: me.currentAvatar?.uri || void 0,
+        email: me.email
+      };
+      sessionCache.profile = profile;
+      setItem(cfg.profileKey, JSON.stringify(profile));
+      profileState = { token: t, profile, loading: false, invalid: false };
+    } else {
+      const code = json?.errors?.[0]?.extensions?.code;
+      const authFailed = code === "UNAUTHENTICATED" || res.status === 401 || res.status === 403;
+      profileState = { token: t, profile: null, loading: false, invalid: authFailed };
+      if (authFailed) setSessionToken(null);
+    }
+  } catch {
+    if (profileLatestToken !== t) return;
+    profileState = { token: t, profile: profileState.profile, loading: false, invalid: false };
+  } finally {
+    if (profileLatestToken === t) notifyProfile();
+  }
+}
+function useIlmlSessionState() {
+  const token = useSyncExternalStore(subscribeSession, () => sessionCache.token, () => null);
+  const ready = useSyncExternalStore(subscribeSession, () => sessionReady, () => false);
+  const profileSnap = useSyncExternalStore(subscribeProfile, () => profileState, () => profileState);
+  useEffect4(() => {
+    initSessionOnce();
+  }, []);
+  useEffect4(() => {
+    ensureProfile(token);
+  }, [token]);
+  useEffect4(() => {
+    if (sessionCache.token) fireNewToken(sessionCache.token);
+  }, []);
+  const t = token || null;
+  const profile = profileSnap.token === t ? profileSnap.profile : null;
+  return {
+    token,
+    isLoggedIn: !!token,
+    ready,
+    // Fresh `me` wins; the cached profile fills the gap while the first fetch is in flight.
+    profile: profile || (t ? sessionCache.profile : null),
+    profileLoading: profileSnap.loading,
+    profileInvalid: profileSnap.invalid
+  };
+}
+function useIlmlSession(opts) {
+  configure(opts);
+  const state = useIlmlSessionState();
+  const { openLogin } = useIlmlSso({
+    ssoUrl: opts.ssoUrl,
+    ssoRoute: opts.ssoRoute,
+    clientId: opts.clientId,
+    onSsoData: (data) => {
+      setSessionToken(data?.accessToken || readToken());
+    },
+    onClose: opts.onLoginClose
+  });
+  const logout = useCallback3(() => setSessionToken(null), []);
+  return { ...state, login: openLogin, logout };
+}
+export {
+  IlmlButton,
+  IlmlChat,
+  IlmlChatWidget,
+  getIlmlToken,
+  getSsoLoginUrl,
+  isValidSsoOrigin,
+  popupCenterParams,
+  signOutIlmlSession,
+  useIlmlProfile,
+  useIlmlSession,
+  useIlmlSessionState,
+  useIlmlSso
+};

package/dist/styles.css

@@ -0,0 +1,44 @@
+/*
+ * The official iLiveMyLife brand button — THE single source of the brand gradient. Two ways to use it:
+ *   - React:    <IlmlButton> (wraps this class)
+ *   - Anything: include this file, then <button class="ilml-btn">…</button>
+ * Nothing else redefines these colours (#F5626B → #D3FF76 → #FFF8B6 → #2bb673). No copying, no duplication.
+ */
+.ilml-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 22px;
+  border: none;
+  border-radius: 9999px;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+  color: #fff;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+  background-image: linear-gradient(45deg, #f5626b, #d3ff76, #fff8b6, #2bb673);
+  background-size: 300% 100%;
+  background-position: 0 0;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
+  transition: background-position 0.8s ease-in-out, box-shadow 0.2s ease, transform 0.1s ease;
+}
+
+.ilml-btn:hover {
+  background-position: 100% 0;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
+}
+
+.ilml-btn:active {
+  transform: translateY(1px);
+}
+
+.ilml-btn[disabled],
+.ilml-btn[aria-disabled='true'] {
+  opacity: 0.55;
+  cursor: default;
+  pointer-events: none;
+}