@noya-app/noya-designsystem 0.1.42 → 0.1.44

package/src/components/WorkspaceLayout.tsx

@@ -1,6 +1,7 @@
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import React, {
   forwardRef,
+  memo,
   useCallback,
   useImperativeHandle,
   useRef,
@@ -22,63 +23,67 @@ import {
   usePreservePanelSize,
 } from "../hooks/usePreservePanelSize";
 import { useWindowSize } from "../hooks/useWindowSize";
-import { cssVars } from "../theme";
+import { cx } from "../utils/classNames";
 
 interface Props {
-  autoSavePrefix?: string;
-  leftSidebarContent?: React.ReactNode;
-  children?: React.ReactNode;
-  rightSidebarContent?: React.ReactNode;
-  hasRightSidebar?: boolean;
-  hasLeftSidebar?: boolean;
-  onChangeLayoutState?: (layoutState: PanelLayoutState) => void;
-  leftSidebarCanResize?: boolean;
-  rightSidebarCanResize?: boolean;
   id?: string;
   className?: string;
   style?: React.CSSProperties;
+  autoSavePrefix?: string;
+  left?: React.ReactNode;
+  leftOptions?: SideOptions;
+  children?: React.ReactNode;
+  right?: React.ReactNode;
+  rightOptions?: SideOptions;
+  toolbar?: React.ReactNode;
+  onChangeLayoutState?: (layoutState: PanelLayoutState) => void;
+}
 
-  /**
-   * Accepts a number (px) or % string (e.g. "50%").
-   * Use % to avoid flicker server-rendering.
-   */
-  leftSidebarInitialSize?: number | string;
-  leftSidebarMinSize?: number | string;
+export type IWorkspaceLayout = {
+  setLeftExpanded: (expanded: boolean) => void;
+  setRightExpanded: (expanded: boolean) => void;
+  toggleSides: () => void;
+  toggleLeft: () => void;
+  toggleRight: () => void;
+};
 
+export type SideOptions = {
+  style?: React.CSSProperties;
+  className?: string;
+  resizable?: boolean;
   /**
    * Accepts a number (px) or % string (e.g. "50%").
    * Use % to avoid flicker server-rendering.
    */
-  rightSidebarInitialSize?: number | string;
-  rightSidebarMinSize?: number | string;
-}
-
-export type IWorkspaceLayout = {
-  setLeftSidebarExpanded: (expanded: boolean) => void;
-  setRightSidebarExpanded: (expanded: boolean) => void;
-  toggleAllSidebars: () => void;
-  toggleLeftSidebar: () => void;
-  toggleRightSidebar: () => void;
+  initialSize?: number | string;
+  minSize?: number | string;
 };
 
-const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
+export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
   {
     autoSavePrefix,
-    leftSidebarContent: leftPanelContent,
-    children: centerPanelContent,
-    rightSidebarContent: rightPanelContent,
-    hasLeftSidebar = !!leftPanelContent,
-    hasRightSidebar = !!rightPanelContent,
-    onChangeLayoutState,
-    leftSidebarInitialSize = 280,
-    rightSidebarInitialSize = 400,
-    leftSidebarMinSize,
-    rightSidebarMinSize,
-    leftSidebarCanResize = false,
-    rightSidebarCanResize = false,
+    left,
+    right,
     id,
     className,
     style,
+    toolbar,
+    children,
+    onChangeLayoutState,
+    leftOptions: {
+      initialSize: leftInitialSize = 280,
+      minSize: leftMinSize,
+      resizable: leftResizable = true,
+      style: leftStyle,
+      className: leftClassName,
+    } = {},
+    rightOptions: {
+      initialSize: rightInitialSize = 280,
+      minSize: rightMinSize,
+      resizable: rightResizable = true,
+      style: rightStyle,
+      className: rightClassName,
+    } = {},
   }: Props,
   forwardedRef: React.ForwardedRef<IWorkspaceLayout>
 ) {
@@ -88,16 +93,13 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
       ? parseFloat(size)
       : (size / windowSize.width) * 100;
   }
