JSON-Driven Architecture Refactor

Overview

Created a comprehensive JSON-driven architecture that loads UI from declarative configurations, breaking down large components and creating an extensive hook library.

New Hook Library

Data Management Hooks (`/src/hooks/data/`)

useDataSource: Unified data source management (KV, static, computed)
useCRUD: Full CRUD operations for any data type
useSearchFilter: Search and filter functionality
useSort: Sorting with direction toggle
usePagination: Complete pagination logic
useSelection: Multi/single selection management

Form Hooks (`/src/hooks/forms/`)

useFormField: Field-level validation and state
useForm: Form submission with async support

New Atomic Components (`/src/components/atoms/`)

All components < 50 LOC:

DataList: Renders lists with empty states
StatCard: Metric display with trends and icons
ActionButton: Button with tooltip support
LoadingState: Configurable loading spinners
EmptyState: Empty state with optional actions

JSON Page Configuration

Created /src/config/pages/dashboard.json demonstrating:

Declarative card layouts
Data binding expressions
Computed data sources
Dynamic component rendering
Responsive grid configurations

JSON Page Renderer

/src/components/JSONPageRenderer.tsx interprets JSON schemas to render:

Multi-section layouts
Dynamic data bindings
Icon resolution from Phosphor
Gradient cards with sub-components
Stat cards from configuration

Architecture Benefits

No Code Changes: Update UI through JSON edits
Type-Safe: Full TypeScript support throughout
Composable: Mix JSON-driven and coded components
Maintainable: All components under 150 LOC
Testable: Hooks isolated from UI logic

Usage Example

import { JSONPageRenderer } from '@/components/JSONPageRenderer'
import dashboardSchema from '@/config/pages/dashboard.json'

function MyPage({ projectData }) {
  return (
    <JSONPageRenderer
      schema={dashboardSchema}
      data={projectData}
      functions={{ calculateCompletionScore }}
    />
  )
}

Next Steps

Expand JSON schemas for all pages
Add more computed data sources
Create schema validation
Build visual JSON editor
Add action bindings (click handlers, etc.)

2.3 KiB Raw Permalink Blame History