# 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>
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { ResourceField, SelectOption } from "../types/config";
|
|
|
|
export function resolveTemplate(template: string, item: any): string {
|
|
if (/\{(\w+)\}/.test(template)) {
|
|
return template.replace(/\{(\w+)\}/g, (_, field: string) => String(item[field] ?? ''));
|
|
}
|
|
return String(item[template] ?? '');
|
|
}
|
|
|
|
export function getFieldOptions(field: ResourceField, relationData?: any[]): SelectOption[] {
|
|
if (field.type === 'enum') {
|
|
return (field.options ?? []).map(opt => ({
|
|
key: opt,
|
|
value: field.enumLabels?.[opt] ?? opt,
|
|
}));
|
|
}
|
|
|
|
if (field.relation) {
|
|
const data = relationData ?? [];
|
|
const enumOption = field.enumOption;
|
|
if (!enumOption) {
|
|
throw new Error(
|
|
`Missing enumOption for relation "${field.relation}" on field "${field}". ` +
|
|
`Define referenceOptions.enumOption in the configuration for resource "${field.relation}".`
|
|
);
|
|
}
|
|
|
|
return data.map(item => ({
|
|
key: String(item[enumOption.key] ?? ''),
|
|
value: resolveTemplate(enumOption.value, item),
|
|
}));
|
|
}
|
|
|
|
return [];
|
|
}
|
|
|
|
export function toGridValueOptions(options: SelectOption[]): { value: string; label: string }[] {
|
|
return options.map(opt => ({ value: opt.key, label: opt.value }));
|
|
}
|