react-panel-layout 0.6.0 → 0.7.0

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/components/DrawerBasics.module.css

@@ -1,4 +1,4 @@
-.container {
+.wrapper {
   position: relative;
   width: 100%;
   height: 100%;
@@ -9,6 +9,11 @@
   box-shadow: var(--rpl-demo-shadow-md);
 }
 
+.container {
+  width: 100%;
+  height: 100%;
+}
+
 .hero {
   display: grid;
   place-items: center;

package/src/demo/pages/Drawer/components/DrawerBasics.tsx

@@ -1,5 +1,5 @@
 /**
- * @file Basic drawer layout sample (default Drawer styling)
+ * @file Basic drawer layout sample (default Drawer styling with swipe gestures)
  */
 import * as React from "react";
 import { GridLayout } from "../../../../components/grid/GridLayout";
@@ -31,8 +31,7 @@ export const DrawerBasics: React.FC = () => {
               Open drawer
             </DemoButton>
             <p className={styles.lead}>
-              This sample uses the default Drawer styling. The drawer anchors to the left, covers the page surface, and
-              uses the built-in header/close affordance.
+              Swipe from the left edge to open the drawer, or drag the drawer left to close it.
             </p>
           </div>
         </div>
@@ -63,7 +62,14 @@ export const DrawerBasics: React.FC = () => {
         open,
         onStateChange: setOpen,
         dismissible: true,
+        inline: true,
         header: { title: "Navigation" },
+        swipeGestures: {
+          edgeSwipeOpen: true,
+          swipeClose: true,
+          edgeWidth: 24,
+          dismissThreshold: 0.3,
+        },
       },
       position: { left: 0 },
       width: 320,
@@ -72,5 +78,9 @@ export const DrawerBasics: React.FC = () => {
     },
   ];
 
-  return <GridLayout config={config} layers={layers} />;
+  return (
+    <div className={styles.wrapper}>
+      <GridLayout config={config} layers={layers} />
+    </div>
+  );
 };

package/src/demo/pages/Drawer/components/DrawerReveal.module.css

@@ -0,0 +1,157 @@
+/**
+ * @file Styles for DrawerReveal demo
+ */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 24px;
+  background: #fff;
+  color: #0f1419;
+}
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 480px;
+}
+
+.lead {
+  color: #536471;
+  font-size: 14px;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.instructions {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 24px;
+  padding: 16px;
+  background: #f7f9f9;
+  border-radius: 16px;
+}
+
+.instruction {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 14px;
+  color: #536471;
+}
+
+.instructionIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: #1d9bf0;
+  border-radius: 50%;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.fullscreenLink {
+  display: inline-block;
+  margin-top: 12px;
+  padding: 10px 20px;
+  background: #1d9bf0;
+  color: #fff;
+  border-radius: 9999px;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 14px;
+  transition: background 0.15s ease;
+}
+
+.fullscreenLink:hover {
+  background: #1a8cd8;
+}
+
+.drawerContent {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 16px;
+  background: #fff;
+  border-right: 1px solid #eff3f4;
+}
+
+.profile {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 0;
+  border-bottom: 1px solid #eff3f4;
+  margin-bottom: 8px;
+}
+
+.avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: #1d9bf0;
+  border-radius: 50%;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.profileInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.profileName {
+  font-size: 15px;
+  font-weight: 700;
+  color: #0f1419;
+}
+
+.profileHandle {
+  font-size: 13px;
+  color: #536471;
+}
+
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  padding: 8px 0;
+}
+
+.navItem {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px;
+  border-radius: 9999px;
+  color: #0f1419;
+  font-size: 20px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: background 0.2s ease;
+}
+
+.navItem:hover {
+  background: #e7e7e8;
+}
+
+.navIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  font-size: 14px;
+  font-weight: 700;
+}

package/src/demo/pages/Drawer/components/DrawerReveal.tsx

