@everystack/admin 0.1.0

package/src/screens/ResourceEdit.tsx

@@ -0,0 +1,283 @@
+/**
+ * ResourceEdit
+ *
+ * Edit form for an existing resource record.
+ * Pre-populates form with existing data, submits via adapter.update().
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { View, Text, ScrollView } from 'react-native';
+import { useAdminConfig } from '../hooks/useAdminConfig';
+import { useDataAdapter } from '../hooks/useAdminData';
+import { FormField, TextInput, SelectInput, SwitchInput, Button, LoadingState, ErrorState } from '@everystack/ui';
+import { ImageFieldInput } from '../components/ImageFieldInput';
+import { AvatarFieldInput } from '../components/AvatarFieldInput';
+import type { FieldDefinition, DataRecord } from '../types';
+
+export interface ResourceEditProps {
+  /** Resource name */
+  resource: string;
+  /** Record ID */
+  id: string | number;
+  /** Called after successful update */
+  onSuccess?: (record: Record<string, unknown>) => void;
+  /** Called when the cancel button is pressed */
+  onCancel?: () => void;
+}
+
+export function ResourceEdit({ resource, id, onSuccess, onCancel }: ResourceEditProps): React.ReactElement {
+  const config = useAdminConfig();
+  const adapter = useDataAdapter();
+  const resourceConfig = config.resources.find(r => r.name === resource);
+
+  const [record, setRecord] = useState<DataRecord | null>(null);
+  const [formData, setFormData] = useState<Record<string, unknown>>({});
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+  const [fetchError, setFetchError] = useState<Error | null>(null);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const fields = useMemo(() => {
+    if (!resourceConfig) return [];
+    const fieldNames = resourceConfig.editFields ?? resourceConfig.fields.map(f => f.name);
+    const fieldMap = new Map(resourceConfig.fields.map(f => [f.name, f]));
+    return fieldNames
+      .map(name => fieldMap.get(name))
+      .filter((f): f is FieldDefinition => f != null)
+      .filter(f => f.name !== (resourceConfig.primaryKey ?? 'id'));
+  }, [resourceConfig]);
+
+  // Fetch existing record
+  const fetchRecord = useCallback(async () => {
+    setLoading(true);
+    setFetchError(null);
+    try {
+      const result = await adapter.fetchOne(resource, id);
+      setRecord(result);
+      // Pre-populate form data with existing values
+      const initial: Record<string, unknown> = {};
+      for (const field of fields) {
+        initial[field.name] = result[field.name];
+      }
+      setFormData(initial);
+    } catch (err) {
+      setFetchError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setLoading(false);
+    }
+  }, [adapter, resource, id, fields]);
+
+  useEffect(() => {
+    fetchRecord();
+  }, [fetchRecord]);
+
+  const setFieldValue = useCallback((name: string, value: unknown) => {
+    setFormData(prev => ({ ...prev, [name]: value }));
+    setErrors(prev => {
+      const next = { ...prev };
+      delete next[name];
+      return next;
+    });
+  }, []);
+
+  const validate = useCallback((): boolean => {
+    const newErrors: Record<string, string> = {};
+    for (const field of fields) {
+      const value = formData[field.name];
+      if (field.validation?.required && (value == null || value === '')) {
+        newErrors[field.name] = field.validation.message ?? `${field.label ?? field.name} is required`;
+      }
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }, [fields, formData]);
+
+  const handleSubmit = useCallback(async () => {
+    if (!validate()) return;
+
+    setSubmitting(true);
+    setSubmitError(null);
+
+    try {
+      const updated = await adapter.update(resource, id, formData);
+      onSuccess?.(updated);
+    } catch (err) {
+      setSubmitError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSubmitting(false);
+    }
+  }, [adapter, resource, id, formData, validate, onSuccess]);
+
+  if (!resourceConfig) {
+    return <ErrorState message={`Resource "${resource}" not found in admin configuration`} />;
+  }
+
+  if (loading) {
+    return <LoadingState message="Loading record..." />;
+  }
+
+  if (fetchError) {
+    return <ErrorState message={fetchError.message} onRetry={fetchRecord} />;
+  }
+
+  if (!record) {
+    return <ErrorState message="Record not found" />;
+  }
+
+  const label = resourceConfig.label ?? resourceConfig.name;
+
+  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>
+      </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>
+        </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)}
+          />
+        ))}
+      </View>
+    </ScrollView>
+  );
+}
+
+// =============================================================================
+// EditFieldInput — maps FieldDefinition.type to input component
+// =============================================================================
+
+interface EditFieldInputProps {
+  field: FieldDefinition;
+  value: unknown;
+  error?: string;
+  onChange: (value: unknown) => void;
+}
+
+function EditFieldInput({ field, value, error, onChange }: EditFieldInputProps): React.ReactElement {
+  const label = field.label ?? field.name;
+  const required = field.validation?.required;
+
+  switch (field.type) {
+    case 'boolean':
+      return (
+        <FormField label={label} error={error} required={required}>
+          <SwitchInput value={Boolean(value)} onValueChange={onChange} />
+        </FormField>
+      );
+
+    case 'enum':
+      return (
+        <FormField label={label} error={error} required={required}>
+          <SelectInput
+            value={String(value ?? '')}
+            options={(field.enumValues ?? []).map(v => ({ label: v, value: v }))}
+            onValueChange={onChange}
+            placeholder={`Select ${label.toLowerCase()}`}
+          />
+        </FormField>
+      );
+
+    case 'number':
+      return (
+        <FormField label={label} error={error} required={required}>
+          <TextInput
+            value={value != null ? String(value) : ''}
+            onChangeText={text => onChange(text ? Number(text) : null)}
+            keyboardType="numeric"
+            placeholder={`Enter ${label.toLowerCase()}`}
+          />
+        </FormField>
+      );
+
+    case 'email':
+      return (
+        <FormField label={label} error={error} required={required}>
+          <TextInput
+            value={String(value ?? '')}
+            onChangeText={onChange}
+            keyboardType="email-address"
+            placeholder={`Enter ${label.toLowerCase()}`}
+          />
+        </FormField>
+      );
+
+    case 'url':
+      return (
+        <FormField label={label} error={error} required={required}>
+          <TextInput
+            value={String(value ?? '')}
+            onChangeText={onChange}
+            keyboardType="url"
+            placeholder={`Enter ${label.toLowerCase()}`}
+          />
+        </FormField>
+      );
+
+    case 'json':
+      return (
+        <FormField label={label} error={error} required={required}>
+          <TextInput
+            value={typeof value === 'string' ? value : JSON.stringify(value ?? '', null, 2)}
+            onChangeText={text => {
+              try { onChange(JSON.parse(text)); } catch { onChange(text); }
+            }}
+            multiline
+            placeholder="{}"
+          />
+        </FormField>
+      );
+
+    case 'image':
+      if (field.renderer === 'avatar') {
+        return <AvatarFieldInput field={field} value={value} error={error} onChange={onChange} />;
+      }
+      return <ImageFieldInput field={field} value={value} error={error} onChange={onChange} />;
+
+    case 'file':
+      return (
+        <FormField label={label} error={error} required={required}>
+          <TextInput
+            value={String(value ?? '')}
+            onChangeText={onChange}
+            keyboardType="url"
+            placeholder="Enter file URL"
+          />
+        </FormField>
+      );
+
+    default:
+      return (
+        <FormField label={label} error={error} required={required}>
+          <TextInput
+            value={String(value ?? '')}
+            onChangeText={onChange}
+            placeholder={`Enter ${label.toLowerCase()}`}
+            multiline={field.type === 'string' && (field.validation?.max ?? 0) > 255}
+          />
+        </FormField>
+      );
+  }
+}

