react-panel-layout 0.5.2 → 0.6.1

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

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

@@ -0,0 +1,177 @@
+.container {
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  color: var(--rpl-demo-text-primary);
+  border-radius: var(--rpl-demo-radius-lg);
+  box-shadow: var(--rpl-demo-shadow-lg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  user-select: none;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.header {
+  padding: var(--rpl-demo-space-sm) var(--rpl-demo-space-md);
+  background: rgba(255, 255, 255, 0.5);
+  border-bottom: 1px solid var(--rpl-demo-sidebar-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: grab;
+}
+
+.headerContent {
+  display: flex;
+  align-items: center;
+  gap: var(--rpl-demo-space-sm);
+}
+
+.headerIcon {
+  font-size: 1.125rem;
+}
+
+.headerTitle {
+  margin: 0;
+  font-size: var(--rpl-demo-font-size-sm);
+  font-weight: 600;
+}
+
+.headerBadge {
+  font-size: var(--rpl-demo-font-size-xs);
+  color: var(--rpl-demo-text-secondary);
+  background: rgba(0, 0, 0, 0.05);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.tabs {
+  display: flex;
+  gap: 4px;
+  padding: 4px 8px;
+  background: rgba(0, 0, 0, 0.02);
+  border-bottom: 1px solid var(--rpl-demo-sidebar-border);
+}
+
+.tab {
+  padding: 4px 12px;
+  background: transparent;
+  color: var(--rpl-demo-text-secondary);
+  border: none;
+  border-radius: 4px;
+  font-size: var(--rpl-demo-font-size-xs);
+  cursor: pointer;
+  transition: all 0.2s;
+  font-weight: 500;
+}
+
+.tab:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: var(--rpl-demo-text-primary);
+}
+
+.tabActive {
+  background: #fff !important;
+  color: var(--rpl-demo-text-primary) !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.content {
+  flex: 1;
+  padding: var(--rpl-demo-space-md);
+  overflow: auto;
+  font-size: var(--rpl-demo-font-size-sm);
+}
+
+.footer {
+  padding: var(--rpl-demo-space-sm);
+  background: rgba(255, 255, 255, 0.5);
+  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;
+}
+
+.propertyList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rpl-demo-space-md);
+}
+
+.propertyLabel {
+  color: var(--rpl-demo-text-secondary);
+  font-size: var(--rpl-demo-font-size-xs);
+  margin-bottom: 2px;
+  font-weight: 500;
+}
+
+.propertyValue {
+  font-family: monospace;
+  color: var(--rpl-demo-text-primary);
+  background: rgba(0, 0, 0, 0.03);
+  padding: 2px 6px;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.propertyValueHighlight {
+  font-family: monospace;
+  color: #0071e3;
+  background: rgba(0, 113, 227, 0.1);
+  padding: 2px 6px;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.dataList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rpl-demo-space-sm);
+}
+
+.codeBlock {
+  padding: var(--rpl-demo-space-sm);
+  background: #f5f5f7;
+  border-radius: var(--rpl-demo-radius-sm);
+  font-family: monospace;
+  font-size: var(--rpl-demo-font-size-xs);
+  border: 1px solid var(--rpl-demo-sidebar-border);
+}
+
+.codeComment {
+  color: #6a9955;
+}
+
+.codeKeyword {
+  color: #d73a49;
+}
+
+.codeVariable {
+  color: #005cc5;
+}
+
+.codeOperator {
+  color: #24292e;
+}
+
+.codeString {
+  color: #032f62;
+}
+
+.codeNumber {
+  color: #005cc5;
+}
+
+.codeIndent {
+  padding-left: 1rem;
+}
+
+.hint {
+  color: var(--rpl-demo-text-tertiary);
+  font-size: var(--rpl-demo-font-size-xs);
+  margin-top: var(--rpl-demo-space-sm);
+  text-align: center;
+}

package/src/demo/components/DataPreview.tsx

@@ -0,0 +1,115 @@
+/**
+ * @file Data Preview Component
+ * A draggable preview panel for demonstrating floating UI elements
+ */
+import * as React from "react";
+import { useLayerDragHandle } from "../../modules/grid/useLayerDragHandle";
+import styles from "./DataPreview.module.css";
+
+export type DataPreviewProps = {
+  width?: number;
+  height?: number;
+};
+
+const renderPropertiesTab = (width: number, height: number): React.ReactNode => {
+  return (
+    <div className={styles.propertyList}>
+      <div>
+        <div className={styles.propertyLabel}>ID</div>
+        <div className={styles.propertyValue}>data-preview-001</div>
+      </div>
+      <div>
+        <div className={styles.propertyLabel}>Type</div>
+        <div>Floating Panel</div>
+      </div>
+      <div>
+        <div className={styles.propertyLabel}>Position Mode</div>
+        <div className={styles.propertyValueHighlight}>absolute</div>
+      </div>
+      <div>
+        <div className={styles.propertyLabel}>Dimensions</div>
+        <div className={styles.propertyValue}>
+          {width}px × {height}px
+        </div>
+      </div>
+      <div>
+        <div className={styles.propertyLabel}>Draggable</div>
+        <div className={styles.propertyValueHighlight}>✓ Yes</div>
+      </div>
+      <div>
+        <div className={styles.propertyLabel}>Z-Index</div>
+        <div className={styles.propertyValue}>20</div>
+      </div>
+    </div>
+  );
+};
+
+const renderDataTab = (): React.ReactNode => {
+  return (
+    <div className={styles.dataList}>
+      <div className={styles.codeBlock}>
+        <div className={styles.codeComment}>// Sample data structure</div>
+        <div>
+          <span className={styles.codeKeyword}>const</span> <span className={styles.codeVariable}>config</span>{" "}
+          <span className={styles.codeOperator}>=</span> <span className={styles.codeOperator}>{"{"}</span>
+        </div>
+        <div className={styles.codeIndent}>
+          <span className={styles.codeVariable}>id</span>: <span className={styles.codeString}>"preview-001"</span>,
+        </div>
+        <div className={styles.codeIndent}>
+          <span className={styles.codeVariable}>draggable</span>: <span className={styles.codeKeyword}>true</span>,
+        </div>
+        <div className={styles.codeIndent}>
+          <span className={styles.codeVariable}>zIndex</span>: <span className={styles.codeNumber}>20</span>
+        </div>
+        <div>
+          <span className={styles.codeOperator}>{"}"}</span>;
+        </div>
+      </div>
+      <div className={styles.hint}>💡 Try dragging this panel around the canvas</div>
+    </div>
+  );
+};
+
+export const DataPreview: React.FC<DataPreviewProps> = ({ width = 300, height = 400 }) => {
+  const [selectedTab, setSelectedTab] = React.useState<"properties" | "data">("properties");
+  const dragHandleProps = useLayerDragHandle();
+
+  const renderContent = (): React.ReactNode => {
+    if (selectedTab === "properties") {
+      return renderPropertiesTab(width, height);
+    }
+    return renderDataTab();
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header} {...dragHandleProps}>
+        <div className={styles.headerContent}>
+          <div className={styles.headerIcon}>📊</div>
+          <h4 className={styles.headerTitle}>Data Preview</h4>
+        </div>
+        <div className={styles.headerBadge}>Draggable</div>
+      </div>
+
+      <div className={styles.tabs}>
+        <button
+          className={`${styles.tab} ${selectedTab === "properties" ? styles.tabActive : ""}`}
+          onClick={() => setSelectedTab("properties")}
+        >
+          Properties
+        </button>
+        <button
+          className={`${styles.tab} ${selectedTab === "data" ? styles.tabActive : ""}`}
+          onClick={() => setSelectedTab("data")}
+        >
+          Data
+        </button>
+      </div>
+
+      <div className={styles.content}>{renderContent()}</div>
+
+      <div className={styles.footer}>Drag from header to reposition</div>
+    </div>
+  );
+};

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

@@ -0,0 +1,68 @@
+.section {
+  margin-bottom: 3rem;
+}
+
+.sectionTitle {
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.story {
+  margin-bottom: 2rem;
+}
+
+.storyHeader {
+  margin-bottom: 1rem;
+}
+
+.storyTitle {
+  margin-bottom: 0.5rem;
+  font-size: 1.125rem;
+  font-weight: 500;
+}
+
+.storyDescription {
+  margin-bottom: 1rem;
+  color: #666;
+  font-size: 0.875rem;
+}
+
+.storyPreview {
+  padding: 2rem;
+  background: #f5f5f5;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}
+
+.storyActions {
+  margin-top: 1rem;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.actionButton {
+  padding: 0.5rem 1rem;
+  background: #2196f3;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: background 0.2s;
+}
+
+.actionButton:hover {
+  background: #1976d2;
+}
+
+.actionButtonSecondary {
+  background: #757575;
+}
+
+.actionButtonSecondary:hover {
+  background: #616161;
+}