From 0514e61000ab82ba2e8bd0fedd60eb0b8abf959a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 18 Jan 2026 23:13:00 +0000
Subject: [PATCH] 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             |  4 +--
 src/lib/json-ui/create-json-component.tsx     | 19 +++++++++++
 src/lib/json-ui/interfaces/index.ts           |  3 ++
 .../json-ui/interfaces/loading-fallback.ts    |  3 ++
 src/lib/json-ui/interfaces/navigation-item.ts |  7 ++++
 .../json-ui/interfaces/page-header-content.ts |  5 +++
 src/lib/json-ui/json-components.ts            | 16 +++++++++
 .../wrappers/LoadingFallbackWrapper.tsx       | 16 ---------
 .../wrappers/NavigationItemWrapper.tsx        | 27 ---------------
 .../wrappers/PageHeaderContentWrapper.tsx     | 22 -------------
 src/lib/json-ui/wrappers/TreeCardWrapper.tsx  | 33 -------------------
 src/lib/json-ui/wrappers/index.ts             |  5 ++-
 12 files changed, 56 insertions(+), 104 deletions(-)
 create mode 100644 src/lib/json-ui/create-json-component.tsx
 create mode 100644 src/lib/json-ui/interfaces/index.ts
 create mode 100644 src/lib/json-ui/interfaces/loading-fallback.ts
 create mode 100644 src/lib/json-ui/interfaces/navigation-item.ts
 create mode 100644 src/lib/json-ui/interfaces/page-header-content.ts
 create mode 100644 src/lib/json-ui/json-components.ts
 delete mode 100644 src/lib/json-ui/wrappers/LoadingFallbackWrapper.tsx
 delete mode 100644 src/lib/json-ui/wrappers/NavigationItemWrapper.tsx
 delete mode 100644 src/lib/json-ui/wrappers/PageHeaderContentWrapper.tsx
 delete mode 100644 src/lib/json-ui/wrappers/TreeCardWrapper.tsx

diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
index 92926f1..fb5fa7a 100644
--- a/src/components/molecules/index.ts
+++ b/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'
diff --git a/src/lib/json-ui/create-json-component.tsx b/src/lib/json-ui/create-json-component.tsx
new file mode 100644
index 0000000..6932fcf
--- /dev/null
+++ b/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={{}}
+      />
+    )
+  }
+}
diff --git a/src/lib/json-ui/interfaces/index.ts b/src/lib/json-ui/interfaces/index.ts
new file mode 100644
index 0000000..feee993
--- /dev/null
+++ b/src/lib/json-ui/interfaces/index.ts
@@ -0,0 +1,3 @@
+export * from './loading-fallback'
+export * from './navigation-item'
+export * from './page-header-content'
diff --git a/src/lib/json-ui/interfaces/loading-fallback.ts b/src/lib/json-ui/interfaces/loading-fallback.ts
new file mode 100644
index 0000000..96f4ffe
--- /dev/null
+++ b/src/lib/json-ui/interfaces/loading-fallback.ts
@@ -0,0 +1,3 @@
+export interface LoadingFallbackProps {
+  message?: string
+}
diff --git a/src/lib/json-ui/interfaces/navigation-item.ts b/src/lib/json-ui/interfaces/navigation-item.ts
new file mode 100644
index 0000000..d10e615
--- /dev/null
+++ b/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
+}
diff --git a/src/lib/json-ui/interfaces/page-header-content.ts b/src/lib/json-ui/interfaces/page-header-content.ts
new file mode 100644
index 0000000..6e7a6cc
--- /dev/null
+++ b/src/lib/json-ui/interfaces/page-header-content.ts
@@ -0,0 +1,5 @@
+export interface PageHeaderContentProps {
+  title: string
+  icon: React.ReactNode
+  description?: string
+}
diff --git a/src/lib/json-ui/json-components.ts b/src/lib/json-ui/json-components.ts
new file mode 100644
index 0000000..3e96778
--- /dev/null
+++ b/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)
diff --git a/src/lib/json-ui/wrappers/LoadingFallbackWrapper.tsx b/src/lib/json-ui/wrappers/LoadingFallbackWrapper.tsx
deleted file mode 100644
index caa2251..0000000
--- a/src/lib/json-ui/wrappers/LoadingFallbackWrapper.tsx
+++ /dev/null
@@ -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={{}}
-    />
-  )
-}
diff --git a/src/lib/json-ui/wrappers/NavigationItemWrapper.tsx b/src/lib/json-ui/wrappers/NavigationItemWrapper.tsx
deleted file mode 100644
index 6746b54..0000000
--- a/src/lib/json-ui/wrappers/NavigationItemWrapper.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/src/lib/json-ui/wrappers/PageHeaderContentWrapper.tsx b/src/lib/json-ui/wrappers/PageHeaderContentWrapper.tsx
deleted file mode 100644
index bd68fd0..0000000
--- a/src/lib/json-ui/wrappers/PageHeaderContentWrapper.tsx
+++ /dev/null
@@ -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={{}}
-    />
-  )
-}
diff --git a/src/lib/json-ui/wrappers/TreeCardWrapper.tsx b/src/lib/json-ui/wrappers/TreeCardWrapper.tsx
deleted file mode 100644
index b64409e..0000000
--- a/src/lib/json-ui/wrappers/TreeCardWrapper.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/src/lib/json-ui/wrappers/index.ts b/src/lib/json-ui/wrappers/index.ts
index 9159f8d..9fc8d3a 100644
--- a/src/lib/json-ui/wrappers/index.ts
+++ b/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