react-panel-layout 0.5.1 → 0.6.0

package/src/demo/pages/HorizontalDivider/panels-with-rich-content/index.tsx

@@ -0,0 +1,21 @@
+/**
+ * @file HorizontalDivider - Panels with Rich Content page
+ */
+import * as React from "react";
+import { PanelsWithRichContent } from "../components/PanelsWithRichContent";
+import PanelsWithRichContentSource from "../components/PanelsWithRichContent.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage
+      title="HorizontalDivider / Panels with Rich Content"
+      code={PanelsWithRichContentSource}
+      codeTitle="PanelsWithRichContent.tsx"
+    >
+      <PanelsWithRichContent />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/HorizontalDivider/simple-resizable-panels/index.tsx

@@ -0,0 +1,21 @@
+/**
+ * @file HorizontalDivider - Simple resizable panels page
+ */
+import * as React from "react";
+import { SimpleResizablePanels } from "../components/SimpleResizablePanels";
+import SimpleResizablePanelsSource from "../components/SimpleResizablePanels.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage
+      title="HorizontalDivider / Simple Resizable Panels"
+      code={SimpleResizablePanelsSource}
+      codeTitle="SimpleResizablePanels.tsx"
+    >
+      <SimpleResizablePanels />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/HorizontalDivider/three-panel-layout/index.tsx

@@ -0,0 +1,21 @@
+/**
+ * @file HorizontalDivider - Three Panel Layout page
+ */
+import * as React from "react";
+import { ThreePanelLayout } from "../components/ThreePanelLayout";
+import ThreePanelLayoutSource from "../components/ThreePanelLayout.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage
+      title="HorizontalDivider / Three Panel Layout"
+      code={ThreePanelLayoutSource}
+      codeTitle="ThreePanelLayout.tsx"
+    >
+      <ThreePanelLayout />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/PanelLayout/PanelLayoutDemo.module.css

