@weser/dnd 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-present Robin Weser
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,22 @@
+# @weser/dnd
+
+<img alt="npm version" src="https://badge.fury.io/js/@weser/dnd.svg"> <img alt="npm downloads" src="https://img.shields.io/npm/dm/@weser/dnd.svg"> <a href="https://bundlephobia.com/result?p=@weser/dnd@latest"><img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@weser/dnd.svg"></a>
+
+## Installation
+
+```sh
+# npm
+npm i --save @weser/dnd
+# yarn
+yarn add @weser/dnd
+# pnpm
+pnpm add @weser/dnd
+```
+
+## Documentation
+
+## License
+
+@weser/dnd is licensed under the [MIT License](http://opensource.org/licenses/MIT).<br>
+Documentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).<br>
+Created with ♥ by [@robinweser](http://weser.io).

package/dist/DndContext.d.ts

@@ -0,0 +1,25 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Coords, ElementId, Data, Nullable } from './types.js';
+export type DndListeners = {
+    onDrop?: (active: ElementId, over: Nullable<ElementId>) => void;
+    onDragStart?: () => void;
+    onDragEnd?: () => void;
+    onDragMove?: () => void;
+    onDragOver?: (over: ElementId, id: ElementId) => void;
+};
+export type DndContext = {
+    activeId: Nullable<ElementId>;
+    setActiveId: Dispatch<SetStateAction<Nullable<ElementId>>>;
+    activeOver: Nullable<ElementId>;
+    setActiveOver: Dispatch<SetStateAction<Nullable<ElementId>>>;
+    origin: Nullable<Coords>;
+    setOrigin: Dispatch<SetStateAction<Nullable<Coords>>>;
+    delta: Nullable<Coords>;
+    setDelta: Dispatch<SetStateAction<Nullable<Coords>>>;
+    data: Nullable<Data>;
+    setData: Dispatch<SetStateAction<Nullable<Data>>>;
+    dropzones: Record<ElementId, any>;
+    setDropzones: Dispatch<SetStateAction<Record<ElementId, any>>>;
+} & DndListeners;
+declare const _default: import("react").Context<Nullable<DndContext>>;
+export default _default;

package/dist/DndContext.js

@@ -0,0 +1,3 @@
+'use client';
+import { createContext } from 'react';
+export default createContext(null);

package/dist/DndProvider.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+import { DndListeners } from './DndContext.js';
+type Props = DndListeners;
+export default function DndProvider({ children, onDrop, onDragStart, onDragEnd, onDragMove, onDragOver, }: PropsWithChildren<Props>): import("react").JSX.Element;
+export {};

package/dist/DndProvider.jsx

@@ -0,0 +1,31 @@
+'use client';
+import { useState } from 'react';
+import DndContext from './DndContext.js';
+export default function DndProvider({ children, onDrop, onDragStart, onDragEnd, onDragMove, onDragOver, }) {
+    const [activeId, setActiveId] = useState(null);
+    const [activeOver, setActiveOver] = useState(null);
+    const [origin, setOrigin] = useState(null);
+    const [delta, setDelta] = useState(null);
+    const [data, setData] = useState(null);
+    const [dropzones, setDropzones] = useState([]);
+    const context = {
+        activeId,
+        setActiveId,
+        activeOver,
+        setActiveOver,
+        origin,
+        setOrigin,
+        delta,
+        setDelta,
+        data,
+        setData,
+        dropzones,
+        setDropzones,
+        onDrop,
+        onDragStart,
+        onDragEnd,
+        onDragMove,
+        onDragOver,
+    };
+    return <DndContext.Provider value={context}>{children}</DndContext.Provider>;
+}

package/dist/LayerContext.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export type T_Layer = {
+    id: string;
+    element: Object;
+};
+type LayerContext = {
+    layers: Array<T_Layer>;
+    addLayer: (layer: T_Layer) => void;
+    removeLayer: (id: T_Layer['id']) => void;
+    hasLayer: (id: T_Layer['id']) => boolean;
+};
+declare const _default: import("react").Context<LayerContext | null>;
+export default _default;

package/dist/LayerContext.js

