@pyric/ui 0.1.0-alpha.10 → 0.1.0-alpha.12

package/src/auth/components/AuthUserForm.tsx

@@ -0,0 +1,328 @@
+import { Fragment } from 'react';
+import type { FormEvent, ReactNode } from 'react';
+import { FEDERATED_PROVIDER_IDS } from 'pyric/auth';
+import type { AuthUserRecord, CreateUserRequest, UpdateUserRequest } from 'pyric/auth';
+import { useAuthUserEditor } from '../hooks/useAuthUserEditor.js';
+import { providerLabel } from '../providers.js';
+import { ClaimsField } from './ClaimsField.js';
+
+/** Create-mode provider multi-select: one checkbox per federated provider
+ *  id the sandbox supports (the canonical `FEDERATED_PROVIDER_IDS` set from
+ *  `pyric/auth` — derived from the shipped provider classes, not a UI-side
+ *  copy). A user can link one or several. Headless: style
+ *  `[data-pyric-provider-checklist]` / `[data-pyric-provider-option]`. */
+function ProviderChecklist({
+  selected,
+  onChange,
+}: {
+  selected: string[];
+  onChange: (ids: string[]) => void;
+}) {
+  return (
+    <div data-pyric-provider-checklist>
+      {FEDERATED_PROVIDER_IDS.map((id) => (
+        <label key={id} data-pyric-provider-option={id}>
+          <input
+            type="checkbox"
+            checked={selected.includes(id)}
+            onChange={(e) =>
+              onChange(
+                e.target.checked ? [...selected, id] : selected.filter((p) => p !== id),
+              )
+            }
+          />
+          <span data-pyric-provider-option-label>{providerLabel(id)}</span>
+          <span data-pyric-provider-option-id>{id}</span>
+        </label>
+      ))}
+    </div>
+  );
+}
+
+/** What `onSubmit` receives — discriminated on the form's mode. */
+export type AuthUserFormSubmit =
+  | { mode: 'create'; request: CreateUserRequest }
+  | { mode: 'edit'; uid: string; request: UpdateUserRequest };
+
+/** Field names the {@link AuthUserFormProps.renderField} slot receives,
+ *  in render order. Claims is NOT a slot field — it stays the standalone
+ *  `<ClaimsField>` (override it by composing `useAuthUserEditor`). */
+export type AuthUserFormFieldName =
+  | 'email'
+  | 'password'
+  | 'display-name'
+  | 'phone-number'
+  | 'photo-url'
+  | 'providers'
+  | 'email-verified'
+  | 'disabled';
+
+/** What the {@link AuthUserFormProps.renderField} slot receives per field. */
+export interface AuthUserFormField {
+  name: AuthUserFormFieldName;
+  /** The visible label text the default rendering uses. */
+  label: string;
+  /** The wired, controlled input element (carries `data-pyric-field`).
+   *  Place it anywhere; state/validation stay connected. */
+  input: ReactNode;
+  /** Current validation message for this field, or null. */
+  error: string | null;
+  /** `'text' | 'checkbox' | 'group'` — lets one slot impl branch on
+   *  layout (`group` = a multi-control block, e.g. the provider
+   *  checklist; create mode only). */
+  kind: 'text' | 'checkbox' | 'group';
+  /** The default rendering (label wrapper + label text + input + error).
+   *  Call it to keep the stock layout for fields you don't customize. */
+  defaultRender: () => ReactNode;
+}
+
+export interface AuthUserFormProps {
+  /** Existing record → edit mode (delta payloads); omit → create mode. */
+  initial?: AuthUserRecord;
+  /** Receives the validated payload. Wire `create` to
+   *  `useAuthUsers().createUser` and `edit` to `updateUser`. */
+  onSubmit: (submit: AuthUserFormSubmit) => void;
+  onCancel?: () => void;
+  submitLabel?: string;
+  cancelLabel?: string;
+  /** Extra content rendered before the action row (e.g. an error from a
+   *  failed `createUser` call). */
+  children?: ReactNode;
+  className?: string;
+  /** Per-field layout override. Called for each field (see
+   *  {@link AuthUserFormFieldName} order); return your own markup around
+   *  `field.input`, or `field.defaultRender()` to keep the stock label
+   *  wrapper for that field. Omit the prop for the default layout. */
+  renderField?: (field: AuthUserFormField) => ReactNode;
+}
+
+/**
+ * Headless add/edit-user form over `useAuthUserEditor` — the emulator
+ * UI's user dialog fields (email, password, display name, phone, photo
+ * URL, verified/disabled toggles, custom claims) with its validation
+ * messages. Zero CSS; structure addressable via `data-pyric-*`:
+ *
+ * - root `form[data-pyric-ui="auth-user-form"]` with `data-pyric-mode`,
+ *   `data-pyric-is-dirty`, `data-pyric-is-valid` state attrs
+ * - every field (text inputs AND checkboxes) is wrapped in a
+ *   `label[data-pyric-field-label="<name>"]` carrying a visible
+ *   `span[data-pyric-label-text]` — labeled grid layouts are pure CSS
+ *   (`display: grid` on the wrappers); label-less designs hide
+ *   `[data-pyric-label-text]` and lean on the placeholders
+ * - inputs `[data-pyric-field="email" | "password" | "display-name" |
+ *   "phone-number" | "photo-url" | "email-verified" | "disabled"]`
+ * - CREATE mode only: a "Sign-in providers" group
+ *   (`fieldset[data-pyric-field-label="providers"]` wrapping
+ *   `[data-pyric-provider-checklist]`) — one checkbox per federated
+ *   provider the sandbox supports (`FEDERATED_PROVIDER_IDS` from
+ *   `pyric/auth`; multiple selectable, entries land on
+ *   `CreateUserRequest.providerUserInfo`)
+ * - claims via the standalone `<ClaimsField>`
+ * - per-field messages `[data-pyric-field-error="email" | "password"]`
+ *   render INSIDE the field's label wrapper, after the input
+ * - `button[data-pyric-cancel]` / `button[data-pyric-submit]` (submit is
+ *   disabled while invalid, or pristine in edit mode)
+ *
+ * Submit emits payloads only — no sandbox calls — so the same form works
+ * for create and edit and the consumer owns error handling.
+ */
+export function AuthUserForm({
+  initial,
+  onSubmit,
+  onCancel,
+  submitLabel = 'Save',
+  cancelLabel = 'Cancel',
+  children,
+  className,
+  renderField,
+}: AuthUserFormProps) {
+  const editor = useAuthUserEditor({ initial });
+  const mode = initial ? 'edit' : 'create';
+  const submittable = editor.isValid && (mode === 'create' || editor.isDirty);
+
+  /** Build one field descriptor: the wired input + the stock label-wrapper
+   *  rendering. `renderField` consumers place `input` themselves. */
+  const field = (
+    name: AuthUserFormFieldName,
+    label: string,
+    kind: 'text' | 'checkbox' | 'group',
+    input: ReactNode,
+    error: string | null = null,
+  ): AuthUserFormField => ({
+    name,
+    label,
+    input,
+    error,
+    kind,
+    defaultRender: () =>
+      kind === 'checkbox' ? (
+        <label data-pyric-field-label={name} key={name}>
+          {input}
+          <span data-pyric-label-text>{label}</span>
+        </label>
+      ) : kind === 'group' ? (
+        <fieldset data-pyric-field-label={name} key={name}>
+          <legend data-pyric-label-text>{label}</legend>
+          {input}
+        </fieldset>
+      ) : (
+        <label data-pyric-field-label={name} key={name}>
+          <span data-pyric-label-text>{label}</span>
+          {input}
+          {error != null && (
+            <p role="alert" data-pyric-field-error={name}>
+              {error}
+            </p>
+          )}
+        </label>
+      ),
+  });
+
+  const fields: AuthUserFormField[] = [
+    field(
+      'email',
+      'Email',
+      'text',
+      <input
+        type="email"
+        data-pyric-field="email"
+        placeholder="email@example.com"
+        value={editor.fields.email}
+        onChange={(e) => editor.setField('email', e.target.value)}
+      />,
+      editor.errors.email ?? null,
+    ),
+    field(
+      'password',
+      'Password',
+      'text',
+      <input
+        type="password"
+        data-pyric-field="password"
+        placeholder={mode === 'edit' ? 'New password (unchanged if empty)' : 'Password'}
+        value={editor.fields.password}
+        onChange={(e) => editor.setField('password', e.target.value)}
+      />,
+      editor.errors.password ?? null,
+    ),
+    field(
+      'display-name',
+      'Display name',
+      'text',
+      <input
+        type="text"
+        data-pyric-field="display-name"
+        placeholder="Display name (optional)"
+        value={editor.fields.displayName}
+        onChange={(e) => editor.setField('displayName', e.target.value)}
+      />,
+    ),
+    field(
+      'phone-number',
+      'Phone number',
+      'text',
+      <input
+        type="tel"
+        data-pyric-field="phone-number"
+        placeholder="+1 555 555 0100"
+        value={editor.fields.phoneNumber}
+        onChange={(e) => editor.setField('phoneNumber', e.target.value)}
+      />,
+    ),
+    field(
+      'photo-url',
+      'Photo URL',
+      'text',
+      <input
+        type="url"
+        data-pyric-field="photo-url"
+        placeholder="https://example.com/avatar.png"
+        value={editor.fields.photoUrl}
+        onChange={(e) => editor.setField('photoUrl', e.target.value)}
+      />,
+    ),
+    // Provider selection is CREATE-only: in edit mode linked providers are
+    // managed by the consumer's own affordance over `updateUser` (Studio's
+    // per-user ProvidersEditor), not the delta form.
+    ...(mode === 'create'
+      ? [
+          field(
+            'providers',
+            'Sign-in providers',
+            'group',
+            <ProviderChecklist
+              selected={editor.fields.providerIds}
+              onChange={(ids) => editor.setField('providerIds', ids)}
+            />,
+          ),
+        ]
+      : []),
+    field(
+      'email-verified',
+      'Verified email',
+      'checkbox',
+      <input
+        type="checkbox"
+        data-pyric-field="email-verified"
+        checked={editor.fields.emailVerified}
+        onChange={(e) => editor.setField('emailVerified', e.target.checked)}
+      />,
+    ),
+    field(
+      'disabled',
+      'Disabled (sign-in attempts are rejected)',
+      'checkbox',
+      <input
+        type="checkbox"
+        data-pyric-field="disabled"
+        checked={editor.fields.disabled}
+        onChange={(e) => editor.setField('disabled', e.target.checked)}
+      />,
+    ),
+  ];
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    if (!submittable) return;
+    if (mode === 'edit') {
+      onSubmit({ mode, uid: initial!.uid, request: editor.toUpdateRequest() });
+    } else {
+      onSubmit({ mode, request: editor.toCreateRequest() });
+    }
+  };
+
+  return (
+    <form
+      className={className}
+      data-pyric-ui="auth-user-form"
+      data-pyric-mode={mode}
+      data-pyric-is-dirty={editor.isDirty ? '' : undefined}
+      data-pyric-is-valid={editor.isValid ? '' : undefined}
+      onSubmit={submit}
+    >
+      {fields.map((f) =>
+        renderField ? (
+          <Fragment key={f.name}>{renderField(f)}</Fragment>
+        ) : (
+          f.defaultRender()
+        ),
+      )}
+      <ClaimsField
+        value={editor.fields.claimsText}
+        onChange={(text) => editor.setField('claimsText', text)}
+        error={editor.errors.claims}
+      />
+      {children}
+      <footer data-pyric-form-actions>
+        {onCancel ? (
+          <button type="button" data-pyric-cancel onClick={onCancel}>
+            {cancelLabel}
+          </button>
+        ) : null}
+        <button type="submit" data-pyric-submit disabled={!submittable}>
+          {submitLabel}
+        </button>
+      </footer>
+    </form>
+  );
+}

