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

package/package.json

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

package/src/components/Editor/Editor.jsx

@@ -23,7 +23,7 @@ export const Editor = ({systemTree, onFileSelect}) => {
 
     useEffect(() => {
         if (activeTab) {
-            setEditorContent(tabs[activeTab - 1].label);
+            setEditorContent(activeTab.label);
         }
     }, [activeTab]);
 
@@ -31,20 +31,20 @@ export const Editor = ({systemTree, onFileSelect}) => {
     useEffect(() => {
         if (tabs) {
             if ((activeTab && activeTab > tabs.length) || activeTab == null) {
-                setActiveTab(tabs.length);
+                setActiveTab(tabs[tabs.length - 1]);
             }
         }
     }, [tabs]);
 
     const onTabClick = (event) => {
-        const tabIndex = tabs.findIndex(obj => obj.id === event.target.id);
-        setActiveTab(tabIndex + 1);
+        const tab = tabs.find(obj => obj.id === event.target.id);
+        setActiveTab(tab);
     }
     
     return (
         <div className="editorContainer">
             <div className="tabContainer">
-                <EditorTabs activeTab={1} tabs={tabs} selectTab={onTabClick} />
+                <EditorTabs activeTab={activeTab} tabs={tabs} selectTab={onTabClick} />
             </div>
             <div className="monacoContainer">
                 <MonacoInstance editorContent={editorContent}/>

package/src/components/Editor/Editor.scss

@@ -1,4 +1,5 @@
 .editorContainer {
+    position:relative;
     width:100%;
     height:100%;
     display:flex;
@@ -7,7 +8,7 @@
 }
 
 .tabContainer{
-    width:100%;
+    width: 100%;
     height: 40px;
 }
 

package/src/components/Editor/EditorTabs/EditorTabs.jsx

@@ -2,9 +2,8 @@ import "./EditorTabs.scss";
 import PropTypes from "prop-types";
 
 import { useEffect, useState } from "react";
+import { FileEarmark } from "react-bootstrap-icons";
 import {
-    DndContext,
-    DragOverlay,
     useDraggable,
     useDroppable,
 } from "@dnd-kit/core";
@@ -15,18 +14,20 @@ import {
  * @param {String} label 
  * @returns 
  */
-function Tab({id, label, onSelectTab}) {
+function Tab({id, label, onSelectTab, activeTab}) {
     const { attributes, listeners, setNodeRef, transform } = useDraggable({id});
 
-    const style = {
-        transform: transform
-        ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
-        : undefined
-    };
+    const [tabStyle, setTabStyle] = useState();
+
+    useEffect(() => {
+        const bc = (activeTab && activeTab.id === id) ? "#1e1e1e": "#2d2d2d";
+        const fc = (activeTab && activeTab.id === id) ? "#FFFFFF": "#969690";
+        setTabStyle( {"backgroundColor": bc, "color": fc})
+    }, [activeTab]);
     
     return (
-        <div ref={setNodeRef} style={style}  id={id} onClick={onSelectTab} className="tab" {...listeners} {...attributes}>
-            {label}
+        <div ref={setNodeRef} style={tabStyle} id={id} onClick={onSelectTab} className="tab" {...listeners} {...attributes}>
+            <FileEarmark className="icon" style={{ pointerEvents: "none" }}/>{label}
         </div>
     );
 }
@@ -42,7 +43,7 @@ function Gutter({id}) {
         <div
             className="gutter"
             ref={setNodeRef}
-            style={{background: isOver ? "white" : "#4da3ff33"}}
+            style={{background: isOver ? "white" : "#222425"}}
         ></div>
     );
 }
@@ -59,19 +60,29 @@ export const EditorTabs = ({activeTab, tabs, selectTab}) => {
 
     useEffect(() => {
         if (tabs) {
-            const list = [];
-            tabs.forEach((tab, index) => {
-                list.push(
-                    <>
-                        <Gutter id={tab.id} />
-                        <Tab onSelectTab={selectTab} key={tab.id} {...tab} />
-                    </>
-                );
-            })
-            setTabsList(list);
+            drawTabs();
         }
     }, [tabs]);
 
+    useEffect(() => {
+        if (activeTab) {
+            drawTabs();
+        }
+    }, [activeTab]);
+
+
+    const drawTabs = () => {
+        const list = [];
+        tabs.forEach((tab, index) => {
+            list.push(<Gutter id={"position-" + index} />);
+            list.push(
+                <Tab activeTab={activeTab} onSelectTab={selectTab} key={tab.id} {...tab} />
+            );
+        })
+        list.push(<Gutter id={"position-" + tabs.length} />);
+        setTabsList(list);
+    }
+
     return (
         <div style={{ display: "flex", background: "#222425" }}>
             {tabsList}

package/src/components/Editor/EditorTabs/EditorTabs.scss

@@ -1,22 +1,33 @@
 .tabs {
+    position:relative;
     display: flex;
     flex-direction: row;
     background-color: #1e1e1e;
-    height: 100%;
+    height: 40px;
     width: 100%;
 }
 
 .tab {
     padding: 0px 20px;
     background-color: #2d2d2d;
-    color: #fff;
+    color: #969690;
     cursor: pointer;
     height: 40px;
     display:flex;
     align-items: center;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-size:14px;
+}
+
+.tab > .icon {
+    padding-right: 7px;
+    display:flex;
+    align-items: center;
 }
 
 .gutter {
+    display:flex;
+    background-color: #2d2d2d;
     height: 40px;
-    width: 1px;
+    width: 2px;
 }

package/src/components/FileBrowser/FileBrowser.jsx

@@ -35,7 +35,6 @@ function useEvent(fn) {
  */
 const TreeNode = ({id, node, onRowClick}) => {
     const { attributes, listeners, setNodeRef, transform } = useDraggable({id});
-
     /**
      * Gets the appropriate icon for the node based on its type and collapsed state.
      * @returns <JSX>
@@ -52,11 +51,7 @@ const TreeNode = ({id, node, onRowClick}) => {
      * Sets the background color of the row if the node is selected.
      */
     const getRowStyle = () => {
-        const style = {
-            transform: transform
-            ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
-            : undefined
-        };        
+        const style = {};
         if (node.selected) {
             style["backgroundColor"] = SELECTED_FILE_COLOR;
         }

package/src/stories/Editor.stories.js

@@ -7,6 +7,9 @@ import {
     DragOverlay,
     useDraggable,
     useDroppable,
+    PointerSensor,
+    useSensor,
+    useSensors
 } from "@dnd-kit/core";
 
 import fileTrees from "./data/filetree.json";
@@ -87,8 +90,16 @@ const Template = (args) => {
         console.log("Drag Started");
     }
 
+    const sensors = useSensors(
+        useSensor(PointerSensor, {
+            activationConstraint: {
+                distance: 8
+            }
+        })
+    );
+
     return (
-        <DndContext onDragStart={onDragStart} onDragEnd={handleDragEnd}>
+        <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={handleDragEnd}>
             <div className="editorStoryWrapper">
                 <Editor {...args} />
             </div>