Migrate to bun

apps/docs/.eslintrc.js

@@ -1,4 +1,3 @@
 module.exports = {
-  root: true,
-  extends: ['dnd-kit', 'plugin:storybook/recommended']
-};
+  extends: ['@dnd-kit/eslint-config'],
+};

apps/docs/.storybook-backup/main.js

@@ -0,0 +1,42 @@
+import { dirname, join, resolve } from "path";
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+
+const config = {
+  stories: ["../stories/*.stories.tsx", "../stories/**/*.stories.tsx"],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-docs"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+
+  core: {},
+
+  async viteFinal(config, { configType }) {
+    // customize the Vite config here
+    return {
+      ...config,
+      define: { "process.env": {} },
+      resolve: {
+        alias: [
+          {
+            find: "ui",
+            replacement: resolve(__dirname, "../../../packages/ui/"),
+          },
+        ],
+      },
+    };
+  },
+
+  docs: {
+    autodocs: true,
+  },
+};
+
+export default config;

apps/docs/.storybook/preview.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import {Unstyled} from '@storybook/blocks';
 
-import {Button, Dropzone, Code} from '../stories/components';
+import {Button, Dropzone, Code, Item} from '../stories/components';
 
 // Register web components
 customElements.define('button-component', Button);
 customElements.define('dropzone-component', Dropzone);
+customElements.define('item-component', Item);
 
 const preview = {
   parameters: {

apps/docs/package.json

@@ -1,47 +1,42 @@
 {
-  "name": "@dnd-kit/docs",
+  "name": "@dnd-kit/storybook",
   "version": "0.0.0",
+  "type": "module",
   "private": true,
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "build:storybook": "storybook build",
+    "build": "storybook build --docs",
     "preview-storybook": "serve storybook-static",
-    "clean": "rm -rf .turbo && rm -rf node_modules"
+    "clean": "rm -rf .turbo && rm -rf node_modules",
+    "lint": "eslint ./stories/*.stories.tsx --max-warnings 0"
   },
   "dependencies": {
     "@dnd-kit/abstract": "*",
     "@dnd-kit/dom": "*",
     "@dnd-kit/react": "*",
-    "@dnd-kit/state-management": "*",
+    "@dnd-kit/helpers": "*",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
-    "prismjs": "^1.29.0",
     "clipboard": "^2.0.11",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "use-pan-and-zoom": "^0.6.5",
     "react-tiny-virtual-list": "^2.2.0",
     "react-window": "1.8.9"
   },
   "devDependencies": {
-    "@dnd-kit/abstract": "*",
-    "@dnd-kit/config-eslint": "*",
-    "@dnd-kit/dom": "*",
-    "@dnd-kit/react": "*",
-    "@dnd-kit/state-management": "*",
-    "@storybook/addon-actions": "^7.3.2",
-    "@storybook/addon-docs": "^7.3.2",
-    "@storybook/addon-essentials": "^7.3.2",
-    "@storybook/addon-links": "^7.3.2",
-    "@storybook/manager-api": "^7.3.2",
-    "@storybook/react": "^7.3.2",
-    "@storybook/react-vite": "^7.3.2",
-    "@storybook/theming": "^7.3.2",
-    "storybook-dark-mode": "^3.0.1",
-    "@vitejs/plugin-react": "^4.0.3",
-    "eslint-plugin-storybook": "^0.6.13",
-    "serve": "^13.0.2",
-    "storybook": "next",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.7"
+    "@dnd-kit/eslint-config": "*",
+    "@storybook/addon-actions": "^7.6.7",
+    "@storybook/addon-docs": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-vite": "^7.6.7",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.56.0",
+    "serve": "^14.2.1",
+    "storybook": "^7.6.7",
+    "storybook-dark-mode": "^3.0.3",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
   }
 }

apps/docs/stories/react/components/Item/Item.module.css → apps/docs/stories/components/Item/Item.css

@@ -23,7 +23,7 @@
 }
 
 .Item:focus-visible {
-  box-shadow: inset 0 0 0 3px #4c9ffe, var(--box-shadow);
+  box-shadow: inset 0 0 0 2px #4c9ffe, var(--box-shadow);
 }
 
 .Item[aria-hidden="true"] {
@@ -35,7 +35,7 @@
   background-color: #EEE;
 }
 
