@juantroconisf/lib 4.1.3 → 5.0.0

package/dist/index.mjs

@@ -16,7 +16,7 @@ var NextUIError = class {
 };
 
 // src/hooks/useForm.tsx
-import { useState, useCallback } from "react";
+import { useState, useCallback, useMemo } from "react";
 
 // src/utils/utils.ts
 function handleNestedChange({
@@ -36,10 +36,59 @@ function handleNestedChange({
   current[propertyDepth[propertyDepth.length - 1]] = value;
   return { ...newValues };
 }
-var allToValue = (obj, value) => Object.keys(obj).reduce((acc, key) => {
-  acc[key] = value;
-  return acc;
-}, {});
+function handleArrayItemChange({
+  state,
+  arrayKey,
+  index,
+  field,
+  value
+}) {
+  const arr = [...state[arrayKey]];
+  const item = { ...arr[index] };
+  const fieldDepth = field.split(".");
+  if (fieldDepth.length === 1) {
+    item[field] = value;
+  } else {
+    let current = item;
+    for (let i = 0; i < fieldDepth.length - 1; i++) {
+      current[fieldDepth[i]] = { ...current[fieldDepth[i]] };
+      current = current[fieldDepth[i]];
+    }
+    current[fieldDepth[fieldDepth.length - 1]] = value;
+  }
+  arr[index] = item;
+  return { ...state, [arrayKey]: arr };
+}
+function getNestedValue(obj, path) {
+  return path.split(".").reduce((acc, key) => acc?.[key], obj);
+}
+function removeCompositeKeysByPrefix(map2, prefix) {
+  const result = {};
+  for (const [key, value] of Object.entries(map2)) {
+    if (!key.startsWith(prefix)) {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+function setNestedValue(state, dotPath, value) {
+  const keys = dotPath.split(".");
+  const copy = { ...state };
+  let current = copy;
+  for (let i = 0; i < keys.length - 1; i++) {
+    current[keys[i]] = { ...current[keys[i]] };
+    current = current[keys[i]];
+  }
+  current[keys[keys.length - 1]] = value;
+  return copy;
+}
+var allToValue = (obj, value) => Object.keys(obj).reduce(
+  (acc, key) => {
+    acc[key] = value;
+    return acc;
+  },
+  {}
+);
 var regex = {
   email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
   password: /^(?!.*\s)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[~`!@#$%^&*()--+={}[\]|:;"'<>,.?/_₹]).{8,24}$/
@@ -142,6 +191,7 @@ function useValidate() {
     if (value === "" && !isRequired) return validProps;
     let errorFound = validProps;
     for (const [key, opts] of items) {
+      if (opts === null) continue;
       const { validate, msg } = errors[key], isInvalid = !validate(value, opts);
       if (isInvalid) {
         errorFound = {
@@ -157,7 +207,14 @@ function useValidate() {
 }
 
 // src/hooks/useForm.tsx
-function useForm(initialState, { validations, errorMessages } = {}) {
+function useForm(initialState, {
+  rules,
+  messages,
+  arrayRules,
+  arrayMessages,
+  arrayIdentifiers,
+  config
+} = {}) {
   const initial = {
     touched: allToValue(initialState, false),
     errors: allToValue(initialState, {
@@ -165,27 +222,50 @@ function useForm(initialState, { validations, errorMessages } = {}) {
       errorMessage: ""
     })
   };
-  const [state, setState] = useState(initialState), [touched, setTouched] = useState(initial.touched), [errors2, setErrors] = useState(initial.errors), { performValidations } = useValidate();
+  const [state, setState] = useState(initialState), [touched, setTouched] = useState(initial.touched), [errors2, setErrors] = useState(initial.errors), [itemTouched, setItemTouched] = useState({}), [itemErrors, setItemErrors] = useState({}), [nestedTouched, setNestedTouched] = useState({}), [nestedErrors, setNestedErrors] = useState({}), { performValidations } = useValidate();
+  const indexMap = useMemo(() => {
+    const map2 = /* @__PURE__ */ new Map();
+    for (const key in state) {
+      if (Array.isArray(state[key])) {
+        const itemMap = /* @__PURE__ */ new Map();
+        const idKey = arrayIdentifiers?.[key] || "id";
+        state[key].forEach((item, index) => {
+          if (item && typeof item === "object") {
+            const idValue = item[idKey];
+            if (idValue !== void 0) {
+              itemMap.set(idValue, index);
+            }
+          }
+        });
+        map2.set(key, itemMap);
+      }
+    }
+    return map2;
+  }, [state, arrayIdentifiers]);
+  const getIndex = useCallback((arrayKey, itemId) => {
+    return indexMap.get(arrayKey)?.get(itemId);
+  }, [indexMap]);
   const validateInput = (id, value) => setErrors(
     (prev) => handleNestedChange({
       state: prev,
       id,
       value: performValidations(
         value,
-        validations?.[id],
-        errorMessages?.[id]
+        rules?.[id],
+        messages?.[id]
       )
     })
   );
   const getUXProps = useCallback(
     (id) => {
-      const inputError = errors2[id], isTouched = touched[id];
+      const inputError = errors2[id] || nestedErrors[id];
+      const isTouched = touched[id] || nestedTouched[id];
       return {
-        isInvalid: isTouched && inputError.isInvalid,
-        errorMessage: isTouched ? inputError.errorMessage : ""
+        isInvalid: Boolean(isTouched && inputError?.isInvalid),
+        errorMessage: isTouched ? inputError?.errorMessage || "" : ""
       };
     },
-    [errors2, touched]
+    [errors2, touched, nestedErrors, nestedTouched]
   );
   const onBlur = (id) => {
     validateInput(id, state[id]);
@@ -211,6 +291,214 @@ function useForm(initialState, { validations, errorMessages } = {}) {
     );
     validateInput(id, fixedValue);
   };
+  const getItemCompositeKey = (arrayKey, itemId, field) => `${arrayKey}.${itemId}.${field}`;
+  const validateItemInput = (arrayKey, itemId, field, value) => {
+    const index = getIndex(String(arrayKey), itemId);
+    if (index === void 0) return;
+    const arrayRuleDef = arrayRules?.[arrayKey]?.[field];
+    const item = state[arrayKey][index];
+    const fieldRules = typeof arrayRuleDef === "function" ? arrayRuleDef(item, index) : arrayRuleDef;
+    const fieldMessages = arrayMessages?.[arrayKey]?.[field];
+    const compositeKey = getItemCompositeKey(String(arrayKey), itemId, field);
+    setItemErrors((prev) => ({
+      ...prev,
+      [compositeKey]: performValidations(
+        value,
+        fieldRules,
+        fieldMessages
+      )
+    }));
+  };
+  const getItemUXProps = useCallback(
+    (arrayKey, itemId, field) => {
+      const compositeKey = getItemCompositeKey(arrayKey, itemId, field);
+      const inputError = itemErrors[compositeKey];
+      const isTouched = itemTouched[compositeKey];
+      return {
+        isInvalid: Boolean(isTouched && inputError?.isInvalid),
+        errorMessage: isTouched ? inputError?.errorMessage || "" : ""
+      };
+    },
+    [itemErrors, itemTouched]
+  );
+  const onItemBlur = (arrayKey, itemId, field) => {
+    const index = getIndex(String(arrayKey), itemId);
+    if (index === void 0) return;
+    const arr = state[arrayKey];
+    const value = getNestedValue(arr[index], field);
+    validateItemInput(arrayKey, itemId, field, value);
+    const compositeKey = getItemCompositeKey(String(arrayKey), itemId, field);
+    if (itemTouched[compositeKey]) return;
+    setItemTouched((prev) => ({ ...prev, [compositeKey]: true }));
+  };
+  const onItemValueChange = (arrayKey, itemId, field, value) => {
+    const index = getIndex(String(arrayKey), itemId);
+    if (index === void 0) return;
+    setState(
+      (prev) => handleArrayItemChange({ state: prev, arrayKey, index, field, value })
+    );
+    validateItemInput(arrayKey, itemId, field, value);
+  };
+  const onItemSelectionChange = (arrayKey, itemId, field, value) => {
+    const index = getIndex(String(arrayKey), itemId);
+    if (index === void 0) return;
+    const arr = state[arrayKey];
+    const currentVal = getNestedValue(arr[index], field);
+    const isString = typeof currentVal === "string" || currentVal === null;
+    const fixedValue = typeof value === "string" || value === null ? value : isString ? Array.from(value)[0] || null : Array.from(value);
+    setState(
+      (prev) => handleArrayItemChange({
+        state: prev,
+        arrayKey,
+        index,
+        field,
+        value: fixedValue
+      })
+    );
+    validateItemInput(arrayKey, itemId, field, fixedValue);
+  };
+  const validateNestedInput = (dotPath, value) => {
+    const topKey = dotPath.split(".")[0];
+    setNestedErrors((prev) => ({
+      ...prev,
+      [dotPath]: performValidations(
+        value,
+        rules?.[topKey],
+        messages?.[topKey]
+      )
+    }));
+  };
+  const onNestedBlur = (dotPath) => {
+    const value = getNestedValue(state, dotPath);
+    validateNestedInput(dotPath, value);
+    if (nestedTouched[dotPath]) return;
+    setNestedTouched((prev) => ({ ...prev, [dotPath]: true }));
+  };
+  const onNestedValueChange = (dotPath, value) => {
+    setState((prev) => setNestedValue(prev, dotPath, value));
+    validateNestedInput(dotPath, value);
+  };
+  const onNestedSelectionChange = (dotPath, value) => {
+    const currentVal = getNestedValue(state, dotPath);
+    const isString = typeof currentVal === "string" || currentVal === null;
+    const fixedValue = typeof value === "string" || value === null ? value : isString ? Array.from(value)[0] || null : Array.from(value);
+    setState((prev) => setNestedValue(prev, dotPath, fixedValue));
+    validateNestedInput(dotPath, fixedValue);
+  };
+  const on2 = {
+    input: (...args) => {
+      if (args.length === 1) {
+        const id = args[0];
+        const key = String(id);
+        const isTopLevel = key in state;
+        if (isTopLevel) {
+          return {
+            ...getUXProps(key),
+            id: key,
+            onBlur: () => onBlur(id),
+            onValueChange: (v) => onValueChange(id, v),
+            value: state[id]
+          };
+        }
+        return {
+          ...getUXProps(key),
+          id: key,
+          onBlur: () => onNestedBlur(key),
+          onValueChange: (v) => onNestedValueChange(key, v),
+          value: getNestedValue(state, key)
+        };
+      }
+      const [arrayKey, itemId, field] = args;
+      const index = getIndex(String(arrayKey), itemId);
+      const arr = state[arrayKey];
+      const value = index !== void 0 ? getNestedValue(arr[index], field) : void 0;
+      const compositeKey = getItemCompositeKey(String(arrayKey), itemId, field);
+      return {
+        ...getItemUXProps(String(arrayKey), itemId, field),
+        id: compositeKey,
+        onBlur: () => onItemBlur(arrayKey, itemId, field),
+        onValueChange: (v) => onItemValueChange(arrayKey, itemId, field, v),
+        value
+      };
+    },
+    select: (...args) => {
+      if (args.length === 1) {
+        const id = args[0];
+        const key = String(id);
+        const isTopLevel = key in state;
+        if (isTopLevel) {
+          const isString3 = typeof state[id] === "string" || state[id] === null;
+          return {
+            ...getUXProps(key),
+            id: key,
+            onBlur: () => onBlur(id),
+            onSelectionChange: (v) => onSelectionChange(
+              id,
+              !isString3 ? v : Array.from(v)[0] || null
+            ),
+            selectedKeys: state[id] === null ? [] : isString3 ? [state[id]] : state[id]
+          };
+        }
+        const value2 = getNestedValue(state, key);
+        const isString2 = typeof value2 === "string" || value2 === null;
+        return {
+          ...getUXProps(key),
+          id: key,
+          onBlur: () => onNestedBlur(key),
+          onSelectionChange: (v) => onNestedSelectionChange(key, v),
+          selectedKeys: value2 === null ? [] : isString2 ? [value2] : value2
+        };
+      }
+      const [arrayKey, itemId, field] = args;
+      const index = getIndex(String(arrayKey), itemId);
+      const arr = state[arrayKey];
+      const value = index !== void 0 ? getNestedValue(arr[index], field) : null;
+      const isString = typeof value === "string" || value === null;
+      const compositeKey = getItemCompositeKey(String(arrayKey), itemId, field);
+      return {
+        ...getItemUXProps(String(arrayKey), itemId, field),
+        id: compositeKey,
+        onBlur: () => onItemBlur(arrayKey, itemId, field),
+        onSelectionChange: (v) => onItemSelectionChange(arrayKey, itemId, field, v),
+        selectedKeys: value === null ? [] : isString ? [value] : value
+      };
+    },
+    autocomplete: (...args) => {
+      if (args.length === 1) {
+        const id = args[0];
+        const key = String(id);
+        const isTopLevel = key in state;
+        if (isTopLevel) {
+          return {
+            ...getUXProps(key),
+            id: key,
+            onBlur: () => onBlur(id),
+            onSelectionChange: (v) => onSelectionChange(id, v),
+            selectedKey: state[id]
+          };
+        }
+        return {
+          ...getUXProps(key),
+          id: key,
+          onBlur: () => onNestedBlur(key),
+          onSelectionChange: (v) => onNestedSelectionChange(key, v),
+          selectedKey: getNestedValue(state, key)
+        };
+      }
+      const [arrayKey, itemId, field] = args;
+      const index = getIndex(String(arrayKey), itemId);
+      const arr = state[arrayKey];
+      const value = index !== void 0 ? getNestedValue(arr[index], field) : null;
+      const compositeKey = getItemCompositeKey(String(arrayKey), itemId, field);
+      return {
+        ...getItemUXProps(String(arrayKey), itemId, field),
+        id: compositeKey,
+        onBlur: () => onItemBlur(arrayKey, itemId, field),
+        onSelectionChange: (v) => onItemSelectionChange(arrayKey, itemId, field, v),
+        selectedKey: value
+      };
+    }
+  };
   return {
     onBlur,
     onValueChange,
@@ -219,42 +507,97 @@ function useForm(initialState, { validations, errorMessages } = {}) {
     setState,
     touched,
     errors: errors2,
-    register: {
-      input: (id) => ({
-        ...getUXProps(id),
-        id,
-        onBlur: () => onBlur(id),
-        onValueChange: (v) => onValueChange(id, v),
-        value: state[id]
-      }),
-      select: (id) => {
-        const isString = typeof state[id] === "string" || state[id] === null;
-        return {
-          ...getUXProps(id),
-          id,
-          onBlur: () => onBlur(id),
-          onSelectionChange: (v) => onSelectionChange(
-            id,
-            !isString ? v : Array.from(v)[0] || null
-          ),
-          selectedKeys: state[id] === null ? [] : isString ? [state[id]] : state[id]
-        };
+    on: on2,
+    helpers: {
+      addItem: (arrayKey, item, index) => {
+        setState((prev) => {
+          const arr = [...prev[arrayKey]];
+          if (index === void 0) {
+            arr.push(item);
+          } else {
+            arr.splice(index, 0, item);
+          }
+          return { ...prev, [arrayKey]: arr };
+        });
       },
-      autocomplete: (id) => ({
-        ...getUXProps(id),
-        id,
-        onBlur: () => onBlur(id),
-        onSelectionChange: (v) => onSelectionChange(id, v),
-        selectedKey: state[id]
-      })
+      removeItem: (arrayKey, index) => {
+        const itemIdKey = arrayIdentifiers?.[arrayKey] || "id";
+        const item = state[arrayKey][index];
+        const itemId = item?.[itemIdKey];
+        setState((prev) => {
+          const arr = [...prev[arrayKey]];
+          arr.splice(index, 1);
+          return { ...prev, [arrayKey]: arr };
+        });
+        if (itemId !== void 0) {
+          const prefix = `${String(arrayKey)}.${itemId}.`;
+          setItemTouched((prev) => removeCompositeKeysByPrefix(prev, prefix));
+          setItemErrors((prev) => removeCompositeKeysByPrefix(prev, prefix));
+        }
+      },
+      removeById: (arrayKey, itemId) => {
+        const index = getIndex(String(arrayKey), itemId);
+        if (index !== void 0) {
+          const arr = [...state[arrayKey]];
+          arr.splice(index, 1);
+          setState((prev) => ({ ...prev, [arrayKey]: arr }));
+          const prefix = `${String(arrayKey)}.${itemId}.`;
+          setItemTouched((prev) => removeCompositeKeysByPrefix(prev, prefix));
+          setItemErrors((prev) => removeCompositeKeysByPrefix(prev, prefix));
+        }
+      },
+      moveItem: (arrayKey, from, to) => {
+        setState((prev) => {
+          const arr = [...prev[arrayKey]];
+          const [item] = arr.splice(from, 1);
+          arr.splice(to, 0, item);
+          return { ...prev, [arrayKey]: arr };
+        });
+      },
+      moveById: (arrayKey, fromId, toId) => {
+        const fromIndex = getIndex(String(arrayKey), fromId);
+        const toIndex = getIndex(String(arrayKey), toId);
+        if (fromIndex !== void 0 && toIndex !== void 0) {
+          setState((prev) => {
+            const arr = [...prev[arrayKey]];
+            const [item] = arr.splice(fromIndex, 1);
+            arr.splice(toIndex, 0, item);
+            return { ...prev, [arrayKey]: arr };
+          });
+        }
+      }
     },
+    isDirty: JSON.stringify(state) !== JSON.stringify(initialState),
     hasInvalidValues: () => {
       setTouched((prev) => allToValue(prev, true));
-      return JSON.stringify(errors2).includes(":true");
+      setItemTouched(
+        (prev) => Object.keys(prev).reduce(
+          (acc, key) => ({ ...acc, [key]: true }),
+          {}
+        )
+      );
+      setNestedTouched(
+        (prev) => Object.keys(prev).reduce(
+          (acc, key) => ({ ...acc, [key]: true }),
+          {}
+        )
+      );
+      const topLevelInvalid = JSON.stringify(errors2).includes(":true");
+      const itemLevelInvalid = Object.values(itemErrors).some(
+        (e) => e?.isInvalid
+      );
+      const nestedLevelInvalid = Object.values(nestedErrors).some(
+        (e) => e?.isInvalid
+      );
+      return topLevelInvalid || itemLevelInvalid || nestedLevelInvalid;
     },
     resetForm: (preservedKeys) => {
       setTouched(initial.touched);
       setErrors(initial.errors);
+      setItemTouched({});
+      setItemErrors({});
+      setNestedTouched({});
+      setNestedErrors({});
       setState(
         (prev) => preservedKeys === void 0 ? initialState : preservedKeys.reduce(
           (acc, key) => ({
@@ -265,17 +608,47 @@ function useForm(initialState, { validations, errorMessages } = {}) {
         )
       );
     },
-    resetTouched: (preservedKeys) => setTouched(
-      (prev) => preservedKeys === void 0 ? initialState : preservedKeys.reduce(
-        (acc, key) => ({
-          ...acc,
-          [key]: prev[key]
-        }),
-        initial.touched
-      )
-    )
+    resetTouched: (preservedKeys) => {
+      setItemTouched({});
+      setNestedTouched({});
+      setTouched(
+        (prev) => preservedKeys === void 0 ? initialState : preservedKeys.reduce(
+          (acc, key) => ({
+            ...acc,
+            [key]: prev[key]
+          }),
+          initial.touched
+        )
+      );
+    }
   };
 }
+var { on } = useForm({
+  name: "Juan",
+  age: 25,
+  address: {
+    city: "Bogota",
+    country: "Colombia"
+  },
+  lines: [
+    {
+      id: 1,
+      name: "Line 1",
+      location: {
+        country: "CO",
+        city: "Bogota"
+      }
+    },
+    {
+      id: 2,
+      name: "Line 2",
+      location: {
+        country: "VE",
+        city: "Caracas"
+      }
+    }
+  ]
+});
 export {
   NextUIError,
   useForm

package/package.json

@@ -1,36 +1,37 @@
-{
-  "name": "@juantroconisf/lib",
-  "version": "4.1.3",
-  "description": "A form validation library for HeroUI.",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "author": "Juan T",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/juandiegotroconis/lib/issues"
-  },
-  "typings": "dist/index.d.ts",
-  "homepage": "https://github.com/juandiegotroconis/lib#readme",
-  "devDependencies": {
-    "@heroui/react": "^2.8.5",
-    "@react-types/shared": "^3.32.1",
-    "@types/node": "^24.7.1",
-    "@types/react": "^19.2.2",
-    "react": "^19.2.0",
-    "tsup": "^8.5.0",
-    "typescript": "^5.9.3"
-  },
-  "peerDependencies": {
-    "@heroui/react": ">=2.0.0",
-    "react": ">=18.0.0"
-  },
-  "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts",
-    "lint": "tsc"
-  }
-}
+{
+  "name": "@juantroconisf/lib",
+  "version": "5.0.0",
+  "description": "A form validation library for HeroUI.",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "lint": "tsc",
+    "prepublishOnly": "pnpm run build"
+  },
+  "author": "Juan T",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/juandiegotroconis/lib/issues"
+  },
+  "typings": "dist/index.d.ts",
+  "homepage": "https://github.com/juandiegotroconis/lib#readme",
+  "devDependencies": {
+    "@heroui/react": "^2.8.5",
+    "@react-types/shared": "^3.32.1",
+    "@types/node": "^24.7.1",
+    "@types/react": "^19.2.2",
+    "react": "^19.2.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "@heroui/react": ">=2.0.0",
+    "react": ">=18.0.0"
+  }
+}