@brdgapp/ui 0.1.1 → 1.0.0

package/src/network-people-helper/network-people-helper.tsx

@@ -1,397 +0,0 @@
-"use client"
-
-import { useEffect, useRef, useState, type CSSProperties } from "react"
-import { ContactAvatar } from "./contact-avatar"
-import { cleanDomain, organizationLabelFromDomain } from "./domain"
-import {
-  BridgeHelperIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  EyeOffIcon,
-  SearchIcon,
-} from "./icons"
-import {
-  NETWORK_PEOPLE_HELPER_OPEN_EVENT,
-  dismissStorageKey,
-  type NetworkPeopleHelperOpenDetail,
-} from "./open-helper"
-import { PersonMenu, ShareLinkCopyControl } from "./person-menu"
-import { useBridgeUI } from "../provider"
-import type { HelperPlacement, NetworkPersonAction } from "./types"
-import { useNetworkPeopleList } from "./use-network-people-list"
-import { useNetworkPreview } from "./use-network-preview"
-
-const ICON_HOLD_MS = 750
-const REVEAL_HOLD_MS = 750
-const SEARCH_DEBOUNCE_MS = 300
-const DEFAULT_CHECK_DELAY_MS = 3000
-
-type HelperPhase = "idle" | "icon" | "revealing" | "expanded" | "gone" | "dismissed"
-
-export type NetworkPeopleHelperProps = {
-  domain: string
-  /** Shown after “at”. When omitted, the package uses the domain with www. removed. */
-  organizationLabel?: string | null
-  enabled?: boolean
-  /** Delay from page visit before the network check. Default 3s. */
-  checkDelayMs?: number
-  /** Fixed corner. Override the position with CSS variables on this root. */
-  placement?: HelperPlacement
-  className?: string
-  style?: CSSProperties
-  /**
-   * Extra person-menu actions. Built-in actions are Make intro, Copy intro link,
-   * and View Bridge profile. onSelect receives the contact for that row.
-   */
-  customActions?: NetworkPersonAction[]
-}
-
-export function NetworkPeopleHelper({
-  domain,
-  organizationLabel,
-  enabled = true,
-  checkDelayMs = DEFAULT_CHECK_DELAY_MS,
-  placement = "bottom-end",
-  className,
-  style,
-  customActions = [],
-}: NetworkPeopleHelperProps) {
-  const config = useBridgeUI()
-  const cleaned = cleanDomain(domain)
-  const [phase, setPhase] = useState<HelperPhase>("idle")
-  const [listOpen, setListOpen] = useState(false)
-  const [confirmDismiss, setConfirmDismiss] = useState(false)
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false)
-  const [checkReady, setCheckReady] = useState(false)
-  const [listSearch, setListSearch] = useState("")
-  const [debouncedListSearch, setDebouncedListSearch] = useState("")
-  const loadMoreRef = useRef<HTMLDivElement | null>(null)
-  const searchInputRef = useRef<HTMLInputElement | null>(null)
-  const warnedRef = useRef(false)
-
-  const isDismissed = phase === "dismissed"
-  const delayBlocked = phase === "dismissed" || phase === "gone"
-  const preview = useNetworkPreview(cleaned, Boolean(config) && enabled && checkReady && !isDismissed)
-  const count = preview.count
-  const previewContacts = preview.contacts
-  const list = useNetworkPeopleList({
-    domain: cleaned,
-    enabled: listOpen && phase !== "dismissed" && phase !== "gone",
-    search: debouncedListSearch,
-    previewContacts,
-    totalCount: count,
-  })
-
-  const knowsPeople = preview.status === "ready" && count > 0
-  const label = organizationLabelFromDomain(cleaned, organizationLabel)
-  const hasActiveSearch = Boolean(debouncedListSearch.trim())
-  const showInitialListSkeleton = listOpen && list.people.length === 0 && list.isLoading && !list.isError
-
-  useEffect(() => {
-    if (config || warnedRef.current) return
-    warnedRef.current = true
-    console.error("NetworkPeopleHelper requires BridgeUIProvider.")
-  }, [config])
-
-  useEffect(() => {
-    if (typeof window === "undefined") return
-    const media = window.matchMedia("(prefers-reduced-motion: reduce)")
-    const sync = () => setPrefersReducedMotion(media.matches)
-    sync()
-    media.addEventListener("change", sync)
-    return () => media.removeEventListener("change", sync)
-  }, [])
-
-  useEffect(() => {
-    if (typeof window === "undefined") return
-    if (window.sessionStorage.getItem(dismissStorageKey(cleaned)) === "1") {
-      setPhase("dismissed")
-    } else {
-      setPhase("idle")
-    }
-    setListOpen(false)
-    setConfirmDismiss(false)
-    setListSearch("")
-    setDebouncedListSearch("")
-    setCheckReady(false)
-  }, [cleaned])
-
-  useEffect(() => {
-    if (!enabled || !cleaned || delayBlocked) return
-    if (checkDelayMs <= 0) {
-      setCheckReady(true)
-      return
-    }
-    const timeoutId = window.setTimeout(() => setCheckReady(true), checkDelayMs)
-    return () => window.clearTimeout(timeoutId)
-  }, [enabled, cleaned, checkDelayMs, delayBlocked])
-
-  useEffect(() => {
-    const timeoutId = window.setTimeout(() => setDebouncedListSearch(listSearch), SEARCH_DEBOUNCE_MS)
-    return () => window.clearTimeout(timeoutId)
-  }, [listSearch])
-
-  useEffect(() => {
-    if (!listOpen) {
-      setListSearch("")
-      setDebouncedListSearch("")
-      return
-    }
-    const timeoutId = window.setTimeout(() => searchInputRef.current?.focus(), 220)
-    return () => window.clearTimeout(timeoutId)
-  }, [listOpen])
-
-  useEffect(() => {
-    function onOpenRequest(event: Event) {
-      const detail = (event as CustomEvent<NetworkPeopleHelperOpenDetail>).detail
-      if (detail?.domain !== cleaned) return
-      if (typeof window !== "undefined") window.sessionStorage.removeItem(dismissStorageKey(cleaned))
-      setCheckReady(true)
-      setPhase("expanded")
-      setListOpen(true)
-      setConfirmDismiss(false)
-    }
-    window.addEventListener(NETWORK_PEOPLE_HELPER_OPEN_EVENT, onOpenRequest)
-    return () => window.removeEventListener(NETWORK_PEOPLE_HELPER_OPEN_EVENT, onOpenRequest)
-  }, [cleaned])
-
-  useEffect(() => {
-    if (phase !== "idle" || !checkReady || preview.status === "idle" || preview.status === "loading") return
-    if (knowsPeople) {
-      setPhase(prefersReducedMotion ? "expanded" : "icon")
-      return
-    }
-    if (preview.status === "ready" || preview.status === "error") setPhase("gone")
-  }, [phase, checkReady, preview.status, knowsPeople, prefersReducedMotion])
-
-  useEffect(() => {
-    if (phase !== "icon") return
-    const timeoutId = window.setTimeout(() => setPhase("revealing"), ICON_HOLD_MS)
-    return () => window.clearTimeout(timeoutId)
-  }, [phase])
-
-  useEffect(() => {
-    if (phase !== "revealing") return
-    const timeoutId = window.setTimeout(() => setPhase("expanded"), REVEAL_HOLD_MS)
-    return () => window.clearTimeout(timeoutId)
-  }, [phase])
-
-  useEffect(() => {
-    if (!listOpen || !list.hasNextPage || list.isFetchingNextPage) return
-    const node = loadMoreRef.current
-    if (!node) return
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries.some((entry) => entry.isIntersecting)) list.fetchNextPage()
-      },
-      { root: node.closest(".bridge-network-helper__list-scroll"), rootMargin: "80px", threshold: 0 },
-    )
-    observer.observe(node)
-    return () => observer.disconnect()
-  }, [listOpen, list.hasNextPage, list.isFetchingNextPage, list.fetchNextPage, list.people.length])
-
-  function confirmAndDismiss() {
-    if (typeof window !== "undefined") window.sessionStorage.setItem(dismissStorageKey(cleaned), "1")
-    setConfirmDismiss(false)
-    setListOpen(false)
-    setPhase("dismissed")
-  }
-
-  function openPeopleList() {
-    setPhase("expanded")
-    setListOpen(true)
-    setConfirmDismiss(false)
-  }
-
-  function togglePeopleList() {
-    if (listOpen) {
-      setListOpen(false)
-      return
-    }
-    openPeopleList()
-  }
-
-  if (!config || phase === "idle" || phase === "dismissed" || phase === "gone") return null
-
-  const peopleLabel = count === 1 ? "person" : "people"
-  const noteMounted = phase === "icon" || phase === "revealing" || phase === "expanded"
-  const showDismissBar = phase === "revealing" || phase === "expanded"
-  const shellState = phase === "icon" ? "icon" : phase === "revealing" ? "revealing" : "expanded"
-  const anchorClass = className
-    ? `bridge-network-helper-anchor ${className}`
-    : "bridge-network-helper-anchor"
-
-  return (
-    <div className={anchorClass} data-placement={placement} style={style}>
-      <div
-        className={
-          listOpen
-            ? `bridge-network-helper bridge-network-helper--${shellState} bridge-network-helper--list`
-            : `bridge-network-helper bridge-network-helper--${shellState}`
-        }
-      >
-        {showDismissBar ? (
-          <div className="bridge-network-helper__dismiss-bar">
-            {confirmDismiss ? (
-              <p className="bridge-network-helper__dismiss-confirm">
-                Hide for this visit?{" "}
-                <button type="button" className="bridge-network-helper__dismiss-action" onClick={confirmAndDismiss}>
-                  Confirm
-                </button>
-                <span aria-hidden="true" className="bridge-network-helper__dismiss-sep">
-                  ·
-                </span>
-                <button type="button" className="bridge-network-helper__dismiss-cancel" onClick={() => setConfirmDismiss(false)}>
-                  Cancel
-                </button>
-              </p>
-            ) : (
-              <button type="button" className="bridge-network-helper__dismiss-link" onClick={() => setConfirmDismiss(true)}>
-                <EyeOffIcon />
-                Do not show again
-              </button>
-            )}
-          </div>
-        ) : null}
-
-        <div className="bridge-network-helper__shell">
-          <div className="bridge-network-helper__row">
-            <button
-              type="button"
-              className="bridge-network-helper__icon-btn"
-              aria-label={listOpen ? `Collapse people you know at ${label}` : `You know ${count} ${peopleLabel} at ${label}`}
-              onClick={togglePeopleList}
-            >
-              <BridgeHelperIcon motion="nudge" />
-            </button>
-
-            <div className="bridge-network-helper__note-reveal" aria-hidden={phase === "icon"}>
-              <div className="bridge-network-helper__note-reveal-inner">
-                {noteMounted ? (
-                  <>
-                    <div className="bridge-network-helper__content" role="status" aria-live="polite">
-                      <p className="bridge-network-helper__line">
-                        You know{" "}
-                        <button
-                          type="button"
-                          className="bridge-network-helper__count"
-                          onClick={openPeopleList}
-                          aria-expanded={listOpen}
-                          aria-label={`View ${count} ${peopleLabel} you know at ${label}`}
-                        >
-                          {count}
-                        </button>{" "}
-                        {peopleLabel} at {label}
-                      </p>
-                    </div>
-
-                    {previewContacts.length > 0 ? (
-                      <button
-                        type="button"
-                        className="bridge-network-helper__avatars"
-                        onClick={openPeopleList}
-                        aria-expanded={listOpen}
-                        aria-label={`View people you know at ${label}`}
-                      >
-                        {previewContacts.slice(0, 3).map((contact, index) => (
-                          <ContactAvatar key={contact.id} contact={contact} style={{ zIndex: index + 1 }} />
-                        ))}
-                      </button>
-                    ) : null}
-
-                    <button
-                      type="button"
-                      className="bridge-network-helper__toggle"
-                      onClick={togglePeopleList}
-                      aria-expanded={listOpen}
-                      aria-label={listOpen ? "Minimize people list" : "Expand people list"}
-                    >
-                      {listOpen ? <ChevronDownIcon /> : <ChevronUpIcon />}
-                    </button>
-                  </>
-                ) : null}
-              </div>
-            </div>
-          </div>
-
-          <div className="bridge-network-helper__list" aria-hidden={!listOpen}>
-            <div className="bridge-network-helper__list-inner">
-              <div className="bridge-network-helper__list-panel">
-                <div className="bridge-network-helper__search">
-                  <SearchIcon className="bridge-network-helper__search-icon" />
-                  <input
-                    ref={searchInputRef}
-                    type="search"
-                    value={listSearch}
-                    onChange={(event) => setListSearch(event.target.value)}
-                    placeholder="Search people…"
-                    aria-label={`Search people you know at ${label}`}
-                    className="bridge-network-helper__search-input"
-                    autoComplete="off"
-                    spellCheck={false}
-                  />
-                </div>
-
-                <div className="bridge-network-helper__list-scroll">
-                  {showInitialListSkeleton ? (
-                    <ul className="bridge-network-helper__people" aria-busy="true">
-                      {Array.from({ length: 5 }).map((_, index) => (
-                        <PersonRowSkeleton key={`skeleton-${index}`} />
-                      ))}
-                    </ul>
-                  ) : list.isError ? (
-                    <div className="bridge-network-helper__list-status is-error">Failed to load people.</div>
-                  ) : list.people.length === 0 ? (
-                    <div className="bridge-network-helper__list-status">
-                      {hasActiveSearch ? "No matches for that search." : "No people found."}
-                    </div>
-                  ) : (
-                    <ul className="bridge-network-helper__people">
-                      {list.people.map((contact, index) => {
-                        const roleMeta = [contact.position, contact.company].filter(Boolean).join(" · ")
-                        return (
-                          <li
-                            key={contact.id}
-                            className="bridge-network-helper__person"
-                            style={{ animationDelay: `${Math.min(index, 12) * 35}ms` }}
-                          >
-                            <ContactAvatar contact={contact} size="md" />
-                            <div className="bridge-network-helper__person-copy">
-                              <p className="bridge-network-helper__person-name">{contact.name}</p>
-                              {roleMeta ? <p className="bridge-network-helper__person-meta">{roleMeta}</p> : null}
-                              {contact.email ? <p className="bridge-network-helper__person-meta">{contact.email}</p> : null}
-                              {contact.shareLink ? <ShareLinkCopyControl shareLink={contact.shareLink} /> : null}
-                            </div>
-                            <PersonMenu contact={contact} customActions={customActions} config={config} />
-                          </li>
-                        )
-                      })}
-                      {list.isFetchingNextPage
-                        ? Array.from({ length: 3 }).map((_, index) => <PersonRowSkeleton key={`next-skeleton-${index}`} />)
-                        : null}
-                    </ul>
-                  )}
-                  {listOpen && list.hasNextPage ? <div ref={loadMoreRef} className="bridge-network-helper__load-more" aria-hidden="true" /> : null}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function PersonRowSkeleton() {
-  return (
-    <li className="bridge-network-helper__person bridge-network-helper__person--skeleton">
-      <span className="bridge-network-helper__skeleton bridge-network-helper__skeleton--avatar" />
-      <div className="bridge-network-helper__person-copy">
-        <span className="bridge-network-helper__skeleton bridge-network-helper__skeleton--line is-name" />
-        <span className="bridge-network-helper__skeleton bridge-network-helper__skeleton--line" />
-        <span className="bridge-network-helper__skeleton bridge-network-helper__skeleton--line is-long" />
-      </div>
-      <span className="bridge-network-helper__skeleton bridge-network-helper__skeleton--menu" />
-    </li>
-  )
-}

package/src/network-people-helper/network-people-nudge.tsx

@@ -1,98 +0,0 @@
-"use client"
-
-import { useEffect, useRef, useState } from "react"
-import { ContactAvatar } from "./contact-avatar"
-import { cleanDomain, organizationLabelFromDomain } from "./domain"
-import { BridgeHelperIcon, ChevronUpIcon } from "./icons"
-import { openNetworkPeopleHelper } from "./open-helper"
-import { useBridgeUI } from "../provider"
-import { useNetworkPreview } from "./use-network-preview"
-
-const DEFAULT_CHECK_DELAY_MS = 3000
-
-export type NetworkPeopleNudgeProps = {
-  domain: string
-  organizationLabel?: string | null
-  enabled?: boolean
-  className?: string
-  /** Called instead of opening the floating helper on this page. */
-  onOpen?: () => void
-}
-
-export function NetworkPeopleNudge({
-  domain,
-  organizationLabel,
-  enabled = true,
-  className,
-  onOpen,
-}: NetworkPeopleNudgeProps) {
-  const config = useBridgeUI()
-  const cleaned = cleanDomain(domain)
-  const checkReady = useDelayedReady(enabled && Boolean(config) && Boolean(cleaned), DEFAULT_CHECK_DELAY_MS)
-  const preview = useNetworkPreview(cleaned, Boolean(config) && enabled && checkReady)
-  const warnedRef = useRef(false)
-
-  useEffect(() => {
-    if (config || warnedRef.current) return
-    warnedRef.current = true
-    console.error("NetworkPeopleNudge requires BridgeUIProvider.")
-  }, [config])
-
-  if (!config || preview.status !== "ready" || preview.count <= 0) return null
-
-  const peopleLabel = preview.count === 1 ? "person" : "people"
-  const label = organizationLabelFromDomain(cleaned, organizationLabel)
-  const classNames = className ? `bridge-network-nudge ${className}` : "bridge-network-nudge"
-
-  return (
-    <button
-      type="button"
-      className={classNames}
-      onClick={() => {
-        if (onOpen) {
-          onOpen()
-          return
-        }
-        openNetworkPeopleHelper(cleaned)
-      }}
-      aria-label={`View ${preview.count} ${peopleLabel} you know at ${label}`}
-    >
-      <span className="bridge-network-nudge__icon" aria-hidden="true">
-        <BridgeHelperIcon motion="none" />
-      </span>
-      <p className="bridge-network-nudge__line">
-        You know <span className="bridge-network-nudge__count">{preview.count}</span> {peopleLabel} at {label}
-      </p>
-      {preview.contacts.length > 0 ? (
-        <span className="bridge-network-nudge__avatars" aria-hidden="true">
-          {preview.contacts.slice(0, 3).map((contact, index) => (
-            <ContactAvatar key={contact.id} contact={contact} style={{ zIndex: index + 1 }} />
-          ))}
-        </span>
-      ) : null}
-      <span className="bridge-network-nudge__toggle" aria-hidden="true">
-        <ChevronUpIcon />
-      </span>
-    </button>
-  )
-}
-
-function useDelayedReady(gate: boolean, delayMs: number): boolean {
-  const [ready, setReady] = useState(false)
-
-  useEffect(() => {
-    if (!gate) {
-      setReady(false)
-      return
-    }
-    if (delayMs <= 0) {
-      setReady(true)
-      return
-    }
-    setReady(false)
-    const timeoutId = window.setTimeout(() => setReady(true), delayMs)
-    return () => window.clearTimeout(timeoutId)
-  }, [gate, delayMs])
-
-  return ready
-}

package/src/network-people-helper/open-helper.ts

@@ -1,22 +0,0 @@
-import { cleanDomain } from "./domain"
-
-export const NETWORK_PEOPLE_HELPER_OPEN_EVENT = "bridge-network-helper:open"
-
-export type NetworkPeopleHelperOpenDetail = {
-  domain: string
-}
-
-export function openNetworkPeopleHelper(domain: string): void {
-  if (typeof window === "undefined") return
-  const cleaned = cleanDomain(domain)
-  if (!cleaned) return
-  window.dispatchEvent(
-    new CustomEvent<NetworkPeopleHelperOpenDetail>(NETWORK_PEOPLE_HELPER_OPEN_EVENT, {
-      detail: { domain: cleaned },
-    }),
-  )
-}
-
-export function dismissStorageKey(domain: string): string {
-  return `bridge-network-helper-dismissed:${cleanDomain(domain)}`
-}