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

package/src/components/FlowDiagram/helper.js

@@ -0,0 +1,60 @@
+import { MarkerType } from "@xyflow/react";
+
+const marker = {
+  type: MarkerType.ArrowClosed,
+  width: 20,
+  height: 20,
+  color: '#FF0072',
+}
+
+const arrowStyle = {
+  strokeWidth: 2,
+  stroke: '#FF0072',
+}
+
+/**
+ * Returns react flow nodes and edges from the given tree.
+ * @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, animated) => {
+    const edges = [];
+    const nodes = [];
+    Object.keys(tree).forEach((branchName, index1) => {
+        tree[branchName].forEach((node, index) => {
+
+            // Position doesn't matter, it will be set by layout algorithm
+            const flowNode = {
+                id: node,
+                flowId: node,
+                position: { x: 250, y: index * 200 },
+                data: { label: String(node) }
+            }
+
+            if (index == 0) {
+                flowNode.type = "input"
+            }
+
+            if (index > 0) {
+                const prevNode = nodes[nodes.length-1]
+                const edge = {
+                    id: prevNode.flowId + "-" + branchName + "-" + index + "-" + flowNode.flowId,
+                    source: prevNode.flowId,
+                    target: flowNode.flowId,
+                    animated: animated,
+                    markerEnd: marker,
+                    style: arrowStyle
+                }
+                edges.push(edge);
+            }
+
+            nodes.push(flowNode);
+        });
+    });
+
+    return {
+        nodes: nodes,
+        edges: edges
+    }
+}

package/src/components/FlowDiagram/index.js

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

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

@@ -32,7 +32,10 @@ export const MonacoInstance = ({editorContent}) => {
             theme="vs-dark"
             options={{
                 scrollBeyondLastLine:false,
-                fontSize:"12px"
+                fontSize:"12px",
+                minimap: {
+                    enabled: false  
+                }
             }}
         />
     );

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

@@ -109,9 +109,12 @@ export const Tabs = ({files, selectFile, systemTree}) => {
 
     useEffect(() => {
         if (files && files.length > 0) {    
-            setTabsList(files);
-            setActiveTab(files[0].key);
-            selectFile(files[0].key);
+            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]);
     

package/src/components/Viewer/Viewer.jsx

@@ -67,11 +67,11 @@ export const Viewer = ({systemTree, onFileSelect}) => {
     }
     
     return (
-        <div className="viewerContainer d-flex flex-column">
-            <div>
+        <div className="viewerContainer">
+            <div className="tabContainer">
                 <Tabs files={files} selectFile={selectFile} systemTree={systemTree}/>
             </div>
-            <div className="d-flex flex-grow-1">
+            <div className="monacoContainer">
                 <MonacoInstance editorContent={editorContent}/>
             </div>
         </div>

package/src/components/Viewer/Viewer.scss

@@ -1,5 +1,25 @@
 .viewerContainer {
-    position: relative;
-    width: 100%;
-    height: 100%;
+    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/index.js

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

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/FlowDiagram.scss

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

package/src/stories/FlowDiagram.stories.js

@@ -0,0 +1,29 @@
+import { FlowDiagram } from "../components/FlowDiagram";
+import "./FlowDiagram.scss"
+
+import sampleTree from "./data/flow/SampleTree.json";
+
+export default {
+    title: 'FlowDiagram', 
+    component: FlowDiagram,
+    argTypes: {
+        treeInfo: {
+            type: 'array'
+        }
+    }
+};
+
+const Template = (args) => {
+
+    return (
+        <div className="rootTraceContainer">
+            <FlowDiagram  {...args}/> 
+        </div>
+    )
+}
+
+export const Default = Template.bind({})
+
+Default.args = {
+    treeInfo: sampleTree
+}

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

package/src/stories/data/flow/SampleTree.json

@@ -0,0 +1,8 @@
+{
+    "orientation":"TB",
+    "data":{
+        "branch1" : ["a","b","c","p"],
+        "branch2" : ["a","b","d","x"],
+        "branch3" : ["a","f","g","x"]
+    }
+}