@pushwoosh/dumb-components 1.1.148 → 1.1.150

package/InputFile/ai-documentation.md

@@ -1,420 +0,0 @@
-# InputFile Component - @pushwoosh/dumb-components
-
-## Overview
-
-- **Component Name**: InputFile
-- **Import Path**: `@pushwoosh/dumb-components`
-- **Files**:
-  - `/src/InputFile/InputFile.tsx` - Main component implementation
-  - `/src/InputFile/types.ts` - TypeScript type definitions
-  - `/src/InputFile/styles.ts` - Styled components
-  - `/src/InputFile/index.ts` - Component exports
-- **Type**: Form Control
-- **Description**: A file upload input component with file size validation, error handling, and custom button styling. Provides a text input display with an attachment button for file selection.
-
-## TypeScript Interfaces
-
-```typescript
-export type InputFileProps = {
-  name: string;
-  fileName?: string;
-  errorText?: string;
-  fileId?: string;
-  textId?: string;
-  buttonId?: string;
-  accept?: string;
-  label?: string;
-  buttonText?: string;
-  buttonWidth?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  maxSize?: number; // in megabytes
-  isIgnoreFileSize?: boolean;
-  onChange: (result: any) => void;
-  onError?: (message: string, field: string) => void;
-};
-
-type FileProp = { file: File };
-
-export type InputFileData = FileProp & {
-  [name: string]: string;
-};
-```
-
-## Import & Usage
-
-```typescript
-import { InputFile } from '@pushwoosh/dumb-components';
-
-// Basic usage
-function MyComponent() {
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
-  const [fileName, setFileName] = useState('');
-  const [error, setError] = useState('');
-
-  const handleFileChange = (result: any) => {
-    setSelectedFile(result.file);
-    setFileName(result.file.name);
-    setError('');
-  };
-
-  const handleError = (message: string, field: string) => {
-    setError(message);
-  };
-
-  return (
-    <InputFile
-      name="document"
-      fileName={fileName}
-      errorText={error}
-      label="Upload Document"
-      buttonText="Browse"
-      placeholder="No file selected"
-      onChange={handleFileChange}
-      onError={handleError}
-    />
-  );
-}
-
-// Image upload with restrictions
-function ImageUpload() {
-  const [imageData, setImageData] = useState('');
-  const [fileName, setFileName] = useState('');
-
-  return (
-    <InputFile
-      name="image"
-      fileName={fileName}
-      accept="image/*"
-      maxSize={5} // 5MB limit
-      label="Profile Picture"
-      buttonText="Choose Image"
-      placeholder="Select an image file"
-      onChange={(result) => {
-        setImageData(result.image);
-        setFileName(result.file.name);
-      }}
-      onError={(message) => console.error(message)}
-    />
-  );
-}
-```
-
-## Advanced Examples
-
-```typescript
-// Document upload with validation
-function DocumentUpload() {
-  const [uploadState, setUploadState] = useState({
-    fileName: '',
-    errorText: '',
-    isUploading: false,
-  });
-
-  const handleFileChange = async (result: any) => {
-    setUploadState(prev => ({
-      ...prev,
-      fileName: result.file.name,
-      errorText: '',
-      isUploading: true,
-    }));
-
-    try {
-      // Simulate upload process
-      await uploadToServer(result.file);
-      setUploadState(prev => ({ ...prev, isUploading: false }));
-    } catch (error) {
-      setUploadState(prev => ({
-        ...prev,
-        errorText: 'Upload failed. Please try again.',
-        isUploading: false,
-      }));
-    }
-  };
-
-  const handleError = (message: string, field: string) => {
-    setUploadState(prev => ({ ...prev, errorText: message }));
-  };
-
-  return (
-    <InputFile
-      name="document"
-      fileName={uploadState.fileName}
-      errorText={uploadState.errorText}
-      disabled={uploadState.isUploading}
-      accept=".pdf,.doc,.docx"
-      maxSize={10}
-      label="Contract Document"
-      buttonText={uploadState.isUploading ? "Uploading..." : "Upload File"}
-      placeholder="PDF, DOC, or DOCX files only"
-      onChange={handleFileChange}
-      onError={handleError}
-    />
-  );
-}
-
-// Multiple file types with custom validation
-function MultiTypeUpload() {
-  const [files, setFiles] = useState<{[key: string]: any}>({});
-  const [errors, setErrors] = useState<{[key: string]: string}>({});
-
-  const createFileHandler = (fieldName: string) => (result: any) => {
-    setFiles(prev => ({ ...prev, [fieldName]: result }));
-    setErrors(prev => ({ ...prev, [fieldName]: '' }));
-  };
-
-  const createErrorHandler = (fieldName: string) => (message: string) => {
-    setErrors(prev => ({ ...prev, [fieldName]: message }));
-  };
-
-  return (
-    <div>
-      <InputFile
-        name="resume"
-        fileName={files.resume?.file?.name || ''}
-        errorText={errors.resume}
-        accept=".pdf"
-        maxSize={2}
-        label="Resume (PDF)"
-        buttonText="Upload Resume"
-        placeholder="Select your resume"
-        onChange={createFileHandler('resume')}
-        onError={createErrorHandler('resume')}
-      />
-
-      <InputFile
-        name="portfolio"
-        fileName={files.portfolio?.file?.name || ''}
-        errorText={errors.portfolio}
-        accept=".zip,.rar"
-        maxSize={50}
-        label="Portfolio (ZIP/RAR)"
-        buttonText="Upload Portfolio"
-        placeholder="Select your portfolio archive"
-        onChange={createFileHandler('portfolio')}
-        onError={createErrorHandler('portfolio')}
-      />
-
-      <InputFile
-        name="photo"
-        fileName={files.photo?.file?.name || ''}
-        errorText={errors.photo}
-        accept="image/jpeg,image/png"
-        maxSize={1}
-        label="Profile Photo"
-        buttonText="Choose Photo"
-        placeholder="JPEG or PNG only"
-        onChange={createFileHandler('photo')}
-        onError={createErrorHandler('photo')}
-      />
-    </div>
-  );
-}
-
-// Form integration with React Hook Form
-function FormWithFileUpload() {
-  const { register, handleSubmit, setValue, watch, formState: { errors } } = useForm();
-  const [fileErrors, setFileErrors] = useState<{[key: string]: string}>({});
-  
-  const attachmentFile = watch('attachment');
-
-  const onSubmit = (data: any) => {
-    console.log('Form data:', data);
-    // Handle form submission with file data
-  };
-
-  const handleFileChange = (result: any) => {
-    setValue('attachment', result);
-    setFileErrors(prev => ({ ...prev, attachment: '' }));
-  };
-
-  const handleFileError = (message: string, field: string) => {
-    setFileErrors(prev => ({ ...prev, [field]: message }));
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <div>
-        <label>Title</label>
-        <input
-          {...register('title', { required: 'Title is required' })}
-          type="text"
-        />
-        {errors.title && <span>{errors.title.message}</span>}
-      </div>
-
-      <InputFile
-        name="attachment"
-        fileName={attachmentFile?.file?.name || ''}
-        errorText={fileErrors.attachment}
-        label="Supporting Document"
-        buttonText="Attach File"
-        placeholder="Optional file attachment"
-        maxSize={5}
-        onChange={handleFileChange}
-        onError={handleFileError}
-      />
-
-      <button type="submit">Submit</button>
-    </form>
-  );
-}
-
-// Drag and drop enhancement (conceptual)
-function EnhancedFileUpload() {
-  const [isDragOver, setIsDragOver] = useState(false);
-  const [fileData, setFileData] = useState({ fileName: '', error: '' });
-
-  const handleFileChange = (result: any) => {
-    setFileData({ fileName: result.file.name, error: '' });
-  };
-
-  const handleError = (message: string) => {
-    setFileData(prev => ({ ...prev, error: message }));
-  };
-
-  return (
-    <div
-      style={{
-        border: isDragOver ? '2px dashed #007bff' : '2px dashed #ccc',
-        padding: '20px',
-        borderRadius: '8px',
-        backgroundColor: isDragOver ? '#f8f9fa' : 'transparent',
-      }}
-      onDragOver={(e) => {
-        e.preventDefault();
-        setIsDragOver(true);
-      }}
-      onDragLeave={() => setIsDragOver(false)}
-      onDrop={(e) => {
-        e.preventDefault();
-        setIsDragOver(false);
-        // Handle dropped files here
-      }}
-    >
-      <InputFile
-        name="dropFile"
-        fileName={fileData.fileName}
-        errorText={fileData.error}
-        label="Drag & Drop or Browse"
-        buttonText="Browse Files"
-        placeholder="Drop files here or click to browse"
-        onChange={handleFileChange}
-        onError={handleError}
-      />
-    </div>
-  );
-}
-```
-
-## Props Reference
-
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| `name` | `string` | - | Yes | Name attribute for the file input |
-| `fileName` | `string` | `undefined` | No | Display name of the selected file |
-| `errorText` | `string` | `undefined` | No | Error message to display |
-| `fileId` | `string` | `undefined` | No | ID for the hidden file input |
-| `textId` | `string` | `undefined` | No | ID for the text display input |
-| `buttonId` | `string` | `undefined` | No | ID for the browse button |
-| `accept` | `string` | `undefined` | No | File types to accept (MIME types or extensions) |
-| `label` | `string` | `undefined` | No | Label text displayed above the input |
-| `buttonText` | `string` | `undefined` | No | Text displayed on the browse button |
-| `buttonWidth` | `string` | `undefined` | No | Custom width for the browse button |
-| `placeholder` | `string` | `undefined` | No | Placeholder text for the display input |
-| `disabled` | `boolean` | `undefined` | No | Whether the input is disabled |
-| `maxSize` | `number` | `undefined` | No | Maximum file size in megabytes |
-| `isIgnoreFileSize` | `boolean` | `false` | No | Whether to skip file size validation |
-| `onChange` | `(result: any) => void` | - | Yes | Callback fired when file is selected |
-| `onError` | `(message: string, field: string) => void` | `() => {}` | No | Callback fired when validation fails |
-
-## AI Agent Guidelines
-
-### Recommended Patterns
-
-1. **File Validation**: Always implement proper file validation
-```typescript
-<InputFile
-  name="document"
-  accept=".pdf,.doc,.docx"
-  maxSize={5}
-  onChange={handleFileChange}
-  onError={(message, field) => setErrors(prev => ({ ...prev, [field]: message }))}
-/>
-```
-
-2. **State Management**: Track file state, errors, and loading states
-```typescript
-const [fileState, setFileState] = useState({
-  fileName: '',
-  file: null,
-  error: '',
-  isUploading: false,
-});
-```
-
-3. **Error Handling**: Provide meaningful error messages
-```typescript
-const handleError = (message: string, field: string) => {
-  // Log error for debugging
-  console.error(`File upload error for ${field}:`, message);
-  
-  // Update UI state
-  setErrors(prev => ({ ...prev, [field]: message }));
-};
-```
-
-### Common Mistakes to Avoid
-
-1. **Missing Error Handling**: Always provide an `onError` callback
-2. **Insufficient Validation**: Don't rely only on client-side validation
-3. **Large File Limits**: Be mindful of server upload limits when setting `maxSize`
-4. **File Type Restrictions**: Use specific MIME types rather than generic patterns
-5. **State Synchronization**: Ensure `fileName` reflects the actual selected file
-
-### Integration Tips
-
-1. **File Processing**: The component reads files as Data URLs by default
-```typescript
-// Result structure
-{
-  file: File, // Original File object
-  [name]: string // Base64 data URL
-}
-```
-
-2. **Server Upload**: Extract the File object for server uploads
-```typescript
-const handleFileChange = async (result: any) => {
-  const formData = new FormData();
-  formData.append('file', result.file);
-  
-  try {
-    await uploadToServer(formData);
-  } catch (error) {
-    // Handle upload error
-  }
-};
-```
-
-3. **Form Integration**: Works well with form libraries
-```typescript
-// With React Hook Form
-setValue('fileField', result.file);
-```
-
-4. **Accessibility**: Component includes proper labels and ARIA attributes
-5. **File Size Limits**: Consider both client and server size restrictions
-```typescript
-// Client validation
-maxSize={10} // 10MB
-
-// Server validation should also be implemented
-```
-
-## Related Components
-
-- **Button**: Used internally for the browse functionality  
-- **FieldBox**: Used for layout and error display
-- **Input**: For text-based form fields
-- **Modal**: For advanced file management interfaces

