react-panel-layout 0.5.2 → 0.6.1

package/src/demo/pages/PanelLayout/components/DashboardLayout.tsx

@@ -0,0 +1,124 @@
+/**
+ * @file Dashboard-style layout sample
+ */
+import * as React from "react";
+import { GridLayout } from "../../../../components/grid/GridLayout";
+import type { PanelLayoutConfig, LayerDefinition } from "../../../../types";
+import styles from "./DashboardLayout.module.css";
+
+import { DemoCard } from "../../../components/ui/DemoCard";
+
+const DashboardCard: React.FC<{ title: string; value: string; icon: string; color: string }> = ({
+  title,
+  value,
+  icon,
+  color,
+}) => {
+  return (
+    <DemoCard className={styles.dashboardCard}>
+      <div className={styles.cardHeader}>
+        <div>
+          <div className={styles.cardTitle}>{title}</div>
+          <div className={styles.cardValue} style={{ color }}>{value}</div>
+        </div>
+        <div className={styles.cardIcon}>{icon}</div>
+      </div>
+    </DemoCard>
+  );
+};
+
+const ChartCard: React.FC<{ title: string }> = ({ title }) => {
+  return (
+    <DemoCard className={styles.chartCard}>
+      <h3 className={styles.chartTitle}>{title}</h3>
+      <div className={styles.chartArea}>
+        Chart Area
+      </div>
+    </DemoCard>
+  );
+};
+
+export const DashboardLayout = () => {
+  const config: PanelLayoutConfig = {
+    areas: [
+      ["header", "header", "header", "header"],
+      ["stat1", "stat2", "stat3", "stat4"],
+      ["chart1", "chart1", "chart2", "chart2"],
+      ["chart3", "chart3", "chart3", "activity"],
+    ],
+    rows: [{ size: "80px" }, { size: "120px" }, { size: "200px" }, { size: "1fr" }],
+    columns: [{ size: "1fr" }, { size: "1fr" }, { size: "1fr" }, { size: "1fr" }],
+    gap: "1rem",
+    style: { padding: "1rem", backgroundColor: "#f5f5f5" },
+  };
+
+  const layers: LayerDefinition[] = [
+    {
+      id: "header",
+      component: (
+        <div className={styles.header}>
+          <h1 className={styles.headerTitle}>Dashboard</h1>
+          <div className={styles.headerMeta}>Last updated: Just now</div>
+        </div>
+      ),
+      gridArea: "header",
+    },
+    {
+      id: "stat1",
+      component: <DashboardCard title="Total Users" value="12,543" icon="👥" color="#3498db" />,
+      gridArea: "stat1",
+    },
+    {
+      id: "stat2",
+      component: <DashboardCard title="Revenue" value="$24.5k" icon="💰" color="#2ecc71" />,
+      gridArea: "stat2",
+    },
+    {
+      id: "stat3",
+      component: <DashboardCard title="Orders" value="1,234" icon="📦" color="#f39c12" />,
+      gridArea: "stat3",
+    },
+    {
+      id: "stat4",
+      component: <DashboardCard title="Growth" value="+15%" icon="📈" color="#e74c3c" />,
+      gridArea: "stat4",
+    },
+    {
+      id: "chart1",
+      component: <ChartCard title="Sales Overview" />,
+      gridArea: "chart1",
+    },
+    {
+      id: "chart2",
+      component: <ChartCard title="Traffic Sources" />,
+      gridArea: "chart2",
+    },
+    {
+      id: "chart3",
+      component: <ChartCard title="Revenue Trends" />,
+      gridArea: "chart3",
+    },
+    {
+      id: "activity",
+      component: (
+        <div className={styles.activityCard}>
+          <h3 className={styles.activityTitle}>Recent Activity</h3>
+          <div className={styles.activityList}>
+            {["New order #1234", "User registered", "Payment received", "Support ticket #567"].map((activity, i) => (
+              <div key={i} className={styles.activityItem}>
+                {activity}
+              </div>
+            ))}
+          </div>
+        </div>
+      ),
+      gridArea: "activity",
+    },
+  ];
+
+  return (
+    <div className={styles.container}>
+      <GridLayout config={config} layers={layers} />
+    </div>
+  );
+};

package/src/demo/pages/PanelLayout/components/DraggableOverlays.module.css

