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

package/src/test/testFormInstance/TestCase1_FormWithInstance.tsx

@@ -0,0 +1,112 @@
+import { Button, Space, Typography } from "antd";
+import Form from "../../providers/Form";
+
+const { Title, Paragraph, Text } = Typography;
+
+/**
+ * TestCase1: Form with Instance Prop
+ * 
+ * Mô tả:
+ * - Test breaking change: Form component nhận prop "form" thay vì chỉ có "formName"
+ * - Form instance được tạo trước bằng Form.useForm()
+ * - Các methods được bind vào instance trước khi Form mount
+ * 
+ * Expected Behavior:
+ * - Có thể gọi form.setFieldValue() trước khi Form render
+ * - Form sử dụng formName từ instance
+ * - Instance được persist và rebind methods khi Form mount
+ */
+
+export default function TestCase1_FormWithInstance() {
+  const [form] = Form.useForm<{ username: string; email: string }>();
+
+  const handleSetValueBeforeMount = () => {
+    // Test: Gọi setFieldValue trước khi Form mount
+    form.setFieldValue("username", "admin");
+    form.setFieldValue("email", "admin@example.com");
+    console.log("✅ Set values before mount:", {
+      username: form.getFieldValue("username"),
+      email: form.getFieldValue("email"),
+    });
+  };
+
+  const handleGetValues = () => {
+    console.log("Current values:", {
+      username: form.getFieldValue("username"),
+      email: form.getFieldValue("email"),
+    });
+  };
+
+  const handleReset = () => {
+    form.resetFields();
+    console.log("Form reset");
+  };
+
+  return (
+    <div style={{ padding: 24 }}>
+      <Title level={3}>TestCase1: Form with Instance Prop</Title>
+      
+      <Paragraph>
+        <Text strong>Breaking Change:</Text> Form component có thể nhận prop <Text code>form</Text> thay vì <Text code>formName</Text>
+      </Paragraph>
+
+      <Paragraph>
+        <Text type="secondary">
+          Form instance được tạo bằng Form.useForm() và truyền vào Form component.
+          Instance này có thể được sử dụng trước khi Form mount.
+        </Text>
+      </Paragraph>
+
+      <Space style={{ marginBottom: 24 }}>
+        <Button onClick={handleSetValueBeforeMount} type="primary">
+          Set Values Before Mount
+        </Button>
+        <Button onClick={handleGetValues}>
+          Get Current Values (Check Console)
+        </Button>
+        <Button onClick={handleReset} danger>
+          Reset Form
+        </Button>
+      </Space>
+
+      <Form
+        form={form}
+        initialValues={{ username: "", email: "" }}
+        onFinish={(values) => {
+          console.log("Form submitted:", values);
+        }}
+      >
+        <Form.Item name="username" label="Username">
+          <input
+            type="text"
+            placeholder="Username"
+            style={{ padding: 8, width: 300 }}
+          />
+        </Form.Item>
+
+        <Form.Item name="email" label="Email">
+          <input
+            type="email"
+            placeholder="Email"
+            style={{ padding: 8, width: 300 }}
+          />
+        </Form.Item>
+
+        <Button type="primary" htmlType="submit">
+          Submit
+        </Button>
+      </Form>
+
+      <div style={{ marginTop: 24, padding: 16, background: "#f5f5f5" }}>
+        <Title level={5}>Expected Results:</Title>
+        <ul>
+          <li>✅ Click "Set Values Before Mount" → Values được set và log ra console</li>
+          <li>✅ Click "Get Current Values" → Values hiện tại được log ra</li>
+          <li>✅ Form render với values đã set</li>
+          <li>✅ Click "Reset Form" → Form reset về initialValues</li>
+          <li>✅ Submit form → Console log submitted values</li>
+        </ul>
+      </div>
+    </div>
+  );
+}

package/src/test/testFormInstance/TestCase2_AutoGenerateFormName.tsx

