react-panel-layout 0.5.2 → 0.6.0

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

@@ -0,0 +1,76 @@
+/**
+ * @file Basic drawer layout sample (default Drawer styling)
+ */
+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 "./DrawerBasics.module.css";
+
+export const DrawerBasics: 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 sample uses the default Drawer styling. The drawer anchors to the left, covers the page surface, and
+              uses the built-in header/close affordance.
+            </p>
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: "drawer-basics",
+      component: (
+        <div className={styles.drawerContent}>
+          <h3 style={{ margin: 0 }}>Navigation</h3>
+          <ul className={styles.drawerList}>
+            <li className={styles.drawerItem}>
+              Dashboard <small>Overview</small>
+            </li>
+            <li className={styles.drawerItem}>
+              Projects <small>8 active</small>
+            </li>
+            <li className={styles.drawerItem}>
+              Team <small>23 members</small>
+            </li>
+          </ul>
+          <DemoButton variant="secondary" size="md" onClick={() => setOpen(false)}>
+            Close drawer
+          </DemoButton>
+        </div>
+      ),
+      drawer: {
+        open,
+        onStateChange: setOpen,
+        dismissible: true,
+        header: { title: "Navigation" },
+      },
+      position: { left: 0 },
+      width: 320,
+      height: "100%",
+      zIndex: 1200,
+    },
+  ];
+
+  return <GridLayout config={config} layers={layers} />;
+};

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

@@ -0,0 +1,332 @@
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.shell {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--rpl-demo-bg);
+  border: 1px solid var(--rpl-demo-sidebar-border);
+  border-radius: var(--rpl-demo-radius-xl);
+  box-shadow: var(--rpl-demo-shadow-lg);
+  overflow: hidden;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--rpl-demo-space-md) var(--rpl-demo-space-lg);
+  background: linear-gradient(120deg, #0f172a 0%, #111827 40%, #0b1221 100%);
+  color: #e2e8f0;
+  gap: var(--rpl-demo-space-md);
+}
+
+.topbarLeft {
+  display: flex;
+  align-items: center;
+  gap: var(--rpl-demo-space-sm);
+  flex-wrap: wrap;
+}
+
+.brand {
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: #cbd5e1;
+  font-size: var(--rpl-demo-font-size-sm);
+}
+
+.crumbActive {
+  color: #fff;
+  font-weight: 600;
+}
+
+.topActions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.menuButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.55rem 0.9rem;
+  background: #0ea5e9;
+  color: #fff;
+  border: none;
+  border-radius: 9999px;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.22);
+  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+
+.menuButton:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 12px 26px rgba(14, 165, 233, 0.28);
+  background: #0284c7;
+}
+
+.menuIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.35rem;
+  height: 1.35rem;
+  border-radius: 0.5rem;
+  background: rgba(255, 255, 255, 0.14);
+}
+
+.body {
+  flex: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
+  gap: var(--rpl-demo-space-lg);
+  padding: var(--rpl-demo-space-lg);
+  min-height: 0;
+  background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
+}
+
+.main {
+  background: #ffffff;
+  border: 1px solid var(--rpl-demo-sidebar-border);
+  border-radius: var(--rpl-demo-radius-lg);
+  padding: var(--rpl-demo-space-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--rpl-demo-space-lg);
+  box-shadow: var(--rpl-demo-shadow-md);
+  min-height: 0;
+}
+
+.mainHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rpl-demo-space-md);
+  flex-wrap: wrap;
+}
+
+.titleGroup h3 {
+  margin: 0;
+  color: #0f172a;
+}
+
+.titleGroup p {
+  margin: 0.25rem 0 0;
+  color: #475569;
+}
+
+.cardGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: var(--rpl-demo-space-md);
+}
+
+.card {
+  background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  border-radius: var(--rpl-demo-radius-md);
+  padding: var(--rpl-demo-space-md);
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
+}
+
+.cardTitle {
+  margin: 0 0 0.35rem;
+  color: #475569;
+  font-size: var(--rpl-demo-font-size-sm);
+}
+
+.cardValue {
+  margin: 0;
+  font-size: 1.6rem;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.timeline {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.timelineItem {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.65rem 0.75rem;
+  border-radius: var(--rpl-demo-radius-md);
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  background: #f8fafc;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.75rem;
+  background: rgba(14, 165, 233, 0.12);
+  color: #0ea5e9;
+  font-weight: 700;
+}
+
+.timelineText {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.timelineTitle {
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.timelineMeta {
+  color: #64748b;
+  font-size: var(--rpl-demo-font-size-xs);
+}
+
+.aside {
+  background: #0f172a;
+  border-radius: var(--rpl-demo-radius-lg);
+  padding: var(--rpl-demo-space-lg);
+  color: #e2e8f0;
+  display: grid;
+  gap: var(--rpl-demo-space-md);
+  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
+}
+
+.asideHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.chip {
+  padding: 0.35rem 0.75rem;
+  border-radius: 9999px;
+  background: rgba(52, 211, 153, 0.14);
+  color: #bbf7d0;
+  border: 1px solid rgba(52, 211, 153, 0.4);
+  font-size: var(--rpl-demo-font-size-xs);
+}
+
+.list {
+  display: grid;
+  gap: 0.65rem;
+}
+
+.listItem {
+  padding: 0.7rem 0.75rem;
+  border-radius: var(--rpl-demo-radius-md);
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #e2e8f0;
+}
+
+.listItem small {
+  color: #cbd5e1;
+}
+
+.drawer {
+  height: 100%;
+  padding: var(--rpl-demo-space-lg);
+  background: #0f172a;
+  color: #e2e8f0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--rpl-demo-space-lg);
+}
+
+.drawerHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.drawerTitle {
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.drawerMeta {
+  color: #cbd5e1;
+  font-size: var(--rpl-demo-font-size-xs);
+}
+
+.drawerSection {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.sectionLabel {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #94a3b8;
+  font-size: var(--rpl-demo-font-size-xs);
+}
+
+.navList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 0.5rem;
+}
+
+.navItem {
+  padding: 0.75rem 0.85rem;
+  border-radius: var(--rpl-demo-radius-md);
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #e2e8f0;
+}
+
+.navItemActive {
+  background: linear-gradient(145deg, rgba(59, 130, 246, 0.18), rgba(14, 165, 233, 0.18));
+  border-color: rgba(59, 130, 246, 0.4);
+  box-shadow: 0 12px 30px rgba(59, 130, 246, 0.2);
+}
+
+.navTag {
+  padding: 0.2rem 0.55rem;
+  border-radius: 9999px;
+  background: rgba(15, 23, 42, 0.45);
+  color: #bfdbfe;
+  border: 1px solid rgba(59, 130, 246, 0.35);
+  font-size: var(--rpl-demo-font-size-xs);
+}
+
+.drawerFooter {
+  margin-top: auto;
+  padding: var(--rpl-demo-space-md);
+  border-radius: var(--rpl-demo-radius-lg);
+  background: linear-gradient(145deg, rgba(59, 130, 246, 0.22), rgba(236, 72, 153, 0.22));
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #f8fafc;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
+}
+
+.drawerFooter strong {
+  display: block;
+  margin-bottom: 0.35rem;
+}

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/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;