react-panel-layout 0.5.2 → 0.6.1

package/src/demo/pages/Dialog/components/CustomAlertDialogDemo.tsx

@@ -0,0 +1,219 @@
+/**
+ * @file Custom AlertDialog demo - shows how to replace the default dialog component
+ */
+import * as React from "react";
+import { useDialog } from "../../../../modules/dialog/useDialog";
+import type { AlertDialogProps } from "../../../../modules/dialog/types";
+import { DialogContainer } from "../../../../modules/dialog/DialogContainer";
+import { DemoButton } from "../../../components/ui/DemoButton";
+import styles from "./DialogDemos.module.css";
+
+/**
+ * Custom AlertDialog with a different visual style
+ */
+const CustomAlertDialog: React.FC<AlertDialogProps> = ({
+  type,
+  visible,
+  title,
+  message,
+  confirmLabel = "OK",
+  cancelLabel = "Cancel",
+  placeholder,
+  defaultValue = "",
+  inputType = "text",
+  onConfirm,
+  onCancel,
+}) => {
+  const [inputValue, setInputValue] = React.useState(defaultValue);
+
+  React.useEffect(() => {
+    if (visible) {
+      setInputValue(defaultValue);
+    }
+  }, [visible, defaultValue]);
+
+  const handleConfirm = () => {
+    if (type === "prompt") {
+      onConfirm(inputValue);
+    } else {
+      onConfirm();
+    }
+  };
+
+  const containerStyle: React.CSSProperties = {
+    background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+    borderRadius: "16px",
+    padding: "24px",
+    minWidth: "320px",
+    maxWidth: "90vw",
+    color: "#fff",
+    boxShadow: "0 20px 60px rgba(0, 0, 0, 0.3)",
+  };
+
+  const titleStyle: React.CSSProperties = {
+    fontSize: "20px",
+    fontWeight: 700,
+    marginBottom: "12px",
+  };
+
+  const messageStyle: React.CSSProperties = {
+    fontSize: "15px",
+    lineHeight: 1.6,
+    opacity: 0.9,
+    marginBottom: "20px",
+  };
+
+  const inputStyle: React.CSSProperties = {
+    width: "100%",
+    padding: "12px 16px",
+    border: "2px solid rgba(255, 255, 255, 0.3)",
+    borderRadius: "8px",
+    fontSize: "15px",
+    background: "rgba(255, 255, 255, 0.15)",
+    color: "#fff",
+    marginBottom: "20px",
+    boxSizing: "border-box",
+  };
+
+  const buttonRowStyle: React.CSSProperties = {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "12px",
+  };
+
+  const buttonBaseStyle: React.CSSProperties = {
+    padding: "10px 20px",
+    borderRadius: "8px",
+    fontSize: "14px",
+    fontWeight: 600,
+    cursor: "pointer",
+    border: "none",
+    transition: "transform 0.15s ease, opacity 0.15s ease",
+  };
+
+  const primaryButtonStyle: React.CSSProperties = {
+    ...buttonBaseStyle,
+    background: "#fff",
+    color: "#667eea",
+  };
+
+  const secondaryButtonStyle: React.CSSProperties = {
+    ...buttonBaseStyle,
+    background: "rgba(255, 255, 255, 0.2)",
+    color: "#fff",
+    border: "1px solid rgba(255, 255, 255, 0.3)",
+  };
+
+  return (
+    <DialogContainer
+      visible={visible}
+      onClose={onCancel}
+      position="center"
+      dismissible={type !== "alert"}
+      closeOnEscape={true}
+      ariaLabel={title ?? (type === "prompt" ? "Prompt" : type === "confirm" ? "Confirm" : "Alert")}
+    >
+      <div style={containerStyle}>
+        {title ? <div style={titleStyle}>{title}</div> : null}
+        <div style={messageStyle}>{message}</div>
+        <React.Activity mode={type === "prompt" ? "visible" : "hidden"}>
+          <input
+            type={inputType}
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                handleConfirm();
+              }
+            }}
+            placeholder={placeholder}
+            style={inputStyle}
+            autoFocus
+          />
+        </React.Activity>
+        <div style={buttonRowStyle}>
+          <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>
+      </div>
+    </DialogContainer>
+  );
+};
+
+export const CustomAlertDialogDemo: React.FC = () => {
+  const { alert, confirm, prompt, Outlet } = useDialog({
+    alertDialogComponent: CustomAlertDialog,
+  });
+  const [lastResult, setLastResult] = React.useState<string>("");
+
+  const handleAlert = async () => {
+    await alert({
+      title: "Custom Alert",
+      message: "This is a custom-styled alert dialog with gradient background!",
+      okLabel: "Awesome!",
+    });
+    setLastResult("alert: acknowledged");
+  };
+
+  const handleConfirm = async () => {
+    const result = await confirm({
+      title: "Custom Confirm",
+      message: "Do you like this custom dialog style?",
+      confirmLabel: "Love it!",
+      cancelLabel: "Not really",
+    });
+    setLastResult(`confirm: ${result ? "loved it" : "not really"}`);
+  };
+
+  const handlePrompt = async () => {
+    const result = await prompt({
+      title: "Custom Prompt",
+      message: "What's your favorite color?",
+      placeholder: "Enter a color...",
+      defaultValue: "",
+    });
+    setLastResult(`prompt: ${result === null ? "cancelled" : `"${result}"`}`);
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.section}>
+        <h3>Custom Alert Dialog Component</h3>
+        <p>
+          Replace the default AlertDialog with your own component by passing
+          <code style={{ background: "#f0f0f0", padding: "2px 6px", borderRadius: "4px", margin: "0 4px" }}>
+            alertDialogComponent
+          </code>
+          to useDialog.
+        </p>
+      </div>
+
+      <div className={styles.section}>
+        <h3>Gradient Style Dialogs</h3>
+        <p>These dialogs use a custom component with gradient background.</p>
+        <div className={styles.buttonGroup}>
+          <DemoButton variant="primary" size="md" onClick={handleAlert}>
+            Show Custom Alert
+          </DemoButton>
+          <DemoButton variant="primary" size="md" onClick={handleConfirm}>
+            Show Custom Confirm
+          </DemoButton>
+          <DemoButton variant="primary" size="md" onClick={handlePrompt}>
+            Show Custom Prompt
+          </DemoButton>
+        </div>
+      </div>
+
+      {lastResult ? <div className={styles.resultBox}>Last result: {lastResult}</div> : null}
+
+      <Outlet />
+    </div>
+  );
+};

