Merge pull request #117 from johndoe6345789/codex/integrate-breadcrumb-component-into-json

Add JSON Breadcrumb support (map to atoms/BreadcrumbNav)

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-17T22:10:22.582Z",
+  "lastUpdated": "2026-01-18T11:30:24.191Z",
   "categories": {
     "layout": "Layout and container components",
     "input": "Form inputs and interactive controls",
@@ -836,29 +836,10 @@
       "name": "Breadcrumb",
       "category": "navigation",
       "canHaveChildren": false,
-      "description": "Navigation breadcrumb trail",
-      "status": "planned",
+      "description": "Navigation breadcrumb trail using the atoms/BreadcrumbNav JSON-safe items prop",
+      "status": "supported",
       "source": "atoms"
     },
-    {
-      "type": "Breadcrumb",
-      "name": "Breadcrumb",
-      "category": "navigation",
-      "canHaveChildren": false,
-      "description": "Navigation breadcrumb trail",
-      "status": "json-compatible",
-      "source": "molecules",
-      "jsonCompatible": true
-    },
-    {
-      "type": "Breadcrumb",
-      "name": "Breadcrumb",
-      "category": "navigation",
-      "canHaveChildren": false,
-      "description": "Navigation breadcrumb trail",
-      "status": "planned",
-      "source": "ui"
-    },
     {
       "type": "ContextMenu",
       "name": "ContextMenu",
@@ -2051,16 +2032,16 @@
       "layout": 25,
       "input": 34,
       "display": 31,
-      "navigation": 17,
+      "navigation": 15,
       "feedback": 23,
       "data": 20,
       "custom": 69
     },
     "bySource": {
       "atoms": 117,
-      "molecules": 41,
+      "molecules": 40,
       "organisms": 15,
-      "ui": 46
+      "ui": 45
     }
   }
 }

src/components/atoms/Breadcrumb.tsx

@@ -17,19 +17,19 @@ export function BreadcrumbNav({ items, className }: BreadcrumbNavProps) {
     <nav aria-label="Breadcrumb" className={cn('flex items-center gap-2', className)}>
       {items.map((item, index) => {
         const isLast = index === items.length - 1
+        const linkClassName = cn(
+          'text-sm transition-colors',
+          isLast ? 'text-foreground font-medium' : 'text-muted-foreground hover:text-foreground'
+        )
 
         return (
           <div key={index} className="flex items-center gap-2">
-            {item.href || item.onClick ? (
-              <button
-                onClick={item.onClick}
-                className={cn(
-                  'text-sm transition-colors',
-                  isLast
-                    ? 'text-foreground font-medium'
-                    : 'text-muted-foreground hover:text-foreground'
-                )}
-              >
+            {item.href ? (
+              <a href={item.href} onClick={item.onClick} className={linkClassName}>
+                {item.label}
+              </a>
+            ) : item.onClick ? (
+              <button onClick={item.onClick} className={linkClassName}>
                 {item.label}
               </button>
             ) : (
@@ -49,3 +49,5 @@ export function BreadcrumbNav({ items, className }: BreadcrumbNavProps) {
     </nav>
   )
 }
+
+export const Breadcrumb = BreadcrumbNav

src/components/atoms/index.ts

@@ -54,7 +54,7 @@ export { Timestamp } from './Timestamp'
 export { ScrollArea } from './ScrollArea'
 
 export { Tag } from './Tag'
-export { BreadcrumbNav } from './Breadcrumb'
+export { Breadcrumb, BreadcrumbNav } from './Breadcrumb'
 export { IconText } from './IconText'
 export { TextArea } from './TextArea'
 export { Input } from './Input'
@@ -118,4 +118,3 @@ export { MetricDisplay } from './MetricDisplay'
 export { KeyValue } from './KeyValue'
 export { EmptyMessage } from './EmptyMessage'
 export { StepIndicator } from './StepIndicator'
-

src/lib/component-definitions.ts

@@ -241,6 +241,19 @@ export const componentDefinitions: ComponentDefinition[] = [
     canHaveChildren: true,
     defaultProps: { href: '#', children: 'Link' }
   },
+  {
+    type: 'Breadcrumb',
+    label: 'Breadcrumb',
+    category: 'navigation',
+    icon: 'CaretRight',
+    canHaveChildren: false,
+    defaultProps: {
+      items: [
+        { label: 'Home', href: '/' },
+        { label: 'Current' }
+      ]
+    }
+  },
   // Feedback Components
   {
     type: 'Alert',

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

@@ -147,6 +147,11 @@ export const atomComponents: UIComponentRegistry = {
   Timeline: (AtomComponents as Record<string, ComponentType<any>>).Timeline,
 }
 
+const breadcrumbComponent = AtomComponents.Breadcrumb ?? AtomComponents.BreadcrumbNav
+if (breadcrumbComponent) {
+  atomComponents.Breadcrumb = breadcrumbComponent as ComponentType<any>
+}
+
 export const moleculeComponents: UIComponentRegistry = buildRegistryFromNames(
   moleculeRegistryNames,
   MoleculeComponents as Record<string, ComponentType<any>>

src/types/json-ui.ts

@@ -4,7 +4,7 @@ export type ComponentType =
   | 'Input' | 'TextArea' | 'Textarea' | 'Select' | 'Checkbox' | 'Radio' | 'Switch' | 'Slider' | 'NumberInput'
   | 'Badge' | 'Progress' | 'Separator' | 'Tabs' | 'TabsContent' | 'TabsList' | 'TabsTrigger' | 'Dialog'
   | 'Text' | 'Heading' | 'Label' | 'List' | 'Grid' | 'Stack' | 'Flex' | 'Container'
-  | 'Link' | 'Image' | 'Avatar' | 'Code' | 'Tag' | 'Spinner' | 'Skeleton'
+  | 'Link' | 'Breadcrumb' | 'Image' | 'Avatar' | 'Code' | 'Tag' | 'Spinner' | 'Skeleton'
   | 'Alert' | 'InfoBox' | 'EmptyState' | 'StatusBadge' 
   | 'ErrorBadge' | 'Notification' | 'StatusIcon'
   | 'Table' | 'KeyValue' | 'StatCard' | 'DataCard' | 'SearchInput' | 'ActionBar'