@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

package/lib/form-engine/FormEngine.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useForm } from 'react-hook-form';
+import { useEffect, useState } from 'react';
+import { Button, SheetRoot, SheetTrigger } from '../components';
+import { cn } from '../helpers';
+import FieldWrapper from './components/FieldWrapper';
+import { useFormPersistence } from './hooks/useFormPersistence';
+const CancelButton = ({ isSubmitting, onCancel, isNotTrigger, onClearData }) => {
+    const handleCancel = () => {
+        if (onClearData) {
+            onClearData();
+        }
+        onCancel();
+    };
+    const sharedClasses = 'bg-white border-primary-500 text-primary-500 hover:bg-primary-600 hover:text-white w-full mr-3';
+    return isNotTrigger ? (_jsx(Button, { className: sharedClasses, disabled: isSubmitting, onClick: handleCancel, children: "Cancel" })) : (_jsx(SheetRoot, { children: _jsx(SheetTrigger, { asChild: true, children: _jsx(Button, { className: sharedClasses, disabled: isSubmitting, onClick: handleCancel, children: "Cancel" }) }) }));
+};
+const FormEngine = ({ fields, onSubmit, initialValues, layout = 'vertical', isNotTrigger, showCancelButton = true, submitButtonText = 'Save', showSubmittingText = true, submitButtonClass, onCancel, getFieldValues, formRef, className, persistenceKey, }) => {
+    const { saveFormData, restoreFormData, clearPersistedData, hasPersistedData } = useFormPersistence(persistenceKey);
+    // Determine initial values: persisted data takes precedence over provided initialValues
+    const getEffectiveInitialValues = () => {
+        if (persistenceKey && hasPersistedData()) {
+            const persistedData = restoreFormData();
+            if (persistedData) {
+                return { ...initialValues, ...persistedData };
+            }
+        }
+        return initialValues;
+    };
+    const { control, handleSubmit, watch, formState: { errors, isSubmitting }, reset, setValue, trigger, } = useForm({ mode: 'onBlur', defaultValues: getEffectiveInitialValues() });
+    const allFields = watch();
+    const password = watch('password');
+    const confirmPassword = watch('confirmPassword');
+    //re-validate confirmPassword when password changes
+    useEffect(() => {
+        if (password && confirmPassword) {
+            trigger('confirmPassword');
+        }
+    }, [password, trigger, confirmPassword]);
+    useEffect(() => {
+        if (getFieldValues) {
+            getFieldValues(allFields);
+        }
+    }, [allFields, getFieldValues]);
+    // Save form data when fields change (for persistence)
+    useEffect(() => {
+        if (persistenceKey && allFields && Object.keys(allFields).length > 0) {
+            // Only save if there are actual field values (not just empty object)
+            const hasValues = Object.values(allFields).some((value) => value !== undefined && value !== null && value !== '');
+            if (hasValues) {
+                saveFormData(allFields, true);
+            }
+        }
+    }, [allFields, persistenceKey, saveFormData]);
+    // Expose form control methods via ref
+    useEffect(() => {
+        if (formRef) {
+            formRef.current = {
+                reset: () => reset(getEffectiveInitialValues()),
+                setValue: (name, value) => setValue(name, value),
+            };
+        }
+    }, [formRef, reset, setValue, getEffectiveInitialValues]);
+    const [submitError, setSubmitError] = useState(null);
+    const handleFormSubmit = async (data) => {
+        setSubmitError(null);
+        try {
+            await onSubmit(data);
+            // Clear persisted data on successful submission
+            if (persistenceKey) {
+                clearPersistedData();
+            }
+            if (!formRef) {
+                reset(initialValues);
+            }
+        }
+        catch (error) {
+            setSubmitError(error instanceof Error ? error.message : 'An error occurred');
+        }
+    };
+    // Enhanced validation functions
+    const validatePassword = (value) => {
+        if (!value)
+            return 'Password is required';
+        if (value.length < 8)
+            return 'Password must be at least 8 characters';
+        return true;
+    };
+    const validateConfirmPassword = (value) => {
+        if (!value)
+            return 'Please confirm your password';
+        if (!password)
+            return 'Please enter a password first';
+        if (password.length < 8)
+            return 'Please enter a valid password first (minimum 8 characters)';
+        if (value !== password)
+            return 'Passwords do not match';
+        return true;
+    };
+    return (_jsxs("form", { className: cn(`${layout === 'horizontal' ? 'flex flex-wrap -mx-4' : ''} mb-6 border-gray-400 p-3`, className), onSubmit: handleSubmit(handleFormSubmit), children: [_jsx("div", { className: `${layout === 'vertical' ? 'grid grid-cols-12 gap-2 align-middle' : 'w-full flex flex-wrap'}`, children: fields?.map((field) => {
+                    // Extract validation logic
+                    const getFieldValidation = () => {
+                        if (field.name === 'password') {
+                            return validatePassword;
+                        }
+                        if (field.name === 'confirmPassword') {
+                            return validateConfirmPassword;
+                        }
+                        return field.validation?.validate;
+                    };
+                    return (_jsx(FieldWrapper, { field: {
+                            ...field,
+                            validation: {
+                                ...field.validation,
+                                validate: getFieldValidation(),
+                            },
+                        }, control: control, errors: errors, layout: layout }, field.name));
+                }) }), _jsxs("div", { className: clsx('flex col-span-2 mt-4 w-full', showCancelButton ? 'space-x-4' : 'justify-end'), children: [showCancelButton && (_jsx(CancelButton, { isSubmitting: isSubmitting, onCancel: onCancel, isNotTrigger: isNotTrigger, onClearData: persistenceKey ? clearPersistedData : undefined })), _jsx(Button, { type: "submit", className: clsx(showCancelButton ? 'w-full ml-3' : 'w-[20%]', submitButtonClass), disabled: isSubmitting, children: submitButtonText }), isSubmitting && showSubmittingText && _jsx("span", { children: "Submitting..." })] }), submitError && _jsx("p", { className: "text-red-500", children: submitError })] }));
+};
+export default FormEngine;

