react-form-manage 1.0.6-beta.0 → 1.0.6-beta.2

package/CHANGELOG.md

@@ -0,0 +1,52 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [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
+- Replace JS entrypoints (main.jsx, Input.jsx) with TypeScript versions
+- Add proper type declarations generated from source
+- Update build to emit both JS and .d.ts files
+- Add @types/node for Node.js type support
+- Remove legacy copy-types scripts
+- Add antd, react, react-dom to devDependencies for local development
+
+## [1.0.1] - 2026-01-21
+
+- Publish patch release v1.0.1
+- Minor packaging and release metadata updates
+
+---
+
+## [1.0.0] - initial publish
+
+- Initial public release `react-form-manage@1.0.0`.
+
+## [1.0.2] - 2026-01-21
+
+- Add distributed TypeScript declaration `dist/index.d.ts` and update `package.json` `types` field.
+
+## [1.0.3] - 2026-01-21
+
+- Provide `dist/index.esm.d.ts` and `dist/index.cjs.d.ts` re-exports so Node-style module resolution finds typings correctly.
+
+## [1.0.4] - 2026-01-21
+
+- Add `build:types` script and `scripts/copy-types.js` to automatically copy `src/types/components.d.ts` into `dist/` during publish builds.
+
+## [1.0.5] - 2026-01-21
+
+- Export `Form` as a named export in addition to default to improve import ergonomics for consumers.
+
+
+
+

package/dist/components/Form/FormCleanUp.js

@@ -0,0 +1,46 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { useFormCleanUp, useFormListeners, useFormStore, } from "../../stores/formStore";
+const FormCleanUp = () => {
+    const { cleanUpStack, clearCleanUpStack } = useFormCleanUp(useShallow((state) => ({
+        cleanUpStack: state.cleanUpStack,
+        clearCleanUpStack: state.clearCleanUpStack,
+    })));
+    const { revokeListener } = useFormListeners(useShallow((state) => ({
+        revokeListener: state.revokeListener,
+    })));
+    const { clearObjKeyItem, clearArrItem } = useFormStore(useShallow((state) => {
+        return {
+            clearObjKeyItem: state.clearObjKeyItem,
+            clearArrItem: state.clearArrItem,
+        };
+    }));
+    useEffect(() => {
+        if (Array.isArray(cleanUpStack) && cleanUpStack?.length) {
+            //   console.log("Trigger clean up: ", cleanUpStack);
+            cleanUpStack.forEach((c) => {
+                if (c.itemKey) {
+                    console.log("Revoke in Clean up: ", c);
+                    revokeListener(c.itemKey, (listener, same) => {
+                        if (!same.length) {
+                            console.log("Trigger after revoke: ", listener, same);
+                            clearObjKeyItem(listener.formName, listener.name);
+                        }
+                    });
+                }
+                else {
+                    if (c.type === "array") {
+                        console.log(c);
+                        clearArrItem(c.formName, c.name);
+                    }
+                    else {
+                    }
+                }
+            });
+            clearCleanUpStack();
+        }
+    }, [cleanUpStack]);
+    return _jsx(_Fragment, {});
+};
+export default FormCleanUp;

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

@@ -1,18 +1,12 @@
-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";
+export interface FormItemProps {
+    children: ReactElement;
+    name: string;
+    formName?: string;
+    initialValue?: any;
+    formItemId?: string;
+    rules?: any[];
     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/FormItem.js

@@ -0,0 +1,46 @@
+import { cloneElement, useRef, useState } from "react";
+import { v4 } from "uuid";
+import useFormItemControl from "../../hooks/useFormItemControl";
+export default function FormItem({ children, name, formName, initialValue, formItemId: externalFormItemId, rules, valuePropName = "value", getValueFromEvent, }) {
+    const elRef = useRef(null);
+    const [formItemId] = useState(externalFormItemId ?? v4());
+    const { value, onChange, errors, state, onFocus, isDirty } = useFormItemControl({
+        formName,
+        name,
+        initialValue,
+        formItemId,
+        rules,
+        elementRef: elRef,
+    });
+    // console.log("re-render", formName, name);
+    // useEffect(() => {
+    //   console.log({ value });
+    // }, [value]);
+    return cloneElement(children, {
+        // ref: inputRef,
+        [valuePropName]: value,
+        onChange: (e) => {
+            let val = e;
+            if (getValueFromEvent && typeof getValueFromEvent === "function") {
+                val = getValueFromEvent(e);
+            }
+            else {
+                if (e && e.target) {
+                    val = e.target.value;
+                }
+            }
+            onChange(val);
+        },
+        // onFocus: () => {
+        //   setIsTouched(true);
+        // },
+        // isTouched: isTouched,
+        isDirty: isDirty,
+        // errors: errors,
+        // formState,
+        errors,
+        onFocus,
+        validateState: state,
+        ref: elRef,
+    });
+}

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/FormList.js

@@ -0,0 +1,11 @@
+import useTestRrenderListControl from "../../hooks/useFormListControl";
+const FormList = ({ name, initialValues, form, formName, children }) => {
+    const { listFields, ...actions } = useTestRrenderListControl({
+        name,
+        initialValues,
+        form,
+        formName,
+    });
+    return children(listFields, { ...actions });
+};
+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/components/Form/InputWrapper.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement } from "react";
+const InputWrapper = ({ children, errors = [], ...props }) => {
+    return (_jsxs("div", { children: [cloneElement(children, props), (props.isDirty || props.formState === "submitted") &&
+                errors?.map((r) => (_jsx("div", { children: r?.message }, `${props.name}-${props.formItemId}-${r.ruleName}`)))] }));
+};
+export default InputWrapper;

package/dist/components/Input.d.ts

@@ -1,6 +1,5 @@
+import { type InputHTMLAttributes } from "react";
+declare const Input: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
+    onChange?: (value: any) => void;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export default Input;
-declare function Input({ onChange, ref, ...props }: {
-    [x: string]: any;
-    onChange: any;
-    ref: any;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Input.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const Input = forwardRef(({ onChange, ...props }, ref) => {
+    return (_jsx("input", { ref: ref, onChange: (e) => {
+            onChange?.(e.target.value);
+        }, ...props }));
+});
+export default Input;

package/dist/constants/validation.js

@@ -0,0 +1,33 @@
+// Rules regex
+export const IS_STRING_NUMBER_REGEX = /^\d+$/;
+export const IS_USERNAME_REGEX = /^[a-zA-Z0-9._]{3,16}$/;
+export const IS_PASSWORD_REGEX = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
+export const IS_POSITIVE_STRING_NUMBER_REGEX = /^[1-9]\d*$/;
+export const IS_POSITIVE_INTEGER_STRING_NUMBER_REGEX = /^(?:0|[1-9]\d*)(?:\.\d+)?$/;
+export const IS_VIETNAMESE_PHONE_NUMBER_REGEX = /^(?:\+84|0)[\s\-\.]?(?:3[2-9]|5[6|8|9]|7[06-9]|8[1-5]|9[0-9])[\s\-\.]?\d[\d\s\-\.]{6,8}$/;
+export const IS_EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+export const IS_NAME_REGEX = /^[A-Za-zÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂÂÊÔƠƯăâêôơưÇçÝýỳỵỷỹ\s]{2,50}$/;
+export const IS_NOSPACE_STRING_AND_NUMBER_REGEX = /^[A-Za-zÀ-ỹ0-9]+$/;
+export const IS_STRING_AND_NUMBER_REGEX = /^[A-Za-zÀ-ỹ0-9][A-Za-zÀ-ỹ0-9\s]*$/;
+export const IS_NO_SPACE_ALPHABET_STRING_AND_NUMBER_REGEX = /^[A-Za-z0-9]+$/;
+export const IS_ALPHABET_STRING_AND_NUMBER_REGEX = /^[A-Za-z0-9]+(?:\s[A-Za-z0-9]+)*$/;
+export const IS_NO_SPACE_ALPHABET_STRING_REGEX = /^[A-Za-z]+$/;
+// default message
+export const HANDLER_INVALID_MESSAGE = "Invalid value!";
+export const MIN_INVALID_MESSAGE = "Min value invalid!";
+export const MAX_INVALID_MESSAGE = "Max value invalid!";
+export const MIN_INVALID_LENGTH_MESSAGE = "Max length invalid!";
+export const MAX_INVALID_LENGTH_MESSAGE = "Max length invalid!";
+export const IS_STRING_NUMBER_INVALID_MESSAGE = "Must be number!";
+export const IS_USERNAME_INVALID_MESSAGE = `Username must be containes string, number, '.' or '_'!`;
+export const IS_PASSWORD_INVALID_MESSAGE = "Password must be contains Minimum 8 characters, with uppercase, lowercase, number, special character!";
+export const IS_POSITIVE_STRING_NUMBER_INVALID_MESSAGE = "Must be positive number!";
+export const IS_POSITIVE_INTEGER_STRING_NUMBER_INVALID_MESSAGE = "Must be positive integer number!";
+export const IS_VIETNAMESE_PHONE_NUMBER_INVALID_MESSAGE = "Invalid phone number format!";
+export const IS_EMAIL_INVALID_MESSAGE = "Invalid email format!";
+export const IS_NAME_INVALID_MESSAGE = "Invalid name format!";
+export const IS_NOSPACE_STRING_AND_NUMBER_MESSAGE = "String must only includes string and number without whitespace!";
+export const IS_STRING_AND_NUMBER_MESSAGE = "String must only includes string, number and whitespace!";
+export const IS_NO_SPACE_ALPHABET_STRING_AND_NUMBER_MESSAGE = "String must only includes alphabet characters and numbers!";
+export const IS_ALPHABET_STRING_AND_NUMBER_MESSAGE = "String must only includes alphabet charaters, numbers and whitespace";
+export const IS_NO_SPACE_ALPHABET_STRING_MESSAGE = "String must only includes alphabet";

package/dist/contexts/FormContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export default createContext(undefined);