ui-layout-manager-dev 0.0.11 → 0.0.13

package/src/stories/layouts/vsCode/sample1.json

@@ -10,33 +10,18 @@
                 {
                     "containerId": "header",
                     "type": "container",
-                    "size": {
-                        "initial": {
-                            "value": 25,
-                            "unit": "px",
-                            "type": "fixed"
-                        }
-                    }
+                    "size": { "initial": { "value": 25, "unit": "px", "type": "fixed" }}
                 },
                 {
                     "containerId": "mainBody",
                     "type": "container",
-                    "size": {
-                        "initial": {
-                            "type": "fill"
-                        }
-                    }
+                    "size": { "initial": { "type": "fill" }}
                 },
                 {
                     "containerId": "footer",
                     "type": "container",
-                    "size": {
-                        "initial": {
-                            "value": 25,
-                            "unit": "px",
-                            "type": "fixed"
-                        }
-                    }
+                    "size": { "initial": { "value": 25, "unit": "px", "type": "fixed" }},
+                    "collapse": { "value": 400, "condition": "lessThan", "relative": "parent" }
                 }
             ]
         },
@@ -46,196 +31,150 @@
         },
         "mainBody": {
             "id": "mainBody",
+            "background": "#3c3c3c",
             "type": "split",
             "orientation": "horizontal",
             "children": [
                 {
-                    "containerId": "leftMenu",
+                    "containerId": "sidebar",
                     "type": "container",
-                    "size": {
-                        "initial": {
-                            "value": 200,
-                            "unit": "px",
-                            "type": "fixed"
-                        },
-                        "min": {
-                            "value": 150,
-                            "unit": "px"
-                        },
-                        "max": {
-                            "value": 400,
-                            "unit": "px"
-                        }
-                    },
-                    "collapse": {
-                        "value": 500,
-                        "condition": "lessThan",
-                        "relative": "parent"
-                    }
+                    "size": { "initial": { "value": 50, "unit": "px", "type": "fixed" }},
+                    "collapse": { "value": 400, "condition": "lessThan", "relative": "parent" },
+                    "showHandlebar": true
                 },
                 {
-                    "type": "handleBar",
-                    "sibling1": "leftMenu",
-                    "sibling2": "treeView"
-                },
-                {
-                    "containerId": "treeView",
+                    "containerId": "contentContainer",
                     "type": "container",
-                    "size": {
-                        "initial": {
-                            "type": "fill"
-                        }
-                    }
-                },
-                {
-                    "type": "handleBar",
-                    "sibling1": "treeView",
-                    "sibling2": "rightMenu"
-                },
+                    "size": { "initial": { "type": "fill" }}
+                }
+            ]
+        },
+        "contentContainer": {
+            "id": "contentContainer",
+            "background": "#3c3c3c",
+            "type": "split",
+            "orientation": "vertical",
+            "children": [
                 {
-                    "containerId": "rightMenu",
+                    "containerId": "content",
                     "type": "container",
-                    "size": {
-                        "initial": {
-                            "value": 200,
-                            "unit": "px",
-                            "type": "fixed"
-                        },
-                        "min": {
-                            "value": 150,
-                            "unit": "px"
-                        },
-                        "max": {
-                            "value": 400,
-                            "unit": "px"
-                        }
-                    },
-                    "collapse": {
-                        "value": 700,
-                        "condition": "lessThan",
-                        "relative": "parent"
-                    }
+                    "size": { "initial": { "type": "fill" }}
                 }
             ]
         },
