@noya-app/noya-designsystem 0.1.41 → 0.1.43

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>
+  );
 });

package/src/components/internal/Menu.tsx

@@ -84,13 +84,14 @@ export const styles = {
 
   itemStyle: ({ disabled }: { disabled?: boolean }) => `
     flex-none select-none cursor-pointer rounded
-    p-[6px_8px]
-    flex items-center
-    font-sans text-button font-medium 
-    ${disabled ? "text-text-disabled" : ""}
+    py-1.5 px-2
     focus:outline-none focus:text-white focus:bg-primary
     focus:kbd:text-white
     active:bg-primary-light
+    transition-colors
+    flex items-center
+    font-sans text-button font-medium 
+    ${disabled ? "text-text-disabled" : ""}
   `,
 
   itemIndicatorStyle: `

package/src/contexts/DesignSystemConfiguration.tsx

@@ -1,13 +1,5 @@
 import { getCurrentPlatform, PlatformName } from "@noya-app/noya-keymap";
-import React, {
-  createContext,
-  memo,
-  ReactNode,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import * as React from "react";
 import { ToastProvider } from "../components/Toast";
 import { DialogProvider } from "./DialogContext";
 import { FloatingWindowProvider } from "./FloatingWindowContext";
@@ -17,23 +9,22 @@ export type DesignSystemConfigurationContextValue = {
 };
 
 const DesignSystemConfigurationContext =
-  createContext<DesignSystemConfigurationContextValue>({
+  React.createContext<DesignSystemConfigurationContextValue>({
     platform: "key",
   });
 
-export const DesignSystemConfigurationProvider = memo(
+export const DesignSystemConfigurationProvider = React.memo(
   function DesignSystemConfigurationProvider({
     children,
     platform,
   }: {
-    children: ReactNode;
+    children: React.ReactNode;
     platform?: PlatformName;
   }) {
-    const [internalPlatform, setInternalPlatform] = useState<PlatformName>(
-      platform ?? "key"
-    );
+    const [internalPlatform, setInternalPlatform] =
+      React.useState<PlatformName>(platform ?? "key");
 
-    useEffect(() => {
+    React.useEffect(() => {
       if (platform !== undefined) return;
 
       if (typeof navigator !== "undefined") {
@@ -41,23 +32,23 @@ export const DesignSystemConfigurationProvider = memo(
       }
     }, [platform]);
 
-    const contextValue = useMemo(
+    const contextValue = React.useMemo(
       () => ({ platform: platform ?? internalPlatform }),
       [platform, internalPlatform]
     );
 
     return (
       <DesignSystemConfigurationContext.Provider value={contextValue}>
-          <DialogProvider>
-            <ToastProvider>
-              <FloatingWindowProvider>{children}</FloatingWindowProvider>
-            </ToastProvider>
-          </DialogProvider>
+        <DialogProvider>
+          <ToastProvider>
+            <FloatingWindowProvider>{children}</FloatingWindowProvider>
+          </ToastProvider>
+        </DialogProvider>
       </DesignSystemConfigurationContext.Provider>
     );
   }
 );
 
 export function useDesignSystemConfiguration(): DesignSystemConfigurationContextValue {
-  return useContext(DesignSystemConfigurationContext);
-}
+  return React.useContext(DesignSystemConfigurationContext);
+}