sample-ui-component-library 0.0.48-dev → 0.0.50-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.48-dev",
+  "version": "0.0.50-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",
@@ -46,7 +46,7 @@
     "@storybook/test": "^8.6.11",
     "@storybook/theming": "^8.6.11",
     "css-loader": "^7.1.2",
-    "dal-engine-core-js-lib-dev": "^0.0.4",
+    "dal-engine-core-js-lib-dev": "^0.0.15-dev",
     "gh-pages": "^6.3.0",
     "prop-types": "^15.8.1",
     "raw-loader": "^4.0.2",

package/src/components/Editor/EDITOR_MODES.js

@@ -0,0 +1,7 @@
+let EDITOR_MODES = {
+    DESIGN: 1,
+    MAPPING: 2
+};
+EDITOR_MODES = Object.freeze(EDITOR_MODES);
+
+export default EDITOR_MODES;

package/src/components/Editor/Editor.jsx

@@ -54,6 +54,10 @@ export const Editor = forwardRef(({ }, ref) => {
     const setMapping = useCallback((fileName, mapping) => {
         dispatch({ type: "SET_MAPPING", payload: { fileName, mapping } });
     }, []);
+    
+    const setMode = useCallback((mode) => {
+        dispatch({ type: "SET_MODE", payload: mode });
+    }, []);
 
     const api = useMemo(() => {
         return {
@@ -63,9 +67,10 @@ export const Editor = forwardRef(({ }, ref) => {
             selectTab,
             closeTab,
             moveTab,
-            setMapping
+            setMapping,
+            setMode
         };
-    }, [state, addTab, selectTab, closeTab, moveTab, setTabGroupId, setMapping]);
+    }, [state, addTab, selectTab, closeTab, moveTab, setTabGroupId, setMapping, setMode]);
 
     useImperativeHandle(ref, () => api, [api]);
 

package/src/components/Editor/EditorReducer.js

@@ -1,7 +1,11 @@
+import EDITOR_MODES from "./EDITOR_MODES";
+
 export const initialState = {
     uid: crypto.randomUUID(),
     tabs: [],
     activeTab: null,
+    mode: EDITOR_MODES.DESIGN,
+    mapping: new Map(),
     parentTabGroupId: null
 };
 
@@ -102,23 +106,21 @@ export const editorReducer = (state, action) => {
 
         case "SET_MAPPING": {
             const { mapping, fileName } = action.payload;
-            console.log(state);
-            for (let i = 0; i < state.tabs.length; i++) {
-                const tab = state.tabs[i];
-                if (tab.name === fileName) {
-                    const updatedTab = { ...tab, mapping: mapping };
-                    const newTabs = [...state.tabs];
-                    newTabs[i] = updatedTab;
-                    return {
-                        ...state,
-                        tabs: newTabs,
-                        activeTab: updatedTab
-                    };
-                }
-            }
-            return state;
+            const newMapping = new Map(state.mapping);
+            newMapping.set(fileName, mapping);
+            return {
+                ...state,
+                mapping: newMapping
+            };
         }
-        
+
+        case "SET_MODE": {
+            return {
+                ...state,
+                mode: action.payload
+            };
+        }
+
         case "RESET_STATE": {
             return initialState;
         }

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

@@ -1,6 +1,8 @@
 import React, { useCallback, useLayoutEffect, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
+import EDITOR_MODES from '../EDITOR_MODES';
+
 import Editor from '@monaco-editor/react';
 
 import "./MonacoInstance.scss"
@@ -18,17 +20,12 @@ export const MonacoInstance = ({ }) => {
     const frameRef = useRef(0);
 
     const [overlayDivs, setOverlayDivs] = useState();
-    const [overlayRanges, setOverlayRanges] = useState();
 
     useLayoutEffect(() => {
         if (state.activeTab) {
             setEditorContent(state.activeTab.content);
             setShowEditor(true);
-            if (state.activeTab.mapping) {
-                addOverlays(state.activeTab.mapping);
-            } else {
-                setOverlayDivs([]);
-            }
+            addOverlays();
         } else {
             setShowEditor(false);
         }
@@ -52,21 +49,23 @@ export const MonacoInstance = ({ }) => {
             editorRef.current.setValue(content.current);
         }
         editorRef.current.layout();
-        if (state.activeTab?.mapping) {
-            addOverlays(state.activeTab.mapping);
-        } else {
-            setOverlayDivs([]);
-        }
+        addOverlays();
     }, [state.activeTab]);
 
     // Add overlays to editor for the given line ranges.
-    const addOverlays = useCallback((ranges) => {
+    const addOverlays = useCallback(() => {
         if (!editorRef.current) return;
 
+        if (state.mode !== EDITOR_MODES.MAPPING || !state.mapping.get(state.activeTab?.name)) {
+            setOverlayDivs([]);
+            return;
+        }
+
+        const ranges = state.mapping.get(state.activeTab?.name);
         const lineCount = editorRef.current.getModel().getLineCount();
-        const lineHeight = editorRef.current.getOption(monaco.editor.EditorOption.lineHeight);
-        
+        const lineHeight = editorRef.current.getOption(monaco.editor.EditorOption.lineHeight);        
         const divs = [];
+
         ranges.forEach((entry) => {
              const top = editorRef.current.getTopForLineNumber(entry.start_line) - editorRef.current.getScrollTop();
              let bottom = editorRef.current.getTopForLineNumber(entry.end_line + 1) - editorRef.current.getScrollTop();
@@ -77,7 +76,7 @@ export const MonacoInstance = ({ }) => {
              divs.push(overlayDiv);
         });
         setOverlayDivs(divs);
-    }, [editorRef?.current]);
+    }, [editorRef?.current, state]);
 
     // Scroll the editor and update overlays on wheel event.
     const handleWheel = useCallback((e) => {
@@ -85,14 +84,8 @@ export const MonacoInstance = ({ }) => {
         const deltaY = e.deltaY;
         const currentScrollTop = editorRef.current.getScrollTop();
         editorRef.current.setScrollTop(currentScrollTop + deltaY);
-        if (state.activeTab?.mapping) {
-            addOverlays(state.activeTab.mapping);
-        } else {
-            setOverlayDivs([]);
-        }
-    }, [overlayRanges, state.activeTab]);
-
-
+        addOverlays();
+    }, [state.activeTab, addOverlays]);
 
     // Editor options for Monaco Editor.
     const editorOptions = {
@@ -118,7 +111,7 @@ export const MonacoInstance = ({ }) => {
             cancelAnimationFrame(frameRef.current);
             frameRef.current = requestAnimationFrame(() => {
                 editorRef.current?.layout();
-                addOverlays(state.activeTab.mapping); 
+                addOverlays(); 
             });
         });
 
@@ -153,9 +146,12 @@ export const MonacoInstance = ({ }) => {
     return (
         <div className="editor-container" ref={containerRef}>
             {renderEditor()}
-            <div className="overlay-layer" onWheel={handleWheel}>
-                {overlayDivs}
-            </div>
+            {
+                state.mode === EDITOR_MODES.MAPPING &&
+                <div className="overlay-layer" onWheel={handleWheel}>
+                    {overlayDivs}
+                </div>
+            }
         </div>
     )
 }

package/src/components/Editor/index.js

@@ -1 +1,2 @@
-export * from "./Editor.jsx"
+export * from "./Editor.jsx"
+export * from "./EDITOR_MODES.js"

package/src/stories/Editor.stories.js

@@ -1,6 +1,7 @@
-import { useEffect, useState, useRef, useLayoutEffect } from "react";
+import { useEffect, useState, useRef, useLayoutEffect, useCallback } from "react";
 import { Editor } from "../components/Editor";
 import { useArgs } from "@storybook/preview-api";
+import EDITOR_MODES from "../components/Editor/EDITOR_MODES";
 import { action } from "@storybook/addon-actions";
 import {
     DndContext,
@@ -12,7 +13,8 @@ import {
 
 import WorkspaceSampleTree from "./data/FileBrowser/workspace_sample.json"
 import transactiondb_mapping from "./data/Mapping/TransactionDB_mapping.json"
-import mapping from "./data/Mapping/mapping.json"
+import { ToolBarEditor } from "./components/ToolBarEditor/ToolBarEditor";
+import translator_mapping from "./data/Mapping/FrenchTranslator_mapping.json"
 
 import "./EditorStories.scss"
 
@@ -43,6 +45,7 @@ const Template = (args) => {
     const [, updateArgs] = useArgs();
 
     const [dragPreviewLabel, setDragPreviewLabel] = useState(<></>);
+    const [selectTool, setSelectTool] = useState("select");
 
     const editorRef = useRef();
 
@@ -57,12 +60,12 @@ const Template = (args) => {
         const result = flattenTree(WorkspaceSampleTree.tree).find(
             (obj) => obj.name === "TransactionDB.py"
         );
-        editorRef.current.addTab(result);
-        // editorRef.current.setMapping("FrenchTranslator.py", mapping);
+        editorRef.current.addTab(result);translator_mapping
         editorRef.current.setMapping("TransactionDB.py", transactiondb_mapping);
+        editorRef.current.setMapping("FrenchTranslator.py", translator_mapping);
     }, []);
 
-const [dragging, setDragging] = useState(false);
+    const [dragging, setDragging] = useState(false);
   
     /**
      * Callback for when drag ends.
@@ -104,10 +107,21 @@ const [dragging, setDragging] = useState(false);
 
         window.addEventListener("pointermove", handleMove);
 
+        const handleKeyDown = (event) => {
+            console.log("KEY DOWN");
+            if (event.code === "KeyA") {
+                editorRef.current.setMode(EDITOR_MODES.DESIGN);
+            } else if (event.code === "KeyB") {
+                editorRef.current.setMode(EDITOR_MODES.MAPPING);
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+
         return () => {
+            document.removeEventListener("keydown", handleKeyDown);
             window.removeEventListener("pointermove", handleMove);
         };
-    }, [dragging]);
+    }, [dragging, editorRef]);
 
     const sensors = useSensors(
         useSensor(PointerSensor, {
@@ -117,23 +131,38 @@ const [dragging, setDragging] = useState(false);
         })
     );
 
+    const onSelectTool = useCallback((tool) => {
+        if (tool === "mapping-mode") {
+            editorRef.current.setMode(EDITOR_MODES.MAPPING);
+        } else if (tool === "implementation-mode") {
+            editorRef.current.setMode(EDITOR_MODES.DESIGN);
+        }
+    }, [editorRef]);
+
     return (
         <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={handleDragEnd}>
-            <div className="editorStoryWrapper">
-                <Editor ref={editorRef}{...args} />
-            </div>
-            {dragging && (
-                <div
-                    style={{
-                        position: "fixed",
-                        left: pos.x,
-                        top: pos.y,
-                        pointerEvents: "none",
-                        zIndex: 9999,
-                    }}>
-                    {dragPreviewLabel}
+
+            <div className="editorRootContainer">
+                <div className="toolbar">
+                    <ToolBarEditor onSelectTool={onSelectTool} />
                 </div>
-            )}  
+                <div className="flow">
+                    <Editor ref={editorRef}{...args} />
+                    {dragging && (
+                        <div
+                            style={{
+                                position: "fixed",
+                                left: pos.x,
+                                top: pos.y,
+                                pointerEvents: "none",
+                                zIndex: 9999,
+                            }}>
+                            {dragPreviewLabel}
+                        </div>
+                    )}  
+                </div>
+            </div>
+            
         </DndContext>
     )
 }

package/src/stories/EditorStories.scss

@@ -1,7 +1,22 @@
-.editorStoryWrapper{
+
+
+.editorRootContainer {
     position: absolute;
     top:0;
     bottom:0;
     left:0;
     right:0;
-}
+    display:flex;
+    flex-direction: row;
+}
+
+.toolbar {
+    width:40px;
+}
+
+.flow {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    overflow:hidden;
+}

package/src/stories/components/ToolBarEditor/ToolBarEditor.js

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+
+import { Alt, Crosshair } from "react-bootstrap-icons";
+
+import "./ToolBarEditor.scss";
+
+ToolBarEditor.propTypes = {};
+
+/**
+ * ToolBarEditor Component
+ * @return {JSX.Element}
+ */
+export function ToolBarEditor({ onSelectTool }) {
+    const [selectedTool, setSelectedTool] = useState("select");
+
+    const selectTool = (tool) => {
+        setSelectedTool(tool);
+        onSelectTool(tool);
+    };
+
+    return (
+        <div className="toolbarWrapper">
+            <div className="toolbarContainer">
+                <Alt
+                    onClick={(e) => selectTool("implementation-mode")}
+                    title="Implementation Mode"
+                    className="icon"
+                />
+                <Crosshair
+                    onClick={(e) => selectTool("mapping-mode")}
+                    title="Mapping Mode"
+                    className="icon"
+                />
+            </div>
+            <div className="toolbarContainer bottom"></div>
+        </div>
+    );
+}

package/src/stories/components/ToolBarEditor/ToolBarEditor.scss

@@ -0,0 +1,29 @@
+.toolbarWrapper {
+    display:flex;
+    flex-direction: column;
+    justify-content:space-around;
+    height: 100%;
+    background-color: #333333;
+}
+
+.toolbarContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    width:100%;
+    align-items: center;
+    padding: 10px 0;
+}
+
+.toolbarWrapper > .bottom {
+  margin-top: auto;
+}
+
+.toolbarContainer > .icon {
+    color:grey;
+}
+
+.toolbarContainer > .icon:hover {
+    color:white;
+    cursor:pointer;
+}

package/src/stories/data/Mapping/TransactionDB_mapping.json

@@ -1,147 +1,147 @@
 [
     {
         "type": "Import",
-        "uid": "41375952-c2b0-4d81-9833-f7e38afe5130",
+        "uid": "3379cd52-2d8c-4e8a-9b1d-bc232f60576b",
         "start_line": 1,
         "end_line": 1,
         "source": "import sqlite3"
     },
     {
         "type": "Import",
-        "uid": "a8ceb80a-390d-4d0e-a3b4-db9f299a067b",
+        "uid": "e5d628dc-f651-4245-a200-79d1873c3386",
         "start_line": 2,
         "end_line": 2,
         "source": "import atexit"
     },
     {
         "type": "Import",
-        "uid": "eccfad0c-1487-4d39-84e2-24107925be66",
+        "uid": "c85d079d-1268-421d-a4bb-fc1f5792d63b",
         "start_line": 3,
         "end_line": 3,
         "source": "import uuid"
     },
     {
         "type": "Expr",
-        "uid": "b13d053d-b448-42cf-adce-2720d7026c28",
+        "uid": "8bf2605a-1940-49de-9b2f-0efa22bf658c",
         "start_line": 8,
         "end_line": 8,
         "source": "atexit.register(self.cleanup_function)"
     },
     {
         "type": "Expr",
-        "uid": "d735f8a9-b2d9-4af7-b8d0-021bbb8a8945",
+        "uid": "595db236-990c-4aea-bae0-d46f17e89729",
         "start_line": 9,
         "end_line": 9,
         "source": "self.initializeDB()"
     },
     {
         "type": "Expr",
-        "uid": "f96705c3-5afb-4ad2-ad3b-66e0f8c1fa44",
+        "uid": "df540a11-0f67-41ce-a9f7-02aafb9996f0",
         "start_line": 12,
         "end_line": 12,
         "source": "self.conn.close()"
     },
     {
         "type": "Assign",
-        "uid": "3597725d-8fba-486f-9788-4f346ba91be9",
+        "uid": "720ce1a8-58d8-4dfc-aaeb-11865bc5311f",
         "start_line": 16,
         "end_line": 16,
         "source": "self.conn = sqlite3.connect(\"translations.db\")"
     },
     {
         "type": "Assign",
-        "uid": "8e34543e-d1a8-4f0b-9945-9fc61b192e88",
+        "uid": "41f3eec1-71eb-4272-941b-c5209befe90d",
         "start_line": 17,
         "end_line": 17,
         "source": "self.cursor = self.conn.cursor()"
     },
     {
         "type": "Expr",
-        "uid": "3071e179-638f-428c-9afc-e7c92997cec8",
+        "uid": "df8a04d5-3b90-445a-8d2f-8a6278cde108",
         "start_line": 19,
         "end_line": 29,
         "source": "self.cursor.execute(\"\"\"\n        CREATE TABLE IF NOT EXISTS translation_jobs (\n            job_id   INTEGER PRIMARY KEY AUTOINCREMENT,\n            uid      TEXT NOT NULL UNIQUE,\n            english  TEXT NOT NULL,\n            french   TEXT,\n            spanish  TEXT,\n            tamil    TEXT,\n            done     INTEGER NOT NULL DEFAULT 0\n        );\n        \"\"\")"
     },
     {
         "type": "Expr",
-        "uid": "053a69cc-9959-4011-83b9-9cd01948d560",
+        "uid": "0297ec2d-e27c-483a-97ac-a82d4f185a45",
         "start_line": 30,
         "end_line": 30,
         "source": "self.conn.commit()"
     },
     {
         "type": "Assign",
-        "uid": "c0c88646-99fc-45de-b441-1efbfb617467",
+        "uid": "12d3fdc6-44f3-4526-b461-a1037636dc33",
         "start_line": 33,
         "end_line": 33,
         "source": "uid = str(uuid.uuid4())"
     },
     {
         "type": "Expr",
-        "uid": "a0dc4483-bf8d-4790-b6ee-11d4c3ff6747",
+        "uid": "7e3e96ad-99c5-43e1-9e60-2ec7593692e9",
         "start_line": 34,
         "end_line": 40,
         "source": "self.conn.execute(\n            \"\"\"\n            INSERT INTO translation_jobs (uid, english)\n            VALUES (?, ?)\n            \"\"\",\n            (uid, data)\n        )"
     },
     {
         "type": "Expr",
-        "uid": "5daf0842-9da2-473f-906f-177b2297e42a",
+        "uid": "33aaf4bc-2c5c-44d7-aa23-ed4c00dc9850",
         "start_line": 41,
         "end_line": 41,
         "source": "self.conn.commit()"
     },
     {
         "type": "Return",
-        "uid": "e5507376-e78c-49a8-953f-a50f7d534e91",
+        "uid": "91b23b1a-6dbc-4be4-a5c9-3c25bb7e4d31",
         "start_line": 43,
         "end_line": 46,
         "source": "return {\n            \"uid\": uid,\n            \"value\": {\"data\": data}\n        }"
     },
     {
         "type": "Expr",
-        "uid": "5c91cc00-0bab-45f4-8c44-52b9cbba0033",
+        "uid": "9283152d-497a-4adf-ae94-bd36ddfa7ec3",
         "start_line": 49,
         "end_line": 56,
         "source": "self.conn.execute(\n            f\"\"\"\n            UPDATE translation_jobs\n            SET {msg[\"value\"][\"language\"]} = ?\n            WHERE uid = ?\n            \"\"\",\n            (msg[\"value\"][\"translated\"], msg[\"uid\"])\n        )"
     },
     {
         "type": "Expr",
-        "uid": "50dbde63-e2af-4788-bba3-72ce9aa6cd4b",
+        "uid": "9e49a0c5-d0f2-41f9-bea7-42db302ba180",
         "start_line": 57,
         "end_line": 57,
         "source": "self.conn.commit()"
     },
     {
         "type": "Assign",
-        "uid": "709389e7-985b-433e-b2cb-e77d5a4b8b54",
+        "uid": "b0885662-490e-4679-84f9-636be9b68198",
         "start_line": 61,
         "end_line": 71,
         "source": "cur = self.conn.execute(\n            \"\"\"\n            SELECT\n                french  IS NOT NULL\n            AND spanish IS NOT NULL\n            AND tamil   IS NOT NULL\n            FROM translation_jobs\n            WHERE uid = ?\n            \"\"\",\n            (uid,)\n        )"
     },
     {
         "type": "Assign",
-        "uid": "31c90fb9-89a3-45d9-a2cf-ab0941b26668",
+        "uid": "9185886f-b795-45fb-9676-aa65e0e54fb5",
         "start_line": 72,
         "end_line": 72,
         "source": "row = cur.fetchone()"
     },
     {
         "type": "Return",
-        "uid": "2273d6fc-aa36-4abf-9f98-8259a9d3fd0b",
+        "uid": "8bdd4fd1-2678-4fd2-943c-016cc601bfe5",
         "start_line": 73,
         "end_line": 73,
         "source": "return bool(row[0]) if row else False"
     },
     {
         "type": "Expr",
-        "uid": "695d4481-ba24-458d-80db-0e600296cf2b",
+        "uid": "c4f43010-71ef-46e6-bf38-0548d3a34012",
         "start_line": 76,
         "end_line": 83,
         "source": "self.conn.execute(\n            \"\"\"\n            UPDATE translation_jobs\n            SET done = 1\n            WHERE uid = ?\n            \"\"\",\n            (uid,)\n        )"
     },
     {
         "type": "Expr",
-        "uid": "7d6571df-d51f-461a-8a2f-59ce793a3444",
+        "uid": "d1678a59-0a81-4126-8ca9-befbafbd8986",
         "start_line": 84,
         "end_line": 84,
         "source": "self.conn.commit()"