@object-ui/fields 0.3.1 → 0.5.0

package/src/widgets/AvatarField.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { Avatar, AvatarFallback, AvatarImage, Button } from '@object-ui/components';
+import { Upload, X } from 'lucide-react';
+import { FieldWidgetProps } from './types';
+
+/**
+ * Avatar field widget - provides an avatar/profile picture uploader
+ * Supports image URLs or file uploads
+ */
+export function AvatarField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+  
+  const avatarField = (field || (props as any).schema) as any;
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    // Check file type
+    if (!file.type.startsWith('image/')) {
+      console.error('Please select an image file');
+      return;
+    }
+
+    // Check file size (max 5MB)
+    if (file.size > 5 * 1024 * 1024) {
+      console.error('File size must be less than 5MB');
+      return;
+    }
+
+    // Convert to base64 or upload to server
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      onChange(reader.result as string);
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleRemove = () => {
+    onChange('');
+  };
+
+  // Extract initials for fallback
+  const getInitials = (): string => {
+    const name = avatarField?.defaultName || avatarField?.label || 'User';
+    return name
+      .split(' ')
+      .map((word: string) => word[0])
+      .join('')
+      .toUpperCase()
+      .slice(0, 2);
+  };
+
+  if (readonly) {
+    return (
+      <Avatar className="w-16 h-16">
+        {value && <AvatarImage src={value} alt={avatarField?.label} />}
+        <AvatarFallback>{getInitials()}</AvatarFallback>
+      </Avatar>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-4">
+      <div
+        className="relative"
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        <Avatar className="w-16 h-16">
+          {value && <AvatarImage src={value} alt={avatarField?.label} />}
+          <AvatarFallback>{getInitials()}</AvatarFallback>
+        </Avatar>
+        {!readonly && isHovered && value && (
+          <button
+            type="button"
+            onClick={handleRemove}
+            className="absolute -top-1 -right-1 bg-destructive text-destructive-foreground rounded-full p-1 hover:bg-destructive/90"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        )}
+      </div>
+      
+      <div className="flex flex-col gap-2">
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          onChange={handleFileSelect}
+          className="hidden"
+        />
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => fileInputRef.current?.click()}
+          disabled={readonly || props.disabled}
+        >
+          <Upload className="w-4 h-4 mr-2" />
+          {value ? 'Change' : 'Upload'} Avatar
+        </Button>
+        <p className="text-xs text-muted-foreground">
+          PNG, JPG up to 5MB
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/widgets/BooleanField.tsx

@@ -1,26 +1,34 @@
-import React from 'react';
+import React, { useId } from 'react';
 import { Switch, Checkbox, Label } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 export function BooleanField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<boolean>) {
+  const config = (field || (props as any).schema) as any;
+  // Use simple type assertion for arbitrary custom properties not in BaseFieldMetadata
+  const widget = config?.widget;
+  // Generate unique ID using React's useId hook - must be before early returns (rules of hooks)
+  const generatedId = useId();
+  const id = config?.name || generatedId;
+  const label = config?.label || 'Checkbox';
+
   if (readonly) {
     return <span className="text-sm">{value ? 'Yes' : 'No'}</span>;
   }
 
-  // Use simple type assertion for arbitrary custom properties not in BaseFieldMetadata
-  const widget = (field as any).widget;
+  // Filter out non-DOM props
+  const { inputType, ...domProps } = props as any;
 
   if (widget === 'checkbox') {
      return (
         <div className="flex items-center space-x-2">
             <Checkbox 
-                id={field.name}
+                {...domProps}
+                id={id}
                 checked={!!value}
                 onCheckedChange={(checked) => onChange(!!checked)}
-                disabled={readonly}
-                className={props.className}
+                disabled={readonly || domProps.disabled}
             />
-            <Label htmlFor={field.name}>{field.label}</Label>
+            <Label htmlFor={id}>{label}</Label>
         </div>
      )
   }
@@ -28,13 +36,13 @@ export function BooleanField({ value, onChange, field, readonly, ...props }: Fie
   return (
     <div className="flex items-center space-x-2">
         <Switch 
-            id={field.name} 
+            {...domProps}
+            id={id} 
             checked={!!value} 
             onCheckedChange={onChange}
-            disabled={readonly}
-            className={props.className}
+            disabled={readonly || domProps.disabled}
         />
-        <Label htmlFor={field.name}>{field.label}</Label>
+        <Label htmlFor={id}>{label}</Label>
     </div>
   );
 }

package/src/widgets/CodeField.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Textarea, cn } from '@object-ui/components';
+import { FieldWidgetProps } from './types';
+
+/**
+ * Code field widget - provides a code editor with syntax highlighting
+ * Uses a simple textarea with monospace font
+ * For advanced code editing, use the @object-ui/plugin-editor component
+ */
+export function CodeField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
+  const config = field || (props as any).schema;
+  // Get code-specific configuration from field metadata
+  const language = (config as any)?.language ?? 'javascript';
+
+  if (readonly) {
+    return (
+      <pre className={cn("text-sm bg-muted p-2 rounded overflow-x-auto border", props.className)}>
+        <code>{value || '-'}</code>
+      </pre>
+    );
+  }
+
+  return (
+    <Textarea
+      value={value || ''}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={config?.placeholder || `// Write ${language} code here...`}
+      disabled={readonly || props.disabled}
+      className={cn("font-mono text-sm", props.className)}
+      rows={12}
+      spellCheck={false}
+    />
+  );
+}

