refactor: remove deprecated tree (#4180)

We refactored both pages and navigator with new tree.

Author: TrySound

apps/builder/app/builder/features/sidebar-left/panels/navigator/navigator-tree.tsx

@@ -16,7 +16,6 @@ import {
   TreeNodeLabel,
   TreeRoot,
   TreeSortableItem,
-  type ItemDropTarget,
   type TreeDropTarget,
 } from "@webstudio-is/design-system";
 import {
@@ -39,6 +38,7 @@ import {
   $selectedInstanceSelector,
   $selectedPage,
   getIndexedInstanceId,
+  type ItemDropTarget,
 } from "~/shared/nano-states";
 import type { InstanceSelector } from "~/shared/tree-utils";
 import { serverSyncStore } from "~/shared/sync";

apps/builder/app/canvas/shared/use-drag-drop.ts

@@ -2,7 +2,6 @@ import { useLayoutEffect, useRef } from "react";
 import type { Instance } from "@webstudio-is/sdk";
 import {
   type Point,
-  type ItemDropTarget,
   useAutoScroll,
   useDrag,
   useDrop,
@@ -12,6 +11,7 @@ import {
   $dragAndDropState,
   $instances,
   $registeredComponentMetas,
+  type ItemDropTarget,
 } from "~/shared/nano-states";
 import { publish, useSubscribe } from "~/shared/pubsub";
 import {

apps/builder/app/shared/nano-states/misc.ts

@@ -1,7 +1,7 @@
 import { atom, computed, onSet } from "nanostores";
 import { nanoid } from "nanoid";
 import type { AuthPermit } from "@webstudio-is/trpc-interface/index.server";
-import type { ItemDropTarget, Placement } from "@webstudio-is/design-system";
+import type { Placement } from "@webstudio-is/design-system";
 import type {
   Assets,
   DataSources,
@@ -27,6 +27,7 @@ import { $selectedInstanceSelector } from "./instances";
 import type { UnitSizes } from "~/builder/features/style-panel/shared/css-value-input/convert-units";
 import type { Simplify } from "type-fest";
 import type { AssetType } from "@webstudio-is/asset-uploader";
+import type { ChildrenOrientation } from "node_modules/@webstudio-is/design-system/src/components/primitives/dnd/geometry-utils";
 
 export const $project = atom<Project | undefined>();
 
@@ -314,6 +315,16 @@ export const $authToken = atom<string | undefined>(undefined);
 
 export const $toastErrors = atom<string[]>([]);
 
+export type ItemDropTarget = {
+  itemSelector: InstanceSelector;
+  indexWithinChildren: number;
+  placement: {
+    closestChildIndex: number;
+    indexAdjustment: number;
+    childrenOrientation: ChildrenOrientation;
+  };
+};
+
 export type DragAndDropState = {
   isDragging: boolean;
   dropTarget?: ItemDropTarget;

packages/design-system/package.json

@@ -12,7 +12,6 @@
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@testing-library/react-hooks": "^8.0.1",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "@webstudio-is/image": "workspace:*",
@@ -65,7 +64,6 @@
     "@webstudio-is/icons": "workspace:*",
     "change-case": "^5.4.4",
     "downshift": "^6.1.7",
-    "immer": "^10.0.3",
     "match-sorter": "^6.3.4",
     "react-field-sizing-content": "^1.0.0",
     "react-hot-toast": "^2.4.1",