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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.6-beta",
+  "version": "0.0.6-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",
@@ -58,6 +58,7 @@
     "style-loader": "^4.0.0"
   },
   "peerDependencies": {
+    "@dnd-kit/core": "^6.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/rollup.config.mjs

@@ -21,7 +21,7 @@ export default {
         },
     ],
     plugins: [
-        external(['react', 'react-dom']),
+        external(['react', 'react-dom', '@dnd-kit/core']),
         resolve({
             extensions: ['.js', '.jsx'],
         }),

package/src/components/Editor/Editor.jsx

@@ -0,0 +1,59 @@
+import "./Editor.scss";
+import PropTypes from 'prop-types';
+
+import { MonacoInstance } from "./MonacoInstance/MonacoInstance";
+import { EditorTabs } from "./EditorTabs/EditorTabs";
+import { useEffect, useState } from "react";
+
+/**
+ * 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(tabs[activeTab - 1].label);
+        }
+    }, [activeTab]);
+
+    
+    useEffect(() => {
+        if (tabs) {
+            if ((activeTab && activeTab > tabs.length) || activeTab == null) {
+                setActiveTab(tabs.length);
+            }
+        }
+    }, [tabs]);
+
+    const onTabClick = (event) => {
+        const tabIndex = tabs.findIndex(obj => obj.id === event.target.id);
+        setActiveTab(tabIndex + 1);
+    }
+    
+    return (
+        <div className="editorContainer">
+            <div className="tabContainer">
+                <EditorTabs activeTab={1} tabs={tabs} selectTab={onTabClick} />
+            </div>
+            <div className="monacoContainer">
+                <MonacoInstance editorContent={editorContent}/>
+            </div>
+        </div>
+    );
+}
+
+Editor.propTypes = {
+    systemTree: PropTypes.object,
+    onFileSelect: PropTypes.func
+}

package/src/components/Editor/Editor.scss

@@ -0,0 +1,16 @@
+.editorContainer {
+    width:100%;
+    height:100%;
+    display:flex;
+    flex-direction:column;
+    overflow:hidden;
+}
+
+.tabContainer{
+    width:100%;
+    height: 40px;
+}
+
+.monacoContainer{
+    flex-grow: 1;
+}

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

@@ -0,0 +1,82 @@
+import "./EditorTabs.scss";
+import PropTypes from "prop-types";
+
+import { useEffect, useState } from "react";
+import {
+    DndContext,
+    DragOverlay,
+    useDraggable,
+    useDroppable,
+} from "@dnd-kit/core";
+
+/**
+ * Tab Component
+ * @param {String} id 
+ * @param {String} label 
+ * @returns 
+ */
+function Tab({id, label, onSelectTab}) {
+    const { attributes, listeners, setNodeRef, transform } = useDraggable({id});
+
+    const style = {
+        transform: transform
+        ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
+        : undefined
+    };
+    
+    return (
+        <div ref={setNodeRef} style={style}  id={id} onClick={onSelectTab} className="tab" {...listeners} {...attributes}>
+            {label}
+        </div>
+    );
+}
+
+/**
+ * Tab Gutter Component
+ * @param {String} id 
+ * @returns 
+ */
+function Gutter({id}) {
+    const { setNodeRef, isOver } = useDroppable({id});
+    return (
+        <div
+            className="gutter"
+            ref={setNodeRef}
+            style={{background: isOver ? "white" : "#4da3ff33"}}
+        ></div>
+    );
+}
+
+/**
+ * Tabs component.
+ * @param {Object} activeTab 
+ * @param {Array} tabs 
+ * @returns 
+ */
+export const EditorTabs = ({activeTab, tabs, selectTab}) => {
+
+    const [tabsList, setTabsList] = useState();
+
+    useEffect(() => {
+        if (tabs) {
+            const list = [];
+            tabs.forEach((tab, index) => {
+                list.push(
+                    <>
+                        <Gutter id={tab.id} />
+                        <Tab onSelectTab={selectTab} key={tab.id} {...tab} />
+                    </>
+                );
+            })
+            setTabsList(list);
+        }
+    }, [tabs]);
+
+    return (
+        <div style={{ display: "flex", background: "#222425" }}>
+            {tabsList}
+        </div>
+    );
+};
+
+EditorTabs.propTypes = {};

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

@@ -0,0 +1,22 @@
+.tabs {
+    display: flex;
+    flex-direction: row;
+    background-color: #1e1e1e;
+    height: 100%;
+    width: 100%;
+}
+
+.tab {
+    padding: 0px 20px;
+    background-color: #2d2d2d;
+    color: #fff;
+    cursor: pointer;
+    height: 40px;
+    display:flex;
+    align-items: center;
+}
+
+.gutter {
+    height: 40px;
+    width: 1px;
+}

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

@@ -0,0 +1,66 @@
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import Editor from '@monaco-editor/react';
+
+import "./MonacoInstance.scss"
+
+function Gutter({ id }) {
+    const { setNodeRef, isOver } = useDroppable({
+        id,
+    });
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={{
+                height: 40,
+                width: 1,
+                background: isOver ? "white" : "#4da3ff33",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+            }}
+        ></div>
+    );
+}
+
+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/Editor/index.js

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

