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

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.0",
+  "version": "0.0.2-beta",
   "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",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build",
     "build": "rollup -c",
     "predeploy": "npm run build-storybook",
@@ -14,14 +14,14 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/vishalpalaniappan/sample-component-library.git"
+    "url": "git+https://github.com/vishalpalaniappan/sample-ui-component-library.git"
   },
   "author": "Vishal Palaniappan",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/vishalpalaniappan/sample-component-library/issues"
+    "url": "https://github.com/vishalpalaniappan/sample-ui-component-library/issues"
   },
-  "homepage": "https://github.com/vishalpalaniappan/sample-component-library.git",
+  "homepage": "https://github.com/vishalpalaniappan/sample-ui-component-library.git",
   "devDependencies": {
     "@babel/core": "^7.26.10",
     "@babel/preset-env": "^7.26.9",
@@ -29,6 +29,7 @@
     "@chromatic-com/storybook": "^3.2.6",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-terser": "^0.4.4",
     "@storybook/addon-actions": "^8.6.11",
@@ -61,6 +62,11 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "asp-react-component-library": "^0.0.9"
+    "@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/rollup.config.mjs

@@ -3,6 +3,7 @@ import commonjs from '@rollup/plugin-commonjs';
 import terser from '@rollup/plugin-terser';
 import external from 'rollup-plugin-peer-deps-external';
 import postcss from 'rollup-plugin-postcss';
+import json from '@rollup/plugin-json';
 import { babel } from '@rollup/plugin-babel';
 
 export default {
@@ -31,5 +32,6 @@ export default {
             exclude: 'node_modules/**',
         }),
         commonjs(),
+        json()
     ]
 }

package/src/components/FlowDiagram/DagreLayout.js

@@ -0,0 +1,33 @@
+
+import Dagre from '@dagrejs/dagre';
+
+export const getLayoutedElements = (nodes, edges, options) => {
+    // Reference: https://reactflow.dev/learn/layouting/layouting
+
+    const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+    g.setGraph({ rankdir: options.direction, ranksep: 100, nodesep: 170});
+   
+    edges.forEach((edge) => g.setEdge(edge.source, edge.target));
+    nodes.forEach((node) =>
+      g.setNode(node.id, {
+        ...node,
+        width: node.measured?.width ?? 0,
+        height: node.measured?.height ?? 0,
+      }),
+    );
+   
+    Dagre.layout(g);
+   
+    return {
+      nodes: nodes.map((node) => {
+        const position = g.node(node.id);
+        // We are shifting the dagre node position (anchor=center center) to the top left
+        // so it matches the React Flow node anchor point (top left).
+        const x = position.x - (node.measured?.width ?? 0) / 2;
+        const y = position.y - (node.measured?.height ?? 0) / 2;
+   
+        return { ...node, position: { x, y } };
+      }),
+      edges,
+    };
+};

package/src/components/FlowDiagram/FlowDiagram.jsx

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+  ReactFlow,
+  ReactFlowProvider,
+  useNodesState,
+  useEdgesState,
+  Controls,
+  useReactFlow
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+
+import { getLayoutedElements } from "./DagreLayout.js";
+import { getLayoutInfoFromTree } from "./helper.js"
+
+const Flow = ({tree}) => {
+  const { fitView } = useReactFlow();
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);  
+
+  useEffect(() => {
+    if (tree) {
+        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(
+            flowInfo.nodes,
+            flowInfo.edges,
+            {direction:tree.orientation}
+        );
+
+        setNodes([...layouted.nodes]);
+        setEdges([...layouted.edges]);
+
+        fitView();
+    }
+  }, [tree]);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      colorMode={"dark"}
+      fitView
+    >
+      <Controls />
+    </ReactFlow>
+  );
+};
+
+export const FlowDiagram = ({treeInfo}) => {
+  const [tree, setTree] = useState();
+
+  useEffect(() => {
+    setTree(treeInfo)
+  }, [treeInfo])
+
+  return (
+    <ReactFlowProvider>
+      <Flow tree={tree} />
+    </ReactFlowProvider>
+  );
+}

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,3 @@
 export * from "./components/StackList";
-export * from "./components/Viewer";
+export * from "./components/Viewer";
+export * from "./components/FlowDiagram";

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