sample-ui-component-library 0.0.28-dev → 0.0.30-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.28-dev",
+  "version": "0.0.30-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/EditorReducer.js

@@ -1,7 +1,8 @@
 export const initialState = {
-  tabs: [],
-  activeTab: null,
-  parentTabGroupId: null
+    uid: crypto.randomUUID(),
+    tabs: [],
+    activeTab: null,
+    parentTabGroupId: null
 };
 
 export const editorReducer = (state, action) => {

package/src/components/Editor/MonacoInstance/MonacoInstance.jsx

@@ -48,10 +48,9 @@ export const MonacoInstance = ({ }) => {
 
     // Editor options for Monaco Editor.
     const editorOptions = {
-        scrollBeyondLastLine: false,
         fontSize: "13px",
         minimap: {
-            enabled: true
+            enabled: false
         },
         padding: {
             top: 10

package/src/components/Editor/Tabs/Tabs.jsx

@@ -19,10 +19,10 @@ export const Tabs = () => {
     const [tabsList, setTabsList] = useState();
 
     useEffect(() => {
-        if (state.tabs?.length >= 0 && state.parentTabGroupId != null) {
-            drawTabs(state.tabs, state.parentTabGroupId);
+        if (state.tabs?.length >= 0) {
+            drawTabs(state.tabs, state.uid);
         }
-    }, [state.tabs, state.parentTabGroupId]);
+    }, [state.tabs, state.uid]);
 
     /**
      * Draw the tabs provided in the tabs info. This includes the gutters

package/src/components/FileBrowser/FileBrowserReducer.js

@@ -1,11 +1,9 @@
 import { setDefaultCollapsed, collapseTree, 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 = {
+    uid: crypto.randomUUID(),
     tree: {},
-    flattenedTree: {},
+    flattenedTree: [],
     selectedNode: null,
     collapsedTree: [],
 };
@@ -13,7 +11,7 @@ export const initialState = {
 export const fileBrowserReducer = (state, action) => {
     switch (action.type) {
         case "ADD_FILE_TREE": {
-            let flattenedTree = setDefaultCollapsed(flattenTree(action.payload));
+            let flattenedTree = setDefaultCollapsed(flattenTree([...action.payload]));
             const collapsedTree = collapseTree(flattenedTree);
             return {
                 ...state,
@@ -48,5 +46,9 @@ export const fileBrowserReducer = (state, action) => {
         case "RESET_STATE": {
             return initialState;
         }
+
+        default:{
+            return state;
+        }
     }
 };

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

@@ -17,20 +17,19 @@ export const Tree = ({}) => {
     const {state} = useFileBrowser();
 
     useEffect(() => {
-        if(state.collapsedTree && state.collapsedTree.length > 0) {
-            drawTree(state.collapsedTree);
-        }
+        drawTree(state.collapsedTree ?? []);
     }, [state.collapsedTree]);
 
     /**
      * Draws the tree given the nodes and the collapsed state of each node.
      */
-    const drawTree = (collapsedTree) => {
+    const drawTree = (collapsedTree, parentId) => {
         const rows = [];
         collapsedTree.forEach((node) => {
             rows.push(
                 <TreeNode
-                    key={node.uid}
+                    key={parentId + "-" + node.uid}
+                    parentId={parentId}
                     node={node}
                     id={"tree-node-" + node.uid}
                 />,

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

@@ -15,12 +15,13 @@ import { useCallback } from "react";
 /**
  * Renders a single node in the file tree.
  */
-export const TreeNode = ({ id, node }) => {
+export const TreeNode = ({ id, parentId, node }) => {
     const { attributes, listeners, setNodeRef, transform } = useDraggable(
         { 
             id,
             data: {
                 type: "FileTreeNode",
+                parentId: parentId,
                 node: node,
                 preview: <TreeNodePreview node={node} />
             }

package/src/stories/FileBrowser.stories.js

@@ -49,9 +49,6 @@ const Template = (args) => {
 
     useLayoutEffect(() => {
         fileBrowserRef.current.addFileTree(args.tree);
-        setTimeout(() => {
-            fileBrowserRef.current.selectNode("dir-f6459410-1634-4dbc-8d76-35896822158d");
-        }, 3000);
     }, []);
 
 
@@ -82,7 +79,6 @@ const Template = (args) => {
     const onDragStart = (event) => {
         console.log("Drag Started");
         console.log(event.active.data);
-        const dragPreview = fileBrowserRef.current.getPreviewElement(event.active.data.current.node.uid);
         setDragPreviewLabel(event.active.data.current.preview);
         setDragging(true);
     }