@everystack/admin 0.4.2 → 0.4.4

package/src/screens/AdminRouter.tsx

@@ -12,6 +12,7 @@ import React, { useMemo } from 'react';
 import { useAdminConfig } from '../hooks/useAdminConfig';
 import { useDataAdapter } from '../hooks/useAdminData';
 import { ViewStateContext, normalizeParams, buildQueryString } from '../hooks/useViewState';
+import { AdminNavigationContext } from '../hooks/useAdminNavigation';
 import { AdminDashboard } from './AdminDashboard';
 import { ResourceListView } from './ResourceListView';
 import { ResourceShow } from './ResourceShow';
@@ -24,6 +25,13 @@ export interface AdminNavigator {
   push: (href: string) => void;
   back?: () => void;
   replace?: (href: string) => void;
+  /**
+   * Update the current route's query in place. Preferred over `replace` for list state
+   * (search, sort, page, scope): expo-router's replace makes a new screen instance, which
+   * remounts the list and takes the cursor out of the search box. A key set to undefined
+   * is removed.
+   */
+  setParams?: (params: Record<string, string | undefined>) => void;
 }
 
 export interface AdminRouterProps {
@@ -62,6 +70,10 @@ export function AdminRouter({
     return {
       params,
       setParams: (next: Record<string, string | undefined>) => {
+        if (router.setParams) {
+          router.setParams(next);
+          return;
+        }
         const merged: Record<string, string | undefined> = { ...params, ...next };
         (router.replace ?? router.push)(`${pathname}${buildQueryString(merged)}`);
       },
@@ -69,10 +81,17 @@ export function AdminRouter({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(searchParams), pathname, router]);
 
+  const navigation = useMemo(
+    () => ({ push: (href: string) => router.push(href), basePath, resources: config.resources.map(r => r.name) }),
+    [router, basePath, config.resources],
+  );
+
   return (
-    <ViewStateContext.Provider value={viewState}>
-      {renderScreen()}
-    </ViewStateContext.Provider>
+    <AdminNavigationContext.Provider value={navigation}>
+      <ViewStateContext.Provider value={viewState}>
+        {renderScreen()}
+      </ViewStateContext.Provider>
+    </AdminNavigationContext.Provider>
   );
 
   function renderScreen(): React.ReactElement {
@@ -100,15 +119,22 @@ export function AdminRouter({
         />
       );
 
-    case 'show':
+    case 'show': {
+      // Show gets Delete only behind the delete preview, i.e. when the resource declares associations.
+      const hasAssociations = Boolean(config.resources.find(r => r.name === match.resource)?.associations?.length);
       return (
         <ResourceShow
           resource={match.resource!}
           id={match.id!}
           onEditPress={() => go({ resource: match.resource, id: match.id, action: 'edit' })}
+          onDeletePress={hasAssociations
+            ? async () => { await adapter.delete(match.resource!, match.id!); go({ resource: match.resource }); }
+            : undefined}
           onBackPress={() => go({ resource: match.resource })}
+          confirmDelete={viewState.params.confirmDelete === '1'}
         />
       );
+    }
 
     case 'list':
     default: {

package/src/screens/ResourceCreate.tsx

@@ -5,16 +5,23 @@
  * Field type determines which input component is used.
  */
 
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, 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, ErrorState } from '@everystack/ui';
 import { ImageFieldInput } from '../components/ImageFieldInput';
 import { AvatarFieldInput } from '../components/AvatarFieldInput';
+import { TagsFieldInput } from '../components/TagsFieldInput';
+import { RelationFieldInput } from '../components/RelationFieldInput';
+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 } from '../types';
 
 export interface ResourceCreateProps {
@@ -35,6 +42,8 @@ export function ResourceCreate({ resource, onSuccess, onCancel }: ResourceCreate
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [submitting, setSubmitting] = useState(false);
   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 [];
@@ -46,6 +55,13 @@ export function ResourceCreate({ resource, onSuccess, onCancel }: ResourceCreate
       .filter(f => f.name !== (resourceConfig.primaryKey ?? 'id'));
   }, [resourceConfig]);
 
+  const editors = useEditors();
+  const columns = useMemo(() => {
+    const layout = resourceConfig ? screenLayout(resourceConfig, 'create') : undefined;
+    return layout ? resolveColumns(fields, layout, editors) : null;
+  }, [resourceConfig, fields, editors]);
+  const { scrollRef, onContainerLayout, onFieldOffset, requestScrollToFirstError } = useScrollToFirstError(errors);
+
   const setFieldValue = useCallback((name: string, value: unknown) => {
     setFormData(prev => ({ ...prev, [name]: value }));
     setErrors(prev => {
@@ -55,21 +71,27 @@ export function ResourceCreate({ resource, onSuccess, onCancel }: ResourceCreate
     });
   }, []);
 
-  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);
 
@@ -79,49 +101,59 @@ export function ResourceCreate({ resource, onSuccess, onCancel }: ResourceCreate
     } catch (err) {
       setSubmitError(err instanceof Error ? err.message : String(err));
     } finally {
+      inFlight.current = false;
       setSubmitting(false);
     }
-  }, [adapter, resource, formData, validate, onSuccess]);
+  }, [adapter, resource, formData, validate, onSuccess, fields, requestScrollToFirstError]);
 
   if (!resourceConfig) {
     return <ErrorState message={`Resource "${resource}" not found in admin configuration`} />;
   }
 
   const label = resourceConfig.label ?? resourceConfig.name;
+  const renderInput = (field: FieldDefinition): React.ReactNode => (
+    <FieldInput
+      field={field}
+      value={formData[field.name]}
+      error={errors[field.name]}
+      onChange={value => setFieldValue(field.name, value)}
+      values={formData}
+    />
+  );
 
   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">Create {label}</Text>
-        <View className="flex-row gap-2">
-          {onCancel && (
-            <Button label="Cancel" variant="ghost" onPress={onCancel} />
-          )}
-          <Button label="Create" 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">Create {label}</Text>
+          <View className="flex-row gap-2">
+            {onCancel && (
+              <Button label="Cancel" variant="ghost" onPress={onCancel} />
+            )}
+            <Button label="Create" 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 => (
-          <FieldInput
-            key={field.name}
-            field={field}
-            value={formData[field.name]}
-            error={errors[field.name]}
-            onChange={value => setFieldValue(field.name, value)}
-          />
-        ))}
-      </View>
-    </ScrollView>
+      </ScrollView>
+      <FormActionBar onSubmit={handleSubmit} onCancel={onCancel} submitting={submitting} submitLabel="Create" error={submitError} />
+    </View>
   );
 }
 
