react-panel-layout 0.5.2 → 0.6.1

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

@@ -0,0 +1,199 @@
+/**
+ * @file Drawer menu layout sample using DrawerLayers + GridLayout
+ */
+import * as React from "react";
+import { GridLayout } from "../../../../components/grid/GridLayout";
+import type { LayerDefinition, PanelLayoutConfig } from "../../../../types";
+import { DemoButton } from "../../../components/ui/DemoButton";
+import styles from "./DrawerMenuLayout.module.css";
+
+const DrawerContent: React.FC = () => {
+  return (
+    <div className={styles.drawer}>
+      <div className={styles.drawerHeader}>
+        <div>
+          <div className={styles.drawerTitle}>Workspace menu</div>
+          <div className={styles.drawerMeta}>Projects, links, and quick actions</div>
+        </div>
+        <span className={styles.navTag}>New</span>
+      </div>
+
+      <div className={styles.drawerSection}>
+        <div className={styles.sectionLabel}>Projects</div>
+        <ul className={styles.navList}>
+          <li className={`${styles.navItem} ${styles.navItemActive}`}>
+            Product design
+            <span className={styles.navTag}>Live</span>
+          </li>
+          <li className={styles.navItem}>
+            Marketing site
+            <span className={styles.navTag}>QA</span>
+          </li>
+          <li className={styles.navItem}>
+            Mobile UI kit
+            <span className={styles.navTag}>Beta</span>
+          </li>
+        </ul>
+      </div>
+
+      <div className={styles.drawerSection}>
+        <div className={styles.sectionLabel}>Shortcuts</div>
+        <ul className={styles.navList}>
+          <li className={styles.navItem}>Components library</li>
+          <li className={styles.navItem}>Tokens & theming</li>
+          <li className={styles.navItem}>Changelog</li>
+        </ul>
+      </div>
+
+      <div className={styles.drawerFooter}>
+        <strong>Invite reviewers</strong>
+        Share the workspace with reviewers and track approvals in one place.
+      </div>
+    </div>
+  );
+};
+
+export const DrawerMenuLayout: React.FC = () => {
+  const [menuOpen, setMenuOpen] = React.useState(false);
+
+  const openMenu = React.useCallback(() => {
+    setMenuOpen(true);
+  }, []);
+
+  const config = React.useMemo<PanelLayoutConfig>(
+    () => ({
+      areas: [["surface"]],
+      rows: [{ size: "1fr" }],
+      columns: [{ size: "1fr" }],
+      gap: "0",
+    }),
+    [],
+  );
+
+  const layers: LayerDefinition[] = [
+    {
+      id: "surface",
+      gridArea: "surface",
+      component: (
+        <div className={styles.shell}>
+          <header className={styles.topbar}>
+            <div className={styles.topbarLeft}>
+              <button className={styles.menuButton} onClick={openMenu} type="button">
+                <span className={styles.menuIcon}>☰</span>
+                Menu
+              </button>
+              <span className={styles.brand}>Orion Workbench</span>
+              <div className={styles.breadcrumbs}>
+                <span>Workspace</span>
+                <span>/</span>
+                <span className={styles.crumbActive}>Overview</span>
+              </div>
+            </div>
+            <div className={styles.topActions}>
+              <DemoButton variant="ghost" size="sm">Share</DemoButton>
+              <DemoButton variant="primary" size="sm">Publish</DemoButton>
+            </div>
+          </header>
+
+          <div className={styles.body}>
+            <div className={styles.main}>
+              <div className={styles.mainHeader}>
+                <div className={styles.titleGroup}>
+                  <h3>Product Overview</h3>
+                  <p>Monitor progress across platforms and hand-offs in one place.</p>
+                </div>
+                <DemoButton variant="outline" size="sm">Export</DemoButton>
+              </div>
+
+              <div className={styles.cardGrid}>
+                <div className={styles.card}>
+                  <p className={styles.cardTitle}>Active screens</p>
+                  <p className={styles.cardValue}>128</p>
+                </div>
+                <div className={styles.card}>
+                  <p className={styles.cardTitle}>Components synced</p>
+                  <p className={styles.cardValue}>482</p>
+                </div>
+                <div className={styles.card}>
+                  <p className={styles.cardTitle}>Open hand-offs</p>
+                  <p className={styles.cardValue}>18</p>
+                </div>
+              </div>
+
+              <div className={styles.timeline}>
+                <div className={styles.timelineItem}>
+                  <span className={styles.badge}>1</span>
+                  <div className={styles.timelineText}>
+                    <span className={styles.timelineTitle}>Navigation updated</span>
+                    <span className={styles.timelineMeta}>2m ago • Figma</span>
+                  </div>
+                </div>
+                <div className={styles.timelineItem}>
+                  <span className={styles.badge}>2</span>
+                  <div className={styles.timelineText}>
+                    <span className={styles.timelineTitle}>Tokens synced to iOS</span>
+                    <span className={styles.timelineMeta}>18m ago • Mobile</span>
+                  </div>
+                </div>
+                <div className={styles.timelineItem}>
+                  <span className={styles.badge}>3</span>
+                  <div className={styles.timelineText}>
+                    <span className={styles.timelineTitle}>Chart variants added</span>
+                    <span className={styles.timelineMeta}>1h ago • Charts</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <aside className={styles.aside}>
+              <div className={styles.asideHeader}>
+                <div>
+                  <div>Review queue</div>
+                  <div style={{ color: "#cbd5e1", fontSize: "12px" }}>Hand-offs pending approval</div>
+                </div>
+                <span className={styles.chip}>6</span>
+              </div>
+
+              <div className={styles.list}>
+                <div className={styles.listItem}>
+                  Billing dashboard
+                  <small>UI / Desktop</small>
+                </div>
+                <div className={styles.listItem}>
+                  Session replay
+                  <small>UX copy</small>
+                </div>
+                <div className={styles.listItem}>
+                  Settings drawer
+                  <small>Mobile</small>
+                </div>
+              </div>
+            </aside>
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: "drawer-menu",
+      component: <DrawerContent />,
+      drawer: {
+        open: menuOpen,
+        onStateChange: setMenuOpen,
+        dismissible: true,
+        chrome: false,
+        inline: true,
+        ariaLabel: "Workspace Menu",
+      },
+      position: { left: 0 },
+      width: 340,
+      height: "100%",
+      zIndex: 1200,
+    },
+  ];
+
+  return (
+    <div className={styles.container}>
+      <GridLayout config={config} layers={layers} />
+    </div>
+  );
+};

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/menu/index.tsx

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