sample-ui-component-library 0.0.2-beta → 0.0.2-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.2-beta",
+  "version": "0.0.2-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",
@@ -63,6 +63,7 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
+    "@dnd-kit/core": "^6.3.1",
     "@monaco-editor/react": "^4.7.0",
     "@xyflow/react": "^12.6.0",
     "bootstrap": "^5.3.4",

package/src/components/Editor/Editor.jsx

@@ -0,0 +1,59 @@
+import "./Editor.scss";
+import PropTypes from 'prop-types';
+
+import { MonacoInstance } from "./MonacoInstance/MonacoInstance";
+import { EditorTabs } from "./EditorTabs/EditorTabs";
+import { useEffect, useState } from "react";
+
+/**
+ * Renders the editor component with support for tabs.
+ * 
+ * @return {JSX}
+ */
+export const Editor = ({systemTree, onFileSelect}) => {
+
+    const [editorContent, setEditorContent] = useState("asdf");
+    
+    const [activeTab, setActiveTab] = useState();
+    const [tabs, setTabs] = useState([
+        { id: "tab1", label: "Tab 1" },
+        { id: "tab2", label: "Tab 2" },
+        { id: "tab3", label: "Tab 3" },
+    ]);
+
+    useEffect(() => {
+        if (activeTab) {
+            setEditorContent(tabs[activeTab - 1].label);
+        }
+    }, [activeTab]);
+
+    
+    useEffect(() => {
+        if (tabs) {
+            if ((activeTab && activeTab > tabs.length) || activeTab == null) {
+                setActiveTab(tabs.length);
+            }
+        }
+    }, [tabs]);
+
+    const onTabClick = (event) => {
+        const tabIndex = tabs.findIndex(obj => obj.id === event.target.id);
+        setActiveTab(tabIndex + 1);
+    }
+    
+    return (
+        <div className="editorContainer">
+            <div className="tabContainer">
+                <EditorTabs activeTab={1} tabs={tabs} selectTab={onTabClick} />
+            </div>
+            <div className="monacoContainer">
+                <MonacoInstance editorContent={editorContent}/>
+            </div>
+        </div>
+    );
+}
+
+Editor.propTypes = {
+    systemTree: PropTypes.object,
+    onFileSelect: PropTypes.func
+}

package/src/components/Editor/Editor.scss

@@ -0,0 +1,16 @@
+.editorContainer {
+    width:100%;
+    height:100%;
+    display:flex;
+    flex-direction:column;
+    overflow:hidden;
+}
+
+.tabContainer{
+    width:100%;
+    height: 40px;
+}
+
+.monacoContainer{
+    flex-grow: 1;
+}

package/src/components/Editor/EditorTabs/EditorTabs.jsx

@@ -0,0 +1,76 @@
+import "./EditorTabs.scss";
+import PropTypes from "prop-types";
+
+import { useEffect, useState } from "react";
+import {
+    DndContext,
+    DragOverlay,
+    useDraggable,
+    useDroppable,
+} from "@dnd-kit/core";
+
+/**
+ * Tab Component
+ * @param {String} id 
+ * @param {String} label 
+ * @returns 
+ */
+function Tab({id, label, onSelectTab}) {
+    const { attributes, listeners, setNodeRef, transform } = useDraggable({id});
+    
+    return (
+        <div ref={setNodeRef} id={id} onClick={onSelectTab} className="tab" {...listeners} {...attributes}>
+            {label}
+        </div>
+    );
+}
+
+/**
+ * Tab Gutter Component
+ * @param {String} id 
+ * @returns 
+ */
+function Gutter({id}) {
+    const { setNodeRef, isOver } = useDroppable({id});
+    return (
+        <div
+            className="gutter"
+            ref={setNodeRef}
+            style={{background: isOver ? "white" : "#4da3ff33"}}
+        ></div>
+    );
+}
+
+/**
+ * Tabs component.
+ * @param {Object} activeTab 
+ * @param {Array} tabs 
+ * @returns 
+ */
+export const EditorTabs = ({activeTab, tabs, selectTab}) => {
+
+    const [tabsList, setTabsList] = useState();
+
+    useEffect(() => {
+        if (tabs) {
+            const list = [];
+            tabs.forEach((tab, index) => {
+                list.push(
+                    <>
+                        <Gutter id={tab.id} />
+                        <Tab onSelectTab={selectTab} key={tab.id} {...tab} />
+                    </>
+                );
+            })
+            setTabsList(list);
+        }
+    }, [tabs]);
+
+    return (
+        <div style={{ display: "flex", background: "#222425" }}>
+            {tabsList}
+        </div>
+    );
+};
+
+EditorTabs.propTypes = {};

package/src/components/Editor/EditorTabs/EditorTabs.scss

