react-panel-layout 0.5.1 → 0.6.0

package/src/demo/pages/ResizeHandle/components/BothDirectionsDemo.module.css

@@ -0,0 +1,72 @@
+.demoContainerInline {
+  display: inline-block;
+  position: relative;
+  border: 1px solid var(--rpl-demo-sidebar-border);
+  border-radius: var(--rpl-demo-radius-lg);
+  overflow: hidden;
+  box-shadow: var(--rpl-demo-shadow-md);
+  background: #fff;
+}
+
+.verticalHandleWrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.horizontalHandleWrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.resizableBox {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  color: white;
+  padding: var(--rpl-demo-space-lg);
+  padding-left: var(--rpl-demo-space-xl);
+  padding-top: var(--rpl-demo-space-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--rpl-demo-space-sm);
+}
+
+.panelTitle {
+  margin: 0;
+  font-size: var(--rpl-demo-font-size-md);
+  font-weight: 600;
+}
+
+.panelInfo {
+  margin: 0;
+  font-size: var(--rpl-demo-font-size-sm);
+  opacity: 0.9;
+}
+
+.panelText {
+  margin: 0;
+  font-size: var(--rpl-demo-font-size-sm);
+  opacity: 0.9;
+  line-height: 1.5;
+}
+
+.sizeInfo {
+  margin-top: var(--rpl-demo-space-md);
+}
+
+.sizeInfoText {
+  font-size: 0.75rem;
+  opacity: 0.8;
+}

package/src/demo/pages/ResizeHandle/components/BothDirectionsDemo.tsx