package/src/demo/pages/Dialog/components/DialogDemos.module.css

@@ -0,0 +1,77 @@
+.container {
+  padding: 24px;
+  min-height: 400px;
+}
+
+.section {
+  margin-bottom: 24px;
+}
+
+.section h3 {
+  margin: 0 0 8px 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.section p {
+  margin: 0 0 16px 0;
+  color: #666;
+}
+
+.modalContent {
+  min-width: 300px;
+}
+
+.modalContent p {
+  margin: 0 0 16px 0;
+  color: #666;
+  line-height: 1.5;
+}
+
+.formGroup {
+  margin-bottom: 16px;
+}
+
+.formGroup label {
+  display: block;
+  margin-bottom: 4px;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.input {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+.input:focus {
+  outline: none;
+  border-color: #2196f3;
+  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
+}
+
+.buttonRow {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 24px;
+}
+
+.resultBox {
+  margin-top: 16px;
+  padding: 12px;
+  background: #f5f5f5;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 13px;
+}
+
+.buttonGroup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}

package/src/demo/pages/Dialog/components/ModalBasics.tsx

@@ -0,0 +1,45 @@
+/**
+ * @file Modal basics demo
+ */
+import * as React from "react";
+import { Modal } from "../../../../modules/dialog/Modal";
+import { DemoButton } from "../../../components/ui/DemoButton";
+import styles from "./DialogDemos.module.css";
+
+export const ModalBasics: React.FC = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.section}>
+        <h3>Basic Modal</h3>
+        <p>A simple modal dialog centered on the screen. Click outside or press Escape to close.</p>
+        <DemoButton variant="primary" size="md" onClick={() => setIsOpen(true)}>
+          Open Modal
+        </DemoButton>
+      </div>
+
+      <Modal visible={isOpen} onClose={() => setIsOpen(false)} header={{ title: "Settings" }}>
+        <div className={styles.modalContent}>
+          <p>This is a modal dialog. It uses the native HTML dialog element to ensure it appears above all other content.</p>
+          <div className={styles.formGroup}>
+            <label>Username</label>
+            <input type="text" placeholder="Enter username" className={styles.input} />
+          </div>
+          <div className={styles.formGroup}>
+            <label>Email</label>
+            <input type="email" placeholder="Enter email" className={styles.input} />
+          </div>
+          <div className={styles.buttonRow}>
+            <DemoButton variant="secondary" size="md" onClick={() => setIsOpen(false)}>
+              Cancel
+            </DemoButton>
+            <DemoButton variant="primary" size="md" onClick={() => setIsOpen(false)}>
+              Save
+            </DemoButton>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+};

package/src/demo/pages/Dialog/components/SwipeDialogDemo.module.css

