feat: enhance list, tree-view, and various field components with data binding support and improved styling

hotlong · hotlong · commit e5e899dc804f · 2026-02-02T04:18:57.000+08:00
diff --git a/packages/components/src/renderers/data-display/list.tsx b/packages/components/src/renderers/data-display/list.tsx
@@ -6,71 +6,45 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { ComponentRegistry } from '@object-ui/core';
+import compact from 'lodash/compact';
 import { ComponentRegistry } from '@object-ui/core';
 import type { ListSchema } from '@object-ui/types';
+import { useDataScope } from '@object-ui/react';
 import { renderChildren } from '../../lib/utils';
 import { cn } from '../../lib/utils';
-import { ChevronRight, Hexagon, Terminal } from 'lucide-react';
 
 ComponentRegistry.register('list', 
   ({ schema, className, ...props }: { schema: ListSchema; className?: string; [key: string]: any }) => {
-    // We use 'ul' for both to control semantics manually with visuals
-    const ListTag = 'ul';
+    // Support data binding
+    const boundData = useDataScope(schema.bind);
+    const items = boundData || schema.items || [];
     
-    return (
-      <div className={cn("relative p-4 rounded-lg bg-slate-950/30 border border-slate-800/50 backdrop-blur-sm", schema.wrapperClass)}>
-        {/* Decorative corner accents for container */}
-        <div className="absolute top-0 left-0 w-2 h-2 border-l-2 border-t-2 border-cyan-500/50 rounded-tl-sm" />
-        <div className="absolute top-0 right-0 w-2 h-2 border-r-2 border-t-2 border-cyan-500/50 rounded-tr-sm" />
-        <div className="absolute bottom-0 left-0 w-2 h-2 border-l-2 border-b-2 border-cyan-500/50 rounded-bl-sm" />
-        <div className="absolute bottom-0 right-0 w-2 h-2 border-r-2 border-b-2 border-cyan-500/50 rounded-br-sm" />
+    // We use 'ol' or 'ul' based on ordered prop
+    const ListTag = schema.ordered ? 'ol' : 'ul';
+    
+    // Default styles for ordered/unordered
+    const listStyle = schema.ordered ? "list-decimal" : "list-disc";
 
+    return (
+      <div className={cn("space-y-2", schema.wrapperClass)}>
         {schema.title && (
-          <div className="flex items-center gap-2 mb-4 pb-2 border-b border-cyan-900/30">
-             <Terminal className="w-4 h-4 text-cyan-500" />
-             <h3 className="text-sm font-bold uppercase tracking-widest text-cyan-400 drop-shadow-[0_0_5px_rgba(6,182,212,0.5)]">
-                {schema.title}
-             </h3>
-          </div>
+          <h3 className="text-lg font-semibold tracking-tight">
+             {schema.title}
+          </h3>
         )}
         
         <ListTag 
           className={cn(
-            "space-y-1",
+            "ml-6 [&>li]:mt-2",
+            listStyle,
             className
           )}
           {...props}
         >
-          {schema.items?.map((item: any, index: number) => (
-            <li 
-                key={index} 
-                className={cn(
-                    "group flex items-start gap-3 p-2 rounded-sm transition-all duration-300",
-                    "hover:bg-cyan-950/20 hover:pl-3",
-                    typeof item === 'object' && item.className
-                )}
-            >
-              {/* Marker Area */}
-              <div className="flex-shrink-0 mt-0.5">
-                {schema.ordered ? (
-                    <span className="flex items-center justify-center w-5 h-5 text-[10px] font-mono font-bold text-slate-950 bg-cyan-600 rounded-sm shadow-[0_0_8px_cyan] group-hover:bg-cyan-400 group-hover:scale-110 transition-all">
-                        {String(index + 1).padStart(2, '0')}
-                    </span>
-                ) : (
-                    <div className="relative flex items-center justify-center w-5 h-5">
-                        <Hexagon className="w-3 h-3 text-cyan-600 group-hover:text-cyan-400 group-hover:rotate-90 transition-transform duration-500" />
-                        <div className="absolute inset-0 bg-cyan-500/20 blur-[2px] rounded-full opacity-0 group-hover:opacity-100 transition-opacity" />
-                    </div>
-                )}
-              </div>
-
-              {/* Content Area */}
-              <div className="flex-1 text-sm text-slate-400 group-hover:text-cyan-100 font-medium font-sans leading-tight transition-colors">
-                {typeof item === 'string' ? item : item.content || renderChildren(item.body)}
-              </div>
-
-              {/* Hover Indicator */}
-              <ChevronRight className="w-4 h-4 text-cyan-500/0 -translate-x-2 group-hover:text-cyan-500 group-hover:translate-x-0 transition-all duration-300 opacity-0 group-hover:opacity-100" />
+          {items.map((item: any, index: number) => (
+            <li key={index} className={cn(typeof item === 'object' && item.className)}>
+              {typeof item === 'string' ? item : item.content || renderChildren(item.body)}
             </li>
           ))}
         </ListTag>
diff --git a/packages/components/src/renderers/data-display/tree-view.tsx b/packages/components/src/renderers/data-display/tree-view.tsx
@@ -11,6 +11,7 @@ import type { TreeViewSchema, TreeNode } from '@object-ui/types';
 import { ChevronRight, ChevronDown, Folder, File, FolderOpen, CircuitBoard } from 'lucide-react';
 import { useState } from 'react';
 import { cn } from '../../lib/utils';
+import { useDataScope } from '@object-ui/react';
 
 const TreeNodeComponent = ({ 
   node, 
@@ -99,6 +100,10 @@ ComponentRegistry.register('tree-view',
       }
     };
 
+    // Support data binding
+    const boundData = useDataScope(schema.bind);
+    const nodes = boundData || schema.nodes || schema.data || [];
+
     return (
       <div className={cn(
           'relative border rounded-lg p-3 bg-card text-card-foreground',
@@ -112,7 +117,7 @@ ComponentRegistry.register('tree-view',
           </div>
         )}
         <div className="space-y-1">
-          {(schema.nodes || schema.data)?.map((node: TreeNode) => (
+          {nodes.map((node: TreeNode) => (
             <TreeNodeComponent
               key={node.id}
               node={node}
diff --git a/packages/fields/src/widgets/CodeField.tsx b/packages/fields/src/widgets/CodeField.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Textarea } from '@object-ui/components';
+import { Textarea, cn } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -14,7 +14,7 @@ export function CodeField({ value, onChange, field, readonly, ...props }: FieldW
 
   if (readonly) {
     return (
-      <pre className="text-sm bg-muted p-2 rounded overflow-x-auto border">
+      <pre className={cn("text-sm bg-muted p-2 rounded overflow-x-auto border", props.className)}>
         <code>{value || '-'}</code>
       </pre>
     );
@@ -26,7 +26,7 @@ export function CodeField({ value, onChange, field, readonly, ...props }: FieldW
       onChange={(e) => onChange(e.target.value)}
       placeholder={config?.placeholder || `// Write ${language} code here...`}
       disabled={readonly || props.disabled}
-      className={`font-mono text-sm ${props.className}`}
+      className={cn("font-mono text-sm", props.className)}
       rows={12}
       spellCheck={false}
     />
diff --git a/packages/fields/src/widgets/MasterDetailField.tsx b/packages/fields/src/widgets/MasterDetailField.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Badge } from '@object-ui/components';
+import { Button, Badge, cn } from '@object-ui/components';
 import { Plus, X, ExternalLink } from 'lucide-react';
 import { FieldWidgetProps } from './types';
 
@@ -19,9 +19,13 @@ export interface MasterDetailValue {
 export function MasterDetailField({ 
   value, 
   onChange, 
-  readonly
+  field,
+  readonly,
+  className,
+  ...props 
 }: FieldWidgetProps<MasterDetailValue[]>) {
   const items = value || [];
+  const config = field || (props as any).schema;
 
   const handleAdd = () => {
     // This would typically open a dialog to select/create related records
@@ -44,7 +48,7 @@ export function MasterDetailField({
 
   if (readonly) {
     return (
-      <div className="space-y-2">
+      <div className={cn("space-y-2", className)}>
         {items.length === 0 ? (
           <span className="text-sm text-muted-foreground">No related records</span>
         ) : (
@@ -73,7 +77,7 @@ export function MasterDetailField({
   }
 
   return (
-    <div className="space-y-3">
+    <div className={cn("space-y-3", className)}>
       <div className="space-y-2">
         {items.map((item) => (
           <div
@@ -98,7 +102,33 @@ export function MasterDetailField({
                 variant="ghost"
                 size="sm"
                 onClick={() => handleRemove(item.id)}
-                disabled={readonly || props.disabled}
+                disabled={props.disabled}
+              >
+                <X className="w-4 h-4" />
+              </Button>
+            </div>
+          </div>
+        ))}
+        {items.length === 0 && (
+          <div className="text-sm text-muted-foreground text-center py-4 border border-dashed rounded bg-muted/20">
+            No related records
+          </div>
+        )}
+      </div>
+
+      <Button
+        type="button"
+        variant="outline"
+        className="w-full"
+        onClick={handleAdd}
+        disabled={props.disabled}
+      >
+        <Plus className="w-4 h-4 mr-2" />
+        Add {config?.label || 'Record'}
+      </Button>
+    </div>
+  );
+}                disabled={readonly || props.disabled}
               >
                 <X className="w-4 h-4" />
               </Button>
diff --git a/packages/fields/src/widgets/ObjectField.tsx b/packages/fields/src/widgets/ObjectField.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Textarea } from '@object-ui/components';
+import React, { useState, useEffect } from 'react';
+import { Textarea, cn } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -8,20 +8,42 @@ import { FieldWidgetProps } from './types';
  */
 export function ObjectField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<any>) {
   const config = field || (props as any).schema;
+  const [jsonString, setJsonString] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  // Initialize/Sync internal string state when value changes externally
+  useEffect(() => {
+    try {
+        if (value === undefined || value === null) {
+            setJsonString('');
+            return;
+        }
+        // Only update if the parsed internal state doesn't match the new value
+        // This prevents cursor jumping/reformatting while typing valid JSON
+        const currentParsed = jsonString ? JSON.parse(jsonString) : null;
+        if (JSON.stringify(currentParsed) !== JSON.stringify(value)) {
+            setJsonString(JSON.stringify(value, null, 2));
+        }
+    } catch (e) {
+        // Fallback if internal state was invalid JSON
+        setJsonString(JSON.stringify(value, null, 2));
+    }
+  }, [value]);
+
   if (readonly) {
     if (!value) return <span className="text-sm">-</span>;
     return (
-      <pre className="text-xs bg-gray-50 p-2 rounded border border-gray-200 overflow-auto max-h-40">
+      <pre className={cn("text-xs bg-gray-50 p-2 rounded border border-gray-200 overflow-auto max-h-40", props.className)}>
         {JSON.stringify(value, null, 2)}
       </pre>
     );
   }
 
-  // Convert object to JSON string for editing
-  const jsonString = value ? JSON.stringify(value, null, 2) : '';
-
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const str = e.target.value;
+    setJsonString(str);
+    setError(null);
+
     if (!str.trim()) {
       onChange(null);
       return;
@@ -30,20 +52,23 @@ export function ObjectField({ value, onChange, field, readonly, ...props }: Fiel
     try {
       const parsed = JSON.parse(str);
       onChange(parsed);
-    } catch {
-      // Invalid JSON - keep the current valid value, don't update
-      // User will need to fix JSON before it's saved
+    } catch (e) {
+      // Invalid JSON - don't propagate change to parent, but keep local state
+      setError("Invalid JSON");
     }
   };
 
   return (
-    <Textarea
-      value={jsonString}
-      onChange={handleChange}
-      placeholder={config?.placeholder || '{\n  "key": "value"\n}'}
-      disabled={readonly || props.disabled}
-      className={`font-mono text-xs ${props.className || ''}`}
-      rows={6}
-    />
+    <div className="space-y-1">
+      <Textarea
+        value={jsonString}
+        onChange={handleChange}
+        placeholder={config?.placeholder || '{\n  "key": "value"\n}'}
+        disabled={readonly || props.disabled}
+        className={cn("font-mono text-xs", error ? "border-red-500 focus-visible:ring-red-500" : "", props.className)}
+        rows={6}
+      />
+      {error && <p className="text-xs text-red-500">{error}</p>}
+    </div>
   );
 }
diff --git a/packages/fields/src/widgets/RatingField.tsx b/packages/fields/src/widgets/RatingField.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { Star } from 'lucide-react';
+import { cn } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 /**
  * Rating field widget - provides a star rating input
  * Supports numeric values from 0 to max (default 5)
  */
-export function RatingField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<number>) {
+export function RatingField({ value, onChange, field, readonly, className, ...props }: FieldWidgetProps<number>) {
   // Get rating-specific configuration from field metadata
   const ratingField = (field || (props as any).schema) as any;
   const max = ratingField?.max ?? 5;
@@ -18,7 +19,7 @@ export function RatingField({ value, onChange, field, readonly, ...props }: Fiel
 
   if (readonly) {
     return (
-      <div className="flex items-center gap-1">
+      <div className={cn("flex items-center gap-1", className)}>
         {Array.from({ length: max }, (_, i) => (
           <Star
             key={i}
@@ -37,7 +38,7 @@ export function RatingField({ value, onChange, field, readonly, ...props }: Fiel
   }
 
   return (
-    <div className="flex items-center gap-1">
+    <div className={cn("flex items-center gap-1", className)}>
       {Array.from({ length: max }, (_, i) => (
         <button
           key={i}