package/src/components/FileBrowser/FileBrowser.jsx

@@ -5,6 +5,12 @@ import { setDefaultCollapsed, collapseTree, selectNode, flattenTree } from "./he
 
 import { FileCode, ChevronRight, ChevronDown, Braces, FiletypeScss, FiletypeJs, FiletypePy} from "react-bootstrap-icons";
 import PropTypes from 'prop-types';
+import {
+    DndContext,
+    DragOverlay,
+    useDraggable,
+    useDroppable,
+} from "@dnd-kit/core";
 
 const INDENT_WIDTH = 20;
 const SELECTED_FILE_COLOR = "#00426b";
@@ -27,7 +33,9 @@ function useEvent(fn) {
 /**
  * Renders a single node in the file tree.
  */
-const TreeNode = ({node, onRowClick}) => {
+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>
@@ -44,9 +52,15 @@ const TreeNode = ({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
+        };        
         if (node.selected) {
-            return {"backgroundColor": SELECTED_FILE_COLOR};
+            style["backgroundColor"] = SELECTED_FILE_COLOR;
         }
+        return style;
     }
 
 
@@ -72,7 +86,7 @@ const TreeNode = ({node, onRowClick}) => {
     }
 
     return (
-        <div className="file-node-row" style={getRowStyle()} onClick={() => onRowClick(node)}>
+        <div className="file-node-row" ref={setNodeRef} {...listeners} {...attributes} style={getRowStyle()} onClick={() => onRowClick(node)}>
             <div className="indent" style={{ width: node.level * INDENT_WIDTH + "px"}} />
             {
                 node.type === "folder" ? 
@@ -115,7 +129,7 @@ export const FileBrowser = ({tree, onNodeSelect}) => {
         const nodes = collapseTree(treeRef.current);
         const rows = [];
         nodes.forEach((node) => {
-            rows.push(<TreeNode key={node.id} node={node} onRowClick={handleFileClick}/>);
+            rows.push(<TreeNode key={node.id} node={node} id={node.name} onRowClick={handleFileClick}/>);
         });
         setNodes(rows);
     }

package/src/components/FileBrowser/FileBrowser.scss

@@ -1,5 +1,4 @@
 .file-browser{
-    background-color: #333;
     width: 100%;
     height:100%;
     padding:5px;

package/src/index.js

@@ -1,4 +1,5 @@
 export * from "./components/StackList";
 export * from "./components/Viewer";
 export * from "./components/FlowDiagram";
-export * from "./components/FileBrowser";
+export * from "./components/FileBrowser";
+export * from "./components/Editor";

package/src/stories/Editor.stories.js

@@ -0,0 +1,106 @@
+import { useEffect } from "react";
+import { Editor } from "../components/Editor";
+import { useArgs } from "@storybook/preview-api";
+import { action } from "@storybook/addon-actions";
+import {
+    DndContext,
+    DragOverlay,
+    useDraggable,
+    useDroppable,
+} from "@dnd-kit/core";
+
+import fileTrees from "./data/filetree.json";
+
+import "./EditorStories.scss"
+
+export default {
+    title: 'Editor', 
+    component: Editor,
+    argTypes: {}
+};
+
+/**
+ * Preview for the div being dragged.
+ * @returns 
+ */
+function DragPreview({ label }) {
+    return (
+        <div
+        style={{
+            padding: "6px 12px",
+            background: "#2d2d2d",
+            color: "white",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+            opacity:0.3
+        }}
+        >
+        {label}
+        </div>
+    );
+}
+
+/**
+ * Offset for the drag overlay.
+ * @returns 
+ */
+const offsetOverlay = ({ transform }) => {
+  return {
+    ...transform,
+    x: transform.x + 20,
+    y: transform.y + 20
+  };
+};
+
+const Template = (args) => {
+    const [, updateArgs] = useArgs();
+
+    const onFileSelect = (selectedFile) => {
+        action('Selected Stack Position:')(selectedFile);
+    }
+
+    useEffect(() => {
+        updateArgs({onFileSelect : onFileSelect});
+    }, []);
+
+    /**
+     * Callback for when drag ends.
+     */
+    const handleDragEnd = (event) =>{
+        const { active, over } = event;
+        console.log("Drag Ended");
+        const rect = event.activatorEvent;
+
+        console.log(over );
+
+        if (over) {
+            console.log("Dragged item:", active.id);
+            console.log("Dropped on:", over.id);
+        } else {
+            console.log("Dropped outside any droppable");
+        }
+    }
+
+    /**
+     * Callback for when drag is started.
+     */
+    const onDragStart = (event) => {
+        console.log("Drag Started");
+    }
+
+    return (
+        <DndContext onDragStart={onDragStart} onDragEnd={handleDragEnd}>
+            <div className="editorStoryWrapper">
+                <Editor {...args} />
+            </div>
+            <DragOverlay modifiers={[offsetOverlay]} dropAnimation={null}>
+                <DragPreview label={"preview"}/>
+            </DragOverlay>
+        </DndContext>
+    )
+}
+
+export const Default = Template.bind({});
+
+Default.args = {
+    systemTree: fileTrees.fileTrees
+}

package/src/stories/EditorStories.scss

@@ -0,0 +1,7 @@
+.editorStoryWrapper{
+    position: absolute;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+}

package/src/stories/FileBrowser.stories.js

@@ -2,6 +2,15 @@ import { useEffect } from "react";
 import { FileBrowser } from "../components/FileBrowser";
 import { useArgs } from "@storybook/preview-api";
 import { action } from "@storybook/addon-actions";
+import {
+    DndContext,
+    DragOverlay,
+    useDraggable,
+    useDroppable,
+    PointerSensor,
+    useSensor,
+    useSensors
+} from "@dnd-kit/core";
 
 import FileTree1 from "./data/FileBrowser/Tree1.json"
 import FileTree2 from "./data/FileBrowser/Tree2.json"
@@ -14,6 +23,38 @@ export default {
     argTypes: {}
 };
 
+/**
+ * Preview for the div being dragged.
+ * @returns 
+ */
+function DragPreview({ label }) {
+    return (
+        <div
+        style={{
+            padding: "6px 12px",
+            background: "#2d2d2d",
+            color: "white",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+            opacity:0.3
+        }}
+        >
+        {label}
+        </div>
+    );
+}
+
+/**
+ * Offset for the drag overlay.
+ * @returns 
+ */
+const offsetOverlay = ({ transform }) => {
+  return {
+    ...transform,
+    x: transform.x + 20,
+    y: transform.y + 20
+  };
+};
+
 
 const Template = (args) => {
     const [, updateArgs] = useArgs();
@@ -26,12 +67,50 @@ const Template = (args) => {
         updateArgs({onNodeSelect : onNodeSelect});
     }, []);
 
+    /**
+     * Callback for when drag ends.
+     */
+    const handleDragEnd = (event) =>{
+        const { active, over } = event;
+        console.log("Drag Ended");
+        const rect = event.activatorEvent;
+
+        console.log(over );
+
+        if (over) {
+            console.log("Dragged item:", active.id);
+            console.log("Dropped on:", over.id);
+        } else {
+            console.log("Dropped outside any droppable");
+        }
+    }
+
+    /**
+     * Callback for when drag is started.
+     */
+    const onDragStart = (event) => {
+        console.log("Drag Started");
+    }
+
+    const sensors = useSensors(
+        useSensor(PointerSensor, {
+            activationConstraint: {
+                distance: 8
+            }
+        })
+    );
+
     return (
-        <div className="viewerStoryWrapper">
-            <div className="file-browser">
-                <FileBrowser {...args} />
+        <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={handleDragEnd}>
+            <div className="viewerStoryWrapper">
+                <div className="file-browser">
+                    <FileBrowser {...args} />
+                </div>
             </div>
-        </div>
+            <DragOverlay modifiers={[offsetOverlay]} dropAnimation={null}>
+                <DragPreview label={"preview"}/>
+            </DragOverlay>
+        </DndContext>
     )
 }
 

package/src/stories/FileBrowserStories.scss

@@ -11,6 +11,7 @@
 
 .viewerStoryWrapper > .file-browser{
     height: 300px;
+    background-color: #333;
     overflow: auto;
     scrollbar-gutter: stable;
     scrollbar-color: #47474766 #252526;