@noya-app/noya-designsystem 0.1.63 → 0.1.65

package/src/components/workspace/WorkspaceLayout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import {
   forwardRefGeneric,
@@ -5,13 +7,7 @@ import {
   useSize,
   useWindowSize,
 } from "@noya-app/react-utils";
-import React, {
-  memo,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
+import React, { memo, useImperativeHandle, useMemo, useRef } from "react";
 import { cx } from "../../utils/classNames";
 import { MenuItem } from "../internal/Menu";
 import { DrawerWorkspaceLayout } from "./DrawerWorkspaceLayout";
@@ -19,7 +15,6 @@ import { PanelWorkspaceLayout } from "./PanelWorkspaceLayout";
 import { renderPanelChildren } from "./renderPanelChildren";
 import {
   LayoutProps,
-  PanelLayoutState,
   PercentageSidebarOptions,
   RenderPanel,
   SidebarRef,
@@ -55,7 +50,6 @@ export interface WorkspaceLayoutProps<
   sideType?: SideType;
   sideTypeBreakpoint?: number;
   detectSize?: DetectSizeType;
-  onChangeLayoutState?: (layoutState: PanelLayoutState) => void;
 }
 
 export type WorkspaceLayoutRef = {
@@ -67,6 +61,8 @@ export type WorkspaceLayoutRef = {
 };
 
 export type SideOptions = {
+  // Whether to show the sidebar. Defaults to true.
+  visible?: boolean;
   style?: React.CSSProperties;
   className?: string;
   resizable?: boolean;
@@ -78,23 +74,24 @@ export type SideOptions = {
   minSize?: number | string;
   maxSize?: number | string;
   defaultCollapsed?: boolean;
+  showTabs?: boolean;
 };
 
 const defaultLeftTabItems: MenuItem<string>[] = [
   {
     title: "",
-    value: "default",
+    value: "defaultLeft",
     icon: "BorderLeftIcon",
-    tooltip: "Sidebar",
+    tooltip: "Left Sidebar",
   },
 ];
 
 const defaultRightTabItems: MenuItem<string>[] = [
   {
     title: "",
-    value: "default",
+    value: "defaultRight",
     icon: "BorderRightIcon",
-    tooltip: "Sidebar",
+    tooltip: "Right Sidebar",
   },
 ];
 
@@ -117,11 +114,11 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
     style,
     toolbar,
     children,
-    onChangeLayoutState,
     sideType = "auto",
     sideTypeBreakpoint = 800,
     detectSize = "container",
     leftOptions: {
+      visible: leftVisible = true,
       minSize: leftMinSize = 200,
       maxSize: leftMaxSize = 500,
       initialSize: leftInitialSize = 280,
@@ -129,8 +126,10 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
       style: leftStyle,
       className: leftClassName,
       defaultCollapsed: leftDefaultCollapsed = false,
+      showTabs: leftShowTabs = true,
     } = {},
     rightOptions: {
+      visible: rightVisible = true,
       minSize: rightMinSize = 200,
       maxSize: rightMaxSize = 500,
       initialSize: rightInitialSize = 280,
@@ -138,6 +137,7 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
       style: rightStyle,
       className: rightClassName,
       defaultCollapsed: rightDefaultCollapsed = false,
+      showTabs: rightShowTabs = true,
     } = {},
     theme,
   }: WorkspaceLayoutProps<LeftTab, RightTab>,
@@ -213,20 +213,6 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
       defaultValue: getFirstTabValue(rightTabItems, "" as RightTab),
     });
 
-  const [internalLayoutState, setInternalLayoutState] =
-    useState<PanelLayoutState | null>({
-      leftSidebarCollapsed: leftDefaultCollapsed,
-      rightSidebarCollapsed: rightDefaultCollapsed,
-    });
-
-  const handleChangeLayoutState = useCallback(
-    (state: PanelLayoutState) => {
-      setInternalLayoutState(state);
-      onChangeLayoutState?.(state);
-    },
-    [onChangeLayoutState]
-  );
-
   useImperativeHandle(forwardedRef, () => ({
     setLeftExpanded: (expanded: boolean) => {
       if (expanded) {
@@ -294,41 +280,67 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
     (left ? leftSidebarPercentage : 0) -
     (right ? rightSidebarPercentage : 0);
 
-  const leftPanel = left ? (
-    <PanelInner
-      style={leftStyle}
-      className={cx("bg-sidebar-background flex-col", leftClassName)}
-    >
-      {leftTabValue ? renderPanelChildren(left, leftTabValue) : null}
-    </PanelInner>
-  ) : null;
-
-  const rightPanel = right ? (
-    <PanelInner
-      style={rightStyle}
-      className={cx("bg-sidebar-background flex-col", rightClassName)}
-    >
-      {rightTabValue ? renderPanelChildren(right, rightTabValue) : null}
-    </PanelInner>
-  ) : null;
+  const leftPanel =
+    left && leftVisible !== false ? (
+      <PanelInner
+        style={leftStyle}
+        className={cx("n-bg-sidebar-background n-flex-col", leftClassName)}
+      >
+        {leftTabValue ? renderPanelChildren(left, leftTabValue) : null}
+      </PanelInner>
+    ) : null;
+
+  const rightPanel =
+    right && rightVisible !== false ? (
+      <PanelInner
+        style={rightStyle}
+        className={cx("n-bg-sidebar-background n-flex-col", rightClassName)}
+      >
+        {rightTabValue ? renderPanelChildren(right, rightTabValue) : null}
+      </PanelInner>
+    ) : null;
 
   const centerPanel = (
-    <PanelInner className="bg-canvas-background">{children}</PanelInner>
+    <PanelInner className="n-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"
@@ -353,12 +365,12 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
     <div
       ref={containerRef}
       id={id}
-      className={cx("flex flex-col bg-canvas-background relative", className)}
+      className={cx("n-flex n-flex-col n-bg-canvas-background n-relative", className)}
       style={style}
       data-theme={theme}
     >
       {toolbar}
-      <div className="flex flex-row flex-1 relative">
+      <div className="n-flex n-flex-row n-flex-1 n-relative">
         {readyToRender && (
           <LayoutComponent
             leftPanel={leftPanel}
@@ -374,10 +386,8 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
             rightSidebarOptions={rightSidebarOptions}
             centerPanelPercentage={centerPanelPercentage}
             autoSavePrefix={autoSavePrefix}
-            internalLayoutState={internalLayoutState}
             leftSidebarRef={leftSidebarRef}
             rightSidebarRef={rightSidebarRef}
-            handleChangeLayoutState={handleChangeLayoutState}
           />
         )}
       </div>
@@ -395,7 +405,10 @@ const PanelInner = memo(function PanelInner({
   className?: string;
 }) {
   return (
-    <div style={style} className={cx("absolute inset-0 flex", className)}>
+    <div
+      style={style}
+      className={cx("n-absolute n-inset-0 n-min-w-0 n-flex", className)}
+    >
       {children}
     </div>
   );

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";

package/src/components/workspace/panelStorage.ts

@@ -0,0 +1,216 @@
+import { clientStorage, IClientStorage } from "@noya-app/react-utils";
+import { PanelGroupStorage } from "react-resizable-panels";
+import {
+  CONTENT_AREA_ID,
+  LEFT_SIDEBAR_ID,
+  RIGHT_SIDEBAR_ID,
+} from "./constants";
+import {
+  PercentageSidebarOptions,
+  WorkspaceLayoutGroup,
+  WorkspaceLayoutState,
+} from "./types";
+
+// Workspace sizes are stored as percentages (e.g. layout: [78.7224911972, 21.2775088028])
+// we need to convert them to pixels relative to the window width before storing
+// and convert them back to percentages when getting the item
+export const panelStorage: PanelGroupStorage = {
+  getItem: (name) => {
+    const item = clientStorage.getItem(name);
+
+    if (item) {
+      const parsed = JSON.parse(item);
+      const percentageSize = mapWorkspaceLayoutState(parsed, (size) =>
+        toPercentageSize(size)
+      );
+      const stringified = JSON.stringify(percentageSize);
+      // console.log("getItem", name, stringified);
+      return stringified;
+    }
+
+    return item;
+  },
+
+  setItem: (name, value) => {
+    const parsed = JSON.parse(value);
+    const pixelSize = mapWorkspaceLayoutState(parsed, (size) =>
+      toPixelSize(size)
+    );
+    // console.log("setItem", name, pixelSize);
+    clientStorage.setItem(name, JSON.stringify(pixelSize));
+  },
+};
+
+export const toPixelSize = (size: number, windowWidth = window.innerWidth) =>
+  Math.round((size * windowWidth) / 100);
+export const toPercentageSize = (
+  size: number,
+  windowWidth = window.innerWidth
+) => (size * 100) / windowWidth;
+
+export function mapWorkspaceLayoutState(
+  layout: WorkspaceLayoutState,
+  f: (size: number) => number
+): WorkspaceLayoutState {
+  return Object.fromEntries(
+    Object.entries(layout).map(
+      ([key, value]): [string, WorkspaceLayoutGroup] => {
+        const expandToSizes = Object.fromEntries(
+          Object.entries(value.expandToSizes).map(([key, value]) => [
+            key,
+            f(value),
+          ])
+        );
+
+        return [
+          key,
+          {
+            expandToSizes,
+            layout: value.layout.map(f),
+          },
+        ];
+      }
+    )
+  );
+}
+
+export function getLayoutIds({
+  hasLeftPanel,
+  hasRightPanel,
+  hasCenterPanel,
+}: {
+  hasLeftPanel: boolean;
+  hasRightPanel: boolean;
+  hasCenterPanel: boolean;
+}) {
+  return [
+    hasLeftPanel && LEFT_SIDEBAR_ID,
+    hasCenterPanel && CONTENT_AREA_ID,
+    hasRightPanel && RIGHT_SIDEBAR_ID,
+  ].flatMap((id) => (id ? [id] : []));
+}
+
+export function getPropertyKey(layoutIds: string[]) {
+  return layoutIds.sort().join(",");
+}
+
+export function getStorageKey(autoSaveId: string) {
+  return `react-resizable-panels:${autoSaveId}`;
+}
+
+export function getInitialLayout({
+  layoutIds,
+  leftSidebarOptions,
+  rightSidebarOptions,
+  centerPanelPercentage,
+  hasLeftPanel,
+  hasRightPanel,
+  hasCenterPanel,
+  windowWidth = window.innerWidth,
+}: {
+  layoutIds: string[];
+  leftSidebarOptions: PercentageSidebarOptions;
+  rightSidebarOptions: PercentageSidebarOptions;
+  centerPanelPercentage: number;
+  hasLeftPanel: boolean;
+  hasRightPanel: boolean;
+  hasCenterPanel: boolean;
+  windowWidth?: number;
+}) {
+  return layoutIds.map((id) => {
+    if (id === LEFT_SIDEBAR_ID && hasLeftPanel) {
+      return leftSidebarOptions.defaultCollapsed
+        ? 0
+        : toPixelSize(leftSidebarOptions.initialSize ?? 0, windowWidth);
+    } else if (id === RIGHT_SIDEBAR_ID && hasRightPanel) {
+      return rightSidebarOptions.defaultCollapsed
+        ? 0
+        : toPixelSize(rightSidebarOptions.initialSize ?? 0, windowWidth);
+    } else if (id === CONTENT_AREA_ID && hasCenterPanel) {
+      const shouldShowLeftSidebar =
+        hasLeftPanel && !leftSidebarOptions.defaultCollapsed;
+      const shouldShowRightSidebar =
+        hasRightPanel && !rightSidebarOptions.defaultCollapsed;
+
+      if (!shouldShowLeftSidebar && !shouldShowRightSidebar) {
+        return toPixelSize(100, windowWidth);
+      }
+
+      return toPixelSize(centerPanelPercentage, windowWidth);
+    }
+    return 0;
+  });
+}
+
+export function setInitialLayout({
+  storageKey,
+  propertyKey,
+  calculateLayout,
+  storage = clientStorage,
+}: {
+  storageKey: string;
+  propertyKey: string;
+  calculateLayout: () => number[];
+  storage?: IClientStorage;
+}) {
+  const savedLayout = storage.getItem(storageKey);
+
+  if (!savedLayout) {
+    const layoutObject: WorkspaceLayoutState = {
+      [propertyKey]: {
+        layout: calculateLayout(),
+        expandToSizes: {},
+      },
+    };
+
+    storage.setItem(storageKey, JSON.stringify(layoutObject));
+  } else {
+    let parsedLayout: WorkspaceLayoutState;
+
+    try {
+      parsedLayout = JSON.parse(savedLayout);
+    } catch (error) {
+      console.error(error);
+      return;
+    }
+
+    if (!(propertyKey in parsedLayout)) {
+      const layoutObject: WorkspaceLayoutState = {
+        ...parsedLayout,
+        [propertyKey]: {
+          layout: calculateLayout(),
+          expandToSizes: {},
+        },
+      };
+
+      storage.setItem(storageKey, JSON.stringify(layoutObject));
+    }
+  }
+}
+
+export function getLayoutCollapsedState({
+  layoutGroup,
+  layoutIds,
+  hasLeftPanel,
+  hasRightPanel,
+}: {
+  layoutGroup: WorkspaceLayoutGroup;
+  propertyKey: string;
+  layoutIds: string[];
+  hasLeftPanel: boolean;
+  hasRightPanel: boolean;
+}) {
+  const propertySize = Object.fromEntries(
+    layoutIds.map((id, index) => [id, layoutGroup.layout?.[index]])
+  );
+
+  const leftSize = propertySize?.[LEFT_SIDEBAR_ID];
+  const leftSidebarCollapsed = hasLeftPanel && leftSize === 0 ? true : false;
+  const rightSize = propertySize?.[RIGHT_SIDEBAR_ID];
+  const rightSidebarCollapsed = hasRightPanel && rightSize === 0 ? true : false;
+
+  return {
+    leftSidebarCollapsed,
+    rightSidebarCollapsed,
+  };
+}

package/src/components/workspace/types.ts

@@ -12,6 +12,8 @@ export type PercentageSidebarOptions = {
   maxSize?: number;
   initialSize?: number;
   resizable?: boolean;
+  defaultCollapsed?: boolean;
+  showTabs?: boolean;
 };
 
 export type PanelLayoutState = {
@@ -40,8 +42,13 @@ export type LayoutProps<
   rightSidebarOptions: PercentageSidebarOptions;
   centerPanelPercentage: number;
   autoSavePrefix?: string;
-  internalLayoutState: PanelLayoutState | null;
-  leftSidebarRef: React.RefObject<SidebarRef>;
-  rightSidebarRef: React.RefObject<SidebarRef>;
-  handleChangeLayoutState: (state: PanelLayoutState) => void;
+  leftSidebarRef: React.RefObject<SidebarRef | null>;
+  rightSidebarRef: React.RefObject<SidebarRef | null>;
 };
+
+export type WorkspaceLayoutGroup = {
+  expandToSizes: Record<string, number>;
+  layout: number[];
+};
+
+export type WorkspaceLayoutState = Record<string, WorkspaceLayoutGroup>;

package/src/contexts/DesignSystemConfiguration.tsx

@@ -1,8 +1,11 @@
+"use client";
+
 import { getCurrentPlatform, PlatformName } from "@noya-app/noya-keymap";
 import * as React from "react";
 import { ToastProvider } from "../components/Toast";
 import { DialogProvider } from "./DialogContext";
 import { FloatingWindowProvider } from "./FloatingWindowContext";
+import { LinkComponent, LinkComponentProvider } from "./LinkComponentContext";
 import { OpenPortalsProvider } from "./OpenPortalsContext";
 
 export type DesignSystemConfigurationContextValue = {
@@ -18,9 +21,11 @@ export const DesignSystemConfigurationProvider = React.memo(
   function DesignSystemConfigurationProvider({
     children,
     platform,
+    LinkComponent,
   }: {
     children: React.ReactNode;
     platform?: PlatformName;
+    LinkComponent?: LinkComponent;
   }) {
     const [internalPlatform, setInternalPlatform] =
       React.useState<PlatformName>(platform ?? "key");
@@ -41,11 +46,13 @@ export const DesignSystemConfigurationProvider = React.memo(
     return (
       <DesignSystemConfigurationContext.Provider value={contextValue}>
         <OpenPortalsProvider>
-          <DialogProvider>
-            <ToastProvider>
-              <FloatingWindowProvider>{children}</FloatingWindowProvider>
-            </ToastProvider>
-          </DialogProvider>
+          <LinkComponentProvider value={LinkComponent}>
+            <DialogProvider>
+              <ToastProvider>
+                <FloatingWindowProvider>{children}</FloatingWindowProvider>
+              </ToastProvider>
+            </DialogProvider>
+          </LinkComponentProvider>
         </OpenPortalsProvider>
       </DesignSystemConfigurationContext.Provider>
     );

package/src/contexts/DialogContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, {
   createContext,
   ReactNode,
@@ -26,12 +28,16 @@ function createDeferredPromise<T>() {
 
 type RenderableProps = { close: () => void };
 
+type ClosablePromise<T> = Promise<T> & {
+  close: () => void;
+};
+
 export type DialogContextValue = {
   openDialog(
     options: BaseDialogContents & {
       children: ReactNode | ((props: RenderableProps) => ReactNode);
     }
-  ): Promise<void>;
+  ): ClosablePromise<void>;
 
   openInputDialog(
     options:
@@ -139,7 +145,11 @@ export const DialogProvider = function DialogProvider({
       },
     });
 
-    return promise;
+    const closablePromise = Object.assign(promise, {
+      close: closeRef.current,
+    });
+
+    return closablePromise;
   }, []);
 
   const openConfirmation: DialogContextValue["openConfirmationDialog"] =
@@ -196,7 +206,11 @@ export const DialogProvider = function DialogProvider({
         },
       });
 
-      return promise;
+      const closablePromise = Object.assign(promise, {
+        close: closeRef.current,
+      });
+
+      return closablePromise;
     },
     []
   );
@@ -269,7 +283,7 @@ export const DialogProvider = function DialogProvider({
         )}
       >
         {contents?.type === "confirmation" ? (
-          <div className="flex flex-1 flex-row items-center">
+          <div className="n-flex n-flex-1 n-flex-row n-items-center">
             <Spacer.Horizontal />
             <Button
               onClick={() => {
@@ -314,7 +328,7 @@ export const DialogProvider = function DialogProvider({
               />
             </InputField.Root>
             <Spacer.Vertical size={20} />
-            <div className="flex flex-1 flex-row items-center">
+            <div className="n-flex n-flex-1 n-flex-row n-items-center">
               <Spacer.Horizontal />
               <Button onClick={close}>Cancel</Button>
               <Spacer.Horizontal size={16} />

package/src/contexts/FloatingWindowContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { uuid } from "@noya-app/noya-utils";
 import React, { createContext, useContext, useMemo, useState } from "react";
 import { createPortal } from "react-dom";

package/src/contexts/GlobalInputBlurContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { createContext, useContext, useEffect } from 'react';
 
 export type GlobalInputBlurContextValue = {

package/src/contexts/ImageDataContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 
 export type ImageDataContextValue = {

package/src/contexts/LinkComponentContext.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+
+export type LinkComponent = React.ComponentType<React.ComponentProps<"a">>;
+
+const LinkComponentContext = createContext<LinkComponent | undefined>(
+  undefined
+);
+
+export const LinkComponentProvider = LinkComponentContext.Provider;
+
+export const useLinkComponent = () => {
+  const Link = useContext(LinkComponentContext);
+
+  return Link ?? "a";
+};

package/src/contexts/OpenPortalsContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 
 export type OpenPortalsContextValue = {

package/src/contexts/PortalScopeContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 
 export type PortalScopeContextValue = string;

package/src/hooks/mergeEventHandlers.ts

@@ -1,7 +1,7 @@
 import { unique } from "@noya-app/noya-utils";
 import { composeEventHandlers } from "@radix-ui/primitive";
 
-function composeAllEventHandlers<E>(...handlers: ((e: E) => void)[]) {
+function composeAllEventHandlers<E extends { defaultPrevented: boolean }>(...handlers: ((e: E) => void)[]) {
   const [first, ...rest] = handlers;
 
   return rest.reduce(