|
|
7bd946ec7a
|
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>
|
2026-06-07 12:35:52 +00:00 |
|
|
|
009ab50b47
|
major refactor of the dashboard and react-openapi integration (#1)
## Summary
This MR introduces a major refactor of the dashboard and react-openapi integration, focusing on configurability, separation of concerns, and improved extensibility.
---
## Key Changes
### 1. OpenAPI / Admin Refactor
* Extracted `ConfigContext` into a dedicated provider.
* Introduced `AppProvider` to encapsulate:
* Config loading
* API client initialization
* React Query setup
* Removed internal `QueryClientProvider` from `Admin` for better composability.
* `Admin` now supports both:
* Standalone usage
* Nested usage inside an existing provider
### 2. Resource System Improvements
* Added `hidden` flag to `ResourceConfig` and overrides.
* Admin UI now filters out hidden resources.
* Added `useResourceByName` helper for dynamic resource access.
* Improved `useResource`:
* Handles undefined config safely
* Adds guards for missing endpoints
* Disables queries when endpoint is absent
### 3. API Client Enhancements
* Added custom `paramsSerializer`:
* Serializes arrays without `[]`
* Ensures backend-compatible query formats
### 4. Dashboard Architecture Overhaul
* Replaced hardcoded dashboard with **config-driven system**:
* Introduced `ConfigurableDashboard`
* Dashboard sections defined via config
* New state model:
* `mode` (expense/income)
* `periodType` (rolling/calendar)
* `comparison`
* `selectedPeriodId`
### 5. Component Refactor (View / Logic Split)
* Split major components into:
* `.tsx` (logic/controller)
* `.view.tsx` (presentation)
* `.models.ts` (types)
* Applied to:
* Dashboard
* HistoryChart
* ProgressCard
* LatestItems
### 6. HistoryChart Redesign
* Fully rebuilt using report-driven data
* Supports:
* Weekly / Monthly / Yearly / FY / Full views
* Rolling vs Calendar periods
* Comparison mode (auto-aligned offsets)
* Introduced:
* Bucket merging logic
* Dynamic comparison attachment
### 7. Reporting Integration
* Dashboard now powered by:
* `useReport`
* `prepareReport`
* Removes need for multiple manual API calls
### 8. UI / UX Improvements
* Theme-aware color system
* Dynamic accent colors per mode
* Cleaner layout using section-based rendering
* Improved selection and interaction in charts
### 9. Cleanup & Removals
* Removed legacy components:
* Old `HistoryChart`
* Old `ProgressCard`
* Simplified Header layout spacing
---
## Behavior Changes
* Hidden resources are no longer visible in Admin UI.
* Dashboard is now entirely configuration-driven.
* API query params for arrays no longer use `[]`.
* Resource hooks no longer crash on missing config.
---
## Risks / Considerations
* Dashboard depends on correct configuration structure.
* Hidden flag may unintentionally hide resources if misconfigured.
* Query param serialization change must align with backend expectations.
---
## Follow-ups
* Add typing improvements to remove `@ts-ignore` in `GenericForm`.
* Extend dashboard config with more reusable section presets.
* Add tests for report aggregation and comparison logic.
---
Reviewed-on: #1
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
|
2026-05-07 11:00:54 +00:00 |
|
