@everystack/admin 0.4.2 → 0.4.4

package/src/components/DeletePreview.tsx

@@ -0,0 +1,109 @@
+/**
+ * DeletePreview — before a delete, how many rows each declared association links
+ * to this record. The counts are information only: a count that fails shows `?`,
+ * and Confirm never waits for them or depends on them. It adds no write.
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import { View, Text } from 'react-native';
+import { Button } from '@everystack/ui';
+import type { DataAdapter } from '../adapters/types';
+import type { AssociationConfig } from '../types';
+import { safeRelationId } from '../hooks/useRelationLabels';
+
+/** Each association costs one request, so the preview counts at most this many. */
+export const MAX_ASSOCIATIONS = 12;
+
+export interface DeletePreviewProps {
+  adapter: DataAdapter;
+  /** e.g. 'Contents' */
+  label: string;
+  id: string | number;
+  associations: AssociationConfig[];
+  /** The resource soft-deletes, so the linked rows stay as they are. */
+  softDelete: boolean;
+  /** The existing delete path. */
+  onConfirm: () => void | Promise<void>;
+  onCancel: () => void;
+}
+
+/** The linked rows of one association: a `count` aggregate when the adapter has one, else a one-row list's total. */
+export async function countAssociation(adapter: DataAdapter, association: AssociationConfig, id: string | number): Promise<number> {
+  const safeId = safeRelationId(id);
+  if (safeId === null) throw new Error('Association count needs a safe record id');
+  // The adapter skips an undefined filter value, so a missing typeValue would count every type.
+  if (association.typeColumn && association.typeValue == null) {
+    throw new Error(`association "${association.label}": typeColumn needs a typeValue`);
+  }
+  const filter = {
+    [association.foreignKey]: `eq.${safeId}`,
+    ...(association.typeColumn ? { [association.typeColumn]: association.typeValue } : {}),
+  };
+  if (adapter.aggregate) {
+    const result = await adapter.aggregate(association.resource, { aggregates: [{ function: 'count' }], filter });
+    return Number(result.data[0]?.count ?? 0);
+  }
+  return (await adapter.fetchList(association.resource, { page: 1, perPage: 1, filter })).total;
+}
+
+type Count = number | '?' | undefined;
+
+export function DeletePreview({
+  adapter,
+  label,
+  id,
+  associations,
+  softDelete,
+  onConfirm,
+  onCancel,
+}: DeletePreviewProps): React.ReactElement {
+  const shown = associations.slice(0, MAX_ASSOCIATIONS);
+  const [counts, setCounts] = useState<Count[]>([]);
+  const busy = useRef(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (associations.length > MAX_ASSOCIATIONS) {
+      console.warn(`[admin] ${label}: only the first ${MAX_ASSOCIATIONS} associations are counted`);
+    }
+    let live = true;
+    setCounts([]);
+    Promise.allSettled(associations.slice(0, MAX_ASSOCIATIONS).map(a => countAssociation(adapter, a, id)))
+      .then(results => {
+        if (live) setCounts(results.map(r => (r.status === 'fulfilled' ? r.value : '?')));
+      });
+    return () => { live = false; };
+  }, [adapter, associations, id, label]);
+
+  const confirm = async (): Promise<void> => {
+    if (busy.current) return;
+    busy.current = true;
+    setError(null);
+    try {
+      await onConfirm();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      busy.current = false;
+    }
+  };
+
+  return (
+    <View testID="delete-preview" className="mx-4 mb-4 p-3 rounded-md bg-red-50">
+      <Text className="text-base font-semibold text-red-800 mb-2">{`Delete ${label} #${String(id)}?`}</Text>
+      {shown.map((association, i) => (
+        <Text key={`${association.resource}:${association.foreignKey}:${i}`} className="text-sm text-gray-900">
+          {`${association.label}: ${counts[i] ?? '…'}`}
+        </Text>
+      ))}
+      <Text className="text-xs text-gray-600 mt-2">
+        {softDelete ? 'Nothing is deleted from these tables.' : 'These rows will be left without their record.'}
+      </Text>
+      <View className="flex-row gap-2 mt-3">
+        <Button label="Confirm" variant="destructive" onPress={confirm} />
+        <Button label="Cancel" variant="outline" onPress={onCancel} />
+      </View>
+      {error && <Text className="text-xs text-red-600 mt-1">{error}</Text>}
+    </View>
+  );
+}

package/src/components/FieldColumns.tsx

