@noya-app/noya-designsystem 0.1.63 → 0.1.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.63",
+  "version": "0.1.65",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -22,33 +22,21 @@
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
-    "@noya-app/noya-colorpicker": "0.1.26",
-    "@noya-app/noya-utils": "0.1.5",
-    "@noya-app/noya-geometry": "0.1.12",
-    "@noya-app/noya-icons": "0.1.11",
-    "@noya-app/noya-keymap": "0.1.3",
-    "@noya-app/noya-tailwind-config": "0.1.5",
-    "@radix-ui/primitive": "^1.0.0",
-    "@radix-ui/react-avatar": "^1.0.1",
+    "@noya-app/noya-colorpicker": "0.1.28",
+    "@noya-app/noya-utils": "0.1.7",
+    "@noya-app/noya-geometry": "0.1.14",
+    "@noya-app/noya-icons": "0.1.13",
+    "@noya-app/noya-keymap": "0.1.4",
+    "@noya-app/noya-tailwind-config": "0.1.7",
+    "radix-ui": "1.4.2",
     "@radix-ui/react-compose-refs": "^1.0.0",
-    "@radix-ui/react-context-menu": "^2.0.1",
-    "@radix-ui/react-dialog": "^1.0.2",
-    "@radix-ui/react-dropdown-menu": "^2.0.1",
-    "@radix-ui/react-popover": "^1.0.2",
-    "@radix-ui/react-progress": "^1.0.1",
-    "@radix-ui/react-scroll-area": "^1.0.2",
-    "@radix-ui/react-slider": "^1.2.2",
-    "@radix-ui/react-switch": "^1.0.1",
-    "@radix-ui/react-toast": "^1.1.4",
-    "@radix-ui/react-toggle-group": "^1.0.1",
-    "@radix-ui/react-tooltip": "^1.0.2",
+    "@radix-ui/primitive": "^1.0.1",
     "@radix-ui/react-utils": "^0.0.5",
-    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-popper": "1.2.3",
     "@radix-ui/utils": "0.0.3",
     "immer": "9.0.5",
     "kiwi.js": "^1.1.3",
-    "react-resizable-panels": "2.0.22",
+    "react-resizable-panels": "3.0.3",
     "react-window": "^1.8.8",
     "vscode-fuzzy-scorer": "^0.0.4",
     "react-virtualized": "9.22.6"

package/src/__tests__/validateDropIndicator.test.ts

