sample-ui-component-library 0.0.0-beta

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "sample-ui-component-library",
+  "version": "0.0.0-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 6007",
+    "build-storybook": "storybook build",
+    "build": "rollup -c",
+    "predeploy": "npm run build-storybook",
+    "deploy-storybook": "gh-pages -d storybook-static"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vishalpalaniappan/sample-ui-component-library.git"
+  },
+  "author": "Vishal Palaniappan",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vishalpalaniappan/sample-ui-component-library/issues"
+  },
+  "homepage": "https://github.com/vishalpalaniappan/sample-ui-component-library.git",
+  "devDependencies": {
+    "@babel/core": "^7.26.10",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@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",
+    "@storybook/addon-essentials": "^8.6.8",
+    "@storybook/addon-interactions": "^8.6.8",
+    "@storybook/addon-onboarding": "^8.6.8",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
+    "@storybook/blocks": "^8.6.8",
+    "@storybook/manager-api": "^8.6.11",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^8.6.8",
+    "@storybook/react-webpack5": "^8.6.8",
+    "@storybook/test": "^8.6.11",
+    "@storybook/theming": "^8.6.11",
+    "css-loader": "^7.1.2",
+    "gh-pages": "^6.3.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.37.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.86.0",
+    "sass-loader": "^16.0.5",
+    "storybook": "^8.6.8",
+    "style-loader": "^4.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@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

@@ -0,0 +1,37 @@
+import resolve from '@rollup/plugin-node-resolve';
+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 {
+    input: 'src/index.js',
+    output: [
+        {
+            file: 'dist/cjs/index.js',
+            format: 'cjs',
+            sourcemap: true
+        },
+        {
+            file: 'dist/esm/index.js',
+            format: 'esm',
+            sourcemap: true,
+        },
+    ],
+    plugins: [
+        external(['react', 'react-dom']),
+        resolve({
+            extensions: ['.js', '.jsx'],
+        }),
+        postcss(),
+        terser(),
+        babel({
+            babelHelpers: 'bundled',
+            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);
+        
+        //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,59 @@
+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 
+ * @returns {Array} An array co
+ */
+export const getLayoutInfoFromTree = (tree) => {
+    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: true,
+                    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/StackList/StackList.jsx

@@ -0,0 +1,92 @@
+import "./StackList.scss";
+import PropTypes from 'prop-types';
+
+const ROW_STYLE =  {
+    SELECTED: "#184b2d",
+    EXCEPTION: "#420b0e",
+    SELECTED_TOP: "#4b4b18"
+}
+
+/**
+ * Renders a row in the stack list component.
+ * 
+ * @param {Number} index 
+ * @param {String} functionName 
+ * @param {String} fileName 
+ * @param {Number} lineNumber 
+ * @param {Boolean} selected 
+ * @param {Function} selectTraceItem 
+ * @param {Boolean} hasException 
+ * @return {JSX}
+ */
+const StackRow = ({index, functionName, fileName, lineNumber, selected, selectTraceItem, hasException}) => {
+
+    let style = {};
+    if (selected && index === 0) {
+        // Style for top of stack
+        style = {backgroundColor: hasException ? ROW_STYLE.EXCEPTION : ROW_STYLE.SELECTED_TOP};
+    } else if (selected) {
+        // Style for rest of stack
+        style = {backgroundColor: hasException ? ROW_STYLE.EXCEPTION : ROW_STYLE.SELECTED};
+    }
+
+    return (
+        <div className="stackRow" style={style} onClick={(e) => selectTraceItem(index)}>
+            <div className="left">
+                <span className="functionName">{functionName}</span>
+            </div>
+            <div className="right">
+                <span className="fileName">{fileName}</span>
+                <span className="lineNumber">{lineNumber}:1</span>
+            </div>
+        </div>
+    )
+}
+
+StackRow.propTypes = {
+    index: PropTypes.number,
+    functionName: PropTypes.string,
+    fileName: PropTypes.string,
+    lineNumber: PropTypes.number,
+    selected: PropTypes.bool,
+    selectTraceItem: PropTypes.func,
+    hasException: PropTypes.bool,
+}
+
+/**
+ * Renders the stack list component.
+ * 
+ * @param {Array} traces 
+ * @param {Function} selectTraceItem 
+ * @return {JSX}
+ */
+export const StackList = ({traces, selectTraceItem}) => {
+
+    const generateStackList = () => {
+        const traceList = traces.map((trace, index) => {
+            return <StackRow 
+                key={`${trace.fileName}-${trace.lineNumber}-${trace.functionName}-${index}`}
+                functionName={trace.functionName}
+                fileName={trace.fileName}
+                lineNumber={trace.lineNumber}     
+                selected={trace.selected}  
+                hasException={trace.hasException}
+                index={index}    
+                selectTraceItem={selectTraceItem}
+            />
+        }
+        );
+        return traceList;
+    }
+    
+    return (
+        <div className="stackContainer">
+            {generateStackList()}
+        </div>
+    );
+}
+
+StackList.propTypes = {
+    traces: PropTypes.array,
+    selectTraceItem: PropTypes.func,
+}

package/src/components/StackList/StackList.scss

@@ -0,0 +1,51 @@
+
+
+.stackContainer {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+    scrollbar-color: rgba(71, 71, 71, .4) #252526;
+    scrollbar-width: thin;
+    font-size: 13px;
+    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.stackRow {
+    display: flex;
+    justify-content: space-between;
+    height: 30px;
+    align-items: center;
+    color:white;
+    padding: 0 20px;
+}
+
+.stackRow:hover {
+    cursor: pointer;
+    background-color: #2a2d2e;
+}
+
+.stackRow > .left {
+    display: flex;
+}
+
+.stackRow > .right {
+    display: flex;
+}
+
+.functionName {
+    color: #fff;
+}
+
+.fileName {
+    color: #ccc;
+    font-size:11px;
+}
+
+.lineNumber {
+    background:#4d4d4d;
+    color:#b0ccc3;
+    border-radius:5px;
+    margin-left:10px;
+    padding:0px 5px;
+}

package/src/components/StackList/index.js

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

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

@@ -0,0 +1,46 @@
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import Editor from '@monaco-editor/react';
+
+import "./MonacoInstance.scss"
+
+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/Viewer/Tabs/Tab/Tab.jsx

@@ -0,0 +1,51 @@
+import "./Tab.scss";
+import PropTypes from 'prop-types';
+
+import { X } from "react-bootstrap-icons";
+
+const tabColors = {
+    active: "#1e1e1e",
+    disabled: "#2d2d2d"
+}
+
+/**
+ * Renders the tab component.
+ * 
+ * The tab component displays the file name and an option 
+ * to close a tab. It also sets the style for the active tab.
+ * 
+ * @return {JSX}
+ */
+export const Tab = ({file, activeTab, selectTab, closeTab}) => {
+
+    const getTabStyle = () => {
+        return {
+            backgroundColor: (activeTab === file.key)?tabColors.active:tabColors.disabled
+        };
+    }
+
+    return (
+        <div onClick={(e) => selectTab(e, file)} className="tab" style={getTabStyle()}>
+            <div className="fileName">
+                {file.fileName}
+            </div>
+            <div className="close" onClick={(e) => {
+                e.stopPropagation();
+                closeTab(e, file);
+            }}>
+                <X style={{color:"white"}}/>
+            </div>
+        </div>
+    );
+}
+
+Tab.propTypes = {
+    file: PropTypes.shape({
+        key: PropTypes.string.isRequired,
+        fileName: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,
+        path: PropTypes.string
+    }).isRequired,
+    activeTab: PropTypes.string.isRequired,
+    selectTab: PropTypes.func.isRequired,
+    closeTab: PropTypes.func.isRequired
+}

package/src/components/Viewer/Tabs/Tab/Tab.scss

@@ -0,0 +1,21 @@
+.tab {
+    height: 100%;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 5px 0 10px;
+    margin-right:2px;
+    cursor: default;
+}
+
+.fileName {
+    font-family: sans-serif;
+    font-size: 12px;
+    padding-right: 5px;
+}
+
+.close {
+    display:flex;
+    float:right;
+    cursor:pointer;
+}