@everystack/admin 0.4.2 → 0.4.3

package/src/screens/ResourceEdit.tsx

@@ -5,16 +5,22 @@
  * Pre-populates form with existing data, submits via adapter.update().
  */
 
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { View, Text, ScrollView } from 'react-native';
 import { useAdminConfig } from '../hooks/useAdminConfig';
 import { useDataAdapter } from '../hooks/useAdminData';
 import { useEditors } from '../hooks/useEditors';
 import { editorFor } from '../utils/render-resolution';
 import { toDateInputValue } from '../utils/format-cell-value';
+import { missingRequired } from '../utils/required';
 import { FormField, TextInput, SelectInput, SwitchInput, DateInput, Button, LoadingState, ErrorState } from '@everystack/ui';
 import { ImageFieldInput } from '../components/ImageFieldInput';
 import { AvatarFieldInput } from '../components/AvatarFieldInput';
+import { TagsFieldInput } from '../components/TagsFieldInput';
+import { FormActionBar } from '../components/FormActionBar';
+import { FieldColumns } from '../components/FieldColumns';
+import { useScrollToFirstError } from '../hooks/useScrollToFirstError';
+import { resolveColumns, screenLayout } from '../utils/resolve-columns';
 import type { FieldDefinition, DataRecord } from '../types';
 
 export interface ResourceEditProps {
@@ -40,6 +46,8 @@ export function ResourceEdit({ resource, id, onSuccess, onCancel }: ResourceEdit
   const [submitting, setSubmitting] = useState(false);
   const [fetchError, setFetchError] = useState<Error | null>(null);
   const [submitError, setSubmitError] = useState<string | null>(null);
+  // Set synchronously so two presses in one tick (before a re-render) submit once.
+  const inFlight = useRef(false);
 
   const fields = useMemo(() => {
     if (!resourceConfig) return [];
@@ -51,6 +59,13 @@ export function ResourceEdit({ resource, id, onSuccess, onCancel }: ResourceEdit
       .filter(f => f.name !== (resourceConfig.primaryKey ?? 'id'));
   }, [resourceConfig]);
 
+  const editors = useEditors();
+  const columns = useMemo(() => {
+    const layout = resourceConfig ? screenLayout(resourceConfig, 'edit') : undefined;
+    return layout ? resolveColumns(fields, layout, editors) : null;
+  }, [resourceConfig, fields, editors]);
+  const { scrollRef, onContainerLayout, onFieldOffset, requestScrollToFirstError } = useScrollToFirstError(errors);
+
   // Fetch existing record
   const fetchRecord = useCallback(async () => {
     setLoading(true);
@@ -84,21 +99,27 @@ export function ResourceEdit({ resource, id, onSuccess, onCancel }: ResourceEdit
     });
   }, []);
 
-  const validate = useCallback((): boolean => {
+  const validate = useCallback((): Record<string, string> => {
     const newErrors: Record<string, string> = {};
     for (const field of fields) {
       const value = formData[field.name];
-      if (field.validation?.required && (value == null || value === '')) {
+      if (field.validation?.required && missingRequired(field, value)) {
         newErrors[field.name] = field.validation.message ?? `${field.label ?? field.name} is required`;
       }
     }
     setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
+    return newErrors;
   }, [fields, formData]);
 
   const handleSubmit = useCallback(async () => {
-    if (!validate()) return;
+    if (inFlight.current) return;
+    const invalid = validate();
+    if (Object.keys(invalid).length > 0) {
+      requestScrollToFirstError(fields);
+      return;
+    }
 
+    inFlight.current = true;
     setSubmitting(true);
     setSubmitError(null);
 
@@ -108,9 +129,10 @@ export function ResourceEdit({ resource, id, onSuccess, onCancel }: ResourceEdit
     } catch (err) {
       setSubmitError(err instanceof Error ? err.message : String(err));
     } finally {
+      inFlight.current = false;
       setSubmitting(false);
     }
-  }, [adapter, resource, id, formData, validate, onSuccess]);
+  }, [adapter, resource, id, formData, validate, onSuccess, fields, requestScrollToFirstError]);
 
   if (!resourceConfig) {
     return <ErrorState message={`Resource "${resource}" not found in admin configuration`} />;
@@ -129,43 +151,52 @@ export function ResourceEdit({ resource, id, onSuccess, onCancel }: ResourceEdit
   }
 
   const label = resourceConfig.label ?? resourceConfig.name;
+  const renderInput = (field: FieldDefinition): React.ReactNode => (
+    <EditFieldInput
+      field={field}
+      value={formData[field.name]}
+      error={errors[field.name]}
+      onChange={value => setFieldValue(field.name, value)}
+      values={formData}
+      record={record}
+    />
+  );
 
   return (
-    <ScrollView className="flex-1">
-      {/* Header */}
-      <View className="flex-row items-center justify-between px-4 py-4">
-        <Text className="text-xl font-bold text-gray-900">
-          Edit {label} #{String(id)}
-        </Text>
-        <View className="flex-row gap-2">
-          {onCancel && (
-            <Button label="Cancel" variant="ghost" onPress={onCancel} />
-          )}
-          <Button label="Save" onPress={handleSubmit} loading={submitting} />
+    <View className="flex-1">
+      <ScrollView ref={scrollRef} className="flex-1">
+        {/* Header */}
+        <View className="flex-row items-center justify-between px-4 py-4">
+          <Text className="text-xl font-bold text-gray-900">
+            Edit {label} #{String(id)}
+          </Text>
+          <View className="flex-row gap-2">
+            {onCancel && (
+              <Button label="Cancel" variant="ghost" onPress={onCancel} />
+            )}
+            <Button label="Save" onPress={handleSubmit} loading={submitting} />
+          </View>
         </View>
-      </View>
 
-      {/* Error */}
-      {submitError && (
-        <View className="mx-4 mb-4 bg-red-50 border border-red-200 rounded-lg px-4 py-3">
-          <Text className="text-sm text-red-700">{submitError}</Text>
+        {/* Form fields */}
+        <View className="px-4" testID="form-fields" onLayout={onContainerLayout}>
+          {columns ? (
+            <FieldColumns columns={columns} renderField={renderInput} onFieldOffset={onFieldOffset} />
+          ) : (
+            fields.map(field => (
+              <View
+                key={field.name}
+                testID={`form-fields-item-${field.name}`}
+                onLayout={event => onFieldOffset(field.name, event.nativeEvent.layout.y)}
+              >
+                {renderInput(field)}
+              </View>
+            ))
+          )}
         </View>
-      )}
-
-      {/* Form fields */}
-      <View className="px-4">
-        {fields.map(field => (
-          <EditFieldInput
-            key={field.name}
-            field={field}
-            value={formData[field.name]}
-            error={errors[field.name]}
-            onChange={value => setFieldValue(field.name, value)}
-            record={record}
-          />
-        ))}
-      </View>
-    </ScrollView>
+      </ScrollView>
+      <FormActionBar onSubmit={handleSubmit} onCancel={onCancel} submitting={submitting} error={submitError} />
+    </View>
   );
 }
 
@@ -179,14 +210,17 @@ interface EditFieldInputProps {
   error?: string;
   onChange: (value: unknown) => void;
   record?: DataRecord;
+  /** The whole form's current values, for a custom input. */
+  values: Record<string, unknown>;
 }
 
-function EditFieldInput({ field, value, error, onChange, record }: EditFieldInputProps): React.ReactElement {
+function EditFieldInput({ field, value, error, onChange, record, values }: EditFieldInputProps): React.ReactElement {
   const editors = useEditors();
 
   // Resolution: inline input → registered editor → type-based default.
   if (field.input) {
-    return <>{field.input({ value, onChange, field, record, error })}</>;
+    // Its own component, so hooks inside a custom input keep their own order.
+    return React.createElement(field.input, { value, onChange, field, record, error, values });
   }
   const Editor = editorFor(field, editors);
   if (Editor) {
@@ -298,6 +332,9 @@ function EditFieldInput({ field, value, error, onChange, record }: EditFieldInpu
         </FormField>
       );
 
+    case 'tags':
+      return <TagsFieldInput field={field} value={value} error={error} onChange={onChange} />;
+
     default:
       return (
         <FormField label={label} error={error} required={required}>

package/src/screens/ResourceList.tsx

@@ -3,19 +3,37 @@
  *
  * List view for a resource with sortable table, search/filter, and pagination.
  * Wires useAdminData() to DataTable, FilterBar, and PaginationBar components.
+ *
+ * The list's search, sort, page and page size live in the URL (useListQuery),
+ * so a list view is a link. The search box waits for a pause in typing before writing it.
  */
 
-import React, { useCallback, useMemo } from 'react';
+/** How long the search box waits after the last keystroke before it searches. */
+const SEARCH_DEBOUNCE_MS = 300;
+
+/** Rows per page when the resource names no `perPage`. */
+const DEFAULT_PER_PAGE = 20;
+/** Sizes the page bar always offers; the resource's own size is added when missing. */
+const PAGE_SIZES = [20, 50, 100];
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { View, Text } from 'react-native';
 import { useAdminConfig } from '../hooks/useAdminConfig';
 import { useAdminData, useDataAdapter } from '../hooks/useAdminData';
-import { DataTable, FilterBar, PaginationBar, LoadingState, ErrorState, EmptyState, Button, type DataTableColumn } from '@everystack/ui';
+import { useListQuery } from '../hooks/useListQuery';
+import { buildListParams, mergeFilters, nextSort, normalizeSearchText, pageForSize, parseListQuery, resolvePageSize } from '../utils/list-query';
+import { resolveScope } from '../utils/scopes';
+import { useScopeCounts } from '../hooks/useScopeCounts';
+import { RESERVED_PARAMS } from '../utils/view-filters';
+import { DataTable, FilterBar, PaginationBar, ScopeTabs, LoadingState, ErrorState, EmptyState, Button, type DataTableColumn } from '@everystack/ui';
 import { formatCellValue } from '../utils/format-cell-value';
 import { cellRenderKind } from '../utils/render-resolution';
-import { visibleRowActions } from '../utils/row-actions';
+import { estimateActionsWidth, visibleRowActions } from '../utils/row-actions';
 import { standardRowActions } from '../utils/standard-actions';
 import { ImageDisplay } from '../components/ImageDisplay';
 import { RowActionButton } from '../components/RowActionButton';
+import { InlineEnumCell } from '../components/InlineEnumCell';
+import { wrapBareText } from '../components/CellText';
 import type { DataAdapter } from '../adapters/types';
 import type { ResourceConfig, FieldDefinition, DataRecord, RowActionConfig } from '../types';
 
@@ -41,28 +59,115 @@ export function ResourceList({ resource, onRowPress, onEditPress, onCreatePress,
   const resourceConfig = config.resources.find(r => r.name === resource);
 
   const defaultSort = resourceConfig?.defaultSort;
+  const defaultPerPage = resolvePageSize(resourceConfig?.perPage, DEFAULT_PER_PAGE);
+  const pageSizes = useMemo(
+    () => [...new Set([...PAGE_SIZES, defaultPerPage])].sort((a, b) => a - b),
+    [defaultPerPage],
+  );
+  const { query, update } = useListQuery({ defaultPerPage });
+
+  const searchFields = useMemo(
+    () => resourceConfig?.fields.filter(f => f.searchable).map(f => f.name) ?? [],
+    [resourceConfig],
+  );
+  const sortableFields = useMemo(
+    () => new Set(resourceConfig?.fields.filter(f => f.sortable).map(f => f.name) ?? []),
+    [resourceConfig],
+  );
+  const activeScope = useMemo(
+    () => resolveScope(resourceConfig?.scopes, query.scope),
+    [resourceConfig, query.scope],
+  );
+  const listParams = useMemo(
+    () => buildListParams(query, { perPage: defaultPerPage, baseFilter, scopeFilter: activeScope?.filter, sortableFields, defaultSort }),
+    [query, defaultPerPage, baseFilter, activeScope, sortableFields, defaultSort],
+  );
+
+  const searchParams = adapter.supportsSearch === true && searchFields.length > 0
+    ? { search: listParams.search, searchFields }
+    : {};
+  const legacySearchFilter = useMemo(() => {
+    const text = normalizeSearchText(query.search);
+    return adapter.supportsSearch !== true && text && searchFields[0]
+      ? { [searchFields[0]]: `ilike.*${text}*` }
+      : undefined;
+  }, [adapter.supportsSearch, query.search, searchFields]);
+
+  // Bumped after an inline edit, so the tab counts follow the change.
+  const [countsToken, setCountsToken] = useState(0);
+  const scopeCounts = useScopeCounts({
+    resource,
+    scopes: resourceConfig?.scopes,
+    enabled: Boolean(resourceConfig?.scopeCounts),
+    baseFilter: mergeFilters(baseFilter, legacySearchFilter),
+    ...searchParams,
+    refreshToken: countsToken,
+  });
+
   const {
     data,
     total,
     loading,
+    refreshing,
     error,
     refetch,
     page,
     perPage,
-    setPage,
-    setSort,
-    setFilter,
   } = useAdminData(resource, {
-    sort: defaultSort?.field,
-    order: defaultSort?.order,
-    baseFilter,
+    controlled: true,
+    page: listParams.page,
+    perPage: listParams.perPage,
+    sort: listParams.sort,
+    order: listParams.order,
+    ...searchParams,
+    baseFilter: mergeFilters(listParams.filter, legacySearchFilter),
   });
 
+  // A column named like a list URL param cannot be filtered from the URL: say so while developing.
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') return;
+    const clashes = (resourceConfig?.fields ?? []).map(f => f.name).filter(name => RESERVED_PARAMS.has(name));
+    if (clashes.length === 0) return;
+    // eslint-disable-next-line no-console
+    console.warn(
+      `[admin] resource "${resource}" has ${clashes.map(c => `"${c}"`).join(', ')}, a name the list reserves for its URL ` +
+      `(reserved: ${[...RESERVED_PARAMS].join(', ')}). That column cannot be filtered with ?${clashes[0]}=... in the URL.`,
+    );
+  }, [resourceConfig, resource]);
+
+  // The box shows what the user typed; the URL gets it after a pause. When the
+  // URL changes by itself (back button, a link), the box follows.
+  const [searchText, setSearchText] = useState(query.search ?? '');
+  const lastWritten = useRef(query.search);
+  useEffect(() => {
+    if (query.search === lastWritten.current) return;
+    lastWritten.current = query.search;
+    setSearchText(query.search ?? '');
+  }, [query.search]);
+  useEffect(() => {
+    const wanted = parseListQuery({ q: searchText }).search;
+    // Against what we last wrote, not the URL's current value: the URL may not have caught up.
+    if (wanted === lastWritten.current) return;
+    const timer = setTimeout(() => {
+      lastWritten.current = wanted;
+      update({ search: wanted });
+    }, SEARCH_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+    // `query.search` is read, not watched: re-running on it would restart the pause.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchText]);
+
   // Build columns from field definitions, plus an actions column combining the
   // built-in Show/Edit/Delete (gated by actions.*) with any custom rowActions.
+  // Returns the refetch, so the cell can re-sync once the new rows are in.
+  const afterInlineEdit = useCallback((): Promise<void> => {
+    setCountsToken(t => t + 1);
+    return refetch();
+  }, [refetch]);
+
   const columns = useMemo(() => {
     if (!resourceConfig) return [];
-    const cols = fieldsToColumns(resourceConfig);
+    const cols = fieldsToColumns(resourceConfig, adapter, afterInlineEdit);
     const actions = [
       ...standardRowActions(resourceConfig, { onShow: onRowPress, onEdit: onEditPress }),
       ...(resourceConfig.rowActions ?? []),
@@ -71,31 +176,12 @@ export function ResourceList({ resource, onRowPress, onEditPress, onCreatePress,
       cols.push(actionsColumn(resourceConfig, actions, adapter, refetch));
     }
     return cols;
-  }, [resourceConfig, adapter, refetch, onRowPress, onEditPress]);
-
-  // Build filter chips from filterable fields
-  const filterChips = useMemo(() => {
-    if (!resourceConfig) return [];
-    return resourceConfig.fields
-      .filter(f => f.filterable)
-      .map(f => ({ key: f.name, label: f.label ?? f.name }));
-  }, [resourceConfig]);
+  }, [resourceConfig, adapter, refetch, afterInlineEdit, onRowPress, onEditPress]);
 
+  // The click cycles from what is shown (the default sort included), not from the URL alone.
   const handleSort = useCallback((key: string) => {
-    setSort(key, 'asc');
-  }, [setSort]);
-
-  const handleSearch = useCallback((query: string) => {
-    if (!query) {
-      setFilter({});
-      return;
-    }
-    // Search across searchable fields using ilike
-    const searchableFields = resourceConfig?.fields.filter(f => f.searchable) ?? [];
-    if (searchableFields.length > 0) {
-      setFilter({ [searchableFields[0].name]: `ilike.*${query}*` });
-    }
-  }, [resourceConfig, setFilter]);
+    update(nextSort({ sort: listParams.sort, order: listParams.order }, key, defaultSort));
+  }, [update, listParams.sort, listParams.order, defaultSort]);
 
   if (!resourceConfig) {
     return (
@@ -117,27 +203,51 @@ export function ResourceList({ resource, onRowPress, onEditPress, onCreatePress,
       </View>
 
       {/* Filter bar */}
-      <FilterBar
-        placeholder={`Search ${label.toLowerCase()}...`}
-        onSearch={handleSearch}
-        filters={filterChips}
-      />
+      {searchFields.length > 0 ? (
+        <FilterBar
+          placeholder={`Search ${label.toLowerCase()}...`}
+          onSearch={setSearchText}
+          value={searchText}
+        />
+      ) : null}
+      {query.search && searchFields.length > 0 && (!loading || refreshing) && !error ? (
+        <Text className="px-4 pb-2 text-sm text-gray-500">
+          {`${total} ${total === 1 ? 'result' : 'results'}`}
+        </Text>
+      ) : null}
+
+      {resourceConfig.scopes && resourceConfig.scopes.length > 0 && activeScope ? (
+        <ScopeTabs
+          tabs={resourceConfig.scopes.map(scope => ({ id: scope.id, label: scope.label, count: scopeCounts?.[scope.id] }))}
+          active={activeScope.id}
+          onChange={id => update({ scope: id })}
+        />
+      ) : null}
 
-      {/* Content */}
-      {loading ? (
+      {/* Content. An explicit refetch keeps the table, and its cells, on screen until new rows land. */}
+      {loading && !refreshing ? (
         <LoadingState message={`Loading ${label.toLowerCase()}...`} />
       ) : error ? (
         <ErrorState message={error.message} onRetry={refetch} />
       ) : data.length === 0 ? (
-        <EmptyState
-          title={`No ${label.toLowerCase()}`}
-          message={`No ${label.toLowerCase()} found. ${canCreate ? 'Create one to get started.' : ''}`}
-        />
+        query.search ? (
+          <EmptyState title={`No results for \u201c${query.search}\u201d`} message="Try a different search." />
+        ) : (
+          <EmptyState
+            title={`No ${label.toLowerCase()}`}
+            message={`No ${label.toLowerCase()} found. ${canCreate ? 'Create one to get started.' : ''}`}
+          />
+        )
       ) : (
         <DataTable
           columns={columns}
           data={data}
           onSort={handleSort}
+          sortField={listParams.sort}
+          sortOrder={listParams.order}
+          // Key rows by the record's own key, so a row's cell state (an inline-enum
+          // error, a row action's message) stays with that record across a refetch.
+          rowKey={resourceConfig?.primaryKey ?? 'id'}
           // A list-only resource (actions.show === false) has no detail screen —
           // don't make rows navigate to a fetchOne that 404s. The row-action menu
           // already hides "Show" via standardRowActions; this gates the whole-row tap.
@@ -151,7 +261,9 @@ export function ResourceList({ resource, onRowPress, onEditPress, onCreatePress,
           page={page}
           perPage={perPage}
           total={total}
-          onPageChange={setPage}
+          onPageChange={next => update({ page: next })}
+          pageSizes={pageSizes}
+          onPerPageChange={size => update({ perPage: size, page: pageForSize(page, perPage, size) })}
         />
       )}
     </View>
@@ -162,7 +274,11 @@ export function ResourceList({ resource, onRowPress, onEditPress, onCreatePress,
 // Helpers
 // =============================================================================
 
-function fieldsToColumns(resourceConfig: ResourceConfig): DataTableColumn[] {
+function fieldsToColumns(
+  resourceConfig: ResourceConfig,
+  adapter: DataAdapter,
+  onInlineSaved: () => Promise<void>,
+): DataTableColumn[] {
   const fieldNames = resourceConfig.listFields ?? resourceConfig.fields.map(f => f.name);
   const fieldMap = new Map(resourceConfig.fields.map(f => [f.name, f]));
 
@@ -173,18 +289,42 @@ function fieldsToColumns(resourceConfig: ResourceConfig): DataTableColumn[] {
       key: field.name,
       label: field.label ?? field.name,
       sortable: field.sortable,
-      render: cellRenderer(field),
+      ...(field.listWidth !== undefined && { width: field.listWidth }),
+      ...(field.listPriority !== undefined && { priority: field.listPriority }),
+      ...(field.listHideBelow !== undefined && { hideBelow: field.listHideBelow }),
+      render: cellRenderer(field, resourceConfig, adapter, onInlineSaved),
     }));
 }
 
 /**
  * Cell rendering precedence: custom render → image thumbnail → type text.
- * (See render-resolution.cellRenderKind.)
+ * (See render-resolution.cellRenderKind.) An `inlineEdit` enum field shows a
+ * picker in place of the type text, unless the resource sets `actions.edit: false`.
  */
-function cellRenderer(field: FieldDefinition): DataTableColumn['render'] {
-  switch (cellRenderKind(field)) {
+function cellRenderer(
+  field: FieldDefinition,
+  resourceConfig: ResourceConfig,
+  adapter: DataAdapter,
+  onInlineSaved: () => Promise<void>,
+): DataTableColumn['render'] {
+  const kind = cellRenderKind(field);
+  if (kind === 'text' && field.inlineEdit === true && field.type === 'enum' && resourceConfig.actions?.edit !== false) {
+    const primaryKey = resourceConfig.primaryKey ?? 'id';
+    return (value, record) => (
+      <InlineEnumCell
+        resource={resourceConfig.name}
+        field={field.name}
+        recordId={(record[primaryKey] as string | number) ?? (record.id as string | number)}
+        value={value}
+        enumValues={field.enumValues ?? []}
+        adapter={adapter}
+        onSaved={onInlineSaved}
+      />
+    );
+  }
+  switch (kind) {
     case 'custom':
-      return (value, record) => field.render!(value, record as DataRecord, { view: 'list' });
+      return (value, record) => wrapBareText(field.render!(value, record as DataRecord, { view: 'list' }), 1);
     case 'image':
       return (value) => <ImageDisplay field={field} value={value} view="list" />;
     default:
@@ -196,6 +336,13 @@ function cellRenderer(field: FieldDefinition): DataTableColumn['render'] {
   }
 }
 
+/** The resource's actionsWidth when it is a finite number above 0, else the estimate from the labels. */
+function actionsColumnWidth(configured: number | undefined, actions: RowActionConfig[]): number {
+  return typeof configured === 'number' && Number.isFinite(configured) && configured > 0
+    ? configured
+    : estimateActionsWidth(actions);
+}
+
 /**
  * A trailing column of per-row actions, each gated by its `when` clause.
  * The cell claims the press so tapping an action doesn't also fire the row's
@@ -211,11 +358,16 @@ function actionsColumn(
   return {
     key: '__actions',
     label: 'Actions',
+    // Rows cannot share a content-sized width in a flex layout, so the width is a number.
+    width: actionsColumnWidth(resourceConfig.actionsWidth, actions),
+    // Every row needs its actions, so a narrow list never drops this column.
+    // `keep` rather than priority 1, which would turn dropping on for every list with actions.
+    keep: true,
     render: (_value, record) => {
       const visible = visibleRowActions(actions, record);
       if (!visible.length) return null;
       return (
-        <View className="flex-row gap-2" onStartShouldSetResponder={() => true}>
+        <View className="flex-row flex-wrap gap-2" onStartShouldSetResponder={() => true}>
           {visible.map(action => (
             <RowActionButton
               key={action.id}