react-panel-layout 0.5.2 → 0.6.0

package/src/demo/pages/FloatingPanelFrame/components/PanelWithMeta.tsx

@@ -0,0 +1,43 @@
+/**
+ * @file FloatingPanelFrame with metadata sample
+ */
+import * as React from "react";
+import {
+  FloatingPanelFrame,
+  FloatingPanelHeader,
+  FloatingPanelTitle,
+  FloatingPanelMeta,
+  FloatingPanelContent,
+} from "../../../../components/paneling/FloatingPanelFrame";
+import styles from "./PanelWithMeta.module.css";
+
+export const PanelWithMeta = () => (
+  <FloatingPanelFrame
+    style={{
+      width: "400px",
+      maxWidth: "100%",
+      boxShadow: "var(--rpl-demo-shadow-lg)",
+      borderRadius: "var(--rpl-demo-radius-lg)",
+      border: "1px solid var(--rpl-demo-sidebar-border)",
+      background: "#fff",
+    }}
+  >
+    <FloatingPanelHeader>
+      <FloatingPanelTitle>Settings</FloatingPanelTitle>
+      <FloatingPanelMeta>Last updated: 2 minutes ago</FloatingPanelMeta>
+    </FloatingPanelHeader>
+    <FloatingPanelContent>
+      <div className={styles.settingsContent}>
+        <label>
+          <input type="checkbox" /> Enable notifications
+        </label>
+        <label>
+          <input type="checkbox" defaultChecked /> Auto-save
+        </label>
+        <label>
+          <input type="checkbox" /> Dark mode
+        </label>
+      </div>
+    </FloatingPanelContent>
+  </FloatingPanelFrame>
+);

package/src/demo/pages/FloatingPanelFrame/components/ScrollablePanel.module.css

@@ -0,0 +1,11 @@
+.articleContent {
+  overflow: auto;
+}
+
+.articleContent h3 {
+  margin-top: 0;
+}
+
+.articleContent p {
+  line-height: 1.6;
+}

package/src/demo/pages/FloatingPanelFrame/components/ScrollablePanel.tsx

@@ -0,0 +1,42 @@
+/**
+ * @file Scrollable FloatingPanelFrame sample
+ */
+import * as React from "react";
+import {
+  FloatingPanelCloseButton,
+  FloatingPanelFrame,
+  FloatingPanelHeader,
+  FloatingPanelTitle,
+  FloatingPanelControls,
+  FloatingPanelContent,
+} from "../../../../components/paneling/FloatingPanelFrame";
+import styles from "./ScrollablePanel.module.css";
+
+export const ScrollablePanel: React.FC<{ onClose?: () => void }> = ({ onClose }) => (
+  <FloatingPanelFrame
+    style={{
+      width: "400px",
+      maxWidth: "100%",
+      maxHeight: "400px",
+    }}
+  >
+    <FloatingPanelHeader>
+      <FloatingPanelTitle>Long Article</FloatingPanelTitle>
+      <FloatingPanelControls>
+        <FloatingPanelCloseButton onClick={onClose} />
+      </FloatingPanelControls>
+    </FloatingPanelHeader>
+    <FloatingPanelContent style={{ overflow: "auto" }}>
+      <div className={styles.articleContent}>
+        <h3>Lorem Ipsum</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
+        <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
+        <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.</p>
+      </div>
+    </FloatingPanelContent>
+  </FloatingPanelFrame >
+);

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