@@ -118,15 +118,12 @@ describe("validateDropIndicator", () => {
     return parameters.position !== "below";
   };
 
-  const keys = ["item1", "item2", "item3"];
-
   describe("with above and inside positions allowed, but not below", () => {
     it("should return 'inside' when cursor is in the middle third", () => {
       const result = validateDropIndicator({
         acceptsDrop: mockAcceptsAboveAndInside,
-        keys,
-        activeId: "item1",
-        overId: "item2",
+        activeIndex: 0,
+        overIndex: 1,
         offsetStart: 50, // offsetStart in middle third
         elementStart: 0, // elementStart
         elementSize: 100, // elementSize
@@ -139,9 +136,8 @@ describe("validateDropIndicator", () => {
     it("should return 'above' when cursor is in the top third", () => {
       const result = validateDropIndicator({
         acceptsDrop: mockAcceptsAboveAndInside,
-        keys,
-        activeId: "item1",
-        overId: "item2",
+        activeIndex: 0,
+        overIndex: 1,
         offsetStart: 20, // offsetStart in top third
         elementStart: 0, // elementStart
         elementSize: 100, // elementSize
@@ -154,9 +150,8 @@ describe("validateDropIndicator", () => {
     it("should fallback to 'inside' when cursor is in bottom third since 'below' is not allowed", () => {
       const result = validateDropIndicator({
         acceptsDrop: mockAcceptsAboveAndInside,
-        keys,
-        activeId: "item1",
-        overId: "item2",
+        activeIndex: 0,
+        overIndex: 1,
         offsetStart: 80, // offsetStart in bottom third
         elementStart: 0, // elementStart
         elementSize: 100, // elementSize
@@ -171,9 +166,8 @@ describe("validateDropIndicator", () => {
     it("should prefer 'inside' when cursor is in the middle third", () => {
       const result = validateDropIndicator({
         acceptsDrop: mockAcceptsAll,
-        keys,
-        activeId: "item1",
-        overId: "item2",
+        activeIndex: 0,
+        overIndex: 1,
         offsetStart: 50, // offsetStart in middle third
         elementStart: 0, // elementStart
         elementSize: 100, // elementSize
@@ -186,9 +180,8 @@ describe("validateDropIndicator", () => {
     it("should prefer 'above' when cursor is in the top third", () => {
       const result = validateDropIndicator({
         acceptsDrop: mockAcceptsAll,
-        keys,
-        activeId: "item1",
-        overId: "item2",
+        activeIndex: 0,
+        overIndex: 1,
         offsetStart: 20, // offsetStart in top third
         elementStart: 0, // elementStart
         elementSize: 100, // elementSize
@@ -201,9 +194,8 @@ describe("validateDropIndicator", () => {
     it("should prefer 'below' when cursor is in the bottom third", () => {
       const result = validateDropIndicator({
         acceptsDrop: mockAcceptsAll,
-        keys,
-        activeId: "item1",
-        overId: "item2",
+        activeIndex: 0,
+        overIndex: 1,
         offsetStart: 80, // offsetStart in bottom third
         elementStart: 0, // elementStart
         elementSize: 100, // elementSize
@@ -216,9 +208,8 @@ describe("validateDropIndicator", () => {
     it("should handle non-zero elementStart position", () => {
       const result = validateDropIndicator({
         acceptsDrop: mockAcceptsAll,
-        keys,
-        activeId: "item1",
-        overId: "item2",
+        activeIndex: 0,
+        overIndex: 1,
         offsetStart: 120, // offsetStart in middle third relative to elementStart
         elementStart: 100, // elementStart
         elementSize: 60, // elementSize
@@ -232,9 +223,8 @@ describe("validateDropIndicator", () => {
   it("should return 'inside' when cursor is in the middle third and inside drops are allowed", () => {
     const result = validateDropIndicator({
       acceptsDrop: mockAcceptsDrop,
-      keys,
-      activeId: "item1",
-      overId: "item2",
+      activeIndex: 0,
+      overIndex: 1,
       offsetStart: 50, // offsetStart in middle third
       elementStart: 0, // elementStart
       elementSize: 100, // elementSize
@@ -247,9 +237,8 @@ describe("validateDropIndicator", () => {
   it("should return 'above' when cursor is in top half and above drops are allowed", () => {
     const result = validateDropIndicator({
       acceptsDrop: mockAcceptsDropAboveBelow,
-      keys,
-      activeId: "item1",
-      overId: "item2",
+      activeIndex: 0,
+      overIndex: 1,
       offsetStart: 20, // offsetStart in top half
       elementStart: 0, // elementStart
       elementSize: 100, // elementSize
@@ -262,9 +251,8 @@ describe("validateDropIndicator", () => {
   it("should return 'below' when cursor is in bottom half and below drops are allowed", () => {
     const result = validateDropIndicator({
       acceptsDrop: mockAcceptsDropAboveBelow,
-      keys,
-      activeId: "item1",
-      overId: "item2",
+      activeIndex: 0,
+      overIndex: 1,
       offsetStart: 70, // offsetStart in bottom half
       elementStart: 0, // elementStart
       elementSize: 100, // elementSize
@@ -277,9 +265,8 @@ describe("validateDropIndicator", () => {
   it("should fallback to inside when above/below not allowed and inside is allowed", () => {
     const result = validateDropIndicator({
       acceptsDrop: mockAcceptsDrop,
-      keys,
-      activeId: "item1",
-      overId: "item2",
+      activeIndex: 0,
+      overIndex: 1,
       offsetStart: 20, // offsetStart in top half
       elementStart: 0, // elementStart
       elementSize: 100, // elementSize
@@ -293,9 +280,8 @@ describe("validateDropIndicator", () => {
     const neverAllowDrop = () => false;
     const result = validateDropIndicator({
       acceptsDrop: neverAllowDrop,
-      keys,
-      activeId: "item1",
-      overId: "item2",
+      activeIndex: 0,
+      overIndex: 1,
       offsetStart: 50,
       elementStart: 0,
       elementSize: 100,
@@ -308,9 +294,8 @@ describe("validateDropIndicator", () => {
   it("should ignore items not in the keys array", () => {
     const result = validateDropIndicator({
       acceptsDrop: mockAcceptsDrop,
-      keys,
-      activeId: "nonexistent",
-      overId: "item2",
+      activeIndex: -1,
+      overIndex: 1,
       offsetStart: 50,
       elementStart: 0,
       elementSize: 100,

package/src/__tests__/workspaceLayout.test.ts

@@ -0,0 +1,281 @@
+import { expect, it } from "bun:test";
+import { MockClientStorage } from "../../../noya-react-utils/src/__tests__/MockClientStorage";
+import {
+  CONTENT_AREA_ID,
+  LEFT_SIDEBAR_ID,
+  RIGHT_SIDEBAR_ID,
+} from "../components/workspace/constants";
+import {
+  getInitialLayout,
+  getLayoutCollapsedState,
+  getLayoutIds,
+  getPropertyKey,
+  getStorageKey,
+  mapWorkspaceLayoutState,
+  setInitialLayout,
+  toPercentageSize,
+  toPixelSize,
+} from "../components/workspace/panelStorage";
+import { WorkspaceLayoutState } from "../components/workspace/types";
+
+const TEST_WINDOW_WIDTH = 1000;
+
+it("gets layout ids", () => {
+  expect(
+    getLayoutIds({
+      hasLeftPanel: true,
+      hasRightPanel: false,
+      hasCenterPanel: true,
+    })
+  ).toEqual([LEFT_SIDEBAR_ID, CONTENT_AREA_ID]);
+});
+
+it("gets layout ids with all panels", () => {
+  expect(
+    getLayoutIds({
+      hasLeftPanel: true,
+      hasRightPanel: true,
+      hasCenterPanel: true,
+    })
+  ).toEqual([LEFT_SIDEBAR_ID, CONTENT_AREA_ID, RIGHT_SIDEBAR_ID]);
+});
+
+it("gets layout ids with no panels", () => {
+  expect(
+    getLayoutIds({
+      hasLeftPanel: false,
+      hasRightPanel: false,
+      hasCenterPanel: false,
+    })
+  ).toEqual([]);
+});
+
+it("converts to pixel size", () => {
+  expect(toPixelSize(25, TEST_WINDOW_WIDTH)).toBe(250); // 25% of 1000px = 250px
+  expect(toPixelSize(50, TEST_WINDOW_WIDTH)).toBe(500); // 50% of 1000px = 500px
+  expect(toPixelSize(75, TEST_WINDOW_WIDTH)).toBe(750); // 75% of 1000px = 750px
+});
+
+it("converts to percentage size", () => {
+  expect(toPercentageSize(250, TEST_WINDOW_WIDTH)).toBe(25); // 250px of 1000px = 25%
+  expect(toPercentageSize(500, TEST_WINDOW_WIDTH)).toBe(50); // 500px of 1000px = 50%
+  expect(toPercentageSize(750, TEST_WINDOW_WIDTH)).toBe(75); // 750px of 1000px = 75%
+});
+
+it("maps workspace layout state", () => {
+  const layout: WorkspaceLayoutState = {
+    "left,center": {
+      layout: [20, 80],
+      expandToSizes: { left: 30, center: 70 },
+    },
+    "left,center,right": {
+      layout: [20, 60, 20],
+      expandToSizes: { left: 25, center: 50, right: 25 },
+    },
+  };
+
+  const mapped = mapWorkspaceLayoutState(layout, (size) => size * 2);
+
+  expect(mapped).toEqual({
+    "left,center": {
+      layout: [40, 160],
+      expandToSizes: { left: 60, center: 140 },
+    },
+    "left,center,right": {
+      layout: [40, 120, 40],
+      expandToSizes: { left: 50, center: 100, right: 50 },
+    },
+  });
+});
+
+it("gets property key", () => {
+  expect(getPropertyKey([LEFT_SIDEBAR_ID, CONTENT_AREA_ID])).toBe(
+    [CONTENT_AREA_ID, LEFT_SIDEBAR_ID].sort().join(",")
+  );
+});
+
+it("gets storage key", () => {
+  expect(getStorageKey("test-workspace")).toBe(
+    "react-resizable-panels:test-workspace"
+  );
+});
+
+it("gets initial layout with left panel only", () => {
+  const result = getInitialLayout({
+    layoutIds: [LEFT_SIDEBAR_ID, CONTENT_AREA_ID],
+    leftSidebarOptions: {
+      initialSize: 20,
+      defaultCollapsed: false,
+    },
+    rightSidebarOptions: {
+      initialSize: 20,
+      defaultCollapsed: false,
+    },
+    centerPanelPercentage: 80,
+    hasLeftPanel: true,
+    hasRightPanel: false,
+    hasCenterPanel: true,
+    windowWidth: TEST_WINDOW_WIDTH,
+  });
+
+  expect(result).toEqual([200, 800]); // 20% and 80% of 1000px
+});
+
+it("gets initial layout with collapsed left panel", () => {
+  const result = getInitialLayout({
+    layoutIds: [LEFT_SIDEBAR_ID, CONTENT_AREA_ID],
+    leftSidebarOptions: {
+      initialSize: 20,
+      defaultCollapsed: true,
+    },
+    rightSidebarOptions: {
+      initialSize: 20,
+      defaultCollapsed: false,
+    },
+    centerPanelPercentage: 80,
+    hasLeftPanel: true,
+    hasRightPanel: false,
+    hasCenterPanel: true,
+    windowWidth: TEST_WINDOW_WIDTH,
+  });
+
+  expect(result).toEqual([0, 1000]); // Collapsed left panel, center takes full width
+});
+
+it("gets initial layout with all panels", () => {
+  const result = getInitialLayout({
+    layoutIds: [LEFT_SIDEBAR_ID, CONTENT_AREA_ID, RIGHT_SIDEBAR_ID],
+    leftSidebarOptions: {
+      initialSize: 20,
+      defaultCollapsed: false,
+    },
+    rightSidebarOptions: {
+      initialSize: 20,
+      defaultCollapsed: false,
+    },
+    centerPanelPercentage: 60,
+    hasLeftPanel: true,
+    hasRightPanel: true,
+    hasCenterPanel: true,
+    windowWidth: TEST_WINDOW_WIDTH,
+  });
+
+  expect(result).toEqual([200, 600, 200]); // 20%, 60%, 20% of 1000px
+});
+
+it("sets initial layout in storage", () => {
+  const mockStorage = new MockClientStorage();
+
+  setInitialLayout({
+    storageKey: "test-key",
+    propertyKey: "left,center",
+    calculateLayout: () => [200, 800],
+    storage: mockStorage,
+  });
+
+  expect(mockStorage.hasItem("test-key")).toBe(true);
+  expect(mockStorage.getItemParsed<WorkspaceLayoutState>("test-key")).toEqual({
+    "left,center": {
+      layout: [200, 800],
+      expandToSizes: {},
+    },
+  });
+});
+
+it("does not update existing layout property in storage", () => {
+  const existingLayout: WorkspaceLayoutState = {
+    center: {
+      layout: [1000],
+      expandToSizes: {},
+    },
+    // Already has the property we're trying to set
+    "left,center": {
+      layout: [100, 900],
+      expandToSizes: {},
+    },
+  };
+
+  const mockStorage = new MockClientStorage();
+  mockStorage.setItem("test-key", JSON.stringify(existingLayout));
+
+  setInitialLayout({
+    storageKey: "test-key",
+    propertyKey: "left,center",
+    calculateLayout: () => [200, 800],
+    storage: mockStorage,
+  });
+
+  // setInitialLayout doesn't update existing properties, so the layout should remain unchanged
+  expect(mockStorage.getItemParsed<WorkspaceLayoutState>("test-key")).toEqual(
+    existingLayout
+  );
+});
+
+it("adds new layout property to existing storage", () => {
+  const existingLayout: WorkspaceLayoutState = {
+    center: {
+      layout: [1000],
+      expandToSizes: {},
+    },
+  };
+
+  const mockStorage = new MockClientStorage();
+  mockStorage.setItem("test-key", JSON.stringify(existingLayout));
+
+  // The propertyId should be sorted
+  const sortedPropertyId = [LEFT_SIDEBAR_ID, CONTENT_AREA_ID].sort().join(",");
+
+  setInitialLayout({
+    storageKey: "test-key",
+    propertyKey: sortedPropertyId,
+    calculateLayout: () => [200, 800],
+    storage: mockStorage,
+  });
+
+  expect(mockStorage.getItemParsed<WorkspaceLayoutState>("test-key")).toEqual({
+    center: {
+      layout: [1000],
+      expandToSizes: {},
+    },
+    [sortedPropertyId]: {
+      layout: [200, 800],
+      expandToSizes: {},
+    },
+  });
+});
+
+it("gets layout collapsed state", () => {
+  const layoutGroup = {
+    layout: [0, 800, 200],
+    expandToSizes: {},
+  };
+
+  const result = getLayoutCollapsedState({
+    layoutGroup,
+    propertyKey: "left,center,right",
+    layoutIds: [LEFT_SIDEBAR_ID, CONTENT_AREA_ID, RIGHT_SIDEBAR_ID],
+    hasLeftPanel: true,
+    hasRightPanel: true,
+  });
+
+  expect(result.leftSidebarCollapsed).toBe(true); // size is 0
+  expect(result.rightSidebarCollapsed).toBe(false); // size is 200
+});
+
+it("handles panels that don't exist", () => {
+  const layoutGroup = {
+    layout: [1000],
+    expandToSizes: {},
+  };
+
+  const result = getLayoutCollapsedState({
+    layoutGroup,
+    propertyKey: "center",
+    layoutIds: [CONTENT_AREA_ID],
+    hasLeftPanel: false,
+    hasRightPanel: false,
+  });
+
+  expect(result.leftSidebarCollapsed).toBe(false); // Panel doesn't exist
+  expect(result.rightSidebarCollapsed).toBe(false); // Panel doesn't exist
+});

package/src/components/ActionMenu.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { memoGeneric } from "@noya-app/react-utils";
 import React, { useMemo } from "react";
 import { cssVars } from "../theme";

package/src/components/ActivityIndicator.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import { cx } from "../utils/classNames";
 
@@ -7,6 +9,7 @@ interface Props {
   color?: string;
   trackColor?: string;
   className?: string;
+  style?: React.CSSProperties;
 }
 
 export const ActivityIndicator = React.memo(function ActivityIndicator({
@@ -15,8 +18,12 @@ export const ActivityIndicator = React.memo(function ActivityIndicator({
   color = "black",
   trackColor = "rgba(0, 0, 0, 0.1)",
   className,
+  style,
 }: Props) {
-  const opacityStyle = React.useMemo(() => ({ opacity }), [opacity]);
+  const containerStyle = React.useMemo(
+    () => ({ opacity, ...style }),
+    [opacity, style]
+  );
   const dynamicStyles = React.useMemo(
     () => ({
       border: `2px solid ${trackColor}`,
@@ -27,11 +34,11 @@ export const ActivityIndicator = React.memo(function ActivityIndicator({
     [size, color, trackColor]
   );
   return (
-    <div
-      className={cx("flex justify-center items-center", className)}
-      style={opacityStyle}
+    <span
+      className={cx("n-flex n-justify-center n-items-center", className)}
+      style={containerStyle}
     >
-      <div style={dynamicStyles} className="animate-spin rounded-[50%]" />
-    </div>
+      <span style={dynamicStyles} className="n-animate-spin n-rounded-[50%]" />
+    </span>
   );
 });