diff --git a/docs/JSON_COMPONENT_CONVERSION_TASKS.md b/docs/JSON_COMPONENT_CONVERSION_TASKS.md index f312ed4..c304dc4 100644 --- a/docs/JSON_COMPONENT_CONVERSION_TASKS.md +++ b/docs/JSON_COMPONENT_CONVERSION_TASKS.md @@ -2,6 +2,13 @@ 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 diff --git a/json-components-registry.json b/json-components-registry.json index 6794fef..5d4e5c8 100644 --- a/json-components-registry.json +++ b/json-components-registry.json @@ -2,7 +2,7 @@ "$schema": "./schemas/json-components-registry-schema.json", "version": "2.0.0", "description": "Registry of all components in the application", - "lastUpdated": "2026-01-18T12:05:00.000Z", + "lastUpdated": "2026-01-18T12:20:47.049Z", "categories": { "layout": "Layout and container components", "input": "Form inputs and interactive controls", @@ -40,15 +40,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "Card", - "name": "Card", - "category": "layout", - "canHaveChildren": true, - "description": "Container card with optional header, content, and footer", - "status": "supported", - "source": "ui" - }, { "type": "CodeExplanationDialog", "name": "CodeExplanationDialog", @@ -125,15 +116,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "Drawer", - "name": "Drawer", - "category": "layout", - "canHaveChildren": true, - "description": "Sliding panel overlay", - "status": "supported", - "source": "ui" - }, { "type": "Flex", "name": "Flex", @@ -170,15 +152,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "HoverCard", - "name": "HoverCard", - "category": "layout", - "canHaveChildren": true, - "description": "Card shown on hover", - "status": "supported", - "source": "ui" - }, { "type": "Modal", "name": "Modal", @@ -262,15 +235,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "Button", - "name": "Button", - "category": "input", - "canHaveChildren": true, - "description": "Interactive button element", - "status": "supported", - "source": "ui" - }, { "type": "ButtonGroup", "name": "ButtonGroup", @@ -289,15 +253,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "Checkbox", - "name": "Checkbox", - "category": "input", - "canHaveChildren": false, - "description": "Checkbox toggle control", - "status": "supported", - "source": "ui" - }, { "type": "ConfirmButton", "name": "ConfirmButton", @@ -352,15 +307,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "Form", - "name": "Form", - "category": "input", - "canHaveChildren": true, - "description": "Form container component", - "status": "supported", - "source": "ui" - }, { "type": "IconButton", "name": "IconButton", @@ -379,15 +325,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "Input", - "name": "Input", - "category": "input", - "canHaveChildren": false, - "description": "Text input field", - "status": "supported", - "source": "ui" - }, { "type": "InputOtp", "name": "InputOtp", @@ -460,15 +397,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "Select", - "name": "Select", - "category": "input", - "canHaveChildren": false, - "description": "Dropdown select control", - "status": "supported", - "source": "ui" - }, { "type": "Slider", "name": "Slider", @@ -478,24 +406,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "Slider", - "name": "Slider", - "category": "input", - "canHaveChildren": false, - "description": "Numeric range slider", - "status": "supported", - "source": "ui" - }, - { - "type": "Switch", - "name": "Switch", - "category": "input", - "canHaveChildren": false, - "description": "Toggle switch control", - "status": "supported", - "source": "atoms" - }, { "type": "Switch", "name": "Switch", @@ -503,7 +413,7 @@ "canHaveChildren": false, "description": "Toggle switch control", "status": "supported", - "source": "ui" + "source": "atoms" }, { "type": "TextArea", @@ -523,15 +433,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "Toggle", - "name": "Toggle", - "category": "input", - "canHaveChildren": true, - "description": "Toggle button control", - "status": "supported", - "source": "ui" - }, { "type": "ToggleGroup", "name": "ToggleGroup", @@ -569,15 +470,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "Avatar", - "name": "Avatar", - "category": "display", - "canHaveChildren": false, - "description": "User avatar image", - "status": "supported", - "source": "ui" - }, { "type": "AvatarGroup", "name": "AvatarGroup", @@ -596,15 +488,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "Badge", - "name": "Badge", - "category": "display", - "canHaveChildren": true, - "description": "Small status or count indicator", - "status": "supported", - "source": "ui" - }, { "type": "CircularProgress", "name": "CircularProgress", @@ -695,15 +578,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "Label", - "name": "Label", - "category": "display", - "canHaveChildren": true, - "description": "Form label element", - "status": "supported", - "source": "ui" - }, { "type": "Progress", "name": "Progress", @@ -741,15 +615,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "Separator", - "name": "Separator", - "category": "display", - "canHaveChildren": false, - "description": "Visual divider line", - "status": "supported", - "source": "ui" - }, { "type": "Skeleton", "name": "Skeleton", @@ -759,15 +624,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "Skeleton", - "name": "Skeleton", - "category": "display", - "canHaveChildren": false, - "description": "Loading skeleton placeholder", - "status": "supported", - "source": "ui" - }, { "type": "Spinner", "name": "Spinner", @@ -849,15 +705,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "ContextMenu", - "name": "ContextMenu", - "category": "navigation", - "canHaveChildren": true, - "description": "Right-click context menu", - "status": "supported", - "source": "ui" - }, { "type": "DropdownMenu", "name": "DropdownMenu", @@ -924,16 +771,6 @@ "source": "molecules", "jsonCompatible": true }, - { - "type": "NavigationMenu", - "name": "NavigationMenu", - "category": "navigation", - "canHaveChildren": true, - "description": "NavigationMenu component", - "status": "maybe-json-compatible", - "source": "organisms", - "jsonCompatible": true - }, { "type": "NavigationMenu", "name": "NavigationMenu", @@ -961,15 +798,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "Tabs", - "name": "Tabs", - "category": "navigation", - "canHaveChildren": true, - "description": "Tabbed interface container", - "status": "supported", - "source": "ui" - }, { "type": "Alert", "name": "Alert", @@ -979,15 +807,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "Alert", - "name": "Alert", - "category": "feedback", - "canHaveChildren": true, - "description": "Alert notification message", - "status": "supported", - "source": "ui" - }, { "type": "CountBadge", "name": "CountBadge", @@ -1044,16 +863,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "EmptyState", - "name": "EmptyState", - "category": "feedback", - "canHaveChildren": true, - "description": "Empty state placeholder", - "status": "maybe-json-compatible", - "source": "molecules", - "jsonCompatible": true - }, { "type": "EmptyStateIcon", "name": "EmptyStateIcon", @@ -1129,16 +938,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "LoadingState", - "name": "LoadingState", - "category": "feedback", - "canHaveChildren": true, - "description": "LoadingState component", - "status": "json-compatible", - "source": "molecules", - "jsonCompatible": true - }, { "type": "Notification", "name": "Notification", @@ -1316,16 +1115,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "StatCard", - "name": "StatCard", - "category": "data", - "canHaveChildren": false, - "description": "Statistic card display", - "status": "maybe-json-compatible", - "source": "molecules", - "jsonCompatible": true - }, { "type": "Table", "name": "Table", @@ -1335,15 +1124,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "Table", - "name": "Table", - "category": "data", - "canHaveChildren": false, - "description": "Data table", - "status": "supported", - "source": "ui" - }, { "type": "Timeline", "name": "Timeline", @@ -1382,15 +1162,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "Accordion", - "name": "Accordion", - "category": "custom", - "canHaveChildren": true, - "description": "Collapsible content sections", - "status": "supported", - "source": "ui" - }, { "type": "ActionBar", "name": "ActionBar", @@ -1467,15 +1238,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "Calendar", - "name": "Calendar", - "category": "custom", - "canHaveChildren": true, - "description": "Calendar date selector", - "status": "supported", - "source": "ui" - }, { "type": "CanvasRenderer", "name": "CanvasRenderer", @@ -1702,16 +1464,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "PageHeader", - "name": "PageHeader", - "category": "custom", - "canHaveChildren": true, - "description": "PageHeader component", - "status": "json-compatible", - "source": "organisms", - "jsonCompatible": true - }, { "type": "PageHeaderContent", "name": "PageHeaderContent", @@ -1749,15 +1501,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "Popover", - "name": "Popover", - "category": "custom", - "canHaveChildren": true, - "description": "Popover overlay content", - "status": "supported", - "source": "ui" - }, { "type": "PropertyEditor", "name": "PropertyEditor", @@ -1873,15 +1616,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "ScrollArea", - "name": "ScrollArea", - "category": "custom", - "canHaveChildren": true, - "description": "Scrollable container area", - "status": "supported", - "source": "ui" - }, { "type": "SearchBar", "name": "SearchBar", @@ -1901,16 +1635,6 @@ "status": "supported", "source": "atoms" }, - { - "type": "SearchInput", - "name": "SearchInput", - "category": "custom", - "canHaveChildren": false, - "description": "Search input with icon", - "status": "maybe-json-compatible", - "source": "molecules", - "jsonCompatible": true - }, { "type": "Sheet", "name": "Sheet", @@ -2011,15 +1735,6 @@ "description": "Tooltip overlay text", "status": "supported", "source": "atoms" - }, - { - "type": "Tooltip", - "name": "Tooltip", - "category": "custom", - "canHaveChildren": true, - "description": "Tooltip overlay text", - "status": "supported", - "source": "ui" } ], "statistics": {