@@ -0,0 +1,80 @@
+/**
+ * @file FloatingPanelFrame component preview page
+ */
+import * as React from "react";
+import { Section, Story, StoryActionButton } from "../../components/Story";
+import { CodePreview } from "../../components/CodePreview";
+import { BasicPanel } from "./components/BasicPanel";
+import BasicPanelSource from "./components/BasicPanel.tsx?raw";
+import { PanelWithMeta } from "./components/PanelWithMeta";
+import PanelWithMetaSource from "./components/PanelWithMeta.tsx?raw";
+import { PanelWithControls } from "./components/PanelWithControls";
+import PanelWithControlsSource from "./components/PanelWithControls.tsx?raw";
+import { ComplexPanel } from "./components/ComplexPanel";
+import ComplexPanelSource from "./components/ComplexPanel.tsx?raw";
+import { ScrollablePanel } from "./components/ScrollablePanel";
+import ScrollablePanelSource from "./components/ScrollablePanel.tsx?raw";
+import { DemoPage } from "../../components/layout";
+
+export const FloatingPanelFramePreview: React.FC = () => {
+  const [showPanel1, setShowPanel1] = React.useState(true);
+  const [showPanel2, setShowPanel2] = React.useState(true);
+  const [showPanel3, setShowPanel3] = React.useState(true);
+
+  return (
+    <DemoPage title="FloatingPanelFrame Components" padding="2rem">
+      <Section title="Basic Panel">
+        <Story
+          title="Simple Panel"
+          description="Basic floating panel with header, title, and content"
+        >
+          <BasicPanel />
+        </Story>
+        <CodePreview code={BasicPanelSource} title="BasicPanel.tsx" />
+      </Section>
+
+      <Section title="Panel with Meta Information">
+        <Story
+          title="Panel with Meta"
+          description="Panel with title and metadata"
+        >
+          <PanelWithMeta />
+        </Story>
+        <CodePreview code={PanelWithMetaSource} title="PanelWithMeta.tsx" />
+      </Section>
+
+      <Section title="Panel with Controls">
+        <Story
+          title="Panel with Action Buttons"
+          description="Panel with header controls"
+          actions={!showPanel1 ? <StoryActionButton onClick={() => setShowPanel1(true)}>Show Panel</StoryActionButton> : null}
+        >
+          {showPanel1 ? <PanelWithControls onClose={() => setShowPanel1(false)} /> : <p>Panel closed</p>}
+        </Story>
+        <CodePreview code={PanelWithControlsSource} title="PanelWithControls.tsx" />
+      </Section>
+
+      <Section title="Complex Panel">
+        <Story
+          title="Full Featured Panel"
+          description="Panel with all components: title, meta, controls, and rich content"
+          actions={!showPanel2 ? <StoryActionButton onClick={() => setShowPanel2(true)}>Show Panel</StoryActionButton> : null}
+        >
+          {showPanel2 ? <ComplexPanel onClose={() => setShowPanel2(false)} /> : <p>Panel closed</p>}
+        </Story>
+        <CodePreview code={ComplexPanelSource} title="ComplexPanel.tsx" />
+      </Section>
+
+      <Section title="Scrollable Content">
+        <Story
+          title="Long Content Panel"
+          description="Panel with scrollable content area"
+          actions={!showPanel3 ? <StoryActionButton onClick={() => setShowPanel3(true)}>Show Panel</StoryActionButton> : null}
+        >
+          {showPanel3 ? <ScrollablePanel onClose={() => setShowPanel3(false)} /> : <p>Panel closed</p>}
+        </Story>
+        <CodePreview code={ScrollablePanelSource} title="ScrollablePanel.tsx" />
+      </Section>
+    </DemoPage>
+  );
+};

package/src/demo/pages/FloatingPanelFrame/scrollable/index.tsx