@@ -0,0 +1,174 @@
+.demoPanel {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--rpl-demo-surface-secondary);
+  border-radius: var(--rpl-demo-radius-md);
+  border: 1px solid var(--rpl-demo-sidebar-border);
+  overflow: hidden;
+  transition: var(--rpl-demo-transition);
+}
+
+.panelTitle {
+  margin: 0;
+  padding: var(--rpl-demo-space-md);
+  font-size: var(--rpl-demo-font-size-sm);
+  font-weight: 600;
+  color: var(--rpl-demo-text-primary);
+  border-bottom: 1px solid var(--rpl-demo-sidebar-border);
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(10px);
+}
+
+.panelContent {
+  flex: 1;
+  overflow: auto;
+  padding: var(--rpl-demo-space-md);
+}
+
+.panelText {
+  margin: 0;
+  font-size: var(--rpl-demo-font-size-sm);
+  color: var(--rpl-demo-text-secondary);
+  line-height: 1.5;
+}
+
+/* Toolbar */
+.toolbar {
+  display: flex;
+  gap: var(--rpl-demo-space-xs);
+  align-items: center;
+  padding: var(--rpl-demo-space-xs);
+}
+
+.toolbarButton {
+  padding: var(--rpl-demo-space-sm) var(--rpl-demo-space-md);
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  border-radius: var(--rpl-demo-radius-sm);
+  font-size: var(--rpl-demo-font-size-sm);
+  color: var(--rpl-demo-text-secondary);
+  transition: var(--rpl-demo-transition);
+}
+
+.toolbarButton:hover {
+  background: var(--rpl-demo-control-bg-hover);
+  color: var(--rpl-demo-text-primary);
+}
+
+/* Sidebar */
+.sidebarList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--rpl-demo-space-xs);
+}
+
+.sidebarItem {
+  padding: var(--rpl-demo-space-sm);
+  cursor: pointer;
+  border-radius: var(--rpl-demo-radius-sm);
+  font-size: var(--rpl-demo-font-size-sm);
+  color: var(--rpl-demo-text-secondary);
+  transition: var(--rpl-demo-transition);
+  display: flex;
+  align-items: center;
+  gap: var(--rpl-demo-space-sm);
+}
+
+.sidebarItem:hover {
+  background: var(--rpl-demo-control-bg-hover);
+  color: var(--rpl-demo-text-primary);
+}
+
+/* Canvas */
+.canvasArea {
+  border: 1px dashed var(--rpl-demo-sidebar-border);
+  border-radius: var(--rpl-demo-radius-md);
+  padding: var(--rpl-demo-space-xl);
+  text-align: center;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.canvasText {
+  color: var(--rpl-demo-text-tertiary);
+  font-size: var(--rpl-demo-font-size-md);
+}
+
+/* Inspector */
+.inspectorForm {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rpl-demo-space-md);
+}
+
+.formLabel {
+  display: block;
+  font-size: var(--rpl-demo-font-size-xs);
+  font-weight: 500;
+  color: var(--rpl-demo-text-secondary);
+  margin-bottom: var(--rpl-demo-space-xs);
+}
+
+.formInputNumber,
+.formInputColor {
+  width: 100%;
+  padding: var(--rpl-demo-space-sm);
+  border: 1px solid var(--rpl-demo-sidebar-border);
+  border-radius: var(--rpl-demo-radius-sm);
+  font-family: inherit;
+  font-size: var(--rpl-demo-font-size-sm);
+  background: #fff;
+  transition: var(--rpl-demo-transition);
+}
+
+.formInputNumber:focus,
+.formInputColor:focus {
+  outline: none;
+  border-color: var(--rpl-demo-accent);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
+}
+
+.formInputColor {
+  padding: 2px;
+  height: 32px;
+}
+
+/* StatusBar */
+.statusBar {
+  width: 100%;
+  height: 100%;
+  background: var(--rpl-demo-text-primary);
+  /* Dark background */
+  padding: 0 var(--rpl-demo-space-md);
+  display: flex;
+  align-items: center;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: var(--rpl-demo-font-size-xs);
+  font-family: monospace;
+}
+
+.intro {
+  margin: 0;
+  color: var(--rpl-demo-text-secondary);
+  line-height: 1.6;
+  font-size: var(--rpl-demo-font-size-md);
+}
+
+.featuredContainer {
+  width: 100%;
+  height: 600px;
+  border-radius: var(--rpl-demo-radius-lg);
+  overflow: hidden;
+  box-shadow: var(--rpl-demo-shadow-md);
+  border: 1px solid var(--rpl-demo-sidebar-border);
+  background: #fff;
+}

package/src/demo/pages/PanelLayout/PanelLayoutDemo.tsx

