@noya-app/noya-designsystem 0.1.62 → 0.1.64

package/src/index.tsx

@@ -5,6 +5,7 @@ export * from "./components/ai-assistant/AIAssistantLayout";
 export * from "./components/AnimatePresence";
 export * from "./components/Avatar";
 export * from "./components/Banner";
+export * from "./components/blocks/ImageBlockComponent";
 export * from "./components/Breadcrumbs";
 export * from "./components/Button";
 export * from "./components/Checkbox";
@@ -25,6 +26,7 @@ export * from "./components/DropdownMenu";
 export * from "./components/EditableText";
 export * from "./components/Fade";
 export * from "./components/file-explorer/FileExplorerLayout";
+export * from "./components/FileUploadIndicator";
 export * from "./components/FillInputField";
 export * from "./components/FillPreviewBackground";
 export * from "./components/FloatingWindow";
@@ -66,6 +68,7 @@ export * from "./components/sorting/Sortable";
 export * from "./components/sorting/sorting";
 export * from "./components/Spacer";
 export * from "./components/Switch";
+export * from "./components/Tabs";
 export * from "./components/Text";
 export * from "./components/TextArea";
 export * from "./components/Toast";
@@ -80,6 +83,7 @@ export * from "./contexts/DialogContext";
 export * from "./contexts/FloatingWindowContext";
 export * from "./contexts/GlobalInputBlurContext";
 export * from "./contexts/ImageDataContext";
+export * from "./contexts/LinkComponentContext";
 export * from "./contexts/OpenPortalsContext";
 export * from "./contexts/PortalScopeContext";
 // Hooks
@@ -87,16 +91,16 @@ export * from "./hooks/useHover";
 export * from "./hooks/useIndent";
 export * from "./hooks/useLabel";
 export * from "./hooks/usePlatform";
-export * from "./hooks/usePreservePanelSize";
 export * from "./hooks/useTheme";
-export * from "./mediaQuery";
 export * from "./theme";
 export * from "./utils/classNames";
 export * from "./utils/createSectionedMenu";
+export * from "./utils/formatByteSize";
 export * from "./utils/getGradientBackground";
 // Utils
 export * from "./utils/colorFromString";
 export * from "./utils/combobox";
+export * from "./utils/editableBlockStyles";
 export * from "./utils/fuzzyScorer";
 export * from "./utils/moveTreeItem";
 export * from "./utils/selection";
@@ -110,3 +114,4 @@ export * as InspectorPrimitives from "./components/InspectorPrimitives";
 
 export * from "./components/BaseToolbar";
 export * from "./components/Toolbar";
+export * from "./components/ToolbarDrawer";

package/src/utils/classNames.ts

@@ -41,8 +41,9 @@ const keyMap: Record<Category, Set<string>> = {
   position: positionKeysSet,
 };
 
-export function cx(...args: ClassNameItem[]): string {
-  return args.filter(Boolean).join(" ").trim();
+export function cx(...args: ClassNameItem[]): string | undefined {
+  const classes = args.filter(Boolean).join(" ").trim();
+  return classes.length > 0 ? classes : undefined;
 }
 
 const filterLastClassNameInCategory = ({
@@ -68,7 +69,7 @@ export function mergeConflictingClassNames(
   const classes = Array.isArray(classNames)
     ? cx(...classNames)
     : cx(classNames);
-  let classNamesList = classes.split(/\s+/);
+  let classNamesList = classes?.split(/\s+/) ?? [];
   options?.categories?.forEach((category) => {
     classNamesList = filterLastClassNameInCategory({
       classNames: classNamesList,

package/src/utils/combobox.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { chunkBy, partition } from "@noya-app/noya-utils";
 import { useSyncExternalStore } from "react";
 import {

package/src/utils/editableBlockStyles.ts

@@ -0,0 +1,10 @@
+import { cx } from "./classNames";
+
+export const editableBlockStyles = (
+  viewType: "editable" | "readOnly" | "preview" = "editable"
+) =>
+  cx(
+    "relative outline-primary focus:outline focus:outline-1",
+    viewType !== "preview" &&
+      "hover:outline-2 [&:not(:has([data-editor-selectable-block]:hover))]:hover:outline"
+  );

package/src/utils/formatByteSize.ts

@@ -0,0 +1,8 @@
+const byteSizeUnits = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+export function formatByteSize(size: number) {
+  const unitIndex = Math.floor(Math.log(size) / Math.log(1024));
+  const unit = byteSizeUnits[unitIndex];
+  const value = size / Math.pow(1024, unitIndex);
+  return `${value.toFixed(1)} ${unit}`;
+}

package/src/utils/withSeparatorElements.ts

@@ -16,7 +16,7 @@ function flattenChildren(
 ): ReactNode[] {
   return Children.toArray(children).flatMap((child) => {
     if (traverseFragments && isValidElement(child) && child.type === Fragment) {
-      return flattenChildren(child.props.children, traverseFragments);
+      return flattenChildren((child as any).props.children, traverseFragments);
     }
     return child;
   });

package/src/hooks/usePreservePanelSize.tsx

@@ -1,183 +0,0 @@
-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";
-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 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) {
-      // Check if this is a right sidebar layout by looking at the panel IDs
-      const panelGroup = document.querySelector(
-        `[data-panel-group-id="${EDITOR_PANEL_GROUP_ID}"]`
-      );
-      const panels = [
-        ...(panelGroup?.querySelectorAll<HTMLElement>("[data-panel]") ?? []),
-      ];
-      const isRightSidebarLayout = panels[1]?.id === RIGHT_SIDEBAR_ID;
-
-      if (isRightSidebarLayout) {
-        const rightSidebarWidth =
-          (oldPanelPercentages[1] / 100) * oldWindowWidth;
-        const newRightSidebarPercentage =
-          (rightSidebarWidth / windowSize.width) * 100;
-        const newLayout = [
-          100 - newRightSidebarPercentage,
-          newRightSidebarPercentage,
-        ];
-
-        try {
-          panelGroupRef.current?.setLayout(newLayout);
-        } catch (e) {
-          console.error(e);
-          console.info("snapshot on error", {
-            oldWindowWidth,
-            oldPanelPercentages,
-            newLayout,
-            currentLayout,
-          });
-        }
-      } else {
-        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

@@ -1,26 +0,0 @@
-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/mediaQuery.ts

@@ -1,13 +0,0 @@
-export const size = {
-  medium: '800px',
-  large: '1280px',
-  xlarge: '1550px',
-  xxlarge: '1680px',
-};
-
-export const mediaQuery = {
-  small: `@media (max-width: ${size.medium})`,
-  medium: `@media (max-width: ${size.large}) and (min-width: ${size.medium})`,
-  large: `@media (max-width: ${size.xlarge}) and (min-width: ${size.large})`,
-  xlarge: `@media (min-width: ${size.xlarge})`,
-};