@@ -0,0 +1,30 @@
+/**
+ * @file FloatingPanelFrame - Scrollable sample page
+ */
+import * as React from "react";
+import { ScrollablePanel } from "../components/ScrollablePanel";
+import ScrollablePanelSource from "../components/ScrollablePanel.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  const [open, setOpen] = React.useState(true);
+
+  const renderBody = (): React.ReactNode => {
+    if (open) {
+      return <ScrollablePanel onClose={() => { setOpen(false); }} />;
+    }
+    return <button onClick={() => { setOpen(true); }}>Show Panel</button>;
+  };
+
+  return (
+    <SingleSamplePage
+      title="FloatingPanelFrame / Scrollable"
+      code={ScrollablePanelSource}
+      codeTitle="ScrollablePanel.tsx"
+    >
+      {renderBody()}
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/FloatingPanelFrame/with-controls/index.tsx

@@ -0,0 +1,30 @@
+/**
+ * @file FloatingPanelFrame - With Controls sample page
+ */
+import * as React from "react";
+import { PanelWithControls } from "../components/PanelWithControls";
+import PanelWithControlsSource from "../components/PanelWithControls.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  const [open, setOpen] = React.useState(true);
+
+  const renderBody = (): React.ReactNode => {
+    if (open) {
+      return <PanelWithControls onClose={() => { setOpen(false); }} />;
+    }
+    return <button onClick={() => { setOpen(true); }}>Show Panel</button>;
+  };
+
+  return (
+    <SingleSamplePage
+      title="FloatingPanelFrame / With Controls"
+      code={PanelWithControlsSource}
+      codeTitle="PanelWithControls.tsx"
+    >
+      {renderBody()}
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/FloatingPanelFrame/with-meta/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * @file FloatingPanelFrame - With Meta sample page
+ */
+import * as React from "react";
+import { PanelWithMeta } from "../components/PanelWithMeta";
+import PanelWithMetaSource from "../components/PanelWithMeta.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage title="FloatingPanelFrame / With Meta" code={PanelWithMetaSource} codeTitle="PanelWithMeta.tsx">
+      <PanelWithMeta />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/HorizontalDivider/components/PanelsWithRichContent.module.css

@@ -0,0 +1,112 @@
+.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;
+}
+
+.demoContainerTall {
+  height: 400px;
+}
+
+.sidebarPanel {
+  background: var(--rpl-demo-surface-secondary);
+  padding: var(--rpl-demo-space-lg);
+  overflow: auto;
+}
+
+.sidebarTitle {
+  margin-top: 0;
+  font-size: var(--rpl-demo-font-size-md);
+  font-weight: 600;
+}
+
+.panelInfo {
+  margin: 0;
+  font-size: var(--rpl-demo-font-size-sm);
+  color: var(--rpl-demo-text-secondary);
+}
+
+.sidebarNav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: var(--rpl-demo-space-md);
+}
+
+.navLink {
+  padding: 0.5rem 0.75rem;
+  background: transparent;
+  border-radius: var(--rpl-demo-radius-md);
+  text-decoration: none;
+  color: var(--rpl-demo-text-secondary);
+  display: block;
+  font-size: var(--rpl-demo-font-size-sm);
+  transition: all 0.2s ease;
+}
+
+.navLink:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: var(--rpl-demo-text-primary);
+}
+
+.recentFiles {
+  margin-top: var(--rpl-demo-space-xl);
+}
+
+.recentFiles h5 {
+  margin-top: 0;
+  font-size: var(--rpl-demo-font-size-sm);
+  color: var(--rpl-demo-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.recentFiles ul {
+  font-size: var(--rpl-demo-font-size-sm);
+  padding-left: 1.25rem;
+  color: var(--rpl-demo-text-secondary);
+}
+
+.mainPanel {
+  flex: 1;
+  background: #fff;
+  padding: var(--rpl-demo-space-lg);
+  overflow: auto;
+}
+
+.mainTitle {
+  margin-top: 0;
+  font-size: var(--rpl-demo-font-size-lg);
+  font-weight: 700;
+}
+
+.cardList {
+  margin-top: var(--rpl-demo-space-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--rpl-demo-space-md);
+}
+
+.card {
+  padding: var(--rpl-demo-space-md);
+  background: #fff;
+  border-radius: var(--rpl-demo-radius-md);
+  border: 1px solid var(--rpl-demo-sidebar-border);
+  box-shadow: var(--rpl-demo-shadow-sm);
+}
+
+.card h5 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-size: var(--rpl-demo-font-size-md);
+}
+
+.card p {
+  margin: 0;
+  font-size: var(--rpl-demo-font-size-sm);
+  color: var(--rpl-demo-text-secondary);
+}

package/src/demo/pages/HorizontalDivider/components/PanelsWithRichContent.tsx

@@ -0,0 +1,56 @@
+/**
+ * @file Panels with rich content using HorizontalDivider
+ */
+import * as React from "react";
+import { HorizontalDivider } from "../../../../components/resizer/HorizontalDivider";
+import styles from "./PanelsWithRichContent.module.css";
+
+export const PanelsWithRichContent: React.FC = () => {
+  const [leftWidth, setLeftWidth] = React.useState(300);
+
+  const handleResize = React.useCallback((deltaX: number) => {
+    setLeftWidth((prev) => Math.max(150, Math.min(500, prev + deltaX)));
+  }, []);
+
+  return (
+    <div className={`${styles.demoContainer} ${styles.demoContainerTall}`}>
+      <div className={styles.sidebarPanel} style={{ width: `${leftWidth}px` }}>
+        <h4 className={styles.sidebarTitle}>Sidebar</h4>
+        <p className={styles.panelInfo}>Width: {leftWidth}px</p>
+        <nav className={styles.sidebarNav}>
+          <a href="#" className={styles.navLink}>Dashboard</a>
+          <a href="#" className={styles.navLink}>Projects</a>
+          <a href="#" className={styles.navLink}>Tasks</a>
+          <a href="#" className={styles.navLink}>Settings</a>
+        </nav>
+        <div className={styles.recentFiles}>
+          <h5>Recent Files</h5>
+          <ul>
+            <li>document.pdf</li>
+            <li>image.png</li>
+            <li>report.docx</li>
+          </ul>
+        </div>
+      </div>
+      <HorizontalDivider onResize={handleResize} />
+      <div className={styles.mainPanel}>
+        <h4 className={styles.mainTitle}>Main Content</h4>
+        <p>This is the main content area. It contains the primary information and controls.</p>
+        <div className={styles.cardList}>
+          <div className={styles.card}>
+            <h5>Card 1</h5>
+            <p>Some content in a card</p>
+          </div>
+          <div className={styles.card}>
+            <h5>Card 2</h5>
+            <p>More content in another card</p>
+          </div>
+          <div className={styles.card}>
+            <h5>Card 3</h5>
+            <p>Even more content</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/demo/pages/HorizontalDivider/components/SimpleResizablePanels.module.css

@@ -0,0 +1,46 @@
+.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;
+}
+
+.leftPanel {
+  background: var(--rpl-demo-surface-secondary);
+  padding: var(--rpl-demo-space-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--rpl-demo-space-sm);
+}
+
+.rightPanel {
+  flex: 1;
+  background: #fff;
+  padding: var(--rpl-demo-space-lg);
+  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;
+  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/HorizontalDivider/components/SimpleResizablePanels.tsx

@@ -0,0 +1,29 @@
+/**
+ * @file Simple resizable panels with HorizontalDivider
+ */
+import * as React from "react";
+import { HorizontalDivider } from "../../../../components/resizer/HorizontalDivider";
+import styles from "./SimpleResizablePanels.module.css";
+
+export const SimpleResizablePanels: React.FC = () => {
+  const [leftWidth, setLeftWidth] = React.useState(200);
+
+  const handleResize = React.useCallback((deltaX: number) => {
+    setLeftWidth((prev) => Math.max(100, Math.min(400, prev + deltaX)));
+  }, []);
+
+  return (
+    <div className={styles.demoContainer}>
+      <div className={styles.leftPanel} style={{ width: `${leftWidth}px` }}>
+        <h4 className={styles.panelTitle}>Left Panel</h4>
+        <p className={styles.panelInfo}>Width: {leftWidth}px</p>
+        <p className={styles.panelText}>This panel can be resized by dragging the divider.</p>
+      </div>
+      <HorizontalDivider onResize={handleResize} />
+      <div className={styles.rightPanel}>
+        <h4 className={styles.panelTitle}>Right Panel</h4>
+        <p className={styles.panelText}>This panel automatically fills the remaining space.</p>
+      </div>
+    </div>
+  );
+};

package/src/demo/pages/HorizontalDivider/components/ThreePanelLayout.module.css

@@ -0,0 +1,54 @@
+.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;
+}
+
+.demoContainerMedium {
+  height: 350px;
+}
+
+.leftPanel {
+  background: var(--rpl-demo-surface-secondary);
+  padding: var(--rpl-demo-space-lg);
+  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;
+  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;
+}
+
+.centerPanel {
+  flex: 1;
+  background: #fff;
+  padding: var(--rpl-demo-space-lg);
+  overflow: auto;
+}
+
+.centerTitle {
+  margin-top: 0;
+  font-size: var(--rpl-demo-font-size-md);
+  font-weight: 600;
+}

package/src/demo/pages/HorizontalDivider/components/ThreePanelLayout.tsx

@@ -0,0 +1,30 @@
+/**
+ * @file Three panel layout with HorizontalDivider
+ */
+import * as React from "react";
+import { HorizontalDivider } from "../../../../components/resizer/HorizontalDivider";
+import styles from "./ThreePanelLayout.module.css";
+
+export const ThreePanelLayout: React.FC = () => {
+  const [leftWidth, setLeftWidth] = React.useState(250);
+
+  const handleResize = React.useCallback((deltaX: number) => {
+    setLeftWidth((prev) => Math.max(100, Math.min(600, prev + deltaX)));
+  }, []);
+
+  return (
+    <div className={`${styles.demoContainer} ${styles.demoContainerMedium}`}>
+      <div className={styles.leftPanel} style={{ width: `${leftWidth}px` }}>
+        <h4 className={styles.panelTitle}>Left Panel</h4>
+        <p className={styles.panelInfo}>Width: {leftWidth}px</p>
+        <p className={styles.panelText}>This is the left panel. You can put navigation or tools here.</p>
+      </div>
+      <HorizontalDivider onResize={handleResize} />
+      <div className={styles.centerPanel}>
+        <h4 className={styles.centerTitle}>Center Panel</h4>
+        <p>This is the center panel with the main content.</p>
+        <p>It automatically fills the available space between the left and right panels.</p>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,14 @@
+.infoBox {
+  padding: 1rem;
+  background: #f5f5f5;
+  border-radius: 8px;
+  font-size: 0.875rem;
+}
+
+.infoBox p {
+  margin: 0;
+}
+
+.infoBox strong {
+  font-weight: 600;
+}

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

@@ -0,0 +1,64 @@
+/**
+ * @file HorizontalDivider component preview page
+ */
+import * as React from "react";
+import { Section, Story } from "../../components/Story";
+import { CodePreview } from "../../components/CodePreview";
+import { SimpleResizablePanels } from "./components/SimpleResizablePanels";
+import SimpleResizablePanelsSource from "./components/SimpleResizablePanels.tsx?raw";
+import { PanelsWithRichContent } from "./components/PanelsWithRichContent";
+import PanelsWithRichContentSource from "./components/PanelsWithRichContent.tsx?raw";
+import { ThreePanelLayout } from "./components/ThreePanelLayout";
+import ThreePanelLayoutSource from "./components/ThreePanelLayout.tsx?raw";
+import { DemoPage } from "../../components/layout";
+import styles from "./index.module.css";
+
+export const HorizontalDividerPreview: React.FC = () => {
+  return (
+    <DemoPage title="HorizontalDivider Component" padding="2rem">
+      <Section title="Basic Usage">
+        <Story
+          title="Simple Resizable Panels"
+          description="Drag the divider to resize the left and right panels. Min width: 100px, Max width: 400px"
+        >
+          <SimpleResizablePanels />
+        </Story>
+        <CodePreview code={SimpleResizablePanelsSource} title="SimpleResizablePanels.tsx" />
+      </Section>
+
+      <Section title="With Content">
+        <Story
+          title="Panels with Rich Content"
+          description="Resize panels containing various content types. Min width: 150px, Max width: 500px"
+        >
+          <PanelsWithRichContent />
+        </Story>
+        <CodePreview code={PanelsWithRichContentSource} title="PanelsWithRichContent.tsx" />
+      </Section>
+
+      <Section title="Three-Panel Layout">
+        <Story
+          title="Multiple Dividers"
+          description="Use multiple dividers to create complex layouts. Each panel can be resized independently."
+        >
+          <ThreePanelLayout />
+        </Story>
+        <CodePreview code={ThreePanelLayoutSource} title="ThreePanelLayout.tsx" />
+      </Section>
+
+      <Section title="Interactive Demo">
+        <Story
+          title="Reset & Control"
+          description="Test the divider with additional controls"
+        >
+          <div className={styles.infoBox}>
+            <p>
+              <strong>Usage:</strong> Drag the vertical divider bars to resize the panels. The divider provides visual
+              feedback on hover and during dragging.
+            </p>
+          </div>
+        </Story>
+      </Section>
+    </DemoPage>
+  );
+};