starting on drag-drop replacement

Author: benkeen

apps/client/package.json

@@ -73,6 +73,8 @@
     "codemirror": "^5.58.2",
     "crypto-browserify": "^3.12.1",
     "date-fns": "^2.17.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "dotenv": "^8.2.0",
     "googleapis": "^65.0.0",
     "graphql": "^16.11.0",

apps/client/src/core/generator/grid/Grid.component.tsx

@@ -1,15 +1,16 @@
+import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import C from '@generatedata/config/constants';
 import { PrimaryButton, Tooltip } from '@generatedata/core';
 import { DataTypeFolder } from '@generatedata/plugins';
 import CloseIcon from '@mui/icons-material/Close';
 import IconButton from '@mui/material/IconButton';
 import { useMeasure } from '@uidotdev/usehooks';
 import React, { useMemo } from 'react';
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import { useWindowSize } from 'react-hooks-window-size';
 import { DataRow } from '~store/generator/generator.reducer';
 import { useClasses } from './Grid.styles';
-import GridRow from './GridRow.container';
+import { GridRow } from './GridRow.component';
 
 export type GridProps = {
   rows: DataRow[];
@@ -28,6 +29,13 @@ const Grid = ({ rows, onAddRows, onSort, i18n, columnTitle, toggleGrid, changeSm
   const [measureRef, { width = 0, height = 0 }] = useMeasure();
   const classNames = useClasses();
 
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+
   let gridSizeClass = '';
   if (width && width < C.GRID.SMALL_BREAKPOINT) {
     gridSizeClass = classNames.gridSmall;
@@ -48,6 +56,25 @@ const Grid = ({ rows, onAddRows, onSort, i18n, columnTitle, toggleGrid, changeSm
   // to prevent repaints
   const memoizedDimensions = useMemo(() => ({ width, height }), [width, height]) as { width: number; height: number };
 
+  //   <DragDropContext onDragEnd={({ draggableId, destination }: any): any => onSort(draggableId, destination.index)}>
+  //   <Droppable droppableId="droppable">
+  //     {(provided: any): any => (
+  //       <div className={classNames.grid} {...provided.droppableProps} ref={provided.innerRef}>
+  //         {rows.map((row, index) => (
+  //           <GridRow
+  //             row={row}
+  //             key={row.id}
+  //             index={index}
+  //             gridPanelDimensions={memoizedDimensions}
+  //             showHelpDialog={showHelpDialog}
+  //           />
+  //         ))}
+  //         {provided.placeholder}
+  //       </div>
+  //     )}
+  //   </Droppable>
+  // </DragDropContext>
+
   return (
     <>
       <div style={{ position: 'fixed', right: 0, padding: 10 }}>
@@ -76,25 +103,25 @@ const Grid = ({ rows, onAddRows, onSort, i18n, columnTitle, toggleGrid, changeSm
         </div>
         <div className={`${classNames.scrollableGridRows} tour-scrollableGridRows`}>
           <div className={`${classNames.gridRowsWrapper} tour-gridRows`}>
-            <DragDropContext onDragEnd={({ draggableId, destination }: any): any => onSort(draggableId, destination.index)}>
-              <Droppable droppableId="droppable">
-                {(provided: any): any => (
-                  <div className={classNames.grid} {...provided.droppableProps} ref={provided.innerRef}>
-                    {rows.map((row, index) => (
-                      <GridRow
-                        row={row}
-                        key={row.id}
-                        index={index}
-                        gridPanelDimensions={memoizedDimensions}
-                        showHelpDialog={showHelpDialog}
-                      />
-                    ))}
-                    {provided.placeholder}
-                  </div>
-                )}
-              </Droppable>
-            </DragDropContext>
-
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              onDragEnd={({ draggableId, destination }: any): any => onSort(draggableId, destination.index)}
+            >
+              <div className={classNames.grid}>
+                <SortableContext items={rows} strategy={verticalListSortingStrategy}>
+                  {rows.map((row, index) => (
+                    <GridRow
+                      row={row}
+                      key={row.id}
+                      index={index}
+                      gridPanelDimensions={memoizedDimensions}
+                      showHelpDialog={showHelpDialog}
+                    />
+                  ))}
+                </SortableContext>
+              </div>
+            </DndContext>
             <form onSubmit={(e): any => e.preventDefault()} className={`${classNames.addRows} tour-addRows`}>
               <span>{i18n.add}</span>
               <input