@@ -0,0 +1,3 @@
+'use client';
+import { createContext } from 'react';
+export default createContext(null);

package/dist/LayerContextProvider.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { T_Layer } from './LayerContext.js';
+type Props = {
+    onLayerAdded?: (layers: Array<T_Layer>) => void;
+    onLayerRemoved?: (layers: Array<T_Layer>) => void;
+};
+export default function LayerContextProvider({ children, onLayerAdded, onLayerRemoved, }: PropsWithChildren<Props>): import("react").JSX.Element;
+export {};

package/dist/LayerContextProvider.jsx

@@ -0,0 +1,36 @@
+'use client';
+import { useState } from 'react';
+import LayerContext from './LayerContext.js';
+export default function LayerContextProvider({ children, onLayerAdded, onLayerRemoved, }) {
+    const [layers, setLayers] = useState([]);
+    function addLayer(layer) {
+        setLayers((prevLayers) => {
+            const filteredLayers = prevLayers.filter((item) => item.id !== layer.id);
+            const newLayers = [...filteredLayers, layer];
+            if (onLayerAdded) {
+                onLayerAdded(newLayers);
+            }
+            return newLayers;
+        });
+    }
+    function removeLayer(id) {
+        setLayers((prevLayers) => {
+            const newLayers = prevLayers.filter((item) => item.id !== id);
+            if (onLayerRemoved) {
+                onLayerRemoved(newLayers);
+            }
+            return newLayers;
+        });
+    }
+    function hasLayer(id) {
+        return layers.find((item) => item.id === id) !== undefined;
+    }
+    return (<LayerContext.Provider value={{
+            addLayer,
+            removeLayer,
+            hasLayer,
+            layers,
+        }}>
+      {children}
+    </LayerContext.Provider>);
+}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { default as DndContext } from './DndContext.js';
+export { default as DndProvider } from './DndProvider.jsx';
+export { default as useDndContext } from './useDndContext.js';
+export { default as useDndState } from './useDndState.js';
+export { default as useDraggable } from './useDraggable.js';
+export { default as useDroppable } from './useDroppable.js';
+export * from './types.js';

package/dist/index.js