package/lib/form-engine/components/FieldWrapper.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { DependentFieldUpdate, Field, FieldWrapperProps, SelectOption } from '../types';
+interface ExtendedFieldWrapperProps extends FieldWrapperProps {
+    onFieldUpdate?: Record<string, DependentFieldUpdate[]>;
+    onFieldChange?: (fieldName: string, value: any) => void;
+    setValue?: (field: string, value: any) => void;
+    clearErrors?: (field: string) => void;
+    updateFieldOptions?: (field: string, options: Array<SelectOption | string>) => void;
+    updateFieldLabel?: (fieldName: string, newLabelName: string) => void;
+    setFieldHidden?: (fieldName: string, hidden: boolean) => void;
+    addField?: (fields: Field) => void;
+    pendingUpdatesRef?: React.MutableRefObject<Map<string, any>>;
+    processingDependencyRef?: React.MutableRefObject<boolean>;
+    fieldChangeRef?: React.MutableRefObject<Set<string>>;
+    notifyPendingUpdate?: () => void;
+}
+declare const FieldWrapper: React.FC<ExtendedFieldWrapperProps>;
+export default FieldWrapper;

package/lib/form-engine/components/FieldWrapper.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Controller } from 'react-hook-form';
+import { useMemo } from 'react';
+import { getInputComponent } from '../registry';
+const FieldWrapper = ({ field, control, errors, layout, onFieldUpdate, onFieldChange, pendingUpdatesRef, fieldChangeRef, notifyPendingUpdate, }) => {
+    const InputComponent = getInputComponent(field.type);
+    const wrapperClass = useMemo(() => {
+        if (layout === 'horizontal') {
+            return 'w-1/2 px-4';
+        }
+        return `col-span-${field?.gridSpan ?? '12'}`;
+    }, [layout, field?.gridSpan]);
+    if (!InputComponent) {
+        console.error(`No component registered for type: ${field.type}`);
+        return null;
+    }
+    const handleFieldChange = (value, onChange, onChangeField) => {
+        // Extract actual value from event if needed
+        let actualValue = value;
+        if (value && typeof value === 'object' && value.target !== undefined) {
+            // This is a SyntheticEvent, extract the value
+            actualValue = value.target.value;
+        }
+        // Call the provided onChange function with the actual value
+        onChange(actualValue);
+        // Call any custom onChange handler if provided
+        if (onChangeField) {
+            onChangeField(actualValue);
+        }
+        // Call the onFieldChange callback if provided
+        if (onFieldChange) {
+            onFieldChange(field.name, actualValue);
+        }
+        // Only queue field updates if this field has dependencies
+        if (onFieldUpdate?.[field.name]) {
+            if (fieldChangeRef && !fieldChangeRef.current.has(field.name)) {
+                fieldChangeRef.current.add(field.name);
+            }
+            // Add the update to the pending queue
+            if (pendingUpdatesRef) {
+                pendingUpdatesRef.current.set(field.name, actualValue);
+                if (notifyPendingUpdate) {
+                    notifyPendingUpdate(); // Notify parent component about update
+                }
+            }
+        }
+    };
+    if (field.name === 'email') {
+        field.validation = {
+            ...field.validation,
+            pattern: {
+                value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+                message: 'Please enter a valid email address',
+            },
+        };
+    }
+    // Skip rendering if field is hidden
+    if (field.isHidden) {
+        return null;
+    }
+    return (_jsx("div", { className: `${wrapperClass} mb-2`, children: _jsx(Controller, { name: field.name, control: control, rules: field.validation, render: ({ field: inputProps }) => (_jsx("div", { className: "flex flex-col", children: _jsx(InputComponent, { ...inputProps, field: field, error: errors[field.name], onChange: (value) => handleFieldChange(value, inputProps.onChange, field?.onChange), options: field.options ?? [] }) })) }) }));
+};
+export default FieldWrapper;

