react-panel-layout 0.5.2 → 0.6.1

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

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

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

@@ -0,0 +1,125 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 1.5rem;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.intro {
+  text-align: center;
+}
+
+.intro h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.intro p {
+  margin: 0;
+  color: #666;
+  font-size: 0.875rem;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.5rem;
+  flex: 1;
+  min-height: 0;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #fff;
+}
+
+.cardHeader {
+  padding: 1rem;
+  border-bottom: 1px solid #e0e0e0;
+  background: #f8f9fa;
+}
+
+.cardHeader h3 {
+  margin: 0 0 0.25rem;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.cardHeader p {
+  margin: 0;
+  font-size: 0.75rem;
+  color: #666;
+}
+
+.cardBody {
+  flex: 1;
+  position: relative;
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fafafa;
+}
+
+.drawerContent {
+  padding: 1rem;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.drawerContent h4 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.drawerContent ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.drawerContent li {
+  padding: 0.5rem;
+  background: #f0f0f0;
+  border-radius: 4px;
+  font-size: 0.8rem;
+}
+
+.badge {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.65rem;
+  font-weight: 600;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.badgeNone {
+  background: #e0e0e0;
+  color: #666;
+}
+
+.badgeCss {
+  background: #e3f2fd;
+  color: #1565c0;
+}
+
+.badgeViewTransition {
+  background: #f3e5f5;
+  color: #7b1fa2;
+}

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

@@ -0,0 +1,118 @@
+/**
+ * @file Drawer animation modes comparison demo
+ */
+import * as React from "react";
+import { GridLayout } from "../../../../components/grid/GridLayout";
+import type { LayerDefinition, PanelLayoutConfig, DrawerBehavior } from "../../../../types";
+import { DemoButton } from "../../../components/ui/DemoButton";
+import styles from "./DrawerAnimations.module.css";
+
+type TransitionMode = DrawerBehavior["transitionMode"];
+
+type DrawerCardProps = {
+  mode: TransitionMode;
+  label: string;
+  description: string;
+  badgeClass: string;
+};
+
+const DrawerContent: React.FC<{ onClose: () => void }> = ({ onClose }) => (
+  <div className={styles.drawerContent}>
+    <h4>Sample Menu</h4>
+    <ul>
+      <li>Dashboard</li>
+      <li>Settings</li>
+      <li>Profile</li>
+    </ul>
+    <DemoButton variant="secondary" size="sm" onClick={onClose}>
+      Close
+    </DemoButton>
+  </div>
+);
+
+const DrawerCard: React.FC<DrawerCardProps> = ({ mode, label, description, badgeClass }) => {
+  const [open, setOpen] = React.useState(false);
+
+  const config = React.useMemo<PanelLayoutConfig>(
+    () => ({
+      areas: [["main"]],
+      rows: [{ size: "1fr" }],
+      columns: [{ size: "1fr" }],
+      gap: "0",
+    }),
+    [],
+  );
+
+  const layers = React.useMemo<LayerDefinition[]>(
+    () => [
+      {
+        id: "main",
+        gridArea: "main",
+        component: (
+          <DemoButton variant="primary" size="md" onClick={() => setOpen(true)}>
+            Open
+          </DemoButton>
+        ),
+      },
+      {
+        id: `drawer-${mode}`,
+        component: <DrawerContent onClose={() => setOpen(false)} />,
+        drawer: {
+          open,
+          onStateChange: setOpen,
+          dismissible: true,
+          transitionMode: mode,
+          transitionDuration: "300ms",
+          transitionEasing: "cubic-bezier(0.22, 1, 0.36, 1)",
+          header: { title: `${label} Drawer` },
+          inline: true,
+        },
+        position: { left: 0 },
+        width: 180,
+        height: "100%",
+        zIndex: 10,
+      },
+    ],
+    [mode, label, open],
+  );
+
+  return (
+    <div className={styles.card}>
+      <div className={styles.cardHeader}>
+        <h3>
+          {label} <span className={`${styles.badge} ${badgeClass}`}>{mode}</span>
+        </h3>
+        <p>{description}</p>
+      </div>
+      <div className={styles.cardBody}>
+        <GridLayout config={config} layers={layers} />
+      </div>
+    </div>
+  );
+};
+
+export const DrawerAnimations: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.intro}>
+        <h2>Drawer Transition Modes</h2>
+        <p>Compare different animation strategies for drawer open/close transitions.</p>
+      </div>
+
+      <div className={styles.grid}>
+        <DrawerCard
+          mode="none"
+          label="No Animation"
+          description="Instant show/hide without transitions."
+          badgeClass={styles.badgeNone}
+        />
+        <DrawerCard
+          mode="css"
+          label="CSS Transition"
+          description="Smooth transform animation via CSS."
+          badgeClass={styles.badgeCss}
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,55 @@
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: var(--rpl-demo-radius-lg);
+  border: 1px solid var(--rpl-demo-sidebar-border);
+  background: #f8fafc;
+  box-shadow: var(--rpl-demo-shadow-md);
+}
+
+.hero {
+  display: grid;
+  place-items: center;
+  height: 100%;
+  gap: var(--rpl-demo-space-md);
+  color: #0f172a;
+}
+
+.lead {
+  margin: 0;
+  max-width: 520px;
+  text-align: center;
+  color: #475569;
+  line-height: 1.5;
+}
+
+.drawerContent {
+  padding: var(--rpl-demo-space-lg);
+  display: grid;
+  gap: var(--rpl-demo-space-md);
+}
+
+.drawerList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 0.5rem;
+}
+
+.drawerItem {
+  padding: 0.75rem 0.9rem;
+  border-radius: var(--rpl-demo-radius-md);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: #ffffff;
+  color: #0f172a;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.drawerItem small {
+  color: #475569;
+}

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;
+}