@noya-app/noya-designsystem 0.1.17 → 0.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -36,6 +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-virtualized": "^9.22.3",
     "react-window": "^1.8.8",
     "vscode-fuzzy-scorer": "^0.0.4"

package/src/components/InspectorContainer.tsx

@@ -0,0 +1,63 @@
+import {
+  Divider,
+  ScrollArea,
+  Stack,
+  useDesignSystemTheme,
+  withSeparatorElements,
+} from "@noya-app/noya-designsystem";
+import React, { forwardRef, memo } from "react";
+
+export const InspectorContainer = memo(
+  forwardRef(function InspectorContainer(
+    {
+      header,
+      children,
+      fallback,
+      showDividers,
+      id,
+      className,
+      style,
+    }: {
+      header?: React.ReactNode;
+      children?: React.ReactNode;
+      fallback?: React.ReactNode;
+      showDividers?: boolean;
+      id?: string;
+      className?: string;
+      style?: React.CSSProperties;
+    },
+    forwardedRef: React.ForwardedRef<HTMLDivElement>
+  ) {
+    const theme = useDesignSystemTheme();
+
+    return (
+      <div
+        ref={forwardedRef}
+        id={id}
+        className={className}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          position: "relative",
+          background: theme.colors.sidebar.background,
+          ...style,
+        }}
+      >
+        {header}
+        {children ? (
+          <ScrollArea>
+            <Stack.V position="relative">
+              {showDividers
+                ? withSeparatorElements(children, <Divider />)
+                : children}
+            </Stack.V>
+          </ScrollArea>
+        ) : fallback ? (
+          <Stack.V position="relative" height="100%">
+            {fallback}
+          </Stack.V>
+        ) : null}
+      </div>
+    );
+  })
+);

package/src/components/WorkspaceLayout.tsx

@@ -0,0 +1,212 @@
+import { Stack, useDesignSystemTheme } from "@noya-app/noya-designsystem";
+import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
+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";
+
+interface Props {
+  autoSavePrefix?: string;
+  leftSidebarContent?: React.ReactNode;
+  children?: React.ReactNode;
+  rightSidebarContent?: React.ReactNode;
+  hasRightSidebar?: boolean;
+  hasLeftSidebar?: boolean;
+  onChangeLayoutState?: (layoutState: PanelLayoutState) => void;
+  leftSidebarInitialSize?: number;
+  rightSidebarInitialSize?: number;
+  leftSidebarCanResize?: boolean;
+}
+
+export type IWorkspaceLayout = {
+  setLeftSidebarExpanded: (expanded: boolean) => void;
+  setRightSidebarExpanded: (expanded: boolean) => void;
+  toggleAllSidebars: () => void;
+  toggleLeftSidebar: () => void;
+  toggleRightSidebar: () => void;
+};
+
+export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
+  {
+    autoSavePrefix,
+    leftSidebarContent: leftPanelContent,
+    children: centerPanelContent,
+    rightSidebarContent: rightPanelContent,
+    hasLeftSidebar = !!leftPanelContent,
+    hasRightSidebar = !!rightPanelContent,
+    onChangeLayoutState,
+    leftSidebarInitialSize = 280,
+    rightSidebarInitialSize = 400,
+    leftSidebarCanResize = false,
+  }: Props,
+  forwardedRef: React.ForwardedRef<IWorkspaceLayout>
+) {
+  const windowSize = useWindowSize();
+  const leftSidebarPercentage =
+    (leftSidebarInitialSize / windowSize.width) * 100;
+  const rightSidebarPercentage =
+    (rightSidebarInitialSize / windowSize.width) * 100;
+  const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
+  const leftSidebarRef = useRef<ImperativePanelHandle>(null);
+  const rightSidebarRef = useRef<ImperativePanelHandle>(null);
+
+  usePreservePanelSize(panelGroupRef, onChangeLayoutState);
+
+  const theme = useDesignSystemTheme();
+
+  useImperativeHandle(forwardedRef, () => ({
+    setLeftSidebarExpanded: (expanded: boolean) => {
+      if (expanded) {
+        leftSidebarRef.current?.expand();
+      } else {
+        leftSidebarRef.current?.collapse();
+      }
+    },
+    setRightSidebarExpanded: (expanded: boolean) => {
+      if (expanded) {
+        rightSidebarRef.current?.expand();
+      } else {
+        rightSidebarRef.current?.collapse();
+      }
+    },
+    toggleAllSidebars: () => {
+      const isLeftSidebarExpanded = leftSidebarRef.current?.isExpanded();
+      const isRightSidebarExpanded = rightSidebarRef.current?.isExpanded();
+
+      if (isLeftSidebarExpanded || isRightSidebarExpanded) {
+        leftSidebarRef.current?.collapse();
+        rightSidebarRef.current?.collapse();
+      } else {
+        leftSidebarRef.current?.expand();
+        rightSidebarRef.current?.expand();
+      }
+    },
+    toggleLeftSidebar: () => {
+      const isLeftSidebarExpanded = leftSidebarRef.current?.isExpanded();
+
+      if (isLeftSidebarExpanded) {
+        leftSidebarRef.current?.collapse();
+      } else {
+        leftSidebarRef.current?.expand();
+      }
+    },
+    toggleRightSidebar: () => {
+      const isRightSidebarExpanded = rightSidebarRef.current?.isExpanded();
+
+      if (isRightSidebarExpanded) {
+        rightSidebarRef.current?.collapse();
+      } else {
+        rightSidebarRef.current?.expand();
+      }
+    },
+  }));
+
+  useKeyboardShortcuts({
+    "Mod-.": () => {
+      const isLeftSidebarExpanded = leftSidebarRef.current?.isExpanded();
+      const isRightSidebarExpanded = rightSidebarRef.current?.isExpanded();
+
+      if (isLeftSidebarExpanded || isRightSidebarExpanded) {
+        leftSidebarRef.current?.collapse();
+        rightSidebarRef.current?.collapse();
+      } else {
+        leftSidebarRef.current?.expand();
+        rightSidebarRef.current?.expand();
+      }
+    },
+  });
+
+  return (
+    <Stack.H flex="1">
+      <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={leftSidebarPercentage}
+              {...(!leftSidebarCanResize && { maxSize: leftSidebarPercentage })}
+              collapsible
+              style={{
+                display: "flex",
+                flexDirection: "row",
+              }}
+            >
+              {leftPanelContent}
+            </Panel>
+            <PanelResizeHandle
+              style={{
+                cursor: "col-resize",
+                width: "1px",
+                height: "100%",
+                backgroundColor: theme.colors.divider,
+              }}
+            />
+          </>
+        )}
+        <Panel
+          id={CONTENT_AREA_ID}
+          order={2}
+          minSize={10}
+          style={{
+            display: "flex",
+            flexDirection: "row",
+          }}
+        >
+          {centerPanelContent}
+        </Panel>
+        {hasRightSidebar && (
+          <>
+            <PanelResizeHandle
+              style={{
+                cursor: "col-resize",
+                width: "1px",
+                height: "100%",
+                backgroundColor: theme.colors.divider,
+              }}
+            />
+            <Panel
+              id={RIGHT_SIDEBAR_ID}
+              order={3}
+              ref={rightSidebarRef}
+              minSize={rightSidebarPercentage}
+              defaultSize={rightSidebarPercentage}
+              collapsible
+              style={{
+                display: "flex",
+                flexDirection: "row",
+              }}
+            >
+              {rightPanelContent}
+            </Panel>
+          </>
+        )}
+      </PanelGroup>
+    </Stack.H>
+  );
+});

