feat: migrate dnd-kit story to @dnd-kit/react

package.json

@@ -66,8 +66,8 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
     "@babel/plugin-transform-react-pure-annotations": "^7.27.1",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/helpers": "^0.3.2",
+    "@dnd-kit/react": "^0.3.2",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
     "@faker-js/faker": "^10.0.0",

stories/react/advanced/With dnd-kit.stories.tsx

@@ -1,72 +1,34 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { VList } from "../../../src";
-import React, { CSSProperties, forwardRef, useCallback, useState } from "react";
-import {
-  DndContext,
-  closestCenter,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-  DragOverlay,
-} from "@dnd-kit/core";
-import {
-  arrayMove,
-  SortableContext,
-  sortableKeyboardCoordinates,
-  verticalListSortingStrategy,
-  useSortable,
-} from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
+import React, { CSSProperties, useState } from "react";
+import { DragDropProvider, DragOverlay } from "@dnd-kit/react";
+import { useSortable } from "@dnd-kit/react/sortable";
+import { move } from "@dnd-kit/helpers";
 
 export default {
   component: VList,
 } as Meta;
 
-const Item = forwardRef<HTMLDivElement, { id: number; style?: CSSProperties }>(
-  ({ id, style, ...props }, ref) => {
-    return (
-      <div
-        {...props}
-        style={{
-          height: 50,
-          borderBottom: "solid 1px #ccc",
-          background: "#fff",
-          ...style,
-        }}
-        ref={ref}
-      >
-        {id}
-      </div>
-    );
-  },
-);
-
-const SortableItem = (props: { id: number }) => {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: props.id });
+const itemStyle: CSSProperties = {
+  height: 50,
+  borderBottom: "solid 1px #ccc",
+  background: "#fff",
+};
 
-  const style: CSSProperties = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    cursor: "grab",
-    visibility: isDragging ? "hidden" : undefined,
-  };
+const SortableItem = ({ id, index }: { id: number; index: number }) => {
+  const { ref, isDragging } = useSortable({ id, index });
 
   return (
-    <Item
-      ref={setNodeRef}
-      id={props.id}
-      style={style}
-      {...attributes}
-      {...listeners}
-    />
+    <div
+      ref={ref}
+      style={{
+        ...itemStyle,
+        cursor: "grab",
+        opacity: isDragging ? 0 : undefined,
+      }}
+    >
+      {id}
+    </div>
   );
 };
 
@@ -76,45 +38,22 @@ export const Default: StoryObj = {
     const [items, setItems] = useState(() =>
       Array.from({ length: 1000 }, (_, i) => i + 1),
     );
-    const [activeId, setActiveId] = useState<number | null>(null);
-    const sensors = useSensors(
-      useSensor(PointerSensor),
-      useSensor(KeyboardSensor, {
-        coordinateGetter: sortableKeyboardCoordinates,
-      }),
-    );
 
     return (
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        onDragStart={useCallback((event) => {
-          setActiveId(event.active.id);
-        }, [])}
-        onDragEnd={useCallback((event) => {
-          const { active, over } = event;
-
-          if (active.id !== over.id) {
-            setItems((items) => {
-              const oldIndex = items.indexOf(active.id);
-              const newIndex = items.indexOf(over.id);
-              return arrayMove(items, oldIndex, newIndex);
-            });
-          }
-          setActiveId(null);
-        }, [])}
+      <DragDropProvider
+        onDragEnd={(event) => {
+          setItems((items) => move(items, event));
+        }}
       >
-        <SortableContext items={items} strategy={verticalListSortingStrategy}>
-          <VList style={{ width: 400, height: 600 }}>
-            {items.map((id) => (
-              <SortableItem key={id} id={id} />
-            ))}
-          </VList>
-        </SortableContext>
+        <VList style={{ width: 400, height: 600 }}>
+          {items.map((id, index) => (
+            <SortableItem key={id} id={id} index={index} />
+          ))}
+        </VList>
         <DragOverlay>
-          {activeId != null ? <Item id={activeId} /> : null}
+          {(source) => <div style={itemStyle}>{source.id}</div>}
         </DragOverlay>
-      </DndContext>
+      </DragDropProvider>
     );
   },
 };