@@ -0,0 +1,41 @@
+/**
+ * @file Both directions resize handle demo
+ */
+import * as React from "react";
+import { ResizeHandle } from "../../../../components/resizer/ResizeHandle";
+import styles from "./BothDirectionsDemo.module.css";
+
+export const BothDirectionsDemo: React.FC = () => {
+  const [boxWidth, setBoxWidth] = React.useState(400);
+  const [boxHeight, setBoxHeight] = React.useState(300);
+
+  const handleVerticalResize = React.useCallback((delta: number) => {
+    setBoxWidth((prev) => Math.max(200, Math.min(800, prev - delta)));
+  }, []);
+
+  const handleHorizontalResize = React.useCallback((delta: number) => {
+    setBoxHeight((prev) => Math.max(150, Math.min(600, prev - delta)));
+  }, []);
+
+  return (
+    <div className={styles.demoContainerInline}>
+      <div className={styles.verticalHandleWrapper}>
+        <ResizeHandle direction="vertical" onResize={handleVerticalResize} />
+      </div>
+      <div className={styles.horizontalHandleWrapper}>
+        <ResizeHandle direction="horizontal" onResize={handleHorizontalResize} />
+      </div>
+      <div className={styles.resizableBox} style={{ width: `${boxWidth}px`, height: `${boxHeight}px` }}>
+        <h4 className={styles.panelTitle}>Resizable Box</h4>
+        <p className={styles.panelInfo}>
+          Width: {boxWidth}px × Height: {boxHeight}px
+        </p>
+        <p className={styles.panelText}>Drag the handles on the left or top edge to resize.</p>
+        <div className={styles.sizeInfo}>
+          <p className={styles.sizeInfoText}>Min Width: 200px, Max Width: 800px</p>
+          <p className={styles.sizeInfoText}>Min Height: 150px, Max Height: 600px</p>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/demo/pages/ResizeHandle/components/HorizontalResizeDemo.module.css

@@ -0,0 +1,61 @@
+.demoContainerVertical {
+  border: 1px solid var(--rpl-demo-sidebar-border);
+  border-radius: var(--rpl-demo-radius-lg);
+  overflow: hidden;
+  box-shadow: var(--rpl-demo-shadow-md);
+  background: #fff;
+}
+
+.horizontalHandleWrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.resizablePanelAlt {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  color: white;
+  padding: var(--rpl-demo-space-lg);
+  padding-top: var(--rpl-demo-space-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--rpl-demo-space-sm);
+}
+
+.panelTitle {
+  margin: 0;
+  font-size: var(--rpl-demo-font-size-md);
+  font-weight: 600;
+}
+
+.panelInfo {
+  margin: 0;
+  font-size: var(--rpl-demo-font-size-sm);
+  opacity: 0.9;
+}
+
+.panelText {
+  margin: 0;
+  font-size: var(--rpl-demo-font-size-sm);
+  opacity: 0.9;
+  line-height: 1.5;
+}
+
+.staticPanelMinHeight {
+  background: #fff;
+  padding: var(--rpl-demo-space-lg);
+  min-height: 100px;
+}
+
+.staticPanelTitle {
+  margin-top: 0;
+  font-size: var(--rpl-demo-font-size-md);
+  font-weight: 600;
+  color: var(--rpl-demo-text-primary);
+}

package/src/demo/pages/ResizeHandle/components/HorizontalResizeDemo.tsx

@@ -0,0 +1,33 @@
+/**
+ * @file Horizontal resize handle demo
+ */
+import * as React from "react";
+import { ResizeHandle } from "../../../../components/resizer/ResizeHandle";
+import styles from "./HorizontalResizeDemo.module.css";
+
+export const HorizontalResizeDemo: React.FC = () => {
+  const [panelHeight, setPanelHeight] = React.useState(200);
+
+  const handleResize = React.useCallback((delta: number) => {
+    setPanelHeight((prev) => Math.max(100, Math.min(500, prev - delta)));
+  }, []);
+
+  return (
+    <div className={styles.demoContainerVertical}>
+      <div style={{ position: "relative" }}>
+        <div className={styles.horizontalHandleWrapper}>
+          <ResizeHandle direction="horizontal" onResize={handleResize} />
+        </div>
+        <div className={styles.resizablePanelAlt} style={{ height: `${panelHeight}px` }}>
+          <h4 className={styles.panelTitle}>Resizable Panel</h4>
+          <p className={styles.panelInfo}>Height: {panelHeight}px</p>
+          <p className={styles.panelText}>Drag the handle on the top edge to resize this panel.</p>
+        </div>
+      </div>
+      <div className={styles.staticPanelMinHeight}>
+        <h4 className={styles.staticPanelTitle}>Fixed Content</h4>
+        <p>This area remains static.</p>
+      </div>
+    </div>
+  );
+};

package/src/demo/pages/ResizeHandle/components/NestedPanelsDemo.module.css

@@ -0,0 +1,83 @@
+.demoContainerNested {
+  border: 1px solid var(--rpl-demo-sidebar-border);
+  border-radius: var(--rpl-demo-radius-lg);
+  overflow: hidden;
+  height: 400px;
+  box-shadow: var(--rpl-demo-shadow-md);
+  background: #fff;
+}
+
+.nestedLayout {
+  display: flex;
+  height: 100%;
+}
+
+.resizeWrapper {
+  position: relative;
+  display: flex;
+}
+
+.verticalHandleWrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.horizontalHandleWrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.nestedSidebar {
+  background: var(--rpl-demo-surface-secondary);
+  padding: var(--rpl-demo-space-lg);
+  padding-left: var(--rpl-demo-space-xl);
+  overflow: auto;
+}
+
+.nestedTop {
+  background: #fff3e0;
+  padding: var(--rpl-demo-space-lg);
+  padding-top: var(--rpl-demo-space-xl);
+  overflow: auto;
+}
+
+.nestedBottom {
+  flex: 1;
+  background: #fff;
+  padding: var(--rpl-demo-space-lg);
+  overflow: auto;
+}
+
+.staticPanelTitle {
+  margin-top: 0;
+  font-size: var(--rpl-demo-font-size-md);
+  font-weight: 600;
+  color: var(--rpl-demo-text-primary);
+}
+
+.panelInfo {
+  margin: 0;
+  font-size: var(--rpl-demo-font-size-sm);
+  color: var(--rpl-demo-text-secondary);
+}
+
+.panelText {
+  margin: 0;
+  font-size: var(--rpl-demo-font-size-sm);
+  color: var(--rpl-demo-text-secondary);
+  line-height: 1.5;
+}

package/src/demo/pages/ResizeHandle/components/NestedPanelsDemo.tsx

@@ -0,0 +1,53 @@
+/**
+ * @file Nested panels with resize handles demo
+ */
+import * as React from "react";
+import { ResizeHandle } from "../../../../components/resizer/ResizeHandle";
+import styles from "./NestedPanelsDemo.module.css";
+
+export const NestedPanelsDemo: React.FC = () => {
+  const [panelWidth, setPanelWidth] = React.useState(300);
+  const [panelHeight, setPanelHeight] = React.useState(200);
+
+  const handleVerticalResize = React.useCallback((delta: number) => {
+    setPanelWidth((prev) => Math.max(150, Math.min(600, prev - delta)));
+  }, []);
+
+  const handleHorizontalResize = React.useCallback((delta: number) => {
+    setPanelHeight((prev) => Math.max(100, Math.min(500, prev - delta)));
+  }, []);
+
+  return (
+    <div className={styles.demoContainerNested}>
+      <div className={styles.nestedLayout}>
+        <div className={styles.resizeWrapper}>
+          <div className={styles.verticalHandleWrapper}>
+            <ResizeHandle direction="vertical" onResize={handleVerticalResize} />
+          </div>
+          <div className={styles.nestedSidebar} style={{ width: `${panelWidth}px` }}>
+            <h4 className={styles.staticPanelTitle}>Sidebar</h4>
+            <p className={styles.panelInfo}>Width: {panelWidth}px</p>
+            <p className={styles.panelText}>This sidebar can be resized using the left handle.</p>
+          </div>
+        </div>
+
+        <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
+          <div style={{ position: "relative" }}>
+            <div className={styles.horizontalHandleWrapper}>
+              <ResizeHandle direction="horizontal" onResize={handleHorizontalResize} />
+            </div>
+            <div className={styles.nestedTop} style={{ height: `${panelHeight}px` }}>
+              <h4 className={styles.staticPanelTitle}>Top Panel</h4>
+              <p className={styles.panelInfo}>Height: {panelHeight}px</p>
+              <p className={styles.panelText}>This panel can be resized using the top handle.</p>
+            </div>
+          </div>
+          <div className={styles.nestedBottom}>
+            <h4 className={styles.staticPanelTitle}>Main Content</h4>
+            <p>This area fills the remaining space.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/demo/pages/ResizeHandle/components/VerticalResizeDemo.module.css

@@ -0,0 +1,68 @@
+.demoContainer {
+  display: flex;
+  height: 300px;
+  border: 1px solid var(--rpl-demo-sidebar-border);
+  border-radius: var(--rpl-demo-radius-lg);
+  overflow: hidden;
+  box-shadow: var(--rpl-demo-shadow-md);
+  background: #fff;
+}
+
+.resizeWrapper {
+  position: relative;
+  display: flex;
+}
+
+.verticalHandleWrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.resizablePanel {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: var(--rpl-demo-space-lg);
+  padding-left: var(--rpl-demo-space-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--rpl-demo-space-sm);
+}
+
+.panelTitle {
+  margin: 0;
+  font-size: var(--rpl-demo-font-size-md);
+  font-weight: 600;
+}
+
+.panelInfo {
+  margin: 0;
+  font-size: var(--rpl-demo-font-size-sm);
+  opacity: 0.9;
+}
+
+.panelText {
+  margin: 0;
+  font-size: var(--rpl-demo-font-size-sm);
+  opacity: 0.9;
+  line-height: 1.5;
+}
+
+.staticPanel {
+  flex: 1;
+  background: #fff;
+  padding: var(--rpl-demo-space-lg);
+}
+
+.staticPanelTitle {
+  margin-top: 0;
+  font-size: var(--rpl-demo-font-size-md);
+  font-weight: 600;
+  color: var(--rpl-demo-text-primary);
+}

package/src/demo/pages/ResizeHandle/components/VerticalResizeDemo.tsx

@@ -0,0 +1,33 @@
+/**
+ * @file Vertical resize handle demo
+ */
+import * as React from "react";
+import { ResizeHandle } from "../../../../components/resizer/ResizeHandle";
+import styles from "./VerticalResizeDemo.module.css";
+
+export const VerticalResizeDemo: React.FC = () => {
+  const [panelWidth, setPanelWidth] = React.useState(300);
+
+  const handleResize = React.useCallback((delta: number) => {
+    setPanelWidth((prev) => Math.max(150, Math.min(600, prev - delta)));
+  }, []);
+
+  return (
+    <div className={styles.demoContainer}>
+      <div className={styles.resizeWrapper}>
+        <div className={styles.verticalHandleWrapper}>
+          <ResizeHandle direction="vertical" onResize={handleResize} />
+        </div>
+        <div className={styles.resizablePanel} style={{ width: `${panelWidth}px` }}>
+          <h4 className={styles.panelTitle}>Resizable Panel</h4>
+          <p className={styles.panelInfo}>Width: {panelWidth}px</p>
+          <p className={styles.panelText}>Drag the handle on the left edge to resize this panel.</p>
+        </div>
+      </div>
+      <div className={styles.staticPanel}>
+        <h4 className={styles.staticPanelTitle}>Fixed Content</h4>
+        <p>This area remains static.</p>
+      </div>
+    </div>
+  );
+};

package/src/demo/pages/ResizeHandle/horizontal/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * @file ResizeHandle - Horizontal resize page
+ */
+import * as React from "react";
+import { HorizontalResizeDemo } from "../components/HorizontalResizeDemo";
+import HorizontalResizeDemoSource from "../components/HorizontalResizeDemo.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage title="ResizeHandle / Horizontal" code={HorizontalResizeDemoSource} codeTitle="HorizontalResizeDemo.tsx">
+      <HorizontalResizeDemo />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/ResizeHandle/index.module.css

@@ -0,0 +1,11 @@
+.infoBox {
+  padding: 1rem;
+  background: #f5f5f5;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.infoBox strong {
+  font-weight: 600;
+}

package/src/demo/pages/ResizeHandle/index.tsx

@@ -0,0 +1,71 @@
+/**
+ * @file ResizeHandle component preview page
+ */
+import * as React from "react";
+import { Section, Story } from "../../components/Story";
+import { CodePreview } from "../../components/CodePreview";
+import { VerticalResizeDemo } from "./components/VerticalResizeDemo";
+import VerticalResizeDemoSource from "./components/VerticalResizeDemo.tsx?raw";
+import { HorizontalResizeDemo } from "./components/HorizontalResizeDemo";
+import HorizontalResizeDemoSource from "./components/HorizontalResizeDemo.tsx?raw";
+import { BothDirectionsDemo } from "./components/BothDirectionsDemo";
+import BothDirectionsDemoSource from "./components/BothDirectionsDemo.tsx?raw";
+import { NestedPanelsDemo } from "./components/NestedPanelsDemo";
+import NestedPanelsDemoSource from "./components/NestedPanelsDemo.tsx?raw";
+import { DemoPage } from "../../components/layout";
+import styles from "./index.module.css";
+
+export const ResizeHandlePreview: React.FC = () => {
+
+  return (
+    <DemoPage title="ResizeHandle Component" padding="2rem">
+      <Section title="Vertical Resize Handle">
+        <Story
+          title="Vertical Resize"
+          description="Drag the vertical handle on the left to resize the panel width. Min: 150px, Max: 600px"
+        >
+          <VerticalResizeDemo />
+        </Story>
+        <CodePreview code={VerticalResizeDemoSource} title="VerticalResizeDemo.tsx" />
+      </Section>
+
+      <Section title="Horizontal Resize Handle">
+        <Story
+          title="Horizontal Resize"
+          description="Drag the horizontal handle on the top to resize the panel height. Min: 100px, Max: 500px"
+        >
+          <HorizontalResizeDemo />
+        </Story>
+        <CodePreview code={HorizontalResizeDemoSource} title="HorizontalResizeDemo.tsx" />
+      </Section>
+
+      <Section title="Combined Resize Handles">
+        <Story
+          title="Both Directions"
+          description="A box with both vertical (left) and horizontal (top) resize handles. Try resizing from both edges!"
+        >
+          <BothDirectionsDemo />
+        </Story>
+        <CodePreview code={BothDirectionsDemoSource} title="BothDirectionsDemo.tsx" />
+      </Section>
+
+      <Section title="Nested Panels">
+        <Story title="Complex Layout" description="Multiple resize handles in a nested panel layout">
+          <NestedPanelsDemo />
+        </Story>
+        <CodePreview code={NestedPanelsDemoSource} title="NestedPanelsDemo.tsx" />
+      </Section>
+
+      <Section title="Usage Notes">
+        <Story title="Interaction Guide" description="How to use the resize handles">
+          <div className={styles.infoBox}>
+            <p>
+              <strong>Usage:</strong> Drag the resize handles to adjust panel dimensions. Each demo above is interactive
+              and can be resized within the specified min/max constraints.
+            </p>
+          </div>
+        </Story>
+      </Section>
+    </DemoPage>
+  );
+};

package/src/demo/pages/ResizeHandle/nested-panels/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * @file ResizeHandle - Nested panels page
+ */
+import * as React from "react";
+import { NestedPanelsDemo } from "../components/NestedPanelsDemo";
+import NestedPanelsDemoSource from "../components/NestedPanelsDemo.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage title="ResizeHandle / Nested Panels" code={NestedPanelsDemoSource} codeTitle="NestedPanelsDemo.tsx">
+      <NestedPanelsDemo />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/ResizeHandle/vertical/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * @file ResizeHandle - Vertical resize page
+ */
+import * as React from "react";
+import { VerticalResizeDemo } from "../components/VerticalResizeDemo";
+import VerticalResizeDemoSource from "../components/VerticalResizeDemo.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage title="ResizeHandle / Vertical" code={VerticalResizeDemoSource} codeTitle="VerticalResizeDemo.tsx">
+      <VerticalResizeDemo />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/ResponsiveLayout/adaptive-workspace/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * @file Responsive Layout - Adaptive workspace page
+ */
+import * as React from "react";
+import { ResponsiveWorkspace } from "../components/ResponsiveWorkspace";
+import ResponsiveWorkspaceSource from "../components/ResponsiveWorkspace.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage
+      title="Responsive Layout / Adaptive Workspace"
+      code={ResponsiveWorkspaceSource}
+      codeTitle="ResponsiveWorkspace.tsx"
+      maxWidth={1400}
+    >
+      <ResponsiveWorkspace />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;