react-panel-layout 0.6.0 → 0.6.1

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;