@brcarddev/frontend-commons 1.0.2

package/src/components/atoms/InputUpload/input-upload.tsx

@@ -0,0 +1,434 @@
+import { ChangeEvent, ComponentProps, forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+
+import { cn } from '@/utils/cn';
+
+import { Box, Flex, Label, RenderCondition, Trash01, Typography, UploadCloud02, User01 } from '@/components';
+
+export interface InputUploadProps extends Omit<ComponentProps<'input'>, 'onChange' | 'onError' | 'value'> {
+  /** Text displayed on the upload button */
+  buttonText?: string;
+
+  /** Maximum file size in MB. Files larger than this will be rejected */
+  maxSize?: number;
+
+  /** Maximum file size error message */
+  maxSizeErrorMessage?: string;
+
+  /** Accepted file types error message */
+  acceptErrorMessage?: string;
+
+  /** Label text displayed above the input field */
+  label?: string;
+
+  /** Helper text displayed below the input field */
+  helperText?: string;
+
+  /** Whether to show a preview area (image preview or default icon) */
+  showPreview?: boolean;
+
+  /** Size of the preview area: 'sm' (64px), 'md' (92px), or 'lg' (128px) */
+  previewSize?: 'sm' | 'md' | 'lg' | 'custom';
+
+  /** Variant of the preview area: 'default' (default), 'rounded' (rounded), 'square' (square), 'custom' (custom) */
+  previewVariant?: 'rounded' | 'square' | 'banner' | 'custom';
+
+  /** Customize the appearence of the preview */
+  customPreviewVariant?: string;
+
+  /** Customize the size of the preview */
+  customPreviewSizes?: string;
+
+  /** Customize the appearence of the preview */
+  customPreviewImage?: string;
+
+  /** Custom icon to display in the preview area when no image is selected */
+  defaultIcon?: React.ReactNode;
+
+  /** Callback triggered when a file is selected or deselected */
+  onFileSelect?: (file: File | null, previewUrl?: string) => void;
+
+  /** Callback triggered when file upload is completed successfully */
+  onUploadComplete?: (url: string) => void;
+
+  /** Callback triggered when an error occurs during file selection or upload */
+  onError?: (error: string) => void;
+
+  /** Whether the component is in a loading state (shows spinner) */
+  loading?: boolean;
+
+  /** Loading text */
+  loadingText?: boolean;
+
+  /** Error message to display below the input field */
+  error?: string;
+
+  /** Current value of the upload field (File, URL string, or null) */
+  value?: UploadValue;
+
+  /** Callback triggered when the value changes */
+  onChange?: (value: UploadValue) => void;
+
+  /** Function to handle file upload. Should return a Promise that resolves to the uploaded file URL */
+  uploadFunction?: (file: File) => Promise<string>;
+}
+
+/** Type representing the possible values for the upload field */
+export type UploadValue = File | string | null;
+
+export const InputUpload = forwardRef<HTMLInputElement, InputUploadProps>(({
+  buttonText = 'Importar',
+  maxSize = 50,
+  label = '',
+  placeholder = 'Selecione um arquivo',
+  helperText = '',
+  showPreview = false,
+  previewSize = 'md',
+  previewVariant = 'rounded',
+  customPreviewVariant = '',
+  customPreviewSizes = '',
+  customPreviewImage = '',
+  defaultIcon,
+  onFileSelect,
+  onUploadComplete,
+  onError,
+  loading = false,
+  disabled = false,
+  error = '',
+  accept = 'image/*,video/*,audio/*,.pdf,.docx,.txt,.xlsx,.csv',
+  value,
+  onChange,
+  uploadFunction,
+  maxSizeErrorMessage = '',
+  acceptErrorMessage = '',
+  loadingText = '',
+  ...props
+}, ref) => {
+  const [ previewUrl, setPreviewUrl ] = useState<string | null>(null);
+  const [ selectedFile, setSelectedFile ] = useState<File | null>(null);
+  const [ isUploading, setIsUploading ] = useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const uploadButtonRef = useRef<HTMLButtonElement>(null);
+
+  const isUrl = typeof value === 'string' && value.length > 0;
+  const isFile = value instanceof File;
+
+  useEffect(() => {
+    if (isUrl) {
+      setPreviewUrl(value);
+      setSelectedFile(null);
+    } else if (isFile) {
+      setSelectedFile(value);
+
+      if (showPreview && value.type.startsWith('image/')) {
+        const url = URL.createObjectURL(value);
+        setPreviewUrl(url);
+      }
+    } else {
+      setSelectedFile(null);
+      setPreviewUrl(null);
+    }
+  }, [ value, isUrl, isFile, showPreview ]);
+
+  useEffect(() => {
+    return () => {
+      if (previewUrl && !isUrl) {
+        URL.revokeObjectURL(previewUrl);
+      }
+    };
+  }, [ previewUrl, isUrl ]);
+
+  const validateFile = useCallback((file: File): string | null => {
+    if (maxSize && file.size > maxSize * 1024 * 1024) {
+      return maxSizeErrorMessage || `Arquivo muito grande. Tamanho máximo: ${maxSize}MB`;
+    }
+
+    if (accept) {
+      const acceptedTypes = accept.split(',').map(type => type.trim());
+      const fileType = file.type;
+      const fileExtension = `.${file.name.split('.').pop()?.toLowerCase()}`;
+
+      const isValidType = acceptedTypes.some(type => {
+        if (type.startsWith('.')) {
+          return fileExtension === type.toLowerCase();
+        }
+
+        return fileType === type || fileType.startsWith(type.replace('*', ''));
+      });
+
+      if (!isValidType) {
+        return acceptErrorMessage || `Tipo de arquivo não suportado. Tipos aceitos: ${accept}`;
+      }
+    }
+
+    return null;
+  }, [ maxSize, accept, maxSizeErrorMessage, acceptErrorMessage ]);
+
+  const handleUpload = useCallback(async (file: File): Promise<string | null> => {
+    if (!uploadFunction) {
+      return null;
+    }
+
+    try {
+      setIsUploading(true);
+      const url = await uploadFunction(file);
+      onUploadComplete?.(url);
+      return url;
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Erro no upload';
+      onError?.(errorMessage);
+      return null;
+    } finally {
+      setIsUploading(false);
+    }
+  }, [ uploadFunction, onUploadComplete, onError ]);
+
+  const handleFileSelect = useCallback(async (file: File | null) => {
+    if (previewUrl && !isUrl) {
+      URL.revokeObjectURL(previewUrl);
+    }
+
+    if (file) {
+      const validationError = validateFile(file);
+
+      if (validationError) {
+        onError?.(validationError);
+        return;
+      }
+
+      setSelectedFile(file);
+
+      if (showPreview && file.type.startsWith('image/')) {
+        const localUrl = URL.createObjectURL(file);
+        setPreviewUrl(localUrl);
+      }
+
+      onFileSelect?.(file, previewUrl || undefined);
+      onChange?.(file);
+
+      if (uploadFunction) {
+        const uploadedUrl = await handleUpload(file);
+
+        if (uploadedUrl) {
+          onChange?.(uploadedUrl);
+          setPreviewUrl(uploadedUrl);
+          setSelectedFile(null);
+        }
+      }
+    } else {
+      setSelectedFile(null);
+      setPreviewUrl(null);
+      onFileSelect?.(null);
+      onChange?.(null);
+
+      if (inputRef.current) {
+        inputRef.current.value = '';
+      }
+    }
+  }, [ previewUrl, validateFile, showPreview, onFileSelect, onError, onChange, uploadFunction, handleUpload, isUrl ]);
+
+  const handleInputChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0] || null;
+    handleFileSelect(file);
+  }, [ handleFileSelect ]);
+
+  const handleDelete = useCallback(() => {
+    setSelectedFile(null);
+    setPreviewUrl(null);
+    onChange?.(null);
+
+    if (inputRef.current) {
+      inputRef.current.value = '';
+    }
+  }, [ onChange ]);
+
+  const handleClick = useCallback(() => {
+    if (!disabled && !loading && !isUploading) {
+      inputRef.current?.click();
+    }
+  }, [ disabled, loading, isUploading ]);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+
+    if (disabled || loading || isUploading) return;
+
+    const { files } = e.dataTransfer;
+
+    if (files.length > 0) {
+      handleFileSelect(files[0]);
+    }
+  }, [ disabled, loading, isUploading, handleFileSelect ]);
+
+  const getPreviewSizeClasses = () => {
+    switch (previewSize) {
+      case 'sm': return 'w-16 h-16 min-w-16';
+      case 'lg': return 'w-32 h-32 min-w-32';
+      case 'custom': return customPreviewSizes;
+      default: return 'w-[92px] h-[92px] min-w-[92px]';
+    }
+  };
+
+  const getDefaultIcon = () => {
+    if (defaultIcon) return defaultIcon;
+
+    if (previewVariant === 'rounded') {
+      return <User01 className="size-8 text-gray-400" />;
+    }
+
+    return <UploadCloud02 className="size-6 text-gray-400" />;
+  };
+
+  const shouldShowImagePreview = previewUrl && (
+    isUrl ||
+    (selectedFile && selectedFile.type.startsWith('image/'))
+  );
+
+  const isLoading = loading || isUploading;
+
+  return (
+    <Box className="w-full">
+      <Flex className="gap-4">
+        {showPreview && (
+          <Flex
+            className={cn(
+              getPreviewSizeClasses(),
+              'items-center justify-center bg-gray-50 overflow-hidden cursor-pointer',
+              previewVariant === 'rounded' && 'rounded-full border border-gray-400',
+              previewVariant === 'square' && 'rounded-xs border-2 border-dashed border-gray-400 p-3',
+              previewVariant === 'banner' && 'rounded-xs border-2 border-dashed border-gray-400',
+              previewVariant === 'custom' && customPreviewVariant,
+              shouldShowImagePreview && previewVariant === 'square' && 'border-primary'
+            )}
+            onClick={handleClick}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+          >
+            {shouldShowImagePreview ? (
+              <img
+                src={previewUrl}
+                alt="Preview"
+                className={cn(
+                  'w-full h-full',
+                  previewVariant === 'rounded' && 'rounded-full object-cover',
+                  previewVariant === 'square' && 'rounded-xs object-contain',
+                  previewVariant === 'banner' && 'rounded-xs object-cover',
+                  previewVariant === 'custom' && customPreviewImage
+                )}
+              />
+            ) : (
+              getDefaultIcon()
+            )}
+          </Flex>
+        )}
+
+        <Box className="flex-1 min-w-0">
+          {label && (
+            <Label htmlFor={props.id} className="mb-1.5">
+              {label}
+            </Label>
+          )}
+
+          <Flex className="h-fit bg-white rounded-r-2xl rounded-l-md min-w-0">
+            <Flex
+              className={cn(
+                'h-10 flex-1 min-w-0 border rounded-l-md px-3 items-center justify-between',
+                error && 'border-error-500',
+                (disabled || isLoading) && 'opacity-50 cursor-not-allowed'
+              )}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+            >
+              <Typography className="flex-1 min-w-0 text-gray-500 font-normal leading-10! text-base truncate">
+                {isUrl ? value?.split('/')?.pop()?.split('?')[0] : selectedFile ? selectedFile.name : placeholder}
+              </Typography>
+
+              <RenderCondition condition={!!selectedFile || !!value}>
+                <button type="button" disabled={disabled || isLoading} onClick={handleDelete} className="p-1.5 hover:bg-gray-100 rounded-full cursor-pointer transition-colors">
+                  <Trash01 className="size-4 text-error-500" />
+                </button>
+              </RenderCondition>
+            </Flex>
+
+            <button
+              type="button"
+              disabled={disabled || isLoading}
+              className={cn(
+                'h-10',
+                'border flex items-center gap-2 rounded-r-2xl px-3',
+                'font-semibold text-gray-700 text-base cursor-pointer whitespace-nowrap',
+                'transition-colors',
+                !disabled && !isLoading && 'hover:bg-gray-50',
+                (disabled || isLoading) && 'text-gray-400 cursor-not-allowed border-gray-200'
+              )}
+              onClick={handleClick}
+              ref={uploadButtonRef}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+            >
+              {isLoading ? (
+                <div className="size-5 animate-spin rounded-full border-2 border-gray-300 border-t-gray-600" />
+              ) : (
+                <UploadCloud02 className="size-5 text-gray-400" />
+              )}
+              {isUploading ? (loadingText || 'Enviando...') : buttonText}
+            </button>
+          </Flex>
+
+          <input
+            ref={(node) => {
+              if (typeof ref === 'function') {
+                ref(node);
+              } else if (ref) {
+                ref.current = node;
+              }
+
+              inputRef.current = node;
+            }}
+            type="file"
+            className="hidden"
+            accept={accept}
+            disabled={disabled || isLoading}
+            onChange={handleInputChange}
+            onFocus={() => uploadButtonRef.current?.focus()}
+            {...props}
+          />
+
+          {(helperText || error || (accept && maxSize)) && (
+            <Box className="mt-1.5">
+              {error && (
+                <Flex className="items-center gap-1 text-error-500 text-sm">
+                  <Typography className="text-sm">{error}</Typography>
+                </Flex>
+              )}
+
+              {helperText && !error && (
+                <Typography className="text-gray-500 text-sm">
+                  {helperText}
+                </Typography>
+              )}
+
+              {accept && maxSize && !error && !helperText && (
+                <Typography className="text-gray-500 text-sm">
+                  Formatos aceitos: {accept} (Máx. {maxSize}MB)
+                </Typography>
+              )}
+            </Box>
+          )}
+        </Box>
+      </Flex>
+    </Box>
+  );
+});
+
+InputUpload.displayName = 'InputUpload';

package/src/components/atoms/InputWithButton/index.ts

@@ -0,0 +1,2 @@
+export type { InputWithButtonProps } from './input-with-button';
+export { InputWithButton } from './input-with-button';