Migrate react-beautiful-dnd to @hello-pangea/dnd (#746)

Signed-off-by: achour94 <[email protected]>

Author: achour94

package-lock.json

@@ -34,6 +34,7 @@
         "licenses-check": "license-checker --summary --excludePrivatePackages --production --onlyAllow \"$( jq -r .onlyAllow[] license-checker-config.json | tr '\n' ';')\" --excludePackages \"$( jq -r .excludePackages[] license-checker-config.json | tr '\n' ';')\""
     },
     "dependencies": {
+        "@hello-pangea/dnd": "^18.0.1",
         "@react-querybuilder/dnd": "^8.2.0",
         "@react-querybuilder/material": "^8.2.0",
         "autosuggest-highlight": "^3.3.4",
@@ -42,7 +43,6 @@
         "localized-countries": "^2.0.0",
         "oidc-client": "^1.11.5",
         "prop-types": "^15.8.1",
-        "react-beautiful-dnd": "^13.1.1",
         "react-csv-downloader": "^3.3.0",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
@@ -96,7 +96,6 @@
         "@types/node": "^22.13.4",
         "@types/prop-types": "^15.7.14",
         "@types/react": "^18.3.18",
-        "@types/react-beautiful-dnd": "^13.1.8",
         "@types/react-dom": "^18.3.5",
         "@types/react-resizable": "^3.0.8",
         "@typescript-eslint/eslint-plugin": "^7.18.0",

package.json

@@ -7,7 +7,7 @@
 
 import { useState } from 'react';
 import { Box } from '@mui/material';
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { DragDropContext, Droppable } from '@hello-pangea/dnd';
 import { CheckBoxListItems } from './CheckBoxListItems';
 import { CheckboxListProps } from './checkBoxList.type';
 

src/components/checkBoxList/CheckBoxList.tsx

@@ -8,7 +8,7 @@
 import { useCallback, useMemo } from 'react';
 import { Checkbox, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
-import { Draggable } from 'react-beautiful-dnd';
+import { Draggable } from '@hello-pangea/dnd';
 import { CheckBoxListItem } from './CheckBoxListItem';
 import { OverflowableText } from '../overflowableText';
 import { DraggableCheckBoxListItem } from './DraggableCheckBoxListItem';

src/components/checkBoxList/CheckBoxListItems.tsx

@@ -6,7 +6,7 @@
  */
 
 import type { ReactElement, ReactNode } from 'react';
-import type { DraggableProvided, DragStart, DropResult } from 'react-beautiful-dnd';
+import type { DraggableProvided, DragStart, DropResult } from '@hello-pangea/dnd';
 import type { SxProps, Theme } from '@mui/material';
 
 export type CheckBoxListItemSx = {