Sync

apps/docs/.storybook/preview-head.html

@@ -0,0 +1,76 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Roboto+Mono:wght@500&display=swap" rel="stylesheet">
+
+<style>
+  :root {
+    --font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
+
+    font-family: var(--font-family);
+    background-color: #FCFCFC;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .sb-main-padded {
+    padding-top: 3rem !important;
+  }
+
+  h1 {
+    font-size: 40px !important;
+  }
+
+  h2 {
+    margin-top: 40px !important;
+    font-size: 30px !important;
+    border-bottom: none !important;
+  }
+
+  p {
+    font-size: 17px !important;
+    line-height: 2 !important;
+  }
+
+  h1 + p {
+    font-size: 20px !important;
+  }
+
+  button:not([class]) {
+    appearance: none;
+    cursor: grab;
+    background-color: #FFF;
+    color: #666;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    font-size: 15px;
+    outline: none;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), inset 0 0 1px hsla(203, 50%, 30%, 0.5);
+    white-space: nowrap;
+  }
+
+  button:not([class]):hover {
+    background-color: #F9F9F9;
+  }
+
+  button:not([class]):focus-visible {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), inset 0 0 1px hsla(203, 50%, 30%, 0.5), inset 0 0 0 2px #4c9ffe;
+  }
+
+  section {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    max-width: 700px;
+    margin: 0 auto;
+    gap: 20px;
+  }
+
+  section > * {
+    width: calc(50% - 10px);
+  }
+</style>

apps/docs/.storybook/preview.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Unstyled} from '@storybook/blocks';
+import {Unstyled, Title} from '@storybook/blocks';
 
 import {Code} from '../stories/react/components';
 

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

@@ -1,16 +1,30 @@
 import type {Meta, StoryObj} from '@storybook/react';
 
 import {DroppableExample} from './DroppableExample';
+import {KitchenSinkExample} from './KitchenSinkExample';
+import docs from './docs/DroppableDocs.mdx';
 
 const meta: Meta<typeof DroppableExample> = {
   component: DroppableExample,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      page: docs,
+    },
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof DroppableExample>;
 
-export const BasicSetup: Story = {
+export const BasicSetup: Story = {};
+
+export const MultipleDroppables: Story = {
   args: {
-    label: 'Basic setup',
+    parents: ['A', 'B', 'C'],
   },
 };
+
+export const KitchenSink: Story = {
+  render: KitchenSinkExample,
+};

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

@@ -1,163 +1,68 @@
-import React, {useRef, useState} from 'react';
+import React, {useState} from 'react';
 import type {PropsWithChildren} from 'react';
 import type {UniqueIdentifier} from '@dnd-kit/types';
 import {DragDropProvider, useDraggable, useDroppable} from '@dnd-kit/react';
-import {closestCenter, CollisionDetector} from '@dnd-kit/collision';
 
-import {Button, Dropzone, Handle} from '../components';
+import {Button, Dropzone} from '../components';
 import {DraggableIcon} from '../icons';
 
-export function DroppableExample() {
-  const [items, setItems] = useState({
-    A: {
-      A1: [{id: 0, type: 'A'}],
-      A2: [],
-      A3: [],
-      A4: [],
-      A5: [],
-      A6: [],
-      A7: [],
-    },
-    B: {
-      B1: [],
-      B2: [{id: 1, type: 'B'}],
-      B3: [],
-      B4: [],
-    },
-    C: {
-      C1: [],
-      C2: [],
-      C3: [],
-      C4: [],
-    },
-  });
+interface Props {
+  parents?: UniqueIdentifier[];
+}
+
+export function DroppableExample({parents = ['A']}: Props) {
+  const [parent, setParent] = useState<UniqueIdentifier | undefined>();
+  const draggable = <Draggable id="draggable" />;
 
   return (
     <DragDropProvider
       onDragEnd={(event) => {
-        const {source, target} = event.operation;
+        const {target} = event.operation;
 
         if (event.canceled) {
-          const {abort, resume} = event.suspend();
-          const cancel = confirm('Cancel drop?');
-
-          resume();
-
-          if (cancel) {
-            abort();
-            return;
-          }
+          return;
         }
 
-        if (source && target) {
-          const targetRowId = target.id;
-          const currentRowId = source.data!.parent;
-          const [targetColumnId] = String(target.id);
-          const [currentColumnId] = String(currentRowId);
-
-          if (currentRowId !== targetRowId) {
-            setItems((items) => {
-              const newItems = {...items};
-
-              newItems[currentColumnId][currentRowId] = newItems[
-                currentColumnId
-              ][currentRowId].filter((child) => child.id !== source.id);
-
-              newItems[targetColumnId][targetRowId] = [
-                ...newItems[targetColumnId][targetRowId].filter(
-                  (child) => child.id !== source.id
-                ),
-                {id: source.id, type: source.type},
-              ];
-
-              return newItems;
-            });
-          }
-        }
+        setParent(target?.id);
       }}
     >
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          gap: 20,
-        }}
-      >
-        {Object.entries(items).map(([columnId, items]) => (
-          <div
-            key={columnId}
-            style={{display: 'flex', flexDirection: 'column', gap: 20}}
-          >
-            {Object.entries(items).map(([rowId, children]) => (
-              <Droppable
-                key={rowId}
-                id={rowId}
-                accept={['A', 'B']}
-                collisionDetector={closestCenter}
-              >
-                {children.length
-                  ? children.map((child) => (
-                      <Draggable
-                        key={child.id}
-                        id={child.id}
-                        type={child.type}
-                        parent={rowId}
-                      />
-                    ))
-                  : null}
-              </Droppable>
-            ))}
-          </div>
+      <section>
+        <div>{parent == null ? draggable : null}</div>
+        {parents.map((id) => (
+          <Droppable key={id} id={id}>
+            {parent === id ? draggable : null}
+          </Droppable>
         ))}
-      </div>
+      </section>
     </DragDropProvider>
   );
 }
 
 interface DraggableProps {
   id: UniqueIdentifier;
-  parent: UniqueIdentifier;
-  type?: UniqueIdentifier;
 }
 
-function Draggable({id, parent, type}: DraggableProps) {
+function Draggable({id}: DraggableProps) {
   const [element, setElement] = useState<Element | null>(null);
-  const activatorRef = useRef<HTMLButtonElement | null>(null);
 
   const {isDragSource} = useDraggable({
     id,
-    data: {parent},
     element,
-    activator: activatorRef,
-    type,
   });
 
   return (
-    <Button
-      ref={setElement}
-      shadow={isDragSource}
-      actions={
-        type === 'B' ? <Handle ref={activatorRef} variant="dark" /> : undefined
-      }
-    >
+    <Button ref={setElement} shadow={isDragSource}>
       <DraggableIcon />
     </Button>
   );
 }
 
 interface DroppableProps {
   id: UniqueIdentifier;
-  accept?: UniqueIdentifier[];
-  collisionDetector?: CollisionDetector;
 }
 
-function Droppable({
-  id,
-  accept,
-  collisionDetector,
-  children,
-}: PropsWithChildren<DroppableProps>) {
-  const {ref, isDropTarget} = useDroppable({id, accept, collisionDetector});
+function Droppable({id, children}: PropsWithChildren<DroppableProps>) {
+  const {ref, isDropTarget} = useDroppable({id});
 
   return (
     <Dropzone ref={ref} highlight={isDropTarget}>