Migrate file browser to modular component construction with parent and child API access.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.7-dev",
+  "version": "0.0.18-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",
@@ -68,8 +68,6 @@
     "@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"
   }
 }

src/components/Editor/Editor.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { MonacoInstance } from "./MonacoInstance/MonacoInstance";
 import { Tabs } from "./Tabs/Tabs";
-import { TabPreview } from "./Tabs/Tab/Tab";
+
 import React, {
     forwardRef,
     useCallback,
@@ -37,35 +37,25 @@ export const Editor = forwardRef(({ }, ref) => {
         dispatch({ type: "MOVE_TAB", payload: { tabId, newIndex } });
     }, []);
 
-    const addTab = useCallback((tab) => {
-        dispatch({ type: "ADD_TAB", payload: tab });
+    const addTab = useCallback((tab, index) => {
+        dispatch({ type: "ADD_TAB", payload: { tab, index } });
     }, []);
 
     const setTabGroupId = useCallback((id) => {
+        dispatch({ type: "RESET_STATE"});
         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.id === tabId);
-        if (!tab) {
-            console.error(`getPreviewElement: tab with id ${tabId} not found.`);
-            return null;
-        }
-        return <TabPreview info={{ label: tab.label }} />;
-    }, [state]);
-
     const api = useMemo(() => {
         return {
             state,
             addTab,
             setTabGroupId,
             selectTab,
             closeTab,
-            moveTab,
-            getPreviewElement
+            moveTab
         };
-    }, [state, addTab, selectTab, closeTab, moveTab, getPreviewElement, setTabGroupId]);
+    }, [state, addTab, selectTab, closeTab, moveTab, setTabGroupId]);
 
     useImperativeHandle(ref, () => api, [api]);
 

src/components/Editor/Editor.scss

@@ -2,17 +2,21 @@
     position:relative;
     width:100%;
     height:100%;
-    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{
-    width: 100%;
-    height: 40px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 40px;
+    right:0;
 }
 
 .monacoContainer{
-    flex-grow: 1;
+    position: absolute;
+    top: 40px;
+    left: 0;
+    bottom: 0;
+    right:0;
 }

src/components/Editor/EditorReducer.js