@@ -0,0 +1,248 @@
+/**
+ * @file Panel Layout Demo
+ * Demonstrates the GridLayout component with various panel configurations
+ */
+import * as React from "react";
+import { GridLayout } from "../../../components/grid/GridLayout";
+import type { PanelLayoutConfig, LayerDefinition } from "../../../types";
+import { DataPreview } from "../../components/DataPreview";
+import { Section, Story } from "../../components/Story";
+import { CodePreview } from "../../components/CodePreview";
+import { DemoPage } from "../../components/layout/index";
+import styles from "./PanelLayoutDemo.module.css";
+import { FiFolder, FiSearch, FiSettings, FiCommand, FiLayers, FiLayout } from "react-icons/fi";
+
+const DemoPanel: React.FC<{ title: string; children?: React.ReactNode }> = ({ title, children }) => {
+  return (
+    <div className={styles.demoPanel}>
+      <h3 className={styles.panelTitle}>{title}</h3>
+      <div className={styles.panelContent}>
+        {children ? children : <p className={styles.panelText}>Panel content goes here...</p>}
+      </div>
+    </div>
+  );
+};
+
+const featuredConfig: PanelLayoutConfig = {
+  areas: [
+    ["toolbar", "toolbar", "toolbar"],
+    ["sidebar", "canvas", "inspector"],
+    ["statusbar", "statusbar", "statusbar"],
+  ],
+  rows: [{ size: "52px" }, { size: "1fr" }, { size: "28px" }],
+  columns: [
+    { size: "260px", resizable: true, minSize: 200, maxSize: 400 },
+    { size: "1fr" },
+    { size: "320px", resizable: true, minSize: 250, maxSize: 500 },
+  ],
+  gap: "0",
+};
+
+const featuredLayers: LayerDefinition[] = [
+  {
+    id: "toolbar",
+    component: (
+      <div
+        className={styles.demoPanel}
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          padding: "0 8px",
+          borderBottom: "1px solid var(--rpl-demo-sidebar-border)",
+        }}
+      >
+        <div className={styles.toolbar}>
+          <button className={styles.toolbarButton}>
+            <FiCommand /> File
+          </button>
+          <button className={styles.toolbarButton}>
+            <FiLayout /> View
+          </button>
+          <button className={styles.toolbarButton}>
+            <FiLayers /> Layer
+          </button>
+        </div>
+      </div>
+    ),
+    gridArea: "toolbar",
+    zIndex: 10,
+    visible: true,
+  },
+  {
+    id: "sidebar",
+    component: (
+      <DemoPanel title="Explorer">
+        <ul className={styles.sidebarList}>
+          <li className={styles.sidebarItem}>
+            <FiFolder /> src
+          </li>
+          <li className={styles.sidebarItem}>
+            <FiFolder /> components
+          </li>
+          <li className={styles.sidebarItem}>
+            <FiFolder /> assets
+          </li>
+          <li className={styles.sidebarItem}>
+            <FiSearch /> Search
+          </li>
+          <li className={styles.sidebarItem}>
+            <FiSettings /> Settings
+          </li>
+        </ul>
+      </DemoPanel>
+    ),
+    gridArea: "sidebar",
+    zIndex: 1,
+    visible: true,
+  },
+  {
+    id: "canvas",
+    component: (
+      <div className={styles.demoPanel} style={{ background: "#f5f5f7" }}>
+        <div className={styles.canvasArea}>
+          <div style={{ textAlign: "center" }}>
+            <div
+              style={{
+                width: 64,
+                height: 64,
+                background: "var(--rpl-demo-accent)",
+                borderRadius: "16px",
+                margin: "0 auto 16px",
+                opacity: 0.1,
+              }}
+            />
+            <p className={styles.canvasText}>Drag panels to resize</p>
+          </div>
+        </div>
+      </div>
+    ),
+    gridArea: "canvas",
+    zIndex: 0,
+    visible: true,
+  },
+  {
+    id: "inspector",
+    component: (
+      <DemoPanel title="Properties">
+        <div className={styles.inspectorForm}>
+          <div>
+            <label className={styles.formLabel}>Dimensions</label>
+            <div style={{ display: "flex", gap: 8 }}>
+              <input type="number" defaultValue={1920} className={styles.formInputNumber} placeholder="W" />
+              <input type="number" defaultValue={1080} className={styles.formInputNumber} placeholder="H" />
+            </div>
+          </div>
+          <div>
+            <label className={styles.formLabel}>Fill</label>
+            <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+              <input type="color" defaultValue="#0071e3" className={styles.formInputColor} style={{ width: 40 }} />
+              <input type="text" defaultValue="#0071E3" className={styles.formInputNumber} />
+            </div>
+          </div>
+          <div>
+            <label className={styles.formLabel}>Opacity</label>
+            <input type="range" style={{ width: "100%" }} />
+          </div>
+        </div>
+      </DemoPanel>
+    ),
+    gridArea: "inspector",
+    zIndex: 1,
+    visible: true,
+  },
+  {
+    id: "statusbar",
+    component: (
+      <div className={styles.statusBar}>
+        <span style={{ marginRight: 16 }}>Ready</span>
+        <span style={{ opacity: 0.6 }}>UTF-8</span>
+        <span style={{ marginLeft: "auto", opacity: 0.6 }}>TypeScript React</span>
+      </div>
+    ),
+    gridArea: "statusbar",
+    zIndex: 10,
+    visible: true,
+  },
+  {
+    id: "data-preview",
+    component: <DataPreview width={300} height={400} />,
+    position: { left: 720, top: 100 },
+    width: 300,
+    height: 400,
+    zIndex: 20,
+    floating: {
+      draggable: true,
+    },
+    visible: true,
+  },
+];
+
+const featuredCode = `import { GridLayout } from "../components/grid/GridLayout";
+import { DataPreview } from "./components/DataPreview";
+
+const config: PanelLayoutConfig = {
+  areas: [
+    ["toolbar", "toolbar", "toolbar"],
+    ["sidebar", "canvas", "inspector"],
+    ["statusbar", "statusbar", "statusbar"],
+  ],
+  rows: [
+    { size: "52px" },
+    { size: "1fr" },
+    { size: "28px" },
+  ],
+  columns: [
+    { size: "260px", resizable: true, minSize: 200, maxSize: 400 },
+    { size: "1fr" },
+    { size: "320px", resizable: true, minSize: 250, maxSize: 500 },
+  ],
+  gap: "0",
+};
+
+const layers: LayerDefinition[] = [
+  { id: "toolbar", gridArea: "toolbar", component: <Toolbar /> },
+  { id: "sidebar", gridArea: "sidebar", component: <Sidebar /> },
+  { id: "canvas", gridArea: "canvas", component: <Canvas /> },
+  { id: "inspector", gridArea: "inspector", component: <Inspector /> },
+  { id: "statusbar", gridArea: "statusbar", component: <StatusBar /> },
+  {
+    id: "data-preview",
+    position: { left: 720, top: 100 },
+    width: 300,
+    height: 400,
+    zIndex: 20,
+    floating: {
+      draggable: true,
+    },
+    component: <DataPreview width={300} height={400} />,
+  },
+];
+
+<GridLayout config={config} layers={layers} />;`;
+
+export const PanelLayoutDemo: React.FC = () => {
+  return (
+    <DemoPage
+      title="Panel Layout Demo"
+      padding="var(--rpl-demo-space-xl)"
+      intro={
+        <p className={styles.intro}>
+          Explore the featured workspace configuration and browse additional panel layout presets. This demo showcases
+          the power of the grid system combined with floating panels.
+        </p>
+      }
+    >
+      <Section title="Featured Workspace">
+        <Story
+          title="Creative Studio"
+          description="A complex IDE-like layout with toolbar, sidebar, inspector, and status bar. Try resizing the panels or dragging the floating data preview."
+        >
+          <div className={styles.featuredContainer}>
+            <GridLayout config={featuredConfig} layers={featuredLayers} />
+          </div>
+        </Story>
+        <CodePreview code={featuredCode} title="Configuration" />
+      </Section>
+    </DemoPage>
+  );
+};

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

