Refactor the React OpenAPI admin framework to support fully customizable field rendering and UI composition. (#11)

# 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>

react-openapi/hooks/useResource.ts

@@ -1,28 +1,44 @@
 import { useQuery, useMutation, useQueryClient, keepPreviousData } from "@tanstack/react-query";
+import * as React from "react";
 import { api } from "../api/client";
 import { ResourceConfig } from "../types/config";
 import { ConfigContext } from "../providers/ConfigContext";
-import * as React from "react";
+import { FieldComponents, FieldComponentProps } from "../types/overrides";
+import { defaultFieldComponents } from "../components/fields/DefaultFieldComponents";
+import FormField from "../components/fields/FormField";
+import GenericForm from "../components/GenericForm";
 
-export function useResource<T = any>(config: ResourceConfig | undefined) {
+function wrapFormField(merged: FieldComponents) {
+  return (props: Omit<React.ComponentProps<typeof FormField>, 'components'>) =>
+    React.createElement(FormField, { ...props, components: merged });
+}
+
+function wrapGenericForm(merged: FieldComponents) {
+  return (props: Omit<React.ComponentProps<typeof GenericForm>, 'fieldComponents'>) =>
+    React.createElement(GenericForm, { ...props, fieldComponents: merged });
+}
+
+export function useResource<T = any>(config: ResourceConfig | undefined, options?: { fieldComponents: FieldComponents }) {
   const queryClient = useQueryClient();
-  
-  // Return empty/disabled hooks if config is missing
+
   const { name = '', endpoint = '', primaryKey = 'id' } = config || {};
 
+  const mergedComponents = React.useMemo(
+    () => options?.fieldComponents ? ({ ...defaultFieldComponents, ...options.fieldComponents }) : undefined,
+    [options?.fieldComponents],
+  );
+
   // --- READ ALL ---
-  const useList = (params?: any) => 
+  const useList = (params?: any) =>
     useQuery({
       queryKey: [name, "list", params],
       queryFn: async () => {
         if (!endpoint) return { data: [], total: 0 };
-        console.log('params:', params);
-        // @ts-ignore
         const res = await api.get<T[]>(endpoint, { params });
         const total = res.headers ? parseInt(res.headers['x-total-count'] || res.headers['X-Total-Count']) : undefined;
-        return { 
-            data: res.data, 
-            total: isNaN(total as any) ? undefined : total 
+        return {
+            data: res.data,
+            total: isNaN(total as any) ? undefined : total
         };
       },
       enabled: !!endpoint,
@@ -35,7 +51,6 @@ export function useResource<T = any>(config: ResourceConfig | undefined) {
       queryKey: [name, "detail", id, params],
       queryFn: async () => {
         if (!id || !endpoint) return null;
-        // @ts-ignore
         const res = await api.get<T>(`${endpoint}/${id}`, params ? { params } : undefined);
         return res.data;
       },
@@ -47,7 +62,6 @@ export function useResource<T = any>(config: ResourceConfig | undefined) {
     useMutation({
       mutationFn: async (data: Partial<T>) => {
         if (!endpoint) throw new Error("Endpoint not defined");
-        // @ts-ignore
         const res = await api.post<T>(endpoint, data);
         return res.data;
       },
@@ -61,12 +75,10 @@ export function useResource<T = any>(config: ResourceConfig | undefined) {
     useMutation({
       mutationFn: async ({ id, data }: { id: string; data: Partial<T> }) => {
         if (!endpoint) throw new Error("Endpoint not defined");
-        // @ts-ignore
         const res = await api.put<T>(`${endpoint}/${id}`, data);
         return res.data;
       },
-      onSuccess: (updatedItem) => {
-        // @ts-ignore
+      onSuccess: (updatedItem: any) => {
         const id = updatedItem[primaryKey];
         queryClient.invalidateQueries({ queryKey: [name, "list"] });
         queryClient.invalidateQueries({ queryKey: [name, "detail", id] });
@@ -78,15 +90,13 @@ export function useResource<T = any>(config: ResourceConfig | undefined) {
     useMutation({
       mutationFn: async ({ id, data }: { id: string; data: Partial<T> }) => {
         if (!endpoint) throw new Error("Endpoint not defined");
-        // @ts-ignore
         const res = await api.patch<T>(`${endpoint}/${id}`, data);
         return res.data;
       },
-      onSuccess: (updatedItem) => {
-        // @ts-ignore
-        const id = updatedItem[primaryKey];
+      onSuccess: (updatedItem: any) => {
+        const listId = updatedItem[primaryKey];
         queryClient.invalidateQueries({ queryKey: [name, "list"] });
-        queryClient.invalidateQueries({ queryKey: [name, "detail", id] });
+        queryClient.invalidateQueries({ queryKey: [name, "detail", listId] });
       },
     });
 
@@ -108,12 +118,11 @@ export function useResource<T = any>(config: ResourceConfig | undefined) {
     queryKey: [name, "list", params],
     queryFn: async () => {
       if (!endpoint) return { data: [], total: 0 };
-      // @ts-ignore
       const res = await api.get<T[]>(endpoint, { params });
       const total = res.headers ? parseInt(res.headers['x-total-count'] || res.headers['X-Total-Count']) : undefined;
-      return { 
-          data: res.data, 
-          total: isNaN(total as any) ? undefined : total 
+      return {
+          data: res.data,
+          total: isNaN(total as any) ? undefined : total
       };
     },
     enabled: !!endpoint,
@@ -125,7 +134,6 @@ export function useResource<T = any>(config: ResourceConfig | undefined) {
       queryKey: [name, "me"],
       queryFn: async () => {
         if (!endpoint) return null;
-        // @ts-ignore
         const res = await api.get<T>(`${endpoint}/me`);
         return res.data;
       },
@@ -137,7 +145,6 @@ export function useResource<T = any>(config: ResourceConfig | undefined) {
     useMutation({
       mutationFn: async (data: Partial<T>) => {
         if (!endpoint) throw new Error("Endpoint not defined");
-        // @ts-ignore
         const res = await api.put<T>(`${endpoint}/me`, data);
         return res.data;
       },
@@ -147,6 +154,15 @@ export function useResource<T = any>(config: ResourceConfig | undefined) {
       },
     });
 
+  const components = React.useMemo(() => {
+    if (!mergedComponents) return undefined;
+    return {
+      ...mergedComponents,
+      FormField: wrapFormField(mergedComponents),
+      GenericForm: wrapGenericForm(mergedComponents),
+    };
+  }, [mergedComponents]);
+
   return {
     useList,
     useRead,
@@ -157,12 +173,12 @@ export function useResource<T = any>(config: ResourceConfig | undefined) {
     useUpdateMe,
     useDelete,
     getListQueryOptions,
+    components,
   };
 }
 
-export function useResourceByName<T = any>(name: string) {
+export function useResourceByName<T = any>(name: string, options?: { fieldComponents: FieldComponents }) {
   const config = React.useContext(ConfigContext);
   const resourceConfig = config?.resources.find((r) => r.name === name);
-  return useResource<T>(resourceConfig);
+  return useResource<T>(resourceConfig, options);
 }
-