@react5/ui 1.0.3 → 1.0.5

package/packages/lib/dist/types/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './use-click-outside';
 export * from './use-keys-enteresc';
 export * from './use-set-startup-focus';
+export * from './use-form';
 //# sourceMappingURL=index.d.ts.map

package/packages/lib/dist/types/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,YAAY,CAAA"}

package/packages/lib/dist/types/hooks/use-form.d.ts

@@ -0,0 +1,26 @@
+import { ChangeEvent, FormEvent } from 'react';
+type FormFields = Record<string, any>;
+type Validator<T> = (values: T) => Partial<Record<keyof T, string>>;
+type ChEv = ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
+interface IRegisterInfo {
+    name: string;
+    onChange: (e: ChEv) => (void);
+    value?: any;
+    checked?: boolean;
+    error?: string;
+}
+export declare function useForm<T extends FormFields>(initialValues: T, validate?: Validator<T>): {
+    values: T;
+    errors: Partial<Record<keyof T, string>>;
+    handleChange: (e: ChEv) => void;
+    setFieldValue: <K extends keyof T>(field: K, value: T[K]) => void;
+    reset: (newValues?: T) => void;
+    setValues: import("react").Dispatch<import("react").SetStateAction<T>>;
+    validateForm: () => Partial<Record<keyof T, string>>;
+    register: (name: string, isCustomComponent?: boolean) => IRegisterInfo;
+    registerForm: (onUserSubmit?: () => void) => {
+        onSubmit: (e: FormEvent<HTMLFormElement>) => void;
+    };
+};
+export {};
+//# sourceMappingURL=use-form.d.ts.map

package/packages/lib/dist/types/hooks/use-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-form.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AACtC,KAAK,SAAS,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;AAEpE,KAAK,IAAI,GAAG,WAAW,CAAC,gBAAgB,GAAG,iBAAiB,GAAG,mBAAmB,CAAC,CAAC;AACpF,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AACD,wBAAgB,OAAO,CAAC,CAAC,SAAS,UAAU,EAC1C,aAAa,EAAE,CAAC,EAChB,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC;;;sBAOlB,IAAI;oBA6Bc,CAAC,SAAS,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;;;wBAWtC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;qBAcjC,MAAM,sBAAqB,OAAO,KAAW,aAAa;kCAiB7C,MAAM,IAAI;sBAPoB,SAAS,CAAC,eAAe,CAAC;;EAY9F"}

package/packages/lib/src/hooks/index.tsx

@@ -1,3 +1,4 @@
 export * from './use-click-outside'
 export * from './use-keys-enteresc'
-export * from './use-set-startup-focus'
+export * from './use-set-startup-focus'
+export * from './use-form'

package/packages/lib/src/hooks/use-form.tsx

@@ -0,0 +1,99 @@
+import { useState, ChangeEvent, FormEvent } from 'react';
+
+type FormFields = Record<string, any>;
+type Validator<T> = (values: T) => Partial<Record<keyof T, string>>;
+
+type ChEv = ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
+interface IRegisterInfo {
+  name: string,
+  onChange: (e: ChEv) => (void),
+  value?: any,
+  checked?: boolean,
+  error?: string
+};
+export function useForm<T extends FormFields>(
+  initialValues: T,
+  validate?: Validator<T>
+) {
+  const [values, setValues] = useState<T>(initialValues);
+  const [errors, setErrors] = useState<Partial<Record<keyof T, string>>>({});
+
+  // Standard change handler for native elements
+  const handleChange = (
+    e: ChEv
+  ) => {
+    const { name, type, value } = e.target;
+    const fieldValue = type === 'checkbox' ? (e.target as HTMLInputElement).checked : value;
+
+    setValues((prevValues) => {
+      const newValues = { ...prevValues, [name]: fieldValue };
+      if (validate) {
+        const newErrors = validate(newValues);
+        setErrors(newErrors);
+      }
+      return newValues;
+    });
+  };
+
+  const handleCustomChange = (name: string) => (v: any) => {
+    const fieldValue = v;
+
+    setValues((prevValues) => {
+      const newValues = { ...prevValues, [name]: fieldValue };
+      if (validate) {
+        const newErrors = validate(newValues);
+        setErrors(newErrors);
+      }
+      return newValues;
+    });
+  }
+
+  // New helper: update a specific field directly.
+  const setFieldValue = <K extends keyof T>(field: K, value: T[K]) => {
+    setValues((prevValues) => {
+      const newValues = { ...prevValues, [field]: value };
+      if (validate) {
+        const newErrors = validate(newValues);
+        setErrors(newErrors);
+      }
+      return newValues;
+    });
+  };
+
+  const validateForm = (): Partial<Record<keyof T, string>> => {
+    if (validate) {
+      const newErrors = validate(values);
+      setErrors(newErrors);
+      return newErrors;
+    }
+    return {};
+  };
+
+  const reset = (newValues = initialValues) => {
+    setValues(newValues);
+    setErrors({});
+  };
+
+  const register = (name: string, isCustomComponent: boolean = false): IRegisterInfo => {
+    const cm = {name, value: values[name] || '', checked: values[name] || false, error: errors[name]};
+    if (isCustomComponent) {
+      return {...cm, onChange: handleCustomChange(name) };
+    }
+    else {
+      return {...cm, onChange: handleChange };
+    }
+  }
+
+  const handleFormSubmit = (onUserSubmit?: (data: T) => void) => (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onUserSubmit?.(values);
+
+    reset();
+  }
+
+  const registerForm = (onUserSubmit?: () => void) => {
+    return { onSubmit: handleFormSubmit(onUserSubmit) };
+  }
+
+  return { values, errors, handleChange, setFieldValue, reset, setValues, validateForm, register, registerForm };
+}