refactor: deprecate tree component (#4130)

Tree component we use for pages and instances got overcomplicated with
time and should be reimplemented to move forward with css variables.

Author: TrySound

packages/design-system/src/components/tree/horizontal-shift.test.ts renamed to packages/design-system/src/components/__DEPRECATED__/tree/horizontal-shift.test.ts

@@ -1,6 +1,6 @@
 import { describe, test, expect } from "@jest/globals";
 import { renderHook, act } from "@testing-library/react-hooks";
-import type { Placement } from "../primitives/dnd";
+import type { Placement } from "../../primitives/dnd";
 import { useHorizontalShift } from "./horizontal-shift";
 import type { ItemDropTarget, ItemId, ItemSelector } from "./item-utils";
 import { type Item, findItemById, getItemPath } from "./test-tree-data";

packages/design-system/src/components/tree/horizontal-shift.ts renamed to packages/design-system/src/components/__DEPRECATED__/tree/horizontal-shift.ts

@@ -1,5 +1,5 @@
 import { useMemo, useState } from "react";
-import type { Placement } from "../primitives/dnd";
+import type { Placement } from "../../primitives/dnd";
 import type { ItemDropTarget, ItemId, ItemSelector } from "./item-utils";
 import { getPlacementIndicatorAlignment } from "./tree-node";
 

packages/design-system/src/components/tree/index.ts renamed to packages/design-system/src/components/__DEPRECATED__/tree/index.ts

@@ -1,4 +1,4 @@
-import type { ChildrenOrientation } from "../primitives/dnd/geometry-utils";
+import type { ChildrenOrientation } from "../../primitives/dnd/geometry-utils";
 
 export type ItemId = string;
 

packages/design-system/src/components/tree/item-utils.ts renamed to packages/design-system/src/components/__DEPRECATED__/tree/item-utils.ts

@@ -12,11 +12,11 @@ import {
   ChevronFilledDownIcon,
   ChevronFilledRightIcon,
 } from "@webstudio-is/icons";
-import { Box } from "../box";
-import { Flex } from "../flex";
-import { Text } from "../text";
-import { styled, type CSS } from "../../stitches.config";
-import { theme } from "../../stitches.config";
+import { Box } from "../../box";
+import { Flex } from "../../flex";
+import { Text } from "../../text";
+import { styled, type CSS } from "../../../stitches.config";
+import { theme } from "../../../stitches.config";
 import {
   type ItemId,
   type ItemSelector,

packages/design-system/src/components/tree/test-tree-data.ts renamed to packages/design-system/src/components/__DEPRECATED__/tree/test-tree-data.ts

@@ -2,7 +2,7 @@ import type { Meta } from "@storybook/react";
 import { useState } from "react";
 import { Tree } from "./tree";
 import { type Item, findItemById, reparent } from "./test-tree-data";
-import { Flex } from "../flex";
+import { Flex } from "../../flex";
 import { TreeItemLabel, TreeItemBody } from "./tree-node";
 import type { ItemDropTarget, ItemSelector } from "./item-utils";
 

packages/design-system/src/components/tree/tree-node.tsx renamed to packages/design-system/src/components/__DEPRECATED__/tree/tree-node.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import { useState, useMemo, useRef, useCallback, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { FocusScope, useFocusManager } from "@react-aria/focus";
-import { ListPositionIndicator } from "../list-position-indicator";
+import { ListPositionIndicator } from "../../list-position-indicator";
 import {
   TreeNode,
   INDENT,
@@ -17,8 +17,8 @@ import {
   useAutoScroll,
   useDragCursor,
   computeIndicatorPlacement,
-} from "../primitives/dnd";
-import { Box } from "../box";
+} from "../../primitives/dnd";
+import { Box } from "../../box";
 import { useHorizontalShift } from "./horizontal-shift";
 import {
   type ItemId,
@@ -28,8 +28,8 @@ import {
   getElementByItemSelector,
   getItemSelectorFromElement,
 } from "./item-utils";
-import { ScrollArea } from "../scroll-area";
-import { theme } from "../..";
+import { ScrollArea } from "../../scroll-area";
+import { theme } from "../../..";
 
 const KeyboardNavigation = ({
   editingItemId,

packages/design-system/src/components/tree/tree.stories.tsx renamed to packages/design-system/src/components/__DEPRECATED__/tree/tree.stories.tsx

@@ -64,7 +64,6 @@ export {
   useEnhancedTooltipProps,
 } from "./components/enhanced-tooltip";
 export * from "./components/avatar";
-export * from "./components/tree";
 export * from "./components/pro-badge";
 
 // No need to align
@@ -86,3 +85,4 @@ export * from "./components/kbd";
 
 // Deprecated
 export * from "./components/__DEPRECATED__/list";
+export * from "./components/__DEPRECATED__/tree";