@@ -0,0 +1,86 @@
+/**
+ * FieldColumns — the field columns of a Show/Edit/Create screen.
+ *
+ * Side by side on a wide container: a 'wide' column takes the space left
+ * over, a fixed column keeps its width. Below BREAKPOINT_STACK the columns
+ * stack, main first, each full width. It measures its own container (not the
+ * window) and renders stacked until the first measurement.
+ */
+
+import React, { useCallback, useRef } from 'react';
+import { View } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
+import { useContainerWidth } from '@everystack/ui/dashboard';
+import type { FieldDefinition } from '../types';
+import type { ResolvedColumn } from '../utils/resolve-columns';
+
+/** Container width (px) below which the columns stack. */
+export const BREAKPOINT_STACK = 720;
+
+/** Space between columns that sit side by side, in px. */
+const COLUMN_GAP = 24;
+
+export interface FieldColumnsProps {
+  /** From resolveColumns. */
+  columns: ResolvedColumn[];
+  /** Draws one field; `index` is its place in its column. */
+  renderField: (field: FieldDefinition, index: number) => React.ReactNode;
+  /** A field's y within this component (its column's y + its own y), on every layout change. */
+  onFieldOffset?: (name: string, y: number) => void;
+}
+
+export function FieldColumns({ columns, renderField, onFieldOffset }: FieldColumnsProps): React.ReactElement {
+  // Fallback 0: stacked until the container is measured.
+  const { width, onLayout } = useContainerWidth(0);
+  const stacked = width < BREAKPOINT_STACK;
+
+  const columnY = useRef(new Map<number, number>());
+  const fieldY = useRef(new Map<string, { column: number; y: number }>());
+
+  const report = useCallback((name: string) => {
+    const field = fieldY.current.get(name);
+    if (!field || !onFieldOffset) return;
+    const top = columnY.current.get(field.column);
+    if (top === undefined) return;
+    onFieldOffset(name, top + field.y);
+  }, [onFieldOffset]);
+
+  const onColumnLayout = (column: number, fields: FieldDefinition[]) => (event: LayoutChangeEvent) => {
+    columnY.current.set(column, event.nativeEvent.layout.y);
+    for (const field of fields) report(field.name);
+  };
+
+  const onItemLayout = (column: number, name: string) => (event: LayoutChangeEvent) => {
+    fieldY.current.set(name, { column, y: event.nativeEvent.layout.y });
+    report(name);
+  };
+
+  return (
+    <View
+      testID="field-columns"
+      onLayout={onLayout}
+      style={stacked ? { flexDirection: 'column' } : { flexDirection: 'row', alignItems: 'flex-start', columnGap: COLUMN_GAP }}
+    >
+      {columns.map((column, ci) => (
+        <View
+          key={ci}
+          testID={`field-column-${ci}`}
+          onLayout={onColumnLayout(ci, column.fields)}
+          style={columnStyle(column, stacked)}
+        >
+          {column.fields.map((field, fi) => (
+            <View key={field.name} testID={`field-columns-item-${field.name}`} onLayout={onItemLayout(ci, field.name)}>
+              {renderField(field, fi)}
+            </View>
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+function columnStyle(column: ResolvedColumn, stacked: boolean) {
+  if (stacked) return { width: '100%' as const };
+  if (column.width === 'wide') return { flex: 1, minWidth: 0 };
+  return { width: column.width, flexShrink: 0 };
+}

package/src/components/FormActionBar.tsx

@@ -0,0 +1,45 @@
+/**
+ * FormActionBar — Save/Cancel at the bottom of the Edit and Create forms.
+ *
+ * The screens render it as a sibling under their ScrollView, so it stays in
+ * view on a long form without CSS positioning. The submit error lives here,
+ * above the buttons, so it is visible however far the form is scrolled.
+ */
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { Button } from '@everystack/ui';
+
+export interface FormActionBarProps {
+  onSubmit: () => void;
+  /** Cancel is shown only when this is given. */
+  onCancel?: () => void;
+  submitting: boolean;
+  /** Defaults to 'Save'. */
+  submitLabel?: string;
+  error?: string | null;
+}
+
+export function FormActionBar({
+  onSubmit,
+  onCancel,
+  submitting,
+  submitLabel = 'Save',
+  error,
+}: FormActionBarProps): React.ReactElement {
+  return (
+    <View testID="form-action-bar" className="border-t border-gray-200 bg-white px-4 py-3">
+      {error ? (
+        <View testID="form-action-bar-error" className="mb-3 bg-red-50 border border-red-200 rounded-lg px-4 py-3">
+          <Text className="text-sm text-red-700">{error}</Text>
+        </View>
+      ) : null}
+      <View className="flex-row justify-end gap-2">
+        {onCancel && (
+          <Button label="Cancel" variant="ghost" onPress={onCancel} />
+        )}
+        <Button label={submitLabel} onPress={onSubmit} loading={submitting} />
+      </View>
+    </View>
+  );
+}

package/src/components/InlineEnumCell.tsx

@@ -0,0 +1,98 @@
+/**
+ * InlineEnumCell — a list cell that edits an enum field (`inlineEdit: true`).
+ *
+ * A pick shows the new value at once and saves it with
+ * `adapter.update(resource, recordId, { [field]: value })`, the only write this
+ * cell makes. While it saves, the pill is disabled. A rejection restores the
+ * previous value and shows the server's message under the pill; the next
+ * change clears it. A success keeps the pill disabled through `onSaved` (the
+ * list refreshes), then shows the value the list holds, even when that value
+ * did not change.
+ *
+ * The cell claims the press, so a pick does not also fire the row's onRowPress.
+ */
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { View, Text } from 'react-native';
+import { OptionPicker } from '@everystack/ui';
+import type { DataAdapter } from '../adapters/types';
+
+export interface InlineEnumCellProps {
+  resource: string;
+  field: string;
+  recordId: string | number;
+  /** The stored value. */
+  value: unknown;
+  enumValues: string[];
+  adapter: DataAdapter;
+  /** Called after a successful save. The cell re-syncs from `value` once it settles. */
+  onSaved: () => void | Promise<void>;
+}
+
+export function InlineEnumCell({
+  resource,
+  field,
+  recordId,
+  value,
+  enumValues,
+  adapter,
+  onSaved,
+}: InlineEnumCellProps): React.ReactElement {
+  const stored = value == null ? '' : String(value);
+  const [shown, setShown] = useState(stored);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // Set at once, so a second change in the same tick (before `saving` renders) is refused.
+  const inFlight = useRef(false);
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => { mounted.current = false; };
+  }, []);
+  // Bumped after a save's refresh lands, so the cell re-syncs even when the stored value is unchanged.
+  const [synced, setSynced] = useState(0);
+
+  // The stored value (the list refetched) replaces what the cell shows.
+  useEffect(() => { setShown(stored); }, [stored, synced]);
+
+  const change = useCallback(async (next: string) => {
+    if (inFlight.current || next === shown) return;
+    inFlight.current = true;
+    const previous = shown;
+    setError(null);
+    setShown(next);
+    setSaving(true);
+    try {
+      try {
+        await adapter.update(resource, recordId, { [field]: next });
+      } catch (err) {
+        setShown(previous);
+        setError(err instanceof Error ? err.message : String(err));
+        return;
+      }
+      await onSaved();
+      if (mounted.current) setSynced(n => n + 1);
+    } catch {
+      // The save landed; a failed refresh is the list's to report.
+    } finally {
+      inFlight.current = false;
+      setSaving(false);
+    }
+  }, [shown, adapter, resource, recordId, field, onSaved]);
+
+  return (
+    <View onStartShouldSetResponder={() => true}>
+      <OptionPicker
+        value={shown}
+        options={enumValues.map(v => ({ label: v, value: v }))}
+        onChange={change}
+        disabled={saving}
+      />
+      {error ? (
+        <Text className="text-xs text-red-600 mt-1" numberOfLines={2}>
+          {error}
+        </Text>
+      ) : null}
+    </View>
+  );
+}

package/src/components/RelationFieldInput.tsx

@@ -0,0 +1,159 @@
+/**
+ * RelationFieldInput
+ *
+ * Create/edit picker for `type: 'relation'`. Typing searches the related
+ * resource 250 ms after the last key: digits search by `relation.field`, other
+ * text searches `relation.displayField` through ListParams.search (the
+ * adapter escapes it). Without a displayField, text that passes
+ * safeRelationId is matched exactly by `relation.field`. A result
+ * reads `#id name`; a pick saves the fetched row's `relation.field` value, so
+ * a number stays a number.
+ *
+ * The current value shows as a chip with a Clear control. A picked row names
+ * its own chip; a stored value gets its name from useRelationLabels, one
+ * lookup on mount.
+ */
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { TextInput } from '@everystack/ui';
+import { useRelationLabels, safeRelationId } from '../hooks/useRelationLabels';
+import type { DataAdapter } from '../adapters/types';
+import type { DataRecord, FieldDefinition, ListParams } from '../types';
+
+export interface RelationFieldInputProps {
+  field: FieldDefinition;
+  value: unknown;
+  onChange: (value: string | number | null) => void;
+  adapter: DataAdapter;
+}
+
+const DEBOUNCE_MS = 250;
+const PAGE_SIZE = 10;
+const DIGITS = /^\d+$/;
+
+type Status = 'idle' | 'searching' | 'results' | 'none' | 'failed';
+
+function relationLabel(id: unknown, name: unknown): string {
+  return name != null && name !== '' ? `#${String(id)} ${String(name)}` : `#${String(id)}`;
+}
+
+export function RelationFieldInput({ field, value, onChange, adapter }: RelationFieldInputProps): React.ReactElement {
+  const relation = field.relation;
+  const [text, setText] = useState('');
+  const [status, setStatus] = useState<Status>('idle');
+  const [results, setResults] = useState<DataRecord[]>([]);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Bumped by every search and every pick; a response for an older number is dropped.
+  const requestId = useRef(0);
+  const mounted = useRef(true);
+  // The last picked row, so its chip needs no lookup.
+  const [picked, setPicked] = useState<{ id: string; name: unknown } | null>(null);
+
+  const currentId = safeRelationId(value);
+  const pickedCurrent = picked !== null && picked.id === currentId;
+  const fields = useMemo(() => [field], [field]);
+  const rows = useMemo(
+    () => (pickedCurrent ? [] : [{ [field.name]: value }]),
+    [pickedCurrent, field.name, value],
+  );
+  const labels = useRelationLabels(adapter, fields, rows);
+
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, []);
+
+  const search = (query: string): void => {
+    if (!relation) return;
+    const id = ++requestId.current;
+    let params: ListParams;
+    if (DIGITS.test(query) || (!relation.displayField && safeRelationId(query) !== null)) {
+      params = { page: 1, perPage: PAGE_SIZE, filter: { [relation.field]: `eq.${query}` } };
+    } else if (relation.displayField) {
+      params = { page: 1, perPage: PAGE_SIZE, search: query, searchFields: [relation.displayField] };
+    } else {
+      setResults([]);
+      setStatus('none');
+      return;
+    }
+    setStatus('searching');
+    adapter.fetchList(relation.resource, params).then(result => {
+      if (!mounted.current || id !== requestId.current) return;
+      setResults(result.data);
+      setStatus(result.data.length > 0 ? 'results' : 'none');
+    }).catch(() => {
+      if (!mounted.current || id !== requestId.current) return;
+      setResults([]);
+      setStatus('failed');
+    });
+  };
+
+  const onChangeText = (next: string): void => {
+    setText(next);
+    if (timer.current) clearTimeout(timer.current);
+    const query = next.trim();
+    if (query === '') {
+      requestId.current++;
+      setResults([]);
+      setStatus('idle');
+      return;
+    }
+    timer.current = setTimeout(() => search(query), DEBOUNCE_MS);
+  };
+
+  const pick = (row: DataRecord): void => {
+    if (!relation) return;
+    requestId.current++;
+    setText('');
+    setResults([]);
+    setStatus('idle');
+    const id = safeRelationId(row[relation.field]);
+    setPicked(id === null ? null : { id, name: relation.displayField ? row[relation.displayField] : undefined });
+    onChange(row[relation.field] as string | number);
+  };
+
+  const currentName = pickedCurrent
+    ? picked.name
+    : currentId !== null ? labels.get(field.name)?.get(currentId) : undefined;
+  const placeholder = relation?.displayField ? 'Search by name or id' : 'Search by id';
+
+  return (
+    <View>
+      {value != null && value !== '' && (
+        <View className="flex-row items-center gap-2 mb-2">
+          <Text className="text-sm text-gray-900">{relationLabel(value, currentName)}</Text>
+          <Pressable accessibilityRole="button" accessibilityLabel="Clear" onPress={() => onChange(null)}>
+            <Text className="text-sm text-gray-500">×</Text>
+          </Pressable>
+        </View>
+      )}
+      <TextInput value={text} onChangeText={onChangeText} placeholder={placeholder} />
+      {status === 'searching' && <Text className="text-sm text-gray-500 mt-1">Searching…</Text>}
+      {status === 'none' && <Text className="text-sm text-gray-500 mt-1">No matches</Text>}
+      {status === 'failed' && <Text className="text-sm text-red-600 mt-1">Lookup failed</Text>}
+      {status === 'results' && relation && (
+        <View className="mt-1 border border-gray-200 rounded-lg">
+          {results.map(row => {
+            const id = row[relation.field];
+            const name = relation.displayField ? row[relation.displayField] : undefined;
+            return (
+              <Pressable
+                key={String(id)}
+                testID={`relation-${field.name}-option-${String(id)}`}
+                accessibilityRole="button"
+                onPress={() => pick(row)}
+                className="px-3 py-2"
+              >
+                <Text className="text-sm text-gray-900">{relationLabel(id, name)}</Text>
+              </Pressable>
+            );
+          })}
+        </View>
+      )}
+    </View>
+  );
+}

package/src/components/RelationValue.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { AdminLink } from './AdminLink';
+import { safeRelationId } from '../hooks/useRelationLabels';
+
+/**
+ * A relation value: the label (else the id) linked to the related show page.
+ * Null or empty shows nothing. An id that is unsafe in a path shows as plain text.
+ */
+export function RelationValue({ resource, value, labels, numberOfLines }: {
+  resource: string;
+  value: unknown;
+  labels: Map<string, string> | undefined;
+  numberOfLines?: number;
+}): React.ReactElement | null {
+  if (value == null || value === '') return null;
+  const id = safeRelationId(value);
+  if (id === null) {
+    return <Text className="text-sm text-gray-900" numberOfLines={numberOfLines}>{String(value)}</Text>;
+  }
+  return (
+    <AdminLink to={{ resource, id }} numberOfLines={numberOfLines}>
+      {labels?.get(id) ?? id}
+    </AdminLink>
+  );
+}

package/src/components/RowActionButton.tsx

@@ -25,12 +25,16 @@ export interface RowActionButtonProps {
   /** Value sent as `{ id }` to an rpc action (record[primaryKey]). */
   recordId: string | number;
   adapter: DataAdapter;
-  /** Re-fetch the current view after the action completes. */
+  /** Re-fetch the current view after the action completes or fails. */
   refetch: () => Promise<void> | void;
   /** Navigate to an admin path, when the route layer provides it. */
   navigate?: (path: string) => void;
 }
 
+function messageOf(err: unknown): string {
+  return err instanceof Error ? err.message : String(err);
+}
+
 export function RowActionButton({
   action,
   record,
@@ -56,15 +60,26 @@ export function RowActionButton({
     setBusy(true);
     setError(null);
     try {
-      if (action.onPress) {
-        await action.onPress({ record, adapter, refetch, navigate });
-      } else if (action.rpc) {
-        if (!adapter.rpc) throw new Error('Adapter does not support RPC actions');
-        await adapter.rpc(action.rpc, { id: recordId });
+      let failed = false;
+      try {
+        if (action.onPress) {
+          await action.onPress({ record, adapter, refetch, navigate });
+        } else if (action.rpc) {
+          if (!adapter.rpc) throw new Error('Adapter does not support RPC actions');
+          await adapter.rpc(action.rpc, { id: recordId });
+        }
+      } catch (err) {
+        failed = true;
+        setError(messageOf(err));
+      }
+      // Refetch on failure too: a delete of a row another session already
+      // removed fails, and the list must still drop the stale row.
+      try {
+        await refetch();
+      } catch (err) {
+        // A refetch fault never replaces the action's own error.
+        if (!failed) setError(messageOf(err));
       }
-      await refetch();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
     } finally {
       setBusy(false);
       setConfirming(false);

package/src/components/TagsDisplay.tsx

@@ -0,0 +1,22 @@
+/**
+ * TagsDisplay — read-only pills for a `type: 'tags'` value on the show view.
+ * Labels come from the field's groups; a value no group lists shows as itself.
+ */
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { Badge } from '@everystack/ui';
+import { tagLabel, tagValues } from '../utils/tags';
+import type { FieldDefinition } from '../types';
+
+export function TagsDisplay({ field, value }: { field: FieldDefinition; value: unknown }): React.ReactElement {
+  const tags = tagValues(value);
+  if (tags.length === 0) return <Text className="text-sm text-gray-900">{'—'}</Text>;
+  return (
+    <View testID={`tags-${field.name}`} className="flex-row flex-wrap gap-2">
+      {tags.map((tag, i) => (
+        <Badge key={`${i}-${tag}`} label={tagLabel(field, tag)} />
+      ))}
+    </View>
+  );
+}