-  const leftSidebarPercentage = getPercentage(leftSidebarInitialSize);
-  const rightSidebarPercentage = getPercentage(rightSidebarInitialSize);
+
+  const leftSidebarPercentage = getPercentage(leftInitialSize);
+  const rightSidebarPercentage = getPercentage(rightInitialSize);
   const leftSidebarMinPercentage =
-    leftSidebarMinSize !== undefined
-      ? getPercentage(leftSidebarMinSize)
-      : undefined;
+    leftMinSize !== undefined ? getPercentage(leftMinSize) : undefined;
   const rightSidebarMinPercentage =
-    rightSidebarMinSize !== undefined
-      ? getPercentage(rightSidebarMinSize)
-      : undefined;
+    rightMinSize !== undefined ? getPercentage(rightMinSize) : undefined;
 
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
   const leftSidebarRef = useRef<ImperativePanelHandle>(null);
@@ -116,21 +118,21 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
   usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
 
   useImperativeHandle(forwardedRef, () => ({
-    setLeftSidebarExpanded: (expanded: boolean) => {
+    setLeftExpanded: (expanded: boolean) => {
       if (expanded) {
         leftSidebarRef.current?.expand();
       } else {
         leftSidebarRef.current?.collapse();
       }
     },
-    setRightSidebarExpanded: (expanded: boolean) => {
+    setRightExpanded: (expanded: boolean) => {
       if (expanded) {
         rightSidebarRef.current?.expand();
       } else {
         rightSidebarRef.current?.collapse();
       }
     },
-    toggleAllSidebars: () => {
+    toggleSides: () => {
       const isLeftSidebarExpanded = leftSidebarRef.current?.isExpanded();
       const isRightSidebarExpanded = rightSidebarRef.current?.isExpanded();
 
@@ -142,7 +144,7 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
         rightSidebarRef.current?.expand();
       }
     },
-    toggleLeftSidebar: () => {
+    toggleLeft: () => {
       const isLeftSidebarExpanded = leftSidebarRef.current?.isExpanded();
 
       if (isLeftSidebarExpanded) {
@@ -151,7 +153,7 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
         leftSidebarRef.current?.expand();
       }
     },
-    toggleRightSidebar: () => {
+    toggleRight: () => {
       const isRightSidebarExpanded = rightSidebarRef.current?.isExpanded();
 
       if (isRightSidebarExpanded) {
@@ -179,114 +181,105 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
 
   const centerPanelPercentage =
     100 -
-    (leftPanelContent ? leftSidebarPercentage : 0) -
-    (rightPanelContent ? rightSidebarPercentage : 0);
+    (left ? leftSidebarPercentage : 0) -
+    (right ? rightSidebarPercentage : 0);
 
   return (
     <div
       id={id}
-      className={className}
-      style={{
-        backgroundColor: cssVars.colors.canvasBackground,
-        display: "flex",
-        flexDirection: "row",
-        ...style,
-      }}
+      className={cx("flex flex-col bg-canvas-background", className)}
+      style={style}
     >
-      <PanelGroup
-        ref={panelGroupRef}
-        id={EDITOR_PANEL_GROUP_ID}
-        direction="horizontal"
-        autoSaveId={
-          autoSavePrefix
-            ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}`
-            : undefined
-        }
-        style={{ flex: "1" }}
-      >
-        {hasLeftSidebar && (
-          <>
-            <Panel
-              id={LEFT_SIDEBAR_ID}
-              order={1}
-              ref={leftSidebarRef}
-              defaultSize={leftSidebarPercentage}
-              minSize={leftSidebarMinPercentage ?? leftSidebarPercentage}
-              {...(!leftSidebarCanResize && { maxSize: leftSidebarPercentage })}
-              collapsible
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                position: "relative",
-              }}
-            >
-              {internalLayoutState?.leftSidebarCollapsed
-                ? null
-                : leftPanelContent}
-            </Panel>
-            <PanelResizeHandle
-              style={{
-                cursor: "col-resize",
-                width: "1px",
-                height: "100%",
-                backgroundColor: cssVars.colors.divider,
-              }}
-            />
-          </>
-        )}
-        <Panel
-          id={CONTENT_AREA_ID}
-          order={2}
-          defaultSize={centerPanelPercentage}
-          minSize={10}
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            position: "relative",
-          }}
+      {toolbar}
+      <div className="flex flex-row flex-1">
+        <PanelGroup
+          ref={panelGroupRef}
+          id={EDITOR_PANEL_GROUP_ID}
+          className="flex-1"
+          direction="horizontal"
+          autoSaveId={
+            autoSavePrefix
+              ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}`
+              : undefined
+          }
         >
-          {centerPanelContent}
-        </Panel>
-        {hasRightSidebar && (
-          <>
-            <PanelResizeHandle
-              style={{
-                cursor: "col-resize",
-                width: "1px",
-                height: "100%",
-                backgroundColor: cssVars.colors.divider,
-              }}
-            />
-            <Panel
-              id={RIGHT_SIDEBAR_ID}
-              order={3}
-              ref={rightSidebarRef}
-              minSize={rightSidebarMinPercentage ?? rightSidebarPercentage}
-              defaultSize={rightSidebarPercentage}
-              {...(!rightSidebarCanResize && {
-                maxSize: rightSidebarPercentage,
-              })}
-              collapsible
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                position: "relative",
-              }}
-            >
-              {internalLayoutState?.rightSidebarCollapsed
-                ? null
-                : rightPanelContent}
-            </Panel>
-          </>
-        )}
-      </PanelGroup>
+          {left && (
+            <>
+              <Panel
+                id={LEFT_SIDEBAR_ID}
+                className="relative"
+                order={1}
+                ref={leftSidebarRef}
+                defaultSize={leftSidebarPercentage}
+                minSize={leftSidebarMinPercentage ?? leftSidebarPercentage}
+                {...(!leftResizable && { maxSize: leftSidebarPercentage })}
+                collapsible
+              >
+                {internalLayoutState?.leftSidebarCollapsed ? null : (
+                  <PanelInner style={leftStyle} className={leftClassName}>
+                    {left}
+                  </PanelInner>
+                )}
+              </Panel>
+              <PanelResizeHandle className="cursor-col-resize w-px h-full bg-divider" />
+            </>
+          )}
+          <Panel
+            id={CONTENT_AREA_ID}
+            order={2}
+            defaultSize={centerPanelPercentage}
+            minSize={10}
+            className="flex relative"
+          >
+            {children}
+          </Panel>
+          {right && (
+            <>
+              <PanelResizeHandle className="cursor-col-resize w-px h-full bg-divider" />
+              <Panel
+                id={RIGHT_SIDEBAR_ID}
+                className="relative"
+                order={3}
+                ref={rightSidebarRef}
+                minSize={rightSidebarMinPercentage ?? rightSidebarPercentage}
+                defaultSize={rightSidebarPercentage}
+                {...(!rightResizable && {
+                  maxSize: rightSidebarPercentage,
+                })}
+                collapsible
+              >
+                {internalLayoutState?.rightSidebarCollapsed ? null : (
+                  <PanelInner style={rightStyle} className={rightClassName}>
+                    {right}
+                  </PanelInner>
+                )}
+              </Panel>
+            </>
+          )}
+        </PanelGroup>
+      </div>
     </div>
   );
 });
 
-export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
-  props: Props,
-  forwardedRef: React.ForwardedRef<IWorkspaceLayout>
-) {
-  return <WorkspaceLayoutWithTheme {...props} ref={forwardedRef} />;
+const PanelInner = memo(function PanelInner({
+  children,
+  style,
+  className,
+}: {
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}) {
+  return (
+    <div
+      style={style}
+      className={cx(
+        "absolute inset-0 flex flex-col bg-sidebar-background",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
 });