@object-ui/fields 0.3.0 → 0.5.0

package/src/widgets/QRCodeField.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { Input, Button } from '@object-ui/components';
+import { QrCode, Copy } from 'lucide-react';
+import { FieldWidgetProps } from './types';
+
+/**
+ * QR Code field widget - generates QR codes from text
+ * Uses a simple SVG-based QR code generator
+ */
+export function QRCodeField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
+  const [showQR, setShowQR] = React.useState(false);
+  const config = field || (props as any).schema;
+
+  // Simple QR code generation using an external library would be ideal
+  // For now, we'll use a service API approach or placeholder
+  const getQRCodeUrl = (text: string): string => {
+    // Using a simple QR code API service (you might want to replace this with a library)
+    return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(text)}`;
+  };
+
+  const copyToClipboard = () => {
+    if (value) {
+      navigator.clipboard.writeText(value);
+    }
+  };
+
+  if (readonly) {
+    return (
+      <div className="flex items-center gap-3">
+        <span className="text-sm flex-1 truncate">{value || '-'}</span>
+        {value && (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => setShowQR(!showQR)}
+          >
+            <QrCode className="w-4 h-4 mr-2" />
+            {showQR ? 'Hide' : 'Show'} QR
+          </Button>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <Input
+          type="text"
+          value={value || ''}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={config?.placeholder || 'Enter text for QR code'}
+          disabled={readonly || props.disabled}
+          className={props.className}
+        />
+        {value && (
+          <>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={copyToClipboard}
+            >
+              <Copy className="w-4 h-4" />
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => setShowQR(!showQR)}
+            >
+              <QrCode className="w-4 h-4" />
+            </Button>
+          </>
+        )}
+      </div>
+
+      {showQR && value && (
+        <div className="border rounded p-4 bg-white flex justify-center">
+          <img
+            src={getQRCodeUrl(value)}
+            alt="QR Code"
+            className="w-48 h-48"
+          />
+        </div>
+      )}
+
+      {value && (
+        <p className="text-xs text-muted-foreground">
+          QR code contains: {value.length} characters
+        </p>
+      )}
+    </div>
+  );
+}

package/src/widgets/RatingField.tsx

@@ -0,0 +1,66 @@
+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, 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;
+  const currentValue = value ?? 0;
+
+  const [hoverValue, setHoverValue] = React.useState<number | null>(null);
+
+  const displayValue = hoverValue !== null ? hoverValue : currentValue;
+
+  if (readonly) {
+    return (
+      <div className={cn("flex items-center gap-1", className)}>
+        {Array.from({ length: max }, (_, i) => (
+          <Star
+            key={i}
+            className={`w-5 h-5 ${
+              i < currentValue
+                ? 'fill-yellow-400 text-yellow-400'
+                : 'text-muted-foreground'
+            }`}
+          />
+        ))}
+        <span className="ml-2 text-sm text-muted-foreground">
+          {currentValue} / {max}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("flex items-center gap-1", className)}>
+      {Array.from({ length: max }, (_, i) => (
+        <button
+          key={i}
+          type="button"
+          onClick={() => onChange(i + 1)}
+          onMouseEnter={() => setHoverValue(i + 1)}
+          onMouseLeave={() => setHoverValue(null)}
+          className="focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded"
+          disabled={readonly || props.disabled}
+        >
+          <Star
+            className={`w-5 h-5 transition-colors ${
+              i < displayValue
+                ? 'fill-yellow-400 text-yellow-400 hover:fill-yellow-500 hover:text-yellow-500'
+                : 'text-muted-foreground hover:text-yellow-400'
+            }`}
+          />
+        </button>
+      ))}
+      <span className="ml-2 text-sm text-muted-foreground">
+        {currentValue} / {max}
+      </span>
+    </div>
+  );
+}

package/src/widgets/RichTextField.tsx

@@ -18,9 +18,9 @@ export function RichTextField({ value, onChange, field, readonly, errorMessage,
     );
   }
 
-  const richField = field as any;
-  const rows = richField.rows || 8;
-  const format = richField.format || 'markdown'; // 'markdown' or 'html'
+  const richField = (field || (props as any).schema) as any;
+  const rows = richField?.rows || 8;
+  const format = richField?.format || 'markdown'; // 'markdown' or 'html'
 
   return (
     <div className="space-y-2">
@@ -31,8 +31,8 @@ export function RichTextField({ value, onChange, field, readonly, errorMessage,
       <Textarea
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
-        placeholder={field.placeholder || 'Enter text...'}
-        disabled={readonly}
+        placeholder={richField?.placeholder || 'Enter text...'}
+        disabled={readonly || props.disabled}
         rows={rows}
         className={`font-mono text-sm ${props.className || ''}`}
         aria-invalid={!!errorMessage}

package/src/widgets/SelectField.tsx

@@ -10,7 +10,8 @@ import { SelectFieldMetadata } from '@object-ui/types';
 import { FieldWidgetProps } from './types';
 
 export function SelectField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
-  const options = (field as unknown as SelectFieldMetadata).options || [];
+  const config = (field || (props as any).schema) as SelectFieldMetadata;
+  const options = config?.options || [];
 
   if (readonly) {
     const option = options.find((o) => o.value === value);
@@ -19,14 +20,15 @@ export function SelectField({ value, onChange, field, readonly, ...props }: Fiel
 
   return (
     <Select 
+      {...props}
       value={value} 
       onValueChange={onChange}
-      disabled={readonly}
+      disabled={readonly || props.disabled}
     >
-      <SelectTrigger className={props.className}>
-        <SelectValue placeholder={field.placeholder || "Select an option"} />
+      <SelectTrigger className={props.className} id={props.id}>
+        <SelectValue placeholder={config?.placeholder || "Select an option"} />
       </SelectTrigger>
-      <SelectContent>
+      <SelectContent position="popper">
         {options.map((option) => (
           <SelectItem key={option.value} value={option.value}>
             {option.label}

package/src/widgets/SignatureField.tsx

@@ -0,0 +1,140 @@
+import React, { useRef, useEffect } from 'react';
+import { Button } from '@object-ui/components';
+import { Eraser } from 'lucide-react';
+import { FieldWidgetProps } from './types';
+
+/**
+ * Signature field widget - provides a signature pad for capturing signatures
+ * Outputs signature as a base64 PNG image
+ */
+export function SignatureField({ value, onChange, readonly }: FieldWidgetProps<string>) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [isDrawing, setIsDrawing] = React.useState(false);
+  const [isEmpty, setIsEmpty] = React.useState(!value);
+
+  useEffect(() => {
+    if (value && canvasRef.current) {
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        const img = new Image();
+        img.onload = () => {
+          ctx.drawImage(img, 0, 0);
+          setIsEmpty(false);
+        };
+        img.src = value;
+      }
+    }
+  }, [value]);
+
+  const startDrawing = (e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) => {
+    if (readonly) return;
+    setIsDrawing(true);
+    setIsEmpty(false);
+    
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const rect = canvas.getBoundingClientRect();
+    const x = 'touches' in e ? e.touches[0].clientX - rect.left : e.clientX - rect.left;
+    const y = 'touches' in e ? e.touches[0].clientY - rect.top : e.clientY - rect.top;
+
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+  };
+
+  const draw = (e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) => {
+    if (!isDrawing || readonly) return;
+
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const rect = canvas.getBoundingClientRect();
+    const x = 'touches' in e ? e.touches[0].clientX - rect.left : e.clientX - rect.left;
+    const y = 'touches' in e ? e.touches[0].clientY - rect.top : e.clientY - rect.top;
+
+    ctx.lineTo(x, y);
+    ctx.strokeStyle = '#000';
+    ctx.lineWidth = 2;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.stroke();
+  };
+
+  const stopDrawing = () => {
+    if (!isDrawing) return;
+    setIsDrawing(false);
+
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    // Save signature as base64 PNG
+    const dataUrl = canvas.toDataURL('image/png');
+    onChange(dataUrl);
+  };
+
+  const clearSignature = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    setIsEmpty(true);
+    onChange('');
+  };
+
+  if (readonly && value) {
+    return (
+      <div className="border rounded p-2 bg-white">
+        <img src={value} alt="Signature" className="max-w-full h-auto" />
+      </div>
+    );
+  }
+
+  if (readonly && !value) {
+    return <span className="text-sm text-muted-foreground">No signature</span>;
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="border rounded bg-white">
+        <canvas
+          ref={canvasRef}
+          width={400}
+          height={200}
+          className="w-full touch-none cursor-crosshair"
+          onMouseDown={startDrawing}
+          onMouseMove={draw}
+          onMouseUp={stopDrawing}
+          onMouseLeave={stopDrawing}
+          onTouchStart={startDrawing}
+          onTouchMove={draw}
+          onTouchEnd={stopDrawing}
+        />
+      </div>
+      <div className="flex justify-between items-center">
+        <p className="text-xs text-muted-foreground">
+          {isEmpty ? 'Sign above' : 'Signature captured'}
+        </p>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={clearSignature}
+          disabled={readonly || isEmpty}
+        >
+          <Eraser className="w-4 h-4 mr-2" />
+          Clear
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/widgets/SliderField.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Slider } from '@object-ui/components';
+import { FieldWidgetProps } from './types';
+
+/**
+ * Slider field widget - provides a range slider input
+ * Supports numeric values with configurable min, max, and step
+ */
+export function SliderField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<number>) {
+  // Get slider-specific configuration from field metadata
+  const sliderField = (field || (props as any).schema) as any;
+  const min = sliderField?.min ?? 0;
+  const max = sliderField?.max ?? 100;
+  const step = sliderField?.step ?? 1;
+
+  if (readonly) {
+    return (
+      <div className="flex items-center gap-2">
+        <span className="text-sm font-medium">{value ?? min}</span>
+        <span className="text-xs text-muted-foreground">/ {max}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-4">
+      <Slider
+        value={[value ?? min]}
+        onValueChange={(values) => onChange(values[0])}
+        min={min}
+        max={max}
+        step={step}
+        disabled={readonly || props.disabled}
+        className={props.className}
+      />
+      <span className="text-sm font-medium w-12 text-right">{value ?? min}</span>
+    </div>
+  );
+}

package/src/widgets/SummaryField.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { FieldWidgetProps } from './types';
+
+/**
+ * SummaryField - Read-only aggregation field
+ * Values are aggregated from related records and cannot be edited
+ */
+export function SummaryField({ value, field, ...props }: FieldWidgetProps<any>) {
+  const summaryField = (field || (props as any).schema) as any;
+  const summaryType = summaryField?.summary_type || 'count';
+
+  // Format based on aggregation type
+  let displayValue = '-';
+  if (value != null) {
+    if (summaryType === 'count') {
+      displayValue = String(value);
+    } else if (['sum', 'avg', 'min', 'max'].includes(summaryType)) {
+      displayValue = typeof value === 'number' ? value.toFixed(2) : String(value);
+    } else {
+      displayValue = String(value);
+    }
+  }
+
+  return (
+    <span className={`text-sm font-medium tabular-nums text-gray-700 ${props.className || ''}`}>
+      {displayValue}
+    </span>
+  );
+}

package/src/widgets/TextAreaField.tsx

@@ -11,20 +11,23 @@ export function TextAreaField({ value, onChange, field, readonly, errorMessage,
     );
   }
 
-  const textareaField = field as any;
-  const rows = textareaField.rows || 4;
-  const maxLength = textareaField.max_length;
+  const textareaField = (field || (props as any).schema) as any;
+  const rows = textareaField?.rows || 4;
+  const maxLength = textareaField?.max_length;
+
+  // Filter out non-DOM props
+  const { inputType, ...domProps } = props as any;
 
   return (
     <div className="relative">
       <Textarea
+        {...domProps}
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
-        placeholder={field.placeholder}
-        disabled={readonly}
+        placeholder={textareaField?.placeholder}
+        disabled={readonly || domProps.disabled}
         rows={rows}
         maxLength={maxLength}
-        className={props.className}
         aria-invalid={!!errorMessage}
       />
       {maxLength && (

package/src/widgets/TextField.tsx

@@ -4,33 +4,38 @@ import { TextareaFieldMetadata } from '@object-ui/types';
 import { FieldWidgetProps } from './types';
 
 export function TextField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
+  const fieldData = field || (props as any).schema;
+
   if (readonly) {
     return <span className="text-sm">{value || '-'}</span>;
   }
 
   // Cast for rows property
-  const rows = (field as unknown as TextareaFieldMetadata).rows;
+  const rows = (fieldData as unknown as TextareaFieldMetadata)?.rows;
+
+  // Filter out non-DOM props
+  const { inputType, ...domProps } = props as any;
 
   if (rows && rows > 1) {
     return (
       <Textarea
+        {...domProps}
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
-        placeholder={field.placeholder}
-        disabled={readonly}
-        className={props.className}
+        placeholder={fieldData?.placeholder}
+        disabled={readonly || domProps.disabled}
       />
     );
   }
 
   return (
     <Input
-      type={field.type === 'password' ? 'password' : 'text'}
+      {...domProps}
+      type={fieldData?.type === 'password' ? 'password' : 'text'}
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
-      placeholder={field.placeholder}
-      disabled={readonly}
-      className={props.className}
+      placeholder={fieldData?.placeholder}
+      disabled={readonly || domProps.disabled}
     />
   );
 }

package/src/widgets/TimeField.tsx

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

package/src/widgets/UrlField.tsx

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

package/src/widgets/UserField.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Avatar, AvatarFallback, Badge } from '@object-ui/components';
+import { X } from 'lucide-react';
+import { FieldWidgetProps } from './types';
+
+/**
+ * UserField - User/Owner selector field
+ * Allows selecting one or multiple users
+ */
+export function UserField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<any>) {
+  const userField = (field || (props as any).schema) as any;
+  const multiple = userField?.multiple || false;
+
+  if (readonly) {
+    if (!value) return <span className="text-sm">-</span>;
+    
+    const users = Array.isArray(value) ? value : [value];
+    return (
+      <div className="flex -space-x-2">
+        {users.slice(0, 3).map((user: any, idx: number) => {
+          const name = user.name || user.username || 'User';
+          const initials = name.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2);
+          
+          return (
+            <Avatar key={idx} className="size-8 border-2 border-white" title={name}>
+              <AvatarFallback className="bg-blue-500 text-white text-xs">
+                {initials}
+              </AvatarFallback>
+            </Avatar>
+          );
+        })}
+        {users.length > 3 && (
+          <Avatar className="size-8 border-2 border-white">
+            <AvatarFallback className="bg-gray-200 text-gray-600 text-xs">
+              +{users.length - 3}
+            </AvatarFallback>
+          </Avatar>
+        )}
+      </div>
+    );
+  }
+
+  const users = value ? (Array.isArray(value) ? value : [value]) : [];
+
+  const handleRemove = (index: number) => {
+    if (multiple) {
+      const newUsers = users.filter((_: any, i: number) => i !== index);
+      onChange(newUsers.length > 0 ? newUsers : null);
+    } else {
+      onChange(null);
+    }
+  };
+
+  return (
+    <div className={props.className}>
+      {users.length > 0 && (
+        <div className="flex flex-wrap gap-2 mb-2">
+          {users.map((user: any, idx: number) => {
+            const name = user.name || user.username || 'User';
+            const initials = name.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2);
+            
+            return (
+              <Badge key={idx} variant="outline" className="gap-2 pr-1">
+                <Avatar className="size-5">
+                  <AvatarFallback className="bg-blue-500 text-white text-xs">
+                    {initials}
+                  </AvatarFallback>
+                </Avatar>
+                <span className="text-sm">{name}</span>
+                <button
+                  type="button"
+                  onClick={() => handleRemove(idx)}
+                  className="ml-1 rounded-full hover:bg-gray-200 p-0.5"
+                >
+                  <X className="size-3" />
+                </button>
+              </Badge>
+            );
+          })}
+        </div>
+      )}
+      
+      <div className="text-sm text-gray-500 italic">
+        User selection component requires integration with user management system
+      </div>
+    </div>
+  );
+}

package/src/widgets/VectorField.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { FieldWidgetProps } from './types';
+
+/**
+ * VectorField - Vector/embedding data display
+ * Shows vector embeddings in a read-only format
+ */
+export function VectorField({ value, field, ...props }: FieldWidgetProps<number[]>) {
+  const vectorField = (field || (props as any).schema) as any;
+  const dimensions = vectorField?.dimensions || (Array.isArray(value) ? value.length : 0);
+
+  if (!value || !Array.isArray(value)) {
+    return <span className="text-sm text-gray-500">-</span>;
+  }
+
+  // Show first few values and total dimensions
+  const preview = value.slice(0, 3).map(v => {
+    const num = Number(v);
+    return isNaN(num) ? '0' : num.toFixed(4);
+  }).join(', ');
+
+  return (
+    <div className={`text-sm ${props.className || ''}`}>
+      <span className="font-mono text-gray-700">[{preview}...]</span>
+      <span className="text-gray-500 ml-2">({dimensions}D)</span>
+    </div>
+  );
+}

package/src/widgets/types.ts

@@ -6,6 +6,8 @@ export type FieldWidgetProps<T = any> = {
   // Use a looser type for field to avoid complex circular dependencies for now
   field: FieldMetadata; 
   readonly?: boolean;
+  disabled?: boolean;
   className?: string;
   errorMessage?: string;
+  [key: string]: any;
 }