@noya-app/noya-designsystem 0.1.18 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -36,7 +36,7 @@
     "@radix-ui/react-utils": "^0.0.5",
     "immer": "9.0.5",
     "kiwi.js": "^1.1.3",
-    "react-resizable-panels": "2.0.16",
+    "react-resizable-panels": "2.0.22",
     "react-virtualized": "^9.22.3",
     "react-window": "^1.8.8",
     "vscode-fuzzy-scorer": "^0.0.4"

package/src/components/WorkspaceLayout.tsx

@@ -1,4 +1,4 @@
-import { Stack, useDesignSystemTheme } from "@noya-app/noya-designsystem";
+import { useDesignSystemTheme } from "@noya-app/noya-designsystem";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import {
@@ -26,9 +26,24 @@ interface Props {
   hasRightSidebar?: boolean;
   hasLeftSidebar?: boolean;
   onChangeLayoutState?: (layoutState: PanelLayoutState) => void;
-  leftSidebarInitialSize?: number;
-  rightSidebarInitialSize?: number;
   leftSidebarCanResize?: boolean;
+  id?: string;
+  className?: string;
+  style?: React.CSSProperties;
+
+  /**
+   * Accepts a number (px) or % string (e.g. "50%").
+   * Use % to avoid flicker server-rendering.
+   */
+  leftSidebarInitialSize?: number | string;
+  leftSidebarMinSize?: number | string;
+
+  /**
+   * Accepts a number (px) or % string (e.g. "50%").
+   * Use % to avoid flicker server-rendering.
+   */
+  rightSidebarInitialSize?: number | string;
+  rightSidebarMinSize?: number | string;
 }
 
 export type IWorkspaceLayout = {
@@ -50,15 +65,32 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
     onChangeLayoutState,
     leftSidebarInitialSize = 280,
     rightSidebarInitialSize = 400,
+    leftSidebarMinSize,
+    rightSidebarMinSize,
     leftSidebarCanResize = false,
+    id,
+    className,
+    style,
   }: Props,
   forwardedRef: React.ForwardedRef<IWorkspaceLayout>
 ) {
   const windowSize = useWindowSize();
-  const leftSidebarPercentage =
-    (leftSidebarInitialSize / windowSize.width) * 100;
-  const rightSidebarPercentage =
-    (rightSidebarInitialSize / windowSize.width) * 100;
+  function getPercentage(size: number | string) {
+    return typeof size === "string"
+      ? parseFloat(size)
+      : (size / windowSize.width) * 100;
+  }
+  const leftSidebarPercentage = getPercentage(leftSidebarInitialSize);
+  const rightSidebarPercentage = getPercentage(rightSidebarInitialSize);
+  const leftSidebarMinPercentage =
+    leftSidebarMinSize !== undefined
+      ? getPercentage(leftSidebarMinSize)
+      : undefined;
+  const rightSidebarMinPercentage =
+    rightSidebarMinSize !== undefined
+      ? getPercentage(rightSidebarMinSize)
+      : undefined;
+
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
   const leftSidebarRef = useRef<ImperativePanelHandle>(null);
   const rightSidebarRef = useRef<ImperativePanelHandle>(null);
@@ -129,8 +161,22 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
     },
   });
 
+  const centerPanelPercentage =
+    100 -
+    (leftPanelContent ? leftSidebarPercentage : 0) -
+    (rightPanelContent ? rightSidebarPercentage : 0);
+
   return (
-    <Stack.H flex="1">
+    <div
+      id={id}
+      className={className}
+      style={{
+        backgroundColor: theme.colors.canvas.background,
+        display: "flex",
+        flexDirection: "row",
+        ...style,
+      }}
+    >
       <PanelGroup
         ref={panelGroupRef}
         id={EDITOR_PANEL_GROUP_ID}
@@ -138,7 +184,7 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
         autoSaveId={
           autoSavePrefix
             ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}`
-            : EDITOR_PANEL_GROUP_ID
+            : undefined
         }
         style={{ flex: "1" }}
       >
@@ -149,7 +195,7 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
               order={1}
               ref={leftSidebarRef}
               defaultSize={leftSidebarPercentage}
-              minSize={leftSidebarPercentage}
+              minSize={leftSidebarMinPercentage ?? leftSidebarPercentage}
               {...(!leftSidebarCanResize && { maxSize: leftSidebarPercentage })}
               collapsible
               style={{
@@ -172,6 +218,7 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
         <Panel
           id={CONTENT_AREA_ID}
           order={2}
+          defaultSize={centerPanelPercentage}
           minSize={10}
           style={{
             display: "flex",
@@ -194,7 +241,7 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
               id={RIGHT_SIDEBAR_ID}
               order={3}
               ref={rightSidebarRef}
-              minSize={rightSidebarPercentage}
+              minSize={rightSidebarMinPercentage ?? rightSidebarPercentage}
               defaultSize={rightSidebarPercentage}
               collapsible
               style={{
@@ -207,6 +254,6 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
           </>
         )}
       </PanelGroup>
-    </Stack.H>
+    </div>
   );
 });