@noya-app/noya-designsystem 0.1.9 → 0.1.11

package/src/components/FloatingWindow.tsx

@@ -0,0 +1,315 @@
+import {
+  Divider,
+  IconButton,
+  Small,
+  useCurrentFloatingWindowInternal,
+  useDesignSystemTheme,
+  useFloatingWindowManager,
+} from "@noya-app/noya-designsystem";
+import React, { useCallback, useRef, useState } from "react";
+
+interface FloatingWindowProps {
+  title?: string;
+  onClose?: () => void;
+  children: React.ReactNode;
+  initialWidth?: number;
+  initialHeight?: number;
+  initialX?: number;
+  initialY?: number;
+  minWidth?: number;
+  minHeight?: number;
+  toolbarContent?: React.ReactNode;
+  renderToolbar?: (props: {
+    title?: string;
+    toolbarContent?: React.ReactNode;
+    onClose?: () => void;
+  }) => React.ReactNode;
+}
+
+const styles = {
+  noSelect: {
+    userSelect: "none",
+    WebkitUserSelect: "none",
+    MozUserSelect: "none",
+    msUserSelect: "none",
+  },
+  windowWrapper: {
+    position: "absolute",
+    backgroundColor: "white",
+    borderRadius: "4px",
+    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
+    overflow: "hidden",
+    // backdropFilter: "blur(10px)",
+  },
+  toolbar: {
+    display: "flex",
+    alignItems: "center",
+    padding: "8px 12px",
+    cursor: "move",
+    userSelect: "none",
+    minHeight: "43px",
+  },
+  closeButton: {
+    background: "none",
+    border: "none",
+    fontSize: "16px",
+    cursor: "pointer",
+  },
+  content: {
+    padding: "12px",
+    height: "calc(100% - 44px)", // Adjust based on toolbar height
+    overflow: "auto",
+    display: "flex",
+    flexDirection: "column",
+  },
+  resizeHandle: {
+    position: "absolute",
+  },
+} as const;
+
+const resizeHandlePositions = {
+  top: { top: "0", left: "0", right: "0", height: "5px", cursor: "ns-resize" },
+  right: {
+    top: "0",
+    right: "0",
+    bottom: "0",
+    width: "5px",
+    cursor: "ew-resize",
+  },
+  bottom: {
+    bottom: "0",
+    left: "0",
+    right: "0",
+    height: "5px",
+    cursor: "ns-resize",
+  },
+  left: { top: "0", left: "0", bottom: "0", width: "5px", cursor: "ew-resize" },
+  topLeft: {
+    top: "0",
+    left: "0",
+    width: "10px",
+    height: "10px",
+    cursor: "nwse-resize",
+  },
+  topRight: {
+    top: "0",
+    right: "0",
+    width: "10px",
+    height: "10px",
+    cursor: "nesw-resize",
+  },
+  bottomLeft: {
+    bottom: "0",
+    left: "0",
+    width: "10px",
+    height: "10px",
+    cursor: "nesw-resize",
+  },
+  bottomRight: {
+    bottom: "0",
+    right: "0",
+    width: "10px",
+    height: "10px",
+    cursor: "nwse-resize",
+  },
+};
+
+function defaultRenderToolbar({
+  title,
+  toolbarContent,
+  onClose,
+}: {
+  title?: string;
+  toolbarContent?: React.ReactNode;
+  onClose?: () => void;
+}) {
+  return (
+    <>
+      <Small flex="1" fontWeight="500" color="text">
+        {title}
+      </Small>
+      {toolbarContent}
+      <IconButton
+        iconName="Cross3Icon"
+        onClick={onClose}
+        style={{
+          marginLeft: "6px",
+          marginRight: "-6px",
+        }}
+      />
+    </>
+  );
+}
+
+export const FloatingWindow: React.FC<FloatingWindowProps> = ({
+  title,
+  onClose,
+  children,
+  initialWidth = 300,
+  initialHeight = 200,
+  initialX = 100,
+  initialY = 100,
+  minWidth = 200,
+  minHeight = 100,
+  toolbarContent,
+  renderToolbar = defaultRenderToolbar,
+}) => {
+  const [position, setPosition] = useState({ x: initialX, y: initialY });
+  const [size, setSize] = useState({
+    width: initialWidth,
+    height: initialHeight,
+  });
+  const [isDragging, setIsDragging] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+  const [resizeDirection, setResizeDirection] = useState<string | null>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const toggleGlobalTextSelection = (disable: boolean) => {
+    if (disable) {
+      document.body.style.userSelect = "none";
+    } else {
+      document.body.style.userSelect = "";
+    }
+  };
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (!wrapperRef.current) return;
+
+    const rect = wrapperRef.current.getBoundingClientRect();
+    setDragOffset({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+    });
+    setIsDragging(true);
+  }, []);
+
+  const handleResizeStart = useCallback(
+    (direction: string) => (e: React.MouseEvent) => {
+      e.stopPropagation();
+      setIsResizing(true);
+      setResizeDirection(direction);
+      toggleGlobalTextSelection(true);
+    },
+    []
+  );
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (isDragging) {
+        setPosition({
+          x: e.clientX - dragOffset.x,
+          y: e.clientY - dragOffset.y,
+        });
+      } else if (isResizing && resizeDirection) {
+        const rect = wrapperRef.current!.getBoundingClientRect();
+
+        let newWidth = size.width;
+        let newHeight = size.height;
+        let newX = position.x;
+        let newY = position.y;
+
+        if (/right/i.test(resizeDirection)) {
+          newWidth = Math.max(e.clientX - rect.left, minWidth);
+        }
+        if (/bottom/i.test(resizeDirection)) {
+          newHeight = Math.max(e.clientY - rect.top, minHeight);
+        }
+        if (/left/i.test(resizeDirection)) {
+          const potentialWidth = rect.right - e.clientX;
+          if (potentialWidth <= minWidth) {
+            newWidth = minWidth;
+            newX = rect.right - minWidth;
+          } else {
+            newWidth = potentialWidth;
+            newX = e.clientX;
+          }
+        }
+        if (/top/i.test(resizeDirection)) {
+          const potentialHeight = rect.bottom - e.clientY;
+          if (potentialHeight <= minHeight) {
+            newHeight = minHeight;
+            newY = rect.bottom - minHeight;
+          } else {
+            newHeight = potentialHeight;
+            newY = e.clientY;
+          }
+        }
+
+        setSize({ width: newWidth, height: newHeight });
+        setPosition({ x: newX, y: newY });
+      }
+    },
+    [
+      isDragging,
+      isResizing,
+      dragOffset,
+      resizeDirection,
+      size,
+      position,
+      minWidth,
+      minHeight,
+    ]
+  );
+
+  const handleMouseUp = useCallback((e: MouseEvent) => {
+    setIsDragging(false);
+    setIsResizing(false);
+    setResizeDirection(null);
+    toggleGlobalTextSelection(false);
+  }, []);
+
+  React.useEffect(() => {
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [handleMouseMove, handleMouseUp]);
+
+  const theme = useDesignSystemTheme();
+
+  const floatingWindowManager = useFloatingWindowManager();
+  const currentFloatingWindow = useCurrentFloatingWindowInternal();
+
+  const handleClose = useCallback(() => {
+    if (onClose) onClose();
+    floatingWindowManager.closeWindow(currentFloatingWindow.id);
+  }, [currentFloatingWindow.id, floatingWindowManager, onClose]);
+
+  return (
+    <div
+      ref={wrapperRef}
+      style={{
+        ...styles.windowWrapper,
+        top: position.y,
+        left: position.x,
+        width: size.width,
+        height: size.height,
+        outline: `1px solid ${theme.colors.divider}`,
+        backgroundColor: theme.colors.canvas.background,
+      }}
+    >
+      <div
+        style={{
+          ...styles.toolbar,
+          backgroundColor: theme.colors.sidebar.background,
+        }}
+        onMouseDown={handleMouseDown}
+      >
+        {renderToolbar({ title, toolbarContent, onClose: handleClose })}
+      </div>
+      <Divider />
+      <div style={styles.content}>{children}</div>
+      {Object.entries(resizeHandlePositions).map(([direction, style]) => (
+        <div
+          key={direction}
+          style={{ ...styles.resizeHandle, ...style }}
+          onMouseDown={handleResizeStart(direction)}
+        />
+      ))}
+    </div>
+  );
+};

