feat: Remove wrapper system, implement pure JSON components

- Created src/lib/json-ui/interfaces/ folder for component interfaces
- Created createJsonComponent() helper for pure JSON component creation
- Deleted wrapper TypeScript files (LoadingFallbackWrapper, NavigationItemWrapper, PageHeaderContentWrapper, TreeCardWrapper)
- Components now export directly from JSON definitions via json-components.ts
- No more wrapper layer - components are pure JSON with separate interface definitions
- Architecture simplified: JSON definition + interface = component

Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>

src/components/molecules/index.ts

@@ -20,7 +20,5 @@ export { DataSourceEditorDialog } from './DataSourceEditorDialog'
 export { ComponentBindingDialog } from './ComponentBindingDialog'
 export { TreeCard } from './TreeCard'
 export { TreeListHeader } from './TreeListHeader'
-export { LoadingFallbackWrapper as LoadingFallback } from '@/lib/json-ui/wrappers'
-export { NavigationItemWrapper as NavigationItem } from '@/lib/json-ui/wrappers'
-export { PageHeaderContentWrapper as PageHeaderContent } from '@/lib/json-ui/wrappers'
+export { LoadingFallback, NavigationItem, PageHeaderContent } from '@/lib/json-ui/json-components'
 export { preloadMonacoEditor } from './LazyMonacoEditor'

src/lib/json-ui/create-json-component.tsx

@@ -0,0 +1,19 @@
+import { ComponentRenderer } from './component-renderer'
+
+/**
+ * Creates a React component from a JSON definition
+ * This eliminates the need for wrapper files - components are pure JSON
+ */
+export function createJsonComponent<TProps = any>(
+  jsonDefinition: any
+) {
+  return function JsonComponent(props: TProps) {
+    return (
+      <ComponentRenderer
+        component={jsonDefinition}
+        data={props}
+        context={{}}
+      />
+    )
+  }
+}

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

@@ -0,0 +1,3 @@
+export * from './loading-fallback'
+export * from './navigation-item'
+export * from './page-header-content'

src/lib/json-ui/interfaces/loading-fallback.ts

@@ -0,0 +1,3 @@
+export interface LoadingFallbackProps {
+  message?: string
+}

src/lib/json-ui/interfaces/navigation-item.ts

@@ -0,0 +1,7 @@
+export interface NavigationItemProps {
+  icon: React.ReactNode
+  label: string
+  isActive: boolean
+  badge?: number
+  onClick: () => void
+}

src/lib/json-ui/interfaces/page-header-content.ts

@@ -0,0 +1,5 @@
+export interface PageHeaderContentProps {
+  title: string
+  icon: React.ReactNode
+  description?: string
+}

src/lib/json-ui/json-components.ts

@@ -0,0 +1,16 @@
+/**
+ * Pure JSON components - no TypeScript wrappers needed
+ * Interfaces are defined in src/lib/json-ui/interfaces/
+ */
+import { createJsonComponent } from './create-json-component'
+import type { LoadingFallbackProps } from './interfaces/loading-fallback'
+import type { NavigationItemProps } from './interfaces/navigation-item'
+import type { PageHeaderContentProps } from './interfaces/page-header-content'
+
+import loadingFallbackDef from './wrappers/definitions/loading-fallback.json'
+import navigationItemDef from './wrappers/definitions/navigation-item.json'
+import pageHeaderContentDef from './wrappers/definitions/page-header-content.json'
+
+export const LoadingFallback = createJsonComponent<LoadingFallbackProps>(loadingFallbackDef)
+export const NavigationItem = createJsonComponent<NavigationItemProps>(navigationItemDef)
+export const PageHeaderContent = createJsonComponent<PageHeaderContentProps>(pageHeaderContentDef)

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

