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

package/package.json

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

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/components/FlowDiagram/FlowDiagram.jsx

@@ -15,11 +15,11 @@ import { getLayoutInfoFromTree } from "./helper.js"
 const Flow = ({tree}) => {
   const { fitView } = useReactFlow();
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);  
 
   useEffect(() => {
     if (tree) {
-        const flowInfo = getLayoutInfoFromTree(tree.data);
+        const flowInfo = getLayoutInfoFromTree(tree.data, tree.animated ?? false);
         
         //direction: TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right.
         const layouted = getLayoutedElements(

package/src/components/FlowDiagram/helper.js

@@ -14,10 +14,11 @@ const arrowStyle = {
 
 /**
  * Returns react flow nodes and edges from the given tree.
- * @param {Object} tree 
- * @returns {Array} An array co
+ * @param {Object} tree Layout tree object.
+ * @param {boolean} animated Indicates if the edges should be animated.
+ * @returns {Array} An object containing nodes and edges arrays.
  */
-export const getLayoutInfoFromTree = (tree) => {
+export const getLayoutInfoFromTree = (tree, animated) => {
     const edges = [];
     const nodes = [];
     Object.keys(tree).forEach((branchName, index1) => {
@@ -41,7 +42,7 @@ export const getLayoutInfoFromTree = (tree) => {
                     id: prevNode.flowId + "-" + branchName + "-" + index + "-" + flowNode.flowId,
                     source: prevNode.flowId,
                     target: flowNode.flowId,
-                    animated: true,
+                    animated: animated,
                     markerEnd: marker,
                     style: arrowStyle
                 }

package/src/index.js

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

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"
+                }
+            ]
+        }
+    ]
+}

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

@@ -0,0 +1,60 @@
+{
+    "tree": [
+        {
+            "id": 1,
+            "name": "TraceViewer",
+            "type": "folder",
+            "children": [
+                {
+                    "id": 2,
+                    "name": "FileBrowser.stories.js",
+                    "type": "file"
+                },
+                {
+                    "id": 3,
+                    "name": "FileBrowserStories.scss",
+                    "type": "file"
+                },
+                {
+                    "id": 4,
+                    "name": "FlowDiagram.stories.js",
+                    "type": "file"
+                },
+                {
+                    "id": 5,
+                    "name": "FlowDiagram.scss",
+                    "type": "file"
+                }
+            ]
+        }, 
+        {
+            "id": 6,
+            "name": "Data",
+            "type": "folder",
+            "children": [
+                {
+                    "id": 7,
+                    "name": "fileTree.json",
+                    "type": "file"
+                },
+                {
+                    "id": 8,
+                    "name": "FileBrowser",
+                    "type": "folder",
+                    "children": [
+                        {
+                            "id": 9,
+                            "name": "fileTree.json",
+                            "type": "file"
+                        },
+                        {
+                            "id": 10,
+                            "name": "Tree2.json",
+                            "type": "file"
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}