react-form-manage 1.0.6-beta.1 → 1.0.6-beta.3

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.6-beta.3] - 2026-01-22
+
+- Add `ValidationRule` typing and export
+- Support custom regex `pattern` in validation
+- Update usage docs with numeric-only example
+- Add demo field `numericCode` using pattern rule
+
+## [1.0.6-beta.2] - 2026-01-22
+
+- Fix TypeScript prop types for all components
+- Add FormProps interface with proper optional fields
+- Add FormItemProps, FormListProps, InputWrapperProps interfaces
+- Export type interfaces from package
+- Fix type error where Form component required all props
+
 ## [1.0.6-beta.1] - 2026-01-22
 
 - Full TypeScript migration: Convert all source files from JS to TS

package/dist/components/Form/FormItem.d.ts

@@ -1,18 +1,13 @@
-export default function FormItem({ children, name, formName, initialValue, formItemId: externalFormItemId, rules, valuePropName, getValueFromEvent, }: {
-    children: any;
-    name: any;
-    formName: any;
-    initialValue: any;
-    formItemId: any;
-    rules: any;
+import type { ReactElement } from "react";
+import type { ValidationRule } from "../../types/public";
+export interface FormItemProps {
+    children: ReactElement;
+    name: string;
+    formName?: string;
+    initialValue?: any;
+    formItemId?: string;
+    rules?: ValidationRule[];
     valuePropName?: string;
-    getValueFromEvent: any;
-}): import("react").DetailedReactHTMLElement<{
-    [valuePropName]: any;
-    onChange: (e: any) => void;
-    isDirty: boolean;
-    errors: any;
-    onFocus: () => void;
-    validateState: any;
-    ref: import("react").RefObject<any>;
-}, HTMLElement>;
+    getValueFromEvent?: (event: any) => any;
+}
+export default function FormItem({ children, name, formName, initialValue, formItemId: externalFormItemId, rules, valuePropName, getValueFromEvent, }: FormItemProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/Form/FormList.d.ts

@@ -1,8 +1,24 @@
-declare const FormList: ({ name, initialValues, form, formName, children }: {
-    name: any;
-    initialValues: any;
-    form: any;
-    formName: any;
-    children: any;
-}) => any;
+import type { FormInstance } from "../../stores/formStore";
+export interface FormListProps<T = any> {
+    name: string;
+    initialValues?: T[];
+    form?: FormInstance;
+    formName?: string;
+    children: (fields: Array<{
+        name: string;
+        key: string;
+    }>, operations: {
+        add: (index: number) => void;
+        remove: (opts: {
+            index?: number;
+            key?: string;
+        }) => void;
+        move: (opts: {
+            from?: number;
+            fromKey?: string;
+            to: number;
+        }) => void;
+    }) => React.ReactNode;
+}
+declare const FormList: <T = any>({ name, initialValues, form, formName, children }: FormListProps<T>) => import("react").ReactNode;
 export default FormList;

package/dist/components/Form/InputWrapper.d.ts

@@ -1,6 +1,11 @@
-declare const InputWrapper: ({ children, errors, ...props }: {
-    [x: string]: any;
-    children: any;
-    errors?: any[];
-}) => import("react/jsx-runtime").JSX.Element;
+import type { ReactElement } from "react";
+export interface InputWrapperProps {
+    children: ReactElement;
+    errors?: Array<{
+        ruleName: string;
+        message: string;
+    }>;
+    [key: string]: any;
+}
+declare const InputWrapper: ({ children, errors, ...props }: InputWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export default InputWrapper;

package/dist/hooks/useFormItemControl.d.ts

@@ -1,5 +1,6 @@
 import { type RefObject } from "react";
 import type { FormInstance } from "../stores/formStore";
+import type { ValidationRule } from "../types/public";
 type AnyObject = Record<string, any>;
 interface UseFormItemControlProps {
     formName?: string;
@@ -7,7 +8,7 @@ interface UseFormItemControlProps {
     name?: string;
     initialValue?: any;
     formItemId?: string;
-    rules?: any[];
+    rules?: ValidationRule[];
     elementRef?: RefObject<any> | null;
 }
 interface UseFormItemControlReturn {

package/dist/hooks/useFormItemControl.js

@@ -8,12 +8,14 @@ import { useFormCleanUp, useFormListeners, useFormStore, } from "../stores/formS
 const VALID_PREMITIVE_TYPE = ["string", "number", "undefined"];
 export default function useFormItemControl({ formName, form, name, initialValue, formItemId, rules, elementRef, }) {
     const contextForm = useFormContext();
-    const { value, setData, getCacheData, getFormValues } = useFormStore(useShallow((state) => {
+    const { value, setData, getCacheData, getFormValues, getFormState, isStateInitied, } = useFormStore(useShallow((state) => {
         return {
             value: get(state.forms, `${formName || form?.formName || contextForm?.formName}.${name}`),
             setData: state.setData,
             getCacheData: state.getCacheData,
             getFormValues: state.getFormValues,
+            getFormState: state.getFormState,
+            isStateInitied: state.formStates?.[formName || form?.formName || contextForm?.formName]?.isInitied,
         };
     }));
     const { setCleanUpStack } = useFormCleanUp(useShallow((state) => ({
@@ -53,6 +55,7 @@ export default function useFormItemControl({ formName, form, name, initialValue,
         //   value
         // );
         setInitData(formName || form?.formName || contextForm?.formName, name, value);
+        onChange(value, { notTriggerDirty: true });
     };
     const onFocus = () => {
         setListener({
@@ -171,6 +174,14 @@ export default function useFormItemControl({ formName, form, name, initialValue,
                             }
                         }
                     }
+                    // Custom pattern
+                    if (r.pattern && !r.pattern.test(fieldValue || "")) {
+                        listErrors.push({
+                            ruleName,
+                            message: r.message,
+                        });
+                        return;
+                    }
                     // Password
                     if (r.isPassword && !IS_PASSWORD_REGEX.test(fieldValue)) {
                         // tempMessage.push(IS_PASSWORD_INVALID_MESSAGE);
@@ -319,18 +330,22 @@ export default function useFormItemControl({ formName, form, name, initialValue,
         // console.log({ internalInitValue, value, initialValue });
         // console.log("Init item value: ", name, value, internalInitValue);
         // console.log("internalInitValue: ", internalInitValue);
-        if (!value) {
-            if (!internalInitValue) {
-                if (!isNil(initialValue)) {
-                    console.log("On init data", initialValue);
-                    onInitData(initialValue);
+        if (isStateInitied) {
+            // console.log("Skip set init data when form is resetting");
+            if (isNil(value)) {
+                if (isNil(internalInitValue)) {
+                    if (isNil(initialValue)) {
+                        console.log("On init data", initialValue);
+                        onInitData(initialValue);
+                    }
+                }
+                else {
+                    onChange(internalInitValue, { notTriggerDirty: true });
                 }
             }
-            else {
-                onChange(internalInitValue);
-            }
+            return;
         }
-    }, [internalInitValue]);
+    }, [isStateInitied]);
     useEffect(() => {
         if (!listener) {
             setListener({

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-import Form, { useForm, useWatch, useSubmitDataWatch, useFormStateWatch } from "./providers/Form";
-import FormItem from "./components/Form/FormItem";
-import FormList from "./components/Form/FormList";
+import Form, { useForm, useWatch, useSubmitDataWatch, useFormStateWatch, type FormProps, type ValidationRule } from "./providers/Form";
+import FormItem, { type FormItemProps } from "./components/Form/FormItem";
+import FormList, { type FormListProps } from "./components/Form/FormList";
 import Input from "./components/Input";
-import InputWrapper from "./components/Form/InputWrapper";
+import InputWrapper, { type InputWrapperProps } from "./components/Form/InputWrapper";
 import useFormItemControl from "./hooks/useFormItemControl";
 import useFormListControl from "./hooks/useFormListControl";
-export { Form, FormItem, FormList, Input, InputWrapper, useFormItemControl, useFormListControl, useForm, useWatch, useSubmitDataWatch, useFormStateWatch, };
+export { Form, FormItem, FormList, Input, InputWrapper, useFormItemControl, useFormListControl, useForm, useWatch, useSubmitDataWatch, useFormStateWatch, type FormProps, type FormItemProps, type FormListProps, type InputWrapperProps, type ValidationRule, };
 export default Form;

package/dist/providers/Form.d.ts

@@ -1,15 +1,21 @@
+import type { ComponentType, FormHTMLAttributes, ReactNode } from "react";
 import type { PublicFormInstance } from "../types/public";
+export type { ValidationRule } from "../types/public";
 export declare const FormContext: import("react").Context<any>;
-declare function Form({ children, formName, initialValues, onFinish, onReject, onFinally, FormElement, ...props }: {
-    [x: string]: any;
-    children: any;
-    formName: any;
-    initialValues: any;
-    onFinish: any;
-    onReject: any;
-    onFinally: any;
-    FormElement: any;
-}): import("react/jsx-runtime").JSX.Element;
+export interface FormProps<T = any> extends Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
+    children: ReactNode;
+    formName: string;
+    initialValues?: T;
+    onFinish?: (values: T, allValues?: any) => void | Promise<void>;
+    onReject?: (errorFields: any[]) => void | Promise<void>;
+    onFinally?: (result: {
+        errorsField: any[];
+        values: T;
+        withUnRegisteredValues: any;
+    }) => void | Promise<void>;
+    FormElement?: ComponentType<any>;
+}
+declare function Form<T = any>({ children, formName, initialValues, onFinish, onReject, onFinally, FormElement, ...props }: FormProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace Form {
     var useForm: typeof import("./Form").useForm;
     var useWatch: typeof import("./Form").useWatch;

package/dist/providers/Form.js

@@ -9,8 +9,9 @@ import { useFormListeners, useFormStore } from "../stores/formStore";
 import { getAllNoneObjStringPath } from "../utils/obj.util";
 export const FormContext = createContext(null);
 export default function Form({ children, formName, initialValues, onFinish, onReject, onFinally, FormElement, ...props }) {
-    const { getFormItemValue, setInitData, setData, getFormValues, setFormState, setFormInstance, revokeFormInstance, setSubmitHistory, clearFormValues, clearFormInitialValues, clearFormState, } = useFormStore(useShallow((state) => ({
-        setInitData: state.setFormInitData,
+    const { appInitValue, getFormItemValue, setInitData, setData, getFormValues, setFormState, setFormInstance, revokeFormInstance, setSubmitHistory, clearFormValues, clearFormInitialValues, clearFormState, } = useFormStore(useShallow((state) => ({
+        appInitValue: state.initialValues,
+        setInitData: state.setInitData,
         getFormValues: state.getFormValues,
         setFormState: state.setFormState,
         setFormInstance: state.setFormInstance,
@@ -237,7 +238,19 @@ export default function Form({ children, formName, initialValues, onFinish, onRe
         });
     };
     useEffect(() => {
-        setInitData(formName, initialValues);
+        // set initial values
+        if (initialValues) {
+            const allStringPath = getAllNoneObjStringPath(initialValues);
+            allStringPath.forEach((p) => {
+                // console.log(
+                //   "Set initial value for form",
+                //   formName,
+                //   p,
+                //   get(initialValues, p),
+                // );
+                setInitData(formName, p, get(initialValues, p));
+            });
+        }
         setFormState({
             formName,
             isInitied: true,
@@ -262,6 +275,9 @@ export default function Form({ children, formName, initialValues, onFinish, onRe
             clearFormState(formName);
         };
     }, []);
+    // useEffect(() => {
+    //   // console.log("Form appInitValue changed", appInitValue);
+    // }, [appInitValue]);
     return (_jsxs(FormContext.Provider, { value: {
             formName,
         }, children: [FormElement ? (_jsx(FormElement, { onSubmit: (e) => {
@@ -281,7 +297,8 @@ export function useFormContext() {
     return c;
 }
 export function useForm(formNameOrFormInstance) {
-    const targetFormName = typeof formNameOrFormInstance === "object" && formNameOrFormInstance !== null
+    const targetFormName = typeof formNameOrFormInstance === "object" &&
+        formNameOrFormInstance !== null
         ? formNameOrFormInstance.formName
         : formNameOrFormInstance;
     const formInstance = useFormStore((state) => {

package/dist/stores/formStore.d.ts

@@ -1,14 +1,17 @@
 export interface FormInstance {
     formName: string;
-    resetFields?: any;
-    submit?: any;
-    submitAsync?: any;
-    setFieldValue?: any;
-    setFieldValues?: any;
-    getFieldValue?: any;
-    getFieldValues?: any;
-    getFieldErrors?: any;
-    setFieldFocus?: any;
+    resetFields: (values?: any) => void;
+    submit: (values?: any) => void;
+    submitAsync: (values?: any) => Promise<any>;
+    setFieldValue: (name: string, value: any, options?: any) => void;
+    setFieldValues: (values: Record<string, any>, options?: any) => void;
+    getFieldValue: (name: string) => any;
+    getFieldValues: (names?: string[]) => Array<{
+        name: string;
+        value: any;
+    }>;
+    getFieldErrors: () => Record<string, any>;
+    setFieldFocus: (name: string) => void;
 }
 interface FormStoreState {
     forms: Record<string, any>;

package/dist/stores/formStore.js

@@ -126,7 +126,7 @@ export const useFormStore = create((storeSet, storeGet) => ({
     setInitData(formName, name, value) {
         return storeSet(produce((state) => {
             const oldValues = state.initialValues;
-            // console.log("Inner init: ", `${formName}.${name}`, value);
+            console.log("Inner init: ", `${formName}.${name}`, value);
             set(oldValues, `${formName}.${name}`, value);
         }));
     },

package/dist/types/public.d.ts

@@ -1,14 +1,42 @@
 export type FormValues<T = any> = T;
+export interface ValidationRule<T = any, TValues = any> {
+    name?: string;
+    message: string;
+    handler?: (value: T, formValues: TValues) => boolean | Promise<boolean>;
+    required?: boolean;
+    min?: number;
+    max?: number;
+    minLength?: number;
+    maxLength?: number;
+    isPassword?: boolean;
+    isUsername?: boolean;
+    isPhoneNumber?: boolean;
+    isStringNumber?: boolean;
+    isPositiveStringNumber?: boolean;
+    isPositiveIntegerStringNumber?: boolean;
+    isEmail?: boolean;
+    isVietnameseName?: boolean;
+    isNoSpaceStringAndNumber?: boolean;
+    isStringAndNumber?: boolean;
+    isNoSpaceOnlyAlphabetStringAndNumber?: boolean;
+    isOnlyAlphabetStringAndNumber?: boolean;
+    isNoSpaceAlphabetString?: boolean;
+    pattern?: RegExp;
+}
 export interface PublicFormInstance<T = any> {
     formName: string;
-    resetFields?: (values?: Partial<T>) => void;
-    submit?: (values?: T) => void;
-    submitAsync?: (values?: T) => Promise<any>;
-    setFieldValue?: (name: keyof T & string, value: any) => void;
-    setFieldValues?: (values: Partial<T>) => void;
-    getFieldValue?: (name: keyof T & string) => any;
-    getFieldValues?: () => T;
-    getFieldErrors?: () => Record<string, any>;
+    resetFields: (values?: Partial<T>) => void;
+    submit: (values?: T) => void;
+    submitAsync: (values?: T) => Promise<any>;
+    setFieldValue: (name: keyof T & string, value: any, options?: any) => void;
+    setFieldValues: (values: Partial<T>, options?: any) => void;
+    getFieldValue: (name: keyof T & string) => any;
+    getFieldValues: (names?: Array<keyof T & string>) => Array<{
+        name: string;
+        value: any;
+    }>;
+    getFieldErrors: () => Record<string, any>;
+    setFieldFocus: (name: keyof T & string) => void;
 }
 export interface UseFormItemProps<T = any> {
     formName?: string;
@@ -16,7 +44,7 @@ export interface UseFormItemProps<T = any> {
     name?: keyof T & string;
     initialValue?: any;
     formItemId?: string;
-    rules?: any[];
+    rules?: ValidationRule<any, T>[];
 }
 export interface UseFormItemReturn<T = any> {
     value: T | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-manage",
-  "version": "1.0.6-beta.1",
+  "version": "1.0.6-beta.3",
   "description": "Lightweight React form management with list and listener support.",
   "license": "MIT",
   "type": "module",

package/src/App.tsx

@@ -1,6 +1,7 @@
 import { Button, Input } from "antd";
 import { useEffect } from "react";
 import FormItem from "./components/Form/FormItem";
+import FormList from "./components/Form/FormList";
 import InputWrapper from "./components/Form/InputWrapper";
 import Form, { useForm } from "./providers/Form";
 
@@ -9,14 +10,19 @@ const App = () => {
 
   useEffect(() => {
     if (form) {
-      setTimeout(() => {
-        form.setFieldValue("TestData", "HelloWorld");
-      }, 500);
+      // setTimeout(() => {
+      //   form.setFieldValue("TestData", "HelloWorld");
+      // }, 500);
     }
   }, [form]);
   return (
     <div>
       <Form
+        initialValues={{
+          TestData: "",
+          numericCode: "",
+          arr: [{ el: "Item 1" }, { el: "Item 2" }],
+        }}
         onFinish={(values) => {
           console.log(values);
         }}
@@ -27,7 +33,72 @@ const App = () => {
             <Input />
           </InputWrapper>
         </FormItem>
+
+        <FormItem
+          name={"numericCode"}
+          rules={[
+            { required: true, message: "Vui lòng nhập mã" },
+            {
+              pattern: /^\d+$/,
+              message: "Chỉ cho phép chuỗi số",
+            },
+          ]}
+        >
+          <InputWrapper>
+            <Input placeholder="Mã chỉ gồm số" style={{ width: 200 }} />
+          </InputWrapper>
+        </FormItem>
+        <FormList
+          initialValues={[
+            {
+              el: "",
+            },
+          ]}
+          name="arr"
+        >
+          {(fields, { add, remove, move }) => (
+            <div>
+              {fields.map((field, index) => (
+                <div key={field.key} style={{ marginBottom: 8 }}>
+                  <FormItem name={`${field.name}.el`}>
+                    <InputWrapper>
+                      <Input placeholder="Item value" style={{ width: 200 }} />
+                    </InputWrapper>
+                  </FormItem>
+                  <Button
+                    onClick={() => remove({ index })}
+                    style={{ marginLeft: 8 }}
+                  >
+                    Remove
+                  </Button>
+                  {index > 0 && (
+                    <Button
+                      onClick={() => move({ from: index, to: index - 1 })}
+                      style={{ marginLeft: 8 }}
+                    >
+                      Move Up
+                    </Button>
+                  )}
+                  {index < fields.length - 1 && (
+                    <Button
+                      onClick={() => move({ from: index, to: index + 1 })}
+                      style={{ marginLeft: 8 }}
+                    >
+                      Move Down
+                    </Button>
+                  )}
+                </div>
+              ))}
+              <Button onClick={() => add(fields.length)}>Add Item</Button>
+            </div>
+          )}
+        </FormList>
         <Button htmlType="submit">Submit</Button>
+        <Button
+          onClick={() => {
+            form?.resetFields?.();
+          }}
+        ></Button>
       </Form>
     </div>
   );

package/src/components/Form/FormItem.tsx

@@ -1,7 +1,20 @@
 import { cloneElement, useRef, useState } from "react";
+import type { ReactElement } from "react";
+import type { ValidationRule } from "../../types/public";
 import { v4 } from "uuid";
 import useFormItemControl from "../../hooks/useFormItemControl";
 
+export interface FormItemProps {
+  children: ReactElement;
+  name: string;
+  formName?: string;
+  initialValue?: any;
+  formItemId?: string;
+  rules?: ValidationRule[];
+  valuePropName?: string;
+  getValueFromEvent?: (event: any) => any;
+}
+
 export default function FormItem({
   children,
   name,
@@ -11,7 +24,7 @@ export default function FormItem({
   rules,
   valuePropName = "value",
   getValueFromEvent,
-}) {
+}: FormItemProps) {
   const elRef = useRef<any>(null);
 
   const [formItemId] = useState(externalFormItemId ?? v4());
@@ -56,5 +69,5 @@ export default function FormItem({
     onFocus,
     validateState: state,
     ref: elRef,
-  });
+  } as any);
 }

package/src/components/Form/FormList.tsx

@@ -1,6 +1,15 @@
 import useTestRrenderListControl from "../../hooks/useFormListControl";
+import type { FormInstance } from "../../stores/formStore";
 
-const FormList = ({ name, initialValues, form, formName, children }) => {
+export interface FormListProps<T = any> {
+  name: string;
+  initialValues?: T[];
+  form?: FormInstance;
+  formName?: string;
+  children: (fields: Array<{ name: string; key: string }>, operations: { add: (index: number) => void; remove: (opts: { index?: number; key?: string }) => void; move: (opts: { from?: number; fromKey?: string; to: number }) => void }) => React.ReactNode;
+}
+
+const FormList = <T = any>({ name, initialValues, form, formName, children }: FormListProps<T>) => {
   const { listFields, ...actions } = useTestRrenderListControl({
     name,
     initialValues,

package/src/components/Form/InputWrapper.tsx

@@ -1,6 +1,13 @@
 import { cloneElement } from "react";
+import type { ReactElement } from "react";
 
-const InputWrapper = ({ children, errors = [], ...props }) => {
+export interface InputWrapperProps {
+  children: ReactElement;
+  errors?: Array<{ ruleName: string; message: string }>;
+  [key: string]: any;
+}
+
+const InputWrapper = ({ children, errors = [], ...props }: InputWrapperProps) => {
   return (
     <div>
       {cloneElement(children, props)}