Align files and folders, install library for drag and drop

libs/remix-ui/file-explorer/src/lib/file-explorer.tsx

@@ -401,7 +401,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
   const renderFiles = (file, index) => {
     if (file.isDirectory) {
       return (
-        <TreeViewItem id={`treeViewItem${file.path}`} iconX='px-3 far fa-folder' iconY='px-3 far fa-folder-open' key={index} label={label(file)} onClick={() => { resolveDirectory(file.path) }}>
+        <TreeViewItem id={`treeViewItem${file.path}`} iconX='pr-3 far fa-folder' iconY='pr-3 far fa-folder-open' key={index} label={label(file)} onClick={() => { resolveDirectory(file.path) }}>
           {
             file.child ? <TreeView id={`treeView${file.path}`} key={index}>{
               file.child.map((file, index) => {
@@ -419,6 +419,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
           key={index}
           label={label(file)}
           onClick={() => { state.fileManager.open(file.path) }}
+          icon='fa fa-file'
         />
       )
     }

libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx

@@ -4,7 +4,7 @@ import { TreeViewItemProps } from '../../types'
 import './tree-view-item.css'
 
 export const TreeViewItem = (props: TreeViewItemProps) => {
-  const { id, children, label, expand, iconX = 'fas fa-caret-right', iconY = 'fas fa-caret-down', icon = 'fa fa-file', ...otherProps } = props
+  const { id, children, label, expand, iconX = 'fas fa-caret-right', iconY = 'fas fa-caret-down', icon, ...otherProps } = props
   const [isExpanded, setIsExpanded] = useState(false)
 
   useEffect(() => {
@@ -14,7 +14,7 @@ export const TreeViewItem = (props: TreeViewItemProps) => {
   return (
     <li key={`treeViewLi${id}`} data-id={`treeViewLi${id}`} className='li_tv' {...otherProps}>
       <div key={`treeViewDiv${id}`} data-id={`treeViewDiv${id}`} className='d-flex flex-row align-items-center' onClick={() => setIsExpanded(!isExpanded)}>
-        { children ? <div className={isExpanded ? `px-1 ${iconY} caret caret_tv` : `px-1 ${iconX} caret caret_tv`} style={{ visibility: children ? 'visible' : 'hidden' }}></div> : <div className={`px-3 ${icon} caret caret_tv`}></div> }
+        { children ? <div className={isExpanded ? `px-1 ${iconY} caret caret_tv` : `px-1 ${iconX} caret caret_tv`} style={{ visibility: children ? 'visible' : 'hidden' }}></div> : icon ? <div className={`pr-3 pl-1 ${icon} caret caret_tv`}></div> : null }
         <span className='w-100 pl-1'>
           { label }
         </span>

package-lock.json

@@ -28220,7 +28220,6 @@
         },
         "dezalgo": {
           "version": "1.0.3",
-          "resolved": false,
           "integrity": "sha1-f3Qt4Gb8dIvI24IFad3c5Jvw1FY=",
           "requires": {
             "asap": "^2.0.0",
@@ -28849,7 +28848,6 @@
         },
         "normalize-git-url": {
           "version": "3.0.2",
-          "resolved": false,
           "integrity": "sha1-jl8Uvgva7bc+ByADEKpBbCc1D8Q="
         },
         "normalize-package-data": {
@@ -28887,7 +28885,6 @@
         },
         "npm-install-checks": {
           "version": "3.0.0",
-          "resolved": false,
           "integrity": "sha1-1K7N/VGlPjcjt7L5Oy7ijjB7wNc=",
           "requires": {
             "semver": "^2.3.0 || 3.x || 4 || 5"
@@ -29234,7 +29231,6 @@
         },
         "realize-package-specifier": {
           "version": "3.0.3",
-          "resolved": false,
           "integrity": "sha1-0N74gpUrjeP2frpekRmWYScfQfQ=",
           "requires": {
             "dezalgo": "^1.0.1",
@@ -29771,7 +29767,6 @@
           "dependencies": {
             "unique-slug": {
               "version": "2.0.0",
-              "resolved": false,
               "integrity": "sha1-22Z258fMBimHj/GWCXx4hVrp9Ks=",
               "requires": {
                 "imurmurhash": "^0.1.4"
@@ -35591,6 +35586,15 @@
         "scheduler": "^0.19.1"
       }
     },
+    "react-draggable": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.3.tgz",
+      "integrity": "sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.6.0"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -155,11 +155,12 @@
     "react": "16.13.1",
     "react-bootstrap": "^1.3.0",
     "react-dom": "16.13.1",
+    "react-draggable": "^4.4.3",
     "signale": "^1.4.0",
     "time-stamp": "^2.2.0",
     "winston": "^3.3.3",
     "ws": "^7.3.0"
-  },
+  }, 
   "devDependencies": {
     "@babel/core": "^7.4.5",
     "@babel/plugin-transform-modules-amd": "^7.10.4",