common fields

react-openapi/components/EnhancedTable.tsx

@@ -31,6 +31,7 @@ import VisibilityIcon from '@mui/icons-material/Visibility';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { useNavigate } from 'react-router-dom';
 import { ResourceConfig } from '../types/config';
+import { EnhancedTableComponents } from '../types/overrides';
 import { getFieldOptions, toGridValueOptions, resolveTemplate } from '../utils/options';
 
 interface EnhancedTableProps {
@@ -44,6 +45,7 @@ interface EnhancedTableProps {
   onDelete: (id: string) => void;
   onCreate: () => void;
   onNavigateToResource?: (resourceName: string, id: string) => void;
+  components?: EnhancedTableComponents;
 }
 
 export default function EnhancedTable({
@@ -57,6 +59,7 @@ export default function EnhancedTable({
   onDelete,
   onCreate,
   onNavigateToResource,
+  components: tableComponents,
 }: EnhancedTableProps) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -85,7 +88,7 @@ export default function EnhancedTable({
         type: muiType,
         flex: 1,
         minWidth: 150,
-        renderCell: (params: GridRenderCellParams) => <FieldRenderer params={params} field={field} fieldKey={key} config={config} onNavigate={onNavigateToResource} navigate={navigate} />
+        renderCell: (params: GridRenderCellParams) => <FieldRenderer params={params} field={field} fieldKey={key} config={config} onNavigate={onNavigateToResource} navigate={navigate} components={tableComponents} />
       };
 
       if (muiType === 'date' || muiType === 'dateTime') {
@@ -158,6 +161,7 @@ export default function EnhancedTable({
                 onDelete={onDelete} 
                 onNavigate={onNavigateToResource}
                 navigate={navigate}
+                components={tableComponents}
               />
             </Box>
           ))}
@@ -225,7 +229,7 @@ export default function EnhancedTable({
   );
 }
 
-function MobileCardRow({ row, config, onDelete, onNavigate, navigate }: any) {
+function MobileCardRow({ row, config, onDelete, onNavigate, navigate, components }: any) {
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
     const open = Boolean(anchorEl);
     const id = row[config.primaryKey];
@@ -261,7 +265,7 @@ function MobileCardRow({ row, config, onDelete, onNavigate, navigate }: any) {
                                 {field.label}
                             </Typography>
                             <Typography variant="body2" component="div" sx={{ fontWeight: 500, wordBreak: 'break-all' }}>
-                                <FieldRenderer params={{ value: row[key], row }} field={field} fieldKey={key} config={config} onNavigate={onNavigate} navigate={navigate} isMobile />
+                                <FieldRenderer params={{ value: row[key], row }} field={field} fieldKey={key} config={config} onNavigate={onNavigate} navigate={navigate} isMobile components={components} />
                             </Typography>
                         </Box>
                     ))}
@@ -289,12 +293,17 @@ function getFormattedDisplayValue(item: any, displayField?: string | string[], e
     return item[displayField] || item.id || JSON.stringify(item);
 }
 
-function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate, isMobile }: any) {
+function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate, isMobile, components }: any) {
     const value = params.value;
     const isPk = fieldKey === config.primaryKey;
 
     if (field.formatter) return field.formatter(value);
 
+    const customRenderer = components?.cellRenderers?.[field.type as string];
+    if (customRenderer) {
+      return React.createElement(customRenderer, { value, row: params.row, field, fieldKey, config, onNavigate, isMobile });
+    }
+
     // 1. Single Relation
     if (field.relation && value && !Array.isArray(value)) {
         const relationId = typeof value === 'object' ? (value.id || value._id || value.pk) : value;

react-openapi/components/FilterBar.tsx

@@ -11,9 +11,10 @@ import {
 import DoneIcon from "@mui/icons-material/Done";
 import FilterListIcon from "@mui/icons-material/FilterList";
 import { ResourceField, ResourceMode } from "../types/config";
+import { FilterBarComponents } from "../types/overrides";
 import { getFieldOptions, resolveTemplate } from "../utils/options";
 
-function FilterAutocomplete({
+export function FilterAutocomplete({
   options,
   value,
   label,
@@ -160,8 +161,14 @@ function renderFilterInput(
   field: ResourceField,
   options: string[],
   value: any,
-  onChange: (key: string, val: any) => void
+  onChange: (key: string, val: any) => void,
+  components?: FilterBarComponents,
 ) {
+  const CustomInput = components?.filterInputs?.[fieldName];
+  if (CustomInput) {
+    return <CustomInput field={field} value={value} onChange={(val) => onChange("value", val)} options={options} />;
+  }
+
   const filterType = field.filterType;
 
   if (filterType === "number-range") {
@@ -208,6 +215,7 @@ export interface FilterBarProps {
   appliedValues: Record<string, any>;
   onApply: (values: Record<string, any>) => void;
   onClear: () => void;
+  components?: FilterBarComponents;
 }
 
 export default function FilterBar({
@@ -217,6 +225,7 @@ export default function FilterBar({
   appliedValues,
   onApply,
   onClear,
+  components: filterComponents,
 }: FilterBarProps) {
   const [open, setOpen] = React.useState(false);
   const [draft, setDraft] = React.useState<Record<string, any>>(() => ({ ...appliedValues }));
@@ -294,7 +303,7 @@ export default function FilterBar({
                     {field.label}
                   </Box>
                   {renderFilterInput(fieldName, field, options, raw, (key, val) =>
-                    updateDraft(fieldName, key, val)
+                    updateDraft(fieldName, key, val), filterComponents
                   )}
                 </Box>
               );

react-openapi/components/GenericForm.tsx

@@ -22,7 +22,7 @@ interface GenericFormProps {
   loading?: boolean;
   readOnly?: boolean;
   onEditClick?: () => void;
-  fieldComponents?: FieldComponents;
+  fieldComponents: FieldComponents;
 }
 
 export default function GenericForm({
@@ -57,7 +57,7 @@ export default function GenericForm({
     queries: allRelations.map(relName => {
         const relatedRes = appConfig?.resources.find(r => r.name === relName);
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        const { getListQueryOptions } = useResource(relatedRes!);
+        const { getListQueryOptions } = useResource(relatedRes!, { fieldComponents });
         return {
             ...getListQueryOptions(),
             enabled: !!relatedRes,

react-openapi/components/ProfileView.tsx

@@ -3,6 +3,7 @@ import { Box, Typography, Paper, CircularProgress, Alert } from '@mui/material';
 import { useResource } from '../hooks/useResource';
 import GenericForm from './GenericForm';
 import { ConfigContext } from '../providers/ConfigContext';
+import { defaultFieldComponents } from './fields/DefaultFieldComponents';
 
 export default function ProfileView() {
   const appConfig = React.useContext(ConfigContext);
@@ -13,11 +14,10 @@ export default function ProfileView() {
     return <Alert severity="error">Profile configuration not found.</Alert>;
   }
 
-  // Create a modified config where only extraFields are editable
   const editableConfig = React.useMemo(() => {
     const newFields = { ...resourceConfig.fields };
     const extraFields = profileConfig.extraFields || [];
-    
+
     Object.keys(newFields).forEach(key => {
       newFields[key] = {
         ...newFields[key],
@@ -31,13 +31,12 @@ export default function ProfileView() {
     };
   }, [resourceConfig, profileConfig.extraFields]);
 
-  const { useMe, useUpdateMe } = useResource(resourceConfig);
+  const { useMe, useUpdateMe } = useResource(resourceConfig, { fieldComponents: defaultFieldComponents });
   const { data: profile, isLoading, error } = useMe();
   const updateMutation = useUpdateMe();
 
   const handleSave = async (formData: any) => {
     try {
-      // Only send editable fields to prevent accidental overwrites of read-only data
       const extraFields = profileConfig.extraFields || [];
       const dataToSave = Object.keys(formData)
         .filter(key => extraFields.includes(key))
@@ -76,6 +75,7 @@ export default function ProfileView() {
           onSave={handleSave}
           onCancel={() => window.history.back()}
           loading={updateMutation.isPending}
+          fieldComponents={defaultFieldComponents}
         />
       </Paper>
     </Box>

react-openapi/components/ResourceView.tsx

@@ -5,7 +5,6 @@ import type { ResourceField } from '../types/config';
 import { FieldComponents } from '../types/overrides';
 import { useResource } from '../hooks/useResource';
 import { resolveTemplate } from '../utils/options';
-import GenericForm from './GenericForm';
 import EnhancedTable from './EnhancedTable';
 import FilterBar from './FilterBar';
 import { useParams, useLocation, useNavigate } from 'react-router-dom';
@@ -13,7 +12,7 @@ import { useParams, useLocation, useNavigate } from 'react-router-dom';
 interface ResourceViewProps {
   config: ResourceConfig;
   onNavigateToResource?: (resourceName: string, id: string) => void;
-  fieldComponents?: FieldComponents;
+  fieldComponents: FieldComponents;
 }
 
 import { GridPaginationModel } from '@mui/x-data-grid';
@@ -117,7 +116,7 @@ export default function ResourceView({ config, onNavigateToResource, fieldCompon
 
   const [appliedFilters, setAppliedFilters] = React.useState<Record<string, any>>({});
 
-  const { useList, useRead, useCreate, useUpdate, useDelete } = useResource(config);
+  const { useList, useRead, useCreate, useUpdate, useDelete, components } = useResource(config, { fieldComponents });
 
   const queryParams = React.useMemo(() => {
     if (!isServer) return { limit: 10000 };
@@ -202,7 +201,7 @@ export default function ResourceView({ config, onNavigateToResource, fieldCompon
         </Box>
       ) : (
         <Paper sx={{ p: 4 }}>
-          <GenericForm
+          <components.GenericForm
             config={config}
             initialData={isCreate ? null : itemQuery.data}
             onSave={handleSave}
@@ -210,7 +209,6 @@ export default function ResourceView({ config, onNavigateToResource, fieldCompon
             loading={createMutation.isPending || updateMutation.isPending}
             readOnly={isView}
             onEditClick={() => navigate(`/admin/${config.name}/edit/${id}`)}
-            fieldComponents={fieldComponents}
           />
         </Paper>
       )}

react-openapi/components/fields/DefaultFieldComponents.ts

@@ -6,6 +6,7 @@ import DateField from './DateField';
 import EnumField from './EnumField';
 import RelationField from './RelationField';
 import ImageUploadField from './ImageUploadField';
+import FallbackField from './FallbackField';
 
 export const defaultFieldComponents: FieldComponents = {
   string: TextFieldEntry,
@@ -17,4 +18,5 @@ export const defaultFieldComponents: FieldComponents = {
   enum: EnumField,
   image: ImageUploadField,
   relation: RelationField,
+  default: FallbackField,
 };

react-openapi/components/fields/FallbackField.tsx

@@ -0,0 +1,13 @@
+import { TextField } from '@mui/material';
+import { FieldComponentProps } from '../../types/overrides';
+
+export default function FallbackField({ field, value }: FieldComponentProps) {
+  return (
+    <TextField
+      fullWidth
+      label={field.label}
+      value={typeof value === 'object' ? JSON.stringify(value) : value || ''}
+      disabled
+    />
+  );
+}

react-openapi/components/fields/FormField.tsx

@@ -1,12 +1,9 @@
 import * as React from 'react';
-import { TextField as MuiTextField } from '@mui/material';
 import { ResourceField } from '../../types/config';
 import { FieldComponentProps, FieldComponents } from '../../types/overrides';
-import { defaultFieldComponents } from './DefaultFieldComponents';
 import ObjectField from './ObjectField';
-import ImageUploadField from './ImageUploadField';
 
-interface FormFieldProps {
+export interface FormFieldProps {
   name: string;
   field: ResourceField;
   value: any;
@@ -16,18 +13,7 @@ interface FormFieldProps {
   uploading: boolean;
   baseUrl: string;
   relationDataMap?: Record<string, any[]>;
-  components?: FieldComponents;
-}
-
-function FallbackField({ field, value }: FieldComponentProps) {
-  return (
-    <MuiTextField
-      fullWidth
-      label={field.label}
-      value={typeof value === 'object' ? JSON.stringify(value) : value || ''}
-      disabled
-    />
-  );
+  components: FieldComponents;
 }
 
 export default function FormField({
@@ -40,13 +26,8 @@ export default function FormField({
   uploading,
   baseUrl,
   relationDataMap = {},
-  components: componentsProp,
+  components,
 }: FormFieldProps) {
-  const components = React.useMemo(
-    () => ({ ...defaultFieldComponents, ...componentsProp }),
-    [componentsProp],
-  );
-
   const fieldProps: FieldComponentProps = {
     name,
     field,
@@ -59,6 +40,8 @@ export default function FormField({
     uploading,
   };
 
+  const childComponents = components;
+
   // 1. Object (recursive) - requires parent FormField for recursion
   if (field.type === 'object' && field.schema && !field.relation) {
     const renderChild = (childProps: FieldComponentProps) => (
@@ -72,7 +55,7 @@ export default function FormField({
         uploading={childProps.uploading!}
         baseUrl={childProps.baseUrl!}
         relationDataMap={childProps.relationDataMap}
-        components={componentsProp}
+        components={components}
       />
     );
     return <ObjectField {...fieldProps} renderField={renderChild} />;
@@ -80,22 +63,23 @@ export default function FormField({
 
   // 2. Image
   if (field.type === 'image') {
-    const ImageField = components.image || ImageUploadField;
+    const ImageField = components.image;
+    if (!ImageField) return null;
     return <ImageField {...fieldProps} />;
   }
 
   // 3. Relation
   if (field.relation && relationDataMap[field.relation]) {
-    const RelationFieldComp = components.relation || defaultFieldComponents.relation!;
+    const RelationFieldComp = components.relation;
+    if (!RelationFieldComp) return null;
     return <RelationFieldComp {...fieldProps} />;
   }
 
   // 4. Lookup by field type
-  const Component = components[field.type];
+  const Component = components[field.type] || components.default;
   if (Component) {
     return <Component {...fieldProps} />;
   }
 
-  // 5. Fallback for unknown types
-  return <FallbackField {...fieldProps} />;
+  return null;
 }

react-openapi/components/fields/index.ts

@@ -7,5 +7,6 @@ export { default as DateField } from './DateField';
 export { default as EnumField } from './EnumField';
 export { default as RelationField } from './RelationField';
 export { default as ObjectField } from './ObjectField';
+export { default as FallbackField } from './FallbackField';
 export { defaultFieldComponents } from './DefaultFieldComponents';
 export type { ObjectFieldProps } from './ObjectField';