@@ -0,0 +1,101 @@
+.container {
+  width: 100%;
+  height: 500px;
+  overflow: hidden;
+  border: 1px solid var(--rpl-demo-sidebar-border);
+  border-radius: var(--rpl-demo-radius-lg);
+  box-shadow: var(--rpl-demo-shadow-md);
+}
+
+.draggablePanel {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--rpl-demo-shadow-lg);
+}
+
+.panelHeader {
+  padding: var(--rpl-demo-space-md);
+  color: #fff;
+  font-weight: 600;
+  cursor: grab;
+  user-select: none;
+}
+
+.panelContent {
+  flex: 1;
+  padding: var(--rpl-demo-space-md);
+  overflow: auto;
+}
+
+.panelText {
+  margin: 0;
+  color: var(--rpl-demo-text-secondary);
+}
+
+.canvas {
+  width: 100%;
+  height: 100%;
+  background-color: #f0f4f8;
+  background-image: linear-gradient(#e5e9ed 1px, transparent 1px),
+    linear-gradient(90deg, #e5e9ed 1px, transparent 1px);
+  background-size: 20px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.canvasContent {
+  text-align: center;
+  color: #999;
+}
+
+.canvasIcon {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+.canvasHint {
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+}
+
+.toolsList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.colorGrid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.5rem;
+}
+
+.colorSwatch {
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 2px solid #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.settingsForm {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.formLabel {
+  display: block;
+  font-size: 0.75rem;
+  margin-bottom: 0.25rem;
+}
+
+.rangeInput {
+  width: 100%;
+}

package/src/demo/pages/PanelLayout/components/DraggableOverlays.tsx

@@ -0,0 +1,122 @@
+/**
+ * @file Draggable overlays sample - demonstrating FloatingBehavior with chrome
+ */
+import * as React from "react";
+import { GridLayout } from "../../../../components/grid/GridLayout";
+import type { PanelLayoutConfig, LayerDefinition } from "../../../../types";
+import styles from "./DraggableOverlays.module.css";
+
+import { DemoButton } from "../../../components/ui/DemoButton";
+
+export const DraggableOverlays = () => {
+  const config: PanelLayoutConfig = {
+    areas: [["canvas"]],
+    rows: [{ size: "100%" }],
+    columns: [{ size: "100%" }],
+    gap: "0",
+  };
+
+  const layers: LayerDefinition[] = [
+    {
+      id: "canvas",
+      component: (
+        <div className={styles.canvas}>
+          <div className={styles.canvasContent}>
+            <div className={styles.canvasIcon}>🎨</div>
+            <div>Canvas Area</div>
+            <div className={styles.canvasHint}>Drag the floating panels around</div>
+          </div>
+        </div>
+      ),
+      gridArea: "canvas",
+      zIndex: 0,
+    },
+    // New API: chrome enabled - header auto-becomes drag handle
+    {
+      id: "panel1",
+      component: (
+        <div className={styles.toolsList}>
+          <DemoButton variant="secondary" size="sm">✏️ Pen</DemoButton>
+          <DemoButton variant="secondary" size="sm">🖌️ Brush</DemoButton>
+          <DemoButton variant="secondary" size="sm">⬜ Shape</DemoButton>
+        </div>
+      ),
+      floating: {
+        defaultPosition: { left: 20, top: 20 },
+        defaultSize: { width: 200, height: 250 },
+        zIndex: 10,
+        draggable: true,
+        chrome: true,
+        header: {
+          title: "Tools",
+          showCloseButton: true,
+        },
+        onClose: () => console.log("Tools panel closed"),
+      },
+    },
+    // New API: chrome enabled with resize
+    {
+      id: "panel2",
+      component: (
+        <div className={styles.colorGrid}>
+          {["#e74c3c", "#3498db", "#2ecc71", "#f39c12", "#9b59b6", "#1abc9c", "#34495e", "#ecf0f1"].map((color) => (
+            <div
+              key={color}
+              className={styles.colorSwatch}
+              style={{ backgroundColor: color }}
+            />
+          ))}
+        </div>
+      ),
+      floating: {
+        defaultPosition: { left: 260, top: 20 },
+        defaultSize: { width: 220, height: 200 },
+        zIndex: 11,
+        draggable: true,
+        resizable: true,
+        chrome: true,
+        header: {
+          title: "Colors",
+        },
+        constraints: {
+          minWidth: 150,
+          minHeight: 150,
+          maxWidth: 400,
+          maxHeight: 400,
+        },
+      },
+    },
+    // New API: chrome enabled
+    {
+      id: "panel3",
+      component: (
+        <div className={styles.settingsForm}>
+          <div>
+            <label className={styles.formLabel}>Opacity</label>
+            <input type="range" min="0" max="100" defaultValue="100" className={styles.rangeInput} />
+          </div>
+          <div>
+            <label className={styles.formLabel}>Size</label>
+            <input type="range" min="1" max="50" defaultValue="10" className={styles.rangeInput} />
+          </div>
+        </div>
+      ),
+      floating: {
+        defaultPosition: { left: 20, top: 300 },
+        defaultSize: { width: 250, height: 180 },
+        zIndex: 12,
+        draggable: true,
+        chrome: true,
+        header: {
+          title: "Settings",
+        },
+      },
+    },
+  ];
+
+  return (
+    <div className={styles.container}>
+      <GridLayout config={config} layers={layers} />
+    </div>
+  );
+};

package/src/demo/pages/PanelLayout/components/IDELayout.module.css

@@ -0,0 +1,104 @@
+.container {
+  width: 100%;
+  height: 600px;
+  overflow: hidden;
+  border: 1px solid var(--rpl-demo-sidebar-border);
+  border-radius: var(--rpl-demo-radius-lg);
+  box-shadow: var(--rpl-demo-shadow-md);
+}
+
+.demoPanel {
+  width: 100%;
+  height: 100%;
+  padding: var(--rpl-demo-space-md);
+  box-sizing: border-box;
+  overflow: auto;
+  border-radius: var(--rpl-demo-radius-md);
+}
+
+.panelTitle {
+  margin: 0 0 1rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--rpl-demo-text-secondary);
+}
+
+.panelText {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--rpl-demo-text-secondary);
+}
+
+.toolbar {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.sidebarList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.sidebarItem {
+  padding: 0.5rem;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 0.9rem;
+}
+
+.canvasArea {
+  border: 2px dashed var(--rpl-demo-sidebar-border);
+  border-radius: var(--rpl-demo-radius-md);
+  padding: 2rem;
+  text-align: center;
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.canvasText {
+  color: var(--rpl-demo-text-tertiary);
+  font-size: 1rem;
+}
+
+.inspectorForm {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.formLabel {
+  display: block;
+  font-size: 0.75rem;
+  margin-bottom: 0.25rem;
+  font-weight: 600;
+}
+
+.formInput {
+  width: 100%;
+  padding: 0.5rem;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+}
+
+.colorInput {
+  width: 100%;
+  padding: 0.25rem;
+  height: 32px;
+}
+
+.statusBar {
+  width: 100%;
+  height: 100%;
+  background-color: #34495e;
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+  color: #ecf0f1;
+  font-size: 0.75rem;
+}

package/src/demo/pages/PanelLayout/components/IDELayout.tsx

@@ -0,0 +1,143 @@
+/**
+ * @file IDE-style layout sample
+ */
+import * as React from "react";
+import { GridLayout } from "../../../../components/grid/GridLayout";
+import type { PanelLayoutConfig, LayerDefinition } from "../../../../types";
+import { DataPreview } from "../../../components/DataPreview";
+import styles from "./IDELayout.module.css";
+
+import { DemoButton } from "../../../components/ui/DemoButton";
+
+const DemoPanel: React.FC<{ title: string; bgColor?: string; children?: React.ReactNode }> = ({
+  title,
+  bgColor = "#f0f0f0",
+  children,
+}) => {
+  return (
+    <div className={styles.demoPanel} style={{ backgroundColor: bgColor }}>
+      <h3 className={styles.panelTitle}>{title}</h3>
+      {children ? children : <p className={styles.panelText}>Panel content goes here...</p>}
+    </div>
+  );
+};
+
+export const IDELayout = () => {
+  const config: PanelLayoutConfig = {
+    areas: [
+      ["toolbar", "toolbar", "toolbar"],
+      ["sidebar", "canvas", "inspector"],
+      ["statusbar", "statusbar", "statusbar"],
+    ],
+    rows: [
+      { size: "60px" },
+      { size: "1fr" },
+      { size: "30px" },
+    ],
+    columns: [
+      { size: "250px", resizable: true, minSize: 200, maxSize: 400 },
+      { size: "1fr" },
+      { size: "300px", resizable: true, minSize: 250, maxSize: 500 },
+    ],
+    gap: "var(--rpl-demo-space-xs)",
+  };
+
+  const layers: LayerDefinition[] = [
+    {
+      id: "toolbar",
+      component: (
+        <DemoPanel title="Toolbar" bgColor="#2c3e50">
+          <div className={styles.toolbar}>
+            <DemoButton variant="ghost" size="sm" style={{ color: "#ecf0f1" }}>File</DemoButton>
+            <DemoButton variant="ghost" size="sm" style={{ color: "#ecf0f1" }}>Edit</DemoButton>
+            <DemoButton variant="ghost" size="sm" style={{ color: "#ecf0f1" }}>View</DemoButton>
+          </div>
+        </DemoPanel>
+      ),
+      gridArea: "toolbar",
+      zIndex: 10,
+      visible: true,
+    },
+    {
+      id: "sidebar",
+      component: (
+        <DemoPanel title="Sidebar" bgColor="#ecf0f1">
+          <ul className={styles.sidebarList}>
+            <li className={styles.sidebarItem}>📁 Project Files</li>
+            <li className={styles.sidebarItem}>🔍 Search</li>
+            <li className={styles.sidebarItem}>⚙️ Settings</li>
+          </ul>
+        </DemoPanel>
+      ),
+      gridArea: "sidebar",
+      zIndex: 1,
+      visible: true,
+    },
+    {
+      id: "canvas",
+      component: (
+        <DemoPanel title="Canvas" bgColor="#ffffff">
+          <div className={styles.canvasArea}>
+            <p className={styles.canvasText}>Main canvas area - your content goes here</p>
+          </div>
+        </DemoPanel>
+      ),
+      gridArea: "canvas",
+      zIndex: 0,
+      visible: true,
+    },
+    {
+      id: "inspector",
+      component: (
+        <DemoPanel title="Inspector" bgColor="#ecf0f1">
+          <div className={styles.inspectorForm}>
+            <div>
+              <label className={styles.formLabel}>Width</label>
+              <input type="number" defaultValue={100} className={styles.formInput} />
+            </div>
+            <div>
+              <label className={styles.formLabel}>Height</label>
+              <input type="number" defaultValue={100} className={styles.formInput} />
+            </div>
+            <div>
+              <label className={styles.formLabel}>Color</label>
+              <input type="color" defaultValue="#3498db" className={styles.colorInput} />
+            </div>
+          </div>
+        </DemoPanel>
+      ),
+      gridArea: "inspector",
+      zIndex: 1,
+      visible: true,
+    },
+    {
+      id: "statusbar",
+      component: (
+        <div className={styles.statusBar}>
+          Ready | Line 1, Column 1
+        </div>
+      ),
+      gridArea: "statusbar",
+      zIndex: 10,
+      visible: true,
+    },
+    {
+      id: "data-preview",
+      component: <DataPreview width={300} height={400} />,
+      position: { left: 720, top: 10 },
+      width: 300,
+      height: 400,
+      zIndex: 20,
+      floating: {
+        draggable: true,
+      },
+      visible: true,
+    },
+  ];
+
+  return (
+    <div className={styles.container}>
+      <GridLayout config={config} layers={layers} />
+    </div>
+  );
+};

package/src/demo/pages/PanelLayout/components/SimpleGrid.module.css

@@ -0,0 +1,19 @@
+.container {
+  width: 100%;
+  height: 400px;
+  border: 1px solid #ddd;
+}
+
+.gridCell {
+  width: 100%;
+  height: 100%;
+  padding: var(--rpl-demo-space-lg);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #fff;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}

package/src/demo/pages/PanelLayout/components/SimpleGrid.tsx

@@ -0,0 +1,62 @@
+/**
+ * @file Simple 2x2 grid layout sample
+ */
+import * as React from "react";
+import { GridLayout } from "../../../../components/grid/GridLayout";
+import type { PanelLayoutConfig, LayerDefinition } from "../../../../types";
+import styles from "./SimpleGrid.module.css";
+
+import { DemoCard } from "../../../components/ui/DemoCard";
+
+const GridCell: React.FC<{ title: string; color: string }> = ({ title, color }) => {
+  return (
+    <DemoCard
+      hoverEffect
+      className={styles.gridCell}
+      style={{ backgroundColor: color }}
+    >
+      {title}
+    </DemoCard>
+  );
+};
+
+export const SimpleGrid = () => {
+  const config: PanelLayoutConfig = {
+    areas: [
+      ["cell1", "cell2"],
+      ["cell3", "cell4"],
+    ],
+    rows: [{ size: "1fr" }, { size: "1fr" }],
+    columns: [{ size: "1fr" }, { size: "1fr" }],
+    gap: "1rem",
+  };
+
+  const layers: LayerDefinition[] = [
+    {
+      id: "cell1",
+      component: <GridCell title="Cell 1" color="#3498db" />,
+      gridArea: "cell1",
+    },
+    {
+      id: "cell2",
+      component: <GridCell title="Cell 2" color="#e74c3c" />,
+      gridArea: "cell2",
+    },
+    {
+      id: "cell3",
+      component: <GridCell title="Cell 3" color="#2ecc71" />,
+      gridArea: "cell3",
+    },
+    {
+      id: "cell4",
+      component: <GridCell title="Cell 4" color="#f39c12" />,
+      gridArea: "cell4",
+    },
+  ];
+
+  return (
+    <div className={styles.container}>
+      <GridLayout config={config} layers={layers} />
+    </div>
+  );
+};

package/src/demo/pages/PanelLayout/dashboard/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * @file PanelLayout - Dashboard Layout page
+ */
+import * as React from "react";
+import { DashboardLayout } from "../components/DashboardLayout";
+import DashboardLayoutSource from "../components/DashboardLayout.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage
+      title="PanelLayout / Dashboard"
+      code={DashboardLayoutSource}
+      codeTitle="DashboardLayout.tsx"
+      previewHeight={600}
+    >
+      <DashboardLayout />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;