@@ -1,16 +0,0 @@
-import { ComponentRenderer } from '@/lib/json-ui/component-renderer'
-import loadingFallbackDef from './definitions/loading-fallback.json'
-
-interface LoadingFallbackWrapperProps {
-  message?: string
-}
-
-export function LoadingFallbackWrapper({ message = 'Loading...' }: LoadingFallbackWrapperProps) {
-  return (
-    <ComponentRenderer
-      component={loadingFallbackDef}
-      data={{ message }}
-      context={{}}
-    />
-  )
-}

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

@@ -1,27 +0,0 @@
-import { ComponentRenderer } from '@/lib/json-ui/component-renderer'
-import navigationItemDef from './definitions/navigation-item.json'
-
-interface NavigationItemWrapperProps {
-  icon: React.ReactNode
-  label: string
-  isActive: boolean
-  badge?: number
-  onClick: () => void
-}
-
-export function NavigationItemWrapper(props: NavigationItemWrapperProps) {
-  return (
-    <div onClick={props.onClick}>
-      <ComponentRenderer
-        component={navigationItemDef}
-        data={{
-          icon: props.icon,
-          label: props.label,
-          isActive: props.isActive,
-          badge: props.badge
-        }}
-        context={{}}
-      />
-    </div>
-  )
-}

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

@@ -1,22 +0,0 @@
-import { ComponentRenderer } from '@/lib/json-ui/component-renderer'
-import pageHeaderContentDef from './definitions/page-header-content.json'
-
-interface PageHeaderContentWrapperProps {
-  title: string
-  icon: React.ReactNode
-  description?: string
-}
-
-export function PageHeaderContentWrapper(props: PageHeaderContentWrapperProps) {
-  return (
-    <ComponentRenderer
-      component={pageHeaderContentDef}
-      data={{
-        title: props.title,
-        icon: props.icon,
-        description: props.description
-      }}
-      context={{}}
-    />
-  )
-}

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

@@ -1,33 +0,0 @@
-import { ComponentRenderer } from '@/lib/json-ui/component-renderer'
-import treeCardDefinition from './definitions/tree-card.json'
-import { ComponentTree } from '@/types/project'
-
-interface TreeCardWrapperProps {
-  tree: ComponentTree
-  isSelected: boolean
-  onSelect: () => void
-  onEdit: () => void
-  onDuplicate: () => void
-  onDelete: () => void
-  disableDelete?: boolean
-}
-
-export function TreeCardWrapper(props: TreeCardWrapperProps) {
-  return (
-    <div onClick={props.onSelect}>
-      <ComponentRenderer
-        component={treeCardDefinition}
-        data={{
-          tree: props.tree,
-          isSelected: props.isSelected
-        }}
-        context={{}}
-      />
-      <div className="flex gap-xs mt-2" onClick={(e) => e.stopPropagation()}>
-        <button onClick={props.onEdit} className="px-2 py-1 text-xs hover:bg-muted rounded">Edit</button>
-        <button onClick={props.onDuplicate} className="px-2 py-1 text-xs hover:bg-muted rounded">Duplicate</button>
-        <button onClick={props.onDelete} disabled={props.disableDelete} className="px-2 py-1 text-xs hover:bg-muted rounded disabled:opacity-50">Delete</button>
-      </div>
-    </div>
-  )
-}

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

@@ -8,6 +8,5 @@ export { GitHubBuildStatusWrapper } from './GitHubBuildStatusWrapper'
 export { ComponentBindingDialogWrapper } from './ComponentBindingDialogWrapper'
 export { DataSourceEditorDialogWrapper } from './DataSourceEditorDialogWrapper'
 export { ComponentTreeWrapper } from './ComponentTreeWrapper'
-export { LoadingFallbackWrapper } from './LoadingFallbackWrapper'
-export { NavigationItemWrapper } from './NavigationItemWrapper'
-export { PageHeaderContentWrapper } from './PageHeaderContentWrapper'
+// LoadingFallbackWrapper, NavigationItemWrapper, PageHeaderContentWrapper removed
+// These are now pure JSON components exported from @/lib/json-ui/json-components