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

package/src/test/testFormInstance/TestCase4_UseFormStatusFlag.tsx

@@ -0,0 +1,252 @@
+import { Badge, Button, Space, Tag, Typography } from "antd";
+import { useEffect, useState } from "react";
+import Form from "../../providers/Form";
+
+const { Title, Paragraph, Text } = Typography;
+
+/**
+ * TestCase4: useForm Returns Status Flag
+ * 
+ * Mô tả:
+ * - Test breaking change: useForm() trả về tuple [instance, isReady]
+ * - isReady = true khi Form đã mount và bind methods
+ * - isReady = false khi Form chưa mount hoặc đã unmount
+ * 
+ * Expected Behavior:
+ * - Trước khi mount: isReady = false
+ * - Sau khi mount: isReady = true
+ * - Sau khi unmount: isReady = false
+ * - Có thể dùng isReady để conditionally render UI hoặc enable/disable buttons
+ */
+
+export default function TestCase4_UseFormStatusFlag() {
+  const [form, isFormReady] = Form.useForm<{ email: string; message: string }>();
+  const [formMounted, setFormMounted] = useState(false);
+  const [statusHistory, setStatusHistory] = useState<
+    { time: string; status: boolean; event: string }[]
+  >([]);
+
+  useEffect(() => {
+    setStatusHistory((prev) => [
+      ...prev,
+      {
+        time: new Date().toLocaleTimeString(),
+        status: isFormReady,
+        event: isFormReady ? "Form Ready" : "Form Not Ready",
+      },
+    ]);
+  }, [isFormReady]);
+
+  const handleMountForm = () => {
+    setFormMounted(true);
+  };
+
+  const handleUnmountForm = () => {
+    setFormMounted(false);
+  };
+
+  const handleSetValue = () => {
+    if (isFormReady) {
+      form.setFieldValue("email", "test@example.com");
+      form.setFieldValue("message", "Hello from ready form!");
+    } else {
+      console.warn("Form is not ready yet!");
+    }
+  };
+
+  const clearHistory = () => {
+    setStatusHistory([]);
+  };
+
+  return (
+    <div style={{ padding: 24 }}>
+      <Title level={3}>TestCase4: useForm Returns Status Flag</Title>
+      
+      <Paragraph>
+        <Text strong>Breaking Change:</Text> useForm() bây giờ trả về tuple [instance, isReady]
+      </Paragraph>
+
+      <Paragraph>
+        <Text type="secondary">
+          isReady flag cho biết Form đã mount và sẵn sàng nhận calls hay chưa.
+          Có thể dùng để conditionally enable/disable features dựa trên Form state.
+        </Text>
+      </Paragraph>
+
+      {/* Status Indicator */}
+      <div style={{ marginBottom: 24, padding: 16, background: "#fafafa", border: "1px solid #d9d9d9" }}>
+        <Space size="large">
+          <div>
+            <Text strong>Form Ready Status: </Text>
+            <Badge
+              status={isFormReady ? "success" : "error"}
+              text={
+                <Text strong style={{ color: isFormReady ? "#52c41a" : "#ff4d4f" }}>
+                  {isFormReady ? "READY" : "NOT READY"}
+                </Text>
+              }
+            />
+          </div>
+          <div>
+            <Text strong>Form Mounted: </Text>
+            <Tag color={formMounted ? "green" : "red"}>
+              {formMounted ? "YES" : "NO"}
+            </Tag>
+          </div>
+          <div>
+            <Text strong>FormName: </Text>
+            <Text code>{form.formName}</Text>
+          </div>
+        </Space>
+      </div>
+
+      {/* Control Buttons */}
+      <Space style={{ marginBottom: 24 }} wrap>
+        {!formMounted ? (
+          <Button onClick={handleMountForm} type="primary" size="large">
+            Mount Form
+          </Button>
+        ) : (
+          <Button onClick={handleUnmountForm} danger size="large">
+            Unmount Form
+          </Button>
+        )}
+        <Button
+          onClick={handleSetValue}
+          disabled={!isFormReady}
+          type={isFormReady ? "primary" : "default"}
+        >
+          Set Values {!isFormReady && "(Disabled - Form Not Ready)"}
+        </Button>
+        <Button onClick={clearHistory}>Clear History</Button>
+      </Space>
+
+      <div style={{ display: "flex", gap: 24 }}>
+        {/* Status History */}
+        <div style={{ flex: 1 }}>
+          <Title level={5}>Status Change History:</Title>
+          <div
+            style={{
+              border: "1px solid #d9d9d9",
+              padding: 16,
+              height: 300,
+              overflow: "auto",
+              background: "#ffffff",
+            }}
+          >
+            {statusHistory.length === 0 ? (
+              <Text type="secondary">No status changes yet...</Text>
+            ) : (
+              <table style={{ width: "100%", borderCollapse: "collapse" }}>
+                <thead>
+                  <tr style={{ borderBottom: "2px solid #d9d9d9" }}>
+                    <th style={{ padding: 8, textAlign: "left" }}>Time</th>
+                    <th style={{ padding: 8, textAlign: "left" }}>Status</th>
+                    <th style={{ padding: 8, textAlign: "left" }}>Event</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {statusHistory.map((entry, index) => (
+                    <tr
+                      key={index}
+                      style={{
+                        borderBottom: "1px solid #f0f0f0",
+                        background: index % 2 === 0 ? "#fafafa" : "#ffffff",
+                      }}
+                    >
+                      <td style={{ padding: 8, fontFamily: "monospace", fontSize: 12 }}>
+                        {entry.time}
+                      </td>
+                      <td style={{ padding: 8 }}>
+                        <Tag color={entry.status ? "green" : "red"}>
+                          {entry.status ? "TRUE" : "FALSE"}
+                        </Tag>
+                      </td>
+                      <td style={{ padding: 8 }}>{entry.event}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </div>
+        </div>
+
+        {/* Form Panel */}
+        <div style={{ flex: 1 }}>
+          <Title level={5}>Form Panel:</Title>
+          {formMounted ? (
+            <div style={{ border: "2px solid #52c41a", padding: 16 }}>
+              <Form
+                form={form}
+                initialValues={{ email: "", message: "" }}
+                onFinish={(values) => {
+                  console.log("Form submitted:", values);
+                  alert(`Submitted: ${JSON.stringify(values, null, 2)}`);
+                }}
+              >
+                <Form.Item name="email" label="Email">
+                  <input
+                    type="email"
+                    placeholder="Enter email"
+                    style={{ padding: 8, width: "100%" }}
+                  />
+                </Form.Item>
+
+                <Form.Item name="message" label="Message">
+                  <textarea
+                    placeholder="Enter message"
+                    rows={4}
+                    style={{ padding: 8, width: "100%" }}
+                  />
+                </Form.Item>
+
+                <Button type="primary" htmlType="submit">
+                  Submit
+                </Button>
+              </Form>
+            </div>
+          ) : (
+            <div
+              style={{
+                border: "2px dashed #d9d9d9",
+                padding: 16,
+                height: 300,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                background: "#fafafa",
+              }}
+            >
+              <div style={{ textAlign: "center" }}>
+                <Text type="secondary" style={{ fontSize: 16 }}>
+                  Form is not mounted
+                </Text>
+                <br />
+                <Button
+                  type="primary"
+                  onClick={handleMountForm}
+                  style={{ marginTop: 16 }}
+                >
+                  Mount Form
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div style={{ marginTop: 24, padding: 16, background: "#f5f5f5" }}>
+        <Title level={5}>Expected Results:</Title>
+        <ul>
+          <li>✅ Initial state: isReady = false (logged in history)</li>
+          <li>✅ Click "Mount Form" → isReady changes to true (logged in history)</li>
+          <li>✅ "Set Values" button becomes enabled when isReady = true</li>
+          <li>✅ Click "Set Values" → Form values update successfully</li>
+          <li>✅ Click "Unmount Form" → isReady changes back to false (logged in history)</li>
+          <li>✅ "Set Values" button becomes disabled again</li>
+          <li>✅ Status badge and tag update in real-time</li>
+        </ul>
+      </div>
+    </div>
+  );
+}

package/src/test/testFormInstance/TestCase5_UseFormUtils.tsx

@@ -0,0 +1,224 @@
+import { Button, Space, Typography, Card, Input, message } from "antd";
+import { useState } from "react";
+import Form from "../../providers/Form";
+
+const { Title, Paragraph, Text } = Typography;
+
+/**
+ * TestCase5: useFormUtils Hook
+ * 
+ * Mô tả:
+ * - Test new hook: Form.useFormUtils()
+ * - Cho phép thao tác với form từ bên ngoài component, không cần context
+ * - Cung cấp: getFormInstance, setFieldValue, setFieldValues
+ * 
+ * Expected Behavior:
+ * - Có thể get form instance từ bất kỳ đâu bằng formName
+ * - Có thể set values cho form từ bên ngoài form component
+ * - Multiple forms có thể được điều khiển từ 1 control panel
+ */
+
+function ControlPanel() {
+  const { getFormInstance, setFieldValue, setFieldValues } = Form.useFormUtils();
+  const [targetFormName, setTargetFormName] = useState("form1");
+
+  const handleSetSingleValue = () => {
+    try {
+      setFieldValue(targetFormName, "username", "admin");
+      message.success(`Set username='admin' for ${targetFormName}`);
+    } catch (error: any) {
+      message.error(error.message);
+    }
+  };
+
+  const handleSetMultipleValues = () => {
+    try {
+      setFieldValues(targetFormName, {
+        username: "john_doe",
+        email: "john@example.com",
+      });
+      message.success(`Set multiple values for ${targetFormName}`);
+    } catch (error: any) {
+      message.error(error.message);
+    }
+  };
+
+  const handleGetFormInstance = () => {
+    try {
+      const formInstance = getFormInstance(targetFormName);
+      console.log("Form Instance:", formInstance);
+      console.log("Current Values:", {
+        username: formInstance?.getFieldValue("username"),
+        email: formInstance?.getFieldValue("email"),
+      });
+      message.info("Check console for form instance details");
+    } catch (error: any) {
+      message.error(error.message);
+    }
+  };
+
+  const handleReset = () => {
+    try {
+      const formInstance = getFormInstance(targetFormName);
+      formInstance?.resetFields();
+      message.success(`Reset ${targetFormName}`);
+    } catch (error: any) {
+      message.error(error.message);
+    }
+  };
+
+  const handleSubmit = () => {
+    try {
+      const formInstance = getFormInstance(targetFormName);
+      formInstance?.submit();
+      message.info(`Submitting ${targetFormName}`);
+    } catch (error: any) {
+      message.error(error.message);
+    }
+  };
+
+  return (
+    <Card
+      title="🎮 Control Panel (useFormUtils)"
+      style={{ marginBottom: 24 }}
+      extra={
+        <Space>
+          <Text>Target Form:</Text>
+          <Input
+            value={targetFormName}
+            onChange={(e) => setTargetFormName(e.target.value)}
+            placeholder="Enter form name"
+            style={{ width: 150 }}
+          />
+        </Space>
+      }
+    >
+      <Space wrap>
+        <Button onClick={handleSetSingleValue} type="primary">
+          Set Single Value
+        </Button>
+        <Button onClick={handleSetMultipleValues} type="primary">
+          Set Multiple Values
+        </Button>
+        <Button onClick={handleGetFormInstance}>
+          Get Form Instance
+        </Button>
+        <Button onClick={handleReset} danger>
+          Reset Form
+        </Button>
+        <Button onClick={handleSubmit} type="dashed">
+          Submit Form
+        </Button>
+      </Space>
+      <div style={{ marginTop: 16, padding: 12, background: "#f0f0f0" }}>
+        <Text type="secondary">
+          💡 Tip: Change the target form name to "form1" or "form2" to control different forms
+        </Text>
+      </div>
+    </Card>
+  );
+}
+
+export default function TestCase5_UseFormUtils() {
+  return (
+    <div style={{ padding: 24 }}>
+      <Title level={3}>TestCase5: useFormUtils Hook</Title>
+      
+      <Paragraph>
+        <Text strong>New Hook:</Text> Form.useFormUtils() cho phép thao tác với form từ bên ngoài
+      </Paragraph>
+
+      <Paragraph>
+        <Text type="secondary">
+          Hook này cung cấp các utility methods để get/set form values từ bất kỳ đâu 
+          trong app, không cần phải ở trong Form context. Hữu ích cho global control panels, 
+          external triggers, hoặc cross-component form manipulation.
+        </Text>
+      </Paragraph>
+
+      {/* Control Panel */}
+      <ControlPanel />
+
+      {/* Forms */}
+      <div style={{ display: "flex", gap: 24 }}>
+        {/* Form 1 */}
+        <div style={{ flex: 1 }}>
+          <Card title="Form 1 (formName='form1')">
+            <Form
+              formName="form1"
+              initialValues={{ username: "", email: "" }}
+              onFinish={(values) => {
+                console.log("Form 1 submitted:", values);
+                message.success(`Form 1 submitted: ${JSON.stringify(values)}`);
+              }}
+            >
+              <Form.Item name="username" label="Username">
+                <Input placeholder="Username" />
+              </Form.Item>
+
+              <Form.Item name="email" label="Email">
+                <Input type="email" placeholder="Email" />
+              </Form.Item>
+
+              <Button type="primary" htmlType="submit">
+                Submit Form 1
+              </Button>
+            </Form>
+          </Card>
+        </div>
+
+        {/* Form 2 */}
+        <div style={{ flex: 1 }}>
+          <Card title="Form 2 (formName='form2')">
+            <Form
+              formName="form2"
+              initialValues={{ username: "", email: "" }}
+              onFinish={(values) => {
+                console.log("Form 2 submitted:", values);
+                message.success(`Form 2 submitted: ${JSON.stringify(values)}`);
+              }}
+            >
+              <Form.Item name="username" label="Username">
+                <Input placeholder="Username" />
+              </Form.Item>
+
+              <Form.Item name="email" label="Email">
+                <Input type="email" placeholder="Email" />
+              </Form.Item>
+
+              <Button type="primary" htmlType="submit">
+                Submit Form 2
+              </Button>
+            </Form>
+          </Card>
+        </div>
+      </div>
+
+      <div style={{ marginTop: 24, padding: 16, background: "#f5f5f5" }}>
+        <Title level={5}>Expected Results:</Title>
+        <ul>
+          <li>✅ Control panel starts with target "form1"</li>
+          <li>✅ Click "Set Single Value" → Form 1's username field updates to "admin"</li>
+          <li>✅ Click "Set Multiple Values" → Form 1's both fields update</li>
+          <li>✅ Click "Get Form Instance" → Console logs form instance and current values</li>
+          <li>✅ Change target to "form2" in input</li>
+          <li>✅ Click "Set Single Value" → Form 2's username field updates</li>
+          <li>✅ Click "Reset Form" → Target form resets to initialValues</li>
+          <li>✅ Click "Submit Form" → Target form submits programmatically</li>
+          <li>⚠️ Enter invalid formName → Error message shows "Form instance not found"</li>
+        </ul>
+      </div>
+
+      <div style={{ marginTop: 16, padding: 16, background: "#e6f7ff", border: "1px solid #91d5ff" }}>
+        <Title level={5}>Use Cases:</Title>
+        <ul style={{ marginBottom: 0 }}>
+          <li>Global control panels để quản lý multiple forms</li>
+          <li>External triggers (từ API response, WebSocket, events...)</li>
+          <li>Cross-component form manipulation</li>
+          <li>Testing và debugging tools</li>
+          <li>Admin dashboards với form management</li>
+        </ul>
+      </div>
+    </div>
+  );
+}

package/src/test/testFormInstance/TestCase6_FormWithoutWrapper.tsx

@@ -0,0 +1,204 @@
+import { Button, Card, Input, Space, Typography } from "antd";
+import { useState } from "react";
+import Form from "../../providers/Form";
+
+const { Title, Paragraph, Text } = Typography;
+
+/**
+ * TestCase6: Form Without Wrapper Component
+ * 
+ * Mô tả:
+ * - Test use case: Sử dụng form methods mà không cần render Form component
+ * - Form instance có thể được sử dụng độc lập để quản lý state
+ * - Hữu ích cho: custom form implementations, headless forms, non-standard UI
+ * 
+ * Expected Behavior:
+ * - Form instance hoạt động như một state manager
+ * - Có thể set/get values mà không cần Form component
+ * - Có thể dùng Form.useWatch để reactive update
+ * - Warning được log vì không có Form component để validate
+ */
+
+export default function TestCase6_FormWithoutWrapper() {
+  const [form] = Form.useForm<{ 
+    firstName: string; 
+    lastName: string; 
+    age: number;
+  }>();
+
+  // Watch individual fields
+  const firstName = Form.useWatch("firstName", form);
+  const lastName = Form.useWatch("lastName", form);
+  const age = Form.useWatch("age", form);
+
+  const [manualFirstName, setManualFirstName] = useState("");
+  const [manualLastName, setManualLastName] = useState("");
+  const [manualAge, setManualAge] = useState("");
+
+  const handleSetFromManualInputs = () => {
+    form.setFieldValue("firstName", manualFirstName);
+    form.setFieldValue("lastName", manualLastName);
+    form.setFieldValue("age", Number(manualAge) || 0);
+  };
+
+  const handleSetBatch = () => {
+    form.setFieldValues({
+      firstName: "John",
+      lastName: "Doe",
+      age: 30,
+    });
+  };
+
+  const handleGetValues = () => {
+    const values = {
+      firstName: form.getFieldValue("firstName"),
+      lastName: form.getFieldValue("lastName"),
+      age: form.getFieldValue("age"),
+    };
+    console.log("Current values:", values);
+    alert(JSON.stringify(values, null, 2));
+  };
+
+  const handleReset = () => {
+    form.resetFields();
+  };
+
+  const handleSubmit = () => {
+    // Note: Submit sẽ log warning vì không có Form component
+    form.submit();
+    console.log("Submit called (check warning in console)");
+  };
+
+  const fullName = `${firstName || ""} ${lastName || ""}`.trim() || "(empty)";
+
+  return (
+    <div style={{ padding: 24 }}>
+      <Title level={3}>TestCase6: Form Without Wrapper Component</Title>
+      
+      <Paragraph>
+        <Text strong>Use Case:</Text> Sử dụng form instance như state manager mà không cần Form component
+      </Paragraph>
+
+      <Paragraph>
+        <Text type="secondary">
+          Form instance có thể hoạt động độc lập như một state manager. 
+          Hữu ích cho custom form implementations, headless forms, hoặc khi bạn muốn 
+          tự build UI mà không dùng Form component wrapper.
+        </Text>
+      </Paragraph>
+
+      <div style={{ display: "flex", gap: 24 }}>
+        {/* Manual Input Panel */}
+        <Card title="📝 Manual Inputs (Not Connected to Form)" style={{ flex: 1 }}>
+          <Space direction="vertical" style={{ width: "100%" }}>
+            <div>
+              <Text strong>First Name:</Text>
+              <Input
+                value={manualFirstName}
+                onChange={(e) => setManualFirstName(e.target.value)}
+                placeholder="Enter first name"
+              />
+            </div>
+            <div>
+              <Text strong>Last Name:</Text>
+              <Input
+                value={manualLastName}
+                onChange={(e) => setManualLastName(e.target.value)}
+                placeholder="Enter last name"
+              />
+            </div>
+            <div>
+              <Text strong>Age:</Text>
+              <Input
+                type="number"
+                value={manualAge}
+                onChange={(e) => setManualAge(e.target.value)}
+                placeholder="Enter age"
+              />
+            </div>
+            <Button
+              type="primary"
+              onClick={handleSetFromManualInputs}
+              block
+            >
+              Set Form Values
+            </Button>
+          </Space>
+        </Card>
+
+        {/* Display Panel */}
+        <Card title="👁️ Form State (via useWatch)" style={{ flex: 1 }}>
+          <Space direction="vertical" style={{ width: "100%" }}>
+            <div>
+              <Text strong>First Name: </Text>
+              <Text code>{firstName || "(empty)"}</Text>
+            </div>
+            <div>
+              <Text strong>Last Name: </Text>
+              <Text code>{lastName || "(empty)"}</Text>
+            </div>
+            <div>
+              <Text strong>Age: </Text>
+              <Text code>{age ?? "(empty)"}</Text>
+            </div>
+            <div style={{ marginTop: 16, padding: 12, background: "#f0f0f0" }}>
+              <Text strong>Computed Full Name: </Text>
+              <Text style={{ fontSize: 16 }}>{fullName}</Text>
+            </div>
+          </Space>
+        </Card>
+      </div>
+
+      {/* Control Buttons */}
+      <Card title="🎮 Form Controls" style={{ marginTop: 24 }}>
+        <Space wrap>
+          <Button onClick={handleSetBatch} type="primary">
+            Set Batch Values (John Doe, 30)
+          </Button>
+          <Button onClick={handleGetValues}>
+            Get All Values (Alert)
+          </Button>
+          <Button onClick={handleReset} danger>
+            Reset Form
+          </Button>
+          <Button onClick={handleSubmit} type="dashed">
+            Submit Form (Will Log Warning)
+          </Button>
+        </Space>
+
+        <div style={{ marginTop: 16, padding: 12, background: "#fff7e6", border: "1px solid #ffd591" }}>
+          <Text strong>⚠️ Note: </Text>
+          <Text>
+            Không có Form component được render. Form instance hoạt động như pure state manager.
+            Submit sẽ log warning vì không có onFinish handler.
+          </Text>
+        </div>
+      </Card>
+
+      <div style={{ marginTop: 24, padding: 16, background: "#f5f5f5" }}>
+        <Title level={5}>Expected Results:</Title>
+        <ul>
+          <li>✅ Type in manual inputs → Values NOT auto-sync to form state</li>
+          <li>✅ Click "Set Form Values" → Form state updates, display panel shows new values</li>
+          <li>✅ Display panel updates reactively via useWatch</li>
+          <li>✅ Click "Set Batch Values" → All fields update at once</li>
+          <li>✅ Click "Get All Values" → Alert shows current form values</li>
+          <li>✅ Click "Reset Form" → All fields reset (empty)</li>
+          <li>✅ Computed Full Name updates based on firstName + lastName</li>
+          <li>⚠️ Click "Submit Form" → Console shows warning (no Form component mounted)</li>
+        </ul>
+      </div>
+
+      <div style={{ marginTop: 16, padding: 16, background: "#e6f7ff", border: "1px solid #91d5ff" }}>
+        <Title level={5}>Use Cases:</Title>
+        <ul style={{ marginBottom: 0 }}>
+          <li><strong>Headless Forms:</strong> Build custom UI mà không bị constraint bởi Form component</li>
+          <li><strong>State Manager:</strong> Sử dụng như lightweight state manager với validation support</li>
+          <li><strong>Multi-step Forms:</strong> Quản lý form state across multiple steps/pages</li>
+          <li><strong>Form Wizards:</strong> Share form instance between different wizard steps</li>
+          <li><strong>Custom Integrations:</strong> Integrate với third-party UI libraries</li>
+        </ul>
+      </div>
+    </div>
+  );
+}