sample-ui-component-library 0.0.17-dev → 0.0.23-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.17-dev",
+  "version": "0.0.23-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",
@@ -68,8 +68,6 @@
     "@dagrejs/dagre": "^1.1.4",
     "@monaco-editor/react": "^4.7.0",
     "@xyflow/react": "^12.6.0",
-    "bootstrap": "^5.3.4",
-    "react-bootstrap": "^2.10.9",
     "react-bootstrap-icons": "^1.11.5"
   }
 }

package/src/components/Editor/Editor.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { MonacoInstance } from "./MonacoInstance/MonacoInstance";
 import { Tabs } from "./Tabs/Tabs";
-import { TabPreview } from "./Tabs/Tab/Tab";
+
 import React, {
     forwardRef,
     useCallback,
@@ -42,19 +42,10 @@ export const Editor = forwardRef(({ }, ref) => {
     }, []);
 
     const setTabGroupId = useCallback((id) => {
+        dispatch({ type: "RESET_STATE"});
         dispatch({ type: "SET_PARENT_TAB_GROUP_ID", payload: id });
     }, []);
 
-    const getPreviewElement = useCallback((tabId) => {
-        // Get the preview element for a tab by its id for use in drag-and-drop operations.
-        const tab = state.tabs.find(t => t.uid === tabId);
-        if (!tab) {
-            console.error(`getPreviewElement: tab with id ${tabId} not found.`);
-            return null;
-        }
-        return <TabPreview info={{ label: tab.name }} />;
-    }, [state]);
-
     const api = useMemo(() => {
         return {
             state,
@@ -62,10 +53,9 @@ export const Editor = forwardRef(({ }, ref) => {
             setTabGroupId,
             selectTab,
             closeTab,
-            moveTab,
-            getPreviewElement
+            moveTab
         };
-    }, [state, addTab, selectTab, closeTab, moveTab, getPreviewElement, setTabGroupId]);
+    }, [state, addTab, selectTab, closeTab, moveTab, setTabGroupId]);
 
     useImperativeHandle(ref, () => api, [api]);
 

package/src/components/Editor/EditorReducer.js

@@ -98,6 +98,10 @@ export const editorReducer = (state, action) => {
                 tabs: prevTabs
             };
         }