package/src/contexts/DesignSystemConfiguration.tsx

@@ -11,6 +11,7 @@ import React, {
 import { ThemeProvider, useTheme } from "styled-components";
 import { ToastProvider } from "../components/Toast";
 import { Theme } from "../theme";
+import * as darkTheme from "../theme/dark";
 import * as lightTheme from "../theme/light";
 import { DialogProvider } from "./DialogContext";
 import { FloatingWindowProvider } from "./FloatingWindowContext";
@@ -54,11 +55,11 @@ const DesignSystemConfigurationContext =
 export const DesignSystemConfigurationProvider = memo(
   function DesignSystemConfigurationProvider({
     children,
-    theme = lightTheme,
+    theme,
     platform,
   }: {
     children: ReactNode;
-    theme?: Theme;
+    theme?: Theme | "light" | "dark";
     platform?: PlatformName;
   }) {
     const [internalPlatform, setInternalPlatform] = useState<PlatformName>(
@@ -78,9 +79,16 @@ export const DesignSystemConfigurationProvider = memo(
       [platform, internalPlatform]
     );
 
+    const resolvedTheme =
+      theme === "light"
+        ? lightTheme
+        : theme === "dark"
+          ? darkTheme
+          : theme ?? lightTheme;
+
     return (
       <DesignSystemConfigurationContext.Provider value={contextValue}>
-        <ThemeProvider theme={theme}>
+        <ThemeProvider theme={resolvedTheme}>
           <DialogProvider>
             <ToastProvider>
               <FloatingWindowProvider>{children}</FloatingWindowProvider>

package/src/hooks/usePreservePanelSize.tsx

@@ -0,0 +1,156 @@
+import React, { useLayoutEffect, useRef } from "react";
+import { ImperativePanelGroupHandle } from "react-resizable-panels";
+import { useWindowSize } from "./useWindowSize";
+
+export const EDITOR_PANEL_GROUP_ID = "editor-panel-group";
+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
+) {
+  const windowSize = useWindowSize();
+  const layoutRef = useRef<
+    { windowWidth: number; panelPercentages: number[] } | undefined
+  >();
+
+  useLayoutEffect(() => {
+    const panelGroup = document.querySelector(
+      `[data-panel-group-id="${EDITOR_PANEL_GROUP_ID}"]`
+    ) as HTMLElement;
+
+    function observePanels() {
+      const panels = [
+        ...panelGroup.querySelectorAll<HTMLElement>("[data-panel]"),
+      ];
+
+      const panelObserver = new ResizeObserver(() => {
+        const layout = {
+          windowWidth: panelGroup.offsetWidth,
+          panelPercentages: panelGroupRef.current?.getLayout() ?? [],
+        };
+        layoutRef.current = layout;
+
+        const leftSidebar = panels.find(
+          (panel) => panel.id === LEFT_SIDEBAR_ID
+        );
+        const rightSidebar = panels.find(
+          (panel) => panel.id === RIGHT_SIDEBAR_ID
+        );
+
+        setPanelLayoutState?.({
+          leftSidebarCollapsed: leftSidebar?.offsetWidth === 0,
+          rightSidebarCollapsed: rightSidebar?.offsetWidth === 0,
+        });
+      });
+
+      panels.forEach((panel) => panelObserver.observe(panel));
+
+      return () => {
+        panelObserver.disconnect();
+      };
+    }
+
+    let disconnectPanelObserver = observePanels();
+
+    const panelGroupObserver = new MutationObserver(() => {
+      disconnectPanelObserver();
+      disconnectPanelObserver = observePanels();
+    });
+
+    panelGroupObserver.observe(panelGroup, {
+      childList: true,
+    });
+
+    return () => {
+      disconnectPanelObserver();
+      panelGroupObserver.disconnect();
+    };
+  }, [panelGroupRef, setPanelLayoutState]);
+
+  useLayoutEffect(() => {
+    if (!layoutRef.current) return;
+
+    // Preserve the pixel values of the left and right sidebar when the window is resized.
+    // To do this we convert the percentage values to pixel values based on the old window width,
+    // then convert the pixel values to percentage values based on the new window width.
+    const {
+      windowWidth: oldWindowWidth,
+      panelPercentages: oldPanelPercentages,
+    } = layoutRef.current;
+
+    // Check the types of the values in the array
+    if (
+      oldPanelPercentages.some(
+        (value) => typeof value !== "number" || isNaN(value)
+      ) ||
+      oldWindowWidth === 0
+    ) {
+      return;
+    }
+
+    const currentLayout = panelGroupRef.current?.getLayout();
+
+    // Ensure we have the same number of panels
+    if (!currentLayout || currentLayout.length !== oldPanelPercentages.length) {
+      return;
+    }
+
+    if (currentLayout.length === 3) {
+      const leftSidebarWidth = (oldPanelPercentages[0] / 100) * oldWindowWidth;
+      const rightSidebarWidth = (oldPanelPercentages[2] / 100) * oldWindowWidth;
+
+      const newLeftSidebarPercentage =
+        (leftSidebarWidth / windowSize.width) * 100;
+      const newRightSidebarPercentage =
+        (rightSidebarWidth / windowSize.width) * 100;
+
+      const newLayout = [
+        newLeftSidebarPercentage,
+        100 - newLeftSidebarPercentage - newRightSidebarPercentage,
+        newRightSidebarPercentage,
+      ];
+
+      try {
+        panelGroupRef.current?.setLayout(newLayout);
+      } catch (e) {
+        console.error(e);
+        console.info("snapshot on error", {
+          oldWindowWidth,
+          oldPanelPercentages,
+          newLayout,
+          currentLayout,
+        });
+      }
+    } else if (currentLayout.length === 2) {
+      const leftSidebarWidth = (oldPanelPercentages[0] / 100) * oldWindowWidth;
+
+      const newLeftSidebarPercentage =
+        (leftSidebarWidth / windowSize.width) * 100;
+
+      const newLayout = [
+        newLeftSidebarPercentage,
+        100 - newLeftSidebarPercentage,
+      ];
+
+      try {
+        panelGroupRef.current?.setLayout(newLayout);
+      } catch (e) {
+        console.error(e);
+        console.info("snapshot on error", {
+          oldWindowWidth,
+          oldPanelPercentages,
+          newLayout,
+          currentLayout,
+        });
+      }
+    }
+  }, [panelGroupRef, windowSize.width]);
+}

package/src/hooks/useWindowSize.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+
+export function useWindowSize() {
+  const [size, setSize] = useState(
+    typeof window === "undefined"
+      ? { width: 0, height: 0 }
+      : {
+          width: window.innerWidth,
+          height: window.innerHeight,
+        }
+  );
+
+  useEffect(() => {
+    const handleResize = () =>
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return size;
+}

package/src/index.tsx

@@ -32,6 +32,7 @@ export * from "./components/GridView";
 export * from "./components/IconButton";
 export * from "./components/InputField";
 export * from "./components/InputFieldWithCompletions";
+export * from "./components/InspectorContainer";
 export * from "./components/Label";
 export * from "./components/LabeledElementView";
 export * from "./components/ListView";
@@ -50,6 +51,7 @@ export * from "./components/Text";
 export * from "./components/Toast";
 export * from "./components/Tooltip";
 export * from "./components/TreeView";
+export * from "./components/WorkspaceLayout";
 export { KeyboardShortcut, SEPARATOR_ITEM } from "./components/internal/Menu";
 export type {
   ExtractMenuItemType,