@noya-app/noya-designsystem 0.1.47 → 0.1.49

package/src/components/workspace/DrawerWorkspaceLayout.tsx

@@ -0,0 +1,86 @@
+import React, { memo, useLayoutEffect, useRef, useState } from "react";
+import {
+  EDITOR_PANEL_GROUP_ID,
+  LEFT_SIDEBAR_ID,
+  RIGHT_SIDEBAR_ID,
+} from "../../hooks/usePreservePanelSize";
+import { Drawer } from "../Drawer";
+import { LayoutProps } from "./types";
+
+export const DrawerWorkspaceLayout = memo(function DrawerWorkspaceLayout({
+  leftPanel,
+  leftSidebarRef,
+  rightPanel,
+  rightSidebarRef,
+  centerPanel,
+  internalLayoutState,
+  handleChangeLayoutState,
+}: LayoutProps) {
+  const portalContainer = useRef<HTMLDivElement>(null);
+  const [mounted, setMounted] = useState(false);
+
+  useLayoutEffect(() => {
+    if (mounted) return;
+
+    setMounted(true);
+    handleChangeLayoutState({
+      leftSidebarCollapsed: true,
+      rightSidebarCollapsed: true,
+    });
+  }, [handleChangeLayoutState, mounted]);
+
+  const leftSidebarCollapsed =
+    internalLayoutState?.leftSidebarCollapsed ?? false;
+  const rightSidebarCollapsed =
+    internalLayoutState?.rightSidebarCollapsed ?? false;
+
+  return (
+    <div
+      ref={portalContainer}
+      id={EDITOR_PANEL_GROUP_ID}
+      className="flex flex-1 relative focus:outline-none"
+    >
+      {leftPanel && (
+        <Drawer
+          id={LEFT_SIDEBAR_ID}
+          ref={leftSidebarRef}
+          className="flex-1"
+          open={!leftSidebarCollapsed}
+          positioning="absolute"
+          side="left"
+          trigger={null}
+          portalContainer={portalContainer.current}
+          onOpenChange={(open) => {
+            handleChangeLayoutState({
+              rightSidebarCollapsed: rightSidebarCollapsed,
+              leftSidebarCollapsed: !open,
+            });
+          }}
+        >
+          {leftPanel}
+        </Drawer>
+      )}
+      {centerPanel}
+      {rightPanel && (
+        <Drawer
+          id={RIGHT_SIDEBAR_ID}
+          ref={rightSidebarRef}
+          className="flex-1"
+          open={!rightSidebarCollapsed}
+          positioning="absolute"
+          side="right"
+          trigger={null}
+          portalContainer={portalContainer.current}
+          onOpenChange={(open) => {
+            handleChangeLayoutState({
+              leftSidebarCollapsed: leftSidebarCollapsed,
+              rightSidebarCollapsed: !open,
+            });
+          }}
+        >
+          {rightPanel}
+        </Drawer>
+      )}
+    </div>
+  );
+});

package/src/components/workspace/PanelWorkspaceLayout.tsx

