Merge pull request #152 from johndoe6345789/codex/add-component-types-and-register-them

Support branding and navigation molecules in JSON UI

json-components-registry.json

@@ -787,7 +787,7 @@
       "category": "navigation",
       "canHaveChildren": true,
       "description": "NavigationGroupHeader component",
-      "status": "json-compatible",
+      "status": "supported",
       "source": "molecules",
       "jsonCompatible": true
     },
@@ -949,7 +949,7 @@
       "category": "feedback",
       "canHaveChildren": true,
       "description": "LabelWithBadge component",
-      "status": "json-compatible",
+      "status": "supported",
       "source": "molecules",
       "jsonCompatible": true
     },
@@ -1322,7 +1322,7 @@
       "category": "custom",
       "canHaveChildren": true,
       "description": "AppBranding component",
-      "status": "json-compatible",
+      "status": "supported",
       "source": "molecules",
       "jsonCompatible": true
     },

src/lib/component-definitions.json

@@ -294,6 +294,17 @@
     "icon": "Circle",
     "defaultProps": { "status": "active", "children": "Active" }
   },
+  {
+    "type": "LabelWithBadge",
+    "label": "Label With Badge",
+    "category": "feedback",
+    "icon": "Tag",
+    "defaultProps": {
+      "label": "Total Items",
+      "badge": 24,
+      "badgeVariant": "secondary"
+    }
+  },
   {
     "type": "ErrorBadge",
     "label": "Error Badge",
@@ -795,6 +806,17 @@
       "errorCount": 0
     }
   },
+  {
+    "type": "NavigationGroupHeader",
+    "label": "Navigation Group Header",
+    "category": "navigation",
+    "icon": "CaretDown",
+    "defaultProps": {
+      "label": "Components",
+      "count": 12,
+      "isExpanded": true
+    }
+  },
   {
     "type": "EmptyCanvasState",
     "label": "Empty Canvas State",
@@ -841,6 +863,16 @@
       "selectedTreeId": null
     }
   },
+  {
+    "type": "AppBranding",
+    "label": "App Branding",
+    "category": "custom",
+    "icon": "Layout",
+    "defaultProps": {
+      "title": "CodeForge",
+      "subtitle": "Low-Code Next.js App Builder"
+    }
+  },
   {
     "type": "AppHeader",
     "label": "App Header",

src/lib/json-ui/component-registry.ts

@@ -194,10 +194,15 @@ if (breadcrumbComponent) {
   atomComponents.Breadcrumb = breadcrumbComponent as ComponentType<any>
 }
 
-export const moleculeComponents: UIComponentRegistry = buildRegistryFromNames(
-  moleculeRegistryNames,
-  MoleculeComponents as Record<string, ComponentType<any>>
-)
+export const moleculeComponents: UIComponentRegistry = {
+  ...buildRegistryFromNames(
+    moleculeRegistryNames,
+    MoleculeComponents as Record<string, ComponentType<any>>
+  ),
+  AppBranding: (MoleculeComponents as Record<string, ComponentType<any>>).AppBranding,
+  LabelWithBadge: (MoleculeComponents as Record<string, ComponentType<any>>).LabelWithBadge,
+  NavigationGroupHeader: (MoleculeComponents as Record<string, ComponentType<any>>).NavigationGroupHeader,
+}
 
 export const organismComponents: UIComponentRegistry = buildRegistryFromNames(
   organismRegistryNames,

src/schemas/new-molecules-showcase.json

@@ -115,6 +115,7 @@
                 {
                   "id": "branding-content",
                   "type": "CardContent",
+                  "props": { "className": "space-y-4" },
                   "children": [
                     {
                       "id": "branding-demo",
@@ -123,6 +124,10 @@
                         "title": { "source": "appTitle" },
                         "subtitle": { "source": "appSubtitle" }
                       }
+                    },
+                    {
+                      "id": "branding-demo-default",
+                      "type": "AppBranding"
                     }
                   ]
                 }
@@ -335,6 +340,7 @@
                 {
                   "id": "nav-header-content",
                   "type": "CardContent",
+                  "props": { "className": "space-y-2" },
                   "children": [
                     {
                       "id": "nav-header-demo",
@@ -344,6 +350,15 @@
                         "count": { "source": "navGroup", "path": "count" },
                         "isExpanded": { "source": "navGroup", "path": "isExpanded" }
                       }
+                    },
+                    {
+                      "id": "nav-header-demo-collapsed",
+                      "type": "NavigationGroupHeader",
+                      "props": {
+                        "label": "Workflows",
+                        "count": 6,
+                        "isExpanded": false
+                      }
                     }
                   ]
                 }

src/types/json-ui.ts

@@ -13,7 +13,7 @@ export type ComponentType =
   | 'DataList' | 'DataTable' | 'MetricCard' | 'Timeline'
   | 'LazyBarChart' | 'LazyLineChart' | 'LazyD3BarChart' | 'SeedDataManager'
   | 'SaveIndicator' | 'StorageSettings'
-  | 'AppBranding' | 'LabelWithBadge' | 'EmptyEditorState' | 'LoadingFallback' | 'LoadingState' | 'NavigationGroupHeader'
+  | 'AppBranding' | 'LabelWithBadge' | 'NavigationGroupHeader' | 'EmptyEditorState' | 'LoadingFallback' | 'LoadingState'
   | 'CodeExplanationDialog' | 'ComponentBindingDialog' | 'DataSourceCard' | 'DataSourceEditorDialog' | 'TreeCard' | 'TreeFormDialog'
   | 'ToolbarButton'
   | 'SchemaCodeViewer'