package/src/components/Text.tsx

@@ -13,6 +13,7 @@ const elements: Record<keyof Theme["textStyles"], keyof ReactHTML> = {
   heading5: "h5",
   body: "p",
   small: "span",
+  button: "span",
   code: "code",
   label: "span",
 };
@@ -68,7 +69,7 @@ const StyledElement = styled.span<
     styleProps: StyleProps;
   } & Pick<Props, "variant" | "breakpoints" | "color">
 >(({ theme, variant, styleProps, breakpoints, color }) => ({
-  ...theme.textStyles[variant],
+  ...(theme.textStyles as any)[variant],
   color: color ? theme.colors[color] : undefined,
   ...styleProps,
   ...mergeBreakpoints(breakpoints || []),

package/src/components/internal/Menu.tsx

@@ -83,7 +83,7 @@ export const styles = {
   separatorStyle: ({ theme }: { theme: Theme }): CSSObject => ({
     height: "1px",
     backgroundColor: theme.colors.divider,
-    margin: "4px 8px",
+    margin: "4px -4px",
   }),
 
   itemStyle: ({
@@ -93,14 +93,12 @@ export const styles = {
     theme: Theme;
     disabled?: boolean;
   }): CSSObject => ({
-    ...theme.textStyles.small,
-    fontWeight: 500,
-    fontSize: "0.8rem",
+    ...theme.textStyles.button,
     flex: "0 0 auto",
     userSelect: "none",
     cursor: "pointer",
     borderRadius: "3px",
-    padding: "4px 8px",
+    padding: "6px 8px",
     ...(disabled && {
       color: theme.colors.textDisabled,
     }),

package/src/contexts/DesignSystemConfiguration.tsx

@@ -1,15 +1,16 @@
-import { PlatformName } from '@noya-app/noya-keymap';
+import { PlatformName } from "@noya-app/noya-keymap";
 import React, {
   createContext,
   memo,
   ReactNode,
   useContext,
   useMemo,
-} from 'react';
-import { ThemeProvider, useTheme } from 'styled-components';
-import { ToastProvider } from '../components/Toast';
-import { Theme } from '../theme';
-import { DialogProvider } from './DialogContext';
+} from "react";
+import { ThemeProvider, useTheme } from "styled-components";
+import { ToastProvider } from "../components/Toast";
+import { Theme } from "../theme";
+import { DialogProvider } from "./DialogContext";
+import { FloatingWindowProvider } from "./FloatingWindowContext";
 
 export type DesignSystemConfigurationContextValue = {
   platform: PlatformName;
@@ -33,20 +34,22 @@ export const DesignSystemConfigurationProvider = memo(
     return (
       <DesignSystemConfigurationContext.Provider value={contextValue}>
         <ThemeProvider theme={theme}>
-          <DialogProvider>
-            <ToastProvider>{children}</ToastProvider>
-          </DialogProvider>
+          <FloatingWindowProvider>
+            <DialogProvider>
+              <ToastProvider>{children}</ToastProvider>
+            </DialogProvider>
+          </FloatingWindowProvider>
         </ThemeProvider>
       </DesignSystemConfigurationContext.Provider>
     );
-  },
+  }
 );
 
 export function useDesignSystemConfiguration(): DesignSystemConfigurationContextValue {
   const value = useContext(DesignSystemConfigurationContext);
 
   if (!value) {
-    throw new Error('Missing DesignSystemConfigurationProvider');
+    throw new Error("Missing DesignSystemConfigurationProvider");
   }
 
   return value;

package/src/contexts/FloatingWindowContext.tsx

@@ -0,0 +1,85 @@
+import { uuid } from "@noya-app/noya-utils";
+import React, { createContext, useContext, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+
+type FloatingWindowContextValue = {
+  createWindow: (element: React.ReactNode) => string;
+  closeWindow: (id: string) => void;
+};
+
+const FloatingWindowContext = createContext<
+  FloatingWindowContextValue | undefined
+>(undefined);
+
+type CurrentWindowContextValue = {
+  id: string;
+};
+
+const CurrentWindowContext = createContext<
+  CurrentWindowContextValue | undefined
+>(undefined);
+
+export const FloatingWindowProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [windows, setWindows] = useState<Record<string, React.ReactNode>>({});
+
+  const contextValue = useMemo(() => {
+    const createWindow = (element: React.ReactNode) => {
+      const id = uuid();
+
+      setWindows((windows) => ({
+        ...windows,
+        [id]: (
+          <CurrentWindowContext.Provider value={{ id }}>
+            {element}
+          </CurrentWindowContext.Provider>
+        ),
+      }));
+
+      return id;
+    };
+
+    const closeWindow = (id: string) => {
+      setWindows((windows) => {
+        const { [id]: _, ...rest } = windows;
+        return rest;
+      });
+    };
+
+    return { createWindow, closeWindow };
+  }, []);
+
+  return (
+    <FloatingWindowContext.Provider value={contextValue}>
+      {children}
+      {Object.entries(windows).map(([id, element]) =>
+        createPortal(element, document.body, id)
+      )}
+    </FloatingWindowContext.Provider>
+  );
+};
+
+export const useFloatingWindowManager = () => {
+  const context = useContext(FloatingWindowContext);
+
+  if (!context) {
+    throw new Error(
+      "useFloatingWindow must be used within a FloatingWindowProvider"
+    );
+  }
+
+  return context;
+};
+
+export const useCurrentFloatingWindowInternal = () => {
+  const context = useContext(CurrentWindowContext);
+
+  if (!context) {
+    throw new Error("useCurrentWindow must be used within a FloatingWindow");
+  }
+
+  return context;
+};

package/src/index.tsx

@@ -25,6 +25,7 @@ export * from "./components/DraggableMenuButton";
 export * from "./components/DropdownMenu";
 export * from "./components/FillInputField";
 export * from "./components/FillPreviewBackground";
+export * from "./components/FloatingWindow";
 export * from "./components/GradientPicker";
 export * from "./components/Grid";
 export * from "./components/GridView";
@@ -55,10 +56,11 @@ export type {
   MenuItem,
   RegularMenuItem,
 } from "./components/internal/Menu";
+// Contexts
 export * from "./contexts/DesignSystemConfiguration";
 export * from "./contexts/DialogContext";
+export * from "./contexts/FloatingWindowContext";
 export * from "./contexts/ImageDataContext";
-// Contexts
 export * from "./contexts/GlobalInputBlurContext";
 // Hooks
 export * from "./hooks/useHover";

package/src/theme/dark.ts

@@ -1,6 +1,8 @@
 import produce from "immer";
 import * as lightTheme from "./light";
 
+export const name: string = "dark";
+
 export const colors = produce(lightTheme.colors, (colors) => {
   colors.logo.fill = "rgb(248,248,250)";
   colors.logo.highlight = "rgb(248,248,250)";

package/src/theme/light.ts

@@ -1,6 +1,8 @@
 import { CSSObject } from "styled-components";
 import { mediaQuery } from "../mediaQuery";
 
+export const name: string = "light";
+
 export const colors = {
   logo: {
     fill: "rgb(175,175,175)",
@@ -161,6 +163,13 @@ export const textStyles = {
     fontWeight: 400,
     lineHeight: "1.4",
   } as CSSObject,
+  button: {
+    fontFamily: fonts.normal,
+    fontSize: "0.8rem",
+    fontWeight: 500,
+    lineHeight: "1.4",
+    letterSpacing: "-0.2px",
+  } as CSSObject,
   code: {
     fontFamily: fonts.monospace,
     fontSize: "90%",