sample-ui-component-library 0.0.2-dev → 0.0.3-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.2-dev",
+  "version": "0.0.3-dev",
   "description": "A library which contains sample UI elements that can be used for populating layouts.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -27,6 +27,7 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@chromatic-com/storybook": "^3.2.6",
+    "@dnd-kit/core": "^6.3.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-json": "^6.1.0",
@@ -63,7 +64,6 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@dnd-kit/core": "^6.3.1",
     "@monaco-editor/react": "^4.7.0",
     "@xyflow/react": "^12.6.0",
     "bootstrap": "^5.3.4",

package/src/stories/Editor.stories.js

@@ -2,6 +2,12 @@ import { useEffect } from "react";
 import { Editor } from "../components/Editor";
 import { useArgs } from "@storybook/preview-api";
 import { action } from "@storybook/addon-actions";
+import {
+    DndContext,
+    DragOverlay,
+    useDraggable,
+    useDroppable,
+} from "@dnd-kit/core";
 
 import fileTrees from "./data/filetree.json";
 
@@ -13,6 +19,38 @@ export default {
     argTypes: {}
 };
 
+/**
+ * Preview for the div being dragged.
+ * @returns 
+ */
+function DragPreview({ label }) {
+    return (
+        <div
+        style={{
+            padding: "6px 12px",
+            background: "#2d2d2d",
+            color: "white",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+            opacity:0.3
+        }}
+        >
+        {label}
+        </div>
+    );
+}
+
+/**
+ * Offset for the drag overlay.
+ * @returns 
+ */
+const offsetOverlay = ({ transform }) => {
+  return {
+    ...transform,
+    x: transform.x + 20,
+    y: transform.y + 20
+  };
+};
+
 const Template = (args) => {
     const [, updateArgs] = useArgs();
 
@@ -24,10 +62,40 @@ const Template = (args) => {
         updateArgs({onFileSelect : onFileSelect});
     }, []);
 
+    /**
+     * Callback for when drag ends.
+     */
+    const handleDragEnd = (event) =>{
+        const { active, over } = event;
+        console.log("Drag Ended");
+        const rect = event.activatorEvent;
+
+        console.log(over );
+
+        if (over) {
+            console.log("Dragged item:", active.id);
+            console.log("Dropped on:", over.id);
+        } else {
+            console.log("Dropped outside any droppable");
+        }
+    }
+
+    /**
+     * Callback for when drag is started.
+     */
+    const onDragStart = (event) => {
+        console.log("Drag Started");
+    }
+
     return (
-        <div className="editorStoryWrapper">
-            <Editor {...args} />
-        </div>
+        <DndContext onDragStart={onDragStart} onDragEnd={handleDragEnd}>
+            <div className="editorStoryWrapper">
+                <Editor {...args} />
+            </div>
+            <DragOverlay modifiers={[offsetOverlay]} dropAnimation={null}>
+                <DragPreview label={"preview"}/>
+            </DragOverlay>
+        </DndContext>
     )
 }