package/src/screens/ResourceList.tsx

@@ -0,0 +1,153 @@
+/**
+ * ResourceList
+ *
+ * List view for a resource with sortable table, search/filter, and pagination.
+ * Wires useAdminData() to DataTable, FilterBar, and PaginationBar components.
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import { View, Text } from 'react-native';
+import { useAdminConfig } from '../hooks/useAdminConfig';
+import { useAdminData } from '../hooks/useAdminData';
+import { DataTable, FilterBar, PaginationBar, LoadingState, ErrorState, EmptyState, Button, type DataTableColumn } from '@everystack/ui';
+import type { ResourceConfig, FieldDefinition } from '../types';
+
+export interface ResourceListProps {
+  /** Resource name (matches ResourceConfig.name) */
+  resource: string;
+  /** Called when a row is pressed */
+  onRowPress?: (record: Record<string, unknown>) => void;
+  /** Called when the create button is pressed */
+  onCreatePress?: () => void;
+}
+
+export function ResourceList({ resource, onRowPress, onCreatePress }: ResourceListProps): React.ReactElement {
+  const config = useAdminConfig();
+  const resourceConfig = config.resources.find(r => r.name === resource);
+
+  const defaultSort = resourceConfig?.defaultSort;
+  const {
+    data,
+    total,
+    loading,
+    error,
+    refetch,
+    page,
+    perPage,
+    setPage,
+    setSort,
+    setFilter,
+  } = useAdminData(resource, {
+    sort: defaultSort?.field,
+    order: defaultSort?.order,
+  });
+
+  // Build columns from field definitions
+  const columns = useMemo(() => {
+    if (!resourceConfig) return [];
+    return fieldsToColumns(resourceConfig, defaultSort?.field, defaultSort?.order);
+  }, [resourceConfig, defaultSort?.field, defaultSort?.order]);
+
+  // 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]);
+
+  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]);
+
+  if (!resourceConfig) {
+    return (
+      <ErrorState message={`Resource "${resource}" not found in admin configuration`} />
+    );
+  }
+
+  const label = resourceConfig.labelPlural ?? resourceConfig.label ?? resourceConfig.name;
+  const canCreate = resourceConfig.actions?.create !== false;
+
+  return (
+    <View 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">{label}</Text>
+        {canCreate && onCreatePress && (
+          <Button label="Create" onPress={onCreatePress} />
+        )}
+      </View>
+
+      {/* Filter bar */}
+      <FilterBar
+        placeholder={`Search ${label.toLowerCase()}...`}
+        onSearch={handleSearch}
+        filters={filterChips}
+      />
+
+      {/* Content */}
+      {loading ? (
+        <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.' : ''}`}
+        />
+      ) : (
+        <DataTable
+          columns={columns}
+          data={data}
+          onSort={handleSort}
+          onRowPress={onRowPress}
+        />
+      )}
+
+      {/* Pagination */}
+      {total > 0 && (
+        <PaginationBar
+          page={page}
+          perPage={perPage}
+          total={total}
+          onPageChange={setPage}
+        />
+      )}
+    </View>
+  );
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+function fieldsToColumns(
+  resourceConfig: ResourceConfig,
+  _sortField?: string,
+  _sortOrder?: 'asc' | 'desc'
+): DataTableColumn[] {
+  const fieldNames = resourceConfig.listFields ?? resourceConfig.fields.map(f => f.name);
+  const fieldMap = new Map(resourceConfig.fields.map(f => [f.name, f]));
+
+  return fieldNames
+    .map(name => fieldMap.get(name))
+    .filter((f): f is FieldDefinition => f != null)
+    .map(field => ({
+      key: field.name,
+      label: field.label ?? field.name,
+      sortable: field.sortable,
+    }));
+}

