@fabio.caffarello/react-design-system 1.7.0 → 1.8.0

package/src/ui/molecules/FileUpload/FileUpload.tsx

@@ -0,0 +1,312 @@
+'use client';
+
+import { useState, useRef, type DragEvent, type ChangeEvent } from 'react';
+import { Upload, X, File, CheckCircle2, AlertCircle } from 'lucide-react';
+import { getColorClass } from '../../tokens/colors';
+import { getSpacingClass } from '../../tokens/spacing';
+import { getRadiusClass } from '../../tokens/radius';
+import { getAnimationClass } from '../../tokens/animations';
+import Button from '../../atoms/Button/Button';
+import Progress from '../../atoms/Progress/Progress';
+
+export interface FileUploadFile {
+  file: File;
+  id: string;
+  preview?: string;
+  progress?: number;
+  error?: string;
+}
+
+export interface FileUploadProps {
+  accept?: string;
+  multiple?: boolean;
+  maxSize?: number; // in bytes
+  maxFiles?: number;
+  onFilesChange?: (files: FileUploadFile[]) => void;
+  onFileRemove?: (fileId: string) => void;
+  showPreview?: boolean;
+  showProgress?: boolean;
+  disabled?: boolean;
+  className?: string;
+  label?: string;
+  description?: string;
+}
+
+/**
+ * FileUpload Component
+ * 
+ * A file upload component with drag and drop, preview, validation, and progress.
+ * Follows Atomic Design principles as a Molecule component.
+ * 
+ * @example
+ * ```tsx
+ * <FileUpload
+ *   accept="image/*"
+ *   maxSize={5 * 1024 * 1024} // 5MB
+ *   onFilesChange={(files) => console.log(files)}
+ * />
+ * ```
+ */
+export default function FileUpload({
+  accept,
+  multiple = false,
+  maxSize,
+  maxFiles,
+  onFilesChange,
+  onFileRemove,
+  showPreview = true,
+  showProgress = false,
+  disabled = false,
+  className = '',
+  label,
+  description,
+}: FileUploadProps) {
+  const [files, setFiles] = useState<FileUploadFile[]>([]);
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  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 Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+  };
+
+  const validateFile = (file: File): string | null => {
+    if (maxSize && file.size > maxSize) {
+      return `File size exceeds ${formatFileSize(maxSize)}`;
+    }
+    return null;
+  };
+
+  const processFiles = (fileList: FileList | File[]): FileUploadFile[] => {
+    const fileArray = Array.from(fileList);
+    const newFiles: FileUploadFile[] = [];
+
+    fileArray.forEach((file) => {
+      const error = validateFile(file);
+      const fileId = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+      
+      const fileUpload: FileUploadFile = {
+        file,
+        id: fileId,
+        error,
+        progress: showProgress ? 0 : undefined,
+      };
+
+      // Generate preview for images
+      if (showPreview && file.type.startsWith('image/')) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          setFiles((prev) =>
+            prev.map((f) =>
+              f.id === fileId ? { ...f, preview: e.target?.result as string } : f
+            )
+          );
+        };
+        reader.readAsDataURL(file);
+      }
+
+      newFiles.push(fileUpload);
+    });
+
+    return newFiles;
+  };
+
+  const handleFiles = (newFiles: FileUploadFile[]) => {
+    const updatedFiles = multiple ? [...files, ...newFiles] : newFiles;
+    const limitedFiles = maxFiles ? updatedFiles.slice(0, maxFiles) : updatedFiles;
+    
+    setFiles(limitedFiles);
+    onFilesChange?.(limitedFiles);
+  };
+
+  const handleDrop = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(false);
+
+    if (disabled) return;
+
+    const droppedFiles = e.dataTransfer.files;
+    if (droppedFiles.length > 0) {
+      const processedFiles = processFiles(droppedFiles);
+      handleFiles(processedFiles);
+    }
+  };
+
+  const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    if (!disabled) {
+      setIsDragging(true);
+    }
+  };
+
+  const handleDragLeave = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+
+  const handleFileInput = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const processedFiles = processFiles(e.target.files);
+      handleFiles(processedFiles);
+    }
+    // Reset input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleRemove = (fileId: string) => {
+    const updatedFiles = files.filter((f) => f.id !== fileId);
+    setFiles(updatedFiles);
+    onFilesChange?.(updatedFiles);
+    onFileRemove?.(fileId);
+  };
+
+  const handleClick = () => {
+    if (!disabled) {
+      fileInputRef.current?.click();
+    }
+  };
+
+  return (
+    <div className={`space-y-4 ${className}`}>
+      {(label || description) && (
+        <div>
+          {label && (
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              {label}
+            </label>
+          )}
+          {description && (
+            <p className="text-sm text-gray-500">{description}</p>
+          )}
+        </div>
+      )}
+
+      <div
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onClick={handleClick}
+        className={`
+          relative
+          border-2
+          border-dashed
+          ${isDragging ? getColorClass('primary', 'DEFAULT', 'border') : 'border-gray-300'}
+          ${getRadiusClass('lg')}
+          ${getSpacingClass('lg', 'p')}
+          text-center
+          cursor-pointer
+          ${getAnimationClass('base')}
+          ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-gray-400'}
+        `}
+      >
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept={accept}
+          multiple={multiple}
+          onChange={handleFileInput}
+          disabled={disabled}
+          className="hidden"
+        />
+
+        <div className="flex flex-col items-center gap-2">
+          <Upload
+            className={`
+              ${isDragging ? getColorClass('primary', 'DEFAULT', 'text') : 'text-gray-400'}
+              h-8 w-8
+            `}
+          />
+          <div>
+            <span className="text-sm font-medium text-gray-700">
+              {isDragging ? 'Drop files here' : 'Click to upload or drag and drop'}
+            </span>
+            {accept && (
+              <p className="text-xs text-gray-500 mt-1">
+                Accepted: {accept}
+              </p>
+            )}
+            {maxSize && (
+              <p className="text-xs text-gray-500">
+                Max size: {formatFileSize(maxSize)}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {files.length > 0 && (
+        <div className="space-y-2">
+          {files.map((fileUpload) => (
+            <div
+              key={fileUpload.id}
+              className={`
+                flex
+                items-center
+                gap-3
+                ${getSpacingClass('base', 'p')}
+                border
+                border-gray-200
+                ${getRadiusClass('md')}
+                ${fileUpload.error ? getColorClass('error', 'light', 'bg') : 'bg-gray-50'}
+              `}
+            >
+              {showPreview && fileUpload.preview ? (
+                <img
+                  src={fileUpload.preview}
+                  alt={fileUpload.file.name}
+                  className={`w-12 h-12 object-cover ${getRadiusClass('md')}`}
+                />
+              ) : (
+                <File className="h-8 w-8 text-gray-400" />
+              )}
+
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-gray-900 truncate">
+                  {fileUpload.file.name}
+                </p>
+                <p className="text-xs text-gray-500">
+                  {formatFileSize(fileUpload.file.size)}
+                </p>
+                {fileUpload.error && (
+                  <div className="flex items-center gap-1 mt-1">
+                    <AlertCircle className={`h-3 w-3 ${getColorClass('error', 'DEFAULT', 'text')}`} />
+                    <span className={`text-xs ${getColorClass('error', 'DEFAULT', 'text')}`}>
+                      {fileUpload.error}
+                    </span>
+                  </div>
+                )}
+                {showProgress && fileUpload.progress !== undefined && (
+                  <div className="mt-2">
+                    <Progress value={fileUpload.progress} size="sm" />
+                  </div>
+                )}
+              </div>
+
+              {!fileUpload.error && !showProgress && (
+                <CheckCircle2 className={`h-5 w-5 ${getColorClass('success', 'DEFAULT', 'text')}`} />
+              )}
+
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleRemove(fileUpload.id);
+                }}
+                className="h-auto p-1"
+                aria-label={`Remove ${fileUpload.file.name}`}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/molecules/FileUpload/index.ts

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

package/src/ui/molecules/Form/Form.mdx

@@ -0,0 +1,145 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Molecules/Form" />
+
+# Form
+
+A comprehensive form wrapper component that provides validation states, error handling, success messages, and consistent layout.
+
+## Features
+
+- **Validation States**: Visual feedback for error, success, and loading states
+- **Error Handling**: Global and field-level error messages
+- **Accessibility**: Full ARIA support and keyboard navigation
+- **Layout**: Consistent spacing and structure
+- **Loading States**: Built-in loading indicator support
+
+## Basic Usage
+
+```tsx
+import { Form, Input, Label, Button } from '@fabio.caffarello/react-design-system';
+
+<Form onSubmit={handleSubmit}>
+  <div className="space-y-2">
+    <Label htmlFor="email" variant="required">Email</Label>
+    <Input id="email" name="email" type="email" required />
+  </div>
+  <Button type="submit">Submit</Button>
+</Form>
+```
+
+## Validation States
+
+### Error State
+
+Display global or field-level errors:
+
+```tsx
+<Form error="Please fix the errors below">
+  {/* Form fields */}
+</Form>
+```
+
+### Success State
+
+Show success messages:
+
+```tsx
+<Form success="Form submitted successfully!">
+  {/* Form fields */}
+</Form>
+```
+
+### Loading State
+
+Indicate form submission in progress:
+
+```tsx
+<Form loading={isSubmitting}>
+  <Button type="submit" disabled={isSubmitting}>
+    {isSubmitting ? 'Submitting...' : 'Submit'}
+  </Button>
+</Form>
+```
+
+## Field-Level Validation
+
+Use individual field components with error states:
+
+```tsx
+import { Input, ErrorMessage } from '@fabio.caffarello/react-design-system';
+
+<div className="space-y-2">
+  <Label htmlFor="email">Email</Label>
+  <Input 
+    id="email" 
+    error={!!errors.email}
+    helperText={errors.email}
+  />
+  {errors.email && (
+    <ErrorMessage>{errors.email}</ErrorMessage>
+  )}
+</div>
+```
+
+## Form Layout
+
+The Form component provides consistent spacing:
+
+```tsx
+<Form className="max-w-md space-y-4">
+  <div className="space-y-2">
+    <Label htmlFor="name">Name</Label>
+    <Input id="name" />
+  </div>
+  <div className="space-y-2">
+    <Label htmlFor="email">Email</Label>
+    <Input id="email" type="email" />
+  </div>
+  <Button type="submit">Submit</Button>
+</Form>
+```
+
+## Integration with React Hook Form
+
+```tsx
+import { useForm } from 'react-hook-form';
+import { Form, Input, Label, Button } from '@fabio.caffarello/react-design-system';
+
+function MyForm() {
+  const { register, handleSubmit, formState: { errors } } = useForm();
+
+  return (
+    <Form onSubmit={handleSubmit(onSubmit)}>
+      <div className="space-y-2">
+        <Label htmlFor="email">Email</Label>
+        <Input 
+          id="email"
+          {...register('email', { required: 'Email is required' })}
+          error={!!errors.email}
+          helperText={errors.email?.message}
+        />
+      </div>
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}
+```
+
+## Accessibility
+
+The Form component ensures accessibility:
+
+- Proper form structure with `role="form"`
+- ARIA labels and descriptions
+- Error messages associated with fields via `aria-describedby`
+- Keyboard navigation support
+- Focus management
+
+### Best Practices
+
+1. **Labels**: Always provide labels for form fields
+2. **Error Messages**: Associate error messages with fields
+3. **Required Fields**: Clearly indicate required fields
+4. **Loading States**: Provide feedback during submission
+5. **Validation**: Validate on both client and server side

package/src/ui/molecules/Form/Form.stories.tsx

@@ -3,7 +3,7 @@ import Form from "./Form";
 import { Input, Label, Button, Textarea, Select, ErrorMessage } from "../../atoms";
 
 const meta: Meta<typeof Form> = {
-  title: "UI/Molecules/Form",
+  title: "Molecules/Form",
   component: Form,
   parameters: {
     docs: {
@@ -192,4 +192,124 @@ export const CompleteForm: StoryObj<typeof Form> = {
   ),
 };
 
+export const RegistrationForm: StoryObj<typeof Form> = {
+  args: {
+    onSubmit: (e) => {
+      e.preventDefault();
+      alert("Registration submitted!");
+    },
+  },
+  render: (args) => (
+    <Form {...args} className="max-w-lg space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="firstName" variant="required">
+          First Name
+        </Label>
+        <Input id="firstName" name="firstName" placeholder="John" required />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="lastName" variant="required">
+          Last Name
+        </Label>
+        <Input id="lastName" name="lastName" placeholder="Doe" required />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="email" variant="required">
+          Email
+        </Label>
+        <Input id="email" name="email" type="email" placeholder="john.doe@example.com" required />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="password" variant="required">
+          Password
+        </Label>
+        <Input id="password" name="password" type="password" placeholder="Enter password" required />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="country" variant="optional">
+          Country
+        </Label>
+        <Select
+          id="country"
+          name="country"
+          options={[
+            { value: "US", label: "United States" },
+            { value: "BR", label: "Brazil" },
+            { value: "UK", label: "United Kingdom" },
+          ]}
+          placeholder="Select country"
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="bio" variant="optional">
+          Bio
+        </Label>
+        <Textarea id="bio" name="bio" rows={4} placeholder="Tell us about yourself" />
+      </div>
+      <div className="flex gap-2">
+        <Button type="submit" variant="regular">
+          Register
+        </Button>
+        <Button type="button" variant="secondary">
+          Cancel
+        </Button>
+      </div>
+    </Form>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Complete registration form showing multiple form fields working together.',
+      },
+    },
+  },
+};
+
+export const ContactForm: StoryObj<typeof Form> = {
+  args: {
+    onSubmit: (e) => {
+      e.preventDefault();
+      alert("Message sent!");
+    },
+  },
+  render: (args) => (
+    <Form {...args} className="max-w-md space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="contactName" variant="required">
+          Name
+        </Label>
+        <Input id="contactName" name="name" placeholder="Your name" required />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="contactEmail" variant="required">
+          Email
+        </Label>
+        <Input id="contactEmail" name="email" type="email" placeholder="your.email@example.com" required />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="subject" variant="required">
+          Subject
+        </Label>
+        <Input id="subject" name="subject" placeholder="Message subject" required />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="message" variant="required">
+          Message
+        </Label>
+        <Textarea id="message" name="message" rows={6} placeholder="Your message" required />
+      </div>
+      <Button type="submit" variant="regular" fullWidth>
+        Send Message
+      </Button>
+    </Form>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Contact form example showing a real-world use case.',
+      },
+    },
+  },
+};
+
 export default meta;

package/src/ui/molecules/Form/Form.test.tsx

@@ -16,9 +16,7 @@ describe("Form", () => {
   });
 
   it("calls onSubmit when form is submitted", () => {
-    const handleSubmit = vi.fn((e) => {
-      e.preventDefault();
-    });
+    const handleSubmit = vi.fn();
     const { container } = render(
       <Form onSubmit={handleSubmit}>
         <Button type="submit">Submit</Button>