finform-react-builder 1.5.15 → 1.6.0

package/README.md

@@ -25,7 +25,7 @@ If you have a `.npmrc` file with GitHub Packages configuration, remove the line:
 ## ✨ Features
 
 - 🎨 **Material-UI Integration** - Beautiful, responsive form components
-- 🔧 **Dynamic Field Rendering** - Support for text, email, password, number, select, checkbox, date, and textarea fields
+- 🔧 **Dynamic Field Rendering** - text, email, password (with eye toggle), number, select, checkbox, radio, switch, autocomplete (single/multiple with checkboxes and +N more), date, textarea, image
 - ✅ **Advanced Validation** - Built-in validation with custom regex patterns and validation functions
 - 📱 **Responsive Grid System** - Flexible column-based layout system
 - 🎯 **TypeScript Support** - Full type safety and IntelliSense support
@@ -33,7 +33,9 @@ If you have a `.npmrc` file with GitHub Packages configuration, remove the line:
 - 🔄 **Real-time Validation** - Instant feedback with react-hook-form
 - 🎨 **Customizable** - Highly configurable with custom validation rules
 - 🔄 **Multi-Step Forms** - Support for step-by-step form completion with smart navigation
+- 🧩 **Custom Components** - Inject any React node via `type: 'component'`
 - 💾 **Stateless Design** - Works with data from backend/config without local storage dependencies
+- 📎 **Document Upload** - Drag & drop uploader with validation and preview
 
 ## 📦 Installation
 
@@ -101,6 +103,12 @@ export default App;
 
 ## 📋 Field Types
 
+### Password (with visibility toggle)
+```tsx
+{ name: 'password', label: 'Password', type: 'password', placeholder: 'Enter password', required: true, helperText: 'Use at least 8 characters.' }
+```
+Behavior: An eye icon toggles visibility between •••• and plain text.
+
 ### Text Fields
 ```tsx
 {
@@ -208,6 +216,9 @@ export default App;
 ```
 
 ### Checkbox Fields
+```tsx
+{ name: 'agree', label: 'Agree to terms', type: 'checkbox', required: true }
+```
 ### Autocomplete (Single)
 ```tsx
 {
@@ -247,6 +258,13 @@ Behavior:
 - Only the first 2 selections are rendered as chips; if more, shows a `+N more` chip.
 - Works with API-driven data using `api_endpoint`, `value_field`, `label_field`.
 
+### Copy icon for disabled fields
+For any disabled field, a small copy icon appears to the right, allowing users to copy the field value to clipboard.
+
+```tsx
+{ name: 'readonly_id', label: 'User ID', type: 'text', value: 'USR-7842-AB', disabled: true }
+```
+
 ### Toggle (Segmented Radios)
 ```tsx
 {
@@ -285,6 +303,11 @@ Behavior:
 ```
 
 ### Title and Section Headings
+### Custom Component Field
+Render arbitrary React content inside the form layout.
+```tsx
+{ name: 'custom_block', type: 'component', col: 12, step: 2, content: <div>Any JSX here</div> }
+```
 ```tsx
 { name: 'formTitle', type: 'title', label: 'Create User', variant: 'h4', col: 12 }
 { name: 'detailsSection', type: 'section', label: 'Details', variant: 'h6', col: 12 }
@@ -339,6 +362,7 @@ Behavior:
 - Any validation error (including on non-required fields) disables submit.
 - Single-step forms: built-in Submit button is disabled until valid.
 - Multi-step forms: Next/Submit are disabled until the current step is valid.
+- Custom buttons passed via `buttons` or `buttonGroup` are also auto-disabled when they are flow actions (Next/Submit/Save/Finish/Complete) and the step/form is invalid.
 
 Number validation example (number type):
 ```tsx
@@ -826,4 +850,55 @@ Feel free to check [issues page](https://github.com/finflow-analytics/finform/is
 
 ## 📞 Support
 
-If you like this project, please ⭐ star it on [GitHub](https://github.com/finflow-analytics/finform)! 
+If you like this project, please ⭐ star it on [GitHub](https://github.com/finflow-analytics/finform)! 
+
+## 📦 Document Upload Component
+
+Drag & drop upload with validation, preview, and optional submit button.
+
+```tsx
+import { DocumentUpload } from 'finform-react-builder';
+
+<DocumentUpload
+  title="Drag & Drop Files"
+  subtitle="Upload images or PDFs"
+  buttonText="Select Files"
+  fileSupportedText=".jpg, .jpeg, .png, .pdf up to 10MB"
+  config={{
+    id: 'kyc-docs',
+    fileTypes: ['image/*', 'application/pdf'],
+    maxSize: 10 * 1024 * 1024,
+    multiple: true,
+    required: true,
+    submitButton: { text: 'Upload', position: 'right' },
+  }}
+  value={files}
+  onChange={setFiles}
+  onSubmit={(files) => console.log('Submitting', files)}
+/>
+```
+
+## 🧭 Custom Stepper
+
+Card-style stepper with titles, connectors, and progress bar.
+
+```tsx
+<FinForm
+  fields={fields}
+  stepNavigationProps={{
+    stepTitles: ['Basic Information', 'Permissions Matrix', 'Review'],
+  }}
+  onSubmit={...}
+/>
+```
+
+## 📝 Helper Text
+
+Provide guidance beneath inputs via `helperText` on any field.
+```tsx
+{ name: 'first_name', label: 'First Name', type: 'text', helperText: 'Only alphabets, min 2 characters.' }
+```
+
+## 📏 Input Size
+
+All inputs default to MUI size "small" for compact UI.

package/dist/components/FinForm/types.d.ts

@@ -128,6 +128,43 @@ export interface ImageField extends BaseField {
     className?: string;
     onClick?: () => void;
     defaultValue?: string;
+    accept?: string | string[];
+    onFileSelected?: (file: File) => void;
+    onRemove?: () => void;
+    onPreview?: (url: string) => void;
+    onSave?: (payload: {
+        url: string;
+        file?: File;
+    }) => void;
+    imagePlaceholder?: {
+        icon?: 'upload' | 'image';
+        title?: string;
+        subtitle?: string;
+        buttonText?: string;
+        helperText?: string;
+        sx?: any;
+        iconSx?: any;
+        titleSx?: any;
+        subtitleSx?: any;
+        buttonSx?: any;
+        helperTextSx?: any;
+    };
+    imageUploaded?: {
+        previewText?: string;
+        removeText?: string;
+        saveText?: string;
+        showSave?: boolean;
+        previewTitle?: string;
+        replaceText?: string;
+        closeText?: string;
+        cardSx?: any;
+        thumbnailSx?: any;
+        fileNameSx?: any;
+        fileMetaSx?: any;
+        previewButtonSx?: any;
+        removeButtonSx?: any;
+        saveButtonSx?: any;
+    };
 }
 export interface ComponentField extends BaseField {
     type: 'component';