@heliux-org/design-system-core 0.0.406 → 0.0.407

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heliux-org/design-system-core",
-  "version": "0.0.406",
+  "version": "0.0.407",
   "description": "Official Heliux design system resources for application development in React.js",
   "main": "./dist/main.js",
   "types": "./dist/types/index.d.ts",

package/src/components/Tree/Tree.tsx

@@ -13,6 +13,7 @@ const FileTreeValueType = tuple("directory", "file");
 const directoryType = FileTreeValueType[0];
 
 export type TreeFile = {
+  id: number | string;
   type: (typeof FileTreeValueType)[number];
   name: string;
   extra?: string;
@@ -64,20 +65,33 @@ const Tree: React.FC<React.PropsWithChildren<TreeProps>> = ({
     }
   }, [value]);
 
-  const findFullPath = (nodes: TreeFile[], targetName: string, currentPath: string = ""): string | null => {
+  const findFullPathById = (nodes: TreeFile[], targetId: string | number, currentPath: string = ""): string | null => {
     for (const node of nodes) {
-      const nodePath = currentPath ? `${currentPath}/${node.name}` : node.name;
-      if (node.name === targetName) {
+      const nodePath = currentPath ? `${currentPath}/${node.id}` : `${node.id}`;
+      if (node.id === targetId) {
         return nodePath;
       }
       if (node.type === directoryType && node.files) {
-        const foundPath = findFullPath(node.files, targetName, nodePath);
+        const foundPath = findFullPathById(node.files, targetId, nodePath);
         if (foundPath) return foundPath;
       }
     }
     return null;
   };
 
+  const findNodeById = (nodes: TreeFile[], targetId: string | number): TreeFile | null => {
+    for (const node of nodes) {
+      if (node.id === targetId) {
+        return node;
+      }
+      if (node.type === directoryType && node.files) {
+        const foundNode = findNodeById(node.files, targetId);
+        if (foundNode) return foundNode;
+      }
+    }
+    return null;
+  };
+
   const isParentPath = (parentPath: string, childPath: string): boolean => {
     const parentParts = parentPath.split('/').filter(Boolean);
     const childParts = childPath.split('/').filter(Boolean);
@@ -88,23 +102,16 @@ const Tree: React.FC<React.PropsWithChildren<TreeProps>> = ({
   };
 
   const isChildOfSource = (sourcePath: string, targetPath: string): boolean => {
-    if (!treeData) return false;
-
-    const fullSourcePath = findFullPath(treeData, sourcePath.split('/').pop() || "") || sourcePath;
-    const fullTargetPath = findFullPath(treeData, targetPath.split('/').pop() || "") || targetPath;
-
-    return isParentPath(fullSourcePath, fullTargetPath);
+    return isParentPath(sourcePath, targetPath);
   };
 
-  const findAndRemoveNode = (nodes: TreeFile[], path: string): { node?: TreeFile; updatedTree: TreeFile[] } => {
+  const findAndRemoveNode = (nodes: TreeFile[], nodeId: string | number): { node?: TreeFile; updatedTree: TreeFile[] } => {
     for (let i = 0; i < nodes.length; i++) {
       const node = nodes[i];
-      const nodeName = path.split('/').pop() || "";
-
-      if (node.name === nodeName) {
+      if (node.id === nodeId) {
         return { node, updatedTree: [...nodes.slice(0, i), ...nodes.slice(i + 1)] };
       } else if (node.type === directoryType && node.files) {
-        const { node: foundNode, updatedTree: updatedFiles } = findAndRemoveNode(node.files, path);
+        const { node: foundNode, updatedTree: updatedFiles } = findAndRemoveNode(node.files, nodeId);
         if (foundNode) {
           nodes[i].files = updatedFiles;
           return { node: foundNode, updatedTree: nodes };
@@ -114,113 +121,68 @@ const Tree: React.FC<React.PropsWithChildren<TreeProps>> = ({
     return { updatedTree: nodes };
   };
 
-  const addNodeToTarget = (nodes: TreeFile[], targetPath: string, node: TreeFile): TreeFile[] => {
-    const pathParts = targetPath.split('/');
-    const targetName = pathParts.pop() || "";
-    const parentPath = pathParts.join('/');
-  
+  const addNodeToTarget = (nodes: TreeFile[], targetId: string | number, node: TreeFile): TreeFile[] => {
     return nodes.map((item) => {
-      const itemPath = parentPath ? `${parentPath}/${item.name}` : item.name;
-  
-      if (item.type === directoryType) {
-        if (itemPath === parentPath) {
-          return {
-            ...item,
-            files: [...(item.files || []), node]
-          };
-        }
-
-        if (item.name === targetName) {
-          return {
-            ...item,
-            files: [...(item.files || []), node]
-          };
-        }
-
-        if (item.files) {
-          return {
-            ...item,
-            files: addNodeToTarget(item.files, targetPath, node)
-          };
-        }
-      }
-      return item;
-    });
-  };
-
-  const findNodeByPath = (nodes: TreeFile[], path: string): TreeFile | null => {
-    const pathParts = path.split('/');
-    let currentNodes = nodes;
-    let currentNode: TreeFile | null = null;
-
-    for (const part of pathParts) {
-      currentNode = currentNodes.find(node => node.name === part) || null;
-      if (!currentNode) return null;
-      if (currentNode.files) {
-        currentNodes = currentNode.files;
+      if (item.id === targetId && item.type === directoryType) {
+        return {
+          ...item,
+          files: [...(item.files || []), node]
+        };
       }
-    }
-
-    return currentNode;
-  };
-
-  const buildFullPath = (nodes: TreeFile[], targetName: string, currentPath: string = ""): string => {
-    for (const node of nodes) {
-      const nodePath = currentPath ? `${currentPath}/${node.name}` : node.name;
       
-      if (node.name === targetName) {
-        return nodePath;
+      if (item.type === directoryType && item.files) {
+        return {
+          ...item,
+          files: addNodeToTarget(item.files, targetId, node)
+        };
       }
       
-      if (node.type === directoryType && node.files) {
-        const foundPath = buildFullPath(node.files, targetName, nodePath);
-        if (foundPath) return foundPath;
-      }
-    }
-    return targetName;
+      return item;
+    });
   };
 
-  const handleMove = (draggedPath: string, targetPath: string) => {
-    if (!treeData) return;
-    if (readOnly) return;
+  const handleMove = (draggedId: string | number, targetId: string | number) => {
+    if (!treeData || readOnly) return;
   
-    const draggedName = draggedPath.split('/').pop() || "";
-    const targetName = targetPath.split('/').pop() || "";
+    const draggedNode = findNodeById(treeData, draggedId);
+    const targetNode = findNodeById(treeData, targetId);
   
-    const fullSourcePath = buildFullPath(treeData, draggedName);
-    const fullTargetPath = buildFullPath(treeData, targetName);
+    if (!draggedNode || !targetNode) return;
   
-    if (isChildOfSource(fullSourcePath, fullTargetPath)) {
+    // Check if target is a child of source
+    const draggedPath = findFullPathById(treeData, draggedId) || "";
+    const targetPath = findFullPathById(treeData, targetId) || "";
+    
+    if (isChildOfSource(draggedPath, targetPath)) {
       return;
     }
   
-    const { node: draggedNode, updatedTree } = findAndRemoveNode(treeData, draggedPath);
+    const { node: removedNode, updatedTree } = findAndRemoveNode(treeData, draggedId);
   
-    if (draggedNode) {
-      const targetNode = findNodeByPath(treeData, targetPath);
-
-      let finalTargetPath = targetPath;
-
-      if (targetNode && targetNode.type !== directoryType) {
-        const pathParts = targetPath.split('/');
-        pathParts.pop();
-        finalTargetPath = pathParts.join('/');
+    if (removedNode) {
+      let finalTargetId = targetId;
+  
+      // If target is a file, get its parent's ID
+      if (targetNode.type !== directoryType) {
+        const parentPath = targetPath.split('/').slice(0, -1).join('/');
+        const parentNode = findNodeById(treeData, parentPath.split('/').pop() || "");
+        if (parentNode) {
+          finalTargetId = parentNode.id;
+        }
       }
-
-      const newTreeData = addNodeToTarget(updatedTree, finalTargetPath, draggedNode);
+  
+      const newTreeData = addNodeToTarget(updatedTree, finalTargetId, removedNode);
       setTreeData(newTreeData);
-      const newParentNode = findNodeByPath(newTreeData, finalTargetPath);
-      onMove(fullSourcePath, fullTargetPath, newParentNode || null, draggedNode);
+      
+      const newParentNode = findNodeById(newTreeData, finalTargetId);
+      onMove(draggedPath, targetPath, newParentNode || null, removedNode);
     }
   };
 
   const isImperative = Boolean(value && value.length > 0);
-  const onFileClick = (path: string) => {
+  const onFileClick = (path: string, node: TreeFile) => {
     if (onClick && treeData) {
-      const node = findNodeByPath(treeData, path);
-      if (node) {
-        onClick(path, node);
-      }
+      onClick(path, node);
     }
   };
 
@@ -238,7 +200,7 @@ const Tree: React.FC<React.PropsWithChildren<TreeProps>> = ({
 
   const makeChildren = (
     value: Array<TreeFile> = [],
-    onMove: (draggedPath: string, targetPath: string) => void,
+    onMove: (draggedId: string | number, targetId: string | number) => void,
     enableSorting: boolean,
     level: number = 0,
     parentPath: string = "",
@@ -252,15 +214,16 @@ const Tree: React.FC<React.PropsWithChildren<TreeProps>> = ({
         })
       : value;
   
-    return sortedValue.map((item, index) => {
-      const currentPath = parentPath ? `${parentPath}/${item.name}` : item.name;
+    return sortedValue.map((item) => {
+      const currentPath = parentPath ? `${parentPath}/${item.id}` : `${item.id}`;
       
       if (item.type === directoryType) {
         return (
           <TreeFolder
+            id={item.id}
             name={item.name}
             extra={item.extra}
-            key={`folder-${item.name}-${index}`}
+            key={`folder-${item.id}`}
             onMove={readOnly ? undefined : onMove}
             parentPath={parentPath}
             level={level}
@@ -272,9 +235,10 @@ const Tree: React.FC<React.PropsWithChildren<TreeProps>> = ({
       }
       return (
         <TreeFile
+          id={item.id}
           name={item.name}
           extra={item.extra}
-          key={`file-${item.name}-${index}`}
+          key={`file-${item.id}`}
           onMove={readOnly ? undefined : onMove}
           parentPath={parentPath}
           level={level}
@@ -302,4 +266,4 @@ const Tree: React.FC<React.PropsWithChildren<TreeProps>> = ({
 Tree.defaultProps = defaultProps;
 Tree.displayName = "Tree";
 
-export default Tree;
+export default Tree;

package/src/components/Tree/__stories__/Tree.stories.tsx

@@ -21,47 +21,67 @@ export const Overview = {
 
 const hierarchyData = [
   {
+      id: "1",
       type: "directory",
       name: "Heliux Inc",
       files: [
           {
+              id: "2",
               type: "directory",
               name: "Factory",
               files: [
                   {
-                  type: "directory",
-                  name: "Printing",
+                      id: "3",
+                      type: "directory",
+                      name: "Printing",
                   },
                   {
-                  type: "file",
-                  name: "Staging1",
+                      id: "4",
+                      type: "file",
+                      name: "Staging1",
                   },
                   {
-                    type: "file",
-                    name: "Staging2",
+                      id: "5",
+                      type: "file",
+                      name: "Staging2",
                   },
                   {
-                    type: "file",
-                    name: "Staging3",
-                    active: true,
+                      id: "6",
+                      type: "file",
+                      name: "Staging1",
                   },
                   {
-                  type: "directory",
-                  name: "Assembly",
-                  files:[
-                    {
+                      id: "7",
                       type: "file",
-                      name: "Staging4",
-                    },  
-                  ]
+                      name: "Staging3",
+                      active: true,
                   },
                   {
-                    type: "file",
-                    name: "Staging5",
+                      id: "8",
+                      type: "directory",
+                      name: "Assembly",
+                      files: [
+                          {
+                              id: "9",
+                              type: "file",
+                              name: "Staging4",
+                          },
+                          {
+                            id: "12",
+                            type: "file",
+                            name: "Staging1",
+                          },      
+                      ],
+                  },
+                  {
+                      id: "10",
+                      type: "file",
+                      name: "Staging5",
                   },
                   {
-                  type: "directory",
-                  name: "Finishing",
+                      id: "11",
+                      type: "directory",
+                      name: "Finishing",
                   },
               ],
           },

package/src/components/Tree/components/TreeFile/TreeFile.tsx

@@ -6,13 +6,14 @@ import Icon from "../../../Icon/Icon";
 import { useDrag, useDrop } from "react-dnd";
 
 interface Props {
+  id: number | string;
   name: string;
   extra?: string;
   parentPath?: string;
   level?: number;
   className?: string;
   active?: boolean;
-  onMove: (draggedItemPath: string, dropTargetPath: string) => void;
+  onMove?: (draggedId: string | number, targetId: string | number) => void;
 }
 
 const defaultProps = {
@@ -22,6 +23,7 @@ const defaultProps = {
 };
 
 const TreeFile: React.FC<Props> = ({
+  id,
   name,
   parentPath,
   level,
@@ -32,14 +34,14 @@ const TreeFile: React.FC<Props> = ({
   ...props
 }) => {
   const { onFileClick, childIconPath } = useTreeContext();
-  const currentPath = useMemo(() => makeChildPath(name, parentPath), [
-    name,
+  const currentPath = useMemo(() => makeChildPath(id.toString(), parentPath), [
+    id,
     parentPath,
   ]);
 
   const [{ isDragging }, dragRef] = useDrag({
     type: "TREE_ITEM",
-    item: { type: "file", path: currentPath },
+    item: { type: "file", id: id },
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
@@ -47,9 +49,9 @@ const TreeFile: React.FC<Props> = ({
 
   const [, dropRef] = useDrop({
     accept: "TREE_ITEM",
-    drop: (draggedItem: { path: string }) => {
-      if (draggedItem.path !== currentPath && onMove) {
-        onMove(draggedItem.path, currentPath);
+    drop: (draggedItem: { id: string | number }) => {
+      if (draggedItem.id !== id && onMove) {
+        onMove(draggedItem.id, id);
       }
     },
   });
@@ -59,9 +61,10 @@ const TreeFile: React.FC<Props> = ({
     if (onFileClick) {
       onFileClick(currentPath, {
         type: "file",
+        id,
         name,
         extra,
-        active
+        active,
       });
     }
   };

package/src/components/Tree/components/TreeFolder/TreeFolder.tsx

@@ -7,19 +7,19 @@ import {
   sortChildren,
   stopPropagation,
 } from "../../utils/treeHelp";
-import TreeFile from "../TreeFile/TreeFile";
 import TreeStatusIcon from "../TreeStatusIcon/TreeStatusIcon";
 import Expand from "../expand/expand";
 import Icon from "../../../Icon/Icon";
 
 interface Props {
+  id: number | string;
   name: string;
   extra?: string;
   parentPath?: string;
   level?: number;
   className?: string;
   active?: boolean;
-  onMove: (draggedItemPath: string, dropTargetPath: string) => void;
+  onMove?: (draggedId: string | number, targetId: string | number) => void;
 }
 
 const defaultProps = {
@@ -29,6 +29,7 @@ const defaultProps = {
 };
 
 const TreeFolder: React.FC<React.PropsWithChildren<Props>> = ({
+  id,
   name,
   children,
   parentPath,
@@ -54,13 +55,13 @@ const TreeFolder: React.FC<React.PropsWithChildren<Props>> = ({
   }, [initialExpand, alwaysExpanded]);
 
   const currentPath = useMemo(
-    () => makeChildPath(name, parentPath),
-    [name, parentPath]
+    () => makeChildPath(id.toString(), parentPath),
+    [id, parentPath]
   );
 
   const [{ isDragging }, dragRef] = useDrag({
     type: "TREE_ITEM",
-    item: { type: "folder", path: currentPath },
+    item: { type: "folder", id: id },
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
@@ -68,9 +69,9 @@ const TreeFolder: React.FC<React.PropsWithChildren<Props>> = ({
 
   const [{ isOver }, dropRef] = useDrop({
     accept: "TREE_ITEM",
-    drop: (draggedItem: { path: string }) => {
-      if (draggedItem.path !== currentPath && onMove) {
-        onMove(draggedItem.path, currentPath);
+    drop: (draggedItem: { id: string | number }) => {
+      if (draggedItem.id !== id && onMove) {
+        onMove(draggedItem.id, id);
       }
     },
     collect: (monitor) => ({
@@ -85,11 +86,12 @@ const TreeFolder: React.FC<React.PropsWithChildren<Props>> = ({
     if (onFileClick) {
       onFileClick(currentPath, {
         type: "directory",
+        id,
         name,
         extra,
         //@ts-ignore
         files: React.Children.toArray(children),
-        active
+        active,
       });
     }
   };
@@ -103,13 +105,13 @@ const TreeFolder: React.FC<React.PropsWithChildren<Props>> = ({
       className={`folder-container ${className} ${isDragging ? "dragging" : ""}`}
       {...props}
     >
-    <div
-      ref={(node) => dragRef(dropRef(node))}
-      className={`names ${active && "active"} ${isOver ? "drop-target" : ""}`}
-      data-level={parentLevel}
-      style={namesStyle}
-      onClick={clickHandler}
-    >
+      <div
+        ref={(node) => dragRef(dropRef(node))}
+        className={`names ${active && "active"} ${isOver ? "drop-target" : ""}`}
+        data-level={parentLevel}
+        style={namesStyle}
+        onClick={clickHandler}
+      >
         <span className="status">
           <TreeStatusIcon active={expanded} />
         </span>