low-code-react-app-b/docs/JSON_COMPONENT_CONVERSION_TASKS.md

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.