@djangocfg/ui-tools 2.1.160 → 2.1.162

package/src/tools/Uploader/components/UploadDropzone.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import { useCallback, useRef, useState, useMemo } from 'react';
+import { useUploady } from '@rpldy/uploady';
+import { Upload } from 'lucide-react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { buildAcceptString, logger } from '../utils';
+import type { UploadDropzoneProps } from '../types';
+
+export function UploadDropzone({
+  accept = ['image', 'audio', 'video', 'document'],
+  multiple = true,
+  maxSizeMB = 100,
+  compact = false,
+  disabled = false,
+  className,
+  children,
+  onFilesSelected,
+}: UploadDropzoneProps) {
+  const { upload } = useUploady();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragCounter = useRef(0);
+
+  const acceptString = useMemo(() => buildAcceptString(accept), [accept]);
+
+  const handleFiles = useCallback((files: FileList | File[]) => {
+    const fileArray = Array.from(files);
+    const maxBytes = maxSizeMB * 1024 * 1024;
+
+    const validFiles = fileArray.filter(file => {
+      if (file.size > maxBytes) {
+        logger.warn(`File ${file.name} exceeds max size of ${maxSizeMB}MB`);
+        return false;
+      }
+      return true;
+    });
+
+    if (validFiles.length > 0) {
+      onFilesSelected?.(validFiles);
+      upload(validFiles);
+    }
+  }, [upload, maxSizeMB, onFilesSelected]);
+
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter.current++;
+    if (e.dataTransfer.items?.length) {
+      setIsDragging(true);
+    }
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter.current--;
+    if (dragCounter.current === 0) {
+      setIsDragging(false);
+    }
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter.current = 0;
+    setIsDragging(false);
+
+    if (!disabled && e.dataTransfer.files?.length) {
+      handleFiles(e.dataTransfer.files);
+    }
+  }, [disabled, handleFiles]);
+
+  const handleClick = useCallback(() => {
+    if (!disabled) {
+      inputRef.current?.click();
+    }
+  }, [disabled]);
+
+  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files?.length) {
+      handleFiles(e.target.files);
+    }
+    // Reset input to allow re-selecting same file
+    e.target.value = '';
+  }, [handleFiles]);
+
+  return (
+    <div
+      onClick={handleClick}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+      className={cn(
+        'relative flex flex-col items-center justify-center',
+        'border-2 border-dashed rounded-lg cursor-pointer',
+        'transition-colors duration-200',
+        compact ? 'p-4' : 'p-8',
+        isDragging
+          ? 'border-primary bg-primary/5'
+          : 'border-muted-foreground/25 hover:border-muted-foreground/50',
+        disabled && 'opacity-50 cursor-not-allowed',
+        className
+      )}
+    >
+      <input
+        ref={inputRef}
+        type="file"
+        accept={acceptString}
+        multiple={multiple}
+        onChange={handleInputChange}
+        className="hidden"
+        disabled={disabled}
+      />
+
+      {children || (
+        <>
+          <Upload className={cn(
+            'text-muted-foreground mb-2',
+            compact ? 'h-6 w-6' : 'h-10 w-10'
+          )} />
+          <p className={cn(
+            'text-muted-foreground text-center',
+            compact ? 'text-sm' : 'text-base'
+          )}>
+            {isDragging
+              ? 'Drop files here'
+              : 'Drag & drop files or click to browse'}
+          </p>
+          {!compact && (
+            <p className="text-xs text-muted-foreground/60 mt-1">
+              Max {maxSizeMB}MB per file
+            </p>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

package/src/tools/Uploader/components/UploadPageDropOverlay.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useUploady } from '@rpldy/uploady';
+import { Upload } from 'lucide-react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { logger } from '../utils';
+import type { AssetType } from '../types';
+
+export interface UploadPageDropOverlayProps {
+  /** Allowed asset types */
+  accept?: AssetType[];
+  /** Max file size in MB */
+  maxSizeMB?: number;
+  /** Custom overlay content */
+  children?: React.ReactNode;
+  /** Custom class for overlay */
+  className?: string;
+  /** Callback when files are dropped */
+  onFilesDropped?: (files: File[]) => void;
+}
+
+export function UploadPageDropOverlay({
+  accept = ['image', 'audio', 'video', 'document'],
+  maxSizeMB = 100,
+  children,
+  className,
+  onFilesDropped,
+}: UploadPageDropOverlayProps) {
+  const { upload } = useUploady();
+  const [isDragging, setIsDragging] = useState(false);
+  const dragCounter = useRef(0);
+
+  const handleFiles = useCallback((files: FileList | File[]) => {
+    const fileArray = Array.from(files);
+    const maxBytes = maxSizeMB * 1024 * 1024;
+
+    const validFiles = fileArray.filter(file => {
+      if (file.size > maxBytes) {
+        logger.warn(`File ${file.name} exceeds max size of ${maxSizeMB}MB`);
+        return false;
+      }
+      return true;
+    });
+
+    if (validFiles.length > 0) {
+      logger.info(`Page drop: ${validFiles.length} file(s)`);
+      onFilesDropped?.(validFiles);
+      upload(validFiles);
+    }
+  }, [upload, maxSizeMB, onFilesDropped]);
+
+  const handleDragEnter = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter.current++;
+
+    if (e.dataTransfer?.items?.length) {
+      setIsDragging(true);
+    }
+  }, []);
+
+  const handleDragLeave = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter.current--;
+
+    if (dragCounter.current === 0) {
+      setIsDragging(false);
+    }
+  }, []);
+
+  const handleDragOver = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDrop = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter.current = 0;
+    setIsDragging(false);
+
+    if (e.dataTransfer?.files?.length) {
+      handleFiles(e.dataTransfer.files);
+    }
+  }, [handleFiles]);
+
+  useEffect(() => {
+    document.addEventListener('dragenter', handleDragEnter);
+    document.addEventListener('dragleave', handleDragLeave);
+    document.addEventListener('dragover', handleDragOver);
+    document.addEventListener('drop', handleDrop);
+
+    return () => {
+      document.removeEventListener('dragenter', handleDragEnter);
+      document.removeEventListener('dragleave', handleDragLeave);
+      document.removeEventListener('dragover', handleDragOver);
+      document.removeEventListener('drop', handleDrop);
+    };
+  }, [handleDragEnter, handleDragLeave, handleDragOver, handleDrop]);
+
+  if (!isDragging) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        'fixed inset-0 z-50',
+        'bg-background/80 backdrop-blur-sm',
+        'flex items-center justify-center',
+        'pointer-events-none',
+        className
+      )}
+    >
+      {children || (
+        <div className="flex flex-col items-center gap-4 p-8 rounded-xl border-2 border-dashed border-primary bg-background/90">
+          <Upload className="h-16 w-16 text-primary" />
+          <div className="text-center">
+            <p className="text-lg font-medium">Drop files anywhere</p>
+            <p className="text-sm text-muted-foreground">
+              Release to upload
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/tools/Uploader/components/UploadPreviewItem.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import { useMemo, useCallback } from 'react';
+import { X, CheckCircle, AlertCircle, Loader2, FileIcon, ImageIcon, FileAudio, FileVideo, RotateCcw } from 'lucide-react';
+import { cn } from '@djangocfg/ui-core/lib';
+import {
+  Button,
+  Progress,
+  Badge,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  Skeleton,
+} from '@djangocfg/ui-core/components';
+import { formatFileSize } from '../utils';
+import type { UploadPreviewItemProps, AssetType } from '../types';
+
+const ASSET_ICONS: Record<AssetType, typeof FileIcon> = {
+  image: ImageIcon,
+  audio: FileAudio,
+  video: FileVideo,
+  document: FileIcon,
+};
+
+export function UploadPreviewItem({
+  item,
+  onRemove,
+  onRetry,
+  showThumbnail = true,
+}: UploadPreviewItemProps) {
+  const { id, file, status, progress, previewUrl, error } = item;
+
+  const assetType = useMemo((): AssetType => {
+    if (file.type.startsWith('image/')) return 'image';
+    if (file.type.startsWith('audio/')) return 'audio';
+    if (file.type.startsWith('video/')) return 'video';
+    return 'document';
+  }, [file.type]);
+
+  const Icon = ASSET_ICONS[assetType];
+  const canShowPreview = showThumbnail && previewUrl && assetType === 'image';
+
+  const handleRemove = useCallback(() => {
+    onRemove?.(id);
+  }, [id, onRemove]);
+
+  const handleRetry = useCallback(() => {
+    onRetry?.(id);
+  }, [id, onRetry]);
+
+  const canRetry = (status === 'error' || status === 'aborted') && onRetry;
+
+  const progressPercent = Math.round(progress);
+
+  const statusBadge = useMemo(() => {
+    switch (status) {
+      case 'uploading':
+        return (
+          <Badge variant="secondary" className="gap-1 tabular-nums">
+            <Loader2 className="h-3 w-3 animate-spin" />
+            {progressPercent}%
+          </Badge>
+        );
+      case 'complete':
+        return (
+          <Badge variant="default" className="gap-1 bg-green-500">
+            <CheckCircle className="h-3 w-3" />
+            Done
+          </Badge>
+        );
+      case 'error':
+        return (
+          <Badge variant="destructive" className="gap-1">
+            <AlertCircle className="h-3 w-3" />
+            Error
+          </Badge>
+        );
+      case 'aborted':
+        return (
+          <Badge variant="secondary" className="gap-1">
+            Cancelled
+          </Badge>
+        );
+      default:
+        return (
+          <Badge variant="outline">
+            Pending
+          </Badge>
+        );
+    }
+  }, [status, progressPercent]);
+
+  return (
+    <div className={cn(
+      'flex items-center gap-3 p-3 rounded-lg border',
+      'bg-card',
+      error && 'border-destructive/50'
+    )}>
+      {/* Thumbnail / Icon */}
+      <div className="flex-shrink-0 w-12 h-12 rounded-md overflow-hidden bg-muted flex items-center justify-center">
+        {canShowPreview ? (
+          previewUrl ? (
+            <img
+              src={previewUrl}
+              alt={file.name}
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <Skeleton className="w-full h-full" />
+          )
+        ) : (
+          <Icon className="h-6 w-6 text-muted-foreground" />
+        )}
+      </div>
+
+      {/* Info */}
+      <div className="flex-1 min-w-0">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <p className="text-sm font-medium truncate cursor-default">{file.name}</p>
+          </TooltipTrigger>
+          <TooltipContent side="top" className="max-w-xs">
+            <p className="break-all">{file.name}</p>
+          </TooltipContent>
+        </Tooltip>
+        <p className="text-xs text-muted-foreground tabular-nums">
+          {formatFileSize(file.size)}
+        </p>
+        {status === 'uploading' && (
+          <Progress value={progressPercent} className="h-1 mt-1" />
+        )}
+        {error && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <p className="text-xs text-destructive mt-1 truncate cursor-default">{error}</p>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" className="max-w-xs">
+              <p className="break-all">{error}</p>
+            </TooltipContent>
+          </Tooltip>
+        )}
+      </div>
+
+      {/* Status & Actions */}
+      <div className="flex items-center gap-2">
+        {statusBadge}
+        {canRetry && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={handleRetry}
+              >
+                <RotateCcw className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Retry upload</TooltipContent>
+          </Tooltip>
+        )}
+        {(status === 'pending' || status === 'uploading' || status === 'error' || status === 'aborted') && onRemove && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={handleRemove}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {status === 'uploading' ? 'Cancel upload' : 'Remove'}
+            </TooltipContent>
+          </Tooltip>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/tools/Uploader/components/UploadPreviewList.tsx

@@ -0,0 +1,204 @@
+'use client';
+
+import { useState, useCallback, useEffect } from 'react';
+import {
+  useBatchAddListener,
+  useItemProgressListener,
+  useItemFinishListener,
+  useItemErrorListener,
+  useItemAbortListener,
+  useAbortItem,
+  useUploady,
+} from '@rpldy/uploady';
+import { cn } from '@djangocfg/ui-core/lib';
+import { UploadPreviewItem } from './UploadPreviewItem';
+import {
+  buildAssetFromResponse,
+  extractErrorMessage,
+} from '../utils';
+import type { UploadItem, UploadPreviewListProps } from '../types';
+
+export function UploadPreviewList({
+  className,
+  onRemove,
+  onRetry,
+  showThumbnails = true,
+}: UploadPreviewListProps) {
+  const [items, setItems] = useState<Map<string, UploadItem>>(new Map());
+  const abortItem = useAbortItem();
+  const { upload } = useUploady();
+
+  // Batch added - create initial items
+  useBatchAddListener((batch) => {
+    setItems(prev => {
+      const next = new Map(prev);
+      batch.items.forEach(item => {
+        const file = item.file as File;
+        let previewUrl: string | undefined;
+
+        // Create object URL for image preview
+        if (file.type.startsWith('image/')) {
+          previewUrl = URL.createObjectURL(file);
+        }
+
+        next.set(item.id, {
+          id: item.id,
+          file,
+          status: 'pending',
+          progress: 0,
+          previewUrl,
+        });
+      });
+      return next;
+    });
+  });
+
+  // Progress update
+  useItemProgressListener((item) => {
+    setItems(prev => {
+      const next = new Map(prev);
+      const existing = next.get(item.id);
+      if (existing) {
+        next.set(item.id, {
+          ...existing,
+          status: 'uploading',
+          progress: item.completed,
+        });
+      }
+      return next;
+    });
+  });
+
+  // Upload complete
+  useItemFinishListener((item) => {
+    setItems(prev => {
+      const next = new Map(prev);
+      const existing = next.get(item.id);
+      if (existing) {
+        const response = item.uploadResponse?.data as Record<string, unknown> | undefined;
+        const asset = response
+          ? buildAssetFromResponse(response, existing.file)
+          : undefined;
+
+        next.set(item.id, {
+          ...existing,
+          status: 'complete',
+          progress: 100,
+          asset,
+        });
+      }
+      return next;
+    });
+  });
+
+  // Error
+  useItemErrorListener((item) => {
+    setItems(prev => {
+      const next = new Map(prev);
+      const existing = next.get(item.id);
+      if (existing) {
+        const response = item.uploadResponse?.data as Record<string, unknown> | null;
+        const status = item.uploadResponse?.status || 0;
+        const error = extractErrorMessage(response, status);
+
+        next.set(item.id, {
+          ...existing,
+          status: 'error',
+          error,
+        });
+      }
+      return next;
+    });
+  });
+
+  // Aborted
+  useItemAbortListener((item) => {
+    setItems(prev => {
+      const next = new Map(prev);
+      const existing = next.get(item.id);
+      if (existing) {
+        next.set(item.id, {
+          ...existing,
+          status: 'aborted',
+        });
+      }
+      return next;
+    });
+  });
+
+  // Handle remove
+  const handleRemove = useCallback((id: string) => {
+    const item = items.get(id);
+    if (item) {
+      // Abort if uploading
+      if (item.status === 'uploading') {
+        abortItem(id);
+      }
+      // Revoke object URL
+      if (item.previewUrl) {
+        URL.revokeObjectURL(item.previewUrl);
+      }
+    }
+
+    setItems(prev => {
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+
+    onRemove?.(id);
+  }, [items, abortItem, onRemove]);
+
+  // Handle retry
+  const handleRetry = useCallback((id: string) => {
+    const item = items.get(id);
+    if (item && (item.status === 'error' || item.status === 'aborted')) {
+      // Reset status to pending
+      setItems(prev => {
+        const next = new Map(prev);
+        next.set(id, {
+          ...item,
+          status: 'pending',
+          progress: 0,
+          error: undefined,
+        });
+        return next;
+      });
+
+      // Re-upload the file
+      upload(item.file);
+      onRetry?.(id);
+    }
+  }, [items, upload, onRetry]);
+
+  // Cleanup object URLs on unmount
+  useEffect(() => {
+    return () => {
+      items.forEach(item => {
+        if (item.previewUrl) {
+          URL.revokeObjectURL(item.previewUrl);
+        }
+      });
+    };
+  }, []);
+
+  const itemsArray = Array.from(items.values());
+
+  if (itemsArray.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      {itemsArray.map(item => (
+        <UploadPreviewItem
+          key={item.id}
+          item={item}
+          onRemove={handleRemove}
+          onRetry={handleRetry}
+          showThumbnail={showThumbnails}
+        />
+      ))}
+    </div>
+  );
+}