34 lines
2.2 KiB
Markdown
34 lines
2.2 KiB
Markdown
# Design Overview
|
||
|
||
## React‑Auth
|
||
- **Purpose**: Centralize authentication flows (login, logout, token refresh) for the UI.
|
||
- **Key Concepts**
|
||
- **AuthProvider** – React context that stores `user`, `accessToken`, and `isAuthenticated`.
|
||
- **useAuth hook** – Exposes `login`, `logout`, `refreshToken`, and state values.
|
||
- **Route Guard** – HOC/Component (`ProtectedRoute`) that redirects unauthenticated users to the login page.
|
||
- **UI**: Simple MUI forms, error handling with snackbars, and a loading spinner while the auth request is pending.
|
||
- **Extensibility**: Plug‑in point for additional providers (OAuth, SSO) via a `providers` map.
|
||
|
||
## React‑OpenAPI
|
||
- **Purpose**: Generate UI components directly from an OpenAPI spec (tables, filters, forms).
|
||
- **Core Modules**
|
||
- `ResourceConfig` & `ResourceField` – Typed definitions that describe each endpoint and its fields, including `displayFormat` for rendering.
|
||
- `EnhancedTable` – Data‑grid component that renders rows according to the config, supports relation rendering, sorting, pagination, and custom cell renderers.
|
||
- `FilterBar` – Dynamically builds filter controls (autocomplete, number‑range, date‑range) based on the same config.
|
||
- **Data Flow**
|
||
1. Load OpenAPI spec → transform to `ResourceConfig` objects.
|
||
2. `useQuery` (TanStack) fetches data.
|
||
3. UI components consume the config to render tables and filter UI without hand‑written column definitions.
|
||
- **Design Goals**
|
||
- **Zero boilerplate** – Adding a new resource only requires a JSON config.
|
||
- **Consistency** – All tables share pagination, actions, and styling.
|
||
- **Extensibility** – Override components via `components` prop.
|
||
|
||
## src (Root Application)
|
||
- **Entry Point** – `main.tsx` mounts the React app with `BrowserRouter` and wraps it with `AuthProvider`.
|
||
- **Routing** – Routes are defined per‑resource (`/admin/:resource`, `/admin/:resource/edit/:id`). `ProtectedRoute` ensures auth.
|
||
- **State Management** – TanStack Query handles server state; React Context handles auth state.
|
||
- **Theming** – MUI theming with light/dark mode toggle (future enhancement).
|
||
|
||
---
|
||
These design notes serve as a concise reference for developers preparing a richer UI/UX implementation on the **lovable** platform. |