sample-ui-component-library 0.0.7-dev → 0.0.8-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.7-dev",
+  "version": "0.0.8-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",
@@ -27,6 +27,7 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@chromatic-com/storybook": "^3.2.6",
+    "@dnd-kit/core": "^6.3.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-json": "^6.1.0",
@@ -47,6 +48,7 @@
     "css-loader": "^7.1.2",
     "gh-pages": "^6.3.0",
     "prop-types": "^15.8.1",
+    "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^4.37.0",

package/src/components/Editor/Editor.jsx

@@ -2,58 +2,93 @@ import "./Editor.scss";
 import PropTypes from 'prop-types';
 
 import { MonacoInstance } from "./MonacoInstance/MonacoInstance";
-import { EditorTabs } from "./EditorTabs/EditorTabs";
-import { useEffect, useState } from "react";
+import { Tabs } from "./Tabs/Tabs";
+import { TabPreview } from "./Tabs/Tab/Tab";
+import React, {
+    forwardRef,
+    useCallback,
+    useImperativeHandle,
+    useMemo,
+    useReducer,
+    useContext
+} from "react";
+
+import { EditorContext } from "./EditorContext";
+
+import { editorReducer, initialState } from "./EditorReducer";
 
 /**
  * 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(activeTab.label);
-        }
-    }, [activeTab]);
-
-    
-    useEffect(() => {
-        if (tabs) {
-            if ((activeTab && activeTab > tabs.length) || activeTab == null) {
-                setActiveTab(tabs[tabs.length - 1]);
-            }
+export const Editor = forwardRef(({ }, ref) => {
+    const [state, dispatch] = useReducer(editorReducer, initialState);
+
+    const selectTab = useCallback((id) => {
+        dispatch({ type: "SELECT_TAB", payload: id });
+    }, []);
+
+    const closeTab = useCallback((id) => {
+        dispatch({ type: "CLOSE_TAB", payload: id });
+    }, []);
+
+    const moveTab = useCallback((tabId, newIndex) => {
+        dispatch({ type: "MOVE_TAB", payload: { tabId, newIndex } });
+    }, []);
+
+    const addTab = useCallback((tab) => {
+        dispatch({ type: "ADD_TAB", payload: tab });
+    }, []);
+
+    const setTabGroupId = useCallback((id) => {
+        dispatch({ type: "SET_PARENT_TAB_GROUP_ID", payload: id });
+    }, []);
+
+    const getPreviewElement = useCallback((tabId) => {
+        // Get the preview element for a tab by its id for use in drag-and-drop operations.
+        const tab = state.tabs.find(t => t.uid === tabId);
+        if (!tab) {
+            console.error(`getPreviewElement: tab with id ${tabId} not found.`);
+            return null;
         }
-    }, [tabs]);
+        return <TabPreview info={{ label: tab.name }} />;
+    }, [state]);
+
+    const api = useMemo(() => {
+        return {
+            state,
+            addTab,
+            setTabGroupId,
+            selectTab,
+            closeTab,
+            moveTab,
+            getPreviewElement
+        };
+    }, [state, addTab, selectTab, closeTab, moveTab, getPreviewElement, setTabGroupId]);
+
+    useImperativeHandle(ref, () => api, [api]);
 
-    const onTabClick = (event) => {
-        const tab = tabs.find(obj => obj.id === event.target.id);
-        setActiveTab(tab);
-    }
-    
     return (
-        <div className="editorContainer">
-            <div className="tabContainer">
-                <EditorTabs activeTab={activeTab} tabs={tabs} selectTab={onTabClick} />
-            </div>
-            <div className="monacoContainer">
-                <MonacoInstance editorContent={editorContent}/>
+        <EditorContext.Provider value={api}>
+            <div className="editorContainer">
+                <div className="tabContainer">
+                    <Tabs />
+                </div>
+                <div className="monacoContainer">
+                    <MonacoInstance />
+                </div>
             </div>
-        </div>
+        </EditorContext.Provider>
     );
-}
+});
+
+Editor.displayName = "Editor";
 
-Editor.propTypes = {
-    systemTree: PropTypes.object,
-    onFileSelect: PropTypes.func
+export function useEditor() {
+  const ctx = useContext(EditorContext);
+  if (!ctx) {
+    throw new Error("useEditor must be used inside <Editor>");
+  }
+  return ctx;
 }

package/src/components/Editor/Editor.scss

@@ -5,6 +5,7 @@
     display:flex;
     flex-direction:column;
     overflow:hidden;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 .tabContainer{

package/src/components/Editor/EditorContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const EditorContext = createContext();

package/src/components/Editor/EditorReducer.js

@@ -0,0 +1,88 @@
+export const initialState = {
+  tabs: [],
+  activeTab: null,
+  parentTabGroupId: null
+};
+
+export const editorReducer = (state, action) => {
+    switch (action.type) {
+
+        case "ADD_TAB": {
+            // TODO: Add some validation for the payload here.
+            return {
+                ...state,
+                tabs: [...state.tabs, action.payload],
+                activeTab: action.payload
+            };
+        }
+
+        case "SET_PARENT_TAB_GROUP_ID": {
+            return {
+                ...state,
+                parentTabGroupId: action.payload
+            };
+        }
+
+        case "SELECT_TAB": {
+            const tab = state.tabs.find(obj => obj.uid === action.payload);
+            if (!tab) {
+                console.error(`Tab with id ${action.payload} not found.`);
+                return state;
+            }
+            return {
+                ...state,
+                activeTab: tab
+            };
+        }
+
+        case "CLOSE_TAB": {
+            const ind = state.tabs.findIndex(obj => obj.uid === action.payload);
+            if (ind === -1) {
+                console.warn(`Tab with id ${action.payload} not found.`);
+                return state;
+            }
+            const newTabs = [...state.tabs];
+            newTabs.splice(ind, 1);
+
+            // If active tab is closed, select the next tab if it exists, otherwise select the previous tab.
+            let activeTab = state.activeTab;
+            const isActiveTabClosed = state.activeTab && state.activeTab.uid === action.payload;
+            if (isActiveTabClosed && ind < newTabs.length) {
+                activeTab = newTabs[Math.max(0, ind)];
+            } else if (isActiveTabClosed && ind >= newTabs.length) {
+                activeTab = newTabs.length > 0 ? newTabs[newTabs.length - 1] : null;
+            }
+
+            return {
+                ...state,
+                tabs: newTabs,
+                activeTab: activeTab
+            };
+        }
+
+        case "MOVE_TAB": {
+            const prevTabs = [...state.tabs];
+            const { tabId, newIndex } = action.payload;
+            const oldIndex = prevTabs.findIndex(t => t.uid === tabId);
+            if (oldIndex === -1) {
+                console.warn(`Tab with id ${tabId} not found.`);
+                return state;
+            }
+            if (newIndex - 1 === oldIndex || newIndex === oldIndex) return state;
+
+            // Remove the tab from its old position and insert it into the new position.
+            const [tabToMove] = prevTabs.splice(oldIndex, 1);
+            const adjustedNewIndex = (oldIndex < newIndex) ? newIndex - 1 : newIndex;
+            prevTabs.splice(adjustedNewIndex, 0, tabToMove);
+
+            return {
+                ...state,
+                tabs: prevTabs
+            };
+        }
+
+        default: {
+            return state;
+        }
+    }
+}

package/src/components/Editor/MonacoInstance/MonacoInstance.jsx

@@ -5,60 +5,82 @@ import Editor from '@monaco-editor/react';
 
 import "./MonacoInstance.scss"
 
-function Gutter({ id }) {
-    const { setNodeRef, isOver } = useDroppable({
-        id,
-    });
+import { useEditor } from "../Editor";
 
-    return (
-        <div
-            ref={setNodeRef}
-            style={{
-                height: 40,
-                width: 1,
-                background: isOver ? "white" : "#4da3ff33",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-            }}
-        ></div>
-    );
-}
+export const MonacoInstance = ({ }) => {
+    const { state } = useEditor();
+    const [editorContent, setEditorContent] = useState("Loading content...");
+    const [showEditor, setShowEditor] = useState(false);
 
-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(() => {
+        if (state.activeTab) {
+            setEditorContent(state.activeTab.content);
+            setShowEditor(true);
+        } else {
+            setShowEditor(false);
         }
-    }
+    }, [state.activeTab]);
 
     useEffect(() => {
         content.current = editorContent;
-        if (editorRef?.current && content.current) {
+        if (editorRef?.current && content.current !== undefined && content.current !== null) {  
             editorRef.current.setValue(content.current);
         }
     }, [editorContent]);
 
+    /**
+     * Callback for when the Monaco Editor is mounted. 
+     * @param {Object} editor 
+     * @param {Object} monaco 
+     */
+    const handleEditorDidMount = (editor, monaco) => {
+        editorRef.current = editor;
+        if (content?.current) {
+            editorRef.current.setValue(content.current);
+        }
+    }
+
+    // Editor options for Monaco Editor.
+    const editorOptions = {
+        scrollBeyondLastLine: false,
+        fontSize: "13px",
+        minimap: {
+            enabled: false
+        },
+        padding: {
+            top: 20,
+            bottom: 10
+        }
+    }
+
+    /**
+     * Render the editor if there is an active tab, otherwise render a placeholder message.
+     * @returns JSX
+     */
+    const renderEditor = () => {
+        if (showEditor) {
+            return (
+                <Editor
+                    defaultLanguage="python"
+                    defaultValue={editorContent}
+                    onMount={handleEditorDidMount}
+                    theme="vs-dark"
+                    options={editorOptions}
+                />
+            );
+        } else {
+            return <div className="no-tab">Select file or drag and drop to view.</div>;
+        }
+    }
+
     return (
-        <Editor
-            defaultLanguage="python"
-            defaultValue=""
-            onMount={handleEditorDidMount}
-            theme="vs-dark"
-            options={{
-                scrollBeyondLastLine:false,
-                fontSize:"12px",
-                minimap: {
-                    enabled: false  
-                }
-            }}
-        />
-    );
+        <>
+            {renderEditor()}
+        </>
+    )
 }
 
 MonacoInstance.propTypes = {

package/src/components/Editor/MonacoInstance/MonacoInstance.scss

@@ -0,0 +1,8 @@
+.no-tab {
+    background-color: #1e1e1e;
+    color:#6b6b6b;
+    height:100%;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+}

package/src/components/Editor/Tabs/Gutter/Gutter.jsx

@@ -0,0 +1,35 @@
+import { useDroppable } from "@dnd-kit/core";
+
+import PropTypes from "prop-types";
+
+import "./Gutter.scss";
+
+const GUTTER_ACTIVE_COLOR = "#FFFFFF";
+const GUTTER_INACTIVE_COLOR = "#222425";
+
+export const Gutter = ({ id, index, parentId }) => {
+    
+    // Droppable area used by dnd kit.
+    const { setNodeRef, isOver } = useDroppable({
+        id,
+        data: {
+            type: "tab-gutter",
+            parentId: parentId,
+            index: index,
+        },
+    });
+    
+    const style = {
+        backgroundColor: isOver ? GUTTER_ACTIVE_COLOR : GUTTER_INACTIVE_COLOR,
+    }
+
+    return (
+        <div className="gutter" ref={setNodeRef} style={style}></div>
+    );
+}
+
+Gutter.propTypes = {
+    id: PropTypes.string.isRequired,
+    parentId: PropTypes.string.isRequired,
+    index: PropTypes.number.isRequired,
+}

package/src/components/Editor/Tabs/Gutter/Gutter.scss

@@ -0,0 +1,5 @@
+.gutter {
+    min-width: 2px;
+    height: 40px;
+    width: 2px;
+}

package/src/components/Editor/Tabs/Tab/Tab.jsx

@@ -0,0 +1,89 @@
+import { useEffect, useState } from "react";
+import { FileEarmark, XLg } from "react-bootstrap-icons";
+import { useDraggable } from "@dnd-kit/core";
+import PropTypes from "prop-types";
+
+import { useEditor } from "../../Editor";
+
+import "./Tab.scss";
+
+const ACTIVE_TAB_BG_COLOR = "#1e1e1e";
+const INACTIVE_TAB_BG_COLOR = "#2d2d2d";
+const ACTIVE_TAB_FG_COLOR = "#FFFFFF";
+const INACTIVE_TAB_FG_COLOR = "#969690";
+
+/**
+ * Tab Component. Renders a single tab with the provided id and label. 
+ * Also handles the click events for selecting and closing the tab.
+ * @param {String} id
+ * @param {String} label
+ * @returns
+ */
+export const Tab = ({ id, parentId, node }) => {
+    const [tabStyle, setTabStyle] = useState();
+
+    const { selectTab, closeTab, state } = useEditor();
+
+    // Saves ID of tab and parent tab group for drag and drop context in dnd kit.
+    const { attributes, listeners, setNodeRef, transform } = useDraggable({
+        id,
+        data: {
+            type: "tab-draggable",
+            parentId: parentId,
+            node: node
+        },
+    });
+
+    useEffect(() => {
+        renderTab(state.activeTab && state.activeTab.uid === id);
+    }, [state.activeTab]);
+
+    const renderTab = (isActive) => {
+        const bgColor = isActive ? ACTIVE_TAB_BG_COLOR : INACTIVE_TAB_BG_COLOR;
+        const fgColor = isActive ? ACTIVE_TAB_FG_COLOR : INACTIVE_TAB_FG_COLOR;
+        setTabStyle({ backgroundColor: bgColor, color: fgColor });
+    }
+    
+    const clickTab = (e) => {
+        e.stopPropagation();
+        selectTab(id);
+    }
+    
+    const clickClose = (e) => {
+        e.stopPropagation();
+        closeTab(id);
+    }
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={tabStyle}
+            id={id}
+            onMouseDown={clickTab}
+            className="tab"
+            {...listeners}
+            {...attributes}
+        >
+            <FileEarmark className="icon" style={{ pointerEvents: "none" }} />
+            <span className="tab-name">{node.name}</span>
+            <XLg onMouseDown={clickClose} className="close-icon"/>
+        </div>
+    );
+}
+
+Tab.propTypes = {
+    id: PropTypes.string.isRequired,
+    parentId: PropTypes.string.isRequired,
+    node: PropTypes.shape({
+        name: PropTypes.string.isRequired,
+    }).isRequired
+}
+
+
+export const TabPreview = ({info}) => {
+    return (
+        <div className="tab" style={{ backgroundColor: ACTIVE_TAB_BG_COLOR, color: ACTIVE_TAB_FG_COLOR, opacity:0.5 }}>
+            <FileEarmark className="icon" />{info.label}<XLg className="close-icon"/>
+        </div>
+    );
+}

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

