Align JSON UI binding transforms

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

@@ -1,6 +1,7 @@
 import { createElement, useMemo } from 'react'
 import { UIComponent, Binding, ComponentRendererProps } from '@/types/json-ui'
 import { getUIComponent } from './component-registry'
+import { transformData } from './utils'
 
 function resolveBinding(binding: Binding, data: Record<string, unknown>): unknown {
   let value: unknown = data[binding.source]
@@ -18,7 +19,9 @@ function resolveBinding(binding: Binding, data: Record<string, unknown>): unknow
   }
   
   if (binding.transform) {
-    value = binding.transform(value)
+    value = typeof binding.transform === 'string'
+      ? transformData(value, binding.transform)
+      : binding.transform(value)
   }
   
   return value

src/lib/json-ui/renderer.tsx

@@ -86,6 +86,12 @@ export function JSONUIRenderer({
 
   const props: Record<string, any> = { ...component.props }
 
+  if (component.bindings) {
+    Object.entries(component.bindings).forEach(([propName, binding]) => {
+      props[propName] = resolveDataBinding(binding, dataMap, context)
+    })
+  }
+
   if (component.dataBinding) {
     const boundData = resolveDataBinding(component.dataBinding, dataMap, context)
     if (boundData !== undefined) {

src/lib/json-ui/schema.ts

@@ -33,6 +33,7 @@ export const UIComponentSchema: any = z.object({
   props: z.record(z.string(), z.any()).optional(),
   className: z.string().optional(),
   style: z.record(z.string(), z.any()).optional(),
+  bindings: z.record(z.string(), DataBindingSchema).optional(),
   children: z.union([
     z.string(),
     z.array(z.lazy(() => UIComponentSchema)),

src/types/json-ui.ts

@@ -48,7 +48,7 @@ export interface Action {
 export interface Binding {
   source: string
   path?: string
-  transform?: (value: any) => any
+  transform?: string | ((value: any) => any)
 }
 
 export interface EventHandler {