@@ -0,0 +1,139 @@
+import { Button, Space, Typography } from "antd";
+import { useState } from "react";
+import Form from "../../providers/Form";
+
+const { Title, Paragraph, Text } = Typography;
+
+/**
+ * TestCase2: Auto-generate FormName
+ * 
+ * Mô tả:
+ * - Test feature: Form.useForm() tự động generate UUID nếu không truyền tham số
+ * - Mỗi lần gọi Form.useForm() sẽ tạo ra một formName unique
+ * - Form component có thể hoạt động mà không cần truyền formName prop
+ * 
+ * Expected Behavior:
+ * - Form hoạt động bình thường với auto-generated formName
+ * - FormName là UUID duy nhất
+ * - Multiple forms có thể coexist với auto-generated names
+ */
+
+export default function TestCase2_AutoGenerateFormName() {
+  const [form1] = Form.useForm<{ name: string }>();
+  const [form2] = Form.useForm<{ email: string }>();
+  const [showForm1, setShowForm1] = useState(true);
+  const [showForm2, setShowForm2] = useState(true);
+
+  const handleLogFormNames = () => {
+    console.log("Form 1 Name:", form1.formName);
+    console.log("Form 2 Name:", form2.formName);
+    console.log("Form 1 Value:", form1.getFieldValue("name"));
+    console.log("Form 2 Value:", form2.getFieldValue("email"));
+  };
+
+  const handleSetValues = () => {
+    form1.setFieldValue("name", "John Doe");
+    form2.setFieldValue("email", "john@example.com");
+    console.log("✅ Values set for both forms");
+  };
+
+  return (
+    <div style={{ padding: 24 }}>
+      <Title level={3}>TestCase2: Auto-generate FormName</Title>
+      
+      <Paragraph>
+        <Text strong>New Feature:</Text> Form.useForm() tự động tạo UUID làm formName nếu không có tham số
+      </Paragraph>
+
+      <Paragraph>
+        <Text type="secondary">
+          Mỗi form instance có một UUID duy nhất, không cần phải manually quản lý formName.
+          Multiple forms có thể coexist mà không lo bị conflict.
+        </Text>
+      </Paragraph>
+
+      <Space style={{ marginBottom: 24 }}>
+        <Button onClick={handleLogFormNames} type="primary">
+          Log Form Names (Check Console)
+        </Button>
+        <Button onClick={handleSetValues}>
+          Set Values for Both Forms
+        </Button>
+        <Button onClick={() => setShowForm1(!showForm1)}>
+          Toggle Form 1 {showForm1 ? "Hide" : "Show"}
+        </Button>
+        <Button onClick={() => setShowForm2(!showForm2)}>
+          Toggle Form 2 {showForm2 ? "Hide" : "Show"}
+        </Button>
+      </Space>
+
+      <div style={{ display: "flex", gap: 24 }}>
+        {showForm1 && (
+          <div style={{ flex: 1, border: "1px solid #d9d9d9", padding: 16 }}>
+            <Title level={5}>Form 1 (Auto-generated Name)</Title>
+            <Text type="secondary">FormName: {form1.formName}</Text>
+            
+            <Form
+              form={form1}
+              initialValues={{ name: "" }}
+              onFinish={(values) => {
+                console.log("Form 1 submitted:", values);
+              }}
+            >
+              <Form.Item name="name" label="Name">
+                <input
+                  type="text"
+                  placeholder="Your name"
+                  style={{ padding: 8, width: "100%" }}
+                />
+              </Form.Item>
+
+              <Button type="primary" htmlType="submit">
+                Submit Form 1
+              </Button>
+            </Form>
+          </div>
+        )}
+
+        {showForm2 && (
+          <div style={{ flex: 1, border: "1px solid #d9d9d9", padding: 16 }}>
+            <Title level={5}>Form 2 (Auto-generated Name)</Title>
+            <Text type="secondary">FormName: {form2.formName}</Text>
+            
+            <Form
+              form={form2}
+              initialValues={{ email: "" }}
+              onFinish={(values) => {
+                console.log("Form 2 submitted:", values);
+              }}
+            >
+              <Form.Item name="email" label="Email">
+                <input
+                  type="email"
+                  placeholder="Your email"
+                  style={{ padding: 8, width: "100%" }}
+                />
+              </Form.Item>
+
+              <Button type="primary" htmlType="submit">
+                Submit Form 2
+              </Button>
+            </Form>
+          </div>
+        )}
+      </div>
+
+      <div style={{ marginTop: 24, padding: 16, background: "#f5f5f5" }}>
+        <Title level={5}>Expected Results:</Title>
+        <ul>
+          <li>✅ Click "Log Form Names" → Console show 2 different UUIDs</li>
+          <li>✅ Click "Set Values for Both Forms" → Both forms update correctly</li>
+          <li>✅ Toggle forms → Forms can unmount/remount without losing instance</li>
+          <li>✅ FormName displays unique UUIDs under each form title</li>
+          <li>✅ Both forms work independently without conflicts</li>
+          <li>✅ Submit each form → Console logs correct values</li>
+        </ul>
+      </div>
+    </div>
+  );
+}

