react-panel-layout 0.5.2 → 0.6.1

package/src/modules/dialog/AlertDialog.spec.tsx

@@ -0,0 +1,387 @@
+/**
+ * @file Tests for AlertDialog component
+ */
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { AlertDialog } from "./AlertDialog";
+
+type CallTracker = {
+  calls: ReadonlyArray<ReadonlyArray<unknown>>;
+  fn: (...args: ReadonlyArray<unknown>) => void;
+};
+
+const createCallTracker = (): CallTracker => {
+  const calls: Array<ReadonlyArray<unknown>> = [];
+  const fn = (...args: ReadonlyArray<unknown>): void => {
+    calls.push(args);
+  };
+  return { calls, fn };
+};
+
+describe("AlertDialog", () => {
+  const originalShowModal = HTMLDialogElement.prototype.showModal;
+  const originalClose = HTMLDialogElement.prototype.close;
+
+  beforeEach(() => {
+    HTMLDialogElement.prototype.showModal = function (this: HTMLDialogElement) {
+      this.setAttribute("open", "");
+    };
+    HTMLDialogElement.prototype.close = function (this: HTMLDialogElement) {
+      this.removeAttribute("open");
+    };
+  });
+
+  afterEach(() => {
+    HTMLDialogElement.prototype.showModal = originalShowModal;
+    HTMLDialogElement.prototype.close = originalClose;
+    document.body.style.overflow = "";
+    document.body.style.paddingRight = "";
+  });
+
+  describe("alert type", () => {
+    it("should render message", () => {
+      render(
+        <AlertDialog
+          type="alert"
+          visible={true}
+          message="This is an alert message"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      expect(screen.getByText("This is an alert message")).toBeInTheDocument();
+    });
+
+    it("should render title when provided", () => {
+      render(
+        <AlertDialog
+          type="alert"
+          visible={true}
+          title="Alert Title"
+          message="Message"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      expect(screen.getByText("Alert Title")).toBeInTheDocument();
+    });
+
+    it("should only show OK button", () => {
+      render(
+        <AlertDialog type="alert" visible={true} message="Message" onConfirm={() => {}} onCancel={() => {}} />,
+      );
+
+      expect(screen.getByRole("button", { name: "OK" })).toBeInTheDocument();
+      expect(screen.queryByRole("button", { name: "Cancel" })).not.toBeInTheDocument();
+    });
+
+    it("should call onConfirm when OK is clicked", () => {
+      const onConfirm = createCallTracker();
+      render(
+        <AlertDialog type="alert" visible={true} message="Message" onConfirm={onConfirm.fn} onCancel={() => {}} />,
+      );
+
+      fireEvent.click(screen.getByRole("button", { name: "OK" }));
+
+      expect(onConfirm.calls).toHaveLength(1);
+    });
+
+    it("should use custom confirmLabel", () => {
+      render(
+        <AlertDialog
+          type="alert"
+          visible={true}
+          message="Message"
+          confirmLabel="Got it"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      expect(screen.getByRole("button", { name: "Got it" })).toBeInTheDocument();
+    });
+  });
+
+  describe("confirm type", () => {
+    it("should show OK and Cancel buttons", () => {
+      render(
+        <AlertDialog type="confirm" visible={true} message="Are you sure?" onConfirm={() => {}} onCancel={() => {}} />,
+      );
+
+      expect(screen.getByRole("button", { name: "OK" })).toBeInTheDocument();
+      expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
+    });
+
+    it("should call onConfirm when OK is clicked", () => {
+      const onConfirm = createCallTracker();
+      render(
+        <AlertDialog type="confirm" visible={true} message="Are you sure?" onConfirm={onConfirm.fn} onCancel={() => {}} />,
+      );
+
+      fireEvent.click(screen.getByRole("button", { name: "OK" }));
+
+      expect(onConfirm.calls).toHaveLength(1);
+    });
+
+    it("should call onCancel when Cancel is clicked", () => {
+      const onCancel = createCallTracker();
+      render(
+        <AlertDialog type="confirm" visible={true} message="Are you sure?" onConfirm={() => {}} onCancel={onCancel.fn} />,
+      );
+
+      fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+
+      expect(onCancel.calls).toHaveLength(1);
+    });
+
+    it("should call onCancel when backdrop is clicked", () => {
+      const onCancel = createCallTracker();
+      render(
+        <AlertDialog
+          type="confirm"
+          visible={true}
+          message="Are you sure?"
+          onConfirm={() => {}}
+          onCancel={onCancel.fn}
+        />,
+      );
+
+      const dialog = document.querySelector("dialog");
+      fireEvent.click(dialog!);
+
+      expect(onCancel.calls).toHaveLength(1);
+    });
+
+    it("should use custom button labels", () => {
+      render(
+        <AlertDialog
+          type="confirm"
+          visible={true}
+          message="Delete?"
+          confirmLabel="Delete"
+          cancelLabel="Keep"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      expect(screen.getByRole("button", { name: "Delete" })).toBeInTheDocument();
+      expect(screen.getByRole("button", { name: "Keep" })).toBeInTheDocument();
+    });
+  });
+
+  describe("prompt type", () => {
+    it("should show input field", () => {
+      render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      expect(screen.getByRole("textbox")).toBeInTheDocument();
+    });
+
+    it("should show placeholder", () => {
+      render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          placeholder="John Doe"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      expect(screen.getByRole("textbox")).toHaveAttribute("placeholder", "John Doe");
+    });
+
+    it("should show default value", () => {
+      render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          defaultValue="Initial Value"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      expect(screen.getByRole("textbox")).toHaveValue("Initial Value");
+    });
+
+    it("should update input value on change", () => {
+      render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      const input = screen.getByRole("textbox") as HTMLInputElement;
+      fireEvent.change(input, { target: { value: "Test Value" } });
+
+      expect(input.value).toBe("Test Value");
+    });
+
+    it("should call onConfirm with input value when OK is clicked", () => {
+      const onConfirm = createCallTracker();
+      render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          defaultValue="Hello"
+          onConfirm={onConfirm.fn}
+          onCancel={() => {}}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole("button", { name: "OK" }));
+
+      expect(onConfirm.calls).toHaveLength(1);
+      expect(onConfirm.calls[0]?.[0]).toBe("Hello");
+    });
+
+    it("should call onConfirm with changed input value", () => {
+      const onConfirm = createCallTracker();
+      render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          onConfirm={onConfirm.fn}
+          onCancel={() => {}}
+        />,
+      );
+
+      const input = screen.getByRole("textbox");
+      fireEvent.change(input, { target: { value: "Changed Value" } });
+      fireEvent.click(screen.getByRole("button", { name: "OK" }));
+
+      expect(onConfirm.calls).toHaveLength(1);
+      expect(onConfirm.calls[0]?.[0]).toBe("Changed Value");
+    });
+
+    it("should call onConfirm when Enter is pressed in input", () => {
+      const onConfirm = createCallTracker();
+      render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          defaultValue="Test"
+          onConfirm={onConfirm.fn}
+          onCancel={() => {}}
+        />,
+      );
+
+      const input = screen.getByRole("textbox");
+      fireEvent.keyDown(input, { key: "Enter" });
+
+      expect(onConfirm.calls).toHaveLength(1);
+      expect(onConfirm.calls[0]?.[0]).toBe("Test");
+    });
+
+    it("should call onCancel when Cancel is clicked", () => {
+      const onCancel = createCallTracker();
+      render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          onConfirm={() => {}}
+          onCancel={onCancel.fn}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+
+      expect(onCancel.calls).toHaveLength(1);
+    });
+
+    it("should support password input type", () => {
+      render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter password:"
+          inputType="password"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      const input = screen.getByLabelText("Input");
+      expect(input).toHaveAttribute("type", "password");
+    });
+
+    it("should focus input when dialog opens", async () => {
+      render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      const input = screen.getByRole("textbox");
+      await waitFor(() => {
+        expect(document.activeElement).toBe(input);
+      });
+    });
+
+    it("should reset input value when dialog reopens", () => {
+      const { rerender } = render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          defaultValue="Initial"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      const input = screen.getByRole("textbox") as HTMLInputElement;
+      fireEvent.change(input, { target: { value: "Changed" } });
+      expect(input.value).toBe("Changed");
+
+      // Close and reopen
+      rerender(
+        <AlertDialog
+          type="prompt"
+          visible={false}
+          message="Enter your name:"
+          defaultValue="Initial"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      rerender(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          defaultValue="Initial"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      expect(input.value).toBe("Initial");
+    });
+  });
+});

package/src/modules/dialog/AlertDialog.tsx

@@ -0,0 +1,221 @@
+/**
+ * @file AlertDialog component for alert, confirm, and prompt dialogs
+ */
+import * as React from "react";
+import type { AlertDialogProps } from "./types";
+import { DialogContainer } from "./DialogContainer";
+import {
+  FloatingPanelFrame,
+  FloatingPanelHeader,
+  FloatingPanelTitle,
+  FloatingPanelContent,
+} from "../../components/paneling/FloatingPanelFrame";
+import {
+  ALERT_DIALOG_WIDTH,
+  ALERT_DIALOG_BUTTON_GAP,
+  ALERT_DIALOG_ACTIONS_PADDING,
+  ALERT_DIALOG_MESSAGE_PADDING,
+  ALERT_DIALOG_INPUT_MARGIN_TOP,
+  FLOATING_PANEL_HEADER_PADDING_Y,
+  FLOATING_PANEL_HEADER_PADDING_X,
+  COLOR_PRIMARY,
+  COLOR_NODE_EDITOR_BORDER,
+} from "../../constants/styles";
+
+const alertDialogStyle: React.CSSProperties = {
+  width: ALERT_DIALOG_WIDTH,
+  maxWidth: "90vw",
+};
+
+const messageStyle: React.CSSProperties = {
+  padding: ALERT_DIALOG_MESSAGE_PADDING,
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word",
+};
+
+const actionsStyle: React.CSSProperties = {
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: ALERT_DIALOG_BUTTON_GAP,
+  padding: ALERT_DIALOG_ACTIONS_PADDING,
+  borderTop: `1px solid ${COLOR_NODE_EDITOR_BORDER}`,
+};
+
+const inputStyle: React.CSSProperties = {
+  width: "100%",
+  padding: "8px 12px",
+  marginTop: ALERT_DIALOG_INPUT_MARGIN_TOP,
+  border: `1px solid ${COLOR_NODE_EDITOR_BORDER}`,
+  borderRadius: "4px",
+  fontSize: "14px",
+  boxSizing: "border-box",
+};
+
+const buttonBaseStyle: React.CSSProperties = {
+  padding: "8px 16px",
+  borderRadius: "4px",
+  fontSize: "14px",
+  fontWeight: 500,
+  cursor: "pointer",
+  border: "none",
+  transition: "background-color 0.15s ease",
+};
+
+const primaryButtonStyle: React.CSSProperties = {
+  ...buttonBaseStyle,
+  backgroundColor: COLOR_PRIMARY,
+  color: "#fff",
+};
+
+const secondaryButtonStyle: React.CSSProperties = {
+  ...buttonBaseStyle,
+  backgroundColor: "transparent",
+  border: `1px solid ${COLOR_NODE_EDITOR_BORDER}`,
+  color: "inherit",
+};
+
+/**
+ * Internal component for alert, confirm, and prompt dialogs
+ */
+export const AlertDialog: React.FC<AlertDialogProps> = ({
+  type,
+  visible,
+  title,
+  message,
+  confirmLabel = "OK",
+  cancelLabel = "Cancel",
+  placeholder,
+  defaultValue = "",
+  inputType = "text",
+  onConfirm,
+  onCancel,
+  swipeDismissible,
+}) => {
+  // Default swipeDismissible: false for alert (shouldn't be accidentally dismissed), true otherwise
+  const effectiveSwipeDismissible = swipeDismissible ?? (type !== "alert");
+  const [inputValue, setInputValue] = React.useState(defaultValue);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  // Reset input value when dialog opens
+  React.useEffect(() => {
+    if (visible) {
+      setInputValue(defaultValue);
+    }
+  }, [visible, defaultValue]);
+
+  // Focus input when prompt dialog opens
+  React.useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    if (type !== "prompt") {
+      return;
+    }
+    if (!inputRef.current) {
+      return;
+    }
+    // Small delay to ensure dialog is rendered
+    const timeoutId = setTimeout(() => {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }, 50);
+    return () => clearTimeout(timeoutId);
+  }, [visible, type]);
+
+  const handleConfirm = React.useCallback(() => {
+    if (type === "prompt") {
+      onConfirm(inputValue);
+    } else {
+      onConfirm();
+    }
+  }, [type, inputValue, onConfirm]);
+
+  const handleInputChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+  }, []);
+
+  const handleInputKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        handleConfirm();
+      }
+    },
+    [handleConfirm],
+  );
+
+  // Prevent input events from bubbling up
+  const handleInputPointerDown = React.useCallback((event: React.PointerEvent) => {
+    event.stopPropagation();
+  }, []);
+
+  const computeDialogLabel = (): string => {
+    if (title) {
+      return title;
+    }
+    if (type === "prompt") {
+      return "Prompt";
+    }
+    if (type === "confirm") {
+      return "Confirm";
+    }
+    return "Alert";
+  };
+  const dialogLabel = computeDialogLabel();
+
+  return (
+    <DialogContainer
+      visible={visible}
+      onClose={onCancel}
+      position="center"
+      dismissible={type !== "alert"}
+      closeOnEscape={true}
+      ariaLabel={dialogLabel}
+      swipeDismissible={effectiveSwipeDismissible}
+    >
+      <div style={alertDialogStyle}>
+        <FloatingPanelFrame>
+          <React.Activity mode={title ? "visible" : "hidden"}>
+            <FloatingPanelHeader
+              style={{
+                padding: `${FLOATING_PANEL_HEADER_PADDING_Y} ${FLOATING_PANEL_HEADER_PADDING_X}`,
+              }}
+            >
+              <FloatingPanelTitle>{title}</FloatingPanelTitle>
+            </FloatingPanelHeader>
+          </React.Activity>
+          <FloatingPanelContent style={{ padding: 0 }}>
+            <div style={messageStyle}>
+              {message}
+              <React.Activity mode={type === "prompt" ? "visible" : "hidden"}>
+                <input
+                  ref={inputRef}
+                  type={inputType}
+                  value={inputValue}
+                  onChange={handleInputChange}
+                  onKeyDown={handleInputKeyDown}
+                  onPointerDown={handleInputPointerDown}
+                  placeholder={placeholder}
+                  style={inputStyle}
+                  aria-label={placeholder ?? "Input"}
+                />
+              </React.Activity>
+            </div>
+            <div style={actionsStyle}>
+              <React.Activity mode={type !== "alert" ? "visible" : "hidden"}>
+                <button type="button" style={secondaryButtonStyle} onClick={onCancel}>
+                  {cancelLabel}
+                </button>
+              </React.Activity>
+              <button type="button" style={primaryButtonStyle} onClick={handleConfirm}>
+                {confirmLabel}
+              </button>
+            </div>
+          </FloatingPanelContent>
+        </FloatingPanelFrame>
+      </div>
+    </DialogContainer>
+  );
+};
+
+AlertDialog.displayName = "AlertDialog";