package/Modal/ai-documentation.md

@@ -1,285 +0,0 @@
-# Modal - AI Documentation
-
-> Auto-generated AI agent documentation for Modal component
-> Part of @pushwoosh/dumb-components library
-
-## Overview
-**Component:** Modal
-**Import Path:** `import { Modal, ModalTitle, ModalConfirm, ModalConfirmProvider, useModalConfirm, ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter } from '@pushwoosh/dumb-components'`
-**Files:** 
-- `Modal/components/Modal/Modal.tsx` - Main modal component
-- `Modal/components/Modal/types.ts` - TypeScript interfaces
-- `Modal/components/Modal/maps.ts` - Size mappings
-- `Modal/components/Modal/styles.tsx` - Styled components
-- `Modal/components/ModalTitle/` - Title component
-- `Modal/components/ModalConfirm/` - Confirmation dialog
-- `Modal/components/ModalContent/` - Content layout components
-**Type:** Layout Component / Overlay
-**Description:** Flexible modal dialog system with size variants, confirmation dialogs, and content layout helpers. Supports keyboard navigation (ESC to close) and click-outside-to-close functionality.
-
-## TypeScript Interfaces
-
-### ModalProps
-```typescript
-interface ModalProps {
-  size: 'small' | 'medium' | 'large' | 'full';  // Modal width
-  zIndex?: number;                               // Stack order (default: 10000)
-  isOpen: boolean;                                // Control visibility
-  onClose?: () => any;                          // Close handler
-  children: ReactNode;                           // Modal content
-}
-```
-
-### ModalTitleProps
-```typescript
-interface ModalTitleProps {
-  onClose?: () => void;    // Optional close button handler
-  children: ReactNode;     // Title content
-}
-```
-
-### ModalConfirmProps
-```typescript
-interface ModalConfirmProps {
-  isOpen: boolean;
-  title: string;
-  size?: 'small' | 'medium' | 'large' | 'full';
-  description?: ReactNode;
-  confirmButtonText?: string;
-  confirmButtonColor?: 'primary' | 'secondary' | 'danger';
-  cancelButtonText?: string;
-  callback?: () => void;
-  onAccept: () => void;
-  onCancel: () => void;
-}
-```
-
-## Import & Usage
-
-### Basic Modal
-```tsx
-import { Modal, ModalTitle, ModalBody, ModalFooter } from '@pushwoosh/dumb-components';
-import { Button } from '@pushwoosh/dumb-components';
-
-function MyModal({ isOpen, onClose }) {
-  return (
-    <Modal size="medium" isOpen={isOpen} onClose={onClose}>
-      <ModalTitle onClose={onClose}>
-        Modal Title
-      </ModalTitle>
-      <ModalBody>
-        <p>Modal content goes here</p>
-      </ModalBody>
-      <ModalFooter>
-        <Button variant="secondary" onClick={onClose}>Cancel</Button>
-        <Button variant="primary">Confirm</Button>
-      </ModalFooter>
-    </Modal>
-  );
-}
-```
-
-### Confirmation Dialog
-```tsx
-import { ModalConfirm } from '@pushwoosh/dumb-components';
-
-function DeleteConfirmation({ isOpen, onDelete, onCancel }) {
-  return (
-    <ModalConfirm
-      isOpen={isOpen}
-      title="Delete Item?"
-      description="This action cannot be undone."
-      confirmButtonText="Delete"
-      confirmButtonColor="danger"
-      onAccept={onDelete}
-      onCancel={onCancel}
-    />
-  );
-}
-```
-
-### Using Modal Confirm Provider
-```tsx
-import { ModalConfirmProvider, useModalConfirm } from '@pushwoosh/dumb-components';
-
-// Wrap app with provider
-function App() {
-  return (
-    <ModalConfirmProvider>
-      <YourApp />
-    </ModalConfirmProvider>
-  );
-}
-
-// Use in component
-function DeleteButton() {
-  const { openModalConfirm } = useModalConfirm();
-  
-  const handleDelete = () => {
-    openModalConfirm({
-      title: 'Delete Item?',
-      description: 'This cannot be undone.',
-      confirmButtonColor: 'danger',
-      onAccept: () => {
-        // Perform delete
-      }
-    });
-  };
-  
-  return <Button onClick={handleDelete}>Delete</Button>;
-}
-```
-
-## Advanced Examples
-
-### Modal with Form
-```tsx
-import { Modal, ModalTitle, ModalBody, ModalFooter } from '@pushwoosh/dumb-components';
-import { EnhancedInput, Button } from '@pushwoosh/dumb-components';
-
-function FormModal({ isOpen, onClose, onSubmit }) {
-  const [formData, setFormData] = useState({ name: '', email: '' });
-  
-  const handleSubmit = () => {
-    onSubmit(formData);
-    onClose();
-  };
-  
-  return (
-    <Modal size="small" isOpen={isOpen} onClose={onClose}>
-      <ModalTitle onClose={onClose}>User Details</ModalTitle>
-      <ModalBody>
-        <ModalBodyGroup>
-          <ModalBodyItem>
-            <EnhancedInput
-              label="Name"
-              value={formData.name}
-              onChange={(value) => setFormData({ ...formData, name: value })}
-            />
-          </ModalBodyItem>
-          <ModalBodyItem>
-            <EnhancedInput
-              label="Email"
-              type="email"
-              value={formData.email}
-              onChange={(value) => setFormData({ ...formData, email: value })}
-            />
-          </ModalBodyItem>
-        </ModalBodyGroup>
-      </ModalBody>
-      <ModalFooter>
-        <Button variant="secondary" onClick={onClose}>Cancel</Button>
-        <Button variant="primary" onClick={handleSubmit}>Save</Button>
-      </ModalFooter>
-    </Modal>
-  );
-}
-```
-
-### Nested Modals
-```tsx
-function ParentModal({ isOpen, onClose }) {
-  const [childOpen, setChildOpen] = useState(false);
-  
-  return (
-    <>
-      <Modal size="large" isOpen={isOpen} onClose={onClose} zIndex={10000}>
-        <ModalTitle onClose={onClose}>Parent Modal</ModalTitle>
-        <ModalBody>
-          <Button onClick={() => setChildOpen(true)}>
-            Open Child Modal
-          </Button>
-        </ModalBody>
-      </Modal>
-      
-      <Modal size="small" isOpen={childOpen} onClose={() => setChildOpen(false)} zIndex={10001}>
-        <ModalTitle onClose={() => setChildOpen(false)}>Child Modal</ModalTitle>
-        <ModalBody>
-          Child content with higher z-index
-        </ModalBody>
-      </Modal>
-    </>
-  );
-}
-```
-
-### Full Screen Modal
-```tsx
-function FullScreenModal({ isOpen, onClose, content }) {
-  return (
-    <Modal size="full" isOpen={isOpen} onClose={onClose}>
-      <ModalHeader>
-        <ModalTitle onClose={onClose}>Full Screen View</ModalTitle>
-      </ModalHeader>
-      <ModalBody style={{ height: 'calc(100vh - 120px)', overflow: 'auto' }}>
-        {content}
-      </ModalBody>
-    </Modal>
-  );
-}
-```
-
-## Props Reference
-
-### Modal Props
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `size` | `'small' \| 'medium' \| 'large' \| 'full'` | ✓ | - | Modal width (380px / 640px / 960px / 100%) |
-| `isOpen` | `boolean` | ✓ | - | Controls modal visibility |
-| `onClose` | `() => void` | - | - | Handler for close events (ESC key, backdrop click) |
-| `zIndex` | `number` | - | 10000 | Stack order for overlapping modals |
-| `children` | `ReactNode \| (() => ReactNode)` | - | - | Modal content (can be function for lazy rendering) |
-
-### ModalTitle Props
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `onClose` | `() => void` | - | - | Shows close button when provided |
-| `children` | `ReactNode` | ✓ | - | Title content |
-
-### ModalConfirm Props
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `isOpen` | `boolean` | ✓ | - | Controls visibility |
-| `title` | `string` | ✓ | - | Confirmation dialog title |
-| `size` | `'small' \| 'medium' \| 'large' \| 'full'` | - | `'small'` | Dialog size |
-| `description` | `ReactNode` | - | - | Additional description text |
-| `confirmButtonText` | `string` | - | `'Confirm'` | Accept button label |
-| `confirmButtonColor` | `'primary' \| 'secondary' \| 'danger'` | - | `'primary'` | Accept button color |
-| `cancelButtonText` | `string` | - | `'Cancel'` | Cancel button label |
-| `onAccept` | `() => void` | ✓ | - | Accept handler |
-| `onCancel` | `() => void` | ✓ | - | Cancel handler |
-| `callback` | `() => void` | - | - | Optional callback after accept |
-
-## AI Agent Guidelines
-
-### ✅ Recommended Patterns
-- Always provide `onClose` handler for user control
-- Use appropriate modal sizes (prefer `small` for forms, `medium` for content)
-- Implement keyboard navigation (ESC to close is automatic when `onClose` provided)
-- Use `ModalConfirm` for destructive actions
-- Wrap app with `ModalConfirmProvider` when using `useModalConfirm` hook
-- Use lazy rendering (function children) for heavy content
-- Structure content with `ModalTitle`, `ModalBody`, `ModalFooter`
-
-### ❌ Common Mistakes to Avoid
-- Don't forget to control `isOpen` state
-- Don't nest modals without proper z-index management
-- Don't use `full` size unless necessary
-- Don't put scrollable content directly in Modal - use ModalBody
-- Don't forget to handle onClose for backdrop clicks
-- Avoid inline styles on Modal component - style inner components instead
-
-### Integration Tips
-- Modal uses React Portal - renders outside component tree
-- Body scroll is locked when modal is open (via LockBody component)
-- Click outside and ESC key automatically trigger onClose
-- For forms in modals, handle validation before closing
-- Use `ModalBodyGroup` and `ModalBodyItem` for form layouts
-- Modal animations are handled by styled-components transitions
-
-## Related Components
-- **Button** - For modal actions
-- **EnhancedInput** - For modal forms
-- **Toast** - For success/error feedback after modal actions
-- **Drawer** - Alternative overlay for side panels
-- **Alert** - For inline warnings within modals