@weareconceptstudio/form 0.2.8 → 0.2.9

package/dist/form/BaseForm.js

@@ -1,4 +1,4 @@
-import React, { useCallback, forwardRef, useImperativeHandle } from 'react';
+import React, { useCallback, forwardRef, useImperativeHandle, useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { Text } from '@weareconceptstudio/core';
 import classNames from 'classnames';
@@ -44,6 +44,18 @@ const BaseForm = forwardRef(({ initialValues: defaultValues, values, children, o
         isFormTouched: Object.keys(methods.formState.touchedFields).length > 0,
         submit: () => methods.handleSubmit(handleSubmit)(),
     }));
+    useEffect(() => {
+        let errors = methods.formState.errors;
+        if (Object.keys(errors).length > 0) {
+            const firstErrorField = Object.keys(errors)[0];
+            const errorElement = document.querySelector(`[name="${firstErrorField}"]`);
+            if (errorElement) {
+                errorElement.scrollIntoView({ behavior: "smooth", block: "center" });
+                // @ts-ignore
+                errors[firstErrorField].ref.select();
+            }
+        }
+    }, [methods.formState.errors]);
     return (React.createElement(FormProvider, { ...methods },
         methods.formState.errors.root?.serverError && (React.createElement("div", { className: 'global-error-wrap' },
             React.createElement(Text, { className: 'backend-error', text: methods.formState.errors.root?.serverError.message }),

package/dist/form/Builder/index.js

@@ -5,7 +5,6 @@ import Form from '../';
 import Input from '../../input';
 import Checkbox from '../../checkbox';
 import Radio from '../../radio';
-import PhoneNumber from '../../phone-number';
 import Select from '../../select';
 import Upload from '../../upload';
 import DatePicker from '../../date-picker';
@@ -17,9 +16,9 @@ const formElements = {
     'password': React.createElement(Input.Password, null),
     'textarea': React.createElement(Input.TextArea, null),
     'number': React.createElement(Input.Number, null),
+    'phone': React.createElement(Input.PhoneNumber, null),
     'checkbox': React.createElement(Checkbox, null),
     'radio': React.createElement(Radio, null),
-    'phone': React.createElement(PhoneNumber, null),
     'select': React.createElement(Select, null),
     'upload': React.createElement(Upload, null),
     'date': React.createElement(DatePicker, null),

package/dist/form/Item/index.js

@@ -1,5 +1,4 @@
 import React, { cloneElement, isValidElement, useRef } from 'react';
-import lodashGet from 'lodash.get';
 import classNames from 'classnames';
 import { isForwardRefChild, useTranslation } from '@weareconceptstudio/core';
 import ErrorMessage from '../../error-message';
@@ -11,7 +10,7 @@ const FormItem = ({ label, name, children, className, errorKey, required = true,
     }
     const childRef = useRef(null);
     const { translate } = useTranslation();
-    const { formState } = useInput({
+    const { fieldState } = useInput({
         name,
         rules: useRules({
             rules,
@@ -23,10 +22,10 @@ const FormItem = ({ label, name, children, className, errorKey, required = true,
         }),
         errorKey: errorKey || label,
     });
-    const hasError = !!lodashGet(formState.errors, name);
+    const { error, invalid } = fieldState;
     const classString = classNames('form-item', {
         [className]: className,
-        'has-error': hasError,
+        'has-error': error || invalid,
         // @ts-ignore
         disabled: children.props.disabled,
     });

package/dist/form/hooks/rules.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { isValidPhoneNumber } from 'react-phone-number-input';
+import { isValidPhoneNumber } from 'libphonenumber-js';
 import { useTranslation } from '@weareconceptstudio/core';
 export const validationPatterns = ({ type, pattern, message, translate }) => {
     switch (type) {
@@ -22,7 +22,10 @@ export const useRules = ({ rules, required, requiredMessage, childType, errorKey
             if (childType.toLowerCase() === 'input' || childType.toLowerCase() === 'textarea') {
                 r.push({
                     validator: (value) => {
-                        return value?.trim().length > 0 || translate('form.validateMessages.whitespace', { errorKey: translate(errorKey) });
+                        if (!value || typeof value !== 'string' || value.trim().length === 0) {
+                            return translate('form.validateMessages.whitespace', { errorKey: translate(errorKey) });
+                        }
+                        return true;
                     },
                 });
             }
@@ -45,7 +48,7 @@ export const mapValidationRules = (errorKey, rules) => {
     const { translate } = useTranslation();
     return rules?.reduce((acc, rule) => {
         if (rule.required) {
-            acc.required = rule.message || translate('form.validateMessages.required', { errorKey: translate(errorKey) });
+            acc.required = { value: rule.required, message: rule.message || translate('form.validateMessages.required', { errorKey: translate(errorKey) }) };
         }
         if (rule.pattern || rule.type) {
             acc.pattern = validationPatterns({ ...rule, translate });

package/dist/form/hooks/useInput.js

@@ -4,11 +4,12 @@ import { mapValidationRules } from './rules';
 const defaultFormat = (value) => (value == null ? '' : value);
 const defaultParse = (value) => (value === '' ? null : value);
 export const useInput = (props) => {
-    const { defaultValue, name, onBlur: initialOnBlur, onChange: initialOnChange, format = defaultFormat, parse = defaultParse, multiple, errorKey, rules = [] } = props;
+    const { defaultValue, name, onBlur: initialOnBlur, onChange: initialOnChange, format = defaultFormat, parse = defaultParse, multiple, errorKey, rules = [], disabled } = props;
     const { field: controllerField, fieldState, formState, } = useController({
         name,
         defaultValue,
         rules: mapValidationRules(errorKey, rules),
+        disabled: disabled || undefined,
     });
     const onBlur = useEvent((...event) => {
         controllerField.onBlur();

package/dist/index.d.ts

@@ -9,4 +9,3 @@ export { default as DatePicker } from './date-picker';
 export { default as Radio } from './radio';
 export { default as Select } from './select';
 export { default as Upload } from './upload';
-export { default as PhoneNumber } from './phone-number';

package/dist/index.js

@@ -10,4 +10,3 @@ export { default as DatePicker } from './date-picker';
 export { default as Radio } from './radio';
 export { default as Select } from './select';
 export { default as Upload } from './upload';
-export { default as PhoneNumber } from './phone-number';

package/dist/input/PhoneNumber/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CountryCode } from 'libphonenumber-js';
+interface PhoneNumberProps {
+    name: string;
+    onChange?: (value: string) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    defaultCountry?: CountryCode;
+    maxLength?: number;
+    placeholder: string;
+    disabled?: boolean;
+}
+interface PhoneNumberRef extends HTMLInputElement {
+    childType: string;
+}
+declare const PhoneNumber: React.ForwardRefExoticComponent<PhoneNumberProps & React.RefAttributes<PhoneNumberRef>>;
+export default PhoneNumber;

package/dist/input/PhoneNumber/index.js

@@ -0,0 +1,72 @@
+import React, { useImperativeHandle, useState, forwardRef, useEffect } from 'react';
+import { parsePhoneNumberFromString, getCountryCallingCode, } from 'libphonenumber-js';
+import BaseInput from '../BaseInput';
+import { useInput } from '../../form/hooks/useInput';
+const PhoneNumber = forwardRef((props, ref) => {
+    const { name, onChange, onBlur, defaultCountry = 'AM', maxLength = 14, placeholder, disabled } = props;
+    const { field } = useInput({
+        type: 'phone-number',
+        name,
+        onChange,
+        onBlur,
+    });
+    const defaultPrefix = `+${getCountryCallingCode(defaultCountry)}`;
+    const [inputValue, setInputValue] = useState(field.value || defaultPrefix);
+    const [selectedCountry, setSelectedCountry] = useState(defaultCountry);
+    // ✅ Attach childType to the input element
+    useImperativeHandle(ref, () => ({
+        // @ts-ignore
+        ...field.ref, // Preserve default input methods
+        childType: 'phone', // Custom property
+    }));
+    // ✅ Ensure the prefix is set when the component mounts
+    useEffect(() => {
+        if (!field.value || !field.value.startsWith('+')) {
+            let val = defaultPrefix;
+            if (field.value) {
+                val = parsePhoneNumberFromString(field.value, selectedCountry).formatInternational();
+            }
+            setInputValue(val);
+            field.onChange(val);
+        }
+    }, []);
+    const handleChange = (e) => {
+        let value = e.target.value;
+        // ✅ Remove all characters except numbers and "+"
+        value = value.replace(/[^\d+]/g, '');
+        // ✅ Ensure "+" is only at the start
+        if (value.includes('+') && value.indexOf('+') !== 0) {
+            value = value.replace(/\+/g, '');
+        }
+        // ✅ Remove any extra prefix occurrences (avoid +374+374 bug)
+        const countryCode = getCountryCallingCode(selectedCountry);
+        const cleanValue = value.replace(new RegExp(`^\\+?${countryCode}`), '');
+        // ✅ Ensure value always starts with "+374"
+        value = `+${countryCode}${cleanValue}`;
+        // ✅ If user deletes everything, reset only to "+374"
+        if (value === '+') {
+            value = `+${countryCode}`;
+        }
+        const phoneNumber = parsePhoneNumberFromString(value, selectedCountry);
+        if (phoneNumber) {
+            value = phoneNumber.formatInternational();
+        }
+        setInputValue(value);
+        field.onChange(phoneNumber ? phoneNumber.number : value);
+    };
+    const handleKeyDown = (e) => {
+        const countryCode = getCountryCallingCode(selectedCountry);
+        const prefix = `+${countryCode}`;
+        // ✅ Prevent backspace/delete from removing the prefix
+        if ((e.key === 'Backspace' || e.key === 'Delete') && inputValue === prefix) {
+            e.preventDefault();
+        }
+    };
+    // const handleCountryChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    //     setSelectedCountry(e.target.value);
+    // };
+    return (React.createElement(BaseInput, { ...props, value: field.value, disabled: disabled },
+        React.createElement("div", { className: "phone-number-container" },
+            React.createElement("input", { type: "tel", ...field, value: inputValue, className: "phone-number-input", disabled: disabled, onKeyDown: handleKeyDown, onChange: handleChange, onBlur: field.onBlur, maxLength: maxLength, placeholder: placeholder }))));
+});
+export default PhoneNumber;

package/dist/input/index.d.ts

@@ -2,10 +2,12 @@ import Input from './Input';
 import TextArea from './TextArea';
 import Password from './Password';
 import Number from './Number';
+import PhoneNumber from './PhoneNumber';
 type InputComponent = typeof Input & {
     TextArea: typeof TextArea;
     Password: typeof Password;
     Number: typeof Number;
+    PhoneNumber: typeof PhoneNumber;
 };
 declare const EnhancedInput: InputComponent;
 export default EnhancedInput;

package/dist/input/index.js

@@ -2,9 +2,11 @@ import Input from './Input';
 import TextArea from './TextArea';
 import Password from './Password';
 import Number from './Number';
+import PhoneNumber from './PhoneNumber';
 // Assign the sub-components to the Input component
 const EnhancedInput = Input;
 EnhancedInput.TextArea = TextArea;
 EnhancedInput.Password = Password;
 EnhancedInput.Number = Number;
+EnhancedInput.PhoneNumber = PhoneNumber;
 export default EnhancedInput;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@weareconceptstudio/form",
-	"version": "0.2.8",
+	"version": "0.2.9",
 	"description": "Concept Studio Form",
 	"author": "Concept Studio",
 	"license": "ISC",
@@ -21,8 +21,8 @@
 	},
 	"dependencies": {
 		"@weareconceptstudio/core": "*",
-		"react-hook-form": "^7.52.1",
-		"react-phone-number-input": "3.4.8",
+		"libphonenumber-js": "1.11.20",
+		"react-hook-form": "7.54.2",
 		"react-select": "5.8.0"
 	},
 	"devDependencies": {

package/dist/phone-number/index.d.ts

@@ -1,3 +0,0 @@
-export default PhoneNumber;
-declare const PhoneNumber: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';

package/dist/phone-number/index.js

@@ -1,37 +0,0 @@
-import React, { forwardRef, useImperativeHandle, useEffect } from 'react';
-import classNames from 'classnames';
-import PhoneInput from 'react-phone-number-input/input';
-import { parsePhoneNumber } from 'react-phone-number-input';
-import useFormInstance from '../form/hooks/useFormInstance';
-import { Controller } from 'react-hook-form';
-const PhoneNumber = forwardRef(({ name, className, autoComplete = 'new-password', country = 'AM', maxLength = 14, options = {} }, ref) => {
-    useImperativeHandle(ref, () => ({ childType: 'phone' }));
-    const { control, setValue, getValues, trigger } = useFormInstance();
-    const classString = classNames('phone-number-input', {
-        [className]: className,
-    });
-    useEffect(() => {
-        let defaultValue = getValues(name);
-        try {
-            if (defaultValue && !defaultValue.startsWith('+')) {
-                const parsed = parsePhoneNumber(defaultValue, country);
-                if (parsed)
-                    defaultValue = parsed.number;
-            }
-        }
-        catch (e) { }
-        setValue(name, defaultValue);
-    }, [name, getValues, setValue, country]);
-    return (React.createElement(Controller, { name: name, control: control, render: ({ field: { onChange, value, onBlur } }) => {
-            return (React.createElement(PhoneInput, { name: name, international: true, value: value, country: country, maxLength: maxLength, withCountryCallingCode: true, className: classString, autoComplete: autoComplete, onChange: (value) => {
-                    onChange(value || '');
-                    setValue(name, value || '');
-                    // control._options.mode == 'onChange' && trigger(name);
-                    trigger(name);
-                }, onBlur: () => {
-                    onBlur();
-                    // control._options.mode == 'onBlur' && trigger(name);
-                }, ...options }));
-        } }));
-});
-export default PhoneNumber;