@@ -0,0 +1,102 @@
+import React, { memo, useRef } from "react";
+import {
+  ImperativePanelGroupHandle,
+  ImperativePanelHandle,
+  Panel,
+  PanelGroup,
+  PanelResizeHandle,
+} from "react-resizable-panels";
+import {
+  CONTENT_AREA_ID,
+  EDITOR_PANEL_GROUP_ID,
+  LEFT_SIDEBAR_ID,
+  RIGHT_SIDEBAR_ID,
+  usePreservePanelSize,
+} from "../../hooks/usePreservePanelSize";
+import { LayoutProps } from "./types";
+
+export const PanelWorkspaceLayout = memo(function PanelWorkspaceLayout({
+  leftPanel,
+  rightPanel,
+  centerPanel,
+  leftSidebarOptions,
+  rightSidebarOptions,
+  centerPanelPercentage,
+  autoSavePrefix,
+  internalLayoutState,
+  leftSidebarRef,
+  rightSidebarRef,
+  handleChangeLayoutState,
+}: LayoutProps) {
+  const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
+
+  usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
+
+  return (
+    <PanelGroup
+      ref={panelGroupRef}
+      id={EDITOR_PANEL_GROUP_ID}
+      className="flex-1"
+      direction="horizontal"
+      autoSaveId={
+        autoSavePrefix
+          ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}`
+          : undefined
+      }
+    >
+      {leftPanel && (
+        <>
+          <Panel
+            id={LEFT_SIDEBAR_ID}
+            className="relative"
+            order={1}
+            ref={leftSidebarRef as React.RefObject<ImperativePanelHandle>}
+            defaultSize={leftSidebarOptions.initialSize}
+            minSize={leftSidebarOptions.minSize}
+            maxSize={
+              leftSidebarOptions.maxSize ??
+              (!leftSidebarOptions.resizable
+                ? leftSidebarOptions.initialSize
+                : undefined)
+            }
+            collapsible
+          >
+            {internalLayoutState?.leftSidebarCollapsed ? null : leftPanel}
+          </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"
+      >
+        {centerPanel}
+      </Panel>
+      {rightPanel && (
+        <>
+          <PanelResizeHandle className="cursor-col-resize w-px h-full bg-divider" />
+          <Panel
+            id={RIGHT_SIDEBAR_ID}
+            className="relative"
+            order={3}
+            ref={rightSidebarRef as React.RefObject<ImperativePanelHandle>}
+            minSize={rightSidebarOptions.minSize}
+            defaultSize={rightSidebarOptions.initialSize}
+            maxSize={
+              rightSidebarOptions.maxSize ??
+              (!rightSidebarOptions.resizable
+                ? rightSidebarOptions.initialSize
+                : undefined)
+            }
+            collapsible
+          >
+            {internalLayoutState?.rightSidebarCollapsed ? null : rightPanel}
+          </Panel>
+        </>
+      )}
+    </PanelGroup>
+  );
+});

package/src/components/{WorkspaceLayout.tsx → workspace/WorkspaceLayout.tsx}

@@ -1,4 +1,5 @@
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
+import { useSize } from "@noya-app/react-utils";
 import React, {
   forwardRef,
   memo,
@@ -7,23 +8,19 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { useWindowSize } from "../../hooks/useWindowSize";
+import { cx } from "../../utils/classNames";
+import { DrawerWorkspaceLayout } from "./DrawerWorkspaceLayout";
+import { PanelWorkspaceLayout } from "./PanelWorkspaceLayout";
 import {
-  ImperativePanelGroupHandle,
-  ImperativePanelHandle,
-  Panel,
-  PanelGroup,
-  PanelResizeHandle,
-} from "react-resizable-panels";
-import {
-  CONTENT_AREA_ID,
-  EDITOR_PANEL_GROUP_ID,
-  LEFT_SIDEBAR_ID,
   PanelLayoutState,
-  RIGHT_SIDEBAR_ID,
-  usePreservePanelSize,
-} from "../hooks/usePreservePanelSize";
-import { useWindowSize } from "../hooks/useWindowSize";
-import { cx } from "../utils/classNames";
+  PercentageSidebarOptions,
+  SidebarRef,
+} from "./types";
+
+export type SideType = "auto" | "panel" | "drawer";
+
+export type DetectSizeType = "container" | "window";
 
 export interface WorkspaceLayoutProps {
   id?: string;
@@ -37,10 +34,13 @@ export interface WorkspaceLayoutProps {
   right?: React.ReactNode;
   rightOptions?: SideOptions;
   toolbar?: React.ReactNode;
+  sideType?: SideType;
+  sideTypeBreakpoint?: number;
+  detectSize?: DetectSizeType;
   onChangeLayoutState?: (layoutState: PanelLayoutState) => void;
 }
 
-export type IWorkspaceLayout = {
+export type WorkspaceLayoutRef = {
   setLeftExpanded: (expanded: boolean) => void;
   setRightExpanded: (expanded: boolean) => void;
   toggleSides: () => void;
@@ -72,6 +72,9 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
     toolbar,
     children,
     onChangeLayoutState,
+    sideType = "auto",
+    sideTypeBreakpoint = 800,
+    detectSize = "container",
     leftOptions: {
       minSize: leftMinSize = 200,
       maxSize: leftMaxSize = 500,
@@ -90,13 +93,25 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
     } = {},
     theme,
   }: WorkspaceLayoutProps,
-  forwardedRef: React.ForwardedRef<IWorkspaceLayout>
+  forwardedRef: React.ForwardedRef<WorkspaceLayoutRef>
 ) {
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+  const containerSize = useSize(containerRef);
   const windowSize = useWindowSize();
+
+  // If we're in embedded (iframed) mode, use the window size.
+  // Otherwise, use the container size (if it's available).
+  const parentSize =
+    detectSize === "window"
+      ? windowSize
+      : containerSize && containerSize.width > 0
+        ? containerSize
+        : windowSize;
+
   function getPercentage(size: number | string) {
     return typeof size === "string"
       ? parseFloat(size)
-      : (size / windowSize.width) * 100;
+      : (size / parentSize.width) * 100;
   }
 
   function clampPercentage(
@@ -134,12 +149,12 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
     rightSidebarMaxPercentage
   );
 
-  const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
-  const leftSidebarRef = useRef<ImperativePanelHandle>(null);
-  const rightSidebarRef = useRef<ImperativePanelHandle>(null);
+  const leftSidebarRef = useRef<SidebarRef>(null);
+  const rightSidebarRef = useRef<SidebarRef>(null);
 
   const [internalLayoutState, setInternalLayoutState] =
     useState<PanelLayoutState | null>(null);
+
   const handleChangeLayoutState = useCallback(
     (state: PanelLayoutState) => {
       setInternalLayoutState(state);
@@ -148,8 +163,6 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
     [onChangeLayoutState]
   );
 
-  usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
-
   useImperativeHandle(forwardedRef, () => ({
     setLeftExpanded: (expanded: boolean) => {
       if (expanded) {
@@ -217,96 +230,86 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
     (left ? leftSidebarPercentage : 0) -
     (right ? rightSidebarPercentage : 0);
 
+  const leftPanel = left ? (
+    <PanelInner
+      style={leftStyle}
+      className={cx("bg-sidebar-background flex-col", leftClassName)}
+    >
+      {left}
+    </PanelInner>
+  ) : null;
+
+  const rightPanel = right ? (
+    <PanelInner
+      style={rightStyle}
+      className={cx("bg-sidebar-background flex-col", rightClassName)}
+    >
+      {right}
+    </PanelInner>
+  ) : null;
+
+  const centerPanel = (
+    <PanelInner className="bg-canvas-background">{children}</PanelInner>
+  );
+
+  const leftSidebarOptions: PercentageSidebarOptions = {
+    minSize: leftSidebarMinPercentage,
+    maxSize: leftSidebarMaxPercentage,
+    initialSize: leftSidebarPercentage,
+    resizable: leftResizable,
+  };
+
+  const rightSidebarOptions: PercentageSidebarOptions = {
+    minSize: rightSidebarMinPercentage,
+    maxSize: rightSidebarMaxPercentage,
+    initialSize: rightSidebarPercentage,
+    resizable: rightResizable,
+  };
+
+  const LayoutComponent =
+    sideType === "panel"
+      ? PanelWorkspaceLayout
+      : sideType === "drawer"
+        ? DrawerWorkspaceLayout
+        : parentSize.width > sideTypeBreakpoint
+          ? PanelWorkspaceLayout
+          : DrawerWorkspaceLayout;
+
+  // Wait until the container size is available to render the layout.
+  // This is to avoid flickering when the layout is initially rendered.
+  // If we're in embedded (iframed) mode, we don't need to wait for the container size,
+  // because the window size is guaranteed to be available.
+  //
+  // We could always wait for the container size, but this lets us render
+  // sooner in the embedded case.
+  const readyToRender =
+    detectSize === "window" || (containerSize && containerSize.width > 0);
+
   return (
     <div
+      ref={containerRef}
       id={id}
-      className={cx("flex flex-col bg-canvas-background", className)}
+      className={cx("flex flex-col bg-canvas-background relative", className)}
       style={style}
       data-theme={theme}
     >
       {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
-          }
-        >
-          {left && (
-            <>
-              <Panel
-                id={LEFT_SIDEBAR_ID}
-                className="relative"
-                order={1}
-                ref={leftSidebarRef}
-                defaultSize={leftSidebarPercentage}
-                minSize={leftSidebarMinPercentage ?? leftSidebarPercentage}
-                maxSize={
-                  leftSidebarMaxPercentage ??
-                  (!leftResizable ? leftSidebarPercentage : undefined)
-                }
-                collapsible
-              >
-                {internalLayoutState?.leftSidebarCollapsed ? null : (
-                  <PanelInner
-                    style={leftStyle}
-                    className={cx(
-                      "bg-sidebar-background flex-col",
-                      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"
-          >
-            <PanelInner className="bg-canvas-background">{children}</PanelInner>
-          </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}
-                maxSize={
-                  rightSidebarMaxPercentage ??
-                  (!rightResizable ? rightSidebarPercentage : undefined)
-                }
-                collapsible
-              >
-                {internalLayoutState?.rightSidebarCollapsed ? null : (
-                  <PanelInner
-                    style={rightStyle}
-                    className={cx(
-                      "bg-sidebar-background flex-col",
-                      rightClassName
-                    )}
-                  >
-                    {right}
-                  </PanelInner>
-                )}
-              </Panel>
-            </>
-          )}
-        </PanelGroup>
+      <div className="flex flex-row flex-1 relative">
+        {readyToRender && (
+          <LayoutComponent
+            leftPanel={leftPanel}
+            rightPanel={rightPanel}
+            centerPanel={centerPanel}
+            leftSidebarOptions={leftSidebarOptions}
+            rightSidebarOptions={rightSidebarOptions}
+            centerPanelPercentage={centerPanelPercentage}
+            autoSavePrefix={autoSavePrefix}
+            internalLayoutState={internalLayoutState}
+            leftSidebarRef={leftSidebarRef}
+            rightSidebarRef={rightSidebarRef}
+            handleChangeLayoutState={handleChangeLayoutState}
+          />
+        )}
       </div>
     </div>
   );

package/src/components/workspace/types.ts

@@ -0,0 +1,31 @@
+export type SidebarRef = {
+  expand: () => void;
+  collapse: () => void;
+  isExpanded: () => boolean;
+};
+
+export type PercentageSidebarOptions = {
+  minSize?: number;
+  maxSize?: number;
+  initialSize?: number;
+  resizable?: boolean;
+};
+
+export type PanelLayoutState = {
+  leftSidebarCollapsed: boolean;
+  rightSidebarCollapsed: boolean;
+};
+
+export type LayoutProps = {
+  leftPanel: React.ReactNode;
+  rightPanel: React.ReactNode;
+  centerPanel: React.ReactNode;
+  leftSidebarOptions: PercentageSidebarOptions;
+  rightSidebarOptions: PercentageSidebarOptions;
+  centerPanelPercentage: number;
+  autoSavePrefix?: string;
+  internalLayoutState: PanelLayoutState | null;
+  leftSidebarRef: React.RefObject<SidebarRef>;
+  rightSidebarRef: React.RefObject<SidebarRef>;
+  handleChangeLayoutState: (state: PanelLayoutState) => void;
+};

package/src/contexts/DialogContext.tsx

@@ -24,31 +24,26 @@ function createDeferredPromise<T>() {
   return { promise, resolve, reject };
 }
 
+type RenderableProps = { close: () => void };
+
 export type DialogContextValue = {
-  openDialog(options: {
-    title: string;
-    description?: ReactNode;
-    children: ReactNode;
-  }): Promise<void>;
+  openDialog(
+    options: BaseDialogContents & {
+      children: ReactNode | ((props: RenderableProps) => ReactNode);
+    }
+  ): Promise<void>;
 
   openInputDialog(
     options:
       | string
-      | {
-          title: string;
-          description?: ReactNode;
+      | (BaseDialogContents & {
           placeholder?: string;
           initialValue?: string;
-        }
+        })
   ): Promise<string | undefined>;
 
   openConfirmationDialog(
-    options:
-      | string
-      | {
-          title: string;
-          description?: ReactNode;
-        }
+    options: string | BaseDialogContents
   ): Promise<boolean>;
 
   containsElement(element: HTMLElement): boolean;
@@ -56,26 +51,27 @@ export type DialogContextValue = {
 
 const DialogContext = createContext<DialogContextValue | undefined>(undefined);
 
-type InputDialogContents = {
-  type: "input";
+type BaseDialogContents = {
+  style?: React.CSSProperties;
+  className?: string;
   title: string;
   description?: ReactNode;
+};
+
+type InputDialogContents = BaseDialogContents & {
+  type: "input";
   placeholder?: string;
   inputValue: string;
   resolve: (value: string | undefined) => void;
 };
 
-type ConfirmationDialogContents = {
+type ConfirmationDialogContents = BaseDialogContents & {
   type: "confirmation";
-  title: string;
-  description?: ReactNode;
   resolve: (value: boolean) => void;
 };
 
-type CustomDialogContents = {
+type CustomDialogContents = BaseDialogContents & {
   type: "custom";
-  title: string;
-  description?: ReactNode;
   children: ReactNode;
   resolve: () => void;
 };
@@ -95,16 +91,20 @@ export const DialogProvider = function DialogProvider({
   const isOpen = !!contents;
 
   const close = useCallback(() => {
-    if (!contents) return;
-
-    if (contents.type === "input") {
-      contents.resolve(undefined);
-    } else {
-      contents.resolve(false);
+    if (contents) {
+      if (contents.type === "input") {
+        contents.resolve(undefined);
+      } else {
+        contents.resolve(false);
+      }
     }
+
     setContents(undefined);
   }, [contents]);
 
+  const closeRef = useRef(close);
+  closeRef.current = close;
+
   const submit = useCallback(() => {
     if (!contents || contents.type !== "input") return;
 
@@ -115,7 +115,7 @@ export const DialogProvider = function DialogProvider({
   const open: DialogContextValue["openInputDialog"] = useCallback((options) => {
     const { promise, resolve } = createDeferredPromise<string | undefined>();
 
-    const { title, description, initialValue, placeholder } =
+    const { title, description, initialValue, placeholder, style, className } =
       typeof options === "string" ? { title: options } : options;
 
     setContents({
@@ -124,6 +124,8 @@ export const DialogProvider = function DialogProvider({
       description,
       inputValue: initialValue ?? "",
       placeholder,
+      style,
+      className,
       resolve: (value: string | undefined) => {
         resolve(value);
         setContents(undefined);
@@ -137,13 +139,15 @@ export const DialogProvider = function DialogProvider({
     useCallback((options) => {
       const { promise, resolve } = createDeferredPromise<boolean>();
 
-      const { title, description } =
+      const { title, description, style, className } =
         typeof options === "string" ? { title: options } : options;
 
       setContents({
         type: "confirmation",
         title,
         description,
+        style,
+        className,
         resolve: (value: boolean) => {
           resolve(value);
           setContents(undefined);
@@ -157,11 +161,20 @@ export const DialogProvider = function DialogProvider({
     (options) => {
       const { promise, resolve } = createDeferredPromise<void>();
 
+      const { title, description, style, className } = options;
+
+      const children =
+        typeof options.children === "function"
+          ? options.children({ close: closeRef.current })
+          : options.children;
+
       setContents({
         type: "custom",
-        title: options.title,
-        description: options.description,
-        children: options.children,
+        title,
+        description,
+        style,
+        className,
+        children,
         resolve: () => {
           resolve();
           setContents(undefined);
@@ -214,6 +227,8 @@ export const DialogProvider = function DialogProvider({
         title={contents?.title}
         description={contents?.description}
         open={isOpen}
+        style={contents?.style}
+        className={contents?.className}
         onOpenChange={useCallback(
           (isOpen: boolean) => {
             if (!isOpen) {

package/src/hooks/usePreservePanelSize.tsx

@@ -1,5 +1,6 @@
 import React, { useLayoutEffect, useRef } from "react";
 import { ImperativePanelGroupHandle } from "react-resizable-panels";
+import { PanelLayoutState } from "../components/workspace/types";
 import { useWindowSize } from "./useWindowSize";
 
 export const EDITOR_PANEL_GROUP_ID = "editor-panel-group";
@@ -7,11 +8,6 @@ export const LEFT_SIDEBAR_ID = "editor-left-sidebar";
 export const RIGHT_SIDEBAR_ID = "editor-right-sidebar";
 export const CONTENT_AREA_ID = "editor-content-area";
 
-export type PanelLayoutState = {
-  leftSidebarCollapsed: boolean;
-  rightSidebarCollapsed: boolean;
-};
-
 export function usePreservePanelSize(
   panelGroupRef: React.RefObject<ImperativePanelGroupHandle | null>,
   setPanelLayoutState?: (state: PanelLayoutState) => void