chore: Replace DragAndDrop with StudioDragAndDrop

frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeItem/DragAndDropTreeItem.tsx

@@ -1,5 +1,4 @@
-import { DragAndDrop } from 'app-shared/components/dragAndDrop';
-import { StudioTreeView } from '@studio/components';
+import { StudioTreeView, StudioDragAndDrop } from '@studio/components';
 import type { ReactNode } from 'react';
 import React, { useContext } from 'react';
 import { DragAndDropTreeRootContext } from '../DragAndDropTreeRoot';
@@ -39,7 +38,7 @@ export const DragAndDropTreeItem = ({
   const labelButtonWrapperClass = cn(classes.labelButtonWrapper, hasHoveredItemClass);
 
   return (
-    <DragAndDrop.ListItem
+    <StudioDragAndDrop.ListItem
       as='li'
       itemId={nodeId}
       onDragOver={handleDragOver}
@@ -68,5 +67,5 @@ export const DragAndDropTreeItem = ({
 
 const renderChildren = (children: ReactNode, emptyMessage?: string) => {
   const content = children || <EmptyList>{emptyMessage}</EmptyList>;
-  return <DragAndDrop.List>{content}</DragAndDrop.List>;
+  return <StudioDragAndDrop.List>{content}</StudioDragAndDrop.List>;
 };

frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeProvider/DragAndDropTreeProvider.tsx

@@ -1,13 +1,12 @@
-import type { DragAndDropProviderProps } from 'app-shared/components/dragAndDrop';
-import { DragAndDrop } from 'app-shared/components/dragAndDrop';
 import React from 'react';
+import { StudioDragAndDrop, type StudioDragAndDropProviderProps } from '@studio/components';
 
-export type DragAndDropTreeProviderProps<T> = Omit<DragAndDropProviderProps<T>, 'gap'>;
+export type DragAndDropTreeProviderProps<T> = Omit<StudioDragAndDropProviderProps<T>, 'gap'>;
 
 export function DragAndDropTreeProvider<T>(props: DragAndDropTreeProviderProps<T>) {
   return (
-    <DragAndDrop.Provider {...props} gap='.25rem'>
+    <StudioDragAndDrop.Provider {...props} gap='.25rem'>
       {props.children}
-    </DragAndDrop.Provider>
+    </StudioDragAndDrop.Provider>
   );
 }

frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeRoot/DragAndDropTreeRoot.test.tsx

@@ -3,19 +3,19 @@ import React, { useContext } from 'react';
 import { render as renderRtl, renderHook, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { DragAndDropTreeRoot } from './DragAndDropTreeRoot';
-import { DragAndDrop } from 'app-shared/components/dragAndDrop';
+import { StudioDragAndDrop } from '@studio/components';
 import { DragAndDropTreeRootContext } from 'app-shared/components/DragAndDropTree/DragAndDropTreeRoot/DragAndDropTreeRootContext';
 
 const user = userEvent.setup();
 
 // Test data:
 const childrenTestId = 'test';
 const renderComponent = (children?: ReactNode) => (
-  <DragAndDrop.Provider onAdd={jest.fn()} onMove={jest.fn()} rootId='rootId'>
+  <StudioDragAndDrop.Provider onAdd={jest.fn()} onMove={jest.fn()} rootId='rootId'>
     <DragAndDropTreeRoot>
       <div data-testid={childrenTestId}>{children}</div>
     </DragAndDropTreeRoot>
-  </DragAndDrop.Provider>
+  </StudioDragAndDrop.Provider>
 );
 
 const render = (children?: ReactNode) => renderRtl(renderComponent(children));

frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTreeRoot/DragAndDropTreeRoot.tsx

@@ -1,7 +1,6 @@
 import type { ReactNode } from 'react';
 import React, { useState } from 'react';
-import { DragAndDrop } from 'app-shared/components/dragAndDrop';
-import { StudioTreeView } from '@studio/components';
+import { StudioTreeView, StudioDragAndDrop } from '@studio/components';
 import { DragAndDropTreeRootContext } from './DragAndDropTreeRootContext';
 import { EmptyList } from 'app-shared/components/DragAndDropTree/EmptyList';
 
@@ -22,15 +21,15 @@ export const DragAndDropTreeRoot = ({
 
   return (
     <DragAndDropTreeRootContext.Provider value={{ hoveredNodeParent, setHoveredNodeParent }}>
-      <DragAndDrop.List>
+      <StudioDragAndDrop.List>
         <StudioTreeView.Root
           onSelect={onSelect}
           onMouseOut={() => setHoveredNodeParent(null)}
           selectedId={selectedId}
         >
           {children || <EmptyList>{emptyMessage}</EmptyList>}
         </StudioTreeView.Root>
-      </DragAndDrop.List>
+      </StudioDragAndDrop.List>
     </DragAndDropTreeRootContext.Provider>
   );
 };

frontend/packages/shared/src/components/DragAndDropTree/index.ts

@@ -1,18 +1,18 @@
 import { DragAndDropTreeItem } from './DragAndDropTreeItem';
 import { DragAndDropTreeRoot } from './DragAndDropTreeRoot';
-import { DragAndDrop } from 'app-shared/components/dragAndDrop';
+import { StudioDragAndDrop } from '@studio/components';
 import { DragAndDropTreeProvider } from './DragAndDropTreeProvider';
 
 type DragAndDropTreeComponent = {
   Item: typeof DragAndDropTreeItem;
   Root: typeof DragAndDropTreeRoot;
   Provider: typeof DragAndDropTreeProvider;
-  NewItem: typeof DragAndDrop.NewItem;
+  NewItem: typeof StudioDragAndDrop.NewItem;
 };
 
 export const DragAndDropTree: DragAndDropTreeComponent = {
   Item: DragAndDropTreeItem,
   Root: DragAndDropTreeRoot,
   Provider: DragAndDropTreeProvider,
-  NewItem: DragAndDrop.NewItem,
+  NewItem: StudioDragAndDrop.NewItem,
 };