@noya-app/noya-designsystem 0.1.62 → 0.1.64

package/src/components/workspace/PanelWorkspaceLayout.tsx

@@ -1,4 +1,11 @@
-import React, { memo, useRef } from "react";
+"use client";
+
+import {
+  clientStorage,
+  memoGeneric,
+  usePersistentStateObject,
+} from "@noya-app/react-utils";
+import React, { useMemo, useRef } from "react";
 import {
   ImperativePanelGroupHandle,
   ImperativePanelHandle,
@@ -6,16 +13,30 @@ import {
   PanelGroup,
   PanelResizeHandle,
 } from "react-resizable-panels";
+import { DividerVertical } from "../Divider";
 import {
   CONTENT_AREA_ID,
   EDITOR_PANEL_GROUP_ID,
   LEFT_SIDEBAR_ID,
   RIGHT_SIDEBAR_ID,
-  usePreservePanelSize,
-} from "../../hooks/usePreservePanelSize";
-import { LayoutProps } from "./types";
+} from "./constants";
+import {
+  getInitialLayout,
+  getLayoutCollapsedState,
+  getLayoutIds,
+  getPropertyKey,
+  getStorageKey,
+  panelStorage,
+  setInitialLayout,
+  toPixelSize,
+} from "./panelStorage";
+import { LayoutProps, WorkspaceLayoutState } from "./types";
+import { VerticalTabMenu } from "./VerticalTabMenu";
 
