Move dnd to dnd-kit to loose another 60Kb (but it doesn't work for now)

Signed-off-by: Egor Savkin <es@m-labs.hk>

package-lock.json

@@ -12,6 +12,7 @@
         "@babel/core": "^7.23.2",
         "@babel/preset-env": "^7.23.2",
         "@babel/preset-react": "^7.22.15",
+        "@dnd-kit/core": "^6.1.0",
         "@hello-pangea/dnd": "^16.5.0",
         "@uidotdev/usehooks": "^2.4.1",
         "babel-loader": "^9.1.3",
@@ -1856,6 +1857,45 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.0.tgz",
+      "integrity": "sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.1.0.tgz",
+      "integrity": "sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==",
+      "dev": true,
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.0",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@hello-pangea/dnd": {
       "version": "16.5.0",
       "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-16.5.0.tgz",

package.json

@@ -33,7 +33,8 @@
     "zustand": "^4.4.7",
     "@uidotdev/usehooks":"^2.4.1",
     "webpack-preprocessor-loader": "^1.3.0",
-    "preact": "^10.19.3"
+    "preact": "^10.19.3",
+    "@dnd-kit/core": "^6.1.0"
   },
   "babel": {
     "presets": [

static/js/shop/Backlog.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import {Droppable} from "@hello-pangea/dnd";
+//import {Droppable} from "@hello-pangea/dnd";
+import {useDroppable} from '@dnd-kit/core';
 import {ProductItem} from "./ProductItem";
 import {useShopStore} from "./shop_store";
 // #!render_count
@@ -17,6 +18,10 @@ export function Backlog() {
     const onClickToggleMobileSideMenu = useShopStore((state) => state.switchSideMenu);
     const isMobile = useShopStore((state) => state.isMobile);
 
+    const {setNodeRef} = useDroppable({
+        id: data.id,
+    });
+
     // #!render_count
     console.log("Backlog renders: ", renderCount)
 
@@ -52,9 +57,7 @@ export function Backlog() {
     );
 
     return (
-        <Droppable
+        <div ref={setNodeRef}>
-            droppableId={data.id}
-            isDropDisabled={false}>
 
             {(provided) => (
                 <div
@@ -82,7 +85,7 @@ export function Backlog() {
                 </div>
             )}
 
-        </Droppable>
+        </div>
     );
 
 }

static/js/shop/Cart.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import {Droppable} from "@hello-pangea/dnd";
+//import {Droppable} from "@hello-pangea/dnd";
+import {useDroppable} from '@dnd-kit/core';
 import {cartStyle, compareArraysWithIds} from "./utils";
 import {ProductCartItem} from "./ProductCartItem";
 import {FakePlaceholder} from "./FakePlaceholder";
@@ -22,6 +23,10 @@ export function Cart({crate_index}) {
     });
     const crateParams = useShopStore((state) => state.crateParams);
 
+    const {setNodeRef} = useDroppable({
+        id: crate.id,
+    });
+
     // #!render_count
     console.log("Cart renders: ", renderCount)
 
@@ -42,7 +47,7 @@ export function Cart({crate_index}) {
     });
 
     return (
-        <Droppable droppableId={crate.id} direction="horizontal">
+        <div ref={setNodeRef}>
 
             {(provided, snapshot) => (
                 <div
@@ -68,6 +73,6 @@ export function Cart({crate_index}) {
                 </div>
             )}
 
-        </Droppable>
+        </div>
     );
 }

static/js/shop/ProductCartItem.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import {Draggable} from "@hello-pangea/dnd";
+//import {Draggable} from "@hello-pangea/dnd";
+import {useDraggable} from '@dnd-kit/core';
 import {compareObjectsEmptiness, productStyle} from "./utils";
 import {Resources} from "./Resources";
 import {CardWarnings} from "./CardWarnings";
@@ -31,6 +32,10 @@ export function ProductCartItem({card_index, crate_index, first, last}) {
     const removeHighlight = useShopStore((state) => state.highlightReset);
     const onCardRemove = useShopStore((state) => state.deleteCard);
 
+    const {attributes, listeners, setNodeRef, transform} = useDraggable({
+        id: card.id,
+    });
+
     // #!render_count
     console.log("ProductCartItem renders: ", renderCount)
 
@@ -40,7 +45,7 @@ export function ProductCartItem({card_index, crate_index, first, last}) {
     const resources = !options_disabled && card_counted_resources && card_counted_resources.length > 0;
 
     return (
-        <Draggable draggableId={card.id} index={card_index}>
+        <div ref={setNodeRef}  {...listeners} {...attributes}>
 
             {(provided, snapshot) => (
                 <div
@@ -110,6 +115,6 @@ export function ProductCartItem({card_index, crate_index, first, last}) {
                 </div>
             )}
 
-        </Draggable>
+        </div>
     );
 }

static/js/shop/ProductItem.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import {Draggable} from "@hello-pangea/dnd";
+//import {Draggable} from "@hello-pangea/dnd";
+import {useDraggable} from '@dnd-kit/core';
 import {formatMoney, productStyle} from "./utils";
 import {useShopStore} from "./shop_store";
 
@@ -19,6 +20,10 @@ export function ProductItem({card_index}) {
     const onAddCard = useShopStore((state) => state.addCardFromBacklog);
     const card = getCardDescription(card_index);
 
+    const {attributes, listeners, setNodeRef, transform} = useDraggable({
+        id: card.id,
+    });
+
     // #!render_count
     console.log("ProductItem renders: ", renderCount)
 
@@ -62,7 +67,7 @@ export function ProductItem({card_index}) {
                     <img src="/images/shop/icon-add.svg" alt="add"/>
                 </button>
 
-                <Draggable draggableId={card.id} index={card_index}>
+                <div ref={setNodeRef}  {...listeners} {...attributes}>
                     {(provided, snapshot) => (
                         <React.Fragment>
                             <img
@@ -82,7 +87,7 @@ export function ProductItem({card_index}) {
                             )}
                         </React.Fragment>
                     )}
-                </Draggable>
+                </div>
 
             </div>
 

static/js/shop/Shop.jsx

@@ -1,5 +1,6 @@
 import React, {useEffect} from 'react';
-import {DragDropContext} from "@hello-pangea/dnd";
+//import {DragDropContext} from "@hello-pangea/dnd";
+import {DndContext, useSensor, useSensors, TouchSensor, MouseSensor} from "@dnd-kit/core";
 
 // #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
@@ -23,7 +24,16 @@ export function Shop() {
     const deleteCard = useShopStore((state) => state.deleteCard);
     const cardIndexById = useShopStore((state) => state.cardIndexById);
 
-    const handleOnDragEnd = (drop_result, _provided) => {
+    const mouseSensor = useSensor(MouseSensor);
+    const touchSensor = useSensor(TouchSensor);
+    const sensors = useSensors(
+        mouseSensor,
+        touchSensor,
+    );
+
+    const handleOnDragEnd = (event) => {
+        console.log(event);
+
         if (!drop_result.destination) {
             console.warn("No drop destination");
             return;
@@ -44,7 +54,7 @@ export function Shop() {
     console.log("Shop renders: ", renderCount)
 
     return (
-        <DragDropContext onDragEnd={handleOnDragEnd}>
+        <DndContext sensors={sensors} onDragEnd={handleOnDragEnd}>
             <Layout
                 aside={
                     <Backlog/>
@@ -62,7 +72,7 @@ export function Shop() {
                     />
                 )}>
             </Layout>
-        </DragDropContext>
+        </DndContext>
     );
 
 }