@@ -0,0 +1,128 @@
+/**
+ * @file Reveal mode drawer demo
+ *
+ * Demonstrates the reveal animation mode where content slides away
+ * to reveal the drawer behind it (like X/Twitter's navigation menu).
+ */
+import * as React from "react";
+import { Link } from "react-router";
+import { GridLayout } from "../../../../components/grid/GridLayout";
+import type { LayerDefinition, PanelLayoutConfig } from "../../../../types";
+import { DemoButton } from "../../../components/ui/DemoButton";
+import styles from "./DrawerReveal.module.css";
+
+export const DrawerReveal: React.FC = () => {
+  const [open, setOpen] = React.useState(false);
+
+  const config = React.useMemo<PanelLayoutConfig>(
+    () => ({
+      areas: [["content"]],
+      rows: [{ size: "1fr" }],
+      columns: [{ size: "1fr" }],
+      gap: "0",
+    }),
+    [],
+  );
+
+  const layers: LayerDefinition[] = [
+    {
+      id: "content",
+      gridArea: "content",
+      component: (
+        <div className={styles.container}>
+          <div className={styles.hero}>
+            <DemoButton variant="primary" size="lg" onClick={() => setOpen(true)}>
+              Open drawer
+            </DemoButton>
+            <p className={styles.lead}>
+              This demo shows the reveal animation mode with <code>inline: true</code>. The container slides to reveal
+              the drawer behind it, similar to X/Twitter's navigation menu.
+            </p>
+            <Link to="/fullscreen/drawer-reveal" className={styles.fullscreenLink} target="_blank">
+              View Fullscreen Demo
+            </Link>
+          </div>
+
+          <div className={styles.instructions}>
+            <div className={styles.instruction}>
+              <span className={styles.instructionIcon}>1</span>
+              <span>Swipe from the left edge to open</span>
+            </div>
+            <div className={styles.instruction}>
+              <span className={styles.instructionIcon}>2</span>
+              <span>Content slides right to reveal drawer</span>
+            </div>
+            <div className={styles.instruction}>
+              <span className={styles.instructionIcon}>3</span>
+              <span>Swipe left on content to close</span>
+            </div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: "drawer-reveal",
+      component: (
+        <div className={styles.drawerContent}>
+          <div className={styles.profile}>
+            <div className={styles.avatar}>U</div>
+            <div className={styles.profileInfo}>
+              <div className={styles.profileName}>User Name</div>
+              <div className={styles.profileHandle}>@username</div>
+            </div>
+          </div>
+
+          <nav className={styles.nav}>
+            <a href="#" className={styles.navItem}>
+              <span className={styles.navIcon}>H</span>
+              Home
+            </a>
+            <a href="#" className={styles.navItem}>
+              <span className={styles.navIcon}>S</span>
+              Search
+            </a>
+            <a href="#" className={styles.navItem}>
+              <span className={styles.navIcon}>N</span>
+              Notifications
+            </a>
+            <a href="#" className={styles.navItem}>
+              <span className={styles.navIcon}>M</span>
+              Messages
+            </a>
+            <a href="#" className={styles.navItem}>
+              <span className={styles.navIcon}>P</span>
+              Profile
+            </a>
+            <a href="#" className={styles.navItem}>
+              <span className={styles.navIcon}>C</span>
+              Settings
+            </a>
+          </nav>
+
+          <DemoButton variant="secondary" size="md" onClick={() => setOpen(false)}>
+            Close
+          </DemoButton>
+        </div>
+      ),
+      drawer: {
+        open,
+        onStateChange: setOpen,
+        dismissible: true,
+        animationMode: "reveal",
+        inline: true,
+        swipeGestures: {
+          edgeSwipeOpen: true,
+          swipeClose: true,
+          edgeWidth: 24,
+          dismissThreshold: 0.3,
+        },
+      },
+      position: { left: 0 },
+      width: 280,
+      height: "100%",
+      zIndex: 1200,
+    },
+  ];
+
+  return <GridLayout config={config} layers={layers} />;
+};