package/src/auth/components/AuthUserList.tsx

@@ -0,0 +1,219 @@
+import type { ReactNode } from 'react';
+import type { AuthUserRecord } from 'pyric/auth';
+import { VirtualList } from '../../primitives/VirtualList.js';
+import { providerLabel } from '../providers.js';
+
+export interface AuthUserListProps {
+  /** Rows to render — usually `useAuthUsers().users`. */
+  users: AuthUserRecord[];
+  isLoading?: boolean;
+  error?: Error;
+  /** The active filter text. Distinguishes the "no users yet" zero state
+   *  (empty filter) from "no results" (non-empty). */
+  filter?: string;
+  /** Fired when the identifier cell is clicked. When omitted, the
+   *  identifier renders as plain text. */
+  onSelect?: (user: AuthUserRecord) => void;
+  /** Identifier-cell override. Default: email, else phone, else
+   *  `anonymous`, else the uid. */
+  renderIdentifier?: (user: AuthUserRecord) => ReactNode;
+  /** Providers-cell override. Default: one `<span data-pyric-provider-id>`
+   *  per linked provider with its text label (`anonymous` for anonymous
+   *  users) — hook icons off the attribute. */
+  renderProviders?: (user: AuthUserRecord) => ReactNode;
+  /** Per-row selection control. Rendered in the leading cell so bulk
+   *  selection stays visually separate from trailing row actions. */
+  renderSelection?: (user: AuthUserRecord) => ReactNode;
+  /** Optional content for the leading selection column header (for example,
+   *  a select-all checkbox). Only rendered with `renderSelection`. */
+  renderSelectionHeader?: ReactNode;
+  /** Per-row action slot (edit / disable / delete menu). Rendered in a
+   *  trailing cell; column header is added when this is provided. */
+  renderActions?: (user: AuthUserRecord) => ReactNode;
+  /** Optional content for the trailing actions column header (for example,
+   *  a select-all checkbox). Only rendered with `renderActions`. */
+  renderActionsHeader?: ReactNode;
+  /** Timestamp formatter for Created. Default: locale date, em dash for null. */
+  formatCreatedAt?: (iso: string | null) => ReactNode;
+  /** Timestamp formatter for Signed In. Kept separate because a missing login
+   *  means "never", while a missing/invalid creation time is malformed data. */
+  formatLastLoginAt?: (iso: string | null) => ReactNode;
+  /** Zero state when the project has no users at all. */
+  emptyState?: ReactNode;
+  /** Zero state when the filter matches nothing. */
+  noResultsState?: ReactNode;
+  className?: string;
+  /** Above this row count, rows render through `<VirtualList>`.
+   *  Default 100. `Infinity` disables. */
+  virtualizeThreshold?: number;
+  /** Estimated row height when virtualizing. Default 44. */
+  rowHeight?: number | ((index: number) => number);
+  /** Scroll-container height when virtualized. Default `'60vh'`. */
+  virtualizedHeight?: number | string;
+}
+
+function defaultIdentifier(user: AuthUserRecord): ReactNode {
+  return user.email ?? user.phoneNumber ?? (user.isAnonymous ? 'anonymous' : user.uid);
+}
+
+function defaultProviders(user: AuthUserRecord): ReactNode {
+  if (user.isAnonymous && user.providerUserInfo.length === 0) {
+    return <span data-pyric-provider-id="anonymous">{providerLabel('anonymous')}</span>;
+  }
+  return user.providerUserInfo.map((p) => (
+    <span key={p.providerId} data-pyric-provider-id={p.providerId}>
+      {providerLabel(p.providerId)}
+    </span>
+  ));
+}
+
+function defaultFormatDate(iso: string | null): ReactNode {
+  if (!iso) return '—';
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime()) ? '—' : d.toLocaleDateString();
+}
+
+/**
+ * Headless users table — the emulator UI's columns (Identifier,
+ * Provider, Created, Signed In, User UID, actions) over the
+ * `data-pyric-*` styling contract, with role-based table semantics so
+ * rows can virtualize (a real `<table>` can't wrap a scroll container).
+ *
+ * The hook (`useAuthUsers`) owns data + filter state; this component
+ * just renders. Disabled accounts carry `data-pyric-user-disabled` for
+ * dimmed styling.
+ */
+export function AuthUserList({
+  users,
+  isLoading,
+  error,
+  filter,
+  onSelect,
+  renderIdentifier,
+  renderProviders,
+  renderSelection,
+  renderSelectionHeader,
+  renderActions,
+  renderActionsHeader,
+  formatCreatedAt = defaultFormatDate,
+  formatLastLoginAt = defaultFormatDate,
+  emptyState,
+  noResultsState,
+  className,
+  virtualizeThreshold = 100,
+  rowHeight = 44,
+  virtualizedHeight = '60vh',
+}: AuthUserListProps) {
+  if (error) {
+    return (
+      <div className={className} data-pyric-ui="auth-user-list" data-pyric-error="" role="alert">
+        {error.message}
+      </div>
+    );
+  }
+  if (isLoading && users.length === 0) {
+    return <div className={className} data-pyric-ui="auth-user-list" data-pyric-loading="" />;
+  }
+  if (users.length === 0) {
+    const filtered = Boolean(filter?.trim());
+    return (
+      <div
+        className={className}
+        data-pyric-ui="auth-user-list"
+        data-pyric-empty=""
+        data-pyric-no-results={filtered ? '' : undefined}
+      >
+        {filtered
+          ? (noResultsState ?? 'No results')
+          : (emptyState ?? 'No users for this project yet')}
+      </div>
+    );
+  }
+
+  const virtualized = users.length > virtualizeThreshold;
+
+  const row = (user: AuthUserRecord) => (
+    <div
+      key={user.uid}
+      role="row"
+      data-pyric-user-entry
+      data-pyric-user-uid={user.uid}
+      data-pyric-user-disabled={user.disabled ? '' : undefined}
+    >
+      {renderSelection ? (
+        <span role="cell" data-pyric-user-cell="selection">
+          {renderSelection(user)}
+        </span>
+      ) : null}
+      <span role="cell" data-pyric-user-cell="identifier">
+        {onSelect ? (
+          <button type="button" data-pyric-user-select onClick={() => onSelect(user)}>
+            {renderIdentifier ? renderIdentifier(user) : defaultIdentifier(user)}
+          </button>
+        ) : (
+          (renderIdentifier ?? defaultIdentifier)(user)
+        )}
+      </span>
+      <span role="cell" data-pyric-user-cell="providers">
+        {(renderProviders ?? defaultProviders)(user)}
+      </span>
+      <span role="cell" data-pyric-user-cell="created">
+        {formatCreatedAt(user.createdAt)}
+      </span>
+      <span role="cell" data-pyric-user-cell="signed-in">
+        {formatLastLoginAt(user.lastLoginAt)}
+      </span>
+      <span role="cell" data-pyric-user-cell="uid">
+        {user.uid}
+      </span>
+      {renderActions ? (
+        <span role="cell" data-pyric-user-cell="actions">
+          {renderActions(user)}
+        </span>
+      ) : null}
+    </div>
+  );
+
+  return (
+    <div
+      className={className}
+      role="table"
+      aria-label="Authentication users"
+      data-pyric-ui="auth-user-list"
+      data-pyric-virtualized={virtualized ? '' : undefined}
+      data-pyric-selection={renderSelection ? '' : undefined}
+      data-pyric-actions={renderActions ? '' : undefined}
+    >
+      <div role="row" data-pyric-user-header>
+        {renderSelection ? (
+          <span role="columnheader" data-pyric-user-cell="selection" aria-label="Selection">
+            {renderSelectionHeader}
+          </span>
+        ) : null}
+        <span role="columnheader" data-pyric-user-cell="identifier">Identifier</span>
+        <span role="columnheader" data-pyric-user-cell="providers">Provider</span>
+        <span role="columnheader" data-pyric-user-cell="created">Created</span>
+        <span role="columnheader" data-pyric-user-cell="signed-in">Signed In</span>
+        <span role="columnheader" data-pyric-user-cell="uid">User UID</span>
+        {renderActions ? (
+          <span role="columnheader" data-pyric-user-cell="actions" aria-label="Actions">
+            {renderActionsHeader}
+          </span>
+        ) : null}
+      </div>
+      {virtualized ? (
+        <VirtualList
+          items={users}
+          estimateSize={rowHeight}
+          height={virtualizedHeight}
+          getItemKey={(user) => user.uid}
+          renderItem={row}
+        />
+      ) : (
+        <div role="rowgroup" data-pyric-user-rows>
+          {users.map(row)}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/auth/components/ClaimsField.tsx

@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react';
+
+export interface ClaimsFieldProps {
+  /** Raw claims JSON text. */
+  value: string;
+  onChange: (text: string) => void;
+  /** Validation message (from `validateSerializedClaims` /
+   *  `useAuthUserEditor().errors.claims`). Renders a `role="alert"`
+   *  paragraph and marks the textarea invalid. */
+  error?: string;
+  /** Helper text under the field (rules-usage hint by default). */
+  hint?: ReactNode;
+  placeholder?: string;
+  className?: string;
+}
+
+/**
+ * Headless custom-claims textarea — the emulator UI's
+ * `customAttributes` control. Standalone so custom forms can reuse the
+ * exact field (the playground's sign-in helper and the user form both
+ * render one); validation itself lives in `validateSerializedClaims`.
+ */
+export function ClaimsField({
+  value,
+  onChange,
+  error,
+  hint,
+  placeholder = '{"role":"admin"}',
+  className,
+}: ClaimsFieldProps) {
+  return (
+    <div className={className} data-pyric-ui="claims-field">
+      <textarea
+        data-pyric-field="claims"
+        data-pyric-claims-invalid={error != null ? '' : undefined}
+        aria-label="Custom claims (optional)"
+        aria-invalid={error != null || undefined}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      />
+      {error != null && (
+        <p role="alert" data-pyric-claims-error>
+          {error}
+        </p>
+      )}
+      {hint != null && <p data-pyric-claims-hint>{hint}</p>}
+    </div>
+  );
+}