@@ -0,0 +1,7 @@
+export { default as DndContext } from './DndContext.js';
+export { default as DndProvider } from './DndProvider.jsx';
+export { default as useDndContext } from './useDndContext.js';
+export { default as useDndState } from './useDndState.js';
+export { default as useDraggable } from './useDraggable.js';
+export { default as useDroppable } from './useDroppable.js';
+export * from './types.js';

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+export type Nullable<T> = T | null;
+export type ElementId = string;
+export type Data = Record<string, any>;
+export type Coords = {
+    x: number;
+    y: number;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/useClientOnly.d.ts

@@ -0,0 +1 @@
+export default function useClientSide(): boolean;

package/dist/useClientOnly.js

@@ -0,0 +1,6 @@
+import { useEffect, useState } from 'react';
+export default function useClientSide() {
+    const [isClientSide, setClientSide] = useState(false);
+    useEffect(() => setClientSide(true), []);
+    return isClientSide;
+}

package/dist/useDndContext.d.ts

@@ -0,0 +1 @@
+export default function useDndContext(): import("./DndContext.js").DndContext;

package/dist/useDndContext.js

@@ -0,0 +1,10 @@
+'use client';
+import { useContext } from 'react';
+import DndContext from './DndContext.js';
+export default function useDndContext() {
+    const context = useContext(DndContext);
+    if (!context) {
+        throw new Error("You're using dnd context outside of its provider.");
+    }
+    return context;
+}

package/dist/useDndState.d.ts

@@ -0,0 +1,8 @@
+export default function useDndState(): {
+    isDragging: boolean;
+    active: import("./types.js").Nullable<string>;
+    over: import("./types.js").Nullable<string>;
+    origin: import("./types.js").Nullable<import("./types.js").Coords>;
+    delta: import("./types.js").Nullable<import("./types.js").Coords>;
+    data: import("./types.js").Nullable<import("./types.js").Data>;
+};

package/dist/useDndState.js

@@ -0,0 +1,15 @@
+'use client';
+import useDndContext from './useDndContext.js';
+// TODO: use memo to prevent unnecessary rerenders
+export default function useDndState() {
+    const { activeId, activeOver, origin, delta, data } = useDndContext();
+    const isDragging = activeId !== null;
+    return {
+        isDragging,
+        active: activeId,
+        over: activeOver,
+        origin,
+        delta,
+        data,
+    };
+}

package/dist/useDraggable.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { Data, ElementId } from './types.js';
+export default function useDraggable({ id, data, delay, disabled, }: {
+    id: ElementId;
+    data?: Data;
+    delay?: number;
+    disabled?: boolean;
+}): {
+    isDragging: boolean;
+    attributes: {};
+    listeners: {};
+    transform: {
+        top: number;
+        left: number;
+    };
+    ref: import("react").RefObject<HTMLElement>;
+};

package/dist/useDraggable.js

@@ -0,0 +1,109 @@
+import { useEffect, useRef } from 'react';
+import useDndContext from './useDndContext.js';
+export default function useDraggable({ id, data = {}, delay = 0, disabled = false, }) {
+    const { delta, origin, dropzones, activeId, activeOver, setActiveId, setActiveOver, setOrigin, setDelta, setData, onDrop, onDragStart, onDragEnd, onDragOver, onDragMove, } = useDndContext();
+    const delayRef = useRef(null);
+    const isDragging = activeId === id;
+    const transform = {
+        top: origin && delta ? origin.y + delta.y : 0,
+        left: origin && delta ? origin.x + delta.x : 0,
+    };
+    const ref = useRef(null);
+    const attributes = {};
+    function onPointerDown(e) {
+        setOrigin({
+            x: e.pageX,
+            y: e.pageY,
+        });
+        delayRef.current = window.setTimeout(() => {
+            setData(data);
+            setActiveId(id);
+            setDelta({
+                x: 0,
+                y: 0,
+            });
+            if (onDragStart) {
+                onDragStart();
+            }
+            delayRef.current = -1;
+        }, delay);
+    }
+    function onClickCapture(e) {
+        if (delayRef.current === -1) {
+            e.stopPropagation();
+        }
+    }
+    const listeners = {
+        // TODO: add touch events
+        onPointerDown,
+        onClickCapture,
+    };
+    useEffect(() => {
+        function onPointerUp(e) {
+            if (delayRef.current !== null) {
+                clearTimeout(delayRef.current);
+                delayRef.current = null;
+            }
+            else {
+                e.stopPropagation();
+            }
+            if (onDrop && activeId) {
+                onDrop(activeId, activeOver);
+            }
+            if (onDragEnd) {
+                onDragEnd();
+            }
+            setOrigin(null);
+            setActiveId(null);
+            setActiveOver(null);
+            setDelta(null);
+            setData(null);
+        }
+        document.addEventListener('pointerup', onPointerUp);
+        return () => document.removeEventListener('pointerup', onPointerUp);
+    }, [onDrop, activeId, activeOver, data]);
+    useEffect(() => {
+        // TODO: implement auto-scroll
+        function onPointerMove(e) {
+            if (origin) {
+                setDelta({
+                    x: e.pageX - origin.x,
+                    y: e.pageY - origin.y,
+                });
+                if (activeId === id) {
+                    if (onDragMove) {
+                        onDragMove();
+                    }
+                    if (ref.current) {
+                        for (const id in dropzones) {
+                            const target = dropzones[id];
+                            // TODO: cache bounding client rect
+                            // TODO: update on resize / scroll
+                            const rect = target.getBoundingClientRect();
+                            const collidesX = e.clientX >= rect.left && e.clientX <= rect.right;
+                            const collidesY = e.clientY >= rect.top && e.clientY <= rect.bottom;
+                            // TODO: more collision algorithms
+                            if (collidesX && collidesY) {
+                                if (onDragOver && id !== activeOver) {
+                                    onDragOver(activeId, id);
+                                }
+                                setActiveOver(id);
+                                return;
+                            }
+                        }
+                    }
+                    setActiveOver(null);
+                }
+            }
+        }
+        document.addEventListener('pointermove', onPointerMove);
+        return () => document.removeEventListener('pointermove', onPointerMove);
+    }, [origin, dropzones, ref, activeId, activeOver]);
+    return {
+        isDragging,
+        attributes,
+        listeners: disabled ? {} : listeners,
+        transform,
+        ref,
+    };
+}

package/dist/useDroppable.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ElementId } from './types';
+export default function useDroppable({ id, disabled, }: {
+    id: ElementId;
+    disabled?: boolean;
+}): {
+    ref: import("react").RefObject<HTMLElement>;
+    isOver: boolean;
+};

