react-panel-layout 0.6.0 → 0.7.0

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

@@ -0,0 +1,316 @@
+/**
+ * @file Styles for DrawerSwipe demo
+ */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 24px;
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  color: #e9ecef;
+}
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 480px;
+}
+
+.lead {
+  color: #adb5bd;
+  font-size: 14px;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.instructions {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 24px;
+  padding: 16px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.instruction {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 13px;
+  color: #ced4da;
+}
+
+.instructionIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: rgba(102, 126, 234, 0.2);
+  border-radius: 8px;
+  color: #667eea;
+  font-weight: 600;
+}
+
+.drawerContent {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+  padding: 8px;
+  overflow: hidden;
+}
+
+.searchBox {
+  flex-shrink: 0;
+}
+
+.searchInput {
+  width: 100%;
+  padding: 10px 14px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  color: #e9ecef;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.searchInput:focus {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: #667eea;
+}
+
+.searchInput::placeholder {
+  color: #868e96;
+}
+
+.scrollableSection {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.sectionTitle {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #868e96;
+  margin: 0 0 8px 4px;
+  position: sticky;
+  top: 0;
+  background: inherit;
+  padding: 4px 0;
+}
+
+.drawerList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.drawerItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.drawerItem:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.drawerItem small {
+  color: #868e96;
+  font-size: 11px;
+}
+
+.formSection {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  background: rgba(76, 175, 80, 0.08);
+  border-radius: 8px;
+  border: 1px dashed rgba(76, 175, 80, 0.4);
+  position: relative;
+}
+
+.formSection::before {
+  content: "SAFE";
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  color: rgba(76, 175, 80, 0.7);
+}
+
+.textInput {
+  width: 100%;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  color: #e9ecef;
+  font-size: 13px;
+  outline: none;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.textInput:focus {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: #667eea;
+}
+
+.textInput::placeholder {
+  color: #868e96;
+}
+
+.textArea {
+  width: 100%;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  color: #e9ecef;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  resize: vertical;
+  min-height: 60px;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.textArea:focus {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: #667eea;
+}
+
+.textArea::placeholder {
+  color: #868e96;
+}
+
+.swipeHint {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px;
+  margin-top: auto;
+  background: rgba(102, 126, 234, 0.1);
+  border-radius: 8px;
+  color: #667eea;
+  font-size: 13px;
+}
+
+.swipeArrow {
+  animation: swipeHint 1.5s ease-in-out infinite;
+}
+
+@keyframes swipeHint {
+  0%, 100% {
+    transform: translateX(0);
+    opacity: 0.6;
+  }
+  50% {
+    transform: translateX(-8px);
+    opacity: 1;
+  }
+}
+
+.edgeIndicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: linear-gradient(180deg, rgba(102, 126, 234, 0.8) 0%, rgba(102, 126, 234, 0.3) 100%);
+  pointer-events: none;
+  z-index: 100;
+}
+
+.edgeIndicatorLeft {
+  left: 0;
+}
+
+.edgeIndicatorRight {
+  right: 0;
+}
+
+.configPanel {
+  margin-top: 24px;
+  padding: 16px;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.configTitle {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #868e96;
+  margin: 0 0 12px 0;
+}
+
+.configOptions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.configOption {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #ced4da;
+}
+
+.configOption input[type="checkbox"] {
+  accent-color: #667eea;
+}
+
+.anchorSelect {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.anchorButton {
+  padding: 6px 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 6px;
+  color: #ced4da;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.anchorButton:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.anchorButton[data-active="true"] {
+  background: rgba(102, 126, 234, 0.3);
+  border-color: #667eea;
+  color: #fff;
+}

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

@@ -0,0 +1,178 @@
+/**
+ * @file Swipe gestures drawer demo
+ *
+ * Demonstrates edge swipe to open and drag to close functionality.
+ */
+import * as React from "react";
+import { GridLayout } from "../../../../components/grid/GridLayout";
+import { SwipeSafeZone } from "../../../../components/gesture/SwipeSafeZone";
+import type { LayerDefinition, PanelLayoutConfig, DrawerBehavior } from "../../../../types";
+import { DemoButton } from "../../../components/ui/DemoButton";
+import styles from "./DrawerSwipe.module.css";
+
+type AnchorPosition = "left" | "right";
+
+export const DrawerSwipe: React.FC = () => {
+  const [open, setOpen] = React.useState(false);
+  const [anchor, setAnchor] = React.useState<AnchorPosition>("left");
+  const [edgeSwipeOpen, setEdgeSwipeOpen] = React.useState(true);
+  const [swipeClose, setSwipeClose] = React.useState(true);
+
+  const config = React.useMemo<PanelLayoutConfig>(
+    () => ({
+      areas: [["content"]],
+      rows: [{ size: "1fr" }],
+      columns: [{ size: "1fr" }],
+      gap: "0",
+    }),
+    [],
+  );
+
+  const drawerConfig = React.useMemo<DrawerBehavior>(
+    () => ({
+      open,
+      onStateChange: setOpen,
+      dismissible: true,
+      header: { title: "Navigation" },
+      anchor,
+      swipeGestures: {
+        edgeSwipeOpen,
+        swipeClose,
+        edgeWidth: 24,
+        dismissThreshold: 0.3,
+      },
+    }),
+    [open, anchor, edgeSwipeOpen, swipeClose],
+  );
+
+  const layers: LayerDefinition[] = [
+    {
+      id: "content",
+      gridArea: "content",
+      component: (
+        <div className={styles.container}>
+          {/* Edge indicator */}
+          <div
+            className={`${styles.edgeIndicator} ${anchor === "left" ? styles.edgeIndicatorLeft : styles.edgeIndicatorRight}`}
+          />
+
+          <div className={styles.hero}>
+            <DemoButton variant="primary" size="lg" onClick={() => setOpen(true)}>
+              Open drawer
+            </DemoButton>
+            <p className={styles.lead}>
+              This demo shows swipe gesture support for drawers. Swipe from the {anchor} edge to open, or drag the
+              drawer toward the edge to close.
+            </p>
+          </div>
+
+          <div className={styles.instructions}>
+            <div className={styles.instruction}>
+              <span className={styles.instructionIcon}>1</span>
+              <span>Swipe from the {anchor} edge to open the drawer</span>
+            </div>
+            <div className={styles.instruction}>
+              <span className={styles.instructionIcon}>2</span>
+              <span>Drag the drawer content {anchor === "left" ? "left" : "right"} to close</span>
+            </div>
+            <div className={styles.instruction}>
+              <span className={styles.instructionIcon}>3</span>
+              <span>Release before 30% threshold to snap back</span>
+            </div>
+          </div>
+
+          <div className={styles.configPanel}>
+            <h4 className={styles.configTitle}>Configuration</h4>
+            <div className={styles.configOptions}>
+              <label className={styles.configOption}>
+                <input type="checkbox" checked={edgeSwipeOpen} onChange={(e) => setEdgeSwipeOpen(e.target.checked)} />
+                Edge swipe to open
+              </label>
+              <label className={styles.configOption}>
+                <input type="checkbox" checked={swipeClose} onChange={(e) => setSwipeClose(e.target.checked)} />
+                Swipe to close
+              </label>
+            </div>
+            <div className={styles.anchorSelect}>
+              <button
+                type="button"
+                className={styles.anchorButton}
+                data-active={anchor === "left"}
+                onClick={() => setAnchor("left")}
+              >
+                Left
+              </button>
+              <button
+                type="button"
+                className={styles.anchorButton}
+                data-active={anchor === "right"}
+                onClick={() => setAnchor("right")}
+              >
+                Right
+              </button>
+            </div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: "drawer-swipe",
+      component: (
+        <div className={styles.drawerContent}>
+          {/* Search input */}
+          <div className={styles.searchBox}>
+            <input
+              type="text"
+              placeholder="Search..."
+              className={styles.searchInput}
+            />
+          </div>
+
+          {/* Scrollable list */}
+          <div className={styles.scrollableSection}>
+            <h4 className={styles.sectionTitle}>Navigation</h4>
+            <ul className={styles.drawerList}>
+              {Array.from({ length: 20 }, (_, i) => (
+                <li key={i} className={styles.drawerItem}>
+                  <span>Item {i + 1}</span>
+                  <small>Description for item {i + 1}</small>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Form section - wrapped in SwipeSafeZone */}
+          <SwipeSafeZone className={styles.formSection}>
+            <h4 className={styles.sectionTitle}>Quick Note (Safe Zone)</h4>
+            <input
+              type="text"
+              placeholder="Title"
+              className={styles.textInput}
+            />
+            <textarea
+              placeholder="Write your note here..."
+              className={styles.textArea}
+              rows={3}
+            />
+            <DemoButton variant="secondary" size="sm" onClick={() => {}}>
+              Save Note
+            </DemoButton>
+          </SwipeSafeZone>
+
+          {/* Swipe hint */}
+          <div className={styles.swipeHint}>
+            <span className={styles.swipeArrow}>{anchor === "left" ? "\u2190" : "\u2192"}</span>
+            Swipe to close
+          </div>
+        </div>
+      ),
+      drawer: drawerConfig,
+      position: anchor === "left" ? { left: 0 } : { right: 0 },
+      width: 300,
+      height: "100%",
+      zIndex: 1200,
+    },
+  ];
+
+  return <GridLayout config={config} layers={layers} />;
+};

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

@@ -0,0 +1,17 @@
+/**
+ * @file Drawer - Reveal Mode page
+ */
+import * as React from "react";
+import { DrawerReveal } from "../components/DrawerReveal";
+import DrawerRevealSource from "../components/DrawerReveal.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage title="Drawer / Reveal Mode" code={DrawerRevealSource} codeTitle="DrawerReveal.tsx" previewHeight={520}>
+      <DrawerReveal />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/Drawer/reveal-fullscreen/index.tsx

@@ -0,0 +1,135 @@
+/**
+ * @file Drawer - Reveal Mode Fullscreen Demo
+ *
+ * Standalone page demonstrating reveal mode with body-level transform.
+ * No SingleSamplePage wrapper - this is the entire page.
+ */
+import * as React from "react";
+import { Link } from "react-router";
+import { GridLayout } from "../../../../components/grid/GridLayout";
+import type { LayerDefinition, PanelLayoutConfig } from "../../../../types";
+import { FiArrowLeft, FiHome, FiSearch, FiBell, FiMail, FiUser, FiSettings } from "react-icons/fi";
+import styles from "./styles.module.css";
+
+const Page: 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}>
+          <header className={styles.header}>
+            <button type="button" className={styles.menuButton} onClick={() => setOpen(true)}>
+              <span className={styles.menuIcon} />
+            </button>
+            <h1 className={styles.title}>Reveal Mode Demo</h1>
+          </header>
+
+          <main className={styles.main}>
+            <div className={styles.card}>
+              <h2>Full-screen Reveal Mode</h2>
+              <p>
+                This page demonstrates the reveal animation mode without any wrapper.
+                The entire page slides to reveal the drawer behind it.
+              </p>
+              <p>
+                Try swiping from the left edge, or tap the menu button above.
+              </p>
+            </div>
+
+            <div className={styles.card}>
+              <h3>How it works</h3>
+              <ul className={styles.list}>
+                <li>Drawer is positioned behind the main content</li>
+                <li>Body element receives transform during animation</li>
+                <li>Swipe gestures work from the left edge</li>
+              </ul>
+            </div>
+
+            <Link to="/components/drawer/reveal" className={styles.backLink}>
+              <FiArrowLeft />
+              Back to Drawer demos
+            </Link>
+          </main>
+        </div>
+      ),
+    },
+    {
+      id: "drawer-reveal-fullscreen",
+      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}>
+            <Link to="/" className={styles.navItem}>
+              <FiHome className={styles.navIcon} />
+              Home
+            </Link>
+            <a href="#" className={styles.navItem}>
+              <FiSearch className={styles.navIcon} />
+              Explore
+            </a>
+            <a href="#" className={styles.navItem}>
+              <FiBell className={styles.navIcon} />
+              Notifications
+            </a>
+            <a href="#" className={styles.navItem}>
+              <FiMail className={styles.navIcon} />
+              Messages
+            </a>
+            <a href="#" className={styles.navItem}>
+              <FiUser className={styles.navIcon} />
+              Profile
+            </a>
+            <a href="#" className={styles.navItem}>
+              <FiSettings className={styles.navIcon} />
+              Settings
+            </a>
+          </nav>
+
+          <button type="button" className={styles.closeButton} onClick={() => setOpen(false)}>
+            Close Menu
+          </button>
+        </div>
+      ),
+      drawer: {
+        open,
+        onStateChange: setOpen,
+        dismissible: true,
+        animationMode: "reveal",
+        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} root />;
+};
+
+export default Page;