@brdgapp/ui 0.1.1 → 1.0.0

package/src/network-people-helper/README.md

@@ -1,130 +0,0 @@
-# Network people helper
-
-Shows how many people you know at a specific domain, and who they are, from the signed-in user’s Bridge network.
-
-Use it on any screen that is about one company or firm. Pass that domain. The component looks up the signed-in user’s contacts whose email domain matches, then renders a floating widget: “You know 6 people at Brdg”, with avatars. Opening it lists those people (name, role, company, email) so the user can make an intro, copy an intro link, or open a Bridge profile. Apps can add their own row actions, such as adding the person as a team member.
-
-Nothing appears when the user is signed out, or when they know nobody at that domain.
-
-The app must already wrap the tree in `BridgeUIProvider`. See the [package README](../../README.md).
-
-## Floating widget
-
-```tsx
-import { NetworkPeopleHelper } from "@brdgapp/ui"
-
-<NetworkPeopleHelper
-  domain={domain}
-  placement="bottom-end"
-  customActions={[
-    {
-      id: "add-team-member",
-      label: "Add as team member",
-      description: "Save them on this firm's team so they show up with the rest of the roster.",
-      onSelect: (contact) => addTeamMember(contact),
-    },
-  ]}
-/>
-```
-
-`domain` is required. The component cleans it (strips protocol, `www.`, path, and query) and sends it as `domain_override`.
-
-### What it requests
-
-After about 3 seconds on the page it requests:
-
-- `GET {apiBaseUrl}/search/owned_full_network_contacts/count?domain_override=`
-- `GET {apiBaseUrl}/search/owned_full_network_contacts?domain_override=&limit=&offset=`
-
-Requests send `Authorization: Bearer <token>` from the provider’s `getAccessToken`.
-
-When the count is greater than zero, the widget appears: icon, then the “You know N people at …” note, then a searchable list with infinite scroll. “Do not show again” hides it for the rest of the browser session (`sessionStorage` key `bridge-network-helper-dismissed:<domain>`).
-
-### Props
-
-| Prop | Required | Default | Purpose |
-| --- | --- | --- | --- |
-| `domain` | yes | — | Company or firm domain to match contacts against. |
-| `organizationLabel` | no | cleaned domain | Text after “at”. Pass a display name such as `"Brdg"` when the screen already has one. The contacts API does not return an organization name. |
-| `enabled` | no | `true` | Set `false` to skip the request and render nothing. |
-| `checkDelayMs` | no | `3000` | Wait after the page visit before the first request. |
-| `placement` | no | `"bottom-end"` | Fixed corner. See below. |
-| `className` | no | — | Extra class on the fixed root. |
-| `style` | no | — | Extra inline style on the fixed root. |
-| `customActions` | no | `[]` | Extra rows in each person’s menu. |
-
-`placement` is one of `"bottom-end"`, `"bottom-start"`, `"top-end"`, `"top-start"`. `"bottom-end"` is fixed, bottom-right, with a slightly larger offset from 640px up.
-
-Override that position in the app’s CSS. These variables win over the preset:
-
-```css
-.my-helper {
-  --bridge-helper-bottom: 5rem;
-  --bridge-helper-right: 2rem;
-  --bridge-helper-z: 50;
-}
-```
-
-The full set is `--bridge-helper-top`, `--bridge-helper-right`, `--bridge-helper-bottom`, `--bridge-helper-left`, and `--bridge-helper-z`.
-
-Colors follow the host app’s `--foreground`, `--background`, `--muted`, `--muted-foreground`, and `--border` when those exist. Otherwise the widget uses its own defaults. The Bridge blue accent is `#0038ff`.
-
-### Person menu
-
-Built-in actions, shown only when the contact has the field they need:
-
-- **Make intro** opens `https://intros.brdg.app/inbox?action=make-intro&n1=<email>` when `email` is set.
-- **Copy intro link** copies `shareLink`.
-- **View Bridge profile** opens `https://os.brdg.app/to/<username>` when `username` is set.
-
-Change those URLs with `introInboxUrl` and `profileUrlForUsername` on `BridgeUIProvider`.
-
-Custom actions are not built in. “Add as team member” and “Add as founder” belong to the app. Pass them only on the screens where they apply. `onSelect` receives the row’s contact:
-
-```ts
-type NetworkContact = {
-  id: string
-  name: string
-  email: string | null
-  shareLink: string | null
-  profilePicUrl: string | null
-  position: string | null
-  company: string | null
-  username: string | null
-  isMember: boolean
-}
-
-type NetworkPersonAction = {
-  id: string
-  label: string
-  description?: string
-  icon?: React.ReactNode
-  onSelect: (contact: NetworkContact) => void
-}
-```
-
-Custom actions render above the built-in ones. The component does not check edit permission. If the user must not see an action, omit it from `customActions`.
-
-## Inline nudge
-
-`NetworkPeopleNudge` is the same note, inline in a team or founders section. It uses the same request as the floating helper. Clicking it opens the helper’s people list on this page.
-
-```tsx
-import { NetworkPeopleNudge } from "@brdgapp/ui"
-
-<NetworkPeopleNudge domain={domain} organizationLabel={displayName} />
-```
-
-Pass `onOpen` when the click should do something else. `organizationLabel`, `enabled`, and `className` match the helper.
-
-`openNetworkPeopleHelper(domain)` opens the floating helper from any other button. It clears the session dismiss for that domain.
-
-## Files
-
-| File | Role |
-| --- | --- |
-| `network-people-helper.tsx` | Floating widget. |
-| `network-people-nudge.tsx` | Inline note that opens the widget. |
-| `api.ts` | Count, preview, and paged contact requests. |
-| `styles.css` | Widget styles. Imported by the package stylesheet. |
-| `index.ts` | Public exports for this component. |

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

