react-panel-layout 0.5.2 → 0.6.0

package/src/demo/pages/PanelLayout/draggable-overlays/index.tsx

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

package/src/demo/pages/PanelLayout/ide-layout/index.tsx

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

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

@@ -0,0 +1,94 @@
+/**
+ * @file Panel Layout component preview page
+ */
+import * as React from "react";
+import { Section, Story } from "../../components/Story";
+import { CodePreview } from "../../components/CodePreview";
+import { IDELayout } from "./components/IDELayout";
+import IDELayoutSource from "./components/IDELayout.tsx?raw";
+import { SimpleGrid } from "./components/SimpleGrid";
+import SimpleGridSource from "./components/SimpleGrid.tsx?raw";
+import { DashboardLayout } from "./components/DashboardLayout";
+import DashboardLayoutSource from "./components/DashboardLayout.tsx?raw";
+import { DraggableOverlays } from "./components/DraggableOverlays";
+import DraggableOverlaysSource from "./components/DraggableOverlays.tsx?raw";
+import { DrawerMenuLayout } from "../Drawer/components/DrawerMenuLayout";
+import DrawerMenuLayoutSource from "../Drawer/components/DrawerMenuLayout.tsx?raw";
+import { DrawerBasics } from "../Drawer/components/DrawerBasics";
+import DrawerBasicsSource from "../Drawer/components/DrawerBasics.tsx?raw";
+import { DemoPage } from "../../components/layout";
+
+export const PanelLayoutPreview: React.FC = () => {
+  return (
+    <DemoPage title="Panel Layout System" padding="2rem">
+      <Section title="Simple Grid Layout">
+        <Story title="2x2 Grid" description="Basic grid layout with equal-sized cells">
+          <div style={{ width: "100%", height: "400px" }}>
+            <SimpleGrid />
+          </div>
+        </Story>
+        <CodePreview code={SimpleGridSource} title="SimpleGrid.tsx" />
+      </Section>
+
+      <Section title="IDE-Style Layout">
+        <Story
+          title="IDE Layout with Resizable Panels"
+          description="Complex layout with toolbar, sidebar, canvas, inspector, and status bar. Includes draggable floating panel."
+        >
+          <div style={{ width: "100%", height: "600px" }}>
+            <IDELayout />
+          </div>
+        </Story>
+        <CodePreview code={IDELayoutSource} title="IDELayout.tsx" />
+      </Section>
+
+      <Section title="Dashboard Layout">
+        <Story
+          title="Dashboard with Stats and Charts"
+          description="Dashboard-style layout with header, stat cards, charts, and activity feed"
+        >
+          <div style={{ width: "100%", height: "600px" }}>
+            <DashboardLayout />
+          </div>
+        </Story>
+        <CodePreview code={DashboardLayoutSource} title="DashboardLayout.tsx" />
+      </Section>
+
+      <Section title="Drawer Basics">
+        <Story
+          title="Default drawer styling"
+          description="Shows the built-in drawer chrome and header; click the button to open the left-anchored drawer."
+        >
+          <div style={{ width: "100%", height: "520px" }}>
+            <DrawerBasics />
+          </div>
+        </Story>
+        <CodePreview code={DrawerBasicsSource} title="DrawerBasics.tsx" />
+      </Section>
+
+      <Section title="Drawer Menu Layout">
+        <Story
+          title="Workspace + Drawer"
+          description="A desktop workspace with a slide-in navigation drawer controlled via DrawerLayers."
+        >
+          <div style={{ width: "100%", height: "640px" }}>
+            <DrawerMenuLayout />
+          </div>
+        </Story>
+        <CodePreview code={DrawerMenuLayoutSource} title="DrawerMenuLayout.tsx" />
+      </Section>
+
+      <Section title="Draggable Overlays">
+        <Story
+          title="Floating Draggable Panels"
+          description="Canvas with multiple draggable floating panels for tools, colors, and settings"
+        >
+          <div style={{ width: "100%", height: "600px" }}>
+            <DraggableOverlays />
+          </div>
+        </Story>
+        <CodePreview code={DraggableOverlaysSource} title="DraggableOverlays.tsx" />
+      </Section>
+    </DemoPage>
+  );
+};

package/src/demo/pages/PanelLayout/simple-grid/index.tsx

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

package/src/demo/pages/PanelSystem/PanelSystemPreview.module.css

@@ -0,0 +1,20 @@
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.panelContainer {
+  flex: 1;
+  min-height: 0;
+}
+
+.panelSystem {
+  width: 100%;
+  height: 100%;
+}
+
+.tabContent {
+  padding: 12px;
+}

package/src/demo/pages/PanelSystem/PanelSystemPreview.tsx