@@ -0,0 +1,28 @@
+.tab {
+    padding: 0px 15px;
+    cursor: pointer;
+    height: 40px;
+    width: auto;
+    display:flex;
+    align-items: center;
+}
+
+.tab > .icon {
+    padding-right: 7px;
+    display:flex;
+    align-self: center;
+    width:20px;
+}
+
+.tab > .tab-name {
+    width: auto;
+    font-size:13px;
+}
+
+.tab > .close-icon {
+    margin-left:7px;
+    margin-right:7px;
+    display:flex;
+    align-self: center;
+    width:10px;
+}

package/src/components/Editor/Tabs/Tabs.jsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+
+import { Gutter } from "./Gutter/Gutter";
+import { Tab } from "./Tab/Tab";
+
+import { useEditor } from "../Editor";
+
+import "./Tabs.scss";
+
+const TABS_CONTAINER_BG_COLOR = "#222425";
+
+/**
+ * Tabs component. Renders the tabs based on the tabs info provided in the context. 
+ * Also renders gutters between the tabs and on the sides for dropping tabs into empty spaces.
+ * @returns
+ */
+export const Tabs = () => {
+    const { state } = useEditor();
+    const [tabsList, setTabsList] = useState();
+
+    useEffect(() => {
+        if (state.tabs?.length >= 0 && state.parentTabGroupId != null) {
+            drawTabs(state.tabs, state.parentTabGroupId);
+        }
+    }, [state.tabs, state.parentTabGroupId]);
+
+    /**
+     * Draw the tabs provided in the tabs info. This includes the gutters
+     * between the tabs and on the sides for dropping tabs into empty spaces.
+     * @param {Object} tabs 
+     * @returns 
+     */
+    const drawTabs = (tabs, tabGroupId) => {
+        const list = [];
+        tabs.forEach((tab, index) => {
+            list.push(<Gutter key={tab.uid + "-gutter"} id={tabGroupId + "-" + index} index={index} parentId={tabGroupId} />);
+            list.push(<Tab key={tab.uid} id={tab.uid} parentId={tabGroupId} node={tab} />);
+        });
+        list.push(<Gutter key="last-gutter" id={tabGroupId + "-" + tabs.length} index={tabs.length} parentId={tabGroupId} />);
+        setTabsList(list);
+    };
+
+    return (
+        <div className="tabs" style={{background: TABS_CONTAINER_BG_COLOR }}>{tabsList}</div>
+    );
+};
+

package/src/components/Editor/Tabs/Tabs.scss

@@ -0,0 +1,15 @@
+.tabs {
+    display: flex;
+    flex-direction: row;
+    height: 40px;
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    flex-wrap: nowrap;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.tabs::-webkit-scrollbar {
+  display: none;
+}