sample-ui-component-library 0.0.4-dev → 0.0.5-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.4-dev",
+  "version": "0.0.5-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",

package/src/components/FileBrowser/FileBrowser.jsx

@@ -5,6 +5,12 @@ import { setDefaultCollapsed, collapseTree, selectNode, flattenTree } from "./he
 
 import { FileCode, ChevronRight, ChevronDown, Braces, FiletypeScss, FiletypeJs, FiletypePy} from "react-bootstrap-icons";
 import PropTypes from 'prop-types';
+import {
+    DndContext,
+    DragOverlay,
+    useDraggable,
+    useDroppable,
+} from "@dnd-kit/core";
 
 const INDENT_WIDTH = 20;
 const SELECTED_FILE_COLOR = "#00426b";
@@ -27,7 +33,8 @@ function useEvent(fn) {
 /**
  * Renders a single node in the file tree.
  */
-const TreeNode = ({node, onRowClick}) => {
+const TreeNode = ({id, node, onRowClick}) => {
+    const { attributes, listeners, setNodeRef, transform } = useDraggable({id});
     /**
      * Gets the appropriate icon for the node based on its type and collapsed state.
      * @returns <JSX>
@@ -72,7 +79,7 @@ const TreeNode = ({node, onRowClick}) => {
     }
 
     return (
-        <div className="file-node-row" style={getRowStyle()} onClick={() => onRowClick(node)}>
+        <div className="file-node-row" ref={setNodeRef} {...listeners} {...attributes} style={getRowStyle()} onClick={() => onRowClick(node)}>
             <div className="indent" style={{ width: node.level * INDENT_WIDTH + "px"}} />
             {
                 node.type === "folder" ? 
@@ -115,7 +122,7 @@ export const FileBrowser = ({tree, onNodeSelect}) => {
         const nodes = collapseTree(treeRef.current);
         const rows = [];
         nodes.forEach((node) => {
-            rows.push(<TreeNode key={node.id} node={node} onRowClick={handleFileClick}/>);
+            rows.push(<TreeNode key={node.id} node={node} id={node.name} onRowClick={handleFileClick}/>);
         });
         setNodes(rows);
     }

package/src/stories/FileBrowser.stories.js

@@ -2,6 +2,15 @@ import { useEffect } from "react";
 import { FileBrowser } from "../components/FileBrowser";
 import { useArgs } from "@storybook/preview-api";
 import { action } from "@storybook/addon-actions";
+import {
+    DndContext,
+    DragOverlay,
+    useDraggable,
+    useDroppable,
+    PointerSensor,
+    useSensor,
+    useSensors
+} from "@dnd-kit/core";
 
 import FileTree1 from "./data/FileBrowser/Tree1.json"
 import FileTree2 from "./data/FileBrowser/Tree2.json"
@@ -14,6 +23,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();
@@ -26,12 +67,50 @@ const Template = (args) => {
         updateArgs({onNodeSelect : onNodeSelect});
     }, []);
 
+    /**
+     * 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");
+    }
+
+    const sensors = useSensors(
+        useSensor(PointerSensor, {
+            activationConstraint: {
+                distance: 8
+            }
+        })
+    );
+
     return (
-        <div className="viewerStoryWrapper">
-            <div className="file-browser">
-                <FileBrowser {...args} />
+        <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={handleDragEnd}>
+            <div className="viewerStoryWrapper">
+                <div className="file-browser">
+                    <FileBrowser {...args} />
+                </div>
             </div>
-        </div>
+            <DragOverlay modifiers={[offsetOverlay]} dropAnimation={null}>
+                <DragPreview label={"preview"}/>
+            </DragOverlay>
+        </DndContext>
     )
 }