@noya-app/noya-designsystem 0.1.76 → 0.1.78

package/src/components/resizablePanels/Panel.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import React, {
+  forwardRef,
+  ReactNode,
+  useEffect,
+  useId,
+  useImperativeHandle,
+} from "react";
+import { cx } from "../../utils/classNames";
+import { usePanelGroupContext } from "./PanelGroupContext";
+import { ImperativePanelHandle } from "./types";
+
+interface PanelProps {
+  id?: string;
+  order: number;
+  className?: string;
+  defaultSize?: number;
+  minSize?: number;
+  maxSize?: number;
+  collapsible?: boolean;
+  defaultCollapsed?: boolean;
+  children?: ReactNode;
+}
+
+export const Panel = forwardRef<ImperativePanelHandle, PanelProps>(
+  function Panel(
+    { id: propId, order, className, defaultSize, minSize, maxSize, collapsible, defaultCollapsed, children },
+    ref
+  ) {
+    const generatedId = useId();
+    const id = propId ?? generatedId;
+
+    const context = usePanelGroupContext();
+    const {
+      registerPanel,
+      unregisterPanel,
+      getPanelSize,
+      expandPanel,
+      collapsePanel,
+      isPanelExpanded,
+    } = context;
+
+    // Register panel on mount
+    useEffect(() => {
+      registerPanel({
+        id,
+        order,
+        defaultSize,
+        minSize,
+        maxSize,
+        collapsible,
+        defaultCollapsed,
+      });
+
+      return () => {
+        unregisterPanel(id);
+      };
+    }, [id, order, defaultSize, minSize, maxSize, collapsible, defaultCollapsed, registerPanel, unregisterPanel]);
+
+    const size = getPanelSize(id);
+    const isFlexPanel = defaultSize === undefined;
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        expand: () => expandPanel(id),
+        collapse: () => collapsePanel(id),
+        isExpanded: () => isPanelExpanded(id),
+        getSize: () => getPanelSize(id),
+      }),
+      [id, expandPanel, collapsePanel, isPanelExpanded, getPanelSize]
+    );
+
+    // Don't render if size is 0 (collapsed) - but flex panels always render
+    if (size === 0 && !isFlexPanel) {
+      return null;
+    }
+
+    return (
+      <div
+        data-panel-id={id}
+        className={cx("n-relative n-overflow-hidden", className)}
+        style={{
+          ...(isFlexPanel
+            ? { flex: 1, minWidth: 0 }
+            : { width: size, flexShrink: 0 }),
+        }}
+      >
+        {children}
+      </div>
+    );
+  }
+);

package/src/components/resizablePanels/PanelGroup.tsx

