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

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.0",
+  "version": "0.0.1-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",
   "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,12 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "asp-react-component-library": "^0.0.9"
+    "@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",
+    "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/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/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>
+  );
+}