package/lib/form-engine/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './inputs';
+export { default as FieldWrapper } from './FieldWrapper';

package/lib/form-engine/components/index.js

@@ -0,0 +1,2 @@
+export * from './inputs';
+export { default as FieldWrapper } from './FieldWrapper';

package/lib/form-engine/components/inputs/card-expiry-input/CardExpiryInput.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface CardExpiryInputProps {
+    field: {
+        name: string;
+        label: string;
+        disabled?: boolean;
+        placeholder?: string;
+    };
+    error?: {
+        message: string;
+    };
+    value: string;
+    onChange: (value: string) => void;
+}
+declare const CardExpiryInput: React.ForwardRefExoticComponent<CardExpiryInputProps & React.RefAttributes<HTMLInputElement>>;
+export default CardExpiryInput;

package/lib/form-engine/components/inputs/card-expiry-input/CardExpiryInput.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useCallback, useState } from 'react';
+import { Input } from '../../../../components';
+const CardExpiryInput = forwardRef(({ field, error, value, onChange, ...props }, ref) => {
+    const [formattedValue, setFormattedValue] = useState('');
+    // Format expiry date with slash
+    const formatExpiry = useCallback((input) => {
+        const numbers = input.replace(/\D/g, '');
+        if (numbers.length >= 2) {
+            return `${numbers.slice(0, 2)}/${numbers.slice(2, 4)}`;
+        }
+        return numbers;
+    }, []);
+    // Validate month value
+    const isValidMonth = useCallback((month) => {
+        const monthNum = parseInt(month, 10);
+        return monthNum >= 1 && monthNum <= 12;
+    }, []);
+    // Handle input change
+    const handleChange = useCallback((e) => {
+        const input = e.target.value;
+        const numbers = input.replace(/\D/g, '');
+        // Prevent more than 4 digits
+        if (numbers.length > 4)
+            return;
+        // Validate month when 2 digits are entered
+        if (numbers.length >= 2) {
+            const month = numbers.slice(0, 2);
+            if (!isValidMonth(month))
+                return;
+        }
+        const formatted = formatExpiry(numbers);
+        setFormattedValue(formatted);
+        // Call parent onChange with raw numeric value
+        if (onChange) {
+            onChange(numbers);
+        }
+    }, [formatExpiry, isValidMonth, onChange]);
+    // Handle initial value formatting
+    React.useEffect(() => {
+        if (value) {
+            setFormattedValue(formatExpiry(value));
+        }
+    }, [value, formatExpiry]);
+    return (_jsxs("div", { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-gray-700", children: field.label }), _jsx(Input, { ...props, id: field.name, ref: ref, value: formattedValue, onChange: handleChange, disabled: field.disabled, placeholder: field.placeholder || 'MM/YY', maxLength: 5, inputMode: "numeric", pattern: "\\d*", className: `mt-1 block w-full p-2 border ${error ? 'border-red-500' : 'border-gray-300'} rounded-md shadow-sm disabled:text-gray-400 disabled:bg-gray-50` }), error && _jsx("p", { className: "mt-2 text-sm text-red-500", children: error.message })] }));
+});
+CardExpiryInput.displayName = 'CardExpiryInput';
+export default CardExpiryInput;

package/lib/form-engine/components/inputs/checkbox-input/CheckboxInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { InputProps } from '../../../types';
+declare const CheckboxInput: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default CheckboxInput;

package/lib/form-engine/components/inputs/checkbox-input/CheckboxInput.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox, Label } from 'flowbite-react';
+import React from 'react';
+const CheckboxInput = React.forwardRef(({ field, error, onChange, ...props }, ref) => (_jsxs("div", { className: "flex flex-row items-start space-x-3 space-y-0", children: [_jsx("div", { className: "flex items-center h-4 mt-1", children: _jsx(Checkbox, { id: field.name, disabled: field.disabled, onChange: (e) => onChange(e.target.checked), ref: ref, ...props, color: error ? 'failure' : 'primary' }) }), _jsxs("div", { className: "space-y-1 leading-none", children: [field.label && (_jsx(Label, { htmlFor: field.name, className: "text-sm font-medium text-gray-700 cursor-pointer", children: field.label })), error && _jsx("p", { className: "text-xs text-red-500", children: error.message })] })] })));
+export default CheckboxInput;

package/lib/form-engine/components/inputs/credit-card-input/CreditCardInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { InputProps } from '../../../types';
+declare const CreditCardInput: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default CreditCardInput;

package/lib/form-engine/components/inputs/credit-card-input/CreditCardInput.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useState } from 'react';
+import { Input } from '../../../../components';
+const CARD_PATTERNS = {
+    visa: '4',
+    mastercard: {
+        twoDigitPrefixes: ['51', '52', '53', '54', '55'],
+        fourDigitPrefixStart: '2',
+        fourDigitSecondMin: 2,
+        fourDigitSecondMax: 7,
+        fourDigitThirdMin: 2,
+        fourDigitThirdMax: 9,
+    },
+};
+// SVG icons for card types
+const CardIcons = {
+    visa: (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48", width: "24px", height: "24px", children: [_jsx("path", { fill: "#1565C0", d: "M45,35c0,2.209-1.791,4-4,4H7c-2.209,0-4-1.791-4-4V13c0-2.209,1.791-4,4-4h34c2.209,0,4,1.791,4,4V35z" }), _jsx("path", { fill: "#FFF", d: "M15.186 19l-2.626 7.832c0 0-.667-3.313-.733-3.729-1.495-3.411-3.701-3.221-3.701-3.221L10.726 30v-.002h3.161L18.258 19H15.186zM17.689 30L20.56 30 22.296 19 19.389 19zM38.008 19h-3.021l-4.71 11h2.852l.588-1.571h3.596L37.619 30h2.613L38.008 19zM34.513 26.328l1.563-4.157.818 4.157H34.513zM26.369 22.206c0-.606.498-1.057 1.926-1.057.928 0 1.991.674 1.991.674l.466-2.309c0 0-1.358-.515-2.691-.515-3.019 0-4.576 1.444-4.576 3.272 0 3.306 3.979 2.853 3.979 4.551 0 .291-.231.964-1.888.964-1.662 0-2.759-.609-2.759-.609l-.495 2.216c0 0 1.063.606 3.117.606 2.059 0 4.915-1.54 4.915-3.752C30.354 23.586 26.369 23.394 26.369 22.206z" }), _jsx("path", { fill: "#FFC107", d: "M12.212,24.945l-0.966-4.748c0,0-0.437-1.029-1.573-1.029c-1.136,0-4.44,0-4.44,0S10.894,20.84,12.212,24.945z" })] })),
+    mastercard: (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48", width: "35px", height: "35px", children: [_jsx("path", { fill: "#ff9800", d: "M32 10A14 14 0 1 0 32 38A14 14 0 1 0 32 10Z" }), _jsx("path", { fill: "#d50000", d: "M16 10A14 14 0 1 0 16 38A14 14 0 1 0 16 10Z" }), _jsx("path", { fill: "#ff3d00", d: "M18,24c0,4.755,2.376,8.95,6,11.48c3.624-2.53,6-6.725,6-11.48s-2.376-8.95-6-11.48 C20.376,15.05,18,19.245,18,24z" })] })),
+};
+const CreditCardInput = forwardRef(({ field, error, onChange, value, ...props }, ref) => {
+    const [cardType, setCardType] = useState(null);
+    const [formattedValue, setFormattedValue] = useState('');
+    // Format card number with spaces
+    const formatCardNumber = useCallback((input) => {
+        const numbers = input.replace(/\D/g, '');
+        const groups = numbers.match(/.{1,4}/g) || [];
+        return groups.join(' ');
+    }, []);
+    // Detect card type
+    const detectCardType = useCallback((input) => {
+        const numbers = input.replace(/\D/g, '');
+        // Check Visa (starts with 4)
+        if (numbers.startsWith(CARD_PATTERNS.visa))
+            return 'visa';
+        // Check Mastercard
+        if (
+        // Check 51-55 prefixes
+        CARD_PATTERNS.mastercard.twoDigitPrefixes.some((prefix) => numbers.startsWith(prefix)) ||
+            // Check 222x-279x prefixes
+            (numbers.length >= 4 &&
+                numbers.startsWith(CARD_PATTERNS.mastercard.fourDigitPrefixStart) &&
+                Number(numbers[1]) >= CARD_PATTERNS.mastercard.fourDigitSecondMin &&
+                Number(numbers[1]) <= CARD_PATTERNS.mastercard.fourDigitSecondMax &&
+                Number(numbers[2]) >= CARD_PATTERNS.mastercard.fourDigitThirdMin &&
+                Number(numbers[2]) <= CARD_PATTERNS.mastercard.fourDigitThirdMax)) {
+            return 'mastercard';
+        }
+        return null;
+    }, []);
+    // Handle input change
+    const handleChange = useCallback((e) => {
+        const input = e.target.value;
+        const numbers = input.replace(/\D/g, '');
+        if (numbers.length > 16)
+            return;
+        const formatted = formatCardNumber(numbers);
+        const type = detectCardType(numbers);
+        setFormattedValue(formatted);
+        setCardType(type);
+        // Call parent onChange with raw numeric value
+        if (onChange) {
+            const event = {
+                ...e,
+                target: {
+                    ...e.target,
+                    value: numbers,
+                },
+            };
+            onChange(event);
+        }
+    }, [formatCardNumber, detectCardType, onChange]);
+    // Initialize formatted value when value prop changes
+    useEffect(() => {
+        if (value) {
+            setFormattedValue(formatCardNumber(value.toString()));
+            setCardType(detectCardType(value.toString()));
+        }
+    }, [value, formatCardNumber, detectCardType]);
+    return (_jsxs("div", { className: "relative", children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-gray-700", children: field.label }), _jsxs("div", { className: "relative", children: [_jsx(Input, { ...props, id: field.name, ref: ref, type: "creditCard", value: formattedValue, onChange: handleChange, disabled: field.disabled, placeholder: field.placeholder ?? '4242 4242 4242 4242', className: `mt-1 block w-full p-2 border ${error ? 'border-red-500' : 'border-gray-300'} rounded-md shadow-sm disabled:text-gray-400 disabled:bg-gray-50 pr-12` }), _jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2", children: cardType && CardIcons[cardType] })] }), error && _jsx("p", { className: "mt-2 text-sm text-red-500", children: error.message })] }));
+});
+CreditCardInput.displayName = 'CreditCardInput';
+export default CreditCardInput;