@@ -1,174 +0,0 @@
-import { cleanDomain } from "./domain"
-import type { BridgeClientConfig } from "../provider"
-import type { NetworkContact } from "./types"
-
-export const PREVIEW_LIMIT = 3
-export const PAGE_SIZE = 20
-const CACHE_MS = 5 * 60 * 1000
-
-type PreviewResult = {
-  count: number
-  contacts: NetworkContact[]
-}
-
-type CacheEntry = {
-  at: number
-  data: PreviewResult
-}
-
-const previewCache = new Map<string, CacheEntry>()
-const previewInflight = new Map<string, Promise<PreviewResult>>()
-
-type ApiContact = {
-  id?: unknown
-  ref_id?: unknown
-  name?: unknown
-  given_name?: unknown
-  email?: unknown
-  share_link?: unknown
-  profile_pic_url?: unknown
-  position?: unknown
-  company?: unknown
-  username?: unknown
-  is_member?: unknown
-}
-
-function mapShareLink(raw: unknown): string | null {
-  if (typeof raw !== "string") return null
-  const trimmed = raw.trim()
-  if (!trimmed) return null
-  if (/^https?:\/\//i.test(trimmed)) return trimmed
-  if (trimmed.startsWith("/")) return `https://brdg.app${trimmed}`
-  return `https://brdg.app/${trimmed}`
-}
-
-function mapContact(raw: ApiContact): NetworkContact | null {
-  const id = String(raw.id ?? raw.ref_id ?? "").trim()
-  if (!id) return null
-  const name =
-    (typeof raw.name === "string" && raw.name.trim()) ||
-    (typeof raw.given_name === "string" && raw.given_name.trim()) ||
-    "Contact"
-  const username = typeof raw.username === "string" && raw.username.trim() ? raw.username.trim() : null
-  return {
-    id,
-    name,
-    email: typeof raw.email === "string" && raw.email.trim() ? raw.email.trim() : null,
-    shareLink: mapShareLink(raw.share_link),
-    profilePicUrl:
-      typeof raw.profile_pic_url === "string" && raw.profile_pic_url.trim()
-        ? raw.profile_pic_url.trim()
-        : null,
-    position: typeof raw.position === "string" && raw.position.trim() ? raw.position.trim() : null,
-    company: typeof raw.company === "string" && raw.company.trim() ? raw.company.trim() : null,
-    username,
-    isMember: raw.is_member === true && Boolean(username),
-  }
-}
-
-async function bridgeGet(config: BridgeClientConfig, pathWithQuery: string): Promise<unknown> {
-  const token = await config.getAccessToken()
-  if (!token) {
-    const error = new Error("Not authenticated")
-    error.name = "BridgeAuthError"
-    throw error
-  }
-
-  const response = await fetch(`${config.apiBaseUrl}${pathWithQuery}`, {
-    method: "GET",
-    headers: {
-      Accept: "application/json",
-      Authorization: `Bearer ${token}`,
-    },
-    cache: "no-store",
-  })
-
-  if (!response.ok) {
-    const error = new Error("Failed to load network contacts.")
-    error.name = response.status === 401 ? "BridgeAuthError" : "BridgeRequestError"
-    throw error
-  }
-
-  return response.json()
-}
-
-function cacheKey(config: BridgeClientConfig, domain: string, token: string): string {
-  return `${config.apiBaseUrl}|${token}|${domain}`
-}
-
-export function fetchNetworkPreview(config: BridgeClientConfig, domain: string): Promise<PreviewResult> {
-  const cleaned = cleanDomain(domain)
-  if (!cleaned) return Promise.resolve({ count: 0, contacts: [] })
-
-  const inflightKey = `${config.apiBaseUrl}|${cleaned}`
-  const existing = previewInflight.get(inflightKey)
-  if (existing) return existing
-
-  const request = loadCachedPreview(config, cleaned).finally(() => {
-    previewInflight.delete(inflightKey)
-  })
-  previewInflight.set(inflightKey, request)
-  return request
-}
-
-async function loadCachedPreview(config: BridgeClientConfig, domain: string): Promise<PreviewResult> {
-  const token = await config.getAccessToken()
-  if (!token) return { count: 0, contacts: [] }
-
-  const key = cacheKey(config, domain, token)
-  const cached = previewCache.get(key)
-  if (cached && Date.now() - cached.at < CACHE_MS) return cached.data
-
-  const data = await loadPreview(config, domain)
-  previewCache.set(key, { at: Date.now(), data })
-  return data
-}
-
-async function loadPreview(config: BridgeClientConfig, domain: string): Promise<PreviewResult> {
-  const baseParams = new URLSearchParams({ domain_override: domain })
-  const listParams = new URLSearchParams(baseParams)
-  listParams.set("limit", String(PREVIEW_LIMIT))
-  listParams.set("offset", "0")
-
-  const [countBody, listBody] = await Promise.all([
-    bridgeGet(config, `/search/owned_full_network_contacts/count?${baseParams.toString()}`),
-    bridgeGet(config, `/search/owned_full_network_contacts?${listParams.toString()}`),
-  ])
-
-  const countRaw = (countBody as { count?: unknown })?.count
-  const count = typeof countRaw === "number" && countRaw >= 0 ? countRaw : 0
-  const contactsRaw = (listBody as { contacts?: unknown })?.contacts
-  const contacts = Array.isArray(contactsRaw)
-    ? contactsRaw
-        .map((item) => mapContact(item as ApiContact))
-        .filter((item): item is NetworkContact => item !== null)
-        .slice(0, PREVIEW_LIMIT)
-    : []
-
-  return { count, contacts }
-}
-
-export async function fetchNetworkPage(
-  config: BridgeClientConfig,
-  domain: string,
-  options: { offset: number; search?: string },
-): Promise<NetworkContact[]> {
-  const cleaned = cleanDomain(domain)
-  if (!cleaned) return []
-
-  const offset = Math.max(options.offset, 0)
-  const search = options.search?.trim() ?? ""
-  const params = new URLSearchParams({
-    domain_override: cleaned,
-    limit: String(PAGE_SIZE),
-    offset: String(offset),
-  })
-  if (search) params.set("s", search)
-
-  const body = await bridgeGet(config, `/search/owned_full_network_contacts?${params.toString()}`)
-  const contactsRaw = (body as { contacts?: unknown })?.contacts
-  if (!Array.isArray(contactsRaw)) return []
-  return contactsRaw
-    .map((item) => mapContact(item as ApiContact))
-    .filter((item): item is NetworkContact => item !== null)
-}

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

@@ -1,63 +0,0 @@
-"use client"
-
-import { useState, type CSSProperties } from "react"
-import { CheckIcon } from "./icons"
-import type { NetworkContact } from "./types"
-
-const FALLBACK_COUNT = 6
-
-function initials(name: string): string {
-  const parts = name.trim().split(/\s+/).filter(Boolean)
-  if (parts.length === 0) return "?"
-  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase()
-  return `${parts[0][0] ?? ""}${parts[parts.length - 1][0] ?? ""}`.toUpperCase()
-}
-
-function colorIndex(seed: string): number {
-  if (!seed) return 0
-  const code = seed.charCodeAt(0)
-  return Number.isFinite(code) ? code % FALLBACK_COUNT : 0
-}
-
-export function ContactAvatar({
-  contact,
-  size = "sm",
-  style,
-}: {
-  contact: Pick<NetworkContact, "id" | "name" | "profilePicUrl" | "username" | "isMember">
-  size?: "sm" | "md"
-  style?: CSSProperties
-}) {
-  const [hasError, setHasError] = useState(false)
-  const showImage = Boolean(contact.profilePicUrl) && !hasError
-  const isMember = contact.isMember || Boolean(contact.username)
-
-  return (
-    <span
-      className={`bridge-network-helper-avatar bridge-network-helper-avatar--${size}`}
-      style={style}
-      title={contact.name}
-    >
-      <span className="bridge-network-helper-avatar__face">
-        {showImage ? (
-          <img
-            src={contact.profilePicUrl ?? undefined}
-            alt=""
-            onError={() => setHasError(true)}
-            loading="lazy"
-            referrerPolicy="no-referrer"
-          />
-        ) : (
-          <span className={`bridge-network-helper-avatar__fallback is-${colorIndex(contact.name || contact.id)}`}>
-            {initials(contact.name)}
-          </span>
-        )}
-      </span>
-      {isMember ? (
-        <span className="bridge-network-helper-avatar__badge" aria-label="Bridge member" title="Bridge member">
-          <CheckIcon />
-        </span>
-      ) : null}
-    </span>
-  )
-}

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

@@ -1,14 +0,0 @@
-export function cleanDomain(domain: string): string {
-  if (!domain || typeof domain !== "string") return ""
-  let cleaned = domain.trim().replace(/^https?:\/\//i, "")
-  cleaned = cleaned.replace(/^www\./i, "")
-  cleaned = cleaned.replace(/\/+$/, "")
-  cleaned = cleaned.split("/")[0]?.split("?")[0] ?? ""
-  return cleaned.toLowerCase()
-}
-
-export function organizationLabelFromDomain(domain: string, organizationLabel?: string | null): string {
-  const custom = organizationLabel?.trim()
-  if (custom) return custom
-  return cleanDomain(domain)
-}

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

@@ -1,130 +0,0 @@
-import type { ReactNode, SVGProps } from "react"
-
-type IconProps = SVGProps<SVGSVGElement>
-
-function Icon({ children, ...props }: IconProps & { children: ReactNode }) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true" {...props}>
-      {children}
-    </svg>
-  )
-}
-
-export function SearchIcon(props: IconProps) {
-  return (
-    <Icon {...props}>
-      <circle cx="11" cy="11" r="7" />
-      <path d="m20 20-3.5-3.5" strokeLinecap="round" />
-    </Icon>
-  )
-}
-
-export function EyeOffIcon(props: IconProps) {
-  return (
-    <Icon {...props}>
-      <path d="M3 3l18 18" strokeLinecap="round" />
-      <path d="M10.6 10.6a2 2 0 0 0 2.8 2.8" strokeLinecap="round" />
-      <path d="M9.9 5.1A10.8 10.8 0 0 1 12 5c6 0 10 7 10 7a18 18 0 0 1-3.2 4.1" strokeLinecap="round" />
-      <path d="M6.1 6.1A18 18 0 0 0 2 12s4 7 10 7a10.8 10.8 0 0 0 4.1-.8" strokeLinecap="round" />
-    </Icon>
-  )
-}
-
-export function ChevronUpIcon(props: IconProps) {
-  return (
-    <Icon {...props}>
-      <path d="m6 14 6-6 6 6" strokeLinecap="round" strokeLinejoin="round" />
-    </Icon>
-  )
-}
-
-export function ChevronDownIcon(props: IconProps) {
-  return (
-    <Icon {...props}>
-      <path d="m6 10 6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
-    </Icon>
-  )
-}
-
-export function CheckIcon(props: IconProps) {
-  return (
-    <Icon {...props}>
-      <path d="m5 12 5 5L20 7" strokeLinecap="round" strokeLinejoin="round" />
-    </Icon>
-  )
-}
-
-export function CopyIcon(props: IconProps) {
-  return (
-    <Icon {...props}>
-      <rect x="9" y="9" width="11" height="11" rx="2" />
-      <path d="M5 15V5a2 2 0 0 1 2-2h10" strokeLinecap="round" />
-    </Icon>
-  )
-}
-
-export function UserPlusIcon(props: IconProps) {
-  return (
-    <Icon {...props}>
-      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" strokeLinecap="round" />
-      <circle cx="9" cy="7" r="4" />
-      <path d="M19 8v6M22 11h-6" strokeLinecap="round" />
-    </Icon>
-  )
-}
-
-export function LinkIcon(props: IconProps) {
-  return (
-    <Icon {...props}>
-      <path d="M10 13a5 5 0 0 0 7.1.1l2.1-2.1a5 5 0 0 0-7.1-7.1L10.7 5" strokeLinecap="round" />
-      <path d="M14 11a5 5 0 0 0-7.1-.1L4.8 13a5 5 0 0 0 7.1 7.1L13.3 19" strokeLinecap="round" />
-    </Icon>
-  )
-}
-
-export function UserIcon(props: IconProps) {
-  return (
-    <Icon {...props}>
-      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" strokeLinecap="round" />
-      <circle cx="12" cy="7" r="4" />
-    </Icon>
-  )
-}
-
-export function MoreIcon(props: IconProps) {
-  return (
-    <Icon {...props}>
-      <circle cx="12" cy="5" r="1" fill="currentColor" stroke="none" />
-      <circle cx="12" cy="12" r="1" fill="currentColor" stroke="none" />
-      <circle cx="12" cy="19" r="1" fill="currentColor" stroke="none" />
-    </Icon>
-  )
-}
-
-export function BridgeHelperIcon({ motion = "nudge" }: { motion?: "nudge" | "wave" | "breath" | "none" }) {
-  return (
-    <svg
-      className={motion === "none" ? "helper-icon" : `helper-icon ${motion}`}
-      viewBox="0 0 109 60"
-      aria-hidden="true"
-    >
-      <g>
-        <circle className="dot d1" cx="21.5" cy="5.5" r="6" />
-        <circle className="dot d2" cx="85.5" cy="5.5" r="6" />
-        <circle className="dot d3" cx="21.5" cy="21.5" r="6" />
-        <circle className="dot d4" cx="37.5" cy="21.5" r="6" />
-        <circle className="dot d5" cx="69.5" cy="21.5" r="6" />
-        <circle className="dot d6" cx="85.5" cy="21.5" r="6" />
-        <circle className="dot d7" cx="5.5" cy="37.5" r="6" />
-        <circle className="dot d8" cx="21.5" cy="37.5" r="6" />
-        <circle className="dot d9" cx="37.5" cy="37.5" r="6" />
-        <circle className="dot d10" cx="53.5" cy="37.5" r="6" />
-        <circle className="dot d11" cx="69.5" cy="37.5" r="6" />
-        <circle className="dot d12" cx="85.5" cy="37.5" r="6" />
-        <circle className="dot d13" cx="102" cy="37.5" r="6" />
-        <circle className="dot d14" cx="21.5" cy="53.5" r="6" />
-        <circle className="dot d15" cx="85.5" cy="53.5" r="6" />
-      </g>
-    </svg>
-  )
-}

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

@@ -1,6 +0,0 @@
-export { NetworkPeopleHelper } from "./network-people-helper"
-export type { NetworkPeopleHelperProps } from "./network-people-helper"
-export { NetworkPeopleNudge } from "./network-people-nudge"
-export type { NetworkPeopleNudgeProps } from "./network-people-nudge"
-export { openNetworkPeopleHelper } from "./open-helper"
-export type { NetworkContact, NetworkPersonAction, HelperPlacement } from "./types"