@@ -0,0 +1,115 @@
+.container {
+  width: 100%;
+  height: 600px;
+  overflow: auto;
+  border: 1px solid var(--rpl-demo-sidebar-border);
+  border-radius: var(--rpl-demo-radius-lg);
+  box-shadow: var(--rpl-demo-shadow-md);
+}
+
+.dashboardCard {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: var(--rpl-demo-space-lg);
+}
+
+.cardHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.cardTitle {
+  font-size: 0.875rem;
+  color: var(--rpl-demo-text-secondary);
+  margin-bottom: 0.5rem;
+}
+
+.cardValue {
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+.cardIcon {
+  font-size: 2rem;
+  opacity: 0.3;
+}
+
+.chartCard {
+  width: 100%;
+  height: 100%;
+  padding: var(--rpl-demo-space-lg);
+}
+
+.chartTitle {
+  margin: 0 0 1rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.chartArea {
+  height: calc(100% - 2rem);
+  background-color: var(--rpl-demo-surface-secondary);
+  border-radius: var(--rpl-demo-radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--rpl-demo-text-tertiary);
+}
+
+.header {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  padding: 1.5rem;
+  box-sizing: border-box;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.headerTitle {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.headerMeta {
+  font-size: 0.875rem;
+  color: #666;
+}
+
+.activityCard {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  padding: 1.5rem;
+  box-sizing: border-box;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  overflow: auto;
+}
+
+.activityTitle {
+  margin: 0 0 1rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.activityList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.activityItem {
+  padding: 0.5rem;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  font-size: 0.875rem;
+}