package/lib/form-engine/components/inputs/date-input/DateInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { InputProps } from '../../../types';
+declare const DateInput: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default DateInput;

package/lib/form-engine/components/inputs/date-input/DateInput.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { DatePicker } from '../../../../components';
+const DateInput = React.forwardRef(({ field, error, ...props }, ref) => {
+    return (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "mb-1 block text-sm font-medium text-gray-700", children: field.label }), _jsx(DatePicker, { ...props, ref: ref, id: field.name, disabled: field.disabled, placeholder: field.placeholder, className: `mt-1 block w-full p-2 ${error ? 'border-red-500' : 'border-gray-300'} rounded-md shadow-sm disabled:text-gray-400 disabled:bg-gray-50 disabled:cursor-not-allowed` }), error && _jsx("p", { className: "mt-2 text-sm text-red-500", children: error.message })] }));
+});
+export default DateInput;

package/lib/form-engine/components/inputs/date-input/index.d.ts

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

package/lib/form-engine/components/inputs/date-input/index.js

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

package/lib/form-engine/components/inputs/email-input/EmailInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { InputProps } from '../../../types';
+declare const EmailInput: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default EmailInput;

package/lib/form-engine/components/inputs/email-input/EmailInput.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Input } from '../../../../components';
+const EmailInput = React.forwardRef(({ field, error, ...props }, ref) => (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-gray-700", children: field.label }), _jsx(Input, { type: "email", ...props, ref: ref, id: field.name, disabled: field.disabled, placeholder: field.placeholder, className: `mt-1 block w-full p-2 border ${error ? 'border-red-500' : 'border-gray-300'} rounded-md shadow-sm disabled:text-gray-400 disabled:bg-gray-50` }), error && _jsx("p", { className: "mt-2 text-sm text-red-500", children: error.message })] })));
+export default EmailInput;

package/lib/form-engine/components/inputs/email-input/index.d.ts

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

package/lib/form-engine/components/inputs/email-input/index.js

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

package/lib/form-engine/components/inputs/index.d.ts

@@ -0,0 +1,13 @@
+export { default as DateInput } from './date-input';
+export { default as EmailInput } from './email-input';
+export { default as LabelInput } from './label-input';
+export { default as NumberInput } from './number-input';
+export { default as PasswordInput } from './password-input';
+export { default as RadioInput } from './radio-button';
+export { default as SelectInput } from './select';
+export { default as TextareaInput } from './textarea-input';
+export { default as TimeInput } from './time-input';
+export { default as ToggleSwitchInput } from './toggle-switch-input';
+export { default as UploadFieldForm } from './upload-field';
+export { default as CreditCardInput } from './credit-card-input/CreditCardInput';
+export { default as ExpiryInput } from './card-expiry-input/CardExpiryInput';

package/lib/form-engine/components/inputs/index.js

@@ -0,0 +1,13 @@
+export { default as DateInput } from './date-input';
+export { default as EmailInput } from './email-input';
+export { default as LabelInput } from './label-input';
+export { default as NumberInput } from './number-input';
+export { default as PasswordInput } from './password-input';
+export { default as RadioInput } from './radio-button';
+export { default as SelectInput } from './select';
+export { default as TextareaInput } from './textarea-input';
+export { default as TimeInput } from './time-input';
+export { default as ToggleSwitchInput } from './toggle-switch-input';
+export { default as UploadFieldForm } from './upload-field';
+export { default as CreditCardInput } from './credit-card-input/CreditCardInput';
+export { default as ExpiryInput } from './card-expiry-input/CardExpiryInput';

package/lib/form-engine/components/inputs/label-input/LabelInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { InputProps } from '../../../types';
+declare const LabelInput: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default LabelInput;

package/lib/form-engine/components/inputs/label-input/LabelInput.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Input } from '../../../../components';
+const LabelInput = React.forwardRef(({ field, error, ...props }, ref) => {
+    return (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-gray-700", children: field.label }), _jsx(Input, { ...props, id: field.name, ref: ref, disabled: field.disabled, placeholder: field.placeholder, className: `mt-1 block w-full p-2 border ${error ? 'border-red-500' : 'border-gray-300'} rounded-md shadow-sm disabled:text-gray-400 disabled:bg-gray-50` }), error && _jsx("p", { className: "mt-2 text-sm text-red-500", children: error.message })] }));
+});
+export default LabelInput;

package/lib/form-engine/components/inputs/label-input/index.d.ts

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

package/lib/form-engine/components/inputs/label-input/index.js

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

package/lib/form-engine/components/inputs/multi-select-input/MultiSelectInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { InputSelectProps } from '../../../types';
+declare const MultiSelectInputComponent: React.ForwardRefExoticComponent<Omit<InputSelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export default MultiSelectInputComponent;

package/lib/form-engine/components/inputs/multi-select-input/MultiSelectInput.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { MultiSelect } from '../../../../components';
+const MultiSelectInputComponent = React.forwardRef(({ field, error, options, ...props }, ref) => (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-gray-700", children: field.label }), _jsx(MultiSelect, { className: "w-full border-gray-300 pb-5 disabled:text-gray-400 disabled:bg-gray-50 disabled:cursor-not-allowed", options: (options ?? []), value: props.value, defaultValue: props.value, disabled: field.disabled, onChange: props.onChange, tagPosition: "bottom" }), error && _jsx("p", { className: "mt-2 text-sm text-red-500", children: error.message })] })));
+export default MultiSelectInputComponent;

package/lib/form-engine/components/inputs/number-input/NumberInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { InputProps } from '../../../types';
+declare const NumberInput: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default NumberInput;

package/lib/form-engine/components/inputs/number-input/NumberInput.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Input } from '../../../../components';
+const NumberInput = React.forwardRef(({ field, error, ...props }, ref) => (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-gray-700", children: field.label }), _jsx(Input, { type: "number", ...props, ref: ref, id: field.name, disabled: field.disabled, placeholder: field.placeholder, className: `mt-1 block w-full p-2 border ${error ? 'border-red-500' : 'border-gray-300'} rounded-md shadow-sm disabled:text-gray-400 disabled:bg-gray-50` }), error && _jsx("p", { className: "mt-2 text-sm text-red-500", children: error.message })] })));
+export default NumberInput;

package/lib/form-engine/components/inputs/number-input/index.d.ts

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

package/lib/form-engine/components/inputs/number-input/index.js

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

package/lib/form-engine/components/inputs/password-input/PasswordInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { InputProps } from '../../../types';
+declare const PasswordInput: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default PasswordInput;

package/lib/form-engine/components/inputs/password-input/PasswordInput.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { Icon, Input } from '../../../../components';
+const PasswordInput = React.forwardRef(({ field, error, ...props }, ref) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const handleShowPassword = () => setShowPassword(!showPassword);
+    return (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-gray-700", children: field.label }), _jsxs("div", { className: "relative", children: [_jsx(Input, { type: showPassword ? 'text' : 'password', ...props, ref: ref, id: field.name, placeholder: field.placeholder, className: `mt-1 block w-full p-2 border ${error ? 'border-red-500' : 'border-gray-300'} rounded-md shadow-sm` }), _jsx("button", { className: "absolute inset-y-0 right-2 pr-3 flex items-center", type: "button", onClick: handleShowPassword, children: showPassword ? _jsx(Icon, { name: 'FaEye', size: 20 }) : _jsx(Icon, { name: 'FaEyeSlash', size: 20 }) })] }), error && _jsx("p", { className: "mt-2 text-sm text-red-500", children: error.message })] }));
+});
+export default PasswordInput;

package/lib/form-engine/components/inputs/password-input/index.d.ts

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

package/lib/form-engine/components/inputs/password-input/index.js

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

package/lib/form-engine/components/inputs/radio-button/RadioInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { InputOptionsProps } from '../../../types';
+declare const RadioInput: React.ForwardRefExoticComponent<InputOptionsProps & React.RefAttributes<HTMLInputElement>>;
+export default RadioInput;

package/lib/form-engine/components/inputs/radio-button/RadioInput.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Controller } from 'react-hook-form';
+import React from 'react';
+import { Label, RadioGroup, RadioGroupItem } from '../../../../components';
+const RadioInput = React.forwardRef(({ field, error, control }, ref) => (_jsxs("div", { ref: ref, children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-gray-700", children: field.label }), _jsx(Controller, { name: field.name, control: control, rules: field.validation, render: ({ field: { onChange, value } }) => (_jsx(RadioGroup, { onValueChange: onChange, value: value, disabled: field.disabled, className: "space-y-2 disabled:bg-gray-50", children: field.options.map((option, index) => (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: option, id: `${field.name}-${index}`, disabled: field.disabled }), _jsx(Label, { htmlFor: `${field.name}-${index}`, children: option })] }, index))) })) }), error && _jsx("p", { className: "mt-2 text-sm text-red-500", children: error.message })] })));
+export default RadioInput;

package/lib/form-engine/components/inputs/radio-button/index.d.ts

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

package/lib/form-engine/components/inputs/radio-button/index.js

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

package/lib/form-engine/components/inputs/select/SelectInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { InputSelectProps } from '../../../types';
+declare const SelectInput: React.ForwardRefExoticComponent<Omit<InputSelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export default SelectInput;

package/lib/form-engine/components/inputs/select/SelectInput.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../../../../components';
+const SelectInput = React.forwardRef(({ field, error, options, ...props }, ref) => (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-gray-700", children: field.label }), _jsxs(Select, { onValueChange: props.onChange, value: props.value, disabled: field.disabled, children: [_jsx(SelectTrigger, { className: "w-full border-gray-300 disabled:text-gray-400 disabled:bg-gray-50", children: _jsx(SelectValue, { placeholder: field.label }) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: options &&
+                            options.map((item) => (_jsx(SelectItem, { value: item.value, children: item.label }, item.value))) }) })] }), error && _jsx("p", { className: "mt-2 text-sm text-red-500", children: error.message })] })));
+export default SelectInput;

