@serhiibudianskyi/wui 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Serhii Budianskyi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,2 @@
+# wui
+Web User Interface npm libray

package/dist/components/Field.d.ts

@@ -0,0 +1,9 @@
+import { UseFormRegisterReturn, Control } from 'react-hook-form';
+import type { Field as FieldType } from '../types/Field';
+interface FieldProps {
+    field: FieldType;
+    register: UseFormRegisterReturn;
+    control: Control<any>;
+}
+export default function Field({ field, register, control, }: FieldProps): JSX.Element;
+export {};

package/dist/components/Field.js

@@ -0,0 +1,167 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Field;
+const react_hook_form_1 = require("react-hook-form");
+const react_select_1 = require("react-select");
+const async_1 = require("react-select/async");
+const creatable_1 = require("react-select/creatable");
+const async_creatable_1 = require("react-select/async-creatable");
+const FileField_1 = require("./FileField");
+function Field({ field, register, control, }) {
+    var _a;
+    const containerClasses = [];
+    // Get field state from react-hook-form
+    const { field: controllerField, fieldState } = (0, react_hook_form_1.useController)({
+        name: field.name,
+        control
+    });
+    // Base properties for the input element
+    const baseProps = Object.assign(Object.assign(Object.assign({}, register), { type: field.type, id: field.name, name: field.name, placeholder: field.placeholder, readOnly: field.isReadOnly, disabled: field.isDisabled, required: field.isRequired, min: field.min, max: field.max, className: '' }), field.attrs);
+    // Adjust properties based on field type
+    switch (field.type) {
+        case 'async-select':
+        case 'async-creatable-select':
+            baseProps.loadOptions = field.loadOptions;
+        // fallthrough
+        case 'creatable-select':
+        case 'select':
+            baseProps.className = 'form-control';
+            baseProps.options = field.options;
+            baseProps.value = field.isMultiple ?
+                (Array.isArray(controllerField.value) ? controllerField.value : []) :
+                ((_a = controllerField.value) !== null && _a !== void 0 ? _a : null);
+            baseProps.onChange = (option) => {
+                let value;
+                if (field.isMultiple) {
+                    value = option ? option : [];
+                }
+                else {
+                    value = option ? option : null;
+                }
+                controllerField.onChange(value);
+            };
+            baseProps.styles = {
+                container: (base) => (Object.assign(Object.assign({}, base), { padding: 0 })),
+                control: (base) => (Object.assign(Object.assign({}, base), { border: 'none', boxShadow: 'none' }))
+            };
+            break;
+        case 'file':
+            baseProps.className = 'form-control';
+            baseProps.accept = field.accept;
+            baseProps.isMultiple = field.isMultiple;
+            if (!baseProps.isMultiple) {
+                containerClasses.push('col-auto');
+            }
+            baseProps.maxFiles = field.maxFiles;
+            baseProps.maxSize = field.maxSize;
+            baseProps.onChange = (fileIds) => {
+                controllerField.onChange(fileIds);
+            };
+            break;
+        case 'radio':
+        case 'checkbox':
+            baseProps.className = 'form-check-input';
+            containerClasses.push('mx-2', 'form-check', 'form-switch');
+            break;
+        case 'number':
+            baseProps.step = field.step;
+        // fallthrough
+        case 'date':
+        case 'datetime-local':
+        case 'time':
+            containerClasses.push('col-auto');
+        // fallthrough
+        case 'text':
+        case 'email':
+        case 'password':
+        default:
+            baseProps.className = 'form-control';
+            // Override onChange to include string normalization on real-time input
+            baseProps.onInput = (event) => __awaiter(this, void 0, void 0, function* () {
+                // Apply normalization
+                const normalizedValue = field.getNormalizedValue(event.target.value);
+                event.target.value = normalizedValue;
+                // Call the original onChange
+                return register.onChange(event);
+            });
+            break;
+    }
+    // Add validation classes
+    if (fieldState.error) {
+        baseProps.className += ' is-invalid';
+    }
+    else if (!baseProps.className.includes('form-check-input') && (fieldState.isTouched || fieldState.isDirty)) {
+        baseProps.className += ' is-valid';
+    }
+    // Render the label for the field
+    const renderLabel = () => (<label htmlFor={field.name} className='form-label'>
+            {field.label} {field.isRequired &&
+            <span className='text-danger' title='Field is required'>
+                    *
+                </span>}
+        </label>);
+    // Render the input element based on the field type
+    const renderInput = () => {
+        var _a;
+        switch (field.type) {
+            case 'select':
+                return (<react_select_1.default {...controllerField} {...baseProps}/>);
+            case 'async-select':
+                return (<async_1.default {...controllerField} {...baseProps}/>);
+            case 'creatable-select':
+                return (<creatable_1.default {...controllerField} {...baseProps}/>);
+            case 'async-creatable-select':
+                return (<async_creatable_1.default {...controllerField} {...baseProps}/>);
+            case 'radio':
+                return (<>
+                        {(_a = field.options) === null || _a === void 0 ? void 0 : _a.map((option) => (<div key={option.value}>
+                                <input {...baseProps} id={`${field.name}_${option.value}`} // Override uniqueid for each option
+                     value={option.value}/>
+                                <label htmlFor={`${field.name}_${option.value}`}>
+                                    {option.label}
+                                </label>
+                            </div>))}
+                    </>);
+            case 'textarea':
+                return <textarea {...baseProps}/>;
+            case 'file':
+                return <FileField_1.default {...controllerField} {...baseProps}/>;
+            case 'checkbox':
+            case 'number':
+            case 'date':
+            case 'datetime-local':
+            case 'time':
+            case 'text':
+            case 'email':
+            case 'password':
+            default:
+                return <input {...baseProps}/>;
+        }
+    };
+    // Render validation error message
+    const renderError = () => {
+        if (!fieldState.error) {
+            return null;
+        }
+        return (<div className='invalid-feedback d-block'>
+                {fieldState.error.message}
+            </div>);
+    };
+    // Combine container classes into a single string
+    containerClasses.push(field.className); // Add field-specific className in the end to override defaults
+    const containerClassNames = containerClasses.filter(Boolean).join(' ');
+    return (<div className={containerClassNames}>
+            {renderLabel()}
+            {renderInput()}
+            {renderError()}
+        </div>);
+}