@@ -0,0 +1,22 @@
+.tabs {
+    display: flex;
+    flex-direction: row;
+    background-color: #1e1e1e;
+    height: 100%;
+    width: 100%;
+}
+
+.tab {
+    padding: 0px 20px;
+    background-color: #2d2d2d;
+    color: #fff;
+    cursor: pointer;
+    height: 40px;
+    display:flex;
+    align-items: center;
+}
+
+.gutter {
+    height: 40px;
+    width: 1px;
+}

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

@@ -0,0 +1,66 @@
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import Editor from '@monaco-editor/react';
+
+import "./MonacoInstance.scss"
+
+function Gutter({ id }) {
+    const { setNodeRef, isOver } = useDroppable({
+        id,
+    });
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={{
+                height: 40,
+                width: 1,
+                background: isOver ? "white" : "#4da3ff33",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+            }}
+        ></div>
+    );
+}
+
+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/Editor/index.js

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

package/src/components/FileBrowser/FileBrowser.jsx

@@ -0,0 +1,127 @@
+import { useEffect, useState, useRef, useLayoutEffect, useCallback } from "react";
+import "./FileBrowser.scss";
+
+import { setDefaultCollapsed, collapseTree, selectNode, flattenTree } from "./helper";
+
+import { FileCode, ChevronRight, ChevronDown, Braces, FiletypeScss, FiletypeJs, FiletypePy} from "react-bootstrap-icons";
+import PropTypes from 'prop-types';
+
+const INDENT_WIDTH = 20;
+const SELECTED_FILE_COLOR = "#00426b";
+
+/**
+ * Used for creating a stable callback function.
+ */
+function useEvent(fn) {
+    const fnRef = useRef(fn);
+
+    useLayoutEffect(() => {
+        fnRef.current = fn;
+    });
+
+    return useCallback((...args) => {
+        return fnRef.current(...args);
+    }, []);
+}
+
+/**
+ * Renders a single node in the file tree.
+ */
+const TreeNode = ({node, onRowClick}) => {
+    /**
+     * Gets the appropriate icon for the node based on its type and collapsed state.
+     * @returns <JSX>
+     */
+    const getCollapsedIcon = () => {
+        if (node.collapsed) {
+            return <ChevronRight />;
+        } else {
+            return <ChevronDown />;
+        }
+    }
+
+    /**
+     * Sets the background color of the row if the node is selected.
+     */
+    const getRowStyle = () => {
+        if (node.selected) {
+            return {"backgroundColor": SELECTED_FILE_COLOR};
+        }
+    }
+
+
+    /**
+     * Get the file icon based on the extension.
+     * 
+     * TODO: This can be improved by having a mapping of extensions to icons and color.
+     */
+    const getFileIcon = () => {
+        const extension = node.name.split('.').pop();
+        switch (extension) {
+            case "js":
+                return <FiletypeJs color="#f1e05a" />;
+            case "json":
+                return <Braces color="#fffb00" />;
+            case "scss":
+                return <FiletypeScss color="#f12727" />;
+            case "py":
+                return <FiletypePy color="#686affbd" />;
+            default:
+                return <FileCode color="#ffffff" />;
+        }
+    }
+
+    return (
+        <div className="file-node-row" style={getRowStyle()} onClick={() => onRowClick(node)}>
+            <div className="indent" style={{ width: node.level * INDENT_WIDTH + "px"}} />
+            {
+                node.type === "folder" ? 
+                <span className="center folder-icon">{getCollapsedIcon()}</span> :
+                <span className="center file-icon">{getFileIcon()}</span>
+            }
+            <span className="center file-name">{node.name}</span>
+        </div>
+    )
+}
+
+/**
+ * Renders a file browser.
+ * 
+ * @return {JSX}
+ */
+export const FileBrowser = ({tree, onNodeSelect}) => {
+
+    const [nodes, setNodes] = useState([]);
+    const treeRef = useRef();
+
+    const handleFileClick = useEvent((node) => {
+        selectNode(treeRef.current, node);
+        drawTree();
+        if (onNodeSelect) {
+            onNodeSelect(node);
+        }
+    });
+
+    useEffect(() => {
+        treeRef.current = flattenTree(tree);
+        setDefaultCollapsed(treeRef.current);
+        drawTree();
+    }, []);
+
+    /**
+     * Draws the tree given the nodes and the collapsed state of each node.
+     */
+    const drawTree = () => {
+        const nodes = collapseTree(treeRef.current);
+        const rows = [];
+        nodes.forEach((node) => {
+            rows.push(<TreeNode key={node.id} node={node} onRowClick={handleFileClick}/>);
+        });
+        setNodes(rows);
+    }
+    return (
+        <div className="file-browser">
+            {nodes}
+        </div>
+    )
+}

package/src/components/FileBrowser/FileBrowser.scss

@@ -0,0 +1,40 @@
+.file-browser{
+    width: 100%;
+    height:100%;
+    padding:5px;
+    color:white;
+}
+
+.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/helper.js

