sample-ui-component-library 0.0.11-dev → 0.0.13-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.11-dev",
+  "version": "0.0.13-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/Editor/Tabs/Tabs.jsx

@@ -34,7 +34,7 @@ export const Tabs = () => {
         const list = [];
         tabs.forEach((tab, index) => {
             list.push(<Gutter key={tab.uid + "-gutter"} id={tabGroupId + "-" + index} index={index} parentId={tabGroupId} />);
-            list.push(<Tab key={tab.uid} id={tab.uid} parentId={tabGroupId} node={tab} />);
+            list.push(<Tab key={tab.uid} id={"tab-" + tabGroupId + "-" + tab.uid} parentId={tabGroupId} node={tab} />);
         });
         list.push(<Gutter key="last-gutter" id={tabGroupId + "-" + tabs.length} index={tabs.length} parentId={tabGroupId} />);
         setTabsList(list);

package/src/components/FileBrowser/FileBrowser.jsx

@@ -10,7 +10,6 @@ import {
 import "./FileBrowser.scss";
 
 import { Tree } from "./Tree/Tree";
-import { TreeNodePreview } from "./TreeNode/TreeNode";
 
 import { FileBrowserContext } from "./FileBrowserContext";
 
@@ -37,25 +36,14 @@ export const FileBrowser = forwardRef(({onSelectFile}, ref) => {
     const selectNode = useCallback((node) => {
         dispatch({ type: "SELECT_NODE", payload: node });
     }, []);
-    
-    const getPreviewElement = useCallback((tabId) => {
-        // Get the preview element for a tab by its id for use in drag-and-drop operations.
-        const tab = state.flattenedTree.find(t => t.uid === tabId);
-        if (!tab) {
-            console.error(`getPreviewElement: tab with id ${tabId} not found.`);
-            return null;
-        }
-        return <TreeNodePreview node={tab} />;
-    }, [state]);
 
     const api = useMemo(() => {
         return {
             state,
             addFileTree,
-            selectNode,
-            getPreviewElement
+            selectNode
         };
-    }, [state, addFileTree, selectNode, getPreviewElement]);
+    }, [state, addFileTree, selectNode]);
 
     useImperativeHandle(ref, () => api, [api]);
 

package/src/components/FileBrowser/FileBrowserReducer.js

@@ -4,6 +4,9 @@ import {
     flattenTree,
 } from "./helper";
 
+//TODO: I should set a unique id for each reducer state and use it
+// for all the ids of the components to make them unique. I could
+// also manually set the ID like I do in the editor reducer.
 export const initialState = {
     tree: {},
     flattenedTree: {},

package/src/components/FileBrowser/Tree/Tree.jsx

@@ -1,20 +1,12 @@
 import {
     useEffect,
-    useState,
-    useRef
+    useState
 } from "react";
 
 import { TreeNode } from "../TreeNode/TreeNode";
 
 import { useFileBrowser } from "../FileBrowser";
 
-import {
-    setDefaultCollapsed,
-    collapseTree,
-    selectNode,
-    flattenTree,
-} from "../helper";
-
 import "./Tree.scss";
 
 /**
@@ -40,7 +32,7 @@ export const Tree = ({}) => {
                 <TreeNode
                     key={node.uid}
                     node={node}
-                    id={node.name}
+                    id={"tree-node-" + node.uid}
                 />,
             );
         });

package/src/components/FileBrowser/TreeNode/TreeNode.jsx

@@ -1,10 +1,7 @@
 import { FileCode, ChevronRight, ChevronDown, Braces, FiletypeScss, FiletypeJs, FiletypePy } from "react-bootstrap-icons";
 import PropTypes from 'prop-types';
 import {
-    DndContext,
-    DragOverlay,
-    useDraggable,
-    useDroppable,
+    useDraggable
 } from "@dnd-kit/core";
 
 import { useFileBrowser } from "../FileBrowser";
@@ -24,7 +21,7 @@ export const TreeNode = ({ id, node }) => {
             data: {
                 type: "FileTreeNode",
                 node: node,
-                preview: <TreeNodePreview node={node}/ >
+                preview: <TreeNodePreview node={node} />
             }
          }
     );