@startsimpli/ui 0.4.14 → 0.4.15

package/src/components/team/LeaveTeamDialog.tsx

@@ -0,0 +1,130 @@
+'use client'
+
+/**
+ * LeaveTeamDialog — confirm-and-leave modal. The backend enforces the
+ * "last owner can't leave" rule (startsim-tsm); this dialog just surfaces
+ * the API error inline so the user sees why the action failed.
+ *
+ * Apps wire `onSubmit` to api.teams.removeMember(team.slug, currentUserId).
+ * startsim-o7s.
+ */
+
+import * as React from 'react'
+import type { TeamLite } from './types'
+import {
+  LEAVE_DIALOG_DEFAULTS,
+  type LeaveTeamDialogClassNames,
+} from './leave-team-dialog-default-class-names'
+
+export interface LeaveTeamDialogProps {
+  team: TeamLite
+  onSubmit?: (team: TeamLite) => Promise<void> | void
+  onLeft?: (team: TeamLite) => void
+  triggerLabel?: string
+  title?: string
+  /** Override the confirmation body copy. */
+  description?: React.ReactNode
+  classNames?: LeaveTeamDialogClassNames
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export function LeaveTeamDialog({
+  team,
+  onSubmit,
+  onLeft,
+  triggerLabel = 'Leave team',
+  title,
+  description,
+  classNames,
+  open: controlledOpen,
+  onOpenChange,
+}: LeaveTeamDialogProps) {
+  const cls = { ...LEAVE_DIALOG_DEFAULTS, ...(classNames ?? {}) }
+  const [internalOpen, setInternalOpen] = React.useState(false)
+  const open = controlledOpen ?? internalOpen
+  const setOpen = (next: boolean) => {
+    if (controlledOpen === undefined) setInternalOpen(next)
+    onOpenChange?.(next)
+  }
+
+  const [submitting, setSubmitting] = React.useState(false)
+  const [error, setError] = React.useState('')
+
+  function close() {
+    setOpen(false)
+    setError('')
+    setSubmitting(false)
+  }
+
+  async function handleConfirm() {
+    setError('')
+    setSubmitting(true)
+    try {
+      await onSubmit?.(team)
+      onLeft?.(team)
+      close()
+    } catch (err) {
+      // Backend will reject leave when the user is the sole OWNER (startsim-tsm).
+      setError(err instanceof Error ? err.message : 'Could not leave team')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        className={cls.trigger}
+        onClick={() => setOpen(true)}
+        aria-haspopup="dialog"
+      >
+        {triggerLabel}
+      </button>
+      {open && (
+        <div className={cls.overlay} role="presentation" onClick={close}>
+          <div
+            className={cls.panel}
+            role="dialog"
+            aria-modal="true"
+            aria-label={title ?? `Leave ${team.name}`}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className={cls.header}>
+              <h2 className={cls.title}>{title ?? `Leave ${team.name}`}</h2>
+            </div>
+            <div className={cls.body}>
+              {description ?? (
+                <p className={cls.warningText}>
+                  You will lose access to <strong>{team.name}</strong>. An owner
+                  can re-invite you later. If you&apos;re the only owner you
+                  must promote someone else first.
+                </p>
+              )}
+              {error && <p className={cls.errorText} role="alert">{error}</p>}
+            </div>
+            <div className={cls.footer}>
+              <button
+                type="button"
+                className={cls.cancelButton}
+                onClick={close}
+                disabled={submitting}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                className={cls.confirmButton}
+                onClick={handleConfirm}
+                disabled={submitting}
+              >
+                {submitting ? 'Leaving…' : 'Leave team'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

package/src/components/team/MembersTable.tsx

@@ -0,0 +1,138 @@
+'use client'
+
+/**
+ * MembersTable — headless members list. Renders avatar + name + email +
+ * role badge + actions per row. When `canManage` is true the row shows a
+ * RoleSelector (calls onChangeRole) + a Remove button (calls onRemove).
+ *
+ * Pagination is intentionally absent — the backend endpoint at
+ * /api/v1/teams/{id}/members returns the full list. SSP support is a
+ * follow-up bead. startsim-o7s.
+ */
+
+import * as React from 'react'
+import { RoleSelector } from './RoleSelector'
+import {
+  userDisplayName,
+  userInitials,
+  type MemberRow,
+  type TeamRole,
+} from './types'
+import {
+  MEMBERS_TABLE_DEFAULTS,
+  type MembersTableClassNames,
+} from './members-table-default-class-names'
+
+export interface MembersTableProps {
+  members: MemberRow[]
+  /**
+   * When true, expose the role selector + remove button. Apps should pass
+   * `canManage = isAdmin || isOwner` derived from useMembership().
+   */
+  canManage?: boolean
+  onChangeRole?: (userId: string, role: TeamRole) => void | Promise<void>
+  onRemove?: (userId: string) => void | Promise<void>
+  /** Custom empty-state slot. Defaults to a generic "No members yet" cell. */
+  emptyState?: React.ReactNode
+  classNames?: MembersTableClassNames
+  /** Restrict role-selector options (e.g. hide 'owner' when caller isn't owner). */
+  availableRoles?: TeamRole[]
+}
+
+const ROLE_LABEL: Record<TeamRole, string> = {
+  owner: 'Owner',
+  admin: 'Admin',
+  member: 'Member',
+  viewer: 'Viewer',
+}
+
+export function MembersTable({
+  members,
+  canManage = false,
+  onChangeRole,
+  onRemove,
+  emptyState,
+  classNames,
+  availableRoles,
+}: MembersTableProps) {
+  const cls = { ...MEMBERS_TABLE_DEFAULTS, ...(classNames ?? {}) }
+
+  return (
+    <div className={cls.root}>
+      <table className={cls.table}>
+        <thead className={cls.thead}>
+          <tr className={cls.headerRow}>
+            <th className={cls.th} scope="col">Member</th>
+            <th className={cls.th} scope="col">Role</th>
+            {canManage && (
+              <th className={cls.th} scope="col" aria-label="Actions" />
+            )}
+          </tr>
+        </thead>
+        <tbody className={cls.tbody}>
+          {members.length === 0 && (
+            <tr>
+              <td className={cls.emptyRow} colSpan={canManage ? 3 : 2}>
+                {emptyState ?? 'No members yet.'}
+              </td>
+            </tr>
+          )}
+          {members.map((m) => (
+            <tr key={m.id} className={cls.row}>
+              <td className={cls.cell}>
+                <div className="flex items-center gap-3">
+                  {m.user?.avatarUrl ? (
+                    <img
+                      src={m.user.avatarUrl}
+                      alt=""
+                      className={cls.avatar}
+                      style={{ objectFit: 'cover' }}
+                    />
+                  ) : (
+                    <span className={cls.avatar} aria-hidden="true">
+                      {userInitials(m.user)}
+                    </span>
+                  )}
+                  <div className="flex flex-col">
+                    <span className={cls.name}>
+                      {userDisplayName(m.user) || m.userId}
+                    </span>
+                    {m.user?.email && (
+                      <span className={cls.email}>{m.user.email}</span>
+                    )}
+                  </div>
+                </div>
+              </td>
+              <td className={cls.cell}>
+                {canManage && onChangeRole ? (
+                  <RoleSelector
+                    value={m.role}
+                    onChange={(role) => onChangeRole(m.userId, role)}
+                    availableRoles={availableRoles}
+                  />
+                ) : (
+                  <span className={cls.roleBadge}>{ROLE_LABEL[m.role]}</span>
+                )}
+              </td>
+              {canManage && (
+                <td className={cls.cell}>
+                  <div className={cls.actions}>
+                    {onRemove && (
+                      <button
+                        type="button"
+                        className={cls.removeButton}
+                        onClick={() => onRemove(m.userId)}
+                      >
+                        Remove
+                      </button>
+                    )}
+                  </div>
+                </td>
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}

package/src/components/team/OrgSwitcher.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+/**
+ * OrgSwitcher — pick between Companies the current user belongs to. Useful
+ * for accounts that ended up multi-company via cross-domain invitations.
+ *
+ * Native <select> for now. The classNames-slot API stays the same when we
+ * upgrade to a dropdown menu. startsim-o7s.
+ */
+
+import * as React from 'react'
+import type { CompanyLite } from './types'
+import {
+  ORG_SWITCHER_DEFAULTS,
+  type OrgSwitcherClassNames,
+} from './org-switcher-default-class-names'
+
+export interface OrgSwitcherProps {
+  companies: CompanyLite[]
+  currentCompanyId?: string | null
+  onSwitch: (companyId: string) => void | Promise<void>
+  /** Hide the visible "Organization" label, keep only the SR-only label. */
+  hideLabel?: boolean
+  label?: string
+  classNames?: OrgSwitcherClassNames
+}
+
+export function OrgSwitcher({
+  companies,
+  currentCompanyId,
+  onSwitch,
+  hideLabel = false,
+  label = 'Organization',
+  classNames,
+}: OrgSwitcherProps) {
+  const cls = { ...ORG_SWITCHER_DEFAULTS, ...(classNames ?? {}) }
+  // If the caller hasn't pinned currentCompanyId, fall back to the first
+  // entry so the <select>'s value matches an option (otherwise React warns).
+  const value = currentCompanyId ?? companies[0]?.id ?? ''
+
+  if (companies.length === 0) return null
+
+  return (
+    <span className={cls.root}>
+      {!hideLabel && (
+        <span className={cls.label} aria-hidden="true">
+          {label}
+        </span>
+      )}
+      <label className="sr-only" htmlFor="org-switcher-select">
+        {label}
+      </label>
+      <select
+        id="org-switcher-select"
+        value={value}
+        onChange={(e) => onSwitch(e.target.value)}
+        className={cls.select}
+        aria-label={label}
+      >
+        {companies.map((c) => (
+          <option key={c.id} value={c.id}>
+            {c.name}
+          </option>
+        ))}
+      </select>
+    </span>
+  )
+}

package/src/components/team/PendingInvitationCallout.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+/**
+ * PendingInvitationCallout — "You've been invited to <team> as <role>" banner
+ * with an Accept button. Apps pass an `onAccept` handler that typically
+ * resolves the invitation token (from the URL) and calls
+ * api.teamInvitations.accept(id, token).
+ *
+ * Optional `teamName` lets apps render the team's display name even though
+ * the invitation row from the backend only carries teamId. startsim-o7s.
+ */
+
+import * as React from 'react'
+import type { InvitationLite } from './types'
+import {
+  PENDING_INVITE_DEFAULTS,
+  type PendingInvitationCalloutClassNames,
+} from './pending-invitation-callout-default-class-names'
+
+export interface PendingInvitationCalloutProps {
+  invitation: InvitationLite
+  /** Resolved team name (caller supplies). When omitted we use `team #<id>`. */
+  teamName?: string
+  /** Called when the user clicks Accept. */
+  onAccept?: (invitation: InvitationLite) => Promise<void> | void
+  /** Called when the user clicks Decline. Optional — hidden when not provided. */
+  onDecline?: (invitation: InvitationLite) => Promise<void> | void
+  /** Notification once accept resolves. */
+  onAccepted?: (invitation: InvitationLite) => void
+  acceptLabel?: string
+  declineLabel?: string
+  classNames?: PendingInvitationCalloutClassNames
+}
+
+export function PendingInvitationCallout({
+  invitation,
+  teamName,
+  onAccept,
+  onDecline,
+  onAccepted,
+  acceptLabel = 'Accept',
+  declineLabel = 'Decline',
+  classNames,
+}: PendingInvitationCalloutProps) {
+  const cls = { ...PENDING_INVITE_DEFAULTS, ...(classNames ?? {}) }
+  const [submitting, setSubmitting] = React.useState(false)
+  const [error, setError] = React.useState('')
+
+  const renderedTeam = teamName ?? `team #${invitation.teamId}`
+  const role = invitation.role
+
+  async function handleAccept() {
+    setError('')
+    setSubmitting(true)
+    try {
+      await onAccept?.(invitation)
+      onAccepted?.(invitation)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not accept invitation')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  async function handleDecline() {
+    setError('')
+    setSubmitting(true)
+    try {
+      await onDecline?.(invitation)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not decline invitation')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div role="status" className={cls.root}>
+      <p className={cls.message}>
+        You&apos;ve been invited to <span className={cls.emphasized}>{renderedTeam}</span> as a{' '}
+        <span className={cls.emphasized}>{role}</span>.
+      </p>
+      <div className={cls.actions}>
+        {onDecline && (
+          <button
+            type="button"
+            className={cls.declineButton}
+            onClick={handleDecline}
+            disabled={submitting}
+          >
+            {declineLabel}
+          </button>
+        )}
+        <button
+          type="button"
+          className={cls.acceptButton}
+          onClick={handleAccept}
+          disabled={submitting}
+        >
+          {submitting ? 'Working…' : acceptLabel}
+        </button>
+      </div>
+      {error && <p className={cls.errorText} role="alert">{error}</p>}
+    </div>
+  )
+}

package/src/components/team/RoleSelector.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+/**
+ * RoleSelector — headless role picker honoring the OWNER/ADMIN/MEMBER/VIEWER
+ * hierarchy from @startsimpli/api.
+ *
+ * Native <select> for now. A Radix Select upgrade is a follow-up — the
+ * classNames-slot API stays the same. startsim-o7s.
+ */
+
+import * as React from 'react'
+import type { TeamRole } from './types'
+import {
+  ROLE_SELECTOR_DEFAULTS,
+  type RoleSelectorClassNames,
+} from './role-selector-default-class-names'
+
+const ALL_ROLES: TeamRole[] = ['owner', 'admin', 'member', 'viewer']
+
+export interface RoleSelectorProps {
+  value: TeamRole
+  onChange: (role: TeamRole) => void
+  disabled?: boolean
+  /**
+   * Restrict the list of options. Defaults to OWNER/ADMIN/MEMBER/VIEWER.
+   * The InviteMemberDialog hides 'owner' from this list by default since you
+   * promote owners via update-role, not the invite flow.
+   */
+  availableRoles?: TeamRole[]
+  /** Label fallback for screen readers when no <label> wraps the component. */
+  ariaLabel?: string
+  classNames?: RoleSelectorClassNames
+}
+
+const LABELS: Record<TeamRole, string> = {
+  owner: 'Owner',
+  admin: 'Admin',
+  member: 'Member',
+  viewer: 'Viewer',
+}
+
+export function RoleSelector({
+  value,
+  onChange,
+  disabled,
+  availableRoles = ALL_ROLES,
+  ariaLabel = 'Role',
+  classNames,
+}: RoleSelectorProps) {
+  const cls = { ...ROLE_SELECTOR_DEFAULTS, ...(classNames ?? {}) }
+  return (
+    <span className={cls.root}>
+      <select
+        aria-label={ariaLabel}
+        value={value}
+        disabled={disabled}
+        onChange={(e) => onChange(e.target.value as TeamRole)}
+        className={cls.select}
+      >
+        {availableRoles.map((r) => (
+          <option key={r} value={r}>
+            {LABELS[r]}
+          </option>
+        ))}
+      </select>
+    </span>
+  )
+}