@object-ui/fields 3.3.2 → 3.4.0

package/src/widgets/FileField.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState, useCallback } from 'react';
 import { Button, EmptyValue } from '@object-ui/components';
-import { Upload, X, File as FileIcon, ImageIcon } from 'lucide-react';
+import { useUpload } from '@object-ui/providers';
+import { Upload, X, File as FileIcon, ImageIcon, Camera, Loader2 } from 'lucide-react';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -10,20 +11,37 @@ import { FieldWidgetProps } from './types';
  */
 export function FileField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<any>) {
   const inputRef = useRef<HTMLInputElement>(null);
+  const cameraRef = 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;
   const maxSize = fileField?.maxSize as number | undefined; // bytes
+  /**
+   * Camera capture mode for mobile devices.
+   * - `'environment'` (back camera): photos of receipts, documents, products
+   * - `'user'` (front camera): selfies, profile pictures
+   * - `false`: disable the camera button entirely
+   * @default 'environment' when accept includes image/* on a touch device
+   */
+  const captureMode = (fileField?.capture ?? null) as 'environment' | 'user' | false | null;
+  const acceptsImages = !accept || accept.split(',').some((t: string) =>
+    t.trim().startsWith('image/') || t.trim() === 'image/*' || t.trim().startsWith('.jp') || t.trim().startsWith('.png') || t.trim().startsWith('.gif') || t.trim().startsWith('.webp'),
+  );
+  // Auto-enable camera button on touch devices when image upload is permitted, unless explicitly disabled.
+  const isTouchDevice = typeof navigator !== 'undefined' && (navigator.maxTouchPoints > 0 || /Mobi|Android/i.test(navigator.userAgent));
+  const cameraEnabled = captureMode === false ? false : (captureMode ?? (acceptsImages && isTouchDevice ? 'environment' : null));
   const [isDragOver, setIsDragOver] = useState(false);
   const [errors, setErrors] = useState<string[]>([]);
+  const { upload } = useUpload();
+  const [uploadProgress, setUploadProgress] = useState<Record<string, number>>({});
+  const [uploading, setUploading] = useState(false);
 
   const files = value ? (Array.isArray(value) ? value : [value]) : [];
 
-  const processFiles = useCallback((selectedFiles: File[]) => {
+  const processFiles = useCallback(async (selectedFiles: File[]) => {
     if (selectedFiles.length === 0) return;
     const newErrors: string[] = [];
 
-    // Validate file sizes
     const validFiles = selectedFiles.filter(file => {
       if (maxSize && file.size > maxSize) {
         const maxMB = (maxSize / (1024 * 1024)).toFixed(1);
@@ -36,21 +54,42 @@ export function FileField({ value, onChange, field, readonly, ...props }: FieldW
 
     if (validFiles.length === 0) return;
 
-    const fileObjects = validFiles.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),
-    }));
+    setUploading(true);
+    try {
+      const fileObjects = await Promise.all(
+        validFiles.map(async (file) => {
+          try {
+            const result = await upload(file, {
+              onProgress: (ratio) =>
+                setUploadProgress((prev) => ({ ...prev, [file.name]: ratio })),
+            });
+            return {
+              name: result.name,
+              original_name: file.name,
+              size: result.size,
+              mime_type: result.mimeType,
+              url: result.url,
+            };
+          } catch (err) {
+            newErrors.push(`Failed to upload "${file.name}": ${(err as Error).message}`);
+            setErrors([...newErrors]);
+            return null;
+          }
+        }),
+      );
+      const successful = fileObjects.filter(Boolean) as any[];
+      if (successful.length === 0) return;
 
-    if (multiple) {
-      onChange([...files, ...fileObjects]);
-    } else {
-      onChange(fileObjects[0]);
+      if (multiple) {
+        onChange([...files, ...successful]);
+      } else {
+        onChange(successful[0]);
+      }
+    } finally {
+      setUploading(false);
+      setUploadProgress({});
     }
-  }, [files, multiple, onChange, maxSize]);
+  }, [files, multiple, onChange, maxSize, upload]);
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
     e.preventDefault();
@@ -128,6 +167,18 @@ export function FileField({ value, onChange, field, readonly, ...props }: FieldW
         onChange={handleFileChange}
         className="hidden"
       />
+      {cameraEnabled && (
+        <input
+          ref={cameraRef}
+          type="file"
+          accept="image/*"
+          capture={cameraEnabled}
+          onChange={handleFileChange}
+          className="hidden"
+          aria-label="Camera capture"
+          data-testid="file-field-camera-input"
+        />
+      )}
       
       <div className="space-y-2">
         {/* Drag-and-drop zone */}
@@ -159,11 +210,43 @@ export function FileField({ value, onChange, field, readonly, ...props }: FieldW
               {isDragOver ? 'Drop files here' : 'Drag & drop files here'}
             </p>
             <p className="text-xs text-muted-foreground mt-1">
-              or click to browse
+              or click to browse{cameraEnabled ? ' • use the camera button below' : ''}
             </p>
           </div>
         </div>
 
+        {cameraEnabled && (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="w-full"
+            onClick={(e) => {
+              e.stopPropagation();
+              cameraRef.current?.click();
+            }}
+            data-testid="file-field-camera-button"
+          >
+            <Camera className="size-4 mr-2" />
+            {cameraEnabled === 'user' ? 'Take selfie' : 'Take photo'}
+          </Button>
+        )}
+
+        {/* Upload progress indicator */}
+        {uploading && (
+          <div className="flex items-center gap-2 text-xs text-muted-foreground" data-testid="file-field-uploading">
+            <Loader2 className="size-3 animate-spin" />
+            <span>
+              Uploading…
+              {Object.keys(uploadProgress).length > 0 &&
+                ` (${Math.round(
+                  (Object.values(uploadProgress).reduce((s, v) => s + v, 0) /
+                    Object.keys(uploadProgress).length) * 100,
+                )}%)`}
+            </span>
+          </div>
+        )}
+
         {/* Validation errors */}
         {errors.length > 0 && (
           <div className="space-y-0.5">

package/src/widgets/ImageCropperDialog.tsx

@@ -0,0 +1,245 @@
+/**
+ * ImageCropperDialog - Lightweight crop/rotate dialog for ImageField.
+ *
+ * Implementation notes:
+ * - Uses a Canvas + native pointer events (no extra dependency) so the bundle
+ *   stays small and the widget works in all SDUI contexts.
+ * - Exposes a rectangular crop selection that can be dragged around the image
+ *   and a rotate-by-90° button.
+ * - On confirm, returns a `Blob` of the cropped image (PNG by default) so callers
+ *   can wire it into upload providers or `URL.createObjectURL()`.
+ */
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@object-ui/components';
+import { RotateCw, Crop as CropIcon } from 'lucide-react';
+
+export interface ImageCropperDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Source image URL or data URL */
+  src: string;
+  /** MIME type for the cropped output. Defaults to image/png. */
+  outputType?: string;
+  /** Suggested filename (passed back via onConfirm). Defaults to "cropped.png". */
+  outputName?: string;
+  /** Called when the user confirms the crop. */
+  onConfirm: (blob: Blob, name: string) => void;
+}
+
+interface CropRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export const ImageCropperDialog: React.FC<ImageCropperDialogProps> = ({
+  open,
+  onOpenChange,
+  src,
+  outputType = 'image/png',
+  outputName = 'cropped.png',
+  onConfirm,
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const imgRef = useRef<HTMLImageElement | null>(null);
+  const [rotation, setRotation] = useState(0); // 0, 90, 180, 270
+  const [crop, setCrop] = useState<CropRect>({ x: 0, y: 0, width: 100, height: 100 });
+  const [drag, setDrag] = useState<{ ox: number; oy: number; cx: number; cy: number } | null>(null);
+  const [imageReady, setImageReady] = useState(false);
+
+  // Load the image when the dialog opens
+  useEffect(() => {
+    if (!open || !src) return;
+    setImageReady(false);
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => {
+      imgRef.current = img;
+      // Default crop = centred 80% box
+      const w = img.naturalWidth * 0.8;
+      const h = img.naturalHeight * 0.8;
+      setCrop({
+        x: (img.naturalWidth - w) / 2,
+        y: (img.naturalHeight - h) / 2,
+        width: w,
+        height: h,
+      });
+      setRotation(0);
+      setImageReady(true);
+    };
+    img.onerror = () => setImageReady(false);
+    img.src = src;
+  }, [open, src]);
+
+  // Render image + crop overlay
+  useEffect(() => {
+    if (!imageReady || !imgRef.current || !canvasRef.current) return;
+    const img = imgRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    // Scale image to fit a 480px-wide preview while preserving aspect
+    const previewW = 480;
+    const scale = previewW / img.naturalWidth;
+    const previewH = img.naturalHeight * scale;
+    canvas.width = previewW;
+    canvas.height = previewH;
+    ctx.clearRect(0, 0, previewW, previewH);
+
+    // Apply rotation to the image (purely visual — actual rotation is baked in on confirm)
+    ctx.save();
+    ctx.translate(previewW / 2, previewH / 2);
+    ctx.rotate((rotation * Math.PI) / 180);
+    const drawW = rotation % 180 === 0 ? previewW : previewH;
+    const drawH = rotation % 180 === 0 ? previewH : previewW;
+    ctx.drawImage(img, -drawW / 2, -drawH / 2, drawW, drawH);
+    ctx.restore();
+
+    // Draw crop overlay (in preview coordinates)
+    const px = crop.x * scale;
+    const py = crop.y * scale;
+    const pw = crop.width * scale;
+    const ph = crop.height * scale;
+    ctx.fillStyle = 'rgba(0,0,0,0.45)';
+    ctx.fillRect(0, 0, previewW, py);
+    ctx.fillRect(0, py + ph, previewW, previewH - py - ph);
+    ctx.fillRect(0, py, px, ph);
+    ctx.fillRect(px + pw, py, previewW - px - pw, ph);
+    ctx.strokeStyle = '#3b82f6';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(px, py, pw, ph);
+  }, [imageReady, crop, rotation]);
+
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent<HTMLCanvasElement>) => {
+      if (!imgRef.current || !canvasRef.current) return;
+      const rect = canvasRef.current.getBoundingClientRect();
+      const scale = imgRef.current.naturalWidth / rect.width;
+      setDrag({
+        ox: (e.clientX - rect.left) * scale,
+        oy: (e.clientY - rect.top) * scale,
+        cx: crop.x,
+        cy: crop.y,
+      });
+      (e.target as HTMLCanvasElement).setPointerCapture(e.pointerId);
+    },
+    [crop],
+  );
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent<HTMLCanvasElement>) => {
+      if (!drag || !imgRef.current || !canvasRef.current) return;
+      const rect = canvasRef.current.getBoundingClientRect();
+      const scale = imgRef.current.naturalWidth / rect.width;
+      const dx = (e.clientX - rect.left) * scale - drag.ox;
+      const dy = (e.clientY - rect.top) * scale - drag.oy;
+      const nextX = Math.max(0, Math.min(drag.cx + dx, imgRef.current.naturalWidth - crop.width));
+      const nextY = Math.max(0, Math.min(drag.cy + dy, imgRef.current.naturalHeight - crop.height));
+      setCrop((c) => ({ ...c, x: nextX, y: nextY }));
+    },
+    [drag, crop.width, crop.height],
+  );
+
+  const handlePointerUp = useCallback(() => setDrag(null), []);
+
+  const rotate = useCallback(() => setRotation((r) => (r + 90) % 360), []);
+
+  const handleConfirm = useCallback(async () => {
+    if (!imgRef.current) return;
+    const img = imgRef.current;
+    const out = document.createElement('canvas');
+    // After rotation, swap width/height when needed
+    const cw = crop.width;
+    const ch = crop.height;
+    out.width = rotation % 180 === 0 ? cw : ch;
+    out.height = rotation % 180 === 0 ? ch : cw;
+    const ctx = out.getContext('2d');
+    if (!ctx) return;
+    ctx.save();
+    ctx.translate(out.width / 2, out.height / 2);
+    ctx.rotate((rotation * Math.PI) / 180);
+    ctx.drawImage(img, crop.x, crop.y, cw, ch, -cw / 2, -ch / 2, cw, ch);
+    ctx.restore();
+    const blob: Blob | null = await new Promise((resolve) => out.toBlob(resolve, outputType));
+    if (blob) {
+      onConfirm(blob, outputName);
+      onOpenChange(false);
+    }
+  }, [crop, rotation, outputName, outputType, onConfirm, onOpenChange]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-xl">
+        <DialogHeader>
+          <DialogTitle>Crop & rotate image</DialogTitle>
+          <DialogDescription>
+            Drag the highlighted box to reposition the crop. Use the rotate button to spin the image
+            in 90° increments.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col items-center gap-3">
+          {imageReady ? (
+            <canvas
+              ref={canvasRef}
+              data-testid="image-cropper-canvas"
+              role="img"
+              aria-label="Image crop preview"
+              className="border rounded-md cursor-move touch-none max-w-full"
+              onPointerDown={handlePointerDown}
+              onPointerMove={handlePointerMove}
+              onPointerUp={handlePointerUp}
+              onPointerCancel={handlePointerUp}
+            />
+          ) : (
+            <div className="flex h-[270px] w-full items-center justify-center text-sm text-muted-foreground">
+              Loading image…
+            </div>
+          )}
+          <div className="flex w-full items-center justify-between text-xs text-muted-foreground">
+            <span>
+              Crop: {Math.round(crop.width)} × {Math.round(crop.height)} px
+            </span>
+            <span>Rotation: {rotation}°</span>
+          </div>
+        </div>
+
+        <DialogFooter className="flex justify-between sm:justify-between">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={rotate}
+            data-testid="image-cropper-rotate"
+          >
+            <RotateCw className="size-4 mr-2" />
+            Rotate 90°
+          </Button>
+          <div className="flex gap-2">
+            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              onClick={handleConfirm}
+              disabled={!imageReady}
+              data-testid="image-cropper-confirm"
+            >
+              <CropIcon className="size-4 mr-2" />
+              Apply crop
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/widgets/ImageField.tsx

@@ -1,8 +1,15 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState, useCallback, lazy, Suspense } from 'react';
 import { Button, EmptyValue } from '@object-ui/components';
-import { Upload, X, Image as ImageIcon } from 'lucide-react';
+import { useUpload } from '@object-ui/providers';
+import { Upload, X, Image as ImageIcon, Crop as CropIcon, Loader2 } from 'lucide-react';
 import { FieldWidgetProps } from './types';
 
+// Lazy-load the cropper so the dialog (canvas + crop logic) is not in the initial
+// ImageField bundle. Consumers that never crop pay zero cost.
+const ImageCropperDialog = lazy(() =>
+  import('./ImageCropperDialog').then((m) => ({ default: m.ImageCropperDialog })),
+);
+
 /**
  * ImageField - Image upload widget with preview thumbnails
  * Supports single and multiple image uploads with drag-and-drop and preview display
@@ -12,6 +19,13 @@ export function ImageField({ value, onChange, field, readonly, ...props }: Field
   const imageField = (field || (props as any).schema) as any;
   const multiple = imageField?.multiple || false;
   const accept = imageField?.accept ? imageField.accept.join(',') : 'image/*';
+  /**
+   * Set `field.crop = false` to opt out of inline cropping. Defaults to enabled.
+   */
+  const cropEnabled = imageField?.crop !== false;
+  const [cropTarget, setCropTarget] = useState<{ index: number; src: string; name: string } | null>(null);
+  const { upload } = useUpload();
+  const [uploading, setUploading] = useState(false);
 
   if (readonly) {
     if (!value) return <EmptyValue />;
@@ -33,23 +47,34 @@ export function ImageField({ value, onChange, field, readonly, ...props }: Field
 
   const images = value ? (Array.isArray(value) ? value : [value]) : [];
 
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = async (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),
-    }));
+    setUploading(true);
+    try {
+      const imageObjects = await Promise.all(
+        selectedFiles.map(async (file) => {
+          const result = await upload(file);
+          return {
+            name: result.name,
+            original_name: file.name,
+            size: result.size,
+            mime_type: result.mimeType,
+            url: result.url,
+          };
+        }),
+      );
 
-    if (multiple) {
-      onChange([...images, ...imageObjects]);
-    } else {
-      onChange(imageObjects[0]);
+      if (multiple) {
+        onChange([...images, ...imageObjects]);
+      } else {
+        onChange(imageObjects[0]);
+      }
+    } finally {
+      setUploading(false);
+      // Reset input so picking the same file again still triggers change.
+      if (inputRef.current) inputRef.current.value = '';
     }
   };
 
@@ -62,6 +87,43 @@ export function ImageField({ value, onChange, field, readonly, ...props }: Field
     }
   };
 
+  const handleCropConfirm = useCallback(
+    async (blob: Blob, name: string) => {
+      if (!cropTarget) return;
+      setUploading(true);
+      try {
+        const result = await upload(blob);
+        const next = {
+          name: result.name || name,
+          original_name: name,
+          size: result.size,
+          mime_type: result.mimeType,
+          url: result.url,
+        };
+        if (multiple) {
+          const updated = [...images];
+          updated[cropTarget.index] = next;
+          onChange(updated);
+        } else {
+          onChange(next);
+        }
+      } finally {
+        setUploading(false);
+        setCropTarget(null);
+      }
+    },
+    [cropTarget, images, multiple, onChange, upload],
+  );
+
+  const openCropper = useCallback(
+    (index: number) => {
+      const img = images[index];
+      if (!img?.url) return;
+      setCropTarget({ index, src: img.url, name: img.name || `image-${index}.png` });
+    },
+    [images],
+  );
+
   return (
     <div className={props.className}>
       <input
@@ -83,15 +145,30 @@ export function ImageField({ value, onChange, field, readonly, ...props }: Field
                   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 className="absolute top-1 right-1 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                  {cropEnabled && (
+                    <Button
+                      type="button"
+                      variant="secondary"
+                      size="sm"
+                      onClick={() => openCropper(idx)}
+                      className="h-6 w-6 p-0"
+                      aria-label={`Crop image ${idx + 1}`}
+                      data-testid={`image-field-crop-${idx}`}
+                    >
+                      <CropIcon className="size-3" />
+                    </Button>
+                  )}
+                  <Button
+                    type="button"
+                    variant="destructive"
+                    size="sm"
+                    onClick={() => handleRemove(idx)}
+                    className="h-6 w-6 p-0"
+                  >
+                    <X className="size-3" />
+                  </Button>
+                </div>
               </div>
             ))}
           </div>
@@ -102,11 +179,29 @@ export function ImageField({ value, onChange, field, readonly, ...props }: Field
           variant="outline"
           onClick={() => inputRef.current?.click()}
           className="w-full"
+          disabled={uploading}
+          data-testid="image-field-upload-button"
         >
-          <ImageIcon className="size-4 mr-2" />
-          {images.length > 0 ? 'Add More Images' : 'Upload Image'}
+          {uploading ? (
+            <Loader2 className="size-4 mr-2 animate-spin" />
+          ) : (
+            <ImageIcon className="size-4 mr-2" />
+          )}
+          {uploading ? 'Uploading…' : images.length > 0 ? 'Add More Images' : 'Upload Image'}
         </Button>
       </div>
+
+      {cropEnabled && cropTarget && (
+        <Suspense fallback={null}>
+          <ImageCropperDialog
+            open
+            onOpenChange={(o) => !o && setCropTarget(null)}
+            src={cropTarget.src}
+            outputName={cropTarget.name}
+            onConfirm={handleCropConfirm}
+          />
+        </Suspense>
+      )}
     </div>
   );
 }