@@ -0,0 +1,101 @@
+/**
+ * @file PanelSystem Preview (single component per page)
+ */
+import * as React from "react";
+import { PanelSystem, buildInitialState } from "../../../index";
+import type { TabDefinition } from "../../../index";
+import { createPanelView } from "../../utils/createPanelView";
+import { ChromeTabBar, VSCodeTabBar, GitHubTabBar } from "../../components/tab-styles/index";
+import {
+  DemoTabbarConfigProvider,
+  useTabbarConfigState,
+  TabbarConfigControls,
+  type TabStyle,
+} from "../../contexts/TabbarDemoConfig";
+import type { TabBarRenderProps } from "../../../modules/panels/state/types";
+import styles from "./PanelSystemPreview.module.css";
+
+const CounterContent: React.FC<{ id: string; title: string }> = ({ id, title }) => {
+  const [count, setCount] = React.useState(0);
+  return (
+    <div className={styles.tabContent}>
+      <div>{title} content (id: {id})</div>
+      <div style={{ marginTop: 12 }}>
+        <span>count: {count}</span>
+        <button type="button" onClick={() => setCount((c) => c + 1)} style={{ marginLeft: 8 }}>
+          +1
+        </button>
+      </div>
+    </div>
+  );
+};
+
+const makeTabs = (): TabDefinition[] => {
+  const mk = (id: string, title: string): TabDefinition => ({
+    id,
+    title,
+    render: (panelId) => <CounterContent key={panelId} id={panelId} title={title} />,
+  });
+  return [mk("welcome", "Welcome"), mk("explorer", "Explorer"), mk("preview", "Preview")];
+};
+
+const useIdFactory = (): (() => string) => {
+  const counterRef = React.useRef(2);
+  return React.useCallback((): string => {
+    counterRef.current += 1;
+    return `g_${String(counterRef.current)}`;
+  }, []);
+};
+
+const usePanelIdFactory = (): (() => string) => {
+  const counterRef = React.useRef(0);
+  return React.useCallback((): string => {
+    counterRef.current += 1;
+    return `p_${String(counterRef.current)}`;
+  }, []);
+};
+
+const tabBarMap: Record<TabStyle, React.ComponentType<TabBarRenderProps>> = {
+  chrome: ChromeTabBar,
+  vscode: VSCodeTabBar,
+  github: GitHubTabBar,
+};
+
+export const PanelSystemPreview: React.FC = () => {
+  const config = useTabbarConfigState();
+  const tabs = React.useMemo(() => makeTabs(), []);
+  const initialState = React.useMemo(() => buildInitialState(tabs), [tabs]);
+  const createGroupId = useIdFactory();
+  const createPanelId = usePanelIdFactory();
+  const View = React.useMemo(() => createPanelView(tabBarMap[config.tabStyle]), [config.tabStyle]);
+
+  return (
+    <div className={styles.container}>
+      <TabbarConfigControls
+        tabStyle={config.tabStyle}
+        setTabStyle={config.setTabStyle}
+        addPlacement={config.addPlacement}
+        setAddPlacement={config.setAddPlacement}
+        doubleClickToAdd={config.doubleClickToAdd}
+        setDoubleClickToAdd={config.setDoubleClickToAdd}
+        useCustomButtons={config.useCustomButtons}
+        setUseCustomButtons={config.setUseCustomButtons}
+      />
+      <div className={styles.panelContainer}>
+        <DemoTabbarConfigProvider value={config.configValue}>
+          <PanelSystem
+            initialState={initialState}
+            createGroupId={createGroupId}
+            createPanelId={createPanelId}
+            layoutMode="grid"
+            gridTracksInteractive={false}
+            dragThresholdPx={6}
+            doubleClickToAdd={config.doubleClickToAdd}
+            className={styles.panelSystem}
+            view={View}
+          />
+        </DemoTabbarConfigProvider>
+      </div>
+    </div>
+  );
+};

package/src/demo/pages/PanelSystem/preview/index.tsx

@@ -0,0 +1,18 @@
+/**
+ * @file PanelSystem - Preview page
+ */
+import * as React from "react";
+import { PanelSystemPreview } from "../PanelSystemPreview";
+import { DemoPage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <DemoPage title="PanelSystem / Preview" padding="var(--rpl-demo-space-lg)" fullHeight maxWidth="none">
+      <div style={{ flex: 1, minHeight: 0 }}>
+        <PanelSystemPreview />
+      </div>
+    </DemoPage>
+  );
+};
+
+export default Page;

package/src/demo/pages/PanelSystem/tabbar/index.tsx

