@juantroconisf/lib 3.5.7 → 3.6.0

package/dist/index.d.mts

@@ -78,6 +78,7 @@ interface FormOptions<O extends StateType> {
     };
 }
 type TouchedType<O extends StateType> = Record<keyof O, boolean>;
+type ErrorsType<O extends StateType> = Record<keyof O, NextUIError>;
 type ValueChangeFunc<O extends StateType, K extends keyof O> = (id: K, value: O[K]) => void;
 type BlurFunc<O extends StateType> = (id: keyof O) => void;
 interface ComponentInputProps<O extends StateType> {
@@ -126,9 +127,22 @@ interface UseFormChangeResponse<O extends StateType> {
     errors: React.RefObject<TouchedType<O>>;
     realErrors: React.RefObject<TouchedType<O>>;
 }
+interface UseFormResponse<O extends StateType> {
+    onBlur: BlurFunc<O>;
+    onValueChange: ValueChangeFunc<O, keyof O>;
+    onSelectionChange: ValueChangeFunc<O, keyof O>;
+    state: O;
+    setState: React.Dispatch<React.SetStateAction<O>>;
+    register: RegisterFunc<O>;
+    hasInvalidValues: () => boolean;
+    touched: TouchedType<O>;
+    resetForm: (presevedKeys?: PreservedKeys<O>[]) => void;
+    errors: React.RefObject<ErrorsType<O>>;
+}
+type ValidateFunc<O extends StateType> = (value: O[keyof O], types?: ValidatorParams, errorMessages?: ValidatorErrorMessage) => NextUIError;
 
 declare function useFormChange<O extends StateType>({ state: initialState, validations, errorMessages, }: FormChangeState<O>): UseFormChangeResponse<O>;
 
-declare function useForm<O extends StateType>(initialState: O, { validations, errorMessages }?: FormOptions<O>): UseFormChangeResponse<O>;
+declare function useForm<O extends StateType>(initialState: O, { validations, errorMessages }?: FormOptions<O>): UseFormResponse<O>;
 
-export { type BlurFunc, type ComponentInputProps, type FormChangeState, type FormOptions, type GetNestedValueByKey, type GetValidationFunc, type GetValidationResponse, type MapValidator, type NXErrorFunc, type NestedChangeProps, NextUIError, type PreservedKeys, type RegisterFunc, type RegisterHandleFunc, type RequiredValidationFunc, type StateType, type TouchedType, type UXProps, type UseFormChangeResponse, type UseValidationFunc, type ValidateInputFunc, type Validator, type ValidatorErrorMessage$1 as ValidatorErrorMessage, type ValidatorFunction, type ValidatorParams$1 as ValidatorParams, type ValidatorTypes, type ValueChangeFunc, useForm, useFormChange };
+export { type BlurFunc, type ComponentInputProps, type ErrorsType, type FormChangeState, type FormOptions, type GetNestedValueByKey, type GetValidationFunc, type GetValidationResponse, type MapValidator, type NXErrorFunc, type NestedChangeProps, NextUIError, type PreservedKeys, type RegisterFunc, type RegisterHandleFunc, type RequiredValidationFunc, type StateType, type TouchedType, type UXProps, type UseFormChangeResponse, type UseFormResponse, type UseValidationFunc, type ValidateFunc, type ValidateInputFunc, type Validator, type ValidatorErrorMessage$1 as ValidatorErrorMessage, type ValidatorFunction, type ValidatorParams$1 as ValidatorParams, type ValidatorTypes, type ValueChangeFunc, useForm, useFormChange };

package/dist/index.d.ts

@@ -78,6 +78,7 @@ interface FormOptions<O extends StateType> {
     };
 }
 type TouchedType<O extends StateType> = Record<keyof O, boolean>;
