# Summary Refactor the React OpenAPI admin framework to support fully customizable field rendering and UI composition. ## Changes ### Admin UI Customization * Added support for custom: * Dashboard component * Layout component * Login page component * Introduced `AdminAppProps` and extended `Admin` configuration API. * Renamed internal dashboard implementation to `DefaultDashboard`. ### Field Component Architecture * Extracted field rendering into dedicated field components: * TextField * NumberField * BooleanField * DateField * EnumField * RelationField * ObjectField * FallbackField * DateRangeField * NumberRangeField * Added `defaultFieldComponents` registry. * Refactored `FormField` to resolve components dynamically from a component map instead of hardcoded field type handling. ### Resource Customization * Added `FieldComponents` support across: * Admin * ResourceView * GenericForm * useResource * Introduced wrapped `FormField` and `GenericForm` components generated from configured field overrides. ### Table Customization * Added `EnhancedTableComponents`. * Added support for custom cell renderers per field type. * Enabled custom rendering for both desktop and mobile table layouts. ### Filter Improvements * Exported `FilterAutocomplete`. * Added support for custom date-range and number-range filter components. * Added filter component extension points. * Updated filter option label resolution to support `displayFormat`. ### Display Formatting * Replaced `displayField` usage with `displayFormat`. * Added template-based display rendering support through `resolveTemplate`. * Improved relation display configuration handling. ### TypeScript Improvements * Added TypeScript as a project dependency. * Removed multiple `@ts-ignore` usages. * Added strongly typed Axios wrapper methods with generic response support. * Improved typing across hooks and component interfaces. ### OpenAPI Configuration Validation * Added validation for enum fields without enum values. * Added validation for relation resources missing `referenceOptions.enumOption`. * Improved relation metadata propagation during schema parsing. ### Library Exports * Exported: * Field component types * Override types * EnhancedTable * GenericForm * ResourceView * Field components and defaults * Expanded public API surface for consumers extending the framework. ## Benefits * Enables complete UI customization without modifying framework internals. * Simplifies creation of custom field types and renderers. * Improves type safety and developer experience. * Provides consistent extension points for forms, tables, filters, and admin layouts. * Makes the framework more suitable for reusable library distribution. Reviewed-on: #11 Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com> Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
87 lines
2.1 KiB
TypeScript
87 lines
2.1 KiB
TypeScript
import { ResourceField, FieldType } from './config';
|
||
|
||
export interface EnumOption {
|
||
key: string;
|
||
value: string;
|
||
}
|
||
|
||
export interface FieldOverride {
|
||
displayFormat?: string;
|
||
display?: boolean;
|
||
formatter?: (value: any) => string;
|
||
filterType?: "autocomplete" | "multiselect" | "number-range" | "date-range";
|
||
enumLabels?: Record<string, string>;
|
||
// New optional properties to support custom config extensions
|
||
path?: string;
|
||
refers?: string;
|
||
}
|
||
|
||
export interface ResourceOverride {
|
||
fields?: Record<string, FieldOverride>;
|
||
pagination?: boolean;
|
||
hidden?: boolean;
|
||
filterOptions?: {
|
||
mode?: "server" | "client";
|
||
fields?: string[];
|
||
};
|
||
enumOption?: EnumOption;
|
||
// New optional property for reference‑type resources
|
||
referenceOptions?: {
|
||
enumOption?: EnumOption;
|
||
autoComplete?: boolean;
|
||
prefetch?: boolean;
|
||
};
|
||
}
|
||
|
||
export interface FieldComponentProps {
|
||
name: string;
|
||
field: ResourceField;
|
||
value: any;
|
||
onChange: (val: any) => void;
|
||
disabled?: boolean;
|
||
error?: string;
|
||
baseUrl?: string;
|
||
relationDataMap?: Record<string, any[]>;
|
||
uploadFile?: (file: File) => Promise<string | null>;
|
||
uploading?: boolean;
|
||
}
|
||
|
||
export type FieldComponent = React.ComponentType<FieldComponentProps>;
|
||
|
||
export type FieldComponents = Partial<Record<FieldType, FieldComponent>> & {
|
||
relation?: FieldComponent;
|
||
image?: FieldComponent;
|
||
default?: FieldComponent;
|
||
dateRange?: FieldComponent;
|
||
numberRange?: FieldComponent;
|
||
FormField?: React.ComponentType<any>;
|
||
GenericForm?: React.ComponentType<any>;
|
||
};
|
||
|
||
export interface CellRendererProps {
|
||
value: any;
|
||
row: any;
|
||
field: ResourceField;
|
||
fieldKey: string;
|
||
config: import('./config').ResourceConfig;
|
||
onNavigate?: (resourceName: string, id: string) => void;
|
||
isMobile?: boolean;
|
||
}
|
||
|
||
export type CellRenderer = React.ComponentType<CellRendererProps>;
|
||
|
||
export interface EnhancedTableComponents {
|
||
cellRenderers?: Partial<Record<FieldType, CellRenderer>>;
|
||
}
|
||
|
||
export interface FilterBarComponents {
|
||
filterInputs?: Record<string, React.ComponentType<{
|
||
field: ResourceField;
|
||
value: any;
|
||
onChange: (val: any) => void;
|
||
options: string[];
|
||
}>>;
|
||
}
|
||
|
||
export type { FieldType };
|