package/src/widgets/ColorField.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Input } from '@object-ui/components';
+import { FieldWidgetProps } from './types';
+
+/**
+ * Color field widget - provides a color picker input
+ * Supports hex color values (e.g., #ff0000)
+ */
+export function ColorField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
+  const colorField = (field || (props as any).schema) as any;
+
+  if (readonly) {
+    return (
+      <div className="flex items-center gap-2">
+        <div
+          className="w-6 h-6 rounded border border-input"
+          style={{ backgroundColor: value || '#000000' }}
+        />
+        <span className="text-sm">{value || '-'}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <input
+        type="color"
+        value={value || '#000000'}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={readonly || props.disabled}
+        className="w-10 h-10 rounded border border-input cursor-pointer"
+      />
+      <Input
+        type="text"
+        value={value || ''}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={colorField?.placeholder || '#000000'}
+        disabled={readonly || props.disabled}
+        className={props.className}
+        pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$"
+      />
+    </div>
+  );
+}

package/src/widgets/CurrencyField.tsx

@@ -16,10 +16,10 @@ function formatCurrency(value: number, currency: string = 'USD'): string {
   }
 }
 
-export function CurrencyField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<number>) {
-  const currencyField = field as any;
-  const currency = currencyField.currency || 'USD';
-  const precision = currencyField.precision ?? 2;
+export function CurrencyField({ value, onChange, field, readonly, errorMessage, className, ...props }: FieldWidgetProps<number>) {
+  const currencyField = (field || (props as any).schema) as any;
+  const currency = currencyField?.currency || 'USD';
+  const precision = currencyField?.precision ?? 2;
 
   if (readonly) {
     if (value == null) return <span className="text-sm">-</span>;
@@ -44,6 +44,7 @@ export function CurrencyField({ value, onChange, field, readonly, errorMessage,
         {currency === 'USD' ? '$' : currency}
       </span>
       <Input
+        {...props}
         type="number"
         value={value ?? ''}
         onChange={(e) => {
@@ -51,9 +52,9 @@ export function CurrencyField({ value, onChange, field, readonly, errorMessage,
           onChange(val as any);
         }}
         onBlur={handleBlur}
-        placeholder={field.placeholder || '0.00'}
-        disabled={readonly}
-        className={`pl-8 ${props.className || ''}`}
+        placeholder={currencyField?.placeholder || '0.00'}
+        disabled={readonly || props.disabled}
+        className={`pl-8 ${className || ''}`}
         step={Math.pow(10, -precision).toFixed(precision)}
         aria-invalid={!!errorMessage}
       />

package/src/widgets/DateField.tsx

@@ -7,13 +7,16 @@ export function DateField({ value, onChange, field, readonly, ...props }: FieldW
     return <span className="text-sm">{value ? new Date(value).toLocaleDateString() : '-'}</span>;
   }
 
+  // Filter out non-DOM props
+  const { inputType, ...domProps } = props as any;
+
   return (
     <Input
+      {...domProps}
       type="date"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
-      disabled={readonly}
-      className={props.className}
+      disabled={readonly || domProps.disabled}
     />
   );
 }

package/src/widgets/DateTimeField.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Input } from '@object-ui/components';
+import { FieldWidgetProps } from './types';
+
+export function DateTimeField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
+  if (readonly) {
+    if (!value) return <span className="text-sm">-</span>;
+    const date = new Date(value);
+    return (
+      <span className="text-sm">
+        {date.toLocaleDateString()} {date.toLocaleTimeString()}
+      </span>
+    );
+  }
+
+  // Filter out non-DOM props
+  const { inputType, ...domProps } = props as any;
+
+  return (
+    <Input
+      {...domProps}
+      type="datetime-local"
+      value={value || ''}
+      onChange={(e) => onChange(e.target.value)}
+      disabled={readonly || domProps.disabled}
+    />
+  );
+}

package/src/widgets/EmailField.tsx

@@ -3,6 +3,7 @@ import { Input } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
 export function EmailField({ 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 EmailField({ value, onChange, field, readonly, errorMessage, ...
     );
   }
 
+  // Filter out non-DOM props
+  const { inputType, ...domProps } = props as any;
+
   return (
     <Input
+      {...domProps}
       type="email"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
-      placeholder={field.placeholder || 'email@example.com'}
-      disabled={readonly}
-      className={props.className}
+      placeholder={config?.placeholder || 'email@example.com'}
+      disabled={readonly || domProps.disabled}
       aria-invalid={!!errorMessage}
     />
   );

package/src/widgets/FileField.tsx

@@ -0,0 +1,114 @@
+import React, { useRef } from 'react';
+import { Button } from '@object-ui/components';
+import { Upload, X, File as FileIcon } from 'lucide-react';
+import { FieldWidgetProps } from './types';
+
+export function FileField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<any>) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const fileField = (field || (props as any).schema) as any;
+  const multiple = fileField?.multiple || false;
+  const accept = fileField?.accept ? fileField.accept.join(',') : undefined;
+
+  if (readonly) {
+    if (!value) return <span className="text-sm">-</span>;
+    
+    const files = Array.isArray(value) ? value : [value];
+    return (
+      <div className="flex flex-wrap gap-2">
+        {files.map((file: any, idx: number) => (
+          <span key={idx} className="text-sm truncate max-w-xs">
+            {file.name || file.original_name || 'File'}
+          </span>
+        ))}
+      </div>
+    );
+  }
+
+  const files = 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 fileObjects = 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 file and return a URL
+      url: URL.createObjectURL(file),
+    }));
+
+    if (multiple) {
+      onChange([...files, ...fileObjects]);
+    } else {
+      onChange(fileObjects[0]);
+    }
+  };
+
+  const handleRemove = (index: number) => {
+    if (multiple) {
+      const newFiles = files.filter((_: any, i: number) => i !== index);
+      onChange(newFiles.length > 0 ? newFiles : 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">
+        {files.length > 0 && (
+          <div className="space-y-1">
+            {files.map((file: any, idx: number) => (
+              <div
+                key={idx}
+                className="flex items-center justify-between gap-2 p-2 bg-gray-50 rounded-md border border-gray-200"
+              >
+                <div className="flex items-center gap-2 flex-1 min-w-0">
+                  <FileIcon className="size-4 text-gray-500 flex-shrink-0" />
+                  <span className="text-sm truncate">
+                    {file.name || file.original_name || 'File'}
+                  </span>
+                  {file.size && (
+                    <span className="text-xs text-gray-500">
+                      ({(file.size / 1024).toFixed(1)} KB)
+                    </span>
+                  )}
+                </div>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleRemove(idx)}
+                  className="h-6 w-6 p-0"
+                >
+                  <X className="size-3" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        )}
+        
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => inputRef.current?.click()}
+          className="w-full"
+        >
+          <Upload className="size-4 mr-2" />
+          {files.length > 0 ? 'Add More Files' : 'Upload File'}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/widgets/FormulaField.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { FieldWidgetProps } from './types';
+
+/**
+ * FormulaField - Read-only computed field
+ * Values are computed on the backend and cannot be edited
+ */
+export function FormulaField({ value, field, ...props }: FieldWidgetProps<any>) {
+  const formulaField = (field || (props as any).schema) as any;
+  const returnType = formulaField?.return_type || 'text';
+
+  // Format based on return type
+  let displayValue = '-';
+  if (value != null) {
+    if (returnType === 'number' || returnType === 'currency') {
+      displayValue = typeof value === 'number' ? value.toFixed(2) : String(value);
+    } else if (returnType === 'boolean') {
+      displayValue = value ? 'Yes' : 'No';
+    } else if (returnType === 'date') {
+      displayValue = new Date(value).toLocaleDateString();
+    } else {
+      displayValue = String(value);
+    }
+  }
+
+  return (
+    <span className={`text-sm font-mono text-gray-700 ${props.className || ''}`}>
+      {displayValue}
+    </span>
+  );
+}

package/src/widgets/GeolocationField.tsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import { Input, Button, Label } from '@object-ui/components';
+import { MapPin, Crosshair } from 'lucide-react';
+import { FieldWidgetProps } from './types';
+
+/**
+ * Geolocation data structure
+ */
+export interface GeolocationValue {
+  latitude?: number;
+  longitude?: number;
+  accuracy?: number;
+}
+
+/**
+ * Geolocation field widget - provides a location picker with coordinates
+ * Supports manual entry and browser geolocation API
+ */
+export function GeolocationField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<GeolocationValue>) {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const location = value || {};
+
+  const handleFieldChange = (fieldName: keyof GeolocationValue, fieldValue: string) => {
+    onChange({
+      ...location,
+      [fieldName]: fieldValue ? Number(fieldValue) : undefined,
+    });
+  };
+
+  const getCurrentLocation = () => {
+    if (!navigator.geolocation) {
+      console.error('Geolocation is not supported by this browser');
+      return;
+    }
+
+    setIsLoading(true);
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        onChange({
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+          accuracy: position.coords.accuracy,
+        });
+        setIsLoading(false);
+      },
+      (error) => {
+        console.error('Error getting location:', error.message);
+        setIsLoading(false);
+      },
+      {
+        enableHighAccuracy: true,
+        timeout: 5000,
+        maximumAge: 0,
+      }
+    );
+  };
+
+  const formatLocation = (loc: GeolocationValue): string => {
+    if (!loc.latitude || !loc.longitude) return '-';
+    return `${loc.latitude.toFixed(6)}, ${loc.longitude.toFixed(6)}`;
+  };
+
+  const openInMaps = () => {
+    if (!location.latitude || !location.longitude) return;
+    const url = `https://www.google.com/maps?q=${location.latitude},${location.longitude}`;
+    window.open(url, '_blank');
+  };
+
+  if (readonly) {
+    return (
+      <div className="flex items-center gap-2">
+        <MapPin className="w-4 h-4 text-muted-foreground" />
+        <span className="text-sm">{formatLocation(location)}</span>
+        {location.latitude && location.longitude && (
+          <Button
+            type="button"
+            variant="link"
+            size="sm"
+            onClick={openInMaps}
+            className="p-0 h-auto"
+          >
+            View on map
+          </Button>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={getCurrentLocation}
+          disabled={readonly || isLoading}
+        >
+          <Crosshair className="w-4 h-4 mr-2" />
+          {isLoading ? 'Getting location...' : 'Use Current Location'}
+        </Button>
+        {location.latitude && location.longitude && (
+          <Button
+            type="button"
+            variant="link"
+            size="sm"
+            onClick={openInMaps}
+          >
+            <MapPin className="w-4 h-4 mr-2" />
+            View on map
+          </Button>
+        )}
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <Label htmlFor="latitude" className="text-xs">Latitude</Label>
+          <Input
+            id="latitude"
+            type="number"
+            value={location.latitude ?? ''}
+            onChange={(e) => handleFieldChange('latitude', e.target.value)}
+            placeholder="37.7749"
+            disabled={readonly || props.disabled}
+            step="any"
+            className={props.className}
+          />
+        </div>
+        
+        <div>
+          <Label htmlFor="longitude" className="text-xs">Longitude</Label>
+          <Input
+            id="longitude"
+            type="number"
+            value={location.longitude ?? ''}
+            onChange={(e) => handleFieldChange('longitude', e.target.value)}
+            placeholder="-122.4194"
+            disabled={readonly || props.disabled}
+            step="any"
+          />
+        </div>
+      </div>
+
+      {location.accuracy && (
+        <p className="text-xs text-muted-foreground">
+          Accuracy: ±{location.accuracy.toFixed(0)}m
+        </p>
+      )}
+    </div>
+  );
+}