+type ErrorsType<O extends StateType> = Record<keyof O, NextUIError>;
 type ValueChangeFunc<O extends StateType, K extends keyof O> = (id: K, value: O[K]) => void;
 type BlurFunc<O extends StateType> = (id: keyof O) => void;
 interface ComponentInputProps<O extends StateType> {
@@ -126,9 +127,22 @@ interface UseFormChangeResponse<O extends StateType> {
     errors: React.RefObject<TouchedType<O>>;
     realErrors: React.RefObject<TouchedType<O>>;
 }
+interface UseFormResponse<O extends StateType> {
+    onBlur: BlurFunc<O>;
+    onValueChange: ValueChangeFunc<O, keyof O>;
+    onSelectionChange: ValueChangeFunc<O, keyof O>;
+    state: O;
+    setState: React.Dispatch<React.SetStateAction<O>>;
+    register: RegisterFunc<O>;
+    hasInvalidValues: () => boolean;
+    touched: TouchedType<O>;
+    resetForm: (presevedKeys?: PreservedKeys<O>[]) => void;
+    errors: React.RefObject<ErrorsType<O>>;
+}
+type ValidateFunc<O extends StateType> = (value: O[keyof O], types?: ValidatorParams, errorMessages?: ValidatorErrorMessage) => NextUIError;
 
 declare function useFormChange<O extends StateType>({ state: initialState, validations, errorMessages, }: FormChangeState<O>): UseFormChangeResponse<O>;
 
-declare function useForm<O extends StateType>(initialState: O, { validations, errorMessages }?: FormOptions<O>): UseFormChangeResponse<O>;
+declare function useForm<O extends StateType>(initialState: O, { validations, errorMessages }?: FormOptions<O>): UseFormResponse<O>;
 
-export { type BlurFunc, type ComponentInputProps, type FormChangeState, type FormOptions, type GetNestedValueByKey, type GetValidationFunc, type GetValidationResponse, type MapValidator, type NXErrorFunc, type NestedChangeProps, NextUIError, type PreservedKeys, type RegisterFunc, type RegisterHandleFunc, type RequiredValidationFunc, type StateType, type TouchedType, type UXProps, type UseFormChangeResponse, type UseValidationFunc, type ValidateInputFunc, type Validator, type ValidatorErrorMessage$1 as ValidatorErrorMessage, type ValidatorFunction, type ValidatorParams$1 as ValidatorParams, type ValidatorTypes, type ValueChangeFunc, useForm, useFormChange };
+export { type BlurFunc, type ComponentInputProps, type ErrorsType, type FormChangeState, type FormOptions, type GetNestedValueByKey, type GetValidationFunc, type GetValidationResponse, type MapValidator, type NXErrorFunc, type NestedChangeProps, NextUIError, type PreservedKeys, type RegisterFunc, type RegisterHandleFunc, type RequiredValidationFunc, type StateType, type TouchedType, type UXProps, type UseFormChangeResponse, type UseFormResponse, type UseValidationFunc, type ValidateFunc, type ValidateInputFunc, type Validator, type ValidatorErrorMessage$1 as ValidatorErrorMessage, type ValidatorFunction, type ValidatorParams$1 as ValidatorParams, type ValidatorTypes, type ValueChangeFunc, useForm, useFormChange };

package/dist/index.js

@@ -290,41 +290,61 @@ function useFormChange({
 
 // src/hooks/useForm.tsx
 var import_react2 = require("react");
-function useForm(initialState, { validations, errorMessages } = {}) {
-  const [state, setState] = (0, import_react2.useState)(initialState), falseState = allToValue(state, false), touched = (0, import_react2.useRef)(falseState), errors2 = (0, import_react2.useRef)({ ...falseState }), realErrors = (0, import_react2.useRef)({ ...falseState }), { getValidation } = useValidation(), ux = (0, import_react2.useRef)(
-    allToValue(state, { isInvalid: false, errorMessage: "" })
-  );
-  const validateInput = (id, value, isInputTouched) => {
-    const isTouched = isInputTouched === void 0 ? touched.current[id] : isInputTouched, requirements = validations?.[id];
-    const [uiErrors] = [
-      {
-        ref: errors2,
-        touched: isTouched
-      },
-      {
-        ref: realErrors,
-        touched: true
+
+// src/hooks/useValidate.tsx
+var validProps = {
+  isInvalid: false,
+  errorMessage: ""
+};
+function useValidate() {
+  const { lang } = useComponentLanguage();
+  const performValidations = (value, validationTypes, errorMessages) => {
+    if (!validationTypes) return validProps;
+    const items = Object.entries(validationTypes), requiredExist = validationTypes?.required !== void 0, isRequired = requiredExist ? validationTypes.required : false;
+    if (value === "" && !isRequired) return validProps;
+    let errorFound = validProps;
+    for (const [key, opts] of items) {
+      const { validate, msg } = errors[key], isInvalid = !validate(value, opts);
+      if (isInvalid) {
+        errorFound = {
+          isInvalid,
+          errorMessage: errorMessages?.[key] || lang[msg]
+        };
+        break;
       }
-    ].map((item) => {
-      const req = getValidation(
-        value,
-        item.touched,
-        requirements,
-        errorMessages?.[id]
-      );
-      item.ref.current = handleNestedChange({
-        state: item.ref.current,
-        id,
-        value: !req.isValid
-      });
-      return req;
+    }
+    return errorFound;
+  };
+  return { performValidations };
+}
+
+// src/hooks/useForm.tsx
+function useForm(initialState, { validations, errorMessages } = {}) {
+  const initial = {
+    touched: allToValue(initialState, false),
+    errors: allToValue(initialState, {
+      isInvalid: false,
+      errorMessage: ""
+    })
+  };
+  const [state, setState] = (0, import_react2.useState)(initialState), touched = (0, import_react2.useRef)(initial.touched), errors2 = (0, import_react2.useRef)(initial.errors), { performValidations } = useValidate();
+  const validateInput = (id, value) => {
+    errors2.current = handleNestedChange({
+      state: errors2.current,
+      id,
+      value: performValidations(value, validations?.[id], errorMessages?.[id])
     });
-    if (requirements === void 0) return;
-    ux.current[id] = {
-      isInvalid: !uiErrors.isValid,
-      errorMessage: uiErrors.validationProps.errorMessage
-    };
   };
+  const getUXProps = (0, import_react2.useCallback)(
+    (id) => {
+      const inputError = errors2.current[id], isTouched = touched.current[id];
+      return {
+        isInvalid: isTouched && inputError.isInvalid,
+        errorMessage: isTouched ? inputError.errorMessage : ""
+      };
+    },
+    [errors2.current, touched.current]
+  );
   const onBlur = (id) => {
     touched.current = handleNestedChange({
       state: touched.current,
@@ -354,7 +374,7 @@ function useForm(initialState, { validations, errorMessages } = {}) {
     setState,
     register: {
       input: (id) => ({
-        ...ux.current[id],
+        ...getUXProps(id),
         id,
         onBlur: () => onBlur(id),
         onValueChange: (v) => onValueChange(id, v),
@@ -363,7 +383,7 @@ function useForm(initialState, { validations, errorMessages } = {}) {
       select: (id) => {
         const isString = typeof state[id] === "string" || state[id] === null;
         return {
-          ...ux.current[id],
+          ...getUXProps(id),
           id,
           onBlur: () => onBlur(id),
           onSelectionChange: (v) => onSelectionChange(
@@ -374,7 +394,7 @@ function useForm(initialState, { validations, errorMessages } = {}) {
         };
       },
       autocomplete: (id) => ({
-        ...ux.current[id],
+        ...getUXProps(id),
         id,
         onBlur: () => onBlur(id),
         onSelectionChange: (v) => onSelectionChange(id, v),
@@ -383,13 +403,12 @@ function useForm(initialState, { validations, errorMessages } = {}) {
     },
     hasInvalidValues: () => {
       touched.current = allToValue(initialState, true);
-      return JSON.stringify(realErrors.current).includes(":true");
+      return JSON.stringify(errors2.current).includes(":true");
     },
     touched: touched.current,
     resetForm: (preservedKeys) => {
-      const val = allToValue(initialState, false);
-      touched.current = val;
-      errors2.current = val;
+      touched.current = initial.touched;
+      errors2.current = initial.errors;
       setState(
         preservedKeys === void 0 ? initialState : preservedKeys.reduce(
           (acc, key) => ({
@@ -400,8 +419,7 @@ function useForm(initialState, { validations, errorMessages } = {}) {
         )
       );
     },
-    errors: errors2,
-    realErrors
+    errors: errors2
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -269,42 +269,62 @@ function useFormChange({
 }
 
 // src/hooks/useForm.tsx
-import { useState as useState2, useRef as useRef2 } from "react";
-function useForm(initialState, { validations, errorMessages } = {}) {
-  const [state, setState] = useState2(initialState), falseState = allToValue(state, false), touched = useRef2(falseState), errors2 = useRef2({ ...falseState }), realErrors = useRef2({ ...falseState }), { getValidation } = useValidation(), ux = useRef2(
-    allToValue(state, { isInvalid: false, errorMessage: "" })
-  );
-  const validateInput = (id, value, isInputTouched) => {
-    const isTouched = isInputTouched === void 0 ? touched.current[id] : isInputTouched, requirements = validations?.[id];
-    const [uiErrors] = [
-      {
-        ref: errors2,
-        touched: isTouched
-      },
-      {
-        ref: realErrors,
-        touched: true
+import { useState as useState2, useRef as useRef2, useCallback as useCallback2 } from "react";
+
+// src/hooks/useValidate.tsx
+var validProps = {
+  isInvalid: false,
+  errorMessage: ""
+};
+function useValidate() {
+  const { lang } = useComponentLanguage();
+  const performValidations = (value, validationTypes, errorMessages) => {
+    if (!validationTypes) return validProps;
+    const items = Object.entries(validationTypes), requiredExist = validationTypes?.required !== void 0, isRequired = requiredExist ? validationTypes.required : false;
+    if (value === "" && !isRequired) return validProps;
+    let errorFound = validProps;
+    for (const [key, opts] of items) {
+      const { validate, msg } = errors[key], isInvalid = !validate(value, opts);
+      if (isInvalid) {
+        errorFound = {
+          isInvalid,
+          errorMessage: errorMessages?.[key] || lang[msg]
+        };
+        break;
       }
-    ].map((item) => {
-      const req = getValidation(
-        value,
-        item.touched,
-        requirements,
-        errorMessages?.[id]
-      );
-      item.ref.current = handleNestedChange({
-        state: item.ref.current,
-        id,
-        value: !req.isValid
-      });
-      return req;
+    }
+    return errorFound;
+  };
+  return { performValidations };
+}
+
+// src/hooks/useForm.tsx
+function useForm(initialState, { validations, errorMessages } = {}) {
+  const initial = {
+    touched: allToValue(initialState, false),
+    errors: allToValue(initialState, {
+      isInvalid: false,
+      errorMessage: ""
+    })
+  };
+  const [state, setState] = useState2(initialState), touched = useRef2(initial.touched), errors2 = useRef2(initial.errors), { performValidations } = useValidate();
+  const validateInput = (id, value) => {
+    errors2.current = handleNestedChange({
+      state: errors2.current,
+      id,
+      value: performValidations(value, validations?.[id], errorMessages?.[id])
     });
-    if (requirements === void 0) return;
-    ux.current[id] = {
-      isInvalid: !uiErrors.isValid,
-      errorMessage: uiErrors.validationProps.errorMessage
-    };
   };
+  const getUXProps = useCallback2(
+    (id) => {
+      const inputError = errors2.current[id], isTouched = touched.current[id];
+      return {
+        isInvalid: isTouched && inputError.isInvalid,
+        errorMessage: isTouched ? inputError.errorMessage : ""
+      };
+    },
+    [errors2.current, touched.current]
+  );
   const onBlur = (id) => {
     touched.current = handleNestedChange({
       state: touched.current,
@@ -334,7 +354,7 @@ function useForm(initialState, { validations, errorMessages } = {}) {
     setState,
     register: {
       input: (id) => ({
-        ...ux.current[id],
+        ...getUXProps(id),
         id,
         onBlur: () => onBlur(id),
         onValueChange: (v) => onValueChange(id, v),
@@ -343,7 +363,7 @@ function useForm(initialState, { validations, errorMessages } = {}) {
       select: (id) => {
         const isString = typeof state[id] === "string" || state[id] === null;
         return {
-          ...ux.current[id],
+          ...getUXProps(id),
           id,
           onBlur: () => onBlur(id),
           onSelectionChange: (v) => onSelectionChange(
@@ -354,7 +374,7 @@ function useForm(initialState, { validations, errorMessages } = {}) {
         };
       },
       autocomplete: (id) => ({
-        ...ux.current[id],
+        ...getUXProps(id),
         id,
         onBlur: () => onBlur(id),
         onSelectionChange: (v) => onSelectionChange(id, v),
@@ -363,13 +383,12 @@ function useForm(initialState, { validations, errorMessages } = {}) {
     },
     hasInvalidValues: () => {
       touched.current = allToValue(initialState, true);
-      return JSON.stringify(realErrors.current).includes(":true");
+      return JSON.stringify(errors2.current).includes(":true");
     },
     touched: touched.current,
     resetForm: (preservedKeys) => {
-      const val = allToValue(initialState, false);
-      touched.current = val;
-      errors2.current = val;
+      touched.current = initial.touched;
+      errors2.current = initial.errors;
       setState(
         preservedKeys === void 0 ? initialState : preservedKeys.reduce(
           (acc, key) => ({
@@ -380,8 +399,7 @@ function useForm(initialState, { validations, errorMessages } = {}) {
         )
       );
     },
-    errors: errors2,
-    realErrors
+    errors: errors2
   };
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juantroconisf/lib",
-  "version": "3.5.7",
+  "version": "3.6.0",
   "description": "A state and validation library for HeroUI.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",