docs: create-and-check-documentation

src/components/TextField.tsx

@@ -2,15 +2,22 @@ import {useState} from "react";
 import styles from "./TextField.module.css";
 
 /**
- * A text input element in our own style that calls `setValue` at every keystroke.
+ * A styled text input that updates its value **in real time** at every keystroke.
  *
- * @param {Object} props - The component props.
- * @param {string} props.value - The value of the text input.
- * @param {(value: string) => void} props.setValue - A function that sets the value of the text input.
- * @param {string} [props.placeholder] - The placeholder text for the text input.
- * @param {string} [props.className] - Additional CSS classes for the text input.
- * @param {string} [props.id] - The ID of the text input.
- * @param {string} [props.ariaLabel] - The ARIA label for the text input.
+ * Automatically toggles between read-only and editable modes to integrate with
+ * drag-based UIs (like React Flow). Calls `onCommit` when editing is completed.
+ *
+ * @param props - Component properties.
+ * @param props.value - The current text input value.
+ * @param props.setValue - Callback invoked on every keystroke to update the value.
+ * @param props.onCommit - Callback invoked when editing is finalized (on blur or Enter).
+ * @param props.placeholder - Optional placeholder text displayed when the input is empty.
+ * @param props.className - Optional additional CSS class names.
+ * @param props.id - Optional unique HTML `id` for the input element.
+ * @param props.ariaLabel - Optional ARIA label for accessibility.
+ * @param props.invalid - If true, applies error styling to indicate invalid input.
+ *
+ * @returns A styled `<input>` element that updates its value in real time.
  */
 export function RealtimeTextField({
   value = "",
@@ -31,14 +38,19 @@ export function RealtimeTextField({
   ariaLabel?: string,
   invalid?: boolean,
 }) {
+  /** Tracks whether the input is currently read-only (for drag compatibility). */
   const [readOnly, setReadOnly] = useState(true);
 
+  /** Finalizes editing and calls `onCommit` when the user exits the field. */
   const updateData  = () => {
     setReadOnly(true);
     onCommit();
   };
 
-  const updateOnEnter = (event: React.KeyboardEvent<HTMLInputElement>) => { if (event.key === "Enter") (event.target as HTMLInputElement).blur(); };
+  /** Handles the Enter key — commits the input by triggering a blur event. */
+  const updateOnEnter = (event: React.KeyboardEvent<HTMLInputElement>) => { 
+    if (event.key === "Enter") 
+      (event.target as HTMLInputElement).blur(); };
 
   return <input
     type={"text"}
@@ -57,15 +69,22 @@ export function RealtimeTextField({
 }
 
 /**
- * A text input element in our own style that calls `setValue` once the user presses the enter key or clicks outside the input.
+ * A styled text input that updates its value **only on commit** (when the user
+ * presses Enter or clicks outside the input).
  *
- * @param {Object} props - The component props.
- * @param {string} props.value - The value of the text input.
- * @param {(value: string) => void} props.setValue - A function that sets the value of the text input.
- * @param {string} [props.placeholder] - The placeholder text for the text input.
- * @param {string} [props.className] - Additional CSS classes for the text input.
- * @param {string} [props.id] - The ID of the text input.
- * @param {string} [props.ariaLabel] - The ARIA label for the text input.
+ * Internally wraps `RealtimeTextField` and buffers input changes locally,
+ * calling `setValue` only once editing is complete.
+ *
+ * @param props - Component properties.
+ * @param props.value - The current text input value.
+ * @param props.setValue - Callback invoked when the user commits the change.
+ * @param props.placeholder - Optional placeholder text displayed when the input is empty.
+ * @param props.className - Optional additional CSS class names.
+ * @param props.id - Optional unique HTML `id` for the input element.
+ * @param props.ariaLabel - Optional ARIA label for accessibility.
+ * @param props.invalid - If true, applies error styling to indicate invalid input.
+ *
+ * @returns A styled `<input>` element that updates its parent state only on commit.
  */
 export function TextField({
   value = "",