-export const PanelWorkspaceLayout = memo(function PanelWorkspaceLayout({
+export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
+  LeftTab extends string,
+  RightTab extends string,
+>({
   leftPanel,
   rightPanel,
   centerPanel,
@@ -23,14 +44,67 @@ export const PanelWorkspaceLayout = memo(function PanelWorkspaceLayout({
   rightSidebarOptions,
   centerPanelPercentage,
   autoSavePrefix,
-  internalLayoutState,
   leftSidebarRef,
   rightSidebarRef,
-  handleChangeLayoutState,
-}: LayoutProps) {
+  leftTabItems,
+  rightTabItems,
+  leftTabValue,
+  rightTabValue,
+  onChangeLeftTab,
+  onChangeRightTab,
+}: LayoutProps<LeftTab, RightTab>) {
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
 
-  usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
+  const hasLeftPanel = !!leftPanel;
+  const hasRightPanel = !!rightPanel;
+  const hasCenterPanel = !!centerPanel;
+
+  const autoSaveId = useMemo(() => {
+    return autoSavePrefix
+      ? `${autoSavePrefix}--v2--${EDITOR_PANEL_GROUP_ID}`
+      : Math.random().toString(36).substring(2, 15);
+  }, [autoSavePrefix]);
+
+  const layoutIds = getLayoutIds({
+    hasLeftPanel,
+    hasRightPanel,
+    hasCenterPanel,
+  });
+  const storageKey = getStorageKey(autoSaveId);
+  const propertyKey = getPropertyKey(layoutIds);
+
+  setInitialLayout({
+    storageKey,
+    propertyKey,
+    calculateLayout: () => {
+      return getInitialLayout({
+        layoutIds,
+        leftSidebarOptions,
+        rightSidebarOptions,
+        centerPanelPercentage,
+        hasLeftPanel,
+        hasRightPanel,
+        hasCenterPanel,
+      });
+    },
+  });
+
+  const [data, setData] = usePersistentStateObject<
+    WorkspaceLayoutState,
+    string
+  >(clientStorage, storageKey, {});
+
+  const layoutGroup = data?.[propertyKey];
+
+  const { leftSidebarCollapsed, rightSidebarCollapsed } = useMemo(() => {
+    return getLayoutCollapsedState({
+      layoutGroup,
+      propertyKey,
+      layoutIds,
+      hasLeftPanel,
+      hasRightPanel,
+    });
+  }, [layoutGroup, propertyKey, layoutIds, hasLeftPanel, hasRightPanel]);
 
   return (
     <PanelGroup
@@ -38,14 +112,48 @@ export const PanelWorkspaceLayout = memo(function PanelWorkspaceLayout({
       id={EDITOR_PANEL_GROUP_ID}
       className="flex-1"
       direction="horizontal"
-      autoSaveId={
-        autoSavePrefix
-          ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}`
-          : undefined
-      }
+      storage={panelStorage}
+      autoSaveId={autoSaveId}
+      onLayout={(layout) => {
+        setData((prev) => {
+          const newData = {
+            ...prev,
+            [propertyKey]: {
+              layout: layout.map((size) => toPixelSize(size)),
+              expandToSizes: prev?.[propertyKey]?.expandToSizes ?? {},
+            },
+          };
+          return newData;
+        });
+      }}
     >
       {leftPanel && (
         <>
+          {leftSidebarOptions.showTabs && leftTabItems && (
+            <VerticalTabMenu
+              tooltipSide="right"
+              items={leftTabItems}
+              activeValue={leftTabValue}
+              isSidebarCollapsed={leftSidebarCollapsed}
+              onChange={(value) => {
+                if (value === leftTabValue) {
+                  if (leftSidebarRef.current?.isExpanded()) {
+                    leftSidebarRef.current?.collapse();
+                  } else {
+                    leftSidebarRef.current?.expand();
+                  }
+                } else {
+                  if (!leftSidebarRef.current?.isExpanded()) {
+                    leftSidebarRef.current?.expand();
+                  }
+                  onChangeLeftTab?.(value);
+                }
+              }}
+            />
+          )}
+          {leftSidebarOptions.showTabs &&
+            leftTabItems &&
+            !leftSidebarCollapsed && <DividerVertical className="h-full" />}
           <Panel
             id={LEFT_SIDEBAR_ID}
             className="relative"
@@ -61,7 +169,7 @@ export const PanelWorkspaceLayout = memo(function PanelWorkspaceLayout({
             }
             collapsible
           >
-            {internalLayoutState?.leftSidebarCollapsed ? null : leftPanel}
+            {leftSidebarCollapsed ? null : leftPanel}
           </Panel>
           <PanelResizeHandle className="cursor-col-resize w-px h-full bg-divider" />
         </>
@@ -93,8 +201,33 @@ export const PanelWorkspaceLayout = memo(function PanelWorkspaceLayout({
             }
             collapsible
           >
-            {internalLayoutState?.rightSidebarCollapsed ? null : rightPanel}
+            {rightSidebarCollapsed ? null : rightPanel}
           </Panel>
+          {rightSidebarOptions.showTabs &&
+            rightTabItems &&
+            !rightSidebarCollapsed && <DividerVertical className="h-full" />}
+          {rightSidebarOptions.showTabs && rightTabItems && (
+            <VerticalTabMenu
+              tooltipSide="left"
+              items={rightTabItems}
+              activeValue={rightTabValue}
+              isSidebarCollapsed={rightSidebarCollapsed}
+              onChange={(value) => {
+                if (value === rightTabValue) {
+                  if (rightSidebarRef.current?.isExpanded()) {
+                    rightSidebarRef.current?.collapse();
+                  } else {
+                    rightSidebarRef.current?.expand();
+                  }
+                } else {
+                  if (!rightSidebarRef.current?.isExpanded()) {
+                    rightSidebarRef.current?.expand();
+                  }
+                  onChangeRightTab?.(value);
+                }
+              }}
+            />
+          )}
         </>
       )}
     </PanelGroup>

package/src/components/workspace/VerticalTabMenu.tsx

@@ -0,0 +1,36 @@
+import React, { ComponentProps } from "react";
+import { cssVarNames } from "../../theme";
+import { MenuItem } from "../internal/Menu";
+import { ToolbarMenu } from "../Toolbar";
+import { Tooltip } from "../Tooltip";
+
+export function VerticalTabMenu<TabValue extends string>({
+  items,
+  activeValue,
+  isSidebarCollapsed,
+  onChange,
+  tooltipSide,
+}: {
+  items: MenuItem<TabValue>[];
+  activeValue: TabValue | undefined;
+  isSidebarCollapsed: boolean;
+  onChange: (value: TabValue) => void;
+  tooltipSide?: ComponentProps<typeof Tooltip>["side"];
+}) {
+  return (
+    <div
+      className="w-[47px] h-full bg-sidebar-background flex flex-col items-center py-3 gap-3"
+      style={{
+        [cssVarNames.colors.inputBackground]: "transparent",
+        [cssVarNames.colors.buttonBackground]: "transparent",
+      }}
+    >
+      <ToolbarMenu
+        items={items}
+        activeValue={isSidebarCollapsed ? undefined : activeValue}
+        onSelectMenuItem={onChange}
+        tooltipSide={tooltipSide}
+      />
+    </div>
+  );
+}

package/src/components/workspace/WorkspaceLayout.tsx

@@ -1,20 +1,22 @@
+"use client";
+
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
-import { useSize } from "@noya-app/react-utils";
-import React, {
-  forwardRef,
-  memo,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
-import { useWindowSize } from "../../hooks/useWindowSize";
+import {
+  forwardRefGeneric,
+  useControlledOrUncontrolled,
+  useSize,
+  useWindowSize,
+} from "@noya-app/react-utils";
+import React, { memo, useImperativeHandle, useMemo, useRef } from "react";
 import { cx } from "../../utils/classNames";
+import { MenuItem } from "../internal/Menu";
 import { DrawerWorkspaceLayout } from "./DrawerWorkspaceLayout";
 import { PanelWorkspaceLayout } from "./PanelWorkspaceLayout";
+import { renderPanelChildren } from "./renderPanelChildren";
 import {
-  PanelLayoutState,
+  LayoutProps,
   PercentageSidebarOptions,
+  RenderPanel,
   SidebarRef,
 } from "./types";
 
@@ -22,22 +24,32 @@ export type SideType = "auto" | "panel" | "drawer";
 
 export type DetectSizeType = "container" | "window";
 
-export interface WorkspaceLayoutProps {
+export interface WorkspaceLayoutProps<
+  LeftTab extends string,
+  RightTab extends string,
+> extends Pick<
+    LayoutProps<LeftTab, RightTab>,
+    | "leftTabItems"
+    | "leftTabValue"
+    | "rightTabItems"
+    | "rightTabValue"
+    | "onChangeLeftTab"
+    | "onChangeRightTab"
+  > {
   id?: string;
   className?: string;
   style?: React.CSSProperties;
   theme?: "light" | "dark";
   autoSavePrefix?: string;
-  left?: React.ReactNode;
+  left?: RenderPanel<LeftTab>;
   leftOptions?: SideOptions;
   children?: React.ReactNode;
-  right?: React.ReactNode;
+  right?: RenderPanel<RightTab>;
   rightOptions?: SideOptions;
   toolbar?: React.ReactNode;
   sideType?: SideType;
   sideTypeBreakpoint?: number;
   detectSize?: DetectSizeType;
-  onChangeLayoutState?: (layoutState: PanelLayoutState) => void;
 }
 
 export type WorkspaceLayoutRef = {
@@ -59,19 +71,47 @@ export type SideOptions = {
   initialSize?: number | string;
   minSize?: number | string;
   maxSize?: number | string;
+  defaultCollapsed?: boolean;
+  showTabs?: boolean;
 };
 
-export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
+const defaultLeftTabItems: MenuItem<string>[] = [
+  {
+    title: "",
+    value: "defaultLeft",
+    icon: "BorderLeftIcon",
+    tooltip: "Left Sidebar",
+  },
+];
+
+const defaultRightTabItems: MenuItem<string>[] = [
+  {
+    title: "",
+    value: "defaultRight",
+    icon: "BorderRightIcon",
+    tooltip: "Right Sidebar",
+  },
+];
+
+export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
+  LeftTab extends string = string,
+  RightTab extends string = string,
+>(
   {
     autoSavePrefix,
     left,
+    leftTabItems = defaultLeftTabItems as MenuItem<LeftTab>[],
+    leftTabValue: leftTabValueProp,
+    onChangeLeftTab,
     right,
+    rightTabItems = defaultRightTabItems as MenuItem<RightTab>[],
+    rightTabValue: rightTabValueProp,
+    onChangeRightTab,
     id,
     className,
     style,
     toolbar,
     children,
-    onChangeLayoutState,
     sideType = "auto",
     sideTypeBreakpoint = 800,
     detectSize = "container",
@@ -82,6 +122,8 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
       resizable: leftResizable = true,
       style: leftStyle,
       className: leftClassName,
+      defaultCollapsed: leftDefaultCollapsed = false,
+      showTabs: leftShowTabs = true,
     } = {},
     rightOptions: {
       minSize: rightMinSize = 200,
@@ -90,9 +132,11 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
       resizable: rightResizable = true,
       style: rightStyle,
       className: rightClassName,
+      defaultCollapsed: rightDefaultCollapsed = false,
+      showTabs: rightShowTabs = true,
     } = {},
     theme,
-  }: WorkspaceLayoutProps,
+  }: WorkspaceLayoutProps<LeftTab, RightTab>,
   forwardedRef: React.ForwardedRef<WorkspaceLayoutRef>
 ) {
   const containerRef = React.useRef<HTMLDivElement | null>(null);
@@ -152,16 +196,18 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
   const leftSidebarRef = useRef<SidebarRef>(null);
   const rightSidebarRef = useRef<SidebarRef>(null);
 
-  const [internalLayoutState, setInternalLayoutState] =
-    useState<PanelLayoutState | null>(null);
+  const [leftTabValue, setLeftTabValue] = useControlledOrUncontrolled<LeftTab>({
+    value: leftTabValueProp,
+    onChange: onChangeLeftTab,
+    defaultValue: getFirstTabValue(leftTabItems, "" as LeftTab),
+  });
 
-  const handleChangeLayoutState = useCallback(
-    (state: PanelLayoutState) => {
-      setInternalLayoutState(state);
-      onChangeLayoutState?.(state);
-    },
-    [onChangeLayoutState]
-  );
+  const [rightTabValue, setRightTabValue] =
+    useControlledOrUncontrolled<RightTab>({
+      value: rightTabValueProp,
+      onChange: onChangeRightTab,
+      defaultValue: getFirstTabValue(rightTabItems, "" as RightTab),
+    });
 
   useImperativeHandle(forwardedRef, () => ({
     setLeftExpanded: (expanded: boolean) => {
@@ -235,7 +281,7 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
       style={leftStyle}
       className={cx("bg-sidebar-background flex-col", leftClassName)}
     >
-      {left}
+      {leftTabValue ? renderPanelChildren(left, leftTabValue) : null}
     </PanelInner>
   ) : null;
 
@@ -244,7 +290,7 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
       style={rightStyle}
       className={cx("bg-sidebar-background flex-col", rightClassName)}
     >
-      {right}
+      {rightTabValue ? renderPanelChildren(right, rightTabValue) : null}
     </PanelInner>
   ) : null;
 
@@ -252,28 +298,52 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
     <PanelInner className="bg-canvas-background">{children}</PanelInner>
   );
 
-  const leftSidebarOptions: PercentageSidebarOptions = {
-    minSize: leftSidebarMinPercentage,
-    maxSize: leftSidebarMaxPercentage,
-    initialSize: leftSidebarPercentage,
-    resizable: leftResizable,
-  };
+  const leftSidebarOptions: PercentageSidebarOptions = useMemo(
+    () => ({
+      minSize: leftSidebarMinPercentage,
+      maxSize: leftSidebarMaxPercentage,
+      initialSize: leftSidebarPercentage,
+      resizable: leftResizable,
+      defaultCollapsed: leftDefaultCollapsed,
+      showTabs: leftShowTabs,
+    }),
+    [
+      leftSidebarMinPercentage,
+      leftSidebarMaxPercentage,
+      leftSidebarPercentage,
+      leftResizable,
+      leftDefaultCollapsed,
+      leftShowTabs,
+    ]
+  );
 
-  const rightSidebarOptions: PercentageSidebarOptions = {
-    minSize: rightSidebarMinPercentage,
-    maxSize: rightSidebarMaxPercentage,
-    initialSize: rightSidebarPercentage,
-    resizable: rightResizable,
-  };
+  const rightSidebarOptions: PercentageSidebarOptions = useMemo(
+    () => ({
+      minSize: rightSidebarMinPercentage,
+      maxSize: rightSidebarMaxPercentage,
+      initialSize: rightSidebarPercentage,
+      resizable: rightResizable,
+      defaultCollapsed: rightDefaultCollapsed,
+      showTabs: rightShowTabs,
+    }),
+    [
+      rightSidebarMinPercentage,
+      rightSidebarMaxPercentage,
+      rightSidebarPercentage,
+      rightResizable,
+      rightDefaultCollapsed,
+      rightShowTabs,
+    ]
+  );
 
   const LayoutComponent =
     sideType === "panel"
-      ? PanelWorkspaceLayout
+      ? PanelWorkspaceLayout<LeftTab, RightTab>
       : sideType === "drawer"
-        ? DrawerWorkspaceLayout
+        ? DrawerWorkspaceLayout<LeftTab, RightTab>
         : parentSize.width > sideTypeBreakpoint
-          ? PanelWorkspaceLayout
-          : DrawerWorkspaceLayout;
+          ? PanelWorkspaceLayout<LeftTab, RightTab>
+          : DrawerWorkspaceLayout<LeftTab, RightTab>;
 
   // Wait until the container size is available to render the layout.
   // This is to avoid flickering when the layout is initially rendered.
@@ -300,14 +370,18 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
             leftPanel={leftPanel}
             rightPanel={rightPanel}
             centerPanel={centerPanel}
+            leftTabItems={leftTabItems}
+            leftTabValue={leftTabValue}
+            onChangeLeftTab={setLeftTabValue}
+            rightTabItems={rightTabItems}
+            rightTabValue={rightTabValue}
+            onChangeRightTab={setRightTabValue}
             leftSidebarOptions={leftSidebarOptions}
             rightSidebarOptions={rightSidebarOptions}
             centerPanelPercentage={centerPanelPercentage}
             autoSavePrefix={autoSavePrefix}
-            internalLayoutState={internalLayoutState}
             leftSidebarRef={leftSidebarRef}
             rightSidebarRef={rightSidebarRef}
-            handleChangeLayoutState={handleChangeLayoutState}
           />
         )}
       </div>
@@ -330,3 +404,14 @@ const PanelInner = memo(function PanelInner({
     </div>
   );
 });
+
+function getFirstTabValue<TabValue extends string>(
+  items: MenuItem<TabValue>[],
+  defaultValue: TabValue
+): TabValue {
+  const firstItem = items.at(0);
+
+  return firstItem?.type === undefined
+    ? firstItem?.value ?? defaultValue
+    : defaultValue;
+}

package/src/components/workspace/constants.ts

@@ -0,0 +1,4 @@
+export const EDITOR_PANEL_GROUP_ID = "editor-panel-group";
+export const LEFT_SIDEBAR_ID = "editor-1-left-sidebar";
+export const RIGHT_SIDEBAR_ID = "editor-3-right-sidebar";
+export const CONTENT_AREA_ID = "editor-2-content-area";