Mark breadcrumb as JSON compatible

json-components-registry.json

@@ -698,7 +698,8 @@
       "canHaveChildren": false,
       "description": "Navigation breadcrumb trail using the atoms/BreadcrumbNav JSON-safe items prop",
       "status": "supported",
-      "source": "atoms"
+      "source": "atoms",
+      "jsonCompatible": true
     },
     {
       "type": "ContextMenu",

src/components/atoms/Breadcrumb.tsx

@@ -8,11 +8,11 @@ interface BreadcrumbItem {
 }
 
 interface BreadcrumbNavProps {
-  items: BreadcrumbItem[]
+  items?: BreadcrumbItem[]
   className?: string
 }
 
-export function BreadcrumbNav({ items, className }: BreadcrumbNavProps) {
+export function BreadcrumbNav({ items = [], className }: BreadcrumbNavProps) {
   return (
     <nav aria-label="Breadcrumb" className={cn('flex items-center gap-2', className)}>
       {items.map((item, index) => {

src/lib/component-definition-utils.ts

@@ -1,8 +1,6 @@
-import componentDefinitionsData from '@/lib/component-definitions.json'
 import { ComponentDefinition } from '@/lib/component-definition-types'
 import { ComponentType } from '@/types/json-ui'
-
-export const componentDefinitions = componentDefinitionsData as ComponentDefinition[]
+import { componentDefinitions } from '@/lib/component-definitions'
 
 export function getCategoryComponents(category: string): ComponentDefinition[] {
   return componentDefinitions.filter(c => c.category === category)

src/lib/component-definitions-utils.ts

@@ -1,5 +1,5 @@
 import { ComponentType } from '@/types/json-ui'
-import componentDefinitionsData from '@/lib/component-definitions.json'
+import { componentDefinitions } from '@/lib/component-definitions'
 
 export interface ComponentDefinition {
   type: ComponentType
@@ -10,8 +10,6 @@ export interface ComponentDefinition {
   canHaveChildren?: boolean
 }
 
-export const componentDefinitions = componentDefinitionsData as ComponentDefinition[]
-
 export function getCategoryComponents(category: string): ComponentDefinition[] {
   return componentDefinitions.filter(component => component.category === category)
 }

src/lib/component-definitions.ts

@@ -0,0 +1,30 @@
+import componentDefinitionsData from '@/lib/component-definitions.json'
+import type { ComponentDefinition } from '@/lib/component-definition-types'
+
+export const componentDefinitions = (componentDefinitionsData as ComponentDefinition[]).map(
+  (definition) => {
+    if (definition.type !== 'Breadcrumb') {
+      return definition
+    }
+
+    return {
+      ...definition,
+      props: [
+        {
+          name: 'items',
+          type: 'BreadcrumbItem[]',
+          description: 'Breadcrumb items with labels and optional hrefs.',
+          supportsBinding: true,
+        },
+        {
+          name: 'className',
+          type: 'string',
+          description: 'Optional class names for the breadcrumb container.',
+          supportsBinding: true,
+        },
+      ],
+    }
+  }
+)
+
+export default componentDefinitions

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

@@ -21,7 +21,6 @@ import * as AtomComponents from '@/components/atoms'
 import * as MoleculeComponents from '@/components/molecules'
 import * as OrganismComponents from '@/components/organisms'
 import {
-  BreadcrumbWrapper,
   LazyBarChartWrapper,
   LazyD3BarChartWrapper,
   LazyLineChartWrapper,
@@ -197,7 +196,6 @@ export const organismComponents: UIComponentRegistry = buildRegistryFromNames(
 )
 
 export const jsonWrapperComponents: UIComponentRegistry = {
-  Breadcrumb: BreadcrumbWrapper,
   SaveIndicator: SaveIndicatorWrapper,
   LazyBarChart: LazyBarChartWrapper,
   LazyLineChart: LazyLineChartWrapper,

src/lib/json-ui/wrappers/BreadcrumbWrapper.tsx

@@ -1,11 +0,0 @@
-import { BreadcrumbNav } from '@/components/atoms'
-import { cn } from '@/lib/utils'
-import type { BreadcrumbWrapperProps } from './interfaces'
-
-export function BreadcrumbWrapper({ items = [], className }: BreadcrumbWrapperProps) {
-  if (items.length === 0) {
-    return null
-  }
-
-  return <BreadcrumbNav items={items} className={cn('flex items-center', className)} />
-}

src/lib/json-ui/wrappers/index.ts

@@ -1,4 +1,3 @@
-export { BreadcrumbWrapper } from './BreadcrumbWrapper'
 export { SaveIndicatorWrapper } from './SaveIndicatorWrapper'
 export { LazyBarChartWrapper } from './LazyBarChartWrapper'
 export { LazyLineChartWrapper } from './LazyLineChartWrapper'

src/lib/json-ui/wrappers/interfaces.ts

@@ -1,15 +1,5 @@
 import type { StorageBackendKey } from '@/components/storage/storageSettingsConfig'
 
-export interface BreadcrumbItem {
-  label: string
-  href?: string
-}
-
-export interface BreadcrumbWrapperProps {
-  items?: BreadcrumbItem[]
-  className?: string
-}
-
 export type SaveIndicatorStatus = 'saved' | 'synced'
 
 export interface SaveIndicatorWrapperProps {

src/types/json-ui.ts

@@ -25,6 +25,16 @@ export type ComponentType =
   | 'PageHeaderContent' | 'PropertyEditor' | 'SchemaEditorCanvas' | 'SchemaEditorLayout'
   | 'SchemaEditorPropertiesPanel' | 'SchemaEditorSidebar' | 'SchemaEditorToolbar' | 'SearchBar' | 'ToolbarActions'
 
+export interface BreadcrumbItem {
+  label: string
+  href?: string
+}
+
+export interface BreadcrumbProps {
+  items?: BreadcrumbItem[]
+  className?: string
+}
+
 export type ActionType =
   | 'create' | 'update' | 'delete' | 'navigate'
   | 'show-toast' | 'open-dialog' | 'close-dialog'