First draft of new documentation

apps/docs/README.md

@@ -0,0 +1,32 @@
+# Mintlify Starter Kit
+
+Click on `Use this template` to copy the Mintlify starter kit. The starter kit contains examples including
+
+- Guide pages
+- Navigation
+- Customizations
+- API Reference pages
+- Use of popular components
+
+### Development
+
+Install the [Mintlify CLI](https://www.npmjs.com/package/mintlify) to preview the documentation changes locally. To install, use the following command
+
+```
+npm i -g mintlify
+```
+
+Run the following command at the root of your documentation (where mint.json is)
+
+```
+mintlify dev
+```
+
+### Publishing Changes
+
+Install our Github App to auto propagate changes from your repo to your deployment. Changes will be deployed to production automatically after pushing to the default branch. Find the link to install on your dashboard. 
+
+#### Troubleshooting
+
+- Mintlify dev isn't running - Run `mintlify install` it'll re-install dependencies.
+- Page loads as a 404 - Make sure you are running in a folder with `mint.json`

apps/docs/concepts/drag-drop-manager.mdx

@@ -0,0 +1,93 @@
+---
+title: 'Manager'
+description: 'The orchestrator of the drag and drop system.'
+icon: 'sitemap'
+---
+
+## Overview
+
+As its name suggests, the `DragDropManager` is the manager of all of draggable and droppable elements, and it coordinates the events between them.
+
+The manager is responsible for:
+
+- Keeping track of all draggable and droppable elements.
+- Firing events when elements are dragged, moved, dropped.
+- Detecting collisions between draggable and droppable elements.
+- Registering and unregistering [plugins](/extend/plugins) to extend the core functionality, [modifiers](/extend/modifiers) to modify the behavior of the drag and drop system, and [sensors](/extend/sensors) to detect user interactions.
+- Lifecycle management to avoid any memory leaks.
+
+## Usage
+
+To create a new `DragDropManager` instance, you can import the `DragDropManager` class from the `@dnd-kit/dom` package.
+
+```js
+import {DragDropManager} from '@dnd-kit/dom';
+
+const manager = new DragDropManager();
+```
+
+## API Reference
+
+### Arguments
+
+The `DragDropManager` class accepts the following arguments:
+
+<ParamField path="plugins" type="Plugin[]">
+  An array of [plugins](/extend/plugins) that can be used to extend the core functionality of the drag and drop system.
+</ParamField>
+
+<ParamField path="sensors" type="Sensors[]">
+  An array of [sensors](/extend/sensors) that can be bound to the draggable element to detect drag interactions.
+</ParamField>
+
+<ParamField path="modifiers" type="Modifier[]">
+  An array of [modifiers](/extend/modifiers) that can be used to modify or restrict the behavior of the draggable element.
+</ParamField>
+
+<ParamField path="renderer" type="Renderer">
+  The renderer option is an advanced option that allows you to connect the drag and drop system to a custom renderer, such as React or Vue. This allows the manager to await the renderer to finish rendering before firing certain events.
+</ParamField>
+
+### Instance
+
+#### Properties
+
+The `DragDropManager` instance exposes the following properties:
+
+<ParamField path="actions">
+  The `actions` property exposes a set of methods that can be used to interact with the drag and drop system. This includes methods to start, move, and end drag operations.
+</ParamField>
+
+<ParamField path="collisionObserver">
+  The `collisionObserver` property is responsible for detecting collisions between draggable and droppable elements.
+</ParamField>
+
+<ParamField path="dragOperation">
+  The `dragOperation` property exposes metadata about the current drag operation.
+</ParamField>
+
+<ParamField path="monitor">
+  The `monitor` can be used to register and unregister event listeners when drag and drop events are emitted.
+
+  The events that can be listened to are:
+
+  | Event Name | Description | Preventable |
+  | ---------- | ----------- | ----------- |
+  | `beforedragstart` | Fired before a drag operation is initiated. | True |
+  | `dragstart` | Fired when a drag operation is initiated. | False |
+  | `dragmove` | Fired when a draggable element is moved. | False |
+  | `dragend` | Fired when a drag operation is ended. | True |
+  | `collision` | Fired when a collision is detected between draggable and droppable elements. | True |
+</ParamField>
+
+<ParamField path="registry">
+  The `registry` property is responsible for registering and unregistering [draggable](/concepts/draggable) and [droppable](/concepts/droppable) instances, along with instances of [plugins](/extend/plugins), [modifiers](/extend/modifiers), and [sensors](/extend/sensors).
+</ParamField>
+
+#### Methods
+
+The `DragDropManager` instance exposes the following methods:
+
+<ParamField path="destroy" type="() => void">
+  The `destroy` method is used to clean up the manager and all of its associated draggable, droppable, plugins, modifiers, and sensors instances.
+</ParamField>

apps/docs/concepts/draggable.mdx

@@ -0,0 +1,84 @@
+---
+title: 'Draggable'
+description: 'Make elements draggable to drop them over droppable targets.'
+icon: 'bullseye-pointer'
+---
+
+import {Story} from '/snippets/story.mdx';
+
+<Story id="vanilla-draggable--example" height="125" hero />
+
+## Usage
+
+
+First, we'll create a new [DragDropManager](/concepts/drag-drop-manager) instance. This is the orchestrator of the drag and drop system. It manages the state of all draggable and droppable elements, and coordinates the events between them.
+
+Then, we'll import the `Draggable` class to make elements draggable and allow them to be dropped over [droppable](/concepts/droppable) targets.
+
+The `id` argument is required, and needs to be unique within this manager. We'll also need to supply a reference to the `element` we want to make draggable.
+
+
+```js
+import {Draggable, DragDropManager} from '@dnd-kit/dom';
+
+const manager = new DragDropManager();
+
+const element = document.createElement('button');
+element.innerText = 'Draggable';
+
+const draggable = new Draggable({
+  id: 'draggable',
+  element,
+}, manager);
+
+document.body.appendChild(element);
+```
+
+In order to drop the draggable element over a droppable target, you'll need to create a [Droppable element](/concepts/droppable).
+
+## API Reference
+
+### Arguments
+
+The `Draggable` class accepts the following arguments:
+
+<ParamField path="id" type="string | number" required>
+  The identifier of the draggable element. Should be unique within the same [drag and drop context provider](/concepts/drag-drop-provider).
+</ParamField>
+
+<ParamField path="type" type="string | number | Symbol">
+  Optionally supply a type to only allow this draggable element to be dropped over droppable targets that [accept](/concepts/droppable) this `type`.
+</ParamField>
+
+<ParamField path="element" type="Element">
+  The element that should be made draggable. While this paramater is not required in the constructor, it is required to make the element draggable. You can update the `element` on the instance after creating it.
+</ParamField>
+
+<ParamField path="handle" type="Element">
+  Optionally supply a drag handle element to restrict initiating dragging to a specific element. If not provided, the entire `element` will be draggable.
+</ParamField>
+
+<ParamField path="disabled" type="boolean">
+  Set to `true` to prevent the draggable element from being draggable.
+</ParamField>
+
+<ParamField path="feedback" type="'default' | 'clone' | 'move' | 'none'">
+  The type of feedback that should be displayed when the element is being dragged.
+</ParamField>
+
+<ParamField path="modifiers" type="Modifier[]">
+  An array of [modifiers](/plugins/modifiers) that can be used to modify or restrict the behavior of the draggable element.
+</ParamField>
+
+<ParamField path="sensors" type="Sensors[]">
+  An array of [sensors](/sensors/overview) that can be bound to the draggable element to detect drag interactions.
+</ParamField>
+
+<ParamField path="data" type="{[key: string]: any}">
+  The data argument is for advanced use-cases where you may need access to additional data about the draggable element in event handlers, [modifiers](/extend/modifiers), [sensors](/extend/sensors) or [plugins](/extend/plugins).
+</ParamField>
+
+<ParamField path="effects" type="(manager: DragDropManager) => Effect[]">
+  <Info>This is an advanced feature and should not need to be used by most consumers.</Info>
+  You can supply a function that returns an array of reactive effects that can be set up and automatically cleaned up when invoking the `destroy()` method of this instance.
+</ParamField>

apps/docs/concepts/droppable.mdx

@@ -0,0 +1,73 @@
+---
+title: 'Droppable'
+description: 'Create droppable targets for draggable elements.'
+icon: 'arrows-maximize'
+---
+
+import {Story} from '/snippets/story.mdx';
+
+<Story id="vanilla-droppable--example" height="360" hero />
+
+## Usage
+
+First, we'll create a new [DragDropManager](/concepts/drag-drop-manager) instance. This is the orchestrator of the drag and drop system. It manages the state of all draggable and droppable elements, and coordinates the events between them.
+
+Then, we'll import the `Droppable` class to create droppable targets for draggable elements.
+
+The `id` argument is required, and needs to be unique within this manager. We'll also need to supply a reference to the `element` we want to make droppable.
+
+```js
+import {Droppable, DragDropManager} from '@dnd-kit/dom';
+
+const manager = new DragDropManager();
+
+const element = document.createElement('div');
+element.style.width = '200px';
+element.style.height = '200px';
+
+const droppable = new Droppable({
+  id: 'droppable',
+  element,
+}, manager);
+```
+
+In order for our droppable element to receive draggable elements, you'll need to create some [Draggable elements](/concepts/draggable).
+
+## API Reference
+
+### Arguments
+
+The `Droppable` class accepts the following arguments:
+
+<ParamField path="id" type="string | number" required>
+  The identifier of the droppable element. Should be unique within the same [drag and drop context provider](/react/components/drag-drop-provider).
+</ParamField>
+
+<ParamField path="element" type="Element">
+  The element that should be made droppable. While this paramater is not required in the constructor, it is required to make the element droppable. You can update the `element` on the instance after creating it.
+</ParamField>
+
+<ParamField path="accepts" type="string | number | Symbol | (type: string | number | Symbol) => boolean">
+  Optionally supply a type of draggable element to only allow it to be dropped over certina droppable targets that [accept](#) this `type`.
+</ParamField>
+
+<ParamField path="collisionDetector" type="(input: CollisionDetectorInput) => Collision | null">
+  Optionally supply a [collision detector](#detecting-collisions) function can be used to detect collisions between the droppable element and draggable elements.
+</ParamField>
+
+<ParamField path="collisionPriority" type="number">
+  Optionally supply a number to set the collision priority of the droppable element. The higher the number, the higher the priority when detecting collisions. This can be useful if there are multiple droppable elements that overlap.
+</ParamField>
+
+<ParamField path="disabled" type="boolean">
+  Set to `true` to prevent the droppable element from being a drop target.
+</ParamField>
+
+<ParamField path="data" type="{[key: string]: any}">
+  The data argument is for advanced use-cases where you may need access to additional data about the droppable element in event handlers, modifiers, sensors or custom plugins.
+</ParamField>
+
+<ParamField path="effects" type="(manager: DragDropManager) => Effect[]">
+  <Info>This is an advanced feature and should not need to be used by most consumers.</Info>
+  You can supply a function that returns an array of reactive effects that can be set up and automatically cleaned up when invoking the `destroy()` method of this instance.
+</ParamField>

apps/docs/concepts/sortable.mdx

@@ -0,0 +1,93 @@
+---
+title: 'Sortable'
+description: 'Reorder elements in a list or across multiple lists.'
+icon: 'layer-group'
+---
+
+import {Story} from '/snippets/story.mdx';
+
+<Story id="react-sortable--demo" height="320" hero />
+
+## Usage
+
+The `Sortable` class allows you to reorder elements in a list or across multiple lists.
+Sortable elements are both [Droppable](/concepts/droppable) and [Draggable](/concepts/draggable).
+The `Sortable` class is a thin wrapper that composes the `Draggable` and `Droppable` classes to make it simple to create sortable lists.
+
+```js
+import {Sortable, DragDropManager} from '@dnd-kit/dom';
+
+const manager = new DragDropManager();
+
+const wrapper = document.createElement('ul');
+const items = ['Item 1', 'Item 2', 'Item 3'];
+
+items.forEach((item) => {
+  const element = document.createElement('li');
+  element.innerText = item;
+
+  const sortable = new Sortable({
+    id: item,
+    element,
+  }, manager);
+
+  wrapper.appendChild(element);
+});
+
+document.body.appendChild(wrapper);
+```
+
+## API Reference
+
+### Arguments
+
+The `Sortable` class accepts the following arguments:
+
+<ParamField path="id" type="string | number" required>
+  The identifier of the sortable element. Should be unique within the same [drag and drop context provider](/react/components/drag-drop-provider).
+</ParamField>
+
+<ParamField path="element" type="Element">
+  The element that should be made sortable. While this paramater is not required in the constructor, it is required to make the element sortable. You can update the `element` on the instance after creating it.
+</ParamField>
+
+<ParamField path="handle" type="Element">
+  Optionally supply a drag handle element to restrict initiating dragging to a specific element. If not provided, the entire `element` will be draggable.
+</ParamField>
+
+<ParamField path="type" type="string | number | Symbol">
+  Optionally supply a type to only allow this sortable element to only be dropped over droppable targets that [accept](/concept/droppable) this `type`.
+</ParamField>
+
+<ParamField path="accepts" type="string | number | Symbol | (type: string | number | Symbol) => boolean">
+  Optionally supply a type of draggable element to only allow it to be dropped over certina droppable targets that [accept](#) this `type`.
+</ParamField>
+
+<ParamField path="collisionDetector" type="(input: CollisionDetectorInput) => Collision | null">
+  Optionally supply a [collision detector](/concepts/droppable#detecting-collisions) function can be used to detect collisions between the droppable element and draggable elements.
+</ParamField>
+
+<ParamField path="collisionPriority" type="number">
+  Optionally supply a number to set the collision priority of the droppable element. The higher the number, the higher the priority when detecting collisions. This can be useful if there are multiple droppable elements that overlap.
+</ParamField>
+
+<ParamField path="disabled" type="boolean">
+  Set to `true` to prevent the sortable element from being sortable.
+</ParamField>
+
+<ParamField path="modifiers" type="Modifier[]">
+  An array of [modifiers](/plugins/modifiers) that can be used to modify or restrict the behavior of the sortable element.
+</ParamField>
+
+<ParamField path="sensors" type="Sensors[]">
+  An array of [sensors](/sensors/overview) that can be bound to the sortable element to detect drag interactions.
+</ParamField>
+
+<ParamField path="data" type="{[key: string]: any}">
+  The data argument is for advanced use-cases where you may need access to additional data about the sortable element in event handlers, modifiers, sensors or custom plugins.
+</ParamField>
+
+<ParamField path="effects" type="(manager: DragDropManager) => Effect[]">
+  <Info>This is an advanced feature and should not need to be used by most consumers.</Info>
+  You can supply a function that returns an array of reactive effects that can be set up and automatically cleaned up when invoking the `destroy()` method of this instance.
+</ParamField>