chore: replace DragAndDropTree with StudioDragAndDropTree (#14062)

Altinn · Nov 18, 2024 · a0d9e99 · a0d9e99
1 parent 1f8e40d
commit a0d9e99
Show file tree

Hide file tree

Showing 46 changed files with 107 additions and 551 deletions.
diff --git a/.../studio-components/src/components/StudioDragAndDropTree/StudioDragAndDropTree.stories.tsx b/.../studio-components/src/components/StudioDragAndDropTree/StudioDragAndDropTree.stories.tsx
@@ -0,0 +1,29 @@
+import React, { type ReactNode } from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+import { StudioDragAndDropTree } from './index';
+
+type Story = StoryFn<typeof StudioDragAndDropTree>;
+
+export const Preview: Story = (): React.ReactElement => (
+  <StudioDragAndDropTree.Provider onAdd={() => {}} onMove={() => {}} rootId='1'>
+    <StudioDragAndDropTree.Root>
+      <StudioDragAndDropTree.Item
+        emptyMessage='Preview is not available in Storybook.'
+        expandable={true}
+        label='Label'
+        labelWrapper={(children: ReactNode) => <div>{children}</div>}
+        nodeId='Id'
+      />
+    </StudioDragAndDropTree.Root>
+  </StudioDragAndDropTree.Provider>
+);
+
+const meta: Meta = {
+  title: 'Components/StudioDragAndDropTree',
+  component: Preview,
+  argTypes: {},
+};
+
+Preview.args = {};
+
+export default meta;
diff --git a/.../components/StudioDragAndDropTree/StudioDragAndDropTreeItem/StudioDragAndDropTreeItem.tsx b/.../components/StudioDragAndDropTree/StudioDragAndDropTreeItem/StudioDragAndDropTreeItem.tsx
@@ -4,7 +4,7 @@ import type { ReactNode } from 'react';
 import React, { useContext } from 'react';
 import { StudioDragAndDropTreeRootContext } from '../StudioDragAndDropTreeRoot';
 import { StudioDragAndDropTreeItemContext } from './StudioDragAndDropTreeItemContext';
-import classes from './DragAndDropTreeItem.module.css';
+import classes from './StudioDragAndDropTreeItem.module.css';
 import cn from 'classnames';
 import { StudioEmptyList } from '../StudioEmptyList';
 

diff --git a/frontend/libs/studio-components/src/components/StudioDragAndDropTree/index.ts b/frontend/libs/studio-components/src/components/StudioDragAndDropTree/index.ts
@@ -16,3 +16,5 @@ export const StudioDragAndDropTree: StudioDragAndDropTreeComponent = {
   Provider: StudioDragAndDropTreeProvider,
   NewItem: StudioDragAndDrop.NewItem,
 };
+
+export { type StudioDragAndDropTreeProviderProps } from './StudioDragAndDropTreeProvider';
diff --git a/frontend/libs/studio-components/src/components/index.ts b/frontend/libs/studio-components/src/components/index.ts
@@ -19,6 +19,7 @@ export * from './StudioDeleteButton';
 export * from './StudioDisplayTile';
 export * from './StudioDivider';
 export * from './StudioDragAndDrop';
+export * from './StudioDragAndDropTree';
 export * from './StudioDropdownMenu';
 export * from './StudioError';
 export * from './StudioErrorMessage';

diff --git a/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.test.tsx b/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.test.tsx
@@ -9,8 +9,8 @@ import {
   stringDefinitionNodeMock,
   uiSchemaNodesMock,
 } from '../../../test/mocks/uiSchemaMock';
-import type { DragAndDropTreeProviderProps } from 'app-shared/components/DragAndDropTree/DragAndDropTreeProvider';
-import { DragAndDropTree } from 'app-shared/components/DragAndDropTree';
+import type { StudioDragAndDropTreeProviderProps } from '@studio/components';
+import { StudioDragAndDropTree } from '@studio/components';
 import { screen } from '@testing-library/react';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import userEvent from '@testing-library/user-event';
@@ -37,7 +37,7 @@ const defaultAppContextProps: SchemaEditorAppContextProps = {
 };
 
 const defaultDragAndDropTreeProviderProps: Omit<
-  DragAndDropTreeProviderProps<string>,
+  StudioDragAndDropTreeProviderProps<string>,
   'children'
 > = {
   onAdd: jest.fn(),
@@ -153,7 +153,7 @@ describe('NodePanel', () => {
 type RenderNodePanelProps = {
   props?: Partial<NodePanelProps>;
   appContextProps?: Partial<SchemaEditorAppContextProps>;
-  dragAndDropTreeProviderProps?: Partial<DragAndDropTreeProviderProps<string>>;
+  dragAndDropTreeProviderProps?: Partial<StudioDragAndDropTreeProviderProps<string>>;
 };
 
 const renderNodePanel = (
@@ -164,10 +164,10 @@ const renderNodePanel = (
   },
 ) =>
   renderWithProviders({ appContextProps: { ...defaultAppContextProps, ...appContextProps } })(
-    <DragAndDropTree.Provider<string>
+    <StudioDragAndDropTree.Provider<string>
       {...defaultDragAndDropTreeProviderProps}
       {...dragAndDropTreeProviderProps}
     >
       <NodePanel {...defaultProps} {...props} />
-    </DragAndDropTree.Provider>,
+    </StudioDragAndDropTree.Provider>,
   );
diff --git a/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx b/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx
@@ -5,11 +5,10 @@ import { SchemaInspector } from '../SchemaInspector';
 import type { UiSchemaNodes } from '@altinn/schema-model';
 import { ROOT_POINTER } from '@altinn/schema-model';
 import { useSchemaEditorAppContext } from '../../hooks/useSchemaEditorAppContext';
-import { DragAndDropTree } from 'app-shared/components/DragAndDropTree';
 import { useMoveProperty } from './hooks/useMoveProperty';
 import { useAddReference } from './hooks/useAddReference';
 import { NodePanel } from '../NodePanel';
-import { StudioResizableLayout } from '@studio/components';
+import { StudioResizableLayout, StudioDragAndDropTree } from '@studio/components';
 import { useUserQuery } from 'app-development/hooks/queries';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 
@@ -24,7 +23,7 @@ export const SchemaEditor = () => {
     selectedTypePointer && schemaModel.getNodeBySchemaPointer(selectedTypePointer);
 
   return (
-    <DragAndDropTree.Provider
+    <StudioDragAndDropTree.Provider
       onAdd={addReference}
       onMove={moveProperty}
       rootId={ROOT_POINTER}
@@ -55,6 +54,6 @@ export const SchemaEditor = () => {
           </aside>
         </StudioResizableLayout.Element>
       </StudioResizableLayout.Container>
-    </DragAndDropTree.Provider>
+    </StudioDragAndDropTree.Provider>
   );
 };
diff --git a/frontend/packages/schema-editor/src/components/SchemaTree/SchemaNode/SchemaNode.test.tsx b/frontend/packages/schema-editor/src/components/SchemaTree/SchemaNode/SchemaNode.test.tsx
@@ -1,5 +1,5 @@
 import { renderWithProviders } from '../../../../test/renderWithProviders';
-import { DragAndDropTree } from 'app-shared/components/DragAndDropTree';
+import { StudioDragAndDropTree } from '@studio/components';
 import { SchemaNode } from './SchemaNode';
 import { userEvent } from '@testing-library/user-event';
 import type { FieldNode } from '@altinn/schema-model';
@@ -204,11 +204,11 @@ const render = ({
   return renderWithProviders({
     appContextProps: { save, schemaModel, selectedUniquePointer, setSelectedUniquePointer },
   })(
-    <DragAndDropTree.Provider onAdd={onAdd} onMove={onMove} rootId={ROOT_POINTER}>
-      <DragAndDropTree.Root>
+    <StudioDragAndDropTree.Provider onAdd={onAdd} onMove={onMove} rootId={ROOT_POINTER}>
+      <StudioDragAndDropTree.Root>
         <SchemaNode schemaPointer={schemaPointer} />
-      </DragAndDropTree.Root>
-    </DragAndDropTree.Provider>,
+      </StudioDragAndDropTree.Root>
+    </StudioDragAndDropTree.Provider>,
   );
 };
 

diff --git a/frontend/packages/schema-editor/src/components/SchemaTree/SchemaNode/SchemaNode.tsx b/frontend/packages/schema-editor/src/components/SchemaTree/SchemaNode/SchemaNode.tsx
@@ -7,7 +7,7 @@ import {
   isNodeValidParent,
   isReference,
 } from '@altinn/schema-model';
-import { DragAndDropTree } from 'app-shared/components/DragAndDropTree';
+import { StudioDragAndDropTree } from '@studio/components';
 import { renderSchemaNodeList } from '../renderSchemaNodeList';
 import { renderIcon } from './renderIcon';
 import { ActionButtons } from './ActionButtons';
@@ -46,7 +46,7 @@ export const SchemaNode = ({
   );
 
   return (
-    <DragAndDropTree.Item
+    <StudioDragAndDropTree.Item
       emptyMessage={t('schema_editor.empty_node')}
       expandable={isNodeValidParent(node)}
       icon={renderIcon(savableModel, schemaPointer)}
@@ -56,7 +56,7 @@ export const SchemaNode = ({
       title={title}
     >
       {renderSchemaNodeList(savableModel, schemaPointer, uniquePointer)}
-    </DragAndDropTree.Item>
+    </StudioDragAndDropTree.Item>
   );
 };
 

diff --git a/frontend/packages/schema-editor/src/components/SchemaTree/SchemaTree.test.tsx b/frontend/packages/schema-editor/src/components/SchemaTree/SchemaTree.test.tsx
@@ -5,7 +5,7 @@ import {
   definitionNodeMock,
   uiSchemaNodesMock,
 } from '../../../test/mocks/uiSchemaMock';
-import { DragAndDropTree } from 'app-shared/components/DragAndDropTree';
+import { StudioDragAndDropTree } from '@studio/components';
 import { SchemaTree } from './SchemaTree';
 import { renderWithProviders } from '../../../test/renderWithProviders';
 import { screen } from '@testing-library/react';
@@ -34,7 +34,7 @@ describe('SchemaTree', () => {
 
 const render = (schemaPointer?: string) =>
   renderWithProviders()(
-    <DragAndDropTree.Provider onAdd={onAdd} onMove={onMove} rootId={ROOT_POINTER}>
+    <StudioDragAndDropTree.Provider onAdd={onAdd} onMove={onMove} rootId={ROOT_POINTER}>
       <SchemaTree schemaPointer={schemaPointer} />
-    </DragAndDropTree.Provider>,
+    </StudioDragAndDropTree.Provider>,
   );
diff --git a/frontend/packages/schema-editor/src/components/SchemaTree/SchemaTree.tsx b/frontend/packages/schema-editor/src/components/SchemaTree/SchemaTree.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DragAndDropTree } from 'app-shared/components/DragAndDropTree';
+import { StudioDragAndDropTree } from '@studio/components';
 import { renderSchemaNodeList } from './renderSchemaNodeList';
 import { useTranslation } from 'react-i18next';
 import { useSavableSchemaModel } from '../../hooks/useSavableSchemaModel';
@@ -17,12 +17,12 @@ export const SchemaTree = ({ schemaPointer }: SchemaTreeProps) => {
   const { t } = useTranslation();
 
   return (
-    <DragAndDropTree.Root
+    <StudioDragAndDropTree.Root
       emptyMessage={t('schema_editor.empty_node')}
       onSelect={setSelectedUniquePointer}
       selectedId={selectedUniquePointer}
     >
       {renderSchemaNodeList(savableModel, schemaPointer, uniquePointer)}
-    </DragAndDropTree.Root>
+    </StudioDragAndDropTree.Root>
   );
 };
diff --git a/frontend/packages/schema-editor/src/components/TypesInspector/TypeItem.test.tsx b/frontend/packages/schema-editor/src/components/TypesInspector/TypeItem.test.tsx
@@ -4,7 +4,7 @@ import { FieldType, ObjectKind, ROOT_POINTER } from '@altinn/schema-model';
 import { screen } from '@testing-library/react';
 import { TypeItem } from './TypeItem';
 import { renderWithProviders } from '../../../test/renderWithProviders';
-import { DragAndDropTree } from 'app-shared/components/DragAndDropTree';
+import { StudioDragAndDropTree } from '@studio/components';
 
 describe('TypeItem', () => {
   const uiSchemaNode: FieldNode = {
@@ -21,9 +21,9 @@ describe('TypeItem', () => {
   };
   it('should render the component', () => {
     renderWithProviders()(
-      <DragAndDropTree.Provider onAdd={jest.fn()} onMove={jest.fn()} rootId={ROOT_POINTER}>
+      <StudioDragAndDropTree.Provider onAdd={jest.fn()} onMove={jest.fn()} rootId={ROOT_POINTER}>
         <TypeItem setSelectedTypePointer={jest.fn()} uiSchemaNode={uiSchemaNode} />
-      </DragAndDropTree.Provider>,
+      </StudioDragAndDropTree.Provider>,
     );
     expect(screen.getByText('MyTestType')).toBeInTheDocument();
   });

diff --git a/frontend/packages/schema-editor/src/components/TypesInspector/TypeItem.tsx b/frontend/packages/schema-editor/src/components/TypesInspector/TypeItem.tsx
@@ -5,7 +5,7 @@ import { CogIcon, FileJsonIcon } from '@studio/icons';
 import classes from './TypeItem.module.css';
 import classNames from 'classnames';
 import { typeItemId } from '@studio/testing/testids';
-import { DragAndDropTree } from 'app-shared/components/DragAndDropTree';
+import { StudioDragAndDropTree } from '@studio/components';
 
 export interface TypeItemProps {
   uiSchemaNode: UiSchemaNode;
@@ -20,7 +20,7 @@ export const TypeItem = ({ uiSchemaNode, selected, setSelectedTypePointer }: Typ
   const name = extractNameFromPointer(uiSchemaNode.schemaPointer);
 
   return (
-    <DragAndDropTree.NewItem payload={name}>
+    <StudioDragAndDropTree.NewItem payload={name}>
       <div
         className={classNames(classes.item, {
           [classes.itemSelected]: selected,
@@ -34,6 +34,6 @@ export const TypeItem = ({ uiSchemaNode, selected, setSelectedTypePointer }: Typ
         <span className={classes.typeName}>{name}</span>
         <CogIcon />
       </div>
-    </DragAndDropTree.NewItem>
+    </StudioDragAndDropTree.NewItem>
   );
 };
diff --git a/frontend/packages/shared/package.json b/frontend/packages/shared/package.json
@@ -6,8 +6,6 @@
     "classnames": "2.5.1",
     "qs": "6.13.0",
     "react": "18.3.1",
-    "react-dnd": "16.0.1",
-    "react-dnd-html5-backend": "16.0.1",
     "react-dom": "18.3.1",
     "react-router-dom": "6.26.2"
   },

diff --git a/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTree.test.tsx b/frontend/packages/shared/src/components/DragAndDropTree/DragAndDropTree.test.tsx