-        "footer": {
-            "id": "footer",
-            "background": "#007acc"
-        },
-        "leftMenu": {
-            "id": "leftMenu",
+        "content": {
+            "id": "content",
+            "background": "#007acc",
             "type": "split",
-            "orientation": "vertical",
+            "orientation": "horizontal",
             "children": [
                 {
-                    "containerId": "leftMenuContainer1",
+                    "containerId": "menuContainer",
                     "type": "container",
-                    "size": {
-                        "initial": {
-                            "value": 200,
-                            "unit": "px",
-                            "type": "fixed"
-                        }
-                    }
+                    "size": { 
+                        "initial": { "value": 400, "unit": "px", "type": "fixed" },
+                        "min": { "value": 200, "unit": "px"},
+                        "max": { "value": 500, "unit": "px"}
+                    },
+                    "collapse": { "value": 700, "condition": "lessThan", "relative": "parent" }
                 },
                 {
                     "type": "handleBar",
-                    "sibling1": "leftMenuContainer1",
-                    "sibling2": "leftMenuContainer2"
+                    "sibling1": "menuContainer",
+                    "sibling2": "editorContainer"
                 },
                 {
-                    "containerId": "leftMenuContainer2",
+                    "containerId": "editorContainer",
                     "type": "container",
-                    "size": {
-                        "initial": {
-                            "type": "fill"
-                        }
-                    }
+                    "size": { "initial": { "type": "fill" }}
                 },
                 {
                     "type": "handleBar",
-                    "sibling1": "leftMenuContainer2",
-                    "sibling2": "leftMenuContainer3"
+                    "sibling1": "editorContainer",
+                    "sibling2": "rightMenuContainer"
                 },
                 {
-                    "containerId": "leftMenuContainer3",
+                    "containerId": "rightMenuContainer",
                     "type": "container",
-                    "size": {
-                        "initial": {
-                            "type": "fill"
-                        }
-                    }
+                    "size": { 
+                        "initial": { "value": 200, "unit": "px", "type": "fixed" },
+                        "min": { "value": 100, "unit": "px"},
+                        "max": { "value": 300, "unit": "px"}
+                    },
+                    "collapse": { "value": 900, "condition": "lessThan", "relative": "parent" }
                 }
             ]
         },
-        "treeView": {
-            "id": "treeView",
-            "type": "container",
-            "background": "#252526"
+        "footer": {
+            "id": "footer",
+            "background": "#007acc"
         },
-        "rightMenu": {
-            "id": "rightMenu",
+        "sidebar": {
+            "id": "sidebar",
+            "background": "#333"
+        },
+        "menuContainer": {
+            "id": "menuContainer",
+            "background": "#252526",
             "type": "split",
             "orientation": "vertical",
             "children": [
                 {
-                    "containerId": "rightMenuContainer1",
+                    "containerId": "fileTabsContainer",
                     "type": "container",
-                    "size": {
-                        "initial": {
-                            "type": "fill"
-                        }
-                    }
+                    "size": { 
+                        "initial": { "value": 200, "unit": "px", "type": "fixed" }
+                    },
+                    "collapse": { "value": 500, "condition": "lessThan", "relative": "parent" }
                 },
                 {
-                    "type": "handleBar"
+                    "type": "handleBar",
+                    "sibling1": "fileTabsContainer",
+                    "sibling2": "stackContainer"
                 },
                 {
-                    "containerId": "rightMenuContainer2",
+                    "containerId": "stackContainer",
                     "type": "container",
-                    "size": {
-                        "initial": {
-                            "type": "fill"
-                        }
-                    }
+                    "size": { "initial": { "type": "fill" }}
                 },
                 {
-                    "type": "handleBar"
+                    "type": "handleBar",
+                    "sibling1": "stackContainer",
+                    "sibling2": "stackContainer2"
                 },
                 {
-                    "containerId": "rightMenuContainer3",
+                    "containerId": "stackContainer2",
                     "type": "container",
-                    "size": {
-                        "initial": {
-                            "type": "fill"
-                        }
-                    }
+                    "size": { 
+                        "initial": { "value": 200, "unit": "px", "type": "fixed" }
+                    },
+                    "collapse": { "value": 500, "condition": "lessThan", "relative": "parent" }
                 }
             ]
         },
-        "leftMenuContainer1": {
-            "id": "leftMenuContainer1",
-            "background": "#333"
-        },
-        "leftMenuContainer2": {
-            "id": "leftMenuContainer2",
-            "background": "#333"
+        "fileTabsContainer": {
+            "id": "fileTabsContainer",
+            "component": "FileBrowser",
+            "background": "#1e1e1e"
         },
-        "leftMenuContainer3": {
-            "id": "leftMenuContainer3",
-            "background": "#333"
+        "stackContainer": {
+            "id": "stackContainer",
+            "component": "Stack",
+            "background": "#1e1e1e"
         },
-        "rightMenuContainer1": {
-            "id": "rightMenuContainer1",
-            "background": "#333"
+        "stackContainer2": {
+            "id": "stackContainer2",
+            "component":"MapSample",
+            "background": "#1e1e1e"
         },
-        "rightMenuContainer2": {
-            "id": "rightMenuContainer2",
-            "background": "#444"
+        "editorContainer": {
+            "id": "editorContainer",
+            "component": "EditorVSCode",
+            "background": "#1e1e1e"
         },
-        "rightMenuContainer3": {
-            "id": "rightMenuContainer3",
-            "background": "#333"
+        "rightMenuContainer": {
+            "id": "rightMenuContainer",
+            "background": "#252526"
         }
     }
 }

package/src/stories/layouts/vsCode/workbench.json

@@ -0,0 +1,144 @@
+{
+    "title": "Workbench Layout Configuration A",
+    "layoutRoot": "root",
+    "containers": {
+        "root": {
+            "id": "root",
+            "type": "split",
+            "orientation": "vertical",
+            "children": [
+                {
+                    "containerId": "header",
+                    "type": "container",
+                    "size": { "initial": { "value": 25, "unit": "px", "type": "fixed" }}
+                },
+                {
+                    "containerId": "mainBody",
+                    "type": "container",
+                    "size": { "initial": { "type": "fill" }}
+                },
+                {
+                    "containerId": "footer",
+                    "type": "container",
+                    "size": { "initial": { "value": 25, "unit": "px", "type": "fixed" }},
+                    "collapse": { "value": 400, "condition": "lessThan", "relative": "parent" }
+                }
+            ]
+        },
+        "header": {
+            "id": "header",
+            "background": "#3c3c3c"
+        },
+        "mainBody": {
+            "id": "mainBody",
+            "background": "#3c3c3c",
+            "type": "split",
+            "orientation": "horizontal",
+            "children": [
+                {
+                    "containerId": "sidebar",
+                    "type": "container",
+                    "size": { "initial": { "value": 50, "unit": "px", "type": "fixed" }},
+                    "collapse": { "value": 400, "condition": "lessThan", "relative": "parent" },
+                    "showHandlebar": true
+                },
+                {
+                    "containerId": "contentContainer",
+                    "type": "container",
+                    "size": { "initial": { "type": "fill" }}
+                }
+            ]
+        },
+        "contentContainer": {
+            "id": "contentContainer",
+            "background": "#3c3c3c",
+            "type": "split",
+            "orientation": "vertical",
+            "children": [
+                {
+                    "containerId": "content",
+                    "type": "container",
+                    "size": { "initial": { "type": "fill" }}
+                },
+                {
+                    "type": "handleBar",
+                    "sibling1": "content",
+                    "sibling2": "terminal"
+                },
+                {
+                    "containerId": "terminal",
+                    "type": "container",
+                    "size": { 
+                        "initial": { "value": 200, "unit": "px", "type": "fixed" },
+                        "min": { "value": 100, "unit": "px"}
+                    },
+                    "collapse": { "value": 500, "condition": "lessThan", "relative": "parent" }
+                }
+            ]
+        },
+        "terminal": {
+            "id": "terminal",
+            "component": "Flow",
+            "background": "#252526"
+        },
+        "content": {
+            "id": "content",
+            "background": "#007acc",
+            "type": "split",
+            "orientation": "horizontal",
+            "children": [
+                {
+                    "containerId": "menuContainer",
+                    "type": "container",
+                    "size": { 
+                        "initial": { "value": 400, "unit": "px", "type": "fixed" },
+                        "min": { "value": 200, "unit": "px"},
+                        "max": { "value": 500, "unit": "px"}
+                    },
+                    "collapse": { "value": 700, "condition": "lessThan", "relative": "parent" }
+                },
+                {
+                    "type": "handleBar",
+                    "sibling1": "menuContainer",
+                    "sibling2": "editorContainer"
+                },
+                {
+                    "containerId": "editorContainer",
+                    "type": "container",
+                    "size": { "initial": { "type": "fill" }}
+                }
+            ]
+        },
+        "footer": {
+            "id": "footer",
+            "background": "#007acc"
+        },
+        "sidebar": {
+            "id": "sidebar",
+            "background": "#333"
+        },
+        "menuContainer": {
+            "id": "menuContainer",
+            "background": "#252526",
+            "type": "split",
+            "orientation": "vertical",
+            "children": [
+                {
+                    "containerId": "fileTabsContainer",
+                    "type": "container",
+                    "size": { "initial": { "type": "fill" }}
+                }
+            ]
+        },
+        "fileTabsContainer": {
+            "id": "fileTabsContainer",
+            "component": "FileTree",
+            "background": "#1e1e1e"
+        },
+        "editorContainer": {
+            "id": "editorContainer",
+            "component": "FileEditor",
+            "background": "#1e1e1e"
+        }
+    }
+}

package/src/stories/sample_components/fileeditor/FileEditor.jsx

@@ -0,0 +1,48 @@
+
+import { useRef, useLayoutEffect, useEffect } from "react";
+import { Editor } from 'sample-ui-component-library';
+import fileTree from "./workspace_sample.json";
+
+import { useDragState } from "../../../components/LayoutManager/Providers/DragProvider";
+
+const flattenTree = (tree, level = 0) =>
+  tree.flatMap(node => [
+    { ...node, level },
+    ...(node.children ? flattenTree(node.children, level + 1) : [])
+]);
+
+
+const FileEditor = () => {
+    const editorRef = useRef(null);
+
+    const { drop } = useDragState();
+
+    useEffect(() => {
+        if (!drop?.overId) {
+            return;
+        }
+        
+        const activeType = drop.activeData.type;
+        const overType = drop.overData.type;
+        if (activeType === "EditorTab" && overType === "EditorTabGutter") {
+            editorRef.current.moveTab(drop.activeData.node.uid, drop.overData.index);
+        } else if (activeType === "FileTreeNode" && overType === "EditorTabGutter") {
+            editorRef.current.addTab(drop.activeData.node, drop.overData.index);
+        }
+    }, [drop]);
+
+    useLayoutEffect(() => {
+        editorRef.current.setTabGroupId("tab-group-1");
+        flattenTree(fileTree.tree).forEach((node) => {
+            if (node.type === "file") {
+                editorRef.current.addTab(node);
+            }
+        });
+    }, []);
+
+    return (
+        <Editor  ref={editorRef} />  
+    );
+};
+
+export default FileEditor;

package/src/stories/sample_components/fileeditor/workspace_sample.json

@@ -0,0 +1 @@
+{"tree":[{"name":"library_manager_single_threaded","type":"folder","uid":"dir-ba56de84-31dd-4ccf-ae98-a98b0581f803","children":[{"name":"library_manager.py","type":"file","uid":"dir-3d7aaf8e-6224-4eb7-8301-936447fef430","content":"import sys\n\ndef place_book_on_shelf(book_shelf, name, genre):\n    '''\n    This function places the given book on the shelf \n    in a slot determined by the first letter of its name.\n    \n    :param book_shelf: Bookshelf to place the book on.\n    :param name: Name of the book.\n    :param genre: Genre of the book.\n    '''\n    print(f\"Accepted book: {name} (Genre: {genre})\")\n    \n    firstLetter = name[0].upper()\n\n    if (firstLetter not in book_shelf):\n        book_shelf[firstLetter] = []\n    else:\n        print(\"Slot for book already exists.\")\n\n    book_shelf[firstLetter].append(name)\n\n    return book_shelf\n\ndef accept_book():\n    '''\n    Accepts a book and genre from the user and returns it.\n    '''\n    print(\"\\nEnter book details:\")\n        \n    name = input(\"Book name: \")\n\n    genre = input(\"Genre: \")\n\n    return {\"name\":name, \"genre\":genre}\n\n\ndef library_manager():\n    '''\n    Runs the library manager to accept books until the user decides to stop.\n    '''\n    book_shelf = {}\n\n    while True:\n        book_details = accept_book()\n        book_shelf = place_book_on_shelf(\n            book_shelf, \n            book_details[\"name\"], \n            book_details[\"genre\"]\n        )\n\n        more = input(\"Add another book? (y): \").lower()\n        \n        if more != \"y\":\n            break\n\n    print(\"Exiting library manager, goodbye.\")\n\nif __name__ == \"__main__\":\n    sys.exit(library_manager())\n    "},{"name":"readme","type":"file","uid":"dir-5aa507ee-e43d-4d77-b49a-b6e0b1da36f5","content":"This is version 1 of the library manager and it contains a simple implementation that accepts a book name and genre before placing it on the shelf. It places it on the shelf using the first letter of the book name. It continues to accept books until the user decides to stop.\n\nThis version of the library manager will also use instrumentation to identify abstractions by line to overcome the limitations of existing techniques."}]},{"name":"text_translator","type":"folder","uid":"dir-cbb97582-e3da-403e-aa7f-a524a5a7cff7","children":[{"name":"FrenchTranslator.py","type":"file","uid":"dir-516008b2-e80c-4a3a-bb00-d651885ac15d","content":"import threading\nimport queue\nfrom deep_translator import GoogleTranslator # type: ignore\n\nclass FrenchTranslator(threading.Thread):\n    def __init__(self, id, queue, packerQueue):\n        super().__init__(daemon=True)\n        self.queue = queue\n        self.id = id\n        self.packerQueue = packerQueue\n        self.start()\n\n    def run(self):\n        while True:\n            try:\n                job = self.queue.get(timeout=10)\n            except queue.Empty:\n                continue\n\n            translatedMsg = GoogleTranslator(source=\"auto\", target=\"french\").translate(job[\"value\"][\"data\"])\n            self.packerQueue.put({\n                \"uid\": job[\"uid\"],\n                \"value\": {\n                    \"language\": \"french\",\n                    \"original\": job[\"value\"][\"data\"],\n                    \"translated\": translatedMsg\n                }\n            })"},{"name":"Packer.py","type":"file","uid":"dir-e5085241-ff4f-434d-85ab-7f50e673ea4d","content":"import threading\nimport queue\nfrom TransactionDB import TransactionDB\n\nclass PackerThread(threading.Thread):\n    def __init__(self, queue):\n        super().__init__(daemon=True)\n        self.queue = queue\n        self.items = {}\n        self.start()\n\n    def run(self):\n        self.db = TransactionDB()\n        while True:\n            try:\n                translatedJobPart = self.queue.get(timeout=10)\n            except queue.Empty:\n                continue\n\n            self.db.addTranslation(translatedJobPart)\n\n            if self.db.isDone(translatedJobPart[\"uid\"]):\n                self.db.setDone(translatedJobPart[\"uid\"])"},{"name":"SpanishTranslator.py","type":"file","uid":"dir-b2a78dfd-aa94-4068-a5f7-24c396d88825","content":"import threading\nimport queue\nfrom deep_translator import GoogleTranslator # type: ignore\n\nclass SpanishTranslator(threading.Thread):\n    def __init__(self, id, queue, packerQueue):\n        super().__init__(daemon=True)\n        self.queue = queue\n        self.id = id\n        self.packerQueue = packerQueue\n        self.start()\n\n    def run(self):\n        while True:\n            try:\n                job = self.queue.get(timeout=10)\n            except queue.Empty:\n                continue\n\n            translatedMsg = GoogleTranslator(source=\"auto\", target=\"spanish\").translate(job[\"value\"][\"data\"])\n            self.packerQueue.put({\n                \"uid\": job[\"uid\"],\n                \"value\": {\n                    \"language\": \"spanish\",\n                    \"original\": job[\"value\"][\"data\"],\n                    \"translated\": translatedMsg\n                }\n            })"},{"name":"TamilTranslator.py","type":"file","uid":"dir-594ff411-b916-4a88-9077-3d5b8ff7f871","content":"import threading\nimport queue\nfrom deep_translator import GoogleTranslator # type: ignore\n\nclass TamilTranslator(threading.Thread):\n    def __init__(self, id, queue, packerQueue):\n        super().__init__(daemon=True)\n        self.queue = queue\n        self.id = id\n        self.packerQueue = packerQueue\n        self.start()\n\n    def run(self):\n        while True:\n            try:\n                job = self.queue.get(timeout=10)\n            except queue.Empty:\n                continue\n\n            translatedMsg = GoogleTranslator(source=\"auto\", target=\"tamil\").translate(job[\"value\"][\"data\"])\n            self.packerQueue.put({\n                \"uid\": job[\"uid\"],\n                \"value\": {\n                    \"language\": \"tamil\",\n                    \"original\": job[\"value\"][\"data\"],\n                    \"translated\": translatedMsg\n                }\n            })"},{"name":"readme","type":"file","uid":"dir-f6459410-1634-4dbc-8d76-35896822158d","content":"This folder contains a text translator that uses three workers to translate the text and uses a packer to add the results to a cabinet."}]}]}

package/src/stories/sample_components/filetree/FileTree.jsx

@@ -0,0 +1,26 @@
+// @ts-nocheck
+import { useRef, useLayoutEffect } from "react";
+import { FileBrowser } from 'sample-ui-component-library';
+import tree from "./workspace_sample.json"
+
+const FileTree = () => {
+    const fileBrowserRef = useRef(null);
+
+    useLayoutEffect(() => {
+        fileBrowserRef.current.addFileTree(tree.tree);
+
+        setTimeout(() => {
+            fileBrowserRef.current.selectNode("dir-f6459410-1634-4dbc-8d76-35896822158d");
+        }, 3000);
+    }, []);
+
+    const onSelectFile = (node) => {
+        console.log("Selected Node:", node);
+    }
+
+    return (
+        <FileBrowser ref={fileBrowserRef} onSelectFile={onSelectFile} />  
+    );
+};
+
+export default FileTree;

package/src/stories/sample_components/filetree/workspace_sample.json

@@ -0,0 +1 @@
+{"tree":[{"name":"library_manager_single_threaded","type":"folder","uid":"dir-ba56de84-31dd-4ccf-ae98-a98b0581f803","children":[{"name":"library_manager.py","type":"file","uid":"dir-3d7aaf8e-6224-4eb7-8301-936447fef430","content":"import sys\n\ndef place_book_on_shelf(book_shelf, name, genre):\n    '''\n    This function places the given book on the shelf \n    in a slot determined by the first letter of its name.\n    \n    :param book_shelf: Bookshelf to place the book on.\n    :param name: Name of the book.\n    :param genre: Genre of the book.\n    '''\n    print(f\"Accepted book: {name} (Genre: {genre})\")\n    \n    firstLetter = name[0].upper()\n\n    if (firstLetter not in book_shelf):\n        book_shelf[firstLetter] = []\n    else:\n        print(\"Slot for book already exists.\")\n\n    book_shelf[firstLetter].append(name)\n\n    return book_shelf\n\ndef accept_book():\n    '''\n    Accepts a book and genre from the user and returns it.\n    '''\n    print(\"\\nEnter book details:\")\n        \n    name = input(\"Book name: \")\n\n    genre = input(\"Genre: \")\n\n    return {\"name\":name, \"genre\":genre}\n\n\ndef library_manager():\n    '''\n    Runs the library manager to accept books until the user decides to stop.\n    '''\n    book_shelf = {}\n\n    while True:\n        book_details = accept_book()\n        book_shelf = place_book_on_shelf(\n            book_shelf, \n            book_details[\"name\"], \n            book_details[\"genre\"]\n        )\n\n        more = input(\"Add another book? (y): \").lower()\n        \n        if more != \"y\":\n            break\n\n    print(\"Exiting library manager, goodbye.\")\n\nif __name__ == \"__main__\":\n    sys.exit(library_manager())\n    "},{"name":"readme","type":"file","uid":"dir-5aa507ee-e43d-4d77-b49a-b6e0b1da36f5","content":"This is version 1 of the library manager and it contains a simple implementation that accepts a book name and genre before placing it on the shelf. It places it on the shelf using the first letter of the book name. It continues to accept books until the user decides to stop.\n\nThis version of the library manager will also use instrumentation to identify abstractions by line to overcome the limitations of existing techniques."}]},{"name":"text_translator","type":"folder","uid":"dir-cbb97582-e3da-403e-aa7f-a524a5a7cff7","children":[{"name":"FrenchTranslator.py","type":"file","uid":"dir-516008b2-e80c-4a3a-bb00-d651885ac15d","content":"import threading\nimport queue\nfrom deep_translator import GoogleTranslator # type: ignore\n\nclass FrenchTranslator(threading.Thread):\n    def __init__(self, id, queue, packerQueue):\n        super().__init__(daemon=True)\n        self.queue = queue\n        self.id = id\n        self.packerQueue = packerQueue\n        self.start()\n\n    def run(self):\n        while True:\n            try:\n                job = self.queue.get(timeout=10)\n            except queue.Empty:\n                continue\n\n            translatedMsg = GoogleTranslator(source=\"auto\", target=\"french\").translate(job[\"value\"][\"data\"])\n            self.packerQueue.put({\n                \"uid\": job[\"uid\"],\n                \"value\": {\n                    \"language\": \"french\",\n                    \"original\": job[\"value\"][\"data\"],\n                    \"translated\": translatedMsg\n                }\n            })"},{"name":"Packer.py","type":"file","uid":"dir-e5085241-ff4f-434d-85ab-7f50e673ea4d","content":"import threading\nimport queue\nfrom TransactionDB import TransactionDB\n\nclass PackerThread(threading.Thread):\n    def __init__(self, queue):\n        super().__init__(daemon=True)\n        self.queue = queue\n        self.items = {}\n        self.start()\n\n    def run(self):\n        self.db = TransactionDB()\n        while True:\n            try:\n                translatedJobPart = self.queue.get(timeout=10)\n            except queue.Empty:\n                continue\n\n            self.db.addTranslation(translatedJobPart)\n\n            if self.db.isDone(translatedJobPart[\"uid\"]):\n                self.db.setDone(translatedJobPart[\"uid\"])"},{"name":"SpanishTranslator.py","type":"file","uid":"dir-b2a78dfd-aa94-4068-a5f7-24c396d88825","content":"import threading\nimport queue\nfrom deep_translator import GoogleTranslator # type: ignore\n\nclass SpanishTranslator(threading.Thread):\n    def __init__(self, id, queue, packerQueue):\n        super().__init__(daemon=True)\n        self.queue = queue\n        self.id = id\n        self.packerQueue = packerQueue\n        self.start()\n\n    def run(self):\n        while True:\n            try:\n                job = self.queue.get(timeout=10)\n            except queue.Empty:\n                continue\n\n            translatedMsg = GoogleTranslator(source=\"auto\", target=\"spanish\").translate(job[\"value\"][\"data\"])\n            self.packerQueue.put({\n                \"uid\": job[\"uid\"],\n                \"value\": {\n                    \"language\": \"spanish\",\n                    \"original\": job[\"value\"][\"data\"],\n                    \"translated\": translatedMsg\n                }\n            })"},{"name":"TamilTranslator.py","type":"file","uid":"dir-594ff411-b916-4a88-9077-3d5b8ff7f871","content":"import threading\nimport queue\nfrom deep_translator import GoogleTranslator # type: ignore\n\nclass TamilTranslator(threading.Thread):\n    def __init__(self, id, queue, packerQueue):\n        super().__init__(daemon=True)\n        self.queue = queue\n        self.id = id\n        self.packerQueue = packerQueue\n        self.start()\n\n    def run(self):\n        while True:\n            try:\n                job = self.queue.get(timeout=10)\n            except queue.Empty:\n                continue\n\n            translatedMsg = GoogleTranslator(source=\"auto\", target=\"tamil\").translate(job[\"value\"][\"data\"])\n            self.packerQueue.put({\n                \"uid\": job[\"uid\"],\n                \"value\": {\n                    \"language\": \"tamil\",\n                    \"original\": job[\"value\"][\"data\"],\n                    \"translated\": translatedMsg\n                }\n            })"},{"name":"readme","type":"file","uid":"dir-f6459410-1634-4dbc-8d76-35896822158d","content":"This folder contains a text translator that uses three workers to translate the text and uses a packer to add the results to a cabinet."}]}]}

package/src/stories/sample_components/map/MapSample.jsx

@@ -37,7 +37,7 @@ const MapSample = () => {
         }
     }, []);
 
-    return <div ref={containerRef} style={{ backgroundColor:"#00000", height: "100%", width: "100%" }} />;
+    return <div ref={containerRef} style={{ backgroundColor:"#000000", height: "100%", width: "100%" }} />;
 };
 
 export default MapSample;

package/src/stories/sample_components/editor/EditorVSCode.jsx

@@ -1,11 +0,0 @@
-// EditorVSCode.js
-import { Viewer } from 'sample-ui-component-library';
-import fileTree from "./filetree.json"
-
-const EditorVSCode = () => {
-    return (
-        <Viewer systemTree={fileTree.fileTrees} />  
-    );
-};
-
-export default EditorVSCode;