Files
metabuilder/codegen/docs/JSON_COMPONENT_CONVERSION_TASKS.md
johndoe6345789 a51130a127 feat: Add external low-code and postgres repositories
- codegen: Low-code React app with JSON-driven component system
- packagerepo: Schema-driven package repository with backend/frontend
- postgres: Next.js app with Drizzle ORM and PostgreSQL

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-21 16:48:52 +00:00

5.1 KiB

JSON Component Conversion Tasks

This task list captures the next steps for expanding JSON UI coverage, split between component migrations and framework enablers.

Implementation Notes

  • Component trees can live as JSON definitions.
  • Custom behavior should be organized into hooks where appropriate.
  • Types belong in types files; interfaces belong in dedicated interfaces files.
  • Capture relevant conversion logs during work.

Component Migration Tasks (Planned → Supported)

Input Components

  • DatePicker
    • Add DatePicker to ComponentType in src/types/json-ui.ts.
    • Register DatePicker in src/lib/json-ui/component-registry.tsx.
    • Add metadata/defaults to src/lib/component-definitions.ts.
    • Flip status to supported in json-components-registry.json.
  • FileUpload
    • Add FileUpload to ComponentType in src/types/json-ui.ts.
    • Register FileUpload in src/lib/json-ui/component-registry.tsx.
    • Add metadata/defaults to src/lib/component-definitions.ts.
    • Flip status to supported in json-components-registry.json.

Display Components

  • CircularProgress
    • Add CircularProgress to ComponentType in src/types/json-ui.ts.
    • Register CircularProgress in src/lib/json-ui/component-registry.tsx.
    • Add metadata/defaults to src/lib/component-definitions.ts.
    • Flip status to supported in json-components-registry.json.
  • Divider
    • Add Divider to ComponentType in src/types/json-ui.ts.
    • Register Divider in src/lib/json-ui/component-registry.tsx.
    • Add metadata/defaults to src/lib/component-definitions.ts.
    • Flip status to supported in json-components-registry.json.
  • ProgressBar
    • Add ProgressBar to ComponentType in src/types/json-ui.ts.
    • Register ProgressBar in src/lib/json-ui/component-registry.tsx.
    • Add metadata/defaults to src/lib/component-definitions.ts.
    • Flip status to supported in json-components-registry.json.

Navigation Components

  • Breadcrumb
    • Decide whether JSON should map to BreadcrumbNav (atoms) or Breadcrumb (molecules).
    • Align props and bindings to a single JSON-friendly surface.
    • Register a single Breadcrumb entry and set status to supported in json-components-registry.json.

Feedback Components

  • ErrorBadge
    • Add ErrorBadge to ComponentType in src/types/json-ui.ts.
    • Register ErrorBadge in src/lib/json-ui/component-registry.tsx.
    • Add metadata/defaults to src/lib/component-definitions.ts.
    • Flip status to supported in json-components-registry.json.
  • Notification
    • Add Notification to ComponentType in src/types/json-ui.ts.
    • Register Notification in src/lib/json-ui/component-registry.tsx.
    • Add metadata/defaults to src/lib/component-definitions.ts.
    • Flip status to supported in json-components-registry.json.
  • StatusIcon
    • Add StatusIcon to ComponentType in src/types/json-ui.ts.
    • Register StatusIcon in src/lib/json-ui/component-registry.tsx.
    • Add metadata/defaults to src/lib/component-definitions.ts.
    • Flip status to supported in json-components-registry.json.

Data Components

  • DataList
    • Add DataList to ComponentType in src/types/json-ui.ts.
    • Register DataList in src/lib/json-ui/component-registry.tsx.
    • Add metadata/defaults to src/lib/component-definitions.ts.
    • Flip status to supported in json-components-registry.json.
  • DataTable
    • Add DataTable to ComponentType in src/types/json-ui.ts.
    • Register DataTable in src/lib/json-ui/component-registry.tsx.
    • Add metadata/defaults to src/lib/component-definitions.ts.
    • Flip status to supported in json-components-registry.json.
  • MetricCard
    • Add MetricCard to ComponentType in src/types/json-ui.ts.
    • Register MetricCard in src/lib/json-ui/component-registry.tsx.
    • Add metadata/defaults to src/lib/component-definitions.ts.
    • Flip status to supported in json-components-registry.json.
  • Timeline
    • Add Timeline to ComponentType in src/types/json-ui.ts.
    • Register Timeline in src/lib/json-ui/component-registry.tsx.
    • Add metadata/defaults to src/lib/component-definitions.ts.
    • Flip status to supported in json-components-registry.json.

Framework Enablers

  • Event binding extensions
    • Expand event/action coverage to support richer interactions via JSON expressions.
    • Confirm compatibility with existing expression and valueTemplate handling.
  • State binding system
    • Add support for stateful bindings needed by interactive components.
    • Document and enforce which components require state binding.
  • JSON-friendly wrappers
    • Create wrapper components for hook-heavy/side-effect components.
    • Register wrappers in the JSON registry instead of direct usage.
  • Registry normalization
    • Resolve duplicate component entries (e.g., multiple Breadcrumb variants) in json-components-registry.json.
  • Showcase schema coverage
    • Add JSON schema examples for each newly supported component to keep demos current.