react-form-manage 1.0.8 → 1.1.0-beta.2

package/src/test/testFormInstance/index.tsx

@@ -0,0 +1,155 @@
+import { Tabs, Typography } from "antd";
+import { useState } from "react";
+import TestCase1_FormWithInstance from "./TestCase1_FormWithInstance";
+import TestCase2_AutoGenerateFormName from "./TestCase2_AutoGenerateFormName";
+import TestCase3_SafeFormMethods from "./TestCase3_SafeFormMethods";
+import TestCase4_UseFormStatusFlag from "./TestCase4_UseFormStatusFlag";
+import TestCase5_UseFormUtils from "./TestCase5_UseFormUtils";
+import TestCase6_FormWithoutWrapper from "./TestCase6_FormWithoutWrapper";
+import TestCase7_SetValueInEffect from "./TestCase7_SetValueInEffect";
+import TestCase8_TypeSafetyImprovements from "./TestCase8_TypeSafetyImprovements";
+
+const { Title, Paragraph, Text } = Typography;
+
+/**
+ * Form Instance Test Suite
+ *
+ * Test suite cho breaking changes và new features liên quan đến Form Instance:
+ * - Form component nhận prop "form" thay vì chỉ có "formName"
+ * - Auto-generate UUID cho formName
+ * - Safe form methods với proxy instance
+ * - useForm trả về [instance, isReady] tuple
+ * - useFormUtils hook mới
+ * - Form instance hoạt động độc lập như state manager
+ * - setValue trong useEffect với setTimeout (async behavior)
+ * - Type safety improvements (dynamic field names, getFieldErrors type, submitAsync type)
+ */
+
+export default function FormInstanceTestSuite() {
+  const [activeTab, setActiveTab] = useState("1");
+
+  const items = [
+    {
+      key: "1",
+      label: "TestCase1: Form with Instance",
+      children: <TestCase1_FormWithInstance />,
+    },
+    {
+      key: "2",
+      label: "TestCase2: Auto-generate FormName",
+      children: <TestCase2_AutoGenerateFormName />,
+    },
+    {
+      key: "3",
+      label: "TestCase3: Safe Form Methods",
+      children: <TestCase3_SafeFormMethods />,
+    },
+    {
+      key: "4",
+      label: "TestCase4: useForm Status Flag",
+      children: <TestCase4_UseFormStatusFlag />,
+    },
+    {
+      key: "5",
+      label: "TestCase5: useFormUtils Hook",
+      children: <TestCase5_UseFormUtils />,
+    },
+    {
+      key: "6",
+      label: "TestCase6: Form Without Wrapper",
+      children: <TestCase6_FormWithoutWrapper />,
+    },
+    {
+      key: "7",
+      label: "TestCase7: Set Value in Effect",
+      children: <TestCase7_SetValueInEffect />,
+    },
+    {
+      key: "8",
+      label: "TestCase8: Type Safety",
+      children: <TestCase8_TypeSafetyImprovements />,
+    },
+  ];
+
+  return (
+    <div style={{ padding: 24, maxWidth: 1400, margin: "0 auto" }}>
+      <div style={{ marginBottom: 32 }}>
+        <Title level={2}>🧪 Form Instance Test Suite</Title>
+        <Paragraph>
+          <Text>
+            Test suite cho breaking changes và new features trong version mới.
+            Mỗi test case cover một aspect cụ thể của Form Instance behavior.
+          </Text>
+        </Paragraph>
+      </div>
+
+      <div
+        style={{
+          marginBottom: 24,
+          padding: 16,
+          background: "#e6f7ff",
+          border: "1px solid #91d5ff",
+        }}
+      >
+        <Title level={4}>📋 Breaking Changes & New Features:</Title>
+        <ul style={{ marginBottom: 0 }}>
+          <li>
+            <Text strong>Form Prop "form":</Text> Form component có thể nhận{" "}
+            <Text code>form</Text> instance thay vì <Text code>formName</Text>
+          </li>
+          <li>
+            <Text strong>Auto-generate FormName:</Text> Form.useForm() tự động
+            tạo UUID nếu không truyền tham số
+          </li>
+          <li>
+            <Text strong>Safe Methods:</Text> Form methods có thể gọi an toàn
+            trước khi Form mount (proxy instance)
+          </li>
+          <li>
+            <Text strong>useForm Tuple:</Text> useForm() trả về{" "}
+            <Text code>[instance, isReady]</Text> thay vì chỉ{" "}
+            <Text code>[instance]</Text>
+          </li>
+          <li>
+            <Text strong>useFormUtils Hook:</Text> Hook mới cho phép thao tác
+            form từ bên ngoài component
+          </li>
+          <li>
+            <Text strong>Headless Forms:</Text> Form instance hoạt động độc lập
+            như state manager
+          </li>
+          <li>
+            <Text strong>Async Behavior:</Text> Form methods hoạt động với async
+            callbacks (setTimeout, Promise, etc.)
+          </li>
+          <li>
+            <Text strong>Type Improvements:</Text> Dynamic field names{" "}
+            <Text code>{`keyof T | (string & {})`}</Text>, proper getFieldErrors return
+            type, submitAsync <Text code>Promise&lt;void&gt;</Text>
+          </li>
+        </ul>
+      </div>
+
+      <Tabs
+        activeKey={activeTab}
+        onChange={setActiveTab}
+        items={items}
+        size="large"
+        type="card"
+      />
+
+      <div style={{ marginTop: 32, padding: 16, background: "#f5f5f5" }}>
+        <Title level={5}>💡 Testing Tips:</Title>
+        <ul style={{ marginBottom: 0 }}>
+          <li>Mở Browser Console để xem detailed logs và warnings</li>
+          <li>Mỗi test case có Expected Results section để verify behavior</li>
+          <li>Test cases có thể test độc lập, không ảnh hưởng lẫn nhau</li>
+          <li>
+            Chú ý các warning messages khi form methods được gọi sai timing
+          </li>
+          <li>Use Cases sections giải thích khi nào nên dùng feature đó</li>
+        </ul>
+      </div>
+    </div>
+  );
+}

