react-panel-layout 0.5.1 → 0.6.0

package/src/demo/Layout.module.css

@@ -0,0 +1,258 @@
+.sidebar {
+  height: 100%;
+  background: var(--rpl-demo-sidebar-bg);
+  color: var(--rpl-demo-text-primary);
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  border-right: 1px solid var(--rpl-demo-sidebar-border);
+  font-family: var(--rpl-demo-font-family);
+  font-size: var(--rpl-demo-font-size-sm);
+}
+
+.sidebarHeader {
+  padding: var(--rpl-demo-space-lg) var(--rpl-demo-space-lg) var(--rpl-demo-space-md);
+  border-bottom: none;
+  margin-bottom: var(--rpl-demo-space-sm);
+}
+
+.sidebarTitle {
+  margin: 0;
+  font-size: var(--rpl-demo-font-size-lg);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--rpl-demo-text-primary);
+  background: var(--rpl-demo-gradient-text);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  display: inline-block;
+}
+
+.sidebarSubtitle {
+  margin: 4px 0 0;
+  font-size: var(--rpl-demo-font-size-xs);
+  color: var(--rpl-demo-text-secondary);
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  opacity: 0.8;
+}
+
+.nav {
+  flex: 1;
+  padding: 0 var(--rpl-demo-space-md);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.navCategory {
+  margin: 4px 0;
+}
+
+.navCategorySummary {
+  padding: 8px 12px;
+  font-size: var(--rpl-demo-font-size-sm);
+  font-weight: 600;
+  color: var(--rpl-demo-text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  list-style: none;
+  border-radius: var(--rpl-demo-radius-md);
+  transition: var(--rpl-demo-transition);
+}
+
+.navCategorySummary:hover {
+  color: var(--rpl-demo-text-primary);
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.navCategorySummary::-webkit-details-marker {
+  display: none;
+}
+
+.navArrow {
+  color: var(--rpl-demo-text-tertiary);
+  transition: transform 0.2s ease;
+  font-size: 16px;
+}
+
+.navCategory[open] .navArrow {
+  transform: rotate(90deg);
+}
+
+.navGroupChildren {
+  padding-left: 0;
+  margin-top: 2px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.navLink {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  color: var(--rpl-demo-text-secondary);
+  text-decoration: none;
+  font-size: var(--rpl-demo-font-size-sm);
+  background: transparent;
+  border-radius: var(--rpl-demo-radius-md);
+  transition: var(--rpl-demo-transition);
+  font-weight: 500;
+}
+
+.navLink:hover {
+  background: rgba(0, 0, 0, 0.03);
+  color: var(--rpl-demo-text-primary);
+}
+
+.navLink.active {
+  background: rgba(0, 122, 255, 0.08);
+  color: var(--rpl-demo-accent);
+  font-weight: 600;
+}
+
+.navIcon {
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  opacity: 0.8;
+}
+
+.navLink.active .navIcon {
+  opacity: 1;
+}
+
+.navChildLink {
+  display: block;
+  padding: 8px 12px 8px 40px;
+  color: var(--rpl-demo-text-secondary);
+  text-decoration: none;
+  font-size: var(--rpl-demo-font-size-sm);
+  background: transparent;
+  border-radius: var(--rpl-demo-radius-md);
+  transition: var(--rpl-demo-transition);
+  font-weight: 400;
+}
+
+.navChildLink:hover {
+  background: rgba(0, 0, 0, 0.03);
+  color: var(--rpl-demo-text-primary);
+}
+
+.navChildLink.active {
+  color: var(--rpl-demo-accent);
+  background: rgba(0, 122, 255, 0.08);
+  font-weight: 500;
+}
+
+.sidebarFooter {
+  padding: var(--rpl-demo-space-lg);
+  border-top: 1px solid var(--rpl-demo-sidebar-border);
+  font-size: var(--rpl-demo-font-size-xs);
+  color: var(--rpl-demo-text-tertiary);
+  text-align: center;
+}
+
+/**
+ * Stacked (mobile) layout wrapper
+ */
+.stackedMainContent {
+
+  background: var(--rpl-demo-bg);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.stackedContentArea {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding-top: 54px;
+}
+
+.mobileHeader {
+  display: none;
+  align-items: center;
+  gap: var(--rpl-demo-space-sm);
+  padding: var(--rpl-demo-space-sm) var(--rpl-demo-space-md);
+  border-bottom: 1px solid var(--rpl-demo-sidebar-border);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--rpl-demo-bg);
+}
+
+.stackedMobileHeader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+}
+
+.mobileNavButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--rpl-demo-sidebar-border);
+  border-radius: var(--rpl-demo-radius-md);
+  padding: 8px 12px;
+  background: var(--rpl-demo-control-bg);
+  color: var(--rpl-demo-text-primary);
+  cursor: pointer;
+  transition: var(--rpl-demo-transition);
+}
+
+.mobileNavButton:hover {
+  background: var(--rpl-demo-control-bg-hover);
+}
+
+.mobileNavButton:active {
+  background: var(--rpl-demo-control-bg-active);
+}
+
+.mobileNavLabel {
+  font-weight: 600;
+  font-size: var(--rpl-demo-font-size-sm);
+}
+
+.mobileTitle {
+  margin: 0;
+  font-size: var(--rpl-demo-font-size-lg);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+@media (max-width: 960px) {
+  .sidebar {
+    height: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--rpl-demo-sidebar-border);
+  }
+
+  .sidebarHeader {
+    padding: var(--rpl-demo-space-md) var(--rpl-demo-space-md) var(--rpl-demo-space-sm);
+    text-align: center;
+  }
+
+  .nav {
+    padding: 0 var(--rpl-demo-space-sm) var(--rpl-demo-space-sm);
+  }
+
+  .sidebarFooter {
+    padding: var(--rpl-demo-space-md);
+  }
+
+  .mobileHeader {
+    display: flex;
+  }
+}

package/src/demo/Layout.tsx

@@ -0,0 +1,176 @@
+/**
+ * @file Main layout component using GridLayout
+ */
+import * as React from "react";
+import { Outlet, Link, useLocation } from "react-router";
+import { GridLayout } from "../components/grid/GridLayout";
+import type { PanelLayoutConfig, LayerDefinition } from "../types";
+import styles from "./Layout.module.css";
+import { demoCategories } from "./routes";
+import { useMedia } from "./hooks/useMedia";
+
+import { FiHome, FiLayout, FiChevronRight, FiMenu } from "react-icons/fi";
+
+const SidebarNav: React.FC = () => {
+  const location = useLocation();
+  const topLinks = [
+    { path: "/", label: "Home", icon: <FiHome /> },
+    { path: "/panel-demo", label: "Panel Layout Demo", icon: <FiLayout /> },
+  ] as const;
+
+  return (
+    <div className={styles.sidebar}>
+      <div className={styles.sidebarHeader}>
+        <h2 className={styles.sidebarTitle}>Panel Layout</h2>
+        <p className={styles.sidebarSubtitle}>Component Library</p>
+      </div>
+      <nav className={styles.nav}>
+        {topLinks.map((item) => {
+          const isActive = location.pathname === item.path;
+          return (
+            <Link key={item.path} to={item.path} className={`${styles.navLink} ${isActive ? styles.active : ""}`}>
+              <span className={styles.navIcon}>{item.icon}</span>
+              <span>{item.label}</span>
+            </Link>
+          );
+        })}
+
+        {demoCategories.map((category) => {
+          const isOpen = location.pathname.startsWith(category.base);
+          return (
+            <details key={category.id} className={styles.navCategory} open={isOpen}>
+              <summary className={styles.navCategorySummary}>
+                <span className={styles.navIcon}>{category.icon}</span>
+                <span style={{ flex: 1 }}>{category.label}</span>
+                <FiChevronRight className={styles.navArrow} />
+              </summary>
+              <div className={styles.navGroupChildren}>
+                {/* Category index link (optional) could be added here */}
+                {category.pages.map((page) => {
+                  const fullPath = `${category.base}/${page.path}`;
+                  const isActive = location.pathname === fullPath;
+                  return (
+                    <Link
+                      key={page.id}
+                      to={fullPath}
+                      className={`${styles.navChildLink} ${isActive ? styles.active : ""}`}
+                    >
+                      {page.label}
+                    </Link>
+                  );
+                })}
+              </div>
+            </details>
+          );
+        })}
+      </nav>
+      <div className={styles.sidebarFooter}>v{__APP_VERSION__}</div>
+    </div>
+  );
+};
+
+/**
+ * Mobile header component - rendered as part of main content area
+ */
+const MobileHeader: React.FC<{ onOpenNav: () => void }> = ({ onOpenNav }) => {
+  return (
+    <div className={styles.mobileHeader}>
+      <button type="button" className={styles.mobileNavButton} onClick={onOpenNav} aria-label="Open navigation drawer">
+        <FiMenu aria-hidden />
+        <span className={styles.mobileNavLabel}>Menu</span>
+      </button>
+      <h2 className={styles.mobileTitle}>Panel Layout</h2>
+    </div>
+  );
+};
+
+/**
+ * MainContent wrapper - only used in stacked (mobile) mode
+ * In desktop mode, Outlet is rendered directly without wrapper
+ */
+const StackedMainContent: React.FC<{ onOpenNav: () => void }> = ({ onOpenNav }) => {
+  return (
+    <div className={styles.stackedMainContent}>
+      <div className={styles.stackedMobileHeader}>
+        <MobileHeader onOpenNav={onOpenNav} />
+      </div>
+      <div className={styles.stackedContentArea}>
+        <Outlet />
+      </div>
+    </div>
+  );
+};
+
+export const Layout: React.FC = () => {
+  const isStackedLayout = useMedia("(max-width: 960px)");
+  const [navOpen, setNavOpen] = React.useState(false);
+  const handleOpenNav = React.useCallback(() => setNavOpen(true), []);
+
+  React.useEffect(() => {
+    if (!isStackedLayout && navOpen) {
+      setNavOpen(false);
+    }
+  }, [isStackedLayout, navOpen]);
+
+  const config = React.useMemo<PanelLayoutConfig>(() => {
+    if (isStackedLayout) {
+      return {
+        areas: [["main"]],
+        columns: [{ size: "1fr" }],
+        rows: [{ size: "auto" }],
+      };
+    }
+
+    return {
+      areas: [["sidebar", "main"]],
+      columns: [{ size: "250px", resizable: true, minSize: 200, maxSize: 400 }, { size: "1fr" }],
+      rows: [{ size: "minmax(0, 100vh)" }],
+    };
+  }, [isStackedLayout]);
+
+  const layers = React.useMemo<LayerDefinition[]>(() => {
+    if (isStackedLayout) {
+      // Mobile: Use wrapper with mobile header
+      return [
+        {
+          id: "main",
+          gridArea: "main",
+          component: <StackedMainContent onOpenNav={handleOpenNav} />,
+        },
+        {
+          id: "sidebar-drawer",
+          component: <SidebarNav />,
+          drawer: {
+            open: navOpen,
+            onStateChange: setNavOpen,
+            dismissible: true,
+            ariaLabel: "Navigation",
+            header: { title: "Navigation", showCloseButton: true },
+            transitionMode: "css",
+          },
+          width: 320,
+          position: { left: 0 },
+          zIndex: 10000,
+        },
+      ];
+    }
+
+    // Desktop: Render Outlet directly without wrapper for clean grid integration
+    return [
+      {
+        id: "sidebar",
+        gridArea: "sidebar",
+        component: <SidebarNav />,
+        scrollable: true,
+      },
+      {
+        id: "main",
+        gridArea: "main",
+        component: <Outlet />,
+        scrollable: true,
+      },
+    ];
+  }, [handleOpenNav, isStackedLayout, navOpen]);
+
+  return <GridLayout config={config} layers={layers} root />;
+};

package/src/demo/components/CodeBlock.module.css

@@ -0,0 +1,54 @@
+.codeBlock {
+  margin-top: 1rem;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.codeHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background: #f5f5f5;
+  border-bottom: 1px solid #ddd;
+}
+
+.codeTitle {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.copyButton {
+  padding: 0.25rem 0.75rem;
+  background: #2196f3;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.75rem;
+  transition: background 0.2s;
+}
+
+.copyButton:hover {
+  background: #1976d2;
+}
+
+.copyButton.copied {
+  background: #4caf50;
+}
+
+.codeContent {
+  padding: 1rem;
+  background: #2d2d2d;
+  color: #f8f8f2;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.codeContent pre {
+  margin: 0;
+}

package/src/demo/components/CodeBlock.tsx

@@ -0,0 +1,34 @@
+/**
+ * @file CodeBlock component for displaying sample code
+ */
+import * as React from "react";
+import styles from "./CodeBlock.module.css";
+
+export type CodeBlockProps = {
+  code: string;
+  title?: string;
+};
+
+export const CodeBlock: React.FC<CodeBlockProps> = ({ code, title = "Sample Code" }) => {
+  const [copied, setCopied] = React.useState(false);
+
+  const handleCopy = React.useCallback(() => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, [code]);
+
+  return (
+    <div className={styles.codeBlock}>
+      <div className={styles.codeHeader}>
+        <span className={styles.codeTitle}>{title}</span>
+        <button onClick={handleCopy} className={`${styles.copyButton} ${copied ? styles.copied : ""}`}>
+          {copied ? "✓ Copied!" : "Copy"}
+        </button>
+      </div>
+      <div className={styles.codeContent}>
+        <pre>{code}</pre>
+      </div>
+    </div>
+  );
+};

package/src/demo/components/CodePreview.module.css

@@ -0,0 +1,37 @@
+.codePreview {
+  margin-top: 1rem;
+}
+
+.summary {
+  cursor: pointer;
+  padding: 0.75rem 1rem;
+  background: #f5f5f5;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #333;
+  transition: background 0.2s;
+  user-select: none;
+  list-style: none;
+}
+
+.summary::-webkit-details-marker {
+  display: none;
+}
+
+.summary::before {
+  content: "▶";
+  display: inline-block;
+  margin-right: 0.5rem;
+  font-size: 0.75rem;
+  transition: transform 0.2s;
+}
+
+.summary:hover {
+  background: #e8e8e8;
+}
+
+details[open] .summary::before {
+  transform: rotate(90deg);
+}

package/src/demo/components/CodePreview.tsx

@@ -0,0 +1,31 @@
+/**
+ * @file CodePreview component - Displays code in a collapsible section
+ */
+import * as React from "react";
+import { CodeBlock } from "./CodeBlock";
+import styles from "./CodePreview.module.css";
+
+export type CodePreviewProps = {
+  code: string;
+  title?: string;
+  defaultOpen?: boolean;
+  summaryText?: string;
+};
+
+/**
+ * CodePreview component
+ * Wraps CodeBlock in a details/summary element for collapsible code display
+ */
+export const CodePreview: React.FC<CodePreviewProps> = ({
+  code,
+  title = "Sample Code",
+  defaultOpen = false,
+  summaryText = "Show Code",
+}) => {
+  return (
+    <details className={styles.codePreview} open={defaultOpen}>
+      <summary className={styles.summary}>{summaryText}</summary>
+      <CodeBlock code={code} title={title} />
+    </details>
+  );
+};