package/dist/components/FileField.d.ts

@@ -0,0 +1,12 @@
+import '../styles/uploady-ext.css';
+interface FileFieldProps {
+    value?: any;
+    onChange?: (value: any) => void;
+    className?: string;
+    accept?: string;
+    isMultiple?: boolean;
+    maxFiles?: number;
+    maxSize?: number;
+}
+declare const FileField: import("react").ForwardRefExoticComponent<FileFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export default FileField;

package/dist/components/FileField.js

@@ -0,0 +1,338 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const uploady_1 = require("@rpldy/uploady");
+const upload_drop_zone_1 = require("@rpldy/upload-drop-zone");
+const upload_button_1 = require("@rpldy/upload-button");
+const upload_preview_1 = require("@rpldy/upload-preview");
+const react_1 = require("react");
+const react_toastify_1 = require("react-toastify");
+const filesize_1 = require("filesize");
+require("../styles/uploady-ext.css");
+const FileField = (0, react_1.forwardRef)(({ value, onChange, className, accept, isMultiple, maxFiles, maxSize }, ref) => {
+    const height = 200;
+    // State to store file metadata for preview
+    const [fileMetadata, setFileMetadata] = (0, react_1.useState)(new Map());
+    // State to store upload progress for each file
+    const [uploadProgress, setUploadProgress] = (0, react_1.useState)(new Map());
+    // Counter for currently uploading files
+    const uploadingCountRef = (0, react_1.useRef)(0);
+    // Ref to always have the latest fileMetadata
+    const fileMetadataRef = (0, react_1.useRef)(new Map());
+    // Ref for scroll container
+    const scrollContainerRef = (0, react_1.useRef)(null);
+    // Update ref whenever fileMetadata changes
+    (0, react_1.useEffect)(() => {
+        fileMetadataRef.current = fileMetadata;
+    }, [fileMetadata]);
+    // Auto-scroll to the end when new files are added
+    (0, react_1.useEffect)(() => {
+        if (scrollContainerRef.current && fileMetadata.size > 0) {
+            scrollContainerRef.current.scrollTo({
+                left: scrollContainerRef.current.scrollWidth,
+                behavior: 'smooth'
+            });
+        }
+    }, [fileMetadata.size]);
+    // Reset in form
+    (0, react_1.useEffect)(() => {
+        const handleFormReset = (event) => {
+            const form = event.target;
+            if (form.contains(scrollContainerRef.current)) {
+                setFileMetadata(new Map());
+                setUploadProgress(new Map());
+                uploadingCountRef.current = 0;
+                // Notify parent component about the value change
+                onChange === null || onChange === void 0 ? void 0 : onChange(isMultiple ? [] : null);
+            }
+        };
+        // Add reset event listener
+        window.addEventListener('reset', handleFormReset);
+        return () => {
+            // Remove event listener on unmount
+            window.removeEventListener('reset', handleFormReset);
+        };
+    }, [onChange, isMultiple]);
+    // File filter to prevent duplicates and enforce maxFiles limit
+    const fileFilter = (0, react_1.useCallback)((file) => {
+        const currentCount = fileMetadataRef.current.size + uploadingCountRef.current;
+        // Check file size limit
+        if (maxSize && file.size > maxSize) {
+            const sizeMB = (file.size / 1024 / 1024).toFixed(2);
+            const maxSizeMB = (maxSize / 1024 / 1024).toFixed(2);
+            react_toastify_1.toast.error(`File '${file.name}' is too large (${sizeMB}MB). Maximum allowed size is ${maxSizeMB}MB. ${file.name} blocked`);
+            return false;
+        }
+        // Check maxFiles limit
+        if (maxFiles && currentCount >= maxFiles) {
+            react_toastify_1.toast.error(`Max files limit reached (${maxFiles}): ${file.name} blocked`);
+            return false;
+        }
+        // Check if file already exists
+        const isDuplicate = Array.from(fileMetadataRef.current.values()).some(meta => meta.originalName === file.name && meta.size === file.size);
+        if (isDuplicate) {
+            react_toastify_1.toast.error(`Duplicate file blocked: ${file.name}`);
+            return false;
+        }
+        return true;
+    }, [maxFiles, maxSize]);
+    // Upload handler component for file uploads
+    const UploadHandler = ({ onUploaded }) => {
+        (0, uploady_1.useItemStartListener)((item) => {
+            // Increment uploading counter
+            uploadingCountRef.current++;
+            setFileMetadata(prev => {
+                var _a, _b, _c, _d;
+                const newMap = new Map(prev);
+                newMap.set(item.id, {
+                    url: item.url,
+                    filename: (_a = item.file) === null || _a === void 0 ? void 0 : _a.name,
+                    originalName: (_b = item.file) === null || _b === void 0 ? void 0 : _b.name,
+                    size: (_c = item.file) === null || _c === void 0 ? void 0 : _c.size,
+                    mimetype: (_d = item.file) === null || _d === void 0 ? void 0 : _d.type
+                });
+                return newMap;
+            });
+        });
+        // Listen to upload progress
+        (0, uploady_1.useItemProgressListener)((item) => {
+            if (item.completed < 100) {
+                setUploadProgress(prev => {
+                    const newMap = new Map(prev);
+                    newMap.set(item.id, item.completed);
+                    return newMap;
+                });
+            }
+            else {
+                // Remove progress when complete
+                setUploadProgress(prev => {
+                    const newMap = new Map(prev);
+                    newMap.delete(item.id);
+                    return newMap;
+                });
+            }
+        });
+        (0, uploady_1.useItemErrorListener)((item) => {
+            var _a, _b;
+            react_toastify_1.toast.error(((_b = (_a = item === null || item === void 0 ? void 0 : item.uploadResponse) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) || 'Upload failed');
+            // Remove preview and progress for errored item
+            setFileMetadata(prev => {
+                const newMap = new Map(prev);
+                newMap.delete(item.id);
+                return newMap;
+            });
+            setUploadProgress(prev => {
+                const newMap = new Map(prev);
+                newMap.delete(item.id);
+                return newMap;
+            });
+            // Decrement uploading counter
+            uploadingCountRef.current = Math.max(0, uploadingCountRef.current - 1);
+        });
+        (0, uploady_1.useItemFinishListener)((item) => {
+            var _a, _b;
+            // Decrement uploading counter
+            uploadingCountRef.current = Math.max(0, uploadingCountRef.current - 1);
+            if (item.state === 'finished') {
+                const responseData = (_a = item.uploadResponse) === null || _a === void 0 ? void 0 : _a.data;
+                const url = (_b = responseData === null || responseData === void 0 ? void 0 : responseData.url) !== null && _b !== void 0 ? _b : null;
+                // If no URL is returned, stop processing
+                if (!url) {
+                    return;
+                }
+                // Store file metadata for preview
+                setFileMetadata(prev => {
+                    const newMap = new Map(prev);
+                    if (newMap.has(item.id)) {
+                        newMap.set(item.id, Object.assign(Object.assign({}, newMap.get(item.id)), { url: responseData === null || responseData === void 0 ? void 0 : responseData.url, filename: responseData === null || responseData === void 0 ? void 0 : responseData.filename, originalName: responseData === null || responseData === void 0 ? void 0 : responseData.originalName, size: responseData === null || responseData === void 0 ? void 0 : responseData.size, mimetype: responseData === null || responseData === void 0 ? void 0 : responseData.mimetype, isUploading: false }));
+                    }
+                    return newMap;
+                });
+                // For multiple files, append to existing array
+                if (isMultiple) {
+                    const currentValue = Array.isArray(value) ? value : [];
+                    onUploaded([...currentValue, url]);
+                }
+                else {
+                    onUploaded(url);
+                }
+            }
+        });
+        return null;
+    };
+    // Custom preview component for uploaded files
+    const cleanupAllFiles = () => {
+        // Use ref to get the latest fileMetadata
+        const filenames = Array.from(fileMetadataRef.current.values()).map(meta => meta.filename);
+        if (filenames.length === 0) {
+            return;
+        }
+        // Try sendBeacon first (most reliable)
+        const blob = new Blob([JSON.stringify({ filenames })], { type: 'application/json' });
+        if (navigator.sendBeacon('/api/upload/temp/cleanup', blob)) {
+            // Cleanup request sent via beacon
+            return;
+        }
+        // Fallback to fetch with keepalive
+        fetch('/api/upload/temp/cleanup', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ filenames }),
+            keepalive: true // Important for page unload
+        }).catch(error => console.error('Cleanup failed:', error));
+    };
+    // Cleanup all temp files on component unmount
+    (0, react_1.useEffect)(() => {
+        const handleBeforeUnload = (_) => {
+            cleanupAllFiles();
+        };
+        window.addEventListener('beforeunload', handleBeforeUnload);
+        return () => {
+            window.removeEventListener('beforeunload', handleBeforeUnload);
+            cleanupAllFiles();
+        };
+    }, []);
+    // Preview container wrapper component
+    const PreviewContainer = ({ children }) => (<div className={`d-flex border rounded position-relative align-items-center justify-content-center rounded overflow-hidden flex-shrink-0 ${isMultiple ? 'me-2' : ''}`} style={{
+            height: `${height}px`,
+            maxWidth: `${height}px`
+        }}>
+                {children}
+            </div>);
+    // Custom preview component
+    const CustomPreview = (props) => {
+        var _a;
+        const { id, url, name, removePreview } = props;
+        const metadata = fileMetadata.get(id);
+        if (!metadata) {
+            return null;
+        }
+        // Hook to abort upload
+        const abortItem = (0, uploady_1.useAbortItem)();
+        const handleCancel = () => {
+            console.log('Cancelling upload for item id:', id);
+            // Abort the upload
+            abortItem(id);
+            // Remove from preview
+            removePreview === null || removePreview === void 0 ? void 0 : removePreview();
+            // Remove from progress
+            setUploadProgress(prev => {
+                const newMap = new Map(prev);
+                newMap.delete(id);
+                return newMap;
+            });
+            // Decrement counter
+            uploadingCountRef.current = Math.max(0, uploadingCountRef.current - 1);
+            react_toastify_1.toast.info('Upload cancelled');
+        };
+        const handleRemove = () => __awaiter(void 0, void 0, void 0, function* () {
+            // Remove from preview
+            removePreview === null || removePreview === void 0 ? void 0 : removePreview();
+            const metadata = fileMetadata.get(id);
+            // Remove from metadata immediately
+            setFileMetadata(prev => {
+                const newMap = new Map(prev);
+                newMap.delete(id);
+                return newMap;
+            });
+            try {
+                yield fetch(`/api/upload/temp/${metadata === null || metadata === void 0 ? void 0 : metadata.filename}`, {
+                    method: 'DELETE'
+                });
+            }
+            catch (error) {
+                console.error('Failed to delete temp file:', error);
+            }
+            finally {
+                // Remove from form value
+                const newValue = (isMultiple && Array.isArray(value)) ?
+                    // Find and remove the filename associated with this preview item
+                    // Note: We need to track the mapping between preview id and filename
+                    value.filter((url) => url !== (metadata === null || metadata === void 0 ? void 0 : metadata.url)) :
+                    null;
+                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+            }
+        });
+        // Determine if file is an image
+        const isImage = (_a = metadata === null || metadata === void 0 ? void 0 : metadata.mimetype) === null || _a === void 0 ? void 0 : _a.startsWith('image/');
+        // Get upload progress for this file
+        const progress = uploadProgress.get(id);
+        const isUploading = progress !== undefined;
+        return (<PreviewContainer>
+                    {/* Preview content */}
+                    {isImage ? (<img className='object-fit-cover h-100' src={url} alt={name || 'Preview'}/>) : (<div className='d-flex flex-column align-items-center justify-content-center p-3 text-center w-100' style={{
+                    minWidth: `${height / 1.35}px`
+                }}>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" viewBox="0 0 16 16">
+                                <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
+                                <text x="50%" y="65%" textAnchor="middle" fontSize="3" fontWeight="bold" fill="currentColor">
+                                    {(() => {
+                    const filename = (metadata === null || metadata === void 0 ? void 0 : metadata.originalName) || name || '';
+                    const parts = filename.split('.');
+                    return parts.length > 1 ? parts[parts.length - 1].toUpperCase() : 'FILE';
+                })()}
+                                </text>
+                            </svg>
+                            <div className='mt-2 small'>
+                                {(0, filesize_1.filesize)((metadata === null || metadata === void 0 ? void 0 : metadata.size) || 0, { base: 2, standard: "jedec" })}
+                            </div>
+                        </div>)}
+
+                    {/* Preview cancel button */}
+                    <button type='button' className='btn btn-close bg-danger p-2 btn-sm position-absolute top-0 end-0 m-2' aria-label='Close' onClick={(e) => {
+                e.stopPropagation();
+                if (isUploading) {
+                    handleCancel();
+                }
+                else {
+                    handleRemove();
+                }
+            }} title='Remove File'/>
+
+                    {/* Preview footer (title/progress) */}
+                    <div className='position-absolute bottom-0 start-0 end-0 bg-dark bg-opacity-75 text-white py-2 text-truncate small d-flex align-items-center'>
+                        {isUploading && (<div className='progress rounded-0 position-absolute w-100 left-0 bottom-0' style={{ height: '3px' }}>
+                                <div className='progress-bar progress-bar-striped progress-bar-animated bg-primary' role='progressbar' style={{ width: `${progress}%` }} aria-valuenow={progress} aria-valuemin={0} aria-valuemax={100}/>
+                            </div>)}
+                        <span className='px-3 w-100 d-inline-block text-truncate'>
+                            {isUploading ? `${Math.round(progress || 0)}% - ` : ''}
+                            {name}
+                        </span>
+                    </div>
+                </PreviewContainer>);
+    };
+    return (<uploady_1.default destination={{
+            url: '/api/upload/temp',
+            filesParamName: 'file'
+        }} multiple={isMultiple} accept={accept} fileFilter={fileFilter} concurrent={isMultiple} maxConcurrent={maxFiles}>
+                <UploadHandler onUploaded={(payload) => {
+            onChange === null || onChange === void 0 ? void 0 : onChange(payload);
+        }}/>
+
+                <upload_drop_zone_1.default className={`${className || ''}`} onDragOverClassName='drag-over'>
+                    <div ref={scrollContainerRef} className='d-flex align-items-center overflow-x-auto overflow-y-hidden'>
+                        <upload_preview_1.default rememberPreviousBatches={true} PreviewComponent={CustomPreview} fallbackUrl='data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100"%3E%3Crect width="100" height="100" fill="%23ddd"/%3E%3Ctext x="50%25" y="50%25" text-anchor="middle" dy=".3em" fill="%23999"%3EImage%3C/text%3E%3C/svg%3E'/>
+                        {(!maxFiles || fileMetadata.size + uploadingCountRef.current < maxFiles) && (<upload_button_1.default className='border-0 bg-transparent p-0 cursor-pointer flex-shrink-0' extraProps={{ type: 'button' }}>
+                                <PreviewContainer>
+                                    <div className='text-center p-3'>
+                                        <div className='fw-bold'>Upload File</div>
+                                        <div className='text-muted small mt-1'>Click or drag</div>
+                                    </div>
+                                </PreviewContainer>
+                            </upload_button_1.default>)}
+                    </div>
+                </upload_drop_zone_1.default>
+
+                {/* Upload Preview for images */}
+            </uploady_1.default>);
+});
+FileField.displayName = 'FileField';
+exports.default = FileField;