+        
+        case "RESET_STATE": {
+            return initialState;
+        }
 
         default: {
             return state;

package/src/components/FileBrowser/FileBrowser.jsx

@@ -24,6 +24,7 @@ export const FileBrowser = forwardRef(({onSelectFile}, ref) => {
     const [state, dispatch] = useReducer(fileBrowserReducer, initialState);
 
     const addFileTree = useCallback((tree) => {
+        dispatch({ type: "RESET_STATE"});
         dispatch({ type: "ADD_FILE_TREE", payload: tree });
     }, []);
 

package/src/components/FileBrowser/FileBrowserReducer.js

@@ -1,8 +1,4 @@
-import {
-    setDefaultCollapsed,
-    collapseTree,
-    flattenTree,
-} from "./helper";
+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
@@ -15,9 +11,7 @@ export const initialState = {
 };
 
 export const fileBrowserReducer = (state, action) => {
-
     switch (action.type) {
-
         case "ADD_FILE_TREE": {
             let flattenedTree = setDefaultCollapsed(flattenTree(action.payload));
             const collapsedTree = collapseTree(flattenedTree);
@@ -25,29 +19,34 @@ export const fileBrowserReducer = (state, action) => {
                 ...state,
                 tree: action.payload,
                 flattenedTree: flattenedTree,
-                collapsedTree: collapsedTree
-            }
+                collapsedTree: collapsedTree,
+            };
         }
 
         case "SELECT_NODE": {
-            const tree = [...state.flattenedTree];
-            let selectedNode;
-            tree.forEach((n) => {
-                if (n.uid === action.payload) {
-                    selectedNode = n;
-                    n.selected = true;
-                    n.collapsed = !n.collapsed;
-                } else {
-                    n.selected = false;
+            const tree = state.flattenedTree.map((n) => {
+                if (n.uid === action.payload.uid) {
+                    return {
+                        ...n,
+                        selected: true,
+                        collapsed: !n.collapsed,
+                    };
                 }
+                return {
+                    ...n,
+                    selected: false,
+                };
             });
-            const collapsedTree = collapseTree(tree);
             return {
                 ...state,
                 flattenedTree: tree,
-                collapsedTree: collapsedTree,
-                selectedNode: selectedNode
-            }
+                collapsedTree: collapseTree(tree),
+                selectedNode: action.payload,
+            };
+        }
+
+        case "RESET_STATE": {
+            return initialState;
         }
     }
-}
+};

package/src/components/FileBrowser/Tree/Tree.scss

@@ -1,33 +0,0 @@
-.file-node-row{
-    width:100%;
-    min-width: 200px;
-    display:flex;
-    padding: 5px 0;
-    font-size:13px;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    cursor: pointer;
-}
-
-.indent {
-    height:100%;
-}
-
-.center {
-    display:flex;
-    align-self: center;
-}
-
-
-.folder-icon {
-    display:flex;
-    margin-right: 5px;
-}
-
-.file-icon {
-    margin-right: 5px;
-    font-size:16px;
-}
-
-.file-name {
-    color: #CCC;
-}

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

@@ -10,6 +10,7 @@ const INDENT_WIDTH = 20;
 const SELECTED_FILE_COLOR = "#00426b";
 
 import "./TreeNode.scss";
+import { useCallback } from "react";
 
 /**
  * Renders a single node in the file tree.
@@ -50,7 +51,6 @@ export const TreeNode = ({ id, node }) => {
         return style;
     }
 
-
     /**
      * Get the file icon based on the extension.
      * 
@@ -72,14 +72,13 @@ export const TreeNode = ({ id, node }) => {
         }
     }
 
-
-    const onSelectRow = () => {
-        selectNode(node.uid);
-    }
+    const onSelectRow = useCallback(() => {
+        selectNode(node);
+    }, [selectNode]);
 
     return (
         <div className="file-node-row" ref={setNodeRef} {...listeners} {...attributes} 
-            style={getRowStyle()} onClick={() => onSelectRow()}>
+            style={getRowStyle()} onClick={onSelectRow}>
             <div className="indent" style={{ width: node.level * INDENT_WIDTH + "px" }} />
             {
                 node.type === "folder" ?

package/src/components/FileBrowser/TreeNode/TreeNode.scss

@@ -2,10 +2,10 @@
     width:100%;
     min-width: 200px;
     display:flex;
-    font-size:13px;
+    font-size:14px;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     cursor: pointer;
-    height:32px;
+    height:30px;
 }
 
 .indent {

package/src/index.js

@@ -1,5 +1,4 @@
 export * from "./components/StackList";
-export * from "./components/Viewer";
 export * from "./components/FlowDiagram";
 export * from "./components/FileBrowser";
 export * from "./components/Editor";

package/src/components/Viewer/MonacoInstance/MonacoInstance.jsx

@@ -1,46 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-
-import Editor from '@monaco-editor/react';
-
-import "./MonacoInstance.scss"
-
-export const MonacoInstance = ({editorContent}) => {
-    const editorRef = useRef(null);
-
-    const content = useRef();
-
-    const handleEditorDidMount = (editor, monaco) => {
-        editorRef.current = editor;
-        if(content?.current) {
-            editorRef.current.setValue(content.current);
-        }
-    }
-
-    useEffect(() => {
-        content.current = editorContent;
-        if (editorRef?.current && content.current) {
-            editorRef.current.setValue(content.current);
-        }
-    }, [editorContent]);
-
-    return (
-        <Editor
-            defaultLanguage="python"
-            defaultValue=""
-            onMount={handleEditorDidMount}
-            theme="vs-dark"
-            options={{
-                scrollBeyondLastLine:false,
-                fontSize:"12px",
-                minimap: {
-                    enabled: false  
-                }
-            }}
-        />
-    );
-}
-
-MonacoInstance.propTypes = {
-    editorContent: PropTypes.string,
-}

package/src/components/Viewer/Tabs/Tab/Tab.jsx

@@ -1,51 +0,0 @@
-import "./Tab.scss";
-import PropTypes from 'prop-types';
-
-import { X } from "react-bootstrap-icons";
-
-const tabColors = {
-    active: "#1e1e1e",
-    disabled: "#2d2d2d"
-}
-
-/**
- * Renders the tab component.
- * 
- * The tab component displays the file name and an option 
- * to close a tab. It also sets the style for the active tab.
- * 
- * @return {JSX}
- */
-export const Tab = ({file, activeTab, selectTab, closeTab}) => {
-
-    const getTabStyle = () => {
-        return {
-            backgroundColor: (activeTab === file.key)?tabColors.active:tabColors.disabled
-        };
-    }
-
-    return (
-        <div onClick={(e) => selectTab(e, file)} className="tab" style={getTabStyle()}>
-            <div className="fileName">
-                {file.fileName}
-            </div>
-            <div className="close" onClick={(e) => {
-                e.stopPropagation();
-                closeTab(e, file);
-            }}>
-                <X style={{color:"white"}}/>
-            </div>
-        </div>
-    );
-}
-
-Tab.propTypes = {
-    file: PropTypes.shape({
-        key: PropTypes.string.isRequired,
-        fileName: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,
-        path: PropTypes.string
-    }).isRequired,
-    activeTab: PropTypes.string.isRequired,
-    selectTab: PropTypes.func.isRequired,
-    closeTab: PropTypes.func.isRequired
-}

package/src/components/Viewer/Tabs/Tab/Tab.scss

@@ -1,21 +0,0 @@
-.tab {
-    height: 100%;
-    display:flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0 5px 0 10px;
-    margin-right:2px;
-    cursor: default;
-}
-
-.fileName {
-    font-family: sans-serif;
-    font-size: 12px;
-    padding-right: 5px;
-}
-
-.close {
-    display:flex;
-    float:right;
-    cursor:pointer;
-}

package/src/components/Viewer/Tabs/Tabs.jsx

@@ -1,159 +0,0 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from 'prop-types';
-
-import {ChevronDown} from "react-bootstrap-icons";
-import {Tab} from "./Tab/Tab"
-
-import Dropdown from 'react-bootstrap/Dropdown';
-
-import 'bootstrap/dist/css/bootstrap.css';
-import "./Tabs.scss";
-
-// Dropdown needs access to the DOM node in order to position the Menu
-const SelectFileToggle = React.forwardRef(({ children, onClick }, ref) => (
-    <a ref={ref} onClick={(e) => { e.preventDefault(); onClick(e); }}>
-        {children}
-    </a>
-));
-
-/**
- * Renders the tabs component.
- * 
- * The tabs component accepts a list of files which have been flattened from
- * its system tree structure with a unique id. 
- * 
- * It allows you to add a tab, close a tab and select add new tabs using the 
- * file drop down.
- * 
- * @return {JSX}
- */
-export const Tabs = ({files, selectFile, systemTree}) => {
-
-    const [activeTab, setActiveTab] = useState(null);
-    const [tabsList, setTabsList] = useState([]);
-
-    const selectTab = (e, file) => {
-        setActiveTab(file.key);
-        selectFile(file.key)
-    }
-
-    const addTab = (key) => {
-        const currTabsList = [...tabsList];
-
-        let hasKey = currTabsList.find((tab) => tab.key === key)
-
-        if (hasKey) {
-            // Set the active tab and select the file.
-            setActiveTab(key);
-            selectFile(key);
-        } else {
-            // Add tab to the tabs list.
-            files.forEach((file, index) => {
-                if (file.key === key) {
-                    currTabsList.push(file);
-                    setActiveTab(file.key);
-                    selectFile(file.key);
-                    setTabsList(currTabsList);
-                }
-            });
-        }
-    }
-
-    const closeTab = (e, file) => {
-        e.stopPropagation();
-
-        // Get index of file in tabs list
-        const index = tabsList.indexOf(file);
-
-        // Remove the closed tab
-        const currTabsList = [...tabsList];
-        currTabsList.splice(index, 1);
-        setTabsList(currTabsList);
-
-        // Select new tab
-        if (currTabsList.length === 0) {
-            selectFile(null);
-            setActiveTab(null);
-        } else {
-            // If its the last tab, use the last tab in the new tabs list.
-            const newIndex = (index >= currTabsList.length)?currTabsList.length - 1:index;
-            setActiveTab(currTabsList[newIndex].key);
-            selectFile(currTabsList[newIndex].key);
-        }
-    }
-
-    const generateDropdown = () => {
-        const items = [];
-
-        if (!systemTree) {
-            return items;
-        }
-
-        // Build files list from system
-        for (const program in systemTree) {
-            items.push(<Dropdown.Header key={`header-${program}`}>{program}</Dropdown.Header>);
-            for (const fileName in systemTree[program]) {
-                const key = program + "_" + fileName;
-                items.push(
-                    <Dropdown.Item key={key} onClick={() => addTab(key)}>{fileName}</Dropdown.Item>
-                );
-            }
-            items.push(<Dropdown.Divider key={`divider-${program}`} />);
-        }
-
-        // Remove last divider
-        items.pop();
-
-        return items;
-    }
-
-    useEffect(() => {
-        if (files && files.length > 0) {    
-            const numFiles = Math.floor(Math.random() * files.length) + 1;
-            const newFiles = files.slice(0, numFiles);
-            setTabsList(newFiles);
-            const randomFileIndex = Math.floor(Math.random() * newFiles.length);
-            setActiveTab(newFiles[randomFileIndex].key);
-            selectFile(newFiles[randomFileIndex].key);
-        }
-    }, [files]);
-    
-    return (
-
-        <div className="tabsGutter">
-
-            <div className="tabsContainer">
-                {tabsList.map(function(file) {
-                    return <Tab 
-                        file={file} 
-                        key={file.key} 
-                        activeTab={activeTab} 
-                        selectTab={selectTab}
-                        closeTab={closeTab}
-                    />
-                })}
-            </div>
-
-            <div className="tabsDropdown">
-                {
-                    (files && files.length > 0) &&
-                    <Dropdown data-bs-theme="dark">
-                        <Dropdown.Toggle as={SelectFileToggle}>
-                            <ChevronDown className="chevron" />
-                        </Dropdown.Toggle>
-                        <Dropdown.Menu>
-                            {generateDropdown()}
-                        </Dropdown.Menu>
-                    </Dropdown>
-                }
-            </div>
-
-        </div>
-    );
-}
-
-Tabs.propTypes = {
-    files: PropTypes.array,
-    selectFile: PropTypes.func,
-    systemTree: PropTypes.object
-}

package/src/components/Viewer/Tabs/Tabs.scss

@@ -1,50 +0,0 @@
-.tabsGutter {
-    display: flex;
-    flex-direction: row;
-    width:100%;
-    height:40px;
-    background-color: #252526;
-}
-
-.tabsContainer {
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    flex-grow: 1;
-    overflow-x: auto;
-    scrollbar-gutter: stable;
-    scrollbar-color: #47474766 #1e1e1e;
-    scrollbar-width: thin;
-}
-
-.tabsDropdown {
-    float: right;
-    display: flex;
-    align-items: center;
-    color:rgb(138, 138, 138);
-    padding: 0 10px;
-    cursor:pointer;
-    height:100%;
-}
-
-.chevron {
-    color:rgb(177, 177, 177);
-}
-
-.chevron:hover {
-    color: rgb(255, 255, 255);
-}
-
-.dropdown-menu {
-    border-radius: 0 !important;
-    padding: 0 !important;
-}
-
-.dropdown-item {
-    font-size:11px;
-}
-
-.dropdown-header {
-    font-size:12px !important;
-    padding-bottom:5px !important;
-}

package/src/components/Viewer/Viewer.jsx

@@ -1,84 +0,0 @@
-import "./Viewer.scss";
-import PropTypes from 'prop-types';
-
-import { MonacoInstance } from "./MonacoInstance/MonacoInstance";
-import { useEffect, useState } from "react";
-import { Tabs } from "./Tabs/Tabs";
-
-/**
- * Renders the viewer component with support for tabs.
- * 
- * @return {JSX}
- */
-export const Viewer = ({systemTree, onFileSelect}) => {
-
-    const [files, setFiles] = useState();
-    const [fileContent, setFileContent] = useState();
-    const [editorContent, setEditorContent] = useState();
-
-    // Flatten system tree into list with necessary information for tabs component
-    useEffect(() => {
-
-        // Store the files meta and content separately
-        const files = [];
-        const content = {};
-
-        // Flatten system tree and assign key to each file in the program.
-        for (const program in systemTree) {
-            for (const filePath in systemTree[program]) {
-                const file = systemTree[program][filePath];
-                const key = program + "_" + filePath;
-                const info = {
-                    program: program,
-                    key: key,
-                    fileName: filePath.split("/").slice(-1)[0],
-                    path: filePath
-                }
-                content[key] = file.source
-                files.push(info);
-            }
-        }
-
-        if (files.length === 0) {
-            // TODO: Replace monaco editor with prompt until a tab is added
-            setEditorContent("Select file using file navigator or drop down on top right.");
-            setFileContent({});
-            setFiles([]);
-        } else {
-            setFileContent(content);
-            setFiles(files);
-        }
-
-    }, [systemTree])
-
-
-    const selectFile = (fileKey) => {
-        if (fileKey) {
-            if (files && fileContent) {
-                let file = files.find((tab) => tab.key === fileKey)
-                setEditorContent(fileContent[fileKey]);
-                if (onFileSelect && file) {
-                    onFileSelect(file);
-                }
-            }
-        } else {
-            setEditorContent("Select file using drop down on top right.");
-        }
-    }
-    
-    return (
-        <div className="viewerContainer">
-            <div className="tabContainer">
-                <Tabs files={files} selectFile={selectFile} systemTree={systemTree}/>
-            </div>
-            <div className="monacoContainer">
-                <MonacoInstance editorContent={editorContent}/>
-            </div>
-        </div>
-    );
-}
-
-Viewer.propTypes = {
-    systemTree: PropTypes.object,
-    onFileSelect: PropTypes.func
-}

package/src/components/Viewer/Viewer.scss

@@ -1,25 +0,0 @@
-.viewerContainer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right:0;
-    overflow:hidden;
-}
-
-.tabContainer{
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 40px;
-    right:0;
-}
-
-.monacoContainer{
-    position: absolute;
-    top: 40px;
-    left: 0;
-    bottom: 0;
-    right:0;
-
-}

package/src/components/Viewer/index.js

@@ -1 +0,0 @@
-export * from "./Viewer.jsx"