@@ -0,0 +1,70 @@
+/**
+ * Sets the default collapsed state to false.
+ */
+export const setDefaultCollapsed = (tree) => {
+    tree.forEach((node) => {
+        node.collapsed = false;
+    });
+}
+
+
+/**
+ * Given a file tree, it flattens the tree into a list of nodes with the level of each node in the tree.
+ * 
+ * @param {Array} tree - The file tree to flatten.
+ * @param {number} level - The current level of the tree (used for indentation).
+ * @return {Array} - The flattened tree with level information.
+ */
+export const flattenTree = (tree, level) => {
+    if (!level) {
+        level = 0;
+    }
+    let rows = [];
+    for (let i = 0; i < tree.length; i++) {
+        const node = tree[i];
+        node.level = level;
+        rows.push(node);
+        if (node?.children) {
+            rows = rows.concat(flattenTree(node.children, level + 1));
+        }
+    }
+    return rows;
+}
+
+/**
+ * Draws the tree given the nodes and the collapsed state of each node.
+ */
+export const collapseTree = (tree) => {
+    const rows = [];
+
+    let collapsing, collapseLevel;
+    for (let i = 0; i < tree.length; i++) {
+
+        if (collapsing) {
+            if (tree[i].level <= collapseLevel) {
+                collapsing = false;
+            } else {
+                continue;
+            }
+        }
+
+        if (tree[i].collapsed) {
+            collapsing = true;
+            collapseLevel = tree[i].level;
+        }
+
+        rows.push(tree[i]);
+    }
+    return rows;
+}
+
+/**
+ * Selects the given node and deselects all other nodes in the tree.
+ */
+export const selectNode = (tree, node) => {
+    tree.forEach((n) => {
+        n.selected = false;
+    });
+    node.selected = true;
+    node.collapsed = !node.collapsed;
+}

package/src/components/FileBrowser/index.js

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

package/src/index.js

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

package/src/stories/Editor.stories.js

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

package/src/stories/EditorStories.scss

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

package/src/stories/FileBrowser.stories.js

@@ -0,0 +1,48 @@
+import { useEffect } from "react";
+import { FileBrowser } from "../components/FileBrowser";
+import { useArgs } from "@storybook/preview-api";
+import { action } from "@storybook/addon-actions";
+
+import FileTree1 from "./data/FileBrowser/Tree1.json"
+import FileTree2 from "./data/FileBrowser/Tree2.json"
+
+import "./FileBrowserStories.scss"
+
+export default {
+    title: 'FileBrowser', 
+    component: FileBrowser,
+    argTypes: {}
+};
+
+
+const Template = (args) => {
+    const [, updateArgs] = useArgs();
+
+    const onNodeSelect = (selectedFile) => {
+        action('Selected Node:')(selectedFile);
+    }
+
+    useEffect(() => {
+        updateArgs({onNodeSelect : onNodeSelect});
+    }, []);
+
+    return (
+        <div className="viewerStoryWrapper">
+            <div className="file-browser">
+                <FileBrowser {...args} />
+            </div>
+        </div>
+    )
+}
+
+export const Default = Template.bind({});
+
+Default.args = {
+    tree: FileTree1.tree
+}
+
+export const Tree2 = Template.bind({});
+
+Tree2.args = {
+    tree: FileTree2.tree
+}

package/src/stories/FileBrowserStories.scss

@@ -0,0 +1,19 @@
+.viewerStoryWrapper{
+    position: absolute;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    display:flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.viewerStoryWrapper > .file-browser{
+    height: 300px;
+    background-color: #333;
+    overflow: auto;
+    scrollbar-gutter: stable;
+    scrollbar-color: #47474766 #252526;
+    scrollbar-width: thin;
+}

package/src/stories/data/FileBrowser/Tree1.json

@@ -0,0 +1,57 @@
+{
+    "tree": [
+        {
+            "id": 1,
+            "name": "root",
+            "type": "folder",
+            "children": [
+                {
+                    "id": 2,
+                    "name": "TraceViewer",
+                    "type": "folder",
+                    "children": [
+                        {
+                            "id": 3,
+                            "name": "file1.js",
+                            "type": "file"
+                        },
+                        {
+                            "id": 4,
+                            "name": "fileTree.json",
+                            "type": "file"
+                        }
+                    ]
+                },
+                {
+                    "id": 5,
+                    "name": "LogInjector",
+                    "type": "folder",
+                    "children": [
+                        {
+                            "id": 6,
+                            "name": "injector.py",
+                            "type": "file"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "id": 7,
+            "name": "sample.py",
+            "type": "file"
+        },
+        {
+            "id": 8,
+            "name": "DesignViewer",
+            "type": "folder",
+            "children": [
+                {
+                    "id": 9,
+                    "name": "test.js",
+                    "type": "file"
+                }
+            ]
+        }
+    ]
+}