@@ -0,0 +1,77 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px;
+}
+
+.section {
+  margin-bottom: 24px;
+}
+
+.label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-secondary, #6b7280);
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.buttonGroup {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.modalContent {
+  padding: 24px;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.scrollableContent {
+  padding: 24px;
+  height: 400px;
+  overflow: auto;
+}
+
+.infoBox {
+  padding: 16px;
+  background-color: rgba(59, 130, 246, 0.1);
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.actionSheet {
+  width: 100%;
+  max-width: 400px;
+  background-color: var(--color-bg-primary, #fff);
+  border-radius: 16px 16px 0 0;
+  overflow: hidden;
+}
+
+.actionItem {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 20px;
+  border: none;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: transparent;
+  font-size: 16px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.actionItem:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.actionIcon {
+  font-size: 20px;
+}

package/src/demo/pages/Dialog/components/SwipeDialogDemo.tsx

@@ -0,0 +1,181 @@
+/**
+ * @file SwipeDialogDemo - Demonstration of swipeable dialog functionality
+ */
+import * as React from "react";
+import { Modal } from "../../../../modules/dialog/Modal.js";
+import { DialogContainer } from "../../../../modules/dialog/DialogContainer.js";
+import {
+  FloatingPanelFrame,
+  FloatingPanelHeader,
+  FloatingPanelTitle,
+  FloatingPanelContent,
+} from "../../../../components/paneling/FloatingPanelFrame.js";
+import { DemoButton } from "../../../components/ui/DemoButton.js";
+import styles from "./SwipeDialogDemo.module.css";
+
+/**
+ * Demo component for swipeable dialogs
+ */
+export const SwipeDialogDemo: React.FC = () => {
+  const [bottomModal, setBottomModal] = React.useState(false);
+  const [centerModal, setCenterModal] = React.useState(false);
+  const [scrollableModal, setScrollableModal] = React.useState(false);
+  const [customSheet, setCustomSheet] = React.useState(false);
+
+  return (
+    <div className={styles.container}>
+      {/* Bottom Sheet Style */}
+      <div className={styles.section}>
+        <div className={styles.label}>Bottom Sheet (Swipe Down)</div>
+        <div className={styles.buttonGroup}>
+          <DemoButton onClick={() => setBottomModal(true)}>
+            Open Bottom Sheet
+          </DemoButton>
+        </div>
+      </div>
+
+      {/* Center Modal with Swipe */}
+      <div className={styles.section}>
+        <div className={styles.label}>Center Modal (Swipe Down)</div>
+        <div className={styles.buttonGroup}>
+          <DemoButton variant="secondary" onClick={() => setCenterModal(true)}>
+            Open Center Modal
+          </DemoButton>
+        </div>
+      </div>
+
+      {/* Scrollable Content */}
+      <div className={styles.section}>
+        <div className={styles.label}>With Scrollable Content</div>
+        <div className={styles.buttonGroup}>
+          <DemoButton variant="secondary" onClick={() => setScrollableModal(true)}>
+            Open Scrollable Modal
+          </DemoButton>
+        </div>
+      </div>
+
+      {/* Custom Action Sheet */}
+      <div className={styles.section}>
+        <div className={styles.label}>Custom Action Sheet</div>
+        <div className={styles.buttonGroup}>
+          <DemoButton onClick={() => setCustomSheet(true)}>
+            Open Action Sheet
+          </DemoButton>
+        </div>
+      </div>
+
+      {/* Bottom Sheet Modal */}
+      <Modal
+        visible={bottomModal}
+        onClose={() => setBottomModal(false)}
+        transitionMode="swipe"
+        openDirection="bottom"
+        swipeDismissible={true}
+        header={{ title: "Bottom Sheet" }}
+        width={400}
+      >
+        <div className={styles.modalContent}>
+          <div className={styles.infoBox}>
+            Swipe down to close this modal. The animation has two phases: translate movement followed by a scale-down
+            effect.
+          </div>
+          <p>This modal opens from the bottom and can be dismissed by swiping down.</p>
+          <DemoButton variant="secondary" onClick={() => setBottomModal(false)}>
+            Close
+          </DemoButton>
+        </div>
+      </Modal>
+
+      {/* Center Modal */}
+      <Modal
+        visible={centerModal}
+        onClose={() => setCenterModal(false)}
+        transitionMode="swipe"
+        openDirection="center"
+        swipeDismissible={true}
+        header={{ title: "Swipeable Modal" }}
+        width={400}
+      >
+        <div className={styles.modalContent}>
+          <div className={styles.infoBox}>
+            Even centered modals can be dismissed by swiping down. The threshold is 30% of the container height or a
+            quick flick.
+          </div>
+          <p>Try swiping this modal down to dismiss it.</p>
+          <DemoButton variant="secondary" onClick={() => setCenterModal(false)}>
+            Close
+          </DemoButton>
+        </div>
+      </Modal>
+
+      {/* Scrollable Content Modal */}
+      <Modal
+        visible={scrollableModal}
+        onClose={() => setScrollableModal(false)}
+        transitionMode="swipe"
+        openDirection="bottom"
+        swipeDismissible={true}
+        header={{ title: "Scrollable Content" }}
+        width={400}
+        height={500}
+      >
+        <div className={styles.scrollableContent}>
+          <div className={styles.infoBox} style={{ marginBottom: "16px" }}>
+            Swipe gestures are detected only when NOT scrolling. Try scrolling the content below, then swipe down from
+            the header area.
+          </div>
+          {Array.from({ length: 20 }).map((_, i) => (
+            <p key={i} style={{ marginBottom: "12px" }}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua. Item {i + 1}.
+            </p>
+          ))}
+        </div>
+      </Modal>
+
+      {/* Custom Action Sheet */}
+      <DialogContainer
+        visible={customSheet}
+        onClose={() => setCustomSheet(false)}
+        transitionMode="swipe"
+        openDirection="bottom"
+        swipeDismissible={true}
+      >
+        <div className={styles.actionSheet}>
+          <FloatingPanelFrame>
+            <FloatingPanelHeader>
+              <FloatingPanelTitle>Actions</FloatingPanelTitle>
+            </FloatingPanelHeader>
+            <FloatingPanelContent style={{ padding: 0 }}>
+              <ActionItem icon="📷" label="Take Photo" onClick={() => setCustomSheet(false)} />
+              <ActionItem icon="🖼️" label="Choose from Library" onClick={() => setCustomSheet(false)} />
+              <ActionItem icon="📁" label="Browse Files" onClick={() => setCustomSheet(false)} />
+              <ActionItem icon="❌" label="Cancel" onClick={() => setCustomSheet(false)} isDestructive />
+            </FloatingPanelContent>
+          </FloatingPanelFrame>
+        </div>
+      </DialogContainer>
+    </div>
+  );
+};
+
+type ActionItemProps = {
+  icon: string;
+  label: string;
+  onClick: () => void;
+  isDestructive?: boolean;
+};
+
+const ActionItem: React.FC<ActionItemProps> = ({ icon, label, onClick, isDestructive }) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={styles.actionItem}
+      style={{ color: isDestructive ? "#ef4444" : undefined }}
+    >
+      <span className={styles.actionIcon}>{icon}</span>
+      <span>{label}</span>
+    </button>
+  );
+};

package/src/demo/pages/Dialog/custom-alert/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * @file Dialog - Custom Alert page
+ */
+import * as React from "react";
+import { CustomAlertDialogDemo } from "../components/CustomAlertDialogDemo";
+import CustomAlertDialogDemoSource from "../components/CustomAlertDialogDemo.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage
+      title="Dialog / Custom Alert Component"
+      code={CustomAlertDialogDemoSource}
+      codeTitle="CustomAlertDialogDemo.tsx"
+      previewHeight={520}
+    >
+      <CustomAlertDialogDemo />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/Dialog/modal/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * @file Dialog - Modal page
+ */
+import * as React from "react";
+import { ModalBasics } from "../components/ModalBasics";
+import ModalBasicsSource from "../components/ModalBasics.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage title="Dialog / Modal" code={ModalBasicsSource} codeTitle="ModalBasics.tsx" previewHeight={480}>
+      <ModalBasics />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/Dialog/swipe/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * @file Dialog - Swipe Dismiss page
+ */
+import * as React from "react";
+import { SwipeDialogDemo } from "../components/SwipeDialogDemo.js";
+import SwipeDialogDemoSource from "../components/SwipeDialogDemo.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout/index.js";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage
+      title="Dialog / Swipe Dismiss"
+      code={SwipeDialogDemoSource}
+      codeTitle="SwipeDialogDemo.tsx"
+      previewHeight={600}
+    >
+      <SwipeDialogDemo />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/Drawer/animations/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * @file Drawer - Animations comparison page
+ */
+import * as React from "react";
+import { DrawerAnimations } from "../components/DrawerAnimations";
+import DrawerAnimationsSource from "../components/DrawerAnimations.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage
+      title="Drawer / Animations"
+      code={DrawerAnimationsSource}
+      codeTitle="DrawerAnimations.tsx"
+      previewHeight={480}
+    >
+      <DrawerAnimations />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;