@brdgapp/ui 0.1.0

package/src/person-menu.tsx

@@ -0,0 +1,210 @@
+"use client"
+
+import { useEffect, useLayoutEffect, useRef, useState } from "react"
+import { createPortal } from "react-dom"
+import { CheckIcon, CopyIcon, LinkIcon, MoreIcon, UserIcon, UserPlusIcon } from "./icons"
+import type { BridgeClientConfig, NetworkContact, NetworkPersonAction } from "./types"
+
+function introUrl(inboxUrl: string, email: string): string {
+  const url = new URL(inboxUrl)
+  url.searchParams.set("action", "make-intro")
+  url.searchParams.set("n1", email)
+  return url.toString()
+}
+
+export function PersonMenu({
+  contact,
+  customActions,
+  config,
+}: {
+  contact: NetworkContact
+  customActions: NetworkPersonAction[]
+  config: BridgeClientConfig
+}) {
+  const [open, setOpen] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const [position, setPosition] = useState<{ top: number; left: number } | null>(null)
+  const profileUrl = contact.username ? config.profileUrlForUsername(contact.username) : null
+  const makeIntro = contact.email ? introUrl(config.introInboxUrl, contact.email) : null
+  const hasActions = customActions.length > 0 || Boolean(makeIntro || contact.shareLink || profileUrl)
+
+  useLayoutEffect(() => {
+    if (!open || !buttonRef.current) return
+    function place() {
+      const rect = buttonRef.current?.getBoundingClientRect()
+      if (!rect) return
+      const width = 248
+      const left = Math.max(8, Math.min(rect.right - width, window.innerWidth - width - 8))
+      const estimatedHeight = menuRef.current?.offsetHeight ?? 180
+      const below = rect.bottom + 6
+      const top = below + estimatedHeight > window.innerHeight - 8 ? Math.max(8, rect.top - estimatedHeight - 6) : below
+      setPosition({ top, left })
+    }
+    place()
+    window.addEventListener("resize", place)
+    window.addEventListener("scroll", place, true)
+    return () => {
+      window.removeEventListener("resize", place)
+      window.removeEventListener("scroll", place, true)
+    }
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    function onPointer(event: MouseEvent) {
+      const target = event.target
+      if (!(target instanceof Node)) return
+      if (buttonRef.current?.contains(target) || menuRef.current?.contains(target)) return
+      setOpen(false)
+      setCopied(false)
+    }
+    function onKey(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        setOpen(false)
+        setCopied(false)
+      }
+    }
+    document.addEventListener("mousedown", onPointer)
+    document.addEventListener("keydown", onKey)
+    return () => {
+      document.removeEventListener("mousedown", onPointer)
+      document.removeEventListener("keydown", onKey)
+    }
+  }, [open])
+
+  if (!hasActions) return null
+
+  async function copyIntroLink() {
+    if (!contact.shareLink) return
+    try {
+      await navigator.clipboard.writeText(contact.shareLink)
+      setCopied(true)
+      window.setTimeout(() => {
+        setCopied(false)
+        setOpen(false)
+      }, 1200)
+    } catch {
+      // Clipboard can fail in restricted contexts.
+    }
+  }
+
+  const menu = open ? (
+    <div
+      ref={menuRef}
+      className="bridge-network-helper__person-menu-content"
+      style={position ? { top: position.top, left: position.left } : { visibility: "hidden" }}
+      role="menu"
+      onClick={(event) => event.stopPropagation()}
+    >
+      {customActions.map((action) => (
+        <button
+          key={action.id}
+          type="button"
+          role="menuitem"
+          className={
+            action.description
+              ? "bridge-network-helper__person-menu-item has-description"
+              : "bridge-network-helper__person-menu-item"
+          }
+          onClick={() => {
+            setOpen(false)
+            action.onSelect(contact)
+          }}
+        >
+          {action.icon ? <span className="bridge-network-helper__person-menu-icon">{action.icon}</span> : null}
+          <span>
+            <span className="bridge-network-helper__person-menu-label">{action.label}</span>
+            {action.description ? (
+              <span className="bridge-network-helper__person-menu-description">{action.description}</span>
+            ) : null}
+          </span>
+        </button>
+      ))}
+      {makeIntro ? (
+        <a className="bridge-network-helper__person-menu-item" role="menuitem" href={makeIntro} target="_blank" rel="noopener noreferrer">
+          <UserPlusIcon className="bridge-network-helper__person-menu-icon" />
+          Make intro
+        </a>
+      ) : null}
+      {contact.shareLink ? (
+        <button
+          type="button"
+          role="menuitem"
+          className="bridge-network-helper__person-menu-item"
+          onClick={() => {
+            if (!copied) void copyIntroLink()
+          }}
+        >
+          {copied ? (
+            <CheckIcon className="bridge-network-helper__person-menu-icon is-copied" />
+          ) : (
+            <LinkIcon className="bridge-network-helper__person-menu-icon" />
+          )}
+          {copied ? "Copied" : "Copy intro link"}
+        </button>
+      ) : null}
+      {profileUrl ? (
+        <a className="bridge-network-helper__person-menu-item" role="menuitem" href={profileUrl} target="_blank" rel="noopener noreferrer">
+          <UserIcon className="bridge-network-helper__person-menu-icon" />
+          View Bridge profile
+        </a>
+      ) : null}
+    </div>
+  ) : null
+
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        type="button"
+        className="bridge-network-helper__person-menu"
+        aria-label={`More options for ${contact.name}`}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        data-state={open ? "open" : "closed"}
+        onClick={(event) => {
+          event.stopPropagation()
+          setOpen((current) => !current)
+          setCopied(false)
+        }}
+      >
+        <MoreIcon />
+      </button>
+      {menu && typeof document !== "undefined" ? createPortal(menu, document.body) : null}
+    </>
+  )
+}
+
+export function ShareLinkCopyControl({ shareLink }: { shareLink: string }) {
+  const [copied, setCopied] = useState(false)
+  const display = shareLink.replace(/^https?:\/\//i, "")
+
+  async function handleCopy() {
+    try {
+      await navigator.clipboard.writeText(shareLink)
+      setCopied(true)
+      window.setTimeout(() => setCopied(false), 1600)
+    } catch {
+      // Clipboard can fail in restricted contexts.
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      className="bridge-network-helper__share-link"
+      onClick={handleCopy}
+      title={copied ? "Copied" : "Copy Introlink"}
+      aria-label={copied ? "Introlink copied" : `Copy Introlink ${display}`}
+    >
+      <span className="bridge-network-helper__share-link-text">{display}</span>
+      {copied ? (
+        <CheckIcon className="bridge-network-helper__share-link-icon is-copied" />
+      ) : (
+        <CopyIcon className="bridge-network-helper__share-link-icon" />
+      )}
+    </button>
+  )
+}

package/src/provider.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import { createContext, useContext, useMemo, useRef, type ReactNode } from "react"
+import type { BridgeClientConfig } from "./types"
+
+/** Production Bridge API, including the `/api/v4` prefix. */
+export const DEFAULT_API_BASE_URL = "https://api.brdg.app/api/v4"
+
+const DEFAULT_INTRO_INBOX_URL = "https://intros.brdg.app/inbox"
+
+function defaultProfileUrl(username: string): string {
+  return `https://os.brdg.app/to/${encodeURIComponent(username.trim())}`
+}
+
+const BridgeUIContext = createContext<BridgeClientConfig | null>(null)
+
+export type BridgeUIProviderProps = {
+  /** Override the production API (`https://api.brdg.app/api/v4`) for staging or local. */
+  apiBaseUrl?: string
+  getAccessToken: () => Promise<string | null> | string | null
+  /** Inbox used by the built-in Make intro action. */
+  introInboxUrl?: string
+  /** Profile URL used by the built-in View Bridge profile action. */
+  profileUrlForUsername?: (username: string) => string
+  children: ReactNode
+}
+
+export function BridgeUIProvider({
+  apiBaseUrl = DEFAULT_API_BASE_URL,
+  getAccessToken,
+  introInboxUrl = DEFAULT_INTRO_INBOX_URL,
+  profileUrlForUsername = defaultProfileUrl,
+  children,
+}: BridgeUIProviderProps) {
+  const getAccessTokenRef = useRef(getAccessToken)
+  getAccessTokenRef.current = getAccessToken
+
+  const value = useMemo<BridgeClientConfig>(
+    () => ({
+      apiBaseUrl: apiBaseUrl.replace(/\/$/, ""),
+      getAccessToken: () => getAccessTokenRef.current(),
+      introInboxUrl,
+      profileUrlForUsername,
+    }),
+    [apiBaseUrl, introInboxUrl, profileUrlForUsername],
+  )
+
+  return <BridgeUIContext.Provider value={value}>{children}</BridgeUIContext.Provider>
+}
+
+export function useBridgeUI(): BridgeClientConfig | null {
+  return useContext(BridgeUIContext)
+}