@object-ui/fields 0.3.0 → 0.5.0

package/src/widgets/GridField.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { FieldWidgetProps } from './types';
+import { cn } from '@object-ui/components';
+
+/**
+ * GridField - Sub-table/grid data display
+ * Shows tabular data in a simplified format
+ * For full editing capabilities, use the grid plugin
+ */
+export function GridField({ value, field, readonly, ...props }: FieldWidgetProps<any[]>) {
+  const gridField = (field || (props as any).schema) as any;
+  const columns = gridField?.columns || [];
+
+  if (!value || !Array.isArray(value)) {
+    return <span className="text-sm text-gray-500">-</span>;
+  }
+
+  if (readonly) {
+    return (
+      <div className={cn("text-sm", props.className)}>
+        <span className="text-gray-700">{value.length} rows</span>
+      </div>
+    );
+  }
+
+  // Simple read-only table view
+  return (
+    <div className={cn("border border-gray-200 rounded-md overflow-hidden", props.className)}>
+      <div className="overflow-auto max-h-60">
+        <table className="w-full text-sm">
+          <thead className="bg-gray-50 border-b border-gray-200">
+            <tr>
+              {columns.map((col: any, idx: number) => (
+                <th
+                  key={idx}
+                  className="px-3 py-2 text-left text-xs font-medium text-gray-700"
+                >
+                  {col.label || col.name}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200">
+            {value.slice(0, 5).map((row: any, rowIdx: number) => (
+              <tr key={rowIdx} className="hover:bg-gray-50">
+                {columns.map((col: any, colIdx: number) => (
+                  <td key={colIdx} className="px-3 py-2 text-gray-900">
+                    {row[col.name] != null ? String(row[col.name]) : '-'}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {value.length > 5 && (
+        <div className="bg-gray-50 px-3 py-2 text-xs text-gray-500 border-t border-gray-200">
+          Showing 5 of {value.length} rows
+        </div>
+      )}
+    </div>
+  );
+}

package/src/widgets/ImageField.tsx

@@ -0,0 +1,108 @@
+import React, { useRef } from 'react';
+import { Button } from '@object-ui/components';
+import { Upload, X, Image as ImageIcon } from 'lucide-react';
+import { FieldWidgetProps } from './types';
+
+export function ImageField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<any>) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const imageField = (field || (props as any).schema) as any;
+  const multiple = imageField?.multiple || false;
+  const accept = imageField?.accept ? imageField.accept.join(',') : 'image/*';
+
+  if (readonly) {
+    if (!value) return <span className="text-sm">-</span>;
+    
+    const images = Array.isArray(value) ? value : [value];
+    return (
+      <div className="flex flex-wrap gap-2">
+        {images.map((img: any, idx: number) => (
+          <img
+            key={idx}
+            src={img.url || ''}
+            alt={img.name || `Image ${idx + 1}`}
+            className="size-20 rounded-md object-cover border border-gray-200"
+          />
+        ))}
+      </div>
+    );
+  }
+
+  const images = value ? (Array.isArray(value) ? value : [value]) : [];
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFiles = Array.from(e.target.files || []);
+    if (selectedFiles.length === 0) return;
+
+    const imageObjects = selectedFiles.map(file => ({
+      name: file.name,
+      original_name: file.name,
+      size: file.size,
+      mime_type: file.type,
+      // In a real implementation, this would upload the image and return a URL
+      url: URL.createObjectURL(file),
+    }));
+
+    if (multiple) {
+      onChange([...images, ...imageObjects]);
+    } else {
+      onChange(imageObjects[0]);
+    }
+  };
+
+  const handleRemove = (index: number) => {
+    if (multiple) {
+      const newImages = images.filter((_: any, i: number) => i !== index);
+      onChange(newImages.length > 0 ? newImages : null);
+    } else {
+      onChange(null);
+    }
+  };
+
+  return (
+    <div className={props.className}>
+      <input
+        ref={inputRef}
+        type="file"
+        multiple={multiple}
+        accept={accept}
+        onChange={handleFileChange}
+        className="hidden"
+      />
+      
+      <div className="space-y-2">
+        {images.length > 0 && (
+          <div className="grid grid-cols-4 gap-2">
+            {images.map((img: any, idx: number) => (
+              <div key={idx} className="relative group">
+                <img
+                  src={img.url || ''}
+                  alt={img.name || `Image ${idx + 1}`}
+                  className="size-20 rounded-md object-cover border border-gray-200"
+                />
+                <Button
+                  type="button"
+                  variant="destructive"
+                  size="sm"
+                  onClick={() => handleRemove(idx)}
+                  className="absolute top-1 right-1 h-6 w-6 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                >
+                  <X className="size-3" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        )}
+        
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => inputRef.current?.click()}
+          className="w-full"
+        >
+          <ImageIcon className="size-4 mr-2" />
+          {images.length > 0 ? 'Add More Images' : 'Upload Image'}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/widgets/LocationField.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Input } from '@object-ui/components';
+import { FieldWidgetProps } from './types';
+
+export function LocationField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<any>) {
+  const config = field || (props as any).schema;
+  // Location is stored as { latitude, longitude } object
+  // For display, convert to "latitude, longitude" string format
+  const displayValue = value && typeof value === 'object' 
+    ? `${value.latitude || 0}, ${value.longitude || 0}`
+    : '';
+
+  if (readonly) {
+    return <span className="text-sm">{displayValue || '-'}</span>;
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    if (!val.trim()) {
+      onChange(null);
+      return;
+    }
+    
+    // Parse as coordinates (latitude, longitude)
+    const parts = val.split(',').map(p => p.trim());
+    if (parts.length === 2) {
+      const lat = parseFloat(parts[0]);
+      const lng = parseFloat(parts[1]);
+      if (!isNaN(lat) && !isNaN(lng)) {
+        onChange({ latitude: lat, longitude: lng });
+      }
+      // If invalid, don't update the value
+    }
+  };
+
+  return (
+    <Input
+      type="text"
+      value={displayValue}
+      onChange={handleChange}
+      placeholder={config?.placeholder || 'latitude, longitude'}
+      disabled={readonly || props.disabled}
+      className={props.className}
+    />
+  );
+}

package/src/widgets/LookupField.tsx

@@ -22,12 +22,12 @@ interface LookupOption {
  * Lookup field for selecting related records
  * Supports single and multi-select with search
  */
-export function LookupField({ value, onChange, field, readonly }: FieldWidgetProps<any>) {
+export function LookupField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<any>) {
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
 
-  const lookupField = field as any;
-  const options: LookupOption[] = lookupField.options || [];
+  const lookupField = (field || (props as any).schema) as any;
+  const options: LookupOption[] = lookupField?.options || [];
   const multiple = lookupField.multiple || false;
   const displayField = lookupField.display_field || 'label';
 
@@ -127,7 +127,7 @@ export function LookupField({ value, onChange, field, readonly }: FieldWidgetPro
           >
             <Search className="mr-2 size-4" />
             {selectedOptions.length === 0 
-              ? field.placeholder || 'Select...'
+              ? lookupField?.placeholder || 'Select...'
               : multiple ? `${selectedOptions.length} selected` : 'Change selection'
             }
           </Button>
@@ -135,7 +135,7 @@ export function LookupField({ value, onChange, field, readonly }: FieldWidgetPro
         <DialogContent className="max-w-md">
           <DialogHeader>
             <DialogTitle>
-              {field.label || 'Select'} {multiple && '(multiple)'}
+              {lookupField?.label || 'Select'} {multiple && '(multiple)'}
             </DialogTitle>
           </DialogHeader>
           

package/src/widgets/MasterDetailField.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { Button, Badge, cn } from '@object-ui/components';
+import { Plus, X, ExternalLink } from 'lucide-react';
+import { FieldWidgetProps } from './types';
+
+/**
+ * Master-Detail relationship data structure
+ */
+export interface MasterDetailValue {
+  id: string;
+  label: string;
+  [key: string]: any;
+}
+
+/**
+ * Master-Detail field widget - manages one-to-many relationships
+ * Displays related records with add/remove capabilities
+ */
+export function MasterDetailField({ 
+  value, 
+  onChange, 
+  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
+    // For now, we'll just show a placeholder
+    const newItem: MasterDetailValue = {
+      id: `new-${Date.now()}`,
+      label: 'New Related Record',
+    };
+    onChange([...items, newItem]);
+  };
+
+  const handleRemove = (id: string) => {
+    onChange(items.filter(item => item.id !== id));
+  };
+
+  const handleView = (item: MasterDetailValue) => {
+    // This would typically navigate to the detail view
+    console.log('View detail:', item);
+  };
+
+  if (readonly) {
+    return (
+      <div className={cn("space-y-2", className)}>
+        {items.length === 0 ? (
+          <span className="text-sm text-muted-foreground">No related records</span>
+        ) : (
+          items.map((item) => (
+            <div
+              key={item.id}
+              className="flex items-center justify-between p-2 border rounded hover:bg-muted/50"
+            >
+              <span className="text-sm">{item.label}</span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => handleView(item)}
+              >
+                <ExternalLink className="w-4 h-4" />
+              </Button>
+            </div>
+          ))
+        )}
+        <p className="text-xs text-muted-foreground">
+          {items.length} {items.length === 1 ? 'record' : 'records'}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      <div className="space-y-2">
+        {items.map((item) => (
+          <div
+            key={item.id}
+            className="flex items-center justify-between gap-2 p-2 border rounded hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2 flex-1">
+              <Badge variant="outline">{item.id}</Badge>
+              <span className="text-sm flex-1">{item.label}</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => handleView(item)}
+              >
+                <ExternalLink className="w-4 h-4" />
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => handleRemove(item.id)}
+                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>
+  );
+}

package/src/widgets/NumberField.tsx

@@ -8,20 +8,24 @@ export function NumberField({ value, onChange, field, readonly, ...props }: Fiel
     return <span className="text-sm">{value ?? '-'}</span>;
   }
 
-  const precision = (field as unknown as NumberFieldMetadata).precision;
+  const numberField = (field || (props as any).schema) as NumberFieldMetadata;
+  const precision = numberField?.precision;
+
+  // Filter out non-DOM props
+  const { inputType, ...domProps } = props as any;
 
   return (
     <Input
+      {...domProps}
       type="number"
       value={value ?? ''}
       onChange={(e) => {
         const val = e.target.value;
         onChange(val === '' ? (null as any) : Number(val));
       }}
-      placeholder={field.placeholder}
-      disabled={readonly}
+      placeholder={numberField?.placeholder}
+      disabled={readonly || domProps.disabled}
       step={precision ? Math.pow(10, -precision) : 'any'}
-      className={props.className}
     />
   );
 }

package/src/widgets/ObjectField.tsx

@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from 'react';
+import { Textarea, cn } from '@object-ui/components';
+import { FieldWidgetProps } from './types';
+
+/**
+ * ObjectField - JSON object editor
+ * Allows editing structured JSON data
+ */
+export function ObjectField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<any>) {
+  const config = field || (props as any).schema;
+  
+  // Initialize string state based on value
+  const getInitialJsonString = () => {
+    if (value === undefined || value === null) return '';
+    return JSON.stringify(value, null, 2);
+  };
+  
+  const [jsonString, setJsonString] = useState(getInitialJsonString);
+  const [error, setError] = useState<string | null>(null);
+
+  // Sync internal string state when value changes externally
+  // This is a controlled component pattern where we need to sync external changes
+  useEffect(() => {
+    try {
+      if (value === undefined || value === null) {
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- Required for controlled component sync
+        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)) {
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- Required for controlled component sync
+        setJsonString(JSON.stringify(value, null, 2));
+      }
+    } catch {
+      // Fallback if internal state was invalid JSON
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Required for controlled component sync
+      setJsonString(JSON.stringify(value, null, 2));
+    }
+  }, [value, jsonString]);
+
+  if (readonly) {
+    if (!value) return <span className="text-sm">-</span>;
+    return (
+      <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>
+    );
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const str = e.target.value;
+    setJsonString(str);
+    setError(null);
+
+    if (!str.trim()) {
+      onChange(null);
+      return;
+    }
+    
+    try {
+      const parsed = JSON.parse(str);
+      onChange(parsed);
+    } catch (e) {
+      // Invalid JSON - don't propagate change to parent, but keep local state
+      setError("Invalid JSON");
+    }
+  };
+
+  return (
+    <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>
+  );
+}

package/src/widgets/PasswordField.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { Input } from '@object-ui/components';
+import { Button } from '@object-ui/components';
+import { Eye, EyeOff } from 'lucide-react';
+import { FieldWidgetProps } from './types';
+
+export function PasswordField({ value, onChange, field, readonly, className, ...props }: FieldWidgetProps<string>) {
+  const [showPassword, setShowPassword] = useState(false);
+  const config = field || (props as any).schema;
+
+  if (readonly) {
+    return <span className="text-sm">••••••••</span>;
+  }
+
+  // Filter out non-DOM props
+  const { inputType, ...domProps } = props as any;
+
+  return (
+    <div className="relative">
+      <Input
+        {...domProps}
+        type={showPassword ? 'text' : 'password'}
+        value={value || ''}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={config?.placeholder}
+        disabled={readonly || domProps.disabled}
+        className={`pr-10 ${className || ''}`}
+      />
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+        onClick={() => setShowPassword(!showPassword)}
+        tabIndex={-1}
+      >
+        {showPassword ? (
+          <EyeOff className="size-4 text-gray-500" />
+        ) : (
+          <Eye className="size-4 text-gray-500" />
+        )}
+      </Button>
+    </div>
+  );
+}

package/src/widgets/PercentField.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Input } from '@object-ui/components';
+import { FieldWidgetProps } from './types';
+
+export function PercentField({ value, onChange, field, readonly, errorMessage, className, ...props }: FieldWidgetProps<number>) {
+  const percentField = (field || (props as any).schema) as any;
+  const precision = percentField?.precision ?? 2;
+
+  if (readonly) {
+    if (value == null) return <span className="text-sm">-</span>;
+    return (
+      <span className="text-sm font-medium tabular-nums">
+        {(value * 100).toFixed(precision)}%
+      </span>
+    );
+  }
+
+  // Convert between stored value (0-1) and display value (0-100)
+  const displayValue = value != null ? (value * 100) : '';
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value === '') {
+      onChange(null as any);
+      return;
+    }
+    const parsed = parseFloat(e.target.value);
+    const val = isNaN(parsed) ? null : parsed / 100;
+    onChange(val as any);
+  };
+
+  return (
+    <div className="relative">
+      <Input
+        {...props}
+        type="number"
+        value={displayValue}
+        onChange={handleChange}
+        placeholder={percentField?.placeholder || '0'}
+        disabled={readonly || props.disabled}
+        className={`pr-8 ${className || ''}`}
+        step={Math.pow(10, -precision).toFixed(precision)}
+        aria-invalid={!!errorMessage}
+      />
+      <span className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">
+        %
+      </span>
+    </div>
+  );
+}

package/src/widgets/PhoneField.tsx

@@ -3,6 +3,7 @@ import { Input } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 export function PhoneField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<string>) {
+  const config = field || (props as any).schema;
   if (readonly) {
     if (!value) return <span className="text-sm">-</span>;
     return (
@@ -15,14 +16,17 @@ export function PhoneField({ value, onChange, field, readonly, errorMessage, ...
     );
   }
 
+  // Filter out non-DOM props
+  const { inputType, ...domProps } = props as any;
+
   return (
     <Input
+      {...domProps}
       type="tel"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
-      placeholder={field.placeholder || '(555) 123-4567'}
-      disabled={readonly}
-      className={props.className}
+      placeholder={config?.placeholder || '(555) 123-4567'}
+      disabled={readonly || domProps.disabled}
       aria-invalid={!!errorMessage}
     />
   );