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

package/src/components/Form/FormItem.tsx

@@ -0,0 +1,72 @@
+import { cloneElement, useRef, useState } from "react";
+import type { ReactElement } from "react";
+import { v4 } from "uuid";
+import useFormItemControl from "../../hooks/useFormItemControl";
+
+export interface FormItemProps {
+  children: ReactElement;
+  name: string;
+  formName?: string;
+  initialValue?: any;
+  formItemId?: string;
+  rules?: any[];
+  valuePropName?: string;
+  getValueFromEvent?: (event: any) => any;
+}
+
+export default function FormItem({
+  children,
+  name,
+  formName,
+  initialValue,
+  formItemId: externalFormItemId,
+  rules,
+  valuePropName = "value",
+  getValueFromEvent,
+}: FormItemProps) {
+  const elRef = useRef<any>(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: any) => {
+      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,
+  } as any);
+}

package/src/components/Form/FormList.tsx

@@ -0,0 +1,22 @@
+import useTestRrenderListControl from "../../hooks/useFormListControl";
+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;
+}
+
+const FormList = <T = any>({ name, initialValues, form, formName, children }: FormListProps<T>) => {
+  const { listFields, ...actions } = useTestRrenderListControl({
+    name,
+    initialValues,
+    form,
+    formName,
+  });
+  return children(listFields, { ...actions });
+};
+
+export default FormList;

package/src/components/Form/InputWrapper.tsx

@@ -0,0 +1,24 @@
+import { cloneElement } from "react";
+import type { ReactElement } from "react";
+
+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)}
+      {(props.isDirty || props.formState === "submitted") &&
+        errors?.map((r) => (
+          <div key={`${props.name}-${props.formItemId}-${r.ruleName}`}>
+            {r?.message}
+          </div>
+        ))}
+    </div>
+  );
+};
+
+export default InputWrapper;

package/src/components/Input.jsx

@@ -0,0 +1,13 @@
+const Input = ({ onChange, ref, ...props }) => {
+  return (
+    <input
+      ref={ref}
+      onChange={(e) => {
+        onChange && onChange(e.target.value);
+      }}
+      {...props}
+    />
+  );
+};
+
+export default Input;

package/src/components/Input.tsx

@@ -0,0 +1,21 @@
+import { forwardRef, type InputHTMLAttributes } from "react";
+
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
+  onChange?: (value: any) => void;
+};
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ onChange, ...props }, ref) => {
+    return (
+      <input
+        ref={ref}
+        onChange={(e) => {
+          onChange?.(e.target.value);
+        }}
+        {...props}
+      />
+    );
+  },
+);
+
+export default Input;

package/src/constants/validation.ts

@@ -0,0 +1,63 @@
+// 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/src/contexts/FormContext.ts

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