@@ -0,0 +1,498 @@
+"use client";
+
+import { clientStorage, useSize } from "@noya-app/react-utils";
+import React, {
+  forwardRef,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { cx } from "../../utils/classNames";
+import { PanelGroupContext } from "./PanelGroupContext";
+import {
+  ImperativePanelGroupHandle,
+  PanelGroupContextValue,
+  PanelRegistration,
+} from "./types";
+
+interface PanelGroupProps {
+  id?: string;
+  className?: string;
+  direction: "horizontal";
+  autoSaveId?: string;
+  onLayout?: (sizes: number[]) => void;
+  children: ReactNode;
+}
+
+type PanelState = PanelRegistration & {
+  size: number;
+  collapsed: boolean;
+  sizeBeforeCollapse?: number;
+};
+
+function getStorageKey(autoSaveId: string) {
+  return `noya-panels:${autoSaveId}`;
+}
+
+function loadSavedSizes(
+  autoSaveId: string | undefined
+): Record<string, number> | null {
+  if (!autoSaveId) return null;
+  const saved = clientStorage.getItem(getStorageKey(autoSaveId));
+  if (!saved) return null;
+  try {
+    return JSON.parse(saved);
+  } catch {
+    return null;
+  }
+}
+
+function saveSizes(autoSaveId: string | undefined, sizes: Record<string, number>) {
+  if (!autoSaveId) return;
+  clientStorage.setItem(getStorageKey(autoSaveId), JSON.stringify(sizes));
+}
+
+export const PanelGroup = forwardRef<ImperativePanelGroupHandle, PanelGroupProps>(
+  function PanelGroup(
+    { id, className, direction, autoSaveId, onLayout, children },
+    ref
+  ) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const containerSize = useSize(containerRef);
+    const containerWidth = containerSize?.width ?? 0;
+
+    const [panels, setPanels] = useState<Map<string, PanelState>>(new Map());
+    const panelsRef = useRef(panels);
+    panelsRef.current = panels;
+
+    const [resizing, setResizing] = useState<{
+      handleIndex: number;
+      startX: number;
+      startSizes: number[];
+    } | null>(null);
+
+    // Get panels sorted by order
+    const sortedPanels = useMemo(() => {
+      return Array.from(panels.values()).sort((a, b) => a.order - b.order);
+    }, [panels]);
+
+    // Calculate the flex panel (panel without defaultSize)
+    const flexPanelId = useMemo(() => {
+      for (const panel of sortedPanels) {
+        if (panel.defaultSize === undefined) {
+          return panel.id;
+        }
+      }
+      return null;
+    }, [sortedPanels]);
+
+    // Calculate sizes - fixed panels keep their size, flex panel gets remainder
+    const calculateLayout = useCallback(
+      (
+        panelStates: Map<string, PanelState>,
+        width: number
+      ): Map<string, PanelState> => {
+        if (width === 0) return panelStates;
+
+        const sorted = Array.from(panelStates.values()).sort(
+          (a, b) => a.order - b.order
+        );
+        const flexPanel = sorted.find((p) => p.defaultSize === undefined);
+
+        let fixedSum = 0;
+        for (const panel of sorted) {
+          if (panel.id !== flexPanel?.id) {
+            fixedSum += panel.collapsed ? 0 : panel.size;
+          }
+        }
+
+        const flexSize = Math.max(0, width - fixedSum);
+
+        const newPanels = new Map(panelStates);
+        if (flexPanel) {
+          newPanels.set(flexPanel.id, {
+            ...newPanels.get(flexPanel.id)!,
+            size: flexSize,
+          });
+        }
+
+        return newPanels;
+      },
+      []
+    );
+
+    // Recalculate layout when container width changes
+    useEffect(() => {
+      if (containerWidth > 0 && panels.size > 0) {
+        setPanels((prev) => calculateLayout(prev, containerWidth));
+      }
+    }, [containerWidth, calculateLayout, panels.size]);
+
+    // Notify parent of layout changes
+    // eslint-disable-next-line @shopify/prefer-early-return
+    useEffect(() => {
+      if (onLayout && sortedPanels.length > 0) {
+        const sizes = sortedPanels.map((p) => (p.collapsed ? 0 : p.size));
+        onLayout(sizes);
+      }
+    }, [onLayout, sortedPanels]);
+
+    const registerPanel = useCallback(
+      (panel: PanelRegistration) => {
+        setPanels((prev) => {
+          const savedSizes = loadSavedSizes(autoSaveId);
+          const savedSize = savedSizes?.[panel.id];
+          // Use saved size if available, otherwise check defaultCollapsed, then use defaultSize
+          const hasSavedSize = savedSize !== undefined;
+          const collapsed = hasSavedSize
+            ? savedSize === 0 && !!panel.collapsible
+            : !!panel.defaultCollapsed && !!panel.collapsible;
+          const initialSize = hasSavedSize
+            ? savedSize
+            : collapsed
+              ? 0
+              : panel.defaultSize ?? 0;
+
+          const newPanels = new Map(prev);
+          newPanels.set(panel.id, {
+            ...panel,
+            size: initialSize,
+            collapsed,
+            sizeBeforeCollapse: collapsed ? panel.defaultSize : undefined,
+          });
+
+          return calculateLayout(newPanels, containerWidth);
+        });
+      },
+      [autoSaveId, calculateLayout, containerWidth]
+    );
+
+    const unregisterPanel = useCallback((panelId: string) => {
+      setPanels((prev) => {
+        const newPanels = new Map(prev);
+        newPanels.delete(panelId);
+        return newPanels;
+      });
+    }, []);
+
+    const getPanelSize = useCallback(
+      (panelId: string): number => {
+        return panels.get(panelId)?.size ?? 0;
+      },
+      [panels]
+    );
+
+    const getPanelIndex = useCallback(
+      (panelId: string): number => {
+        return sortedPanels.findIndex((p) => p.id === panelId);
+      },
+      [sortedPanels]
+    );
+
+    const setPanelSize = useCallback(
+      (panelId: string, size: number) => {
+        setPanels((prev) => {
+          const panel = prev.get(panelId);
+          if (!panel) return prev;
+
+          const clampedSize = Math.max(
+            panel.minSize ?? 0,
+            Math.min(size, panel.maxSize ?? Infinity)
+          );
+
+          const newPanels = new Map(prev);
+          newPanels.set(panelId, {
+            ...panel,
+            size: clampedSize,
+            collapsed: clampedSize === 0,
+          });
+
+          return calculateLayout(newPanels, containerWidth);
+        });
+
+        // Save to storage
+        const currentPanels = panelsRef.current;
+        const sizesToSave: Record<string, number> = {};
+        for (const [id, panel] of currentPanels) {
+          if (panel.defaultSize !== undefined) {
+            sizesToSave[id] = id === panelId ? size : panel.size;
+          }
+        }
+        saveSizes(autoSaveId, sizesToSave);
+      },
+      [autoSaveId, calculateLayout, containerWidth]
+    );
+
+    const expandPanel = useCallback(
+      (panelId: string) => {
+        setPanels((prev) => {
+          const panel = prev.get(panelId);
+          if (!panel || !panel.collapsed) return prev;
+
+          const newSize = panel.sizeBeforeCollapse ?? panel.defaultSize ?? 200;
+          const newPanels = new Map(prev);
+          newPanels.set(panelId, {
+            ...panel,
+            size: newSize,
+            collapsed: false,
+            sizeBeforeCollapse: undefined,
+          });
+
+          // Save to storage
+          const sizesToSave: Record<string, number> = {};
+          for (const [id, p] of newPanels) {
+            if (p.defaultSize !== undefined) {
+              sizesToSave[id] = p.size;
+            }
+          }
+          saveSizes(autoSaveId, sizesToSave);
+
+          return calculateLayout(newPanels, containerWidth);
+        });
+      },
+      [autoSaveId, calculateLayout, containerWidth]
+    );
+
+    const collapsePanel = useCallback(
+      (panelId: string) => {
+        setPanels((prev) => {
+          const panel = prev.get(panelId);
+          if (!panel || !panel.collapsible || panel.collapsed) return prev;
+
+          const newPanels = new Map(prev);
+          newPanels.set(panelId, {
+            ...panel,
+            size: 0,
+            collapsed: true,
+            sizeBeforeCollapse: panel.size,
+          });
+
+          // Save to storage
+          const sizesToSave: Record<string, number> = {};
+          for (const [id, p] of newPanels) {
+            if (p.defaultSize !== undefined) {
+              sizesToSave[id] = id === panelId ? 0 : p.size;
+            }
+          }
+          saveSizes(autoSaveId, sizesToSave);
+
+          return calculateLayout(newPanels, containerWidth);
+        });
+      },
+      [autoSaveId, calculateLayout, containerWidth]
+    );
+
+    const isPanelExpanded = useCallback(
+      (panelId: string): boolean => {
+        const panel = panels.get(panelId);
+        return panel ? !panel.collapsed : false;
+      },
+      [panels]
+    );
+
+    const startResize = useCallback(
+      (handleIndex: number, startX: number) => {
+        const startSizes = sortedPanels.map((p) => p.size);
+        setResizing({
+          handleIndex,
+          startX,
+          startSizes,
+        });
+      },
+      [sortedPanels]
+    );
+
+    // Handle mouse move during resize
+    useEffect(() => {
+      if (!resizing) return;
+
+      const handleMouseMove = (e: MouseEvent) => {
+        // Calculate delta from where the drag started
+        const delta = e.clientX - resizing.startX;
+
+        // Get the panels on either side of the handle
+        const leftPanelIndex = resizing.handleIndex;
+        const rightPanelIndex = resizing.handleIndex + 1;
+        const leftPanel = sortedPanels[leftPanelIndex];
+        const rightPanel = sortedPanels[rightPanelIndex];
+
+        if (!leftPanel || !rightPanel) return;
+
+        // Skip if either panel is the flex panel (it adjusts automatically)
+        const leftIsFixed = leftPanel.defaultSize !== undefined;
+        const rightIsFixed = rightPanel.defaultSize !== undefined;
+
+        if (!leftIsFixed && !rightIsFixed) return;
+
+        // Calculate intended sizes (before clamping)
+        const intendedLeftSize = resizing.startSizes[leftPanelIndex] + delta;
+        const intendedRightSize = resizing.startSizes[rightPanelIndex] - delta;
+
+        // Determine if panels should collapse (when dragged below half their minSize)
+        const leftMinSize = leftPanel.minSize ?? 0;
+        const rightMinSize = rightPanel.minSize ?? 0;
+        const collapseThreshold = 0.5; // Collapse when dragged below 50% of minSize
+
+        const shouldCollapseLeft =
+          leftIsFixed &&
+          leftPanel.collapsible &&
+          intendedLeftSize < leftMinSize * collapseThreshold;
+        const shouldCollapseRight =
+          rightIsFixed &&
+          rightPanel.collapsible &&
+          intendedRightSize < rightMinSize * collapseThreshold;
+
+        // Calculate final sizes
+        let newLeftSize = intendedLeftSize;
+        let newRightSize = intendedRightSize;
+
+        if (leftIsFixed) {
+          if (shouldCollapseLeft) {
+            newLeftSize = 0;
+          } else {
+            newLeftSize = Math.max(
+              leftMinSize,
+              Math.min(newLeftSize, leftPanel.maxSize ?? Infinity)
+            );
+          }
+        }
+        if (rightIsFixed) {
+          if (shouldCollapseRight) {
+            newRightSize = 0;
+          } else {
+            newRightSize = Math.max(
+              rightMinSize,
+              Math.min(newRightSize, rightPanel.maxSize ?? Infinity)
+            );
+          }
+        }
+
+        // Update the fixed panel(s)
+        setPanels((prev) => {
+          const newPanels = new Map(prev);
+          if (leftIsFixed) {
+            const currentPanel = newPanels.get(leftPanel.id)!;
+            newPanels.set(leftPanel.id, {
+              ...currentPanel,
+              size: newLeftSize,
+              collapsed: newLeftSize === 0,
+              sizeBeforeCollapse:
+                newLeftSize === 0 && !currentPanel.collapsed
+                  ? currentPanel.size
+                  : currentPanel.sizeBeforeCollapse,
+            });
+          }
+          if (rightIsFixed) {
+            const currentPanel = newPanels.get(rightPanel.id)!;
+            newPanels.set(rightPanel.id, {
+              ...currentPanel,
+              size: newRightSize,
+              collapsed: newRightSize === 0,
+              sizeBeforeCollapse:
+                newRightSize === 0 && !currentPanel.collapsed
+                  ? currentPanel.size
+                  : currentPanel.sizeBeforeCollapse,
+            });
+          }
+          return calculateLayout(newPanels, containerWidth);
+        });
+      };
+
+      const handleMouseUp = () => {
+        // Save final sizes
+        const currentPanels = panelsRef.current;
+        const sizesToSave: Record<string, number> = {};
+        for (const [id, panel] of currentPanels) {
+          if (panel.defaultSize !== undefined) {
+            sizesToSave[id] = panel.size;
+          }
+        }
+        saveSizes(autoSaveId, sizesToSave);
+
+        setResizing(null);
+      };
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+    }, [
+      resizing,
+      sortedPanels,
+      autoSaveId,
+      calculateLayout,
+      containerWidth,
+      flexPanelId,
+    ]);
+
+    useImperativeHandle(ref, () => ({
+      getLayout: () => sortedPanels.map((p) => p.size),
+      setLayout: (sizes: number[]) => {
+        setPanels((prev) => {
+          const newPanels = new Map(prev);
+          sortedPanels.forEach((panel, index) => {
+            if (sizes[index] !== undefined) {
+              newPanels.set(panel.id, {
+                ...newPanels.get(panel.id)!,
+                size: sizes[index],
+                collapsed: sizes[index] === 0,
+              });
+            }
+          });
+          return newPanels;
+        });
+      },
+    }));
+
+    const contextValue: PanelGroupContextValue = useMemo(
+      () => ({
+        registerPanel,
+        unregisterPanel,
+        getPanelSize,
+        setPanelSize,
+        getPanelIndex,
+        expandPanel,
+        collapsePanel,
+        isPanelExpanded,
+        startResize,
+        containerWidth,
+      }),
+      [
+        registerPanel,
+        unregisterPanel,
+        getPanelSize,
+        setPanelSize,
+        getPanelIndex,
+        expandPanel,
+        collapsePanel,
+        isPanelExpanded,
+        startResize,
+        containerWidth,
+      ]
+    );
+
+    return (
+      <PanelGroupContext.Provider value={contextValue}>
+        <div
+          ref={containerRef}
+          id={id}
+          className={cx("n-flex n-flex-row n-h-full n-w-full", className)}
+          style={{
+            cursor: resizing ? "col-resize" : undefined,
+            userSelect: resizing ? "none" : undefined,
+          }}
+          data-direction={direction}
+        >
+          {children}
+        </div>
+      </PanelGroupContext.Provider>
+    );
+  }
+);

