@pattern-stack/frontend-patterns 0.1.0 → 0.1.2

package/src/atoms/composed/FileUpload/FileUpload.tsx

@@ -0,0 +1,477 @@
+import React, { useState, useRef, useCallback, useId } from 'react';
+import { Upload, X, File, Image, AlertCircle, CheckCircle, Loader2 } from 'lucide-react';
+import { cn } from '../../utils/utils';
+import { Button } from '../../ui/button';
+import { ProgressBar } from '../ProgressBar';
+import { getAnimationClasses, animationPresets } from '../../utils/animations';
+
+export interface FileUploadFile {
+  id: string;
+  file: File;
+  name: string;
+  size: number;
+  type: string;
+  progress?: number;
+  status: 'pending' | 'uploading' | 'success' | 'error';
+  error?: string;
+  preview?: string;
+}
+
+export interface FileUploadProps {
+  /** Accept specific file types */
+  accept?: string;
+  /** Allow multiple file selection */
+  multiple?: boolean;
+  /** Maximum file size in bytes */
+  maxSize?: number;
+  /** Maximum number of files */
+  maxFiles?: number;
+  /** Visual variant */
+  variant?: 'default' | 'compact' | 'large';
+  /** Disabled state */
+  disabled?: boolean;
+  /** Show file previews for images */
+  showPreview?: boolean;
+  /** Upload function */
+  onUpload?: (files: FileUploadFile[]) => Promise<void>;
+  /** File change handler */
+  onChange?: (files: FileUploadFile[]) => void;
+  /** File remove handler */
+  onRemove?: (fileId: string) => void;
+  /** Custom upload text */
+  uploadText?: string;
+  /** Custom drag text */
+  dragText?: string;
+  /** Additional CSS classes */
+  className?: string;
+  /** Error state */
+  error?: string;
+  /** Loading state */
+  loading?: boolean;
+}
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};
+
+const isImageFile = (file: File): boolean => {
+  return file.type.startsWith('image/');
+};
+
+const createFilePreview = (file: File): Promise<string> => {
+  return new Promise((resolve) => {
+    if (!isImageFile(file)) {
+      resolve('');
+      return;
+    }
+    
+    const reader = new FileReader();
+    reader.onload = (e) => resolve(e.target?.result as string || '');
+    reader.readAsDataURL(file);
+  });
+};
+
+export const FileUpload: React.FC<FileUploadProps> = ({
+  accept,
+  multiple = false,
+  maxSize = 10 * 1024 * 1024, // 10MB default
+  maxFiles = multiple ? 10 : 1,
+  variant = 'default',
+  disabled = false,
+  showPreview = true,
+  onUpload,
+  onChange,
+  onRemove,
+  uploadText = 'Choose files or drag and drop',
+  dragText = 'Drop files here',
+  className,
+  error,
+  loading = false
+}) => {
+  const [files, setFiles] = useState<FileUploadFile[]>([]);
+  const [isDragActive, setIsDragActive] = useState(false);
+  const [, setDragCounter] = useState(0);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const dropZoneId = useId();
+
+  const validateFile = (file: File): string | null => {
+    if (maxSize && file.size > maxSize) {
+      return `File size exceeds ${formatFileSize(maxSize)}`;
+    }
+    
+    if (accept) {
+      const acceptedTypes = accept.split(',').map(type => type.trim().toLowerCase());
+      const fileType = file.type.toLowerCase();
+      const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
+      
+      const isValidType = acceptedTypes.some(acceptedType => {
+        if (acceptedType.startsWith('.')) {
+          return fileExtension === acceptedType;
+        }
+        if (acceptedType.includes('/*')) {
+          const baseType = acceptedType.split('/')[0];
+          return fileType.startsWith(baseType + '/');
+        }
+        return fileType === acceptedType;
+      });
+      
+      if (!isValidType) {
+        return `File type not accepted. Accepted types: ${accept}`;
+      }
+    }
+    
+    return null;
+  };
+
+  const processFiles = useCallback(async (fileList: FileList) => {
+    const newFiles: FileUploadFile[] = [];
+    
+    // Check max files limit
+    if (files.length + fileList.length > maxFiles) {
+      return;
+    }
+    
+    for (let i = 0; i < fileList.length; i++) {
+      const file = fileList[i];
+      const validationError = validateFile(file);
+      
+      // Check for duplicates
+      const isDuplicate = files.some(existingFile => 
+        existingFile.name === file.name && existingFile.size === file.size
+      );
+      
+      if (isDuplicate) continue;
+      
+      const fileUpload: FileUploadFile = {
+        id: `${Date.now()}-${i}`,
+        file,
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        status: validationError ? 'error' : 'pending',
+        error: validationError || undefined
+      };
+      
+      // Create preview for images
+      if (showPreview && isImageFile(file) && !validationError) {
+        try {
+          fileUpload.preview = await createFilePreview(file);
+        } catch {
+          // Ignore preview errors
+        }
+      }
+      
+      newFiles.push(fileUpload);
+    }
+    
+    const updatedFiles = [...files, ...newFiles];
+    setFiles(updatedFiles);
+    onChange?.(updatedFiles);
+  }, [files, maxFiles, maxSize, accept, showPreview, onChange, validateFile]);
+
+  const removeFile = useCallback((fileId: string) => {
+    const updatedFiles = files.filter(file => file.id !== fileId);
+    setFiles(updatedFiles);
+    onRemove?.(fileId);
+    onChange?.(updatedFiles);
+  }, [files, onRemove, onChange]);
+
+  const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const fileList = e.target.files;
+    if (fileList && fileList.length > 0) {
+      processFiles(fileList);
+    }
+    // Reset input value to allow same file selection
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  }, [processFiles]);
+
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragCounter(prev => prev + 1);
+    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+      setIsDragActive(true);
+    }
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragCounter(prev => {
+      const newCount = prev - 1;
+      if (newCount === 0) {
+        setIsDragActive(false);
+      }
+      return newCount;
+    });
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragActive(false);
+    setDragCounter(0);
+    
+    const droppedFiles = e.dataTransfer.files;
+    if (droppedFiles && droppedFiles.length > 0) {
+      processFiles(droppedFiles);
+    }
+  }, [processFiles]);
+
+  const handleUpload = async () => {
+    if (!onUpload) return;
+    
+    const validFiles = files.filter(file => file.status !== 'error');
+    if (validFiles.length === 0) return;
+    
+    // Set all valid files to uploading
+    const uploadingFiles = files.map(file => 
+      file.status === 'error' ? file : { ...file, status: 'uploading' as const, progress: 0 }
+    );
+    setFiles(uploadingFiles);
+    
+    try {
+      await onUpload(validFiles);
+      
+      // Mark as success
+      const successFiles = files.map(file => 
+        file.status === 'error' ? file : { ...file, status: 'success' as const, progress: 100 }
+      );
+      setFiles(successFiles);
+    } catch (uploadError) {
+      // Mark as error
+      const errorFiles = files.map(file => 
+        file.status === 'uploading' ? { 
+          ...file, 
+          status: 'error' as const, 
+          error: uploadError instanceof Error ? uploadError.message : 'Upload failed' 
+        } : file
+      );
+      setFiles(errorFiles);
+    }
+  };
+
+  const variantClasses = {
+    default: 'p-8',
+    compact: 'p-4',
+    large: 'p-12'
+  };
+
+  const iconSizes = {
+    default: 'w-8 h-8',
+    compact: 'w-6 h-6',
+    large: 'w-12 h-12'
+  };
+
+  const textSizes = {
+    default: 'text-base',
+    compact: 'text-sm',
+    large: 'text-lg'
+  };
+
+  const getFileIcon = (file: FileUploadFile) => {
+    if (isImageFile(file.file)) {
+      return <Image className="w-4 h-4" />;
+    }
+    return <File className="w-4 h-4" />;
+  };
+
+  const getStatusIcon = (file: FileUploadFile) => {
+    switch (file.status) {
+      case 'uploading':
+        return <Loader2 className="w-4 h-4 animate-spin text-category-1" />;
+      case 'success':
+        return <CheckCircle className="w-4 h-4 text-status-success" />;
+      case 'error':
+        return <AlertCircle className="w-4 h-4 text-status-error" />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className={cn("space-y-4", className)} data-component-name="FileUpload">
+      {/* Drop zone */}
+      <div
+        className={cn(
+          'border-2 border-dashed rounded-lg transition-all duration-200 cursor-pointer',
+          'flex flex-col items-center justify-center text-center',
+          variantClasses[variant],
+          disabled ? 
+            'border-border/50 bg-muted/30 cursor-not-allowed' :
+            isDragActive ?
+              'border-category-1 bg-category-1/5 scale-[1.02]' :
+              error ?
+                'border-status-error bg-status-error/5 hover:border-status-error/70' :
+                'border-border hover:border-category-1/50 hover:bg-muted/30',
+          getAnimationClasses(animationPresets.subtle)
+        )}
+        onDragEnter={!disabled ? handleDragEnter : undefined}
+        onDragLeave={!disabled ? handleDragLeave : undefined}
+        onDragOver={!disabled ? handleDragOver : undefined}
+        onDrop={!disabled ? handleDrop : undefined}
+        onClick={() => !disabled && fileInputRef.current?.click()}
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        aria-label="File upload area"
+        aria-describedby={`${dropZoneId}-description`}
+        onKeyDown={(e) => {
+          if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            fileInputRef.current?.click();
+          }
+        }}
+        data-component-name="FileUploadDropZone"
+      >
+        <Upload className={cn(
+          iconSizes[variant],
+          disabled ? 'text-muted-foreground' : 
+          isDragActive ? 'text-category-1' : 
+          error ? 'text-status-error' : 'text-muted-foreground'
+        )} />
+        
+        <div className="mt-4 space-y-1">
+          <p className={cn(
+            textSizes[variant],
+            'font-medium',
+            disabled ? 'text-muted-foreground' : 
+            isDragActive ? 'text-category-1' : 
+            error ? 'text-status-error' : 'text-foreground'
+          )}>
+            {isDragActive ? dragText : uploadText}
+          </p>
+          
+          <p className="text-xs text-muted-foreground" id={`${dropZoneId}-description`}>
+            {accept && `Accepted types: ${accept}`}
+            {maxSize && ` • Max size: ${formatFileSize(maxSize)}`}
+            {multiple && ` • Max files: ${maxFiles}`}
+          </p>
+        </div>
+
+        {error && (
+          <div className="mt-2 text-xs text-status-error font-medium">
+            {error}
+          </div>
+        )}
+      </div>
+
+      {/* Hidden file input */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        onChange={handleFileSelect}
+        className="hidden"
+        disabled={disabled}
+        aria-label="File input"
+      />
+
+      {/* File list */}
+      {files.length > 0 && (
+        <div className="space-y-2" data-component-name="FileUploadList">
+          {files.map((file) => (
+            <div
+              key={file.id}
+              className={cn(
+                'flex items-center gap-3 p-3 rounded-lg border bg-card',
+                file.status === 'error' && 'border-status-error/30 bg-status-error/5'
+              )}
+              data-component-name="FileUploadItem"
+            >
+              {/* File preview or icon */}
+              <div className="flex-shrink-0">
+                {file.preview ? (
+                  <img
+                    src={file.preview}
+                    alt={file.name}
+                    className="w-10 h-10 object-cover rounded border"
+                  />
+                ) : (
+                  <div className="w-10 h-10 flex items-center justify-center bg-muted rounded border">
+                    {getFileIcon(file)}
+                  </div>
+                )}
+              </div>
+
+              {/* File info */}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <p className="text-sm font-medium text-foreground truncate">
+                    {file.name}
+                  </p>
+                  {getStatusIcon(file)}
+                </div>
+                
+                <div className="flex items-center gap-2 mt-1">
+                  <p className="text-xs text-muted-foreground">
+                    {formatFileSize(file.size)}
+                  </p>
+                  
+                  {file.status === 'uploading' && file.progress !== undefined && (
+                    <div className="flex-1 max-w-24">
+                      <ProgressBar value={file.progress || 0} size="sm" />
+                    </div>
+                  )}
+                </div>
+
+                {file.error && (
+                  <p className="text-xs text-status-error mt-1">
+                    {file.error}
+                  </p>
+                )}
+              </div>
+
+              {/* Remove button */}
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  removeFile(file.id);
+                }}
+                className="flex-shrink-0 h-8 w-8 p-0 hover:bg-destructive/10 hover:text-destructive"
+                aria-label={`Remove ${file.name}`}
+              >
+                <X className="w-4 h-4" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Upload button */}
+      {files.length > 0 && onUpload && (
+        <div className="flex items-center gap-2">
+          <Button
+            onClick={handleUpload}
+            disabled={loading || files.every(f => f.status === 'error') || files.some(f => f.status === 'uploading')}
+            className="flex items-center gap-2"
+          >
+            {loading && <Loader2 className="w-4 h-4 animate-spin" />}
+            Upload {files.filter(f => f.status !== 'error').length} file{files.filter(f => f.status !== 'error').length !== 1 ? 's' : ''}
+          </Button>
+          
+          <Button
+            variant="outline"
+            onClick={() => setFiles([])}
+            disabled={loading || files.some(f => f.status === 'uploading')}
+          >
+            Clear all
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/atoms/composed/FileUpload/index.ts

@@ -0,0 +1,2 @@
+export { FileUpload } from './FileUpload';
+export type { FileUploadProps, FileUploadFile } from './FileUpload';

package/src/atoms/composed/FormField/FormField.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { cn } from '../../utils/utils';
+import { Label } from '../../ui/label';
+
+export interface FormFieldProps {
+  /** Field label */
+  label?: string;
+  /** Field description/help text */
+  description?: string;
+  /** Error message */
+  error?: string;
+  /** Whether field is required */
+  required?: boolean;
+  /** Field content */
+  children: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+  /** HTML for attribute for label */
+  htmlFor?: string;
+  /** Field layout */
+  layout?: 'vertical' | 'horizontal';
+  /** Label width for horizontal layout */
+  labelWidth?: string;
+}
+
+export const FormField: React.FC<FormFieldProps> = ({
+  label,
+  description,
+  error,
+  required = false,
+  children,
+  className,
+  htmlFor,
+  layout = 'vertical',
+  labelWidth = '120px'
+}) => {
+  const isHorizontal = layout === 'horizontal';
+
+  return (
+    <div
+      className={cn(
+        'space-y-2',
+        isHorizontal && 'flex items-start gap-4',
+        className
+      )}
+      data-component-name="FormField"
+    >
+      {/* Label section */}
+      {label && (
+        <div
+          className={cn(
+            isHorizontal && 'flex-shrink-0',
+            isHorizontal && 'pt-2' // Align with input top padding
+          )}
+          style={isHorizontal ? { width: labelWidth } : undefined}
+        >
+          <Label
+            htmlFor={htmlFor}
+            className={cn(
+              'text-sm font-medium text-foreground',
+              required && "after:content-['*'] after:ml-0.5 after:text-status-error"
+            )}
+          >
+            {label}
+          </Label>
+        </div>
+      )}
+
+      {/* Field content section */}
+      <div className={cn(isHorizontal && 'flex-1 min-w-0')}>
+        {/* Field input */}
+        <div className="relative">
+          {children}
+        </div>
+
+        {/* Description */}
+        {description && !error && (
+          <p className="mt-1 text-xs text-muted-foreground">
+            {description}
+          </p>
+        )}
+
+        {/* Error message */}
+        {error && (
+          <p className="mt-1 text-xs text-status-error font-medium">
+            {error}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/atoms/composed/FormField/index.ts

@@ -0,0 +1 @@
+export { FormField, type FormFieldProps } from './FormField';

package/src/atoms/composed/GlobalSearch/GlobalSearch.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { Search } from 'lucide-react';
+import { Input } from '../../ui/input';
+import { cn } from '../../utils/utils';
+
+interface GlobalSearchProps {
+  className?: string;
+  placeholder?: string;
+}
+
+export const GlobalSearch: React.FC<GlobalSearchProps> = ({ 
+  className,
+  placeholder = "Search components, colors, patterns..." 
+}) => {
+  const [searchValue, setSearchValue] = useState('');
+
+  return (
+    <div className={cn("relative", className)}>
+      <div className="absolute inset-y-0 left-0 flex items-center pl-4">
+        <Search className="w-5 h-5 text-muted-foreground" />
+      </div>
+      <Input
+        type="text"
+        value={searchValue}
+        onChange={(e) => setSearchValue(e.target.value)}
+        placeholder={placeholder}
+        className={cn(
+          "pl-12 pr-4 h-12 text-base",
+          "bg-muted/30 border-border/40 rounded-xl",
+          "focus:bg-card focus:border-category-1/30 focus:ring-category-1/20",
+          "transition-all duration-200",
+          "placeholder:text-muted-foreground/70"
+        )}
+      />
+    </div>
+  );
+};

package/src/atoms/composed/GlobalSearch/index.ts

@@ -0,0 +1 @@
+export { GlobalSearch } from './GlobalSearch';