package/lib/form-engine/components/inputs/select/index.d.ts

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

package/lib/form-engine/components/inputs/select/index.js

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

package/lib/form-engine/components/inputs/textarea-input/TextareaInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { InputProps } from '../../../types';
+declare const TextareaInputFW: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default TextareaInputFW;

package/lib/form-engine/components/inputs/textarea-input/TextareaInput.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Textarea } from '../../../../components';
+const TextareaInputFW = React.forwardRef(({ field, error, ...props }, ref) => (_jsxs("div", { ref: ref, children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-gray-700", children: field.label }), _jsx(Textarea, { className: `mt-1 block w-full p-2 border ${error ? 'border-red-500' : 'border-gray-300'} rounded-md shadow-sm disabled:text-gray-400 disabled:bg-gray-50`, ...props, placeholder: field?.placeholder ?? ' ', disabled: field.disabled }), error && _jsx("p", { className: "mt-2 text-sm text-red-500", children: error.message })] })));
+export default TextareaInputFW;

package/lib/form-engine/components/inputs/textarea-input/index.d.ts

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

package/lib/form-engine/components/inputs/textarea-input/index.js

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

package/lib/form-engine/components/inputs/time-input/TimeInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { InputProps } from '../../../types';
+declare const TimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default TimeInput;