package/src/components/resizablePanels/PanelGroupContext.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+import { PanelGroupContextValue } from "./types";
+
+export const PanelGroupContext = createContext<PanelGroupContextValue | null>(
+  null
+);
+
+export function usePanelGroupContext(): PanelGroupContextValue {
+  const context = useContext(PanelGroupContext);
+  if (!context) {
+    throw new Error("Panel must be used within a PanelGroup");
+  }
+  return context;
+}

package/src/components/resizablePanels/PanelResizeHandle.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import React, { useCallback, useContext, useRef } from "react";
+import { cx } from "../../utils/classNames";
+import { PanelGroupContext } from "./PanelGroupContext";
+
+interface PanelResizeHandleProps {
+  className?: string;
+  disabled?: boolean;
+  /** The index of this handle (0 = between panels 0 and 1, 1 = between panels 1 and 2, etc.) */
+  index: number;
+}
+
+export function PanelResizeHandle({
+  className,
+  disabled,
+  index,
+}: PanelResizeHandleProps) {
+  const context = useContext(PanelGroupContext);
+  const handleRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (disabled || !context) return;
+
+      e.preventDefault();
+      context.startResize(index, e.clientX);
+    },
+    [context, disabled, index]
+  );
+
+  if (!context) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={handleRef}
+      data-resize-handle
+      className={cx("n-relative", className)}
+      onMouseDown={handleMouseDown}
+      style={{
+        cursor: disabled ? undefined : "col-resize",
+        touchAction: "none",
+        zIndex: 10,
+      }}
+    >
+      {/* Invisible expanded hit area for easier dragging */}
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          bottom: 0,
+          left: -4,
+          right: -4,
+          cursor: disabled ? undefined : "col-resize",
+        }}
+      />
+    </div>
+  );
+}

package/src/components/resizablePanels/index.ts

@@ -0,0 +1,7 @@
+export { Panel } from "./Panel";
+export { PanelGroup } from "./PanelGroup";
+export { PanelResizeHandle } from "./PanelResizeHandle";
+export type {
+  ImperativePanelGroupHandle,
+  ImperativePanelHandle,
+} from "./types";