package/dist/useDroppable.js

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+import useDndContext from './useDndContext';
+function objectFilter(obj, filter) {
+    const filteredObj = {};
+    for (const key in obj) {
+        const value = obj[key];
+        if (filter(value, key, obj)) {
+            filteredObj[key] = value;
+        }
+    }
+    return filteredObj;
+}
+export default function useDroppable({ id, disabled = false, }) {
+    const { activeOver, setDropzones } = useDndContext();
+    const ref = useRef(null);
+    const isOver = activeOver === id;
+    useEffect(() => {
+        if (ref.current) {
+            if (disabled) {
+                setDropzones((dropzones) => objectFilter(dropzones, (_, key) => key !== id));
+            }
+            else {
+                setDropzones((dropzones) => ({
+                    ...dropzones,
+                    [id]: ref.current,
+                }));
+            }
+        }
+    }, [ref, disabled]);
+    return {
+        ref,
+        isOver,
+    };
+}

package/dist/useLayer.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export default function useLayer(visible: boolean): [RefObject<HTMLElement>, boolean];

package/dist/useLayer.js

@@ -0,0 +1,20 @@
+'use client';
+import { useEffect, useId, useRef } from 'react';
+import useLayerContext from './useLayerContext.js';
+export default function useLayer(visible) {
+    const id = useId();
+    const ref = useRef(null);
+    const { layers, addLayer, removeLayer, hasLayer } = useLayerContext();
+    useEffect(() => {
+        if (visible) {
+            addLayer({ id, element: ref });
+        }
+        else {
+            if (hasLayer(id)) {
+                removeLayer(id);
+            }
+        }
+    }, [visible]);
+    const active = layers[layers.length - 1]?.id === id;
+    return [ref, active];
+}

package/dist/useLayerContext.d.ts

@@ -0,0 +1,6 @@
+export default function useLayerContext(): {
+    layers: import("./LayerContext.js").T_Layer[];
+    addLayer: (layer: import("./LayerContext.js").T_Layer) => void;
+    removeLayer: (id: string) => void;
+    hasLayer: (id: string) => boolean;
+};

package/dist/useLayerContext.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import LayerContext from './LayerContext.js';
+export default function useLayerContext() {
+    const context = useContext(LayerContext);
+    if (!context) {
+        throw new Error("You're using layer context outside of its provider.");
+    }
+    return context;
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@weser/dnd",
+  "version": "0.0.1",
+  "description": "React library for low-level drag'n'drop implementations",
+  "author": "Robin Weser <robin@weser.io>",
+  "license": "MIT",
+  "homepage": "https://github.com/robinweser/weser.git",
+  "repository": "https://github.com/robinweser/weser.git",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist/**"
+  ],
+  "browserslist": [
+    "IE >= 11",
+    "Firefox >= 60",
+    "Safari >= 11.1",
+    "Chrome >= 66",
+    "ChromeAndroid >= 66",
+    "iOS >= 11.3",
+    "Edge >= 15"
+  ],
+  "scripts": {
+    "setup": "pnpm build",
+    "clean": "rimraf dist",
+    "build": "tsc -b",
+    "dev": "pnpm build -w",
+    "test": "echo 1"
+  },
+  "keywords": [
+    "react",
+    "react-hook",
+    "react hooks",
+    "hooks",
+    "utils",
+    "dnd",
+    "dragdrop",
+    "drag'n'drop"
+  ],
+  "peerDependencies": {
+    "react": ">16.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "ava": "^6.1.3",
+    "react": "canary",
+    "rimraf": "^3.0.2",
+    "typescript": "^5.4.5"
+  },
+  "gitHead": "f8cd929768ab80c7c441f66770df2a95c33318a7"
+}