package/src/screens/ResourceShow.tsx

@@ -0,0 +1,171 @@
+/**
+ * ResourceShow
+ *
+ * Detail view for a single resource record.
+ * Fetches via adapter.fetchOne() and displays field values.
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { View, Text, ScrollView } from 'react-native';
+import { useAdminConfig } from '../hooks/useAdminConfig';
+import { useDataAdapter } from '../hooks/useAdminData';
+import { LoadingState, ErrorState, Button, Card, Divider } from '@everystack/ui';
+import { ImageDisplay } from '../components/ImageDisplay';
+import type { FieldDefinition, DataRecord } from '../types';
+
+export interface ResourceShowProps {
+  /** Resource name */
+  resource: string;
+  /** Record ID */
+  id: string | number;
+  /** Called when the edit button is pressed */
+  onEditPress?: () => void;
+  /** Called when the delete button is pressed */
+  onDeletePress?: () => void;
+  /** Called when the back/list button is pressed */
+  onBackPress?: () => void;
+}
+
+export function ResourceShow({
+  resource,
+  id,
+  onEditPress,
+  onDeletePress,
+  onBackPress,
+}: ResourceShowProps): React.ReactElement {
+  const config = useAdminConfig();
+  const adapter = useDataAdapter();
+  const resourceConfig = config.resources.find(r => r.name === resource);
+
+  const [record, setRecord] = useState<DataRecord | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchRecord = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await adapter.fetchOne(resource, id);
+      setRecord(result);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setLoading(false);
+    }
+  }, [adapter, resource, id]);
+
+  useEffect(() => {
+    fetchRecord();
+  }, [fetchRecord]);
+
+  if (!resourceConfig) {
+    return <ErrorState message={`Resource "${resource}" not found in admin configuration`} />;
+  }
+
+  if (loading) {
+    return <LoadingState message="Loading record..." />;
+  }
+
+  if (error) {
+    return <ErrorState message={error.message} onRetry={fetchRecord} />;
+  }
+
+  if (!record) {
+    return <ErrorState message="Record not found" />;
+  }
+
+  const label = resourceConfig.label ?? resourceConfig.name;
+  const showFields = resourceConfig.showFields ?? resourceConfig.fields.map(f => f.name);
+  const fieldMap = new Map(resourceConfig.fields.map(f => [f.name, f]));
+  const canEdit = resourceConfig.actions?.edit !== false;
+  const canDelete = resourceConfig.actions?.delete !== false;
+
+  return (
+    <ScrollView className="flex-1">
+      {/* Header */}
+      <View className="flex-row items-center justify-between px-4 py-4">
+        <View className="flex-row items-center">
+          {onBackPress && (
+            <Button label="\u2190 Back" variant="ghost" onPress={onBackPress} style={{ marginRight: 8 }} />
+          )}
+          <Text className="text-xl font-bold text-gray-900">
+            {label} #{String(id)}
+          </Text>
+        </View>
+        <View className="flex-row gap-2">
+          {canEdit && onEditPress && (
+            <Button label="Edit" variant="outline" onPress={onEditPress} />
+          )}
+          {canDelete && onDeletePress && (
+            <Button label="Delete" variant="destructive" onPress={onDeletePress} />
+          )}
+        </View>
+      </View>
+
+      {/* Fields */}
+      <Card style={{ marginHorizontal: 16, marginBottom: 16 }}>
+        {showFields.map((fieldName, idx) => {
+          const fieldDef = fieldMap.get(fieldName);
+          if (!fieldDef) return null;
+          const value = record[fieldName];
+          return (
+            <React.Fragment key={fieldName}>
+              {idx > 0 && <Divider />}
+              <FieldRow field={fieldDef} value={value} />
+            </React.Fragment>
+          );
+        })}
+      </Card>
+    </ScrollView>
+  );
+}
+
+// =============================================================================
+// FieldRow
+// =============================================================================
+
+interface FieldRowProps {
+  field: FieldDefinition;
+  value: unknown;
+}
+
+function FieldRow({ field, value }: FieldRowProps): React.ReactElement {
+  return (
+    <View className="py-3">
+      <Text className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">
+        {field.label ?? field.name}
+      </Text>
+      {field.type === 'image' ? (
+        <ImageDisplay field={field} value={value} />
+      ) : (
+        <Text className="text-sm text-gray-900">{formatFieldValue(value, field)}</Text>
+      )}
+    </View>
+  );
+}
+
+function formatFieldValue(value: unknown, field: FieldDefinition): string {
+  if (value == null) return '\u2014';
+
+  switch (field.type) {
+    case 'boolean':
+      return value ? 'Yes' : 'No';
+    case 'date':
+      return new Date(String(value)).toLocaleDateString();
+    case 'datetime':
+      return new Date(String(value)).toLocaleString();
+    case 'json':
+      return JSON.stringify(value, null, 2);
+    case 'url':
+    case 'email':
+    case 'image':
+      return String(value);
+    case 'file': {
+      const str = String(value);
+      const basename = str.split('/').pop() ?? str;
+      return basename;
+    }
+    default:
+      return String(value);
+  }
+}

package/src/screens/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Admin screen components.
+ *
+ * These components wire admin hooks to UI components to provide
+ * ready-made screens for admin dashboards.
+ */
+
+export { AdminLayout, type AdminLayoutProps } from './AdminLayout';
+export { AdminDashboard, type AdminDashboardProps } from './AdminDashboard';
+export { ResourceList, type ResourceListProps } from './ResourceList';
+export { ResourceShow, type ResourceShowProps } from './ResourceShow';
+export { ResourceCreate, type ResourceCreateProps } from './ResourceCreate';
+export { ResourceEdit, type ResourceEditProps } from './ResourceEdit';
+export { ResourceDashboard, type ResourceDashboardProps } from './ResourceDashboard';