refactor: make new tree sortable (#4145)

Added dnd support for the new tree with pragmatic-drag-and-drop. Can be
tested in stories.
New drop indicator reuse pragmatic utility and much simpler to maintain
than previously used horizontal shift.



https://github.com/user-attachments/assets/f3cdd80f-0c2d-4f4a-a140-aee66ad8b29f

Author: TrySound

apps/builder/package.json

@@ -17,7 +17,7 @@
     "ci:migrate": "migrations migrate"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.1.11",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@codemirror/autocomplete": "^6.18.0",
     "@codemirror/commands": "^6.6.0",
     "@codemirror/lang-html": "^6.4.9",

packages/design-system/package.json

@@ -28,6 +28,9 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@floating-ui/dom": "^1.6.5",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-accessible-icon": "^1.1.0",

packages/design-system/src/components/__DEPRECATED__/tree/tree.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 { TreePositionIndicator } from "../../list-position-indicator";
 import {
   TreeNode,
   INDENT,
@@ -373,11 +373,10 @@ export const Tree = <Data extends { id: string }>({
       <Box css={{ height: theme.spacing[7] }}></Box>
       {shiftedDropTarget?.placement &&
         createPortal(
-          <ListPositionIndicator
+          <TreePositionIndicator
             x={shiftedDropTarget.placement.x}
             y={shiftedDropTarget.placement.y}
             length={shiftedDropTarget.placement.length}
-            withNub
           />,
           document.body
         )}

packages/design-system/src/components/list-position-indicator.stories.tsx

@@ -1,4 +1,7 @@
-import { ListPositionIndicator } from "./list-position-indicator";
+import {
+  ListPositionIndicator,
+  TreePositionIndicator,
+} from "./list-position-indicator";
 import { StorySection, StoryGrid } from "./storybook";
 
 export default {
@@ -31,7 +34,7 @@ export const Demo = () => (
             height: 30,
           }}
         >
-          <ListPositionIndicator x={0} y={0} length={200} withNub />
+          <TreePositionIndicator x={0} y={0} length={200} />
         </div>
       </StoryGrid>
     </StorySection>
@@ -56,7 +59,7 @@ export const Demo = () => (
             height: 30,
           }}
         >
-          <ListPositionIndicator x={0} y={0} length={200} withNub />
+          <TreePositionIndicator x={0} y={0} length={200} />
         </div>
       </StoryGrid>
     </StorySection>

packages/design-system/src/components/list-position-indicator.tsx

@@ -12,12 +12,18 @@ const OUTLINE_WIDTH = 1;
 
 // overlap the line with the circle by this much
 // to make sure they are connected
-const OVERLAP = 1;
+const OVERLAP = 2;
+
+const Container = styled(Box, {
+  position: "absolute",
+});
 
 const CircleOutline = styled(Box, {
   width: CIRCLE_SIZE + OUTLINE_WIDTH * 2,
   height: CIRCLE_SIZE + OUTLINE_WIDTH * 2,
   position: "absolute",
+  top: -CIRCLE_SIZE / 2 - OUTLINE_WIDTH,
+  left: -CIRCLE_SIZE / 2 - OUTLINE_WIDTH,
   borderRadius: "50%",
   pointerEvents: "none",
   bc: theme.colors.borderContrast,
@@ -27,62 +33,61 @@ const Circle = styled(Box, {
   width: CIRCLE_SIZE,
   height: CIRCLE_SIZE,
   position: "absolute",
-  border: `solid ${theme.colors.backgroundPrimary}`,
-  borderWidth: 2,
+  top: -CIRCLE_SIZE / 2,
+  left: -CIRCLE_SIZE / 2,
+  border: `2px solid ${theme.colors.backgroundPrimary}`,
   borderRadius: "50%",
   pointerEvents: "none",
 });
 
 const Line = styled(Box, {
   boxSizing: "content-box",
   position: "absolute",
-  background: theme.colors.backgroundPrimary,
+  top: -LINE_THICKNESS / 2,
+  left: 0,
+  width: "100%",
+  height: LINE_THICKNESS,
+  backgroundColor: theme.colors.backgroundPrimary,
   pointerEvents: "none",
   outline: `solid ${theme.colors.borderContrast}`,
   outlineWidth: OUTLINE_WIDTH,
 });
 
+const LineWithNub = styled(Line, {
+  left: CIRCLE_SIZE / 2 - OVERLAP,
+  width: `calc(100% - ${CIRCLE_SIZE / 2 - OVERLAP}px)`,
+});
+
 export const ListPositionIndicator = ({
   x,
   y,
   length,
-  withNub = false,
 }: {
-  x: number;
-  y: number;
-  length: number;
-  withNub?: boolean;
-}) =>
-  withNub ? (
-    <>
-      <CircleOutline
-        style={{
-          top: y - CIRCLE_SIZE / 2 - OUTLINE_WIDTH,
-          left: x - CIRCLE_SIZE / 2 - OUTLINE_WIDTH,
-        }}
-      />
-      <Line
-        style={{
-          top: y - LINE_THICKNESS / 2,
-          left: x + (CIRCLE_SIZE / 2 - OVERLAP),
-          width: length - (CIRCLE_SIZE / 2 - OVERLAP),
-          height: LINE_THICKNESS,
-        }}
-      />
-      <Circle
-        style={{
-          top: y - CIRCLE_SIZE / 2,
-          left: x - CIRCLE_SIZE / 2,
-        }}
-      />
-    </>
-  ) : (
-    <Line
-      style={{
-        top: y - LINE_THICKNESS / 2,
-        left: x,
-        width: length,
-        height: LINE_THICKNESS,
-      }}
-    />
+  x: number | string;
+  y: number | string;
+  length: number | string;
+}) => {
+  return (
+    <Container style={{ top: y, left: x, width: length }}>
+      <Line />
+    </Container>
+  );
+};
+
+export const TreePositionIndicator = ({
+  x,
+  y,
+  length,
+}: {
+  x: number | string;
+  y: number | string;
+  length: number | string;
+}) => {
+  return (
+    <Container style={{ top: y, left: x, width: length }}>
+      <CircleOutline />
+      <LineWithNub />
+      <Circle />
+    </Container>
   );
+};