@@ -134,14 +166,18 @@ interface FieldInputProps {
   value: unknown;
   error?: string;
   onChange: (value: unknown) => void;
+  /** The whole form's current values, for a custom input. */
+  values: Record<string, unknown>;
 }
 
-function FieldInput({ field, value, error, onChange }: FieldInputProps): React.ReactElement {
+function FieldInput({ field, value, error, onChange, values }: FieldInputProps): React.ReactElement {
   const editors = useEditors();
+  const adapter = useDataAdapter();
 
   // Resolution: inline input → registered editor → type-based default.
   if (field.input) {
-    return <>{field.input({ value, onChange, field, error })}</>;
+    // Its own component, so hooks inside a custom input keep their own order.
+    return React.createElement(field.input, { value, onChange, field, error, values });
   }
   const Editor = editorFor(field, editors);
   if (Editor) {
@@ -256,6 +292,20 @@ function FieldInput({ field, value, error, onChange }: FieldInputProps): React.R
         </FormField>
       );
 
+    case 'tags':
+      return <TagsFieldInput field={field} value={value} error={error} onChange={onChange} />;
+
+    case 'relation':
+      // Without `relation` there is nothing to search: the plain text input below.
+      if (field.relation) {
+        return (
+          <FormField label={label} error={error} required={required}>
+            <RelationFieldInput field={field} value={value} onChange={onChange} adapter={adapter} />
+          </FormField>
+        );
+      }
+      // falls through
+
     default:
       return (
         <FormField label={label} error={error} required={required}>

package/src/screens/ResourceEdit.tsx

@@ -5,16 +5,23 @@
  * 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 { RelationFieldInput } from '../components/RelationFieldInput';
+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 +47,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,12 +60,20 @@ 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);
     setFetchError(null);
     try {
-      const result = await adapter.fetchOne(resource, id);
+      const select = resourceConfig?.select;
+      const result = select ? await adapter.fetchOne(resource, id, { select }) : await adapter.fetchOne(resource, id);
       setRecord(result);
       // Pre-populate form data with existing values
       const initial: Record<string, unknown> = {};
@@ -69,7 +86,7 @@ export function ResourceEdit({ resource, id, onSuccess, onCancel }: ResourceEdit
     } finally {
       setLoading(false);
     }
-  }, [adapter, resource, id, fields]);
+  }, [adapter, resource, id, fields, resourceConfig?.select]);
 
   useEffect(() => {
     fetchRecord();
@@ -84,21 +101,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 +131,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 +153,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 +212,18 @@ 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();
+  const adapter = useDataAdapter();
 
   // 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 +335,20 @@ function EditFieldInput({ field, value, error, onChange, record }: EditFieldInpu
         </FormField>
       );
 
+    case 'tags':
+      return <TagsFieldInput field={field} value={value} error={error} onChange={onChange} />;
+
+    case 'relation':
+      // Without `relation` there is nothing to search: the plain text input below.
+      if (field.relation) {
+        return (
+          <FormField label={label} error={error} required={required}>
+            <RelationFieldInput field={field} value={value} onChange={onChange} adapter={adapter} />
+          </FormField>
+        );
+      }
+      // falls through
+
     default:
       return (
         <FormField label={label} error={error} required={required}>