package/src/test/testSetValue/TestSetValueInEffect.tsx

@@ -0,0 +1,54 @@
+import { Button, Input } from "antd";
+import axios from "axios";
+import { useEffect, useEffectEvent, useState } from "react";
+import { useShallow } from "zustand/react/shallow";
+import Form from "../../providers/Form";
+import { useFormStore } from "../../stores/formStore";
+import { PublicFormInstance } from "../../types";
+
+type Props = {};
+
+function TestSetValueInEffect({}: Props) {
+  const { getFormInstance } = useFormStore(
+    useShallow((state) => ({
+      getFormInstance: state.getFormInstance,
+    })),
+  );
+  const [stateRender, setStateRender] = useState(1);
+  const [form] = Form.useForm("testFormMounted");
+
+  const setDataEvent = useEffectEvent((form?: PublicFormInstance) => {
+    console.log("Effect Event Triggered with form: ", form);
+  });
+
+  useEffect(() => {
+    setTimeout(() => {
+      console.log("Form Mounted", getFormInstance("testFormMounted"));
+    }, 1000);
+
+    setDataEvent(form);
+
+    axios
+      .get("https://jsonplaceholder.typicode.com/todos/1")
+      .then((response) => {});
+  }, []);
+  return (
+    <div>
+      <Form formName="testFormMounted">
+        <Form.Item name="test" initialValue={"initial value"}>
+          <Input />
+        </Form.Item>
+      </Form>
+
+      <Button
+        onClick={() => {
+          setStateRender((prev) => prev + 1);
+        }}
+      >
+        Counter: {stateRender}
+      </Button>
+    </div>
+  );
+}
+
+export default TestSetValueInEffect;

package/src/types/public.ts

@@ -1,4 +1,5 @@
 import type { SUBMIT_STATE } from "../constants/form";
+import { SetFieldValueOptions } from "../providers/Form";
 import type { GetConstantType } from "./util";
 
 export type FormValues<T = any> = T;
@@ -37,21 +38,27 @@ 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, options?: any) => void;
-  setFieldValues: (values: Partial<T>, options?: any) => void;
-  getFieldValue: (name: keyof T & string) => any;
+  submitAsync: (values?: T) => Promise<void>;
+  setFieldValue: (
+    name: keyof T | (string & {}),
+    value: any,
+    options?: SetFieldValueOptions,
+  ) => void;
+  setFieldValues: (values: Partial<T>, options?: SetFieldValueOptions) => void;
+  getFieldValue: (name: keyof T | (string & {})) => any;
   getFieldValues: (
-    names?: Array<keyof T & string>,
+    names?: Array<keyof T | (string & {})>,
   ) => Array<{ name: string; value: any }>;
-  getFieldErrors: () => Record<string, any>;
-  setFieldFocus: (name: keyof T & string) => void;
+  getFieldErrors: (
+    names?: Array<keyof T | (string & {})>,
+  ) => Array<{ name: string; errors: FormFieldError[] }>;
+  setFieldFocus: (name: keyof T | (string & {})) => void;
 }
 
 export interface UseFormItemProps<T = any> {
   formName?: string;
   form?: PublicFormInstance<T>;
-  name?: keyof T & string;
+  name?: keyof T | (string & {});
   initialValue?: any;
   formItemId?: string;
   rules?: ValidationRule<any, T>[];