package/src/test/testFormInstance/TestCase3_SafeFormMethods.tsx

@@ -0,0 +1,203 @@
+import { Button, Space, Typography } from "antd";
+import { useState } from "react";
+import Form from "../../providers/Form";
+
+const { Title, Paragraph, Text } = Typography;
+
+/**
+ * TestCase3: Safe Form Methods
+ * 
+ * Mô tả:
+ * - Test feature: Form instance methods có thể gọi an toàn trước khi Form mount
+ * - Proxy instance tự động tìm real instance khi Form mount
+ * - Warning được log nếu method được gọi khi Form chưa mount
+ * 
+ * Expected Behavior:
+ * - Gọi methods trước khi mount → Log warning
+ * - Sau khi mount → Methods hoạt động bình thường
+ * - Unmount form → Methods lại log warning
+ */
+
+export default function TestCase3_SafeFormMethods() {
+  const [form] = Form.useForm<{ username: string; password: string }>();
+  const [formMounted, setFormMounted] = useState(false);
+  const [logs, setLogs] = useState<string[]>([]);
+
+  const addLog = (message: string) => {
+    setLogs((prev) => [...prev, `[${new Date().toLocaleTimeString()}] ${message}`]);
+  };
+
+  const handleSetValueBeforeMount = () => {
+    addLog("🔴 Calling setFieldValue BEFORE Form mount");
+    form.setFieldValue("username", "admin");
+    addLog("Check console for warning");
+  };
+
+  const handleSetValueAfterMount = () => {
+    addLog("🟢 Calling setFieldValue AFTER Form mount");
+    form.setFieldValue("username", "user123");
+    form.setFieldValue("password", "secret");
+    addLog("Values should be set successfully");
+  };
+
+  const handleGetValue = () => {
+    const username = form.getFieldValue("username");
+    const password = form.getFieldValue("password");
+    addLog(`Get values: username=${username}, password=${password}`);
+  };
+
+  const handleSubmit = () => {
+    addLog("🔵 Calling form.submit()");
+    form.submit();
+  };
+
+  const handleMountForm = () => {
+    setFormMounted(true);
+    addLog("✅ Form mounted");
+  };
+
+  const handleUnmountForm = () => {
+    setFormMounted(false);
+    addLog("❌ Form unmounted");
+  };
+
+  const clearLogs = () => {
+    setLogs([]);
+  };
+
+  return (
+    <div style={{ padding: 24 }}>
+      <Title level={3}>TestCase3: Safe Form Methods</Title>
+      
+      <Paragraph>
+        <Text strong>New Feature:</Text> Form methods có thể được gọi an toàn bất cứ lúc nào
+      </Paragraph>
+
+      <Paragraph>
+        <Text type="secondary">
+          Proxy instance tự động proxy các method calls. Nếu Form chưa mount, 
+          sẽ log warning thay vì throw error. Khi Form mount, methods hoạt động bình thường.
+        </Text>
+      </Paragraph>
+
+      <Space style={{ marginBottom: 16 }} wrap>
+        <Button onClick={handleSetValueBeforeMount} danger={!formMounted}>
+          Set Value {!formMounted && "(Form Not Mounted)"}
+        </Button>
+        <Button onClick={handleSetValueAfterMount} type="primary" disabled={!formMounted}>
+          Set Value After Mount
+        </Button>
+        <Button onClick={handleGetValue}>
+          Get Values
+        </Button>
+        <Button onClick={handleSubmit} type="dashed">
+          Submit Form
+        </Button>
+      </Space>
+
+      <Space style={{ marginBottom: 24 }}>
+        {!formMounted ? (
+          <Button onClick={handleMountForm} type="primary">
+            Mount Form
+          </Button>
+        ) : (
+          <Button onClick={handleUnmountForm} danger>
+            Unmount Form
+          </Button>
+        )}
+        <Button onClick={clearLogs}>Clear Logs</Button>
+      </Space>
+
+      <div style={{ display: "flex", gap: 24 }}>
+        {/* Logs Panel */}
+        <div style={{ flex: 1 }}>
+          <Title level={5}>Action Logs:</Title>
+          <div
+            style={{
+              border: "1px solid #d9d9d9",
+              padding: 16,
+              height: 300,
+              overflow: "auto",
+              background: "#fafafa",
+              fontFamily: "monospace",
+              fontSize: 12,
+            }}
+          >
+            {logs.length === 0 ? (
+              <Text type="secondary">No logs yet...</Text>
+            ) : (
+              logs.map((log, index) => (
+                <div key={index} style={{ marginBottom: 4 }}>
+                  {log}
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+
+        {/* Form Panel */}
+        <div style={{ flex: 1 }}>
+          <Title level={5}>Form (Status: {formMounted ? "Mounted" : "Unmounted"}):</Title>
+          {formMounted ? (
+            <div style={{ border: "1px solid #52c41a", padding: 16 }}>
+              <Form
+                form={form}
+                initialValues={{ username: "", password: "" }}
+                onFinish={(values) => {
+                  addLog(`✅ Form submitted: ${JSON.stringify(values)}`);
+                }}
+              >
+                <Form.Item name="username" label="Username">
+                  <input
+                    type="text"
+                    placeholder="Username"
+                    style={{ padding: 8, width: "100%" }}
+                  />
+                </Form.Item>
+
+                <Form.Item name="password" label="Password">
+                  <input
+                    type="password"
+                    placeholder="Password"
+                    style={{ padding: 8, width: "100%" }}
+                  />
+                </Form.Item>
+
+                <Button type="primary" htmlType="submit">
+                  Submit
+                </Button>
+              </Form>
+            </div>
+          ) : (
+            <div
+              style={{
+                border: "1px dashed #d9d9d9",
+                padding: 16,
+                height: 200,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                background: "#fafafa",
+              }}
+            >
+              <Text type="secondary">Form is not mounted</Text>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div style={{ marginTop: 24, padding: 16, background: "#f5f5f5" }}>
+        <Title level={5}>Expected Results:</Title>
+        <ul>
+          <li>✅ Click "Set Value (Form Not Mounted)" → Console shows warning</li>
+          <li>✅ Click "Mount Form" → Form appears</li>
+          <li>✅ Click "Set Value After Mount" → Form values update without warning</li>
+          <li>✅ Click "Get Values" → Shows current values in logs</li>
+          <li>✅ Click "Unmount Form" → Form disappears</li>
+          <li>✅ Click "Set Value (Form Not Mounted)" again → Warning appears again</li>
+          <li>⚠️ Check browser console for detailed warnings</li>
+        </ul>
+      </div>
+    </div>
+  );
+}