@pattern-stack/frontend-patterns 0.0.1 → 0.0.3

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

@@ -1,477 +0,0 @@
-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

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

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

@@ -1,92 +0,0 @@
-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

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

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

@@ -1,37 +0,0 @@
-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

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