@react5/ui 1.0.3 → 1.0.4

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,25 @@
+import { ChangeEvent, FormEvent } from 'react';
+type FormFields = Record<string, any>;
+type Validator<T> = (values: T) => Partial<Record<keyof T, string>>;
+interface IRegisterInfo {
+    name: string;
+    onChange: (e: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => (void);
+    value?: string | number;
+    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: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => 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) => 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,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,GAAG,iBAAiB,GAAG,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACjG,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,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,WAAW,CAAC,gBAAgB,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;oBAgBrD,CAAC,SAAS,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;;;wBAWtC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;qBAcjC,MAAM,KAAG,aAAa;kCAWT,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,79 @@
+import { useState, ChangeEvent, FormEvent } from 'react';
+
+type FormFields = Record<string, any>;
+type Validator<T> = (values: T) => Partial<Record<keyof T, string>>;
+
+interface IRegisterInfo {
+  name: string,
+  onChange: (e: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => (void),
+  value?: string | number,
+  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: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>
+  ) => {
+    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;
+    });
+  };
+
+  // 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): IRegisterInfo => {
+    return {name, onChange: handleChange, value: values[name] || '', checked: values[name] || false, error: errors[name]};
+  }
+
+  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 };
+}