@@ -1,19 +1,37 @@
 export const initialState = {
-  tabs: [],
-  activeTab: null,
-  parentTabGroupId: null
+    uid: crypto.randomUUID(),
+    tabs: [],
+    activeTab: null,
+    parentTabGroupId: null
 };
 
 export const editorReducer = (state, action) => {
-    let id;
     switch (action.type) {
 
         case "ADD_TAB": {
-            // TODO: Add some validation for the payload here.
+            const { tab, index } = action.payload;
+
+            const tabInfo = state.tabs.find(obj => obj.uid === tab.uid);
+            if (tabInfo) {
+                console.warn(`Tab with id ${tabInfo.uid} already exists`);
+                return {
+                    ...state,
+                    activeTab: tabInfo
+                };
+            }
+
+            // Insert tab at specific location if it was provided.
+            let tabs =  [...state.tabs];
+            if (index !== undefined && index < state.tabs.length) {
+                tabs.splice(index, 0, tab);
+            } else {
+                tabs.push(tab);
+            }
+
             return {
                 ...state,
-                tabs: [...state.tabs, action.payload],
-                activeTab: action.payload
+                tabs: tabs,
+                activeTab: tab
             };
         }
 
@@ -24,9 +42,8 @@ export const editorReducer = (state, action) => {
             };
         }
 
-
         case "SELECT_TAB": {
-            const tab = state.tabs.find(obj => obj.id === action.payload);
+            const tab = state.tabs.find(obj => obj.uid === action.payload);
             if (!tab) {
                 console.error(`Tab with id ${action.payload} not found.`);
                 return state;
@@ -38,7 +55,7 @@ export const editorReducer = (state, action) => {
         }
 
         case "CLOSE_TAB": {
-            const ind = state.tabs.findIndex(obj => obj.id === action.payload);
+            const ind = state.tabs.findIndex(obj => obj.uid === action.payload);
             if (ind === -1) {
                 console.warn(`Tab with id ${action.payload} not found.`);
                 return state;
@@ -48,7 +65,7 @@ export const editorReducer = (state, action) => {
 
             // 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.id === action.payload;
+            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) {
@@ -65,7 +82,7 @@ export const editorReducer = (state, action) => {
         case "MOVE_TAB": {
             const prevTabs = [...state.tabs];
             const { tabId, newIndex } = action.payload;
-            const oldIndex = prevTabs.findIndex(t => t.id === tabId);
+            const oldIndex = prevTabs.findIndex(t => t.uid === tabId);
             if (oldIndex === -1) {
                 console.warn(`Tab with id ${tabId} not found.`);
                 return state;
@@ -82,6 +99,10 @@ export const editorReducer = (state, action) => {
                 tabs: prevTabs
             };
         }
+
+        case "RESET_STATE": {
+            return initialState;
+        }
 
         default: {
             return state;

src/components/Editor/MonacoInstance/MonacoInstance.jsx

@@ -14,6 +14,8 @@ export const MonacoInstance = ({ }) => {
 
     const editorRef = useRef(null);
     const content = useRef();
+    const containerRef = useRef(null);
+    const frameRef = useRef(0);
 
     useEffect(() => {
         if (state.activeTab) {
@@ -41,21 +43,45 @@ export const MonacoInstance = ({ }) => {
         if (content?.current) {
             editorRef.current.setValue(content.current);
         }
+        editorRef.current.layout();
     }
 
     // Editor options for Monaco Editor.
     const editorOptions = {
         scrollBeyondLastLine: false,
         fontSize: "13px",
         minimap: {
-            enabled: false
+            enabled: true
         },
         padding: {
-            top: 20,
-            bottom: 10
-        }
+            top: 10
+        },
+        renderWhitespace: "none",
+        wordWrap: "on",
+        scrollBeyondLastLine: false,
+        readOnly: true,
+        automaticLayout: false
     }
 
+    // Disable automatic layout and Manually layout the editor to avoid resize observer loops
+    useEffect(() => {
+        if (!containerRef.current) return;
+
+        const ro = new ResizeObserver(() => {
+            cancelAnimationFrame(frameRef.current);
+            frameRef.current = requestAnimationFrame(() => {
+                editorRef.current?.layout();
+            });
+        });
+
+        ro.observe(containerRef.current);
+
+        return () => {
+            cancelAnimationFrame(frameRef.current);
+            ro.disconnect();
+        };
+    }, []);
+
     /**
      * Render the editor if there is an active tab, otherwise render a placeholder message.
      * @returns JSX
@@ -77,9 +103,9 @@ export const MonacoInstance = ({ }) => {
     }
 
     return (
-        <>
+        <div className="editor-container" ref={containerRef}>
             {renderEditor()}
-        </>
+        </div>
     )
 }
 

src/components/Editor/MonacoInstance/MonacoInstance.scss

@@ -5,4 +5,10 @@
     display:flex;
     align-items:center;
     justify-content:center;
+}
+
+.editor-container {
+    position:relative;
+    width:100%;
+    height: 100%;
 }

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

@@ -13,7 +13,7 @@ export const Gutter = ({ id, index, parentId }) => {
     const { setNodeRef, isOver } = useDroppable({
         id,
         data: {
-            type: "tab-gutter",
+            type: "EditorTabGutter",
             parentId: parentId,
             index: index,
         },

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

@@ -19,7 +19,7 @@ const INACTIVE_TAB_FG_COLOR = "#969690";
  * @param {String} label
  * @returns
  */
-export const Tab = ({ id, parentId, info }) => {
+export const Tab = ({ id, parentId, node }) => {
     const [tabStyle, setTabStyle] = useState();
 
     const { selectTab, closeTab, state } = useEditor();
@@ -28,14 +28,15 @@ export const Tab = ({ id, parentId, info }) => {
     const { attributes, listeners, setNodeRef, transform } = useDraggable({
         id,
         data: {
-            type: "tab-draggable",
+            type: "EditorTab",
             parentId: parentId,
-            tabId: id,
+            node: node,
+            preview: <TabPreview node={node} />
         },
     });
 
     useEffect(() => {
-        renderTab(state.activeTab && state.activeTab.id === id);
+        renderTab(state.activeTab && state.activeTab.uid === node.uid);
     }, [state.activeTab]);
 
     const renderTab = (isActive) => {
@@ -46,12 +47,12 @@ export const Tab = ({ id, parentId, info }) => {
 
     const clickTab = (e) => {
         e.stopPropagation();
-        selectTab(id);
+        selectTab(node.uid);
     }
 
     const clickClose = (e) => {
         e.stopPropagation();
-        closeTab(id);
+        closeTab(node.uid);
     }
 
     return (
@@ -64,26 +65,45 @@ export const Tab = ({ id, parentId, info }) => {
             {...listeners}
             {...attributes}
         >
-            <FileEarmark className="icon" style={{ pointerEvents: "none" }} />
-            <span className="tab-name">{info.label}</span>
-            <XLg onMouseDown={clickClose} className="close-icon"/>
+            <div className="tab-content">
+                <div className="icon">
+                    <FileEarmark size={14} style={{ pointerEvents: "none" }} />
+                </div>
+                <div className="tab-name">
+                    <span>{node.name}</span>
+                </div>
+                <div className="close-icon" onMouseDown={clickClose}>
+                    <XLg size={18} />
+                </div>
+
+            </div>
         </div>
     );
 }
 
 Tab.propTypes = {
     id: PropTypes.string.isRequired,
     parentId: PropTypes.string.isRequired,
-    info: PropTypes.shape({
-        label: PropTypes.string.isRequired,
+    node: PropTypes.shape({
+        name: PropTypes.string.isRequired,
     }).isRequired
 }
 
 
-export const TabPreview = ({info}) => {
+export const TabPreview = ({node}) => {
     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 className="tab-content">
+                <div className="icon">
+                    <FileEarmark size={14} style={{ pointerEvents: "none" }} />
+                </div>
+                <div className="tab-name">
+                    <span>{node.name}</span>
+                </div>
+                <div className="close-icon">
+                    <XLg size={18} />
+                </div>
+            </div>
         </div>
     );
 }