Add JSON UI support for data atoms

src/components/JSONUIShowcasePage.tsx

@@ -3,6 +3,7 @@ import { AtomicComponentDemo } from '@/components/AtomicComponentDemo'
 import { DashboardDemoPage } from '@/components/DashboardDemoPage'
 import { PageRenderer } from '@/lib/json-ui/page-renderer'
 import { hydrateSchema } from '@/schemas/schema-loader'
+import { dataComponentsDemoSchema } from '@/schemas/page-schemas'
 import todoListJson from '@/schemas/todo-list.json'
 import newMoleculesShowcaseJson from '@/schemas/new-molecules-showcase.json'
 
@@ -25,6 +26,7 @@ export function JSONUIShowcasePage() {
           <TabsList className="w-full justify-start">
             <TabsTrigger value="atomic">Atomic Components</TabsTrigger>
             <TabsTrigger value="molecules">New Molecules</TabsTrigger>
+            <TabsTrigger value="data-components">Data Components</TabsTrigger>
             <TabsTrigger value="dashboard">JSON Dashboard</TabsTrigger>
             <TabsTrigger value="todos">JSON Todo List</TabsTrigger>
           </TabsList>
@@ -38,6 +40,10 @@ export function JSONUIShowcasePage() {
           <TabsContent value="molecules" className="h-full m-0 data-[state=active]:block">
             <PageRenderer schema={newMoleculesShowcaseSchema} />
           </TabsContent>
+
+          <TabsContent value="data-components" className="h-full m-0 data-[state=active]:block">
+            <PageRenderer schema={dataComponentsDemoSchema} />
+          </TabsContent>
           
           <TabsContent value="dashboard" className="h-full m-0 data-[state=active]:block">
             <DashboardDemoPage />

src/components/atoms/DataList.tsx

@@ -3,10 +3,11 @@ import { cn } from '@/lib/utils'
 
 export interface DataListProps {
   items: any[]
-  renderItem: (item: any, index: number) => ReactNode
+  renderItem?: (item: any, index: number) => ReactNode
   emptyMessage?: string
   className?: string
   itemClassName?: string
+  itemKey?: string
 }
 
 export function DataList({
@@ -15,6 +16,7 @@ export function DataList({
   emptyMessage = 'No items',
   className,
   itemClassName,
+  itemKey,
 }: DataListProps) {
   if (items.length === 0) {
     return (
@@ -24,11 +26,28 @@ export function DataList({
     )
   }
 
+  const renderFallbackItem = (item: any) => {
+    if (itemKey && item && typeof item === 'object') {
+      const value = item[itemKey]
+      if (value !== undefined && value !== null) {
+        return typeof value === 'string' || typeof value === 'number'
+          ? value
+          : JSON.stringify(value)
+      }
+    }
+
+    if (typeof item === 'string' || typeof item === 'number') {
+      return item
+    }
+
+    return JSON.stringify(item)
+  }
+
   return (
     <div className={cn('space-y-2', className)}>
       {items.map((item, index) => (
         <div key={index} className={cn('transition-colors', itemClassName)}>
-          {renderItem(item, index)}
+          {renderItem ? renderItem(item, index) : renderFallbackItem(item)}
         </div>
       ))}
     </div>