@@ -0,0 +1,129 @@
+/**
+ * @file PanelSystem - TabBar only page
+ */
+import * as React from "react";
+import type { GroupModel, GroupId, PanelId, TabBarRenderProps } from "../../../../modules/panels/state/types";
+import { InteractionsProvider } from "../../../../modules/panels/interactions/InteractionsContext";
+import { DomRegistryProvider } from "../../../../modules/panels/dom/DomRegistry";
+import { DemoPage } from "../../../components/layout";
+import { ChromeTabBar, VSCodeTabBar, GitHubTabBar } from "../../../components/tab-styles";
+import {
+  DemoTabbarConfigProvider,
+  useTabbarConfigState,
+  TabbarConfigControls,
+  type TabStyle,
+} from "../../../contexts/TabbarDemoConfig";
+
+const tabBarMap: Record<TabStyle, React.ComponentType<TabBarRenderProps>> = {
+  chrome: ChromeTabBar,
+  vscode: VSCodeTabBar,
+  github: GitHubTabBar,
+};
+
+const makeGroup = (id: GroupId): GroupModel => {
+  const tabs = [
+    { id: "welcome", title: "Welcome", render: () => "Welcome" },
+    { id: "explorer", title: "Explorer", render: () => "Explorer" },
+    { id: "preview", title: "Preview", render: () => "Preview" },
+  ];
+  const tabIds = tabs.map((t) => t.id);
+  return { id, activeTabId: "welcome", tabs, tabIds } as GroupModel;
+};
+
+const Page: React.FC = () => {
+  const config = useTabbarConfigState();
+  const [group, setGroup] = React.useState<GroupModel>(() => makeGroup("g_demo"));
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+  const nextId = React.useRef<number>(1);
+
+  const onClickTab = (tabId: PanelId): void => {
+    setGroup((prev) => ({ ...prev, activeTabId: tabId }));
+  };
+
+  const handleAddTab = (groupId: GroupId): void => {
+    if (groupId !== group.id) {
+      return;
+    }
+    const id = `new-${nextId.current++}`;
+    const tab = { id, title: `New ${id}`, render: () => `Tab ${id}` };
+    setGroup((prev) => {
+      const tabs = prev.tabs.concat([tab]);
+      const tabIds = tabs.map((t) => t.id);
+      return { ...prev, tabs, tabIds, activeTabId: id } as GroupModel;
+    });
+  };
+
+  const handleCloseTab = (groupId: GroupId, tabId: PanelId): void => {
+    if (groupId !== group.id) {
+      return;
+    }
+    setGroup((prev) => {
+      const tabs = prev.tabs.filter((t) => t.id !== tabId);
+      const tabIds = tabs.map((t) => t.id);
+      const activeTabId = prev.activeTabId === tabId ? (tabIds[0] ?? null) : prev.activeTabId;
+      return { ...prev, tabs, tabIds, activeTabId } as GroupModel;
+    });
+  };
+
+  const TabBarComp = tabBarMap[config.tabStyle];
+
+  return (
+    <DemoPage title="PanelSystem / TabBar" padding="var(--rpl-demo-space-lg)" maxWidth={960}>
+      <TabbarConfigControls
+        tabStyle={config.tabStyle}
+        setTabStyle={config.setTabStyle}
+        addPlacement={config.addPlacement}
+        setAddPlacement={config.setAddPlacement}
+        doubleClickToAdd={config.doubleClickToAdd}
+        setDoubleClickToAdd={config.setDoubleClickToAdd}
+        useCustomButtons={config.useCustomButtons}
+        setUseCustomButtons={config.setUseCustomButtons}
+      />
+      <div
+        ref={containerRef}
+        style={{
+          border: "1px solid var(--rpl-demo-sidebar-border)",
+          borderRadius: "var(--rpl-demo-radius-lg)",
+          background: "#fff",
+          padding: "var(--rpl-demo-space-md)",
+          marginTop: "var(--rpl-demo-space-lg)",
+          boxShadow: "var(--rpl-demo-shadow-md)",
+        }}
+      >
+        <DemoTabbarConfigProvider value={config.configValue}>
+          <DomRegistryProvider>
+            <InteractionsProvider
+              containerRef={containerRef}
+              dragThresholdPx={6}
+              onCommitContentDrop={() => { }}
+              onCommitTabDrop={({ fromGroupId, tabId, targetGroupId, targetIndex }) => {
+                if (fromGroupId !== targetGroupId) {
+                  return;
+                }
+                setGroup((prev) => {
+                  const currentIndex = prev.tabs.findIndex((t) => t.id === tabId);
+                  if (currentIndex === -1) {
+                    return prev;
+                  }
+                  const bounded = Math.max(0, Math.min(targetIndex, prev.tabs.length - 1));
+                  if (bounded === currentIndex) {
+                    return prev;
+                  }
+                  const tabs = prev.tabs.slice();
+                  const [moved] = tabs.splice(currentIndex, 1);
+                  tabs.splice(bounded, 0, moved);
+                  const tabIds = tabs.map((t) => t.id);
+                  return { ...prev, tabs, tabIds } as GroupModel;
+                });
+              }}
+            >
+              <TabBarComp group={group} onClickTab={onClickTab} onAddTab={handleAddTab} onCloseTab={handleCloseTab} doubleClickToAdd={config.doubleClickToAdd} />
+            </InteractionsProvider>
+          </DomRegistryProvider>
+        </DemoTabbarConfigProvider>
+      </div>
+    </DemoPage>
+  );
+};
+
+export default Page;

package/src/demo/pages/Pivot/basics/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * @file Pivot - Basics page
+ */
+import * as React from "react";
+import { PivotBasics } from "../components/PivotBasics";
+import PivotBasicsSource from "../components/PivotBasics.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage title="Pivot / Basics" code={PivotBasicsSource} codeTitle="PivotBasics.tsx" previewHeight={400}>
+      <PivotBasics />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;