-.shadow:not([aria-hidden="true"]) {
+.Item[data-shadow="true"]:not([aria-hidden="true"]) {
   transform: scale(1.03);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(10px);
@@ -47,16 +47,16 @@
   background-color: rgba(255,255,255,0.98);
 }
 
-.withActions {
+.Item:has(button) {
   padding-right: 10px;
 }
 
-.Item:not(.withActions) {
+.Item:not(.Item:has(button)) {
   cursor: grab;
   touch-action: none;
 }
 
-.withBorder {
+.Item[data-accent-color] {
   border-left: 3px solid;
   border-color: var(--accent-color);
 }

apps/docs/stories/components/Item/Item.ts

@@ -0,0 +1,7 @@
+import './Item.css';
+
+export class Item extends HTMLElement {
+  connectedCallback() {
+    this.classList.add('Item');
+  }
+}

apps/docs/stories/components/Item/index.ts

@@ -0,0 +1 @@
+export {Item} from './Item';

apps/docs/stories/components/index.ts

@@ -1,3 +1,4 @@
 export {Code, Info, Preview} from './docs';
 export {Button} from './Button';
 export {Dropzone} from './Dropzone';
+export {Item} from './Item';

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

@@ -3,7 +3,7 @@ import type {PropsWithChildren} from 'react';
 import {CollisionPriority} from '@dnd-kit/abstract';
 import {DragDropProvider} from '@dnd-kit/react';
 import {useSortable} from '@dnd-kit/react/sortable';
-import {move} from '@dnd-kit/state-management';
+import {move} from '@dnd-kit/helpers';
 import {DragDropManager, defaultPreset} from '@dnd-kit/dom';
 import {Debug} from '@dnd-kit/dom/plugins/debug';
 import {supportsViewTransition} from '@dnd-kit/dom/utilities';

apps/docs/stories/react/Sortable/MultipleLists/docs/examples/QuickStart.jsx

@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import {DragDropProvider} from '@dnd-kit/react';
-import {move} from '@dnd-kit/state-management';
+import {move} from '@dnd-kit/helpers';
 
 import {Column} from './Column';
 import {Item} from './Item';

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

@@ -10,7 +10,7 @@ import type {SortableTransition} from '@dnd-kit/dom/sortable';
 import {DragDropProvider} from '@dnd-kit/react';
 import {useSortable} from '@dnd-kit/react/sortable';
 import {directionBiased} from '@dnd-kit/collision';
-import {move} from '@dnd-kit/state-management';
+import {move} from '@dnd-kit/helpers';
 import {Debug} from '@dnd-kit/dom/plugins/debug';
 
 import {Item, Handle} from '../components';

apps/docs/stories/react/Sortable/Tree/types.ts

@@ -0,0 +1,11 @@
+export interface Item {
+  id: string;
+  children: Item[];
+  collapsed?: boolean;
+}
+
+export interface FlattenedItem extends Item {
+  parentId: string | null;
+  depth: number;
+  index: number;
+}

apps/docs/stories/react/Sortable/Tree/utilities.ts

@@ -0,0 +1,99 @@
+import {UniqueIdentifier} from '@dnd-kit/abstract';
+import type {Item, FlattenedItem} from './types';
+
+export function flattenTree(
+  items: Item[],
+  parentId: string | null = null,
+  depth = 0
+): FlattenedItem[] {
+  return items.reduce<FlattenedItem[]>((acc, item, index) => {
+    return [
+      ...acc,
+      {...item, parentId, depth, index},
+      ...flattenTree(item.children, item.id, depth + 1),
+    ];
+  }, []);
+}
+
+export function buildTree(flattenedItems: FlattenedItem[]): Item[] {
+  const root: Item = {id: 'root', children: []};
+  const nodes: Record<string, Item> = {[root.id]: root};
+  const items = flattenedItems.map((item) => ({...item, children: []}));
+
+  for (const item of items) {
+    const {id, children} = item;
+    const parentId = item.parentId ?? root.id;
+    const parent = nodes[parentId] ?? items.find(({id}) => id === parentId);
+
+    nodes[id] = {id, children};
+    parent.children.push(item);
+  }
+
+  return root.children;
+}
+
+export function getDragDepth(offset: number, indentationWidth: number) {
+  return Math.round(offset / indentationWidth);
+}
+
+export function getProjection(
+  items: FlattenedItem[],
+  targetId: UniqueIdentifier,
+  projectedDepth: number
+) {
+  const targetItemIndex = items.findIndex(({id}) => id === targetId);
+  const previousItem = items[targetItemIndex - 1];
+  const nextItem = items[targetItemIndex + 1];
+  const maxDepth = getMaxDepth(previousItem);
+  const minDepth = getMinDepth(previousItem, nextItem);
+  let depth = projectedDepth;
+
+  if (projectedDepth >= maxDepth) {
+    depth = maxDepth;
+  } else if (projectedDepth < minDepth) {
+    depth = minDepth;
+  }
+
+  return {depth, maxDepth, minDepth, parentId: getParentId()};
+
+  function getParentId() {
+    if (depth === 0 || !previousItem) {
+      return null;
+    }
+
+    if (depth === previousItem.depth) {
+      return previousItem.parentId;
+    }
+
+    if (depth > previousItem.depth) {
+      return previousItem.id;
+    }
+
+    const newParent = items
+      .slice(0, targetItemIndex)
+      .reverse()
+      .find((item) => item.depth === depth)?.parentId;
+
+    return newParent ?? null;
+  }
+}
+
+function getMaxDepth(previousItem: FlattenedItem) {
+  if (previousItem) {
+    return previousItem.depth + 1;
+  }
+
+  return 0;
+}
+
+function getMinDepth(previousItem: FlattenedItem, nextItem: FlattenedItem) {
+  if (previousItem && nextItem) {
+    return Math.min(previousItem.depth, nextItem.depth);
+  }
+
+  if (nextItem) {
+    return nextItem.depth;
+  }
+
+  return 0;
+}

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

@@ -4,7 +4,7 @@ import {DragDropProvider} from '@dnd-kit/react';
 import {useSortable} from '@dnd-kit/react/sortable';
 import {defaultPreset} from '@dnd-kit/dom';
 import {Debug} from '@dnd-kit/dom/plugins/debug';
-import {move} from '@dnd-kit/state-management';
+import {move} from '@dnd-kit/helpers';
 import VirtualList from 'react-tiny-virtual-list';
 
 import {Item, Handle} from '../../components';

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

@@ -5,7 +5,7 @@ import {DragDropProvider} from '@dnd-kit/react';
 import {useSortable} from '@dnd-kit/react/sortable';
 import {defaultPreset} from '@dnd-kit/dom';
 import {Debug} from '@dnd-kit/dom/plugins/debug';
-import {move} from '@dnd-kit/state-management';
+import {move} from '@dnd-kit/helpers';
 import {useWindowVirtualizer} from '@tanstack/react-virtual';
 
 import {Item, Handle} from '../../components';

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

@@ -4,7 +4,7 @@ import {DragDropProvider} from '@dnd-kit/react';
 import {useSortable} from '@dnd-kit/react/sortable';
 import {defaultPreset} from '@dnd-kit/dom';
 import {Debug} from '@dnd-kit/dom/plugins/debug';
-import {move} from '@dnd-kit/state-management';
+import {move} from '@dnd-kit/helpers';
 import {FixedSizeList as List} from 'react-window';
 
 import {Item, Handle} from '../../components';
@@ -54,15 +54,17 @@ export function ReactWindowExample({debug}: Props) {
   );
 }
 
-function Row({
-  data,
-  index,
-  style,
-}: {
-  data: UniqueIdentifier[];
-  index: number;
-  style: React.CSSProperties;
-}) {
+function Row(
+  {
+    data,
+    index,
+    style,
+  }: {
+    data: UniqueIdentifier[];
+    index: number;
+    style: React.CSSProperties;
+  }
+) {
   return <Sortable id={data[index]} index={index} style={style} />;
 }
 
@@ -78,12 +80,6 @@ function Sortable({id, index, style}: SortableProps) {
     index,
   });
 
-  useEffect(() => {
-    return () => {
-      console.log('unmount', id);
-    };
-  }, [id]);
-
   return (
     <div
       ref={ref}