package/dist/components/Form.d.ts

@@ -0,0 +1,8 @@
+import type { Form as FormType } from '../types/Form';
+interface FormProps {
+    form: FormType;
+    onSubmit: (data: any) => Promise<void>;
+    showReset?: boolean;
+}
+export default function Form({ form, onSubmit, showReset }: FormProps): JSX.Element;
+export {};

package/dist/components/Form.js

@@ -0,0 +1,100 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Form;
+const react_hook_form_1 = require("react-hook-form");
+const zod_1 = require("@hookform/resolvers/zod");
+const react_toastify_1 = require("react-toastify");
+const Field_1 = require("./Field");
+function Form({ form, onSubmit, showReset = false }) {
+    // Initialize react-hook-form with zod resolver
+    const { register, handleSubmit, reset, trigger, clearErrors, control, formState: { touchedFields, isSubmitting, isValid, isDirty } } = (0, react_hook_form_1.useForm)({
+        resolver: (0, zod_1.zodResolver)(form.schema),
+        mode: 'onChange',
+        defaultValues: form.defaultValues
+    });
+    // Handle form submission
+    const handleFormSubmit = (data) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            yield onSubmit(data);
+            reset(data);
+        }
+        catch (error) {
+            react_toastify_1.toast.error('Form submission failed');
+        }
+    });
+    const validateFormFields = (field) => __awaiter(this, void 0, void 0, function* () {
+        const fieldNames = Object.values(form.sections)
+            .flatMap(section => Object.values(section.fields))
+            .map(f => f.name);
+        const currentIndex = fieldNames.indexOf(field.name);
+        // Trigger validation for all fields before the current one
+        const beforeFields = fieldNames.slice(0, currentIndex + 1);
+        beforeFields.forEach(name => trigger(name));
+        // Clear errors for untouched fields after the current one
+        const afterFields = fieldNames.slice(currentIndex + 1);
+        const untouchedAfterFields = afterFields.filter(name => !touchedFields[name]);
+        clearErrors(untouchedAfterFields);
+    });
+    const getFieldRegister = (field) => {
+        const baseRegister = register(field.name, {
+            valueAsNumber: field.type === 'number'
+        });
+        return Object.assign(Object.assign({}, baseRegister), { onFocus: (_) => __awaiter(this, void 0, void 0, function* () {
+                // Call form field validations by a specific order
+                yield validateFormFields(field);
+            }), onChange: (event) => __awaiter(this, void 0, void 0, function* () {
+                // Call the base onChange handler
+                yield baseRegister.onChange(event);
+                // Trigger re-validation for specified fields
+                for (const revalidateFieldName of field.revalidates) {
+                    yield trigger(revalidateFieldName);
+                }
+            }) });
+    };
+    // Render a single field
+    const renderField = (field) => {
+        const fieldRegister = getFieldRegister(field);
+        return (<Field_1.default key={field.name} field={field} register={fieldRegister} control={control}/>);
+    };
+    // Render section
+    const renderSection = (section) => {
+        return (<div className={`${section.className} mb-4`}>
+                <div className='card'>
+                    <div className='card-header'>
+                        {section.title && <h3>{section.title}</h3>}
+                    </div>
+                    <div className='card-body'>
+                <div className='row g-3'>
+                    {Object.values(section.fields).map(field => renderField(field))}
+                </div>
+                </div>
+            </div>
+            </div>);
+    };
+    // Render form buttons
+    const renderButtons = () => {
+        return (<div className='d-flex gap-2'>
+                <button type='submit' className='btn btn-primary' disabled={!isDirty || !isValid || isSubmitting}>
+                    {isSubmitting ? 'Submitting...' : 'Submit'}
+                </button>
+                {showReset && (<button type='button' className='btn btn-secondary' onClick={() => reset()} disabled={!isDirty || isSubmitting}>
+                        Reset
+                    </button>)}
+            </div>);
+    };
+    return (<form className='row' onSubmit={handleSubmit(handleFormSubmit)} noValidate>
+            {/* Render form fields */}
+            {form.sections.map(section => renderSection(section))}
+            {/* Render buttons */}
+            {renderButtons()}
+        </form>);
+}