Latest updates

apps/docs/.storybook/main.js

@@ -20,7 +20,7 @@ export default {
     });
   },
   docs: {
-    autodocs: true,
+    autodocs: 'tag',
   },
 };
 

apps/docs/.storybook/preview.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {Unstyled} from '@storybook/blocks';
+
+import {Code} from '../stories/react/components';
+
+export const parameters = {
+  docs: {
+    components: {
+      pre: (props) => (
+        <Unstyled>
+          <pre {...props} />
+        </Unstyled>
+      ),
+      code: Code,
+    },
+  },
+};

apps/docs/package.json

@@ -13,9 +13,12 @@
     "@dnd-kit/dom": "*",
     "@dnd-kit/react": "*",
     "@dnd-kit/utilities": "*",
+    "prismjs": "^1.29.0",
+    "clipboard": "^2.0.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "use-pan-and-zoom": "^0.6.5"
+    "use-pan-and-zoom": "^0.6.5",
+    "@tanstack/react-virtual": "^3.0.0-beta.54"
   },
   "devDependencies": {
     "@dnd-kit/abstract": "*",

apps/docs/stories/Droppable/Droppable.mdx → apps/docs/stories/react/Droppable/Droppable.mdx

@@ -1,6 +1,4 @@
-{/* Checkbox.mdx */}
-
-import { Canvas, Meta } from '@storybook/blocks';
+import {Canvas, Meta} from '@storybook/blocks';
 
 import * as DroppableStories from './Droppable.stories';
 

apps/docs/stories/Droppable/DroppableExample.tsx → apps/docs/stories/react/Droppable/DroppableExample.tsx

@@ -1,12 +1,11 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useRef, useState} from 'react';
 import type {PropsWithChildren} from 'react';
 import type {UniqueIdentifier} from '@dnd-kit/types';
-import {DndContext, useDraggable, useDroppable} from '@dnd-kit/react';
+import {DragDropProvider, useDraggable, useDroppable} from '@dnd-kit/react';
 import {closestCenter, CollisionDetector} from '@dnd-kit/collision';
 
 import {Button, Dropzone, Handle} from '../components';
 import {DraggableIcon} from '../icons';
-import {cloneDeep} from '../utilities';
 
 export function DroppableExample() {
   const [items, setItems] = useState({
@@ -32,28 +31,23 @@ export function DroppableExample() {
       C4: [],
     },
   });
-  const snapshot = useRef(cloneDeep(items));
 
   return (
-    <DndContext
-      onDragStart={() => {
-        snapshot.current = cloneDeep(items);
-      }}
-      // onCollision={(event, manager) => {
-      //   const [_, secondCollision] = event.collisions;
-
-      //   event.preventDefault();
-      //   manager.actions.setDropTarget(secondCollision?.id);
-      // }}
+    <DragDropProvider
       onDragEnd={(event) => {
         const {source, target} = event.operation;
 
         if (event.canceled) {
-          return;
-        }
+          const {abort, resume} = event.suspend();
+          const cancel = confirm('Cancel drop?');
 
-        const {resume} = event.suspend();
-        resume();
+          resume();
+
+          if (cancel) {
+            abort();
+            return;
+          }
+        }
 
         if (source && target) {
           const targetRowId = target.id;
@@ -81,11 +75,6 @@ export function DroppableExample() {
           }
         }
       }}
-      // onDragEnd={(event) => {
-      //   if (event.canceled) {
-      //     setItems(snapshot.current);
-      //   }
-      // }}
     >
       <div
         style={{
@@ -106,20 +95,22 @@ export function DroppableExample() {
                 accept={['A', 'B']}
                 collisionDetector={closestCenter}
               >
-                {children.map((child) => (
-                  <Draggable
-                    key={child.id}
-                    id={child.id}
-                    type={child.type}
-                    parent={rowId}
-                  />
-                ))}
+                {children.length
+                  ? children.map((child) => (
+                      <Draggable
+                        key={child.id}
+                        id={child.id}
+                        type={child.type}
+                        parent={rowId}
+                      />
+                    ))
+                  : null}
               </Droppable>
             ))}
           </div>
         ))}
       </div>
-    </DndContext>
+    </DragDropProvider>
   );
 }
 
@@ -133,7 +124,7 @@ function Draggable({id, parent, type}: DraggableProps) {
   const [element, setElement] = useState<Element | null>(null);
   const activatorRef = useRef<HTMLButtonElement | null>(null);
 
-  const {isDragging} = useDraggable({
+  const {isDragSource} = useDraggable({
     id,
     data: {parent},
     element,
@@ -144,8 +135,10 @@ function Draggable({id, parent, type}: DraggableProps) {
   return (
     <Button
       ref={setElement}
-      shadow={isDragging}
-      actions={type === 'B' ? <Handle ref={activatorRef} light /> : undefined}
+      shadow={isDragSource}
+      actions={
+        type === 'B' ? <Handle ref={activatorRef} variant="dark" /> : undefined
+      }
     >
       <DraggableIcon />
     </Button>

apps/docs/stories/Resizeable/Resizeable.tsx → apps/docs/stories/react/Resizeable/Resizeable.tsx

@@ -8,7 +8,7 @@ import React, {
 } from 'react';
 import type {PropsWithChildren} from 'react';
 import type {UniqueIdentifier} from '@dnd-kit/types';
-import {DndContext, useDraggable} from '@dnd-kit/react';
+import {DragDropProvider, useDraggable} from '@dnd-kit/react';
 
 import './Resizeable.css';
 import {Coordinates} from '@dnd-kit/geometry';
@@ -173,7 +173,7 @@ export function App() {
   );
 
   return (
-    <DndContext
+    <DragDropProvider
       onDragStart={(manager) => {
         if (selectedIds?.length) {
           manager.actions.initalize(selectedIds);
@@ -202,7 +202,7 @@ export function App() {
           </GridItem>
         ))}
       </Grid>
-    </DndContext>
+    </DragDropProvider>
   );
 }
 
@@ -316,7 +316,7 @@ export function Resizeable({disabled, onResize}: ResizeableProps) {
     </>
   );
 
-  return <DndContext>{handles}</DndContext>;
+  return <DragDropProvider>{handles}</DragDropProvider>;
 }
 
 type Direction = 'NE' | 'N' | 'NW' | 'SE' | 'S' | 'SW' | 'E' | 'W';

apps/docs/stories/react/Sortable/Sortable.stories.tsx

@@ -0,0 +1,21 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {SortableExample} from './SortableExample';
+import docs from './docs/Docs.mdx';
+
+const meta: Meta<typeof SortableExample> = {
+  component: SortableExample,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      page: docs,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SortableExample>;
+
+export const BasicSetup: Story = {
+  render: SortableExample,
+};