sample-ui-component-library 0.0.0

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "sample-ui-component-library",
+  "version": "0.0.0",
+  "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",
+    "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-component-library.git"
+  },
+  "author": "Vishal Palaniappan",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vishalpalaniappan/sample-component-library/issues"
+  },
+  "homepage": "https://github.com/vishalpalaniappan/sample-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-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": {
+    "asp-react-component-library": "^0.0.9"
+  }
+}

package/rollup.config.mjs

@@ -0,0 +1,35 @@
+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 { 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(),
+    ]
+}

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,43 @@
+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"
+            }}
+        />
+    );
+}
+
+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;
+}

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

@@ -0,0 +1,156 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from 'prop-types';
+
+import {ChevronDown} from "react-bootstrap-icons";
+import {Tab} from "./Tab/Tab"
+
+import Dropdown from 'react-bootstrap/Dropdown';
+
+import 'bootstrap/dist/css/bootstrap.css';
+import "./Tabs.scss";
+
+// Dropdown needs access to the DOM node in order to position the Menu
+const SelectFileToggle = React.forwardRef(({ children, onClick }, ref) => (
+    <a ref={ref} onClick={(e) => { e.preventDefault(); onClick(e); }}>
+        {children}
+    </a>
+));
+
+/**
+ * Renders the tabs component.
+ * 
+ * The tabs component accepts a list of files which have been flattened from
+ * its system tree structure with a unique id. 
+ * 
+ * It allows you to add a tab, close a tab and select add new tabs using the 
+ * file drop down.
+ * 
+ * @return {JSX}
+ */
+export const Tabs = ({files, selectFile, systemTree}) => {
+
+    const [activeTab, setActiveTab] = useState(null);
+    const [tabsList, setTabsList] = useState([]);
+
+    const selectTab = (e, file) => {
+        setActiveTab(file.key);
+        selectFile(file.key)
+    }
+
+    const addTab = (key) => {
+        const currTabsList = [...tabsList];
+
+        let hasKey = currTabsList.find((tab) => tab.key === key)
+
+        if (hasKey) {
+            // Set the active tab and select the file.
+            setActiveTab(key);
+            selectFile(key);
+        } else {
+            // Add tab to the tabs list.
+            files.forEach((file, index) => {
+                if (file.key === key) {
+                    currTabsList.push(file);
+                    setActiveTab(file.key);
+                    selectFile(file.key);
+                    setTabsList(currTabsList);
+                }
+            });
+        }
+    }
+
+    const closeTab = (e, file) => {
+        e.stopPropagation();
+
+        // Get index of file in tabs list
+        const index = tabsList.indexOf(file);
+
+        // Remove the closed tab
+        const currTabsList = [...tabsList];
+        currTabsList.splice(index, 1);
+        setTabsList(currTabsList);
+
+        // Select new tab
+        if (currTabsList.length === 0) {
+            selectFile(null);
+            setActiveTab(null);
+        } else {
+            // If its the last tab, use the last tab in the new tabs list.
+            const newIndex = (index >= currTabsList.length)?currTabsList.length - 1:index;
+            setActiveTab(currTabsList[newIndex].key);
+            selectFile(currTabsList[newIndex].key);
+        }
+    }
+
+    const generateDropdown = () => {
+        const items = [];
+
+        if (!systemTree) {
+            return items;
+        }
+
+        // Build files list from system
+        for (const program in systemTree) {
+            items.push(<Dropdown.Header key={`header-${program}`}>{program}</Dropdown.Header>);
+            for (const fileName in systemTree[program]) {
+                const key = program + "_" + fileName;
+                items.push(
+                    <Dropdown.Item key={key} onClick={() => addTab(key)}>{fileName}</Dropdown.Item>
+                );
+            }
+            items.push(<Dropdown.Divider key={`divider-${program}`} />);
+        }
+
+        // Remove last divider
+        items.pop();
+
+        return items;
+    }
+
+    useEffect(() => {
+        if (files && files.length > 0) {    
+            setTabsList(files);
+            setActiveTab(files[0].key);
+            selectFile(files[0].key);
+        }
+    }, [files]);
+    
+    return (
+
+        <div className="tabsGutter">
+
+            <div className="tabsContainer">
+                {tabsList.map(function(file) {
+                    return <Tab 
+                        file={file} 
+                        key={file.key} 
+                        activeTab={activeTab} 
+                        selectTab={selectTab}
+                        closeTab={closeTab}
+                    />
+                })}
+            </div>
+
+            <div className="tabsDropdown">
+                {
+                    (files && files.length > 0) &&
+                    <Dropdown data-bs-theme="dark">
+                        <Dropdown.Toggle as={SelectFileToggle}>
+                            <ChevronDown className="chevron" />
+                        </Dropdown.Toggle>
+                        <Dropdown.Menu>
+                            {generateDropdown()}
+                        </Dropdown.Menu>
+                    </Dropdown>
+                }
+            </div>
+
+        </div>
+    );
+}
+
+Tabs.propTypes = {
+    files: PropTypes.array,
+    selectFile: PropTypes.func,
+    systemTree: PropTypes.object
+}

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

@@ -0,0 +1,50 @@
+.tabsGutter {
+    display: flex;
+    flex-direction: row;
+    width:100%;
+    height:40px;
+    background-color: #252526;
+}
+
+.tabsContainer {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    flex-grow: 1;
+    overflow-x: auto;
+    scrollbar-gutter: stable;
+    scrollbar-color: #47474766 #1e1e1e;
+    scrollbar-width: thin;
+}
+
+.tabsDropdown {
+    float: right;
+    display: flex;
+    align-items: center;
+    color:rgb(138, 138, 138);
+    padding: 0 10px;
+    cursor:pointer;
+    height:100%;
+}
+
+.chevron {
+    color:rgb(177, 177, 177);
+}
+
+.chevron:hover {
+    color: rgb(255, 255, 255);
+}
+
+.dropdown-menu {
+    border-radius: 0 !important;
+    padding: 0 !important;
+}
+
+.dropdown-item {
+    font-size:11px;
+}
+
+.dropdown-header {
+    font-size:12px !important;
+    padding-bottom:5px !important;
+}

package/src/components/Viewer/Viewer.jsx

@@ -0,0 +1,84 @@
+import "./Viewer.scss";
+import PropTypes from 'prop-types';
+
+import { MonacoInstance } from "./MonacoInstance/MonacoInstance";
+import { useEffect, useState } from "react";
+import { Tabs } from "./Tabs/Tabs";
+
+/**
+ * Renders the viewer component with support for tabs.
+ * 
+ * @return {JSX}
+ */
+export const Viewer = ({systemTree, onFileSelect}) => {
+
+    const [files, setFiles] = useState();
+    const [fileContent, setFileContent] = useState();
+    const [editorContent, setEditorContent] = useState();
+
+    // Flatten system tree into list with necessary information for tabs component
+    useEffect(() => {
+
+        // Store the files meta and content separately
+        const files = [];
+        const content = {};
+
+        // Flatten system tree and assign key to each file in the program.
+        for (const program in systemTree) {
+            for (const filePath in systemTree[program]) {
+                const file = systemTree[program][filePath];
+                const key = program + "_" + filePath;
+                const info = {
+                    program: program,
+                    key: key,
+                    fileName: filePath.split("/").slice(-1)[0],
+                    path: filePath
+                }
+                content[key] = file.source
+                files.push(info);
+            }
+        }
+
+        if (files.length === 0) {
+            // TODO: Replace monaco editor with prompt until a tab is added
+            setEditorContent("Select file using file navigator or drop down on top right.");
+            setFileContent({});
+            setFiles([]);
+        } else {
+            setFileContent(content);
+            setFiles(files);
+        }
+
+    }, [systemTree])
+
+
+    const selectFile = (fileKey) => {
+        if (fileKey) {
+            if (files && fileContent) {
+                let file = files.find((tab) => tab.key === fileKey)
+                setEditorContent(fileContent[fileKey]);
+                if (onFileSelect && file) {
+                    onFileSelect(file);
+                }
+            }
+        } else {
+            setEditorContent("Select file using drop down on top right.");
+        }
+    }
+    
+    return (
+        <div className="viewerContainer d-flex flex-column">
+            <div>
+                <Tabs files={files} selectFile={selectFile} systemTree={systemTree}/>
+            </div>
+            <div className="d-flex flex-grow-1">
+                <MonacoInstance editorContent={editorContent}/>
+            </div>
+        </div>
+    );
+}
+
+Viewer.propTypes = {
+    systemTree: PropTypes.object,
+    onFileSelect: PropTypes.func
+}

package/src/components/Viewer/Viewer.scss

@@ -0,0 +1,5 @@
+.viewerContainer {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}

package/src/components/Viewer/index.js

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

package/src/index.js

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