sample-ui-component-library 0.0.16-dev → 0.0.19-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.16-dev",
+  "version": "0.0.19-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

@@ -49,5 +49,9 @@ export const fileBrowserReducer = (state, action) => {
                 selectedNode: selectedNode
             }
         }
+
+        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

@@ -50,7 +50,6 @@ export const TreeNode = ({ id, node }) => {
         return style;
     }
 
-
     /**
      * Get the file icon based on the extension.
      * 
@@ -72,14 +71,13 @@ export const TreeNode = ({ id, node }) => {
         }
     }
 
-
     const onSelectRow = () => {
         selectNode(node.uid);
     }
 
     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 {
@@ -16,16 +16,17 @@
 .folder-icon {
     display:flex;
     margin-right: 5px;
-    align-self: center;
+    align-items: center;
 }
 
 .file-icon {
     display:flex;
     margin-right: 5px;
-    font-size:16px;
-    align-self: center;
+    align-items: center;
 }
 
 .file-name {
     color: #DDD;
+    display:flex;
+    align-items: center;
 }

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"

package/src/stories/Viewer.stories.js

@@ -1,40 +0,0 @@
-import { useEffect } from "react";
-import { Viewer } from "../components/Viewer";
-import { useArgs } from "@storybook/preview-api";
-import { action } from "@storybook/addon-actions";
-
-import fileTrees from "./data/filetree.json";
-
-import "./ViewerStories.scss"
-
-export default {
-    title: 'Viewer', 
-    component: Viewer,
-    argTypes: {}
-};
-
-const Template = (args) => {
-    const [, updateArgs] = useArgs();
-
-    const onFileSelect = (selectedFile) => {
-        action('Selected Stack Position:')(selectedFile);
-    }
-
-    useEffect(() => {
-        updateArgs({onFileSelect : onFileSelect});
-    }, []);
-
-    return (
-        <div className="viewerStoryWrapper">
-            <Viewer {...args} />
-        </div>
-    )
-}
-
-export const Default = Template.bind({})
-
-console.log(fileTrees);
-
-Default.args = {
-    systemTree: fileTrees.fileTrees
-}

package/src/stories/ViewerStories.scss

@@ -1,7 +0,0 @@
-.viewerStoryWrapper{
-    position: absolute;
-    top:0;
-    bottom:0;
-    left:0;
-    right:0;
-}