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

package/src/components/FileBrowser/FileBrowser.jsx

@@ -1,141 +1,73 @@
-import { useEffect, useState, useRef, useLayoutEffect, useCallback } from "react";
+import {
+    forwardRef,
+    useReducer,
+    useMemo,
+    useCallback,
+    useContext,
+    useImperativeHandle,
+} from "react";
 import "./FileBrowser.scss";
 
-import { setDefaultCollapsed, collapseTree, selectNode, flattenTree } from "./helper";
+import { Tree } from "./Tree/Tree";
+import { TreeNodePreview } from "./TreeNode/TreeNode";
 
-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";
+import { FileBrowserContext } from "./FileBrowserContext";
 
-const INDENT_WIDTH = 20;
-const SELECTED_FILE_COLOR = "#00426b";
+import { fileBrowserReducer, initialState } from "./FileBrowserReducer";
 
 /**
- * Used for creating a stable callback function.
+ * Renders a file browser.
+ *
+ * @return {JSX}
  */
-function useEvent(fn) {
-    const fnRef = useRef(fn);
+export const FileBrowser = forwardRef(({ }, ref) => {
+    const [state, dispatch] = useReducer(fileBrowserReducer, initialState);
 
-    useLayoutEffect(() => {
-        fnRef.current = fn;
-    });
-
-    return useCallback((...args) => {
-        return fnRef.current(...args);
+    const addFileTree = useCallback((tree) => {
+        dispatch({ type: "ADD_FILE_TREE", payload: tree });
     }, []);
-}
 
-/**
- * Renders a single node in the file tree.
- */
-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>
-     */
-    const getCollapsedIcon = () => {
-        if (node.collapsed) {
-            return <ChevronRight />;
-        } else {
-            return <ChevronDown />;
+    const selectNode = useCallback((node) => {
+        dispatch({ type: "SELECT_NODE", payload: node });
+    }, []);
+    
+    const getPreviewElement = useCallback((tabId) => {
+        // Get the preview element for a tab by its id for use in drag-and-drop operations.
+        const tab = state.flattenedTree.find(t => t.uid === tabId);
+        if (!tab) {
+            console.error(`getPreviewElement: tab with id ${tabId} not found.`);
+            return null;
         }
-    }
+        return <TreeNodePreview node={tab} />;
+    }, [state]);
 
-    /**
-     * 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) {
-            style["backgroundColor"] = SELECTED_FILE_COLOR;
-        }
-        return style;
-    }
+    const api = useMemo(() => {
+        return {
+            state,
+            addFileTree,
+            selectNode,
+            getPreviewElement
+        };
+    }, [state, addFileTree, selectNode, getPreviewElement]);
 
-
-    /**
-     * Get the file icon based on the extension.
-     * 
-     * TODO: This can be improved by having a mapping of extensions to icons and color.
-     */
-    const getFileIcon = () => {
-        const extension = node.name.split('.').pop();
-        switch (extension) {
-            case "js":
-                return <FiletypeJs color="#f1e05a" />;
-            case "json":
-                return <Braces color="#fffb00" />;
-            case "scss":
-                return <FiletypeScss color="#f12727" />;
-            case "py":
-                return <FiletypePy color="#686affbd" />;
-            default:
-                return <FileCode color="#ffffff" />;
-        }
-    }
+    useImperativeHandle(ref, () => api, [api]);
 
     return (
-        <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" ? 
-                <span className="center folder-icon">{getCollapsedIcon()}</span> :
-                <span className="center file-icon">{getFileIcon()}</span>
-            }
-            <span className="center file-name">{node.name}</span>
-        </div>
-    )
-}
-
-/**
- * Renders a file browser.
- * 
- * @return {JSX}
- */
-export const FileBrowser = ({tree, onNodeSelect}) => {
-
-    const [nodes, setNodes] = useState([]);
-    const treeRef = useRef();
-
-    const handleFileClick = useEvent((node) => {
-        selectNode(treeRef.current, node);
-        drawTree();
-        if (onNodeSelect) {
-            onNodeSelect(node);
-        }
-    });
-
-    useEffect(() => {
-        treeRef.current = flattenTree(tree);
-        setDefaultCollapsed(treeRef.current);
-        drawTree();
-    }, []);
-
-    /**
-     * Draws the tree given the nodes and the collapsed state of each node.
-     */
-    const drawTree = () => {
-        const nodes = collapseTree(treeRef.current);
-        const rows = [];
-        nodes.forEach((node) => {
-            rows.push(<TreeNode key={node.id} node={node} id={node.name} onRowClick={handleFileClick}/>);
-        });
-        setNodes(rows);
+        <FileBrowserContext.Provider value={api}>
+            <div className="file-browser">
+                <Tree />
+            </div>
+        </FileBrowserContext.Provider>
+    );
+});
+
+FileBrowser.displayName = "FileBrowser";
+
+export function useFileBrowser() {
+    const ctx = useContext(FileBrowserContext);
+    if (!ctx) {
+        throw new Error("useFileBrowser must be used inside <FileBrowser>");
     }
-    return (
-        <div className="file-browser">
-            {nodes}
-        </div>
-    )
-}
+    return ctx;
+}

package/src/components/FileBrowser/FileBrowser.scss

@@ -5,36 +5,3 @@
     color:white;
 }
 
-.file-node-row{
-    width:100%;
-    min-width: 200px;
-    display:flex;
-    padding: 5px 0;
-    font-size:13px;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    cursor: pointer;
-}
-
-.indent {
-    height:100%;
-}
-
-.center {
-    display:flex;
-    align-self: center;
-}
-
-
-.folder-icon {
-    display:flex;
-    margin-right: 5px;
-}
-
-.file-icon {
-    margin-right: 5px;
-    font-size:16px;
-}
-
-.file-name {
-    color: #CCC;
-}

package/src/components/FileBrowser/FileBrowserContext.js

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

package/src/components/FileBrowser/FileBrowserReducer.js

@@ -0,0 +1,47 @@
+import {
+    setDefaultCollapsed,
+    collapseTree,
+    selectNode,
+    flattenTree,
+} from "./helper";
+
+export const initialState = {
+    tree: {},
+    flattenedTree: {},
+    collapsedTree: [],
+};
+
+export const fileBrowserReducer = (state, action) => {
+
+    switch (action.type) {
+
+        case "ADD_FILE_TREE": {
+            let flattenedTree = setDefaultCollapsed(flattenTree(action.payload));
+            const collapsedTree = collapseTree(flattenedTree);
+            return {
+                ...state,
+                tree: action.payload,
+                flattenedTree: flattenedTree,
+                collapsedTree: collapsedTree
+            }
+        }
+
+        case "SELECT_NODE": {
+            const tree = [...state.flattenedTree];
+            tree.forEach((n) => {
+                if (n.uid === action.payload) {
+                    n.selected = true;
+                    n.collapsed = !n.collapsed;
+                } else {
+                    n.selected = false;
+                }
+            });
+            const collapsedTree = collapseTree(tree);
+            return {
+                ...state,
+                flattenedTree: tree,
+                collapsedTree: collapsedTree
+            }
+        }
+    }
+}

package/src/components/FileBrowser/Tree/Tree.jsx

@@ -0,0 +1,55 @@
+import {
+    useEffect,
+    useState,
+    useRef
+} from "react";
+
+import { TreeNode } from "../TreeNode/TreeNode";
+
+import { useFileBrowser } from "../FileBrowser";
+
+import {
+    setDefaultCollapsed,
+    collapseTree,
+    selectNode,
+    flattenTree,
+} from "../helper";
+
+import "./Tree.scss";
+
+/**
+ * Renders a file tree.
+ */
+export const Tree = ({}) => {
+    const [nodes, setNodes] = useState([]);
+    const {state} = useFileBrowser();
+
+    useEffect(() => {
+        if(state.collapsedTree && state.collapsedTree.length > 0) {
+            drawTree(state.collapsedTree);
+        }
+    }, [state.collapsedTree]);
+
+    /**
+     * Draws the tree given the nodes and the collapsed state of each node.
+     */
+    const drawTree = (collapsedTree) => {
+        const rows = [];
+        collapsedTree.forEach((node) => {
+            rows.push(
+                <TreeNode
+                    key={node.uid}
+                    node={node}
+                    id={node.name}
+                />,
+            );
+        });
+        setNodes(rows);
+    };
+
+    return (
+        <>
+            {nodes}
+        </>
+    )
+}

package/src/components/FileBrowser/Tree/Tree.scss

@@ -0,0 +1,33 @@
+.file-node-row{
+    width:100%;
+    min-width: 200px;
+    display:flex;
+    padding: 5px 0;
+    font-size:13px;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    cursor: pointer;
+}
+
+.indent {
+    height:100%;
+}
+
+.center {
+    display:flex;
+    align-self: center;
+}
+
+
+.folder-icon {
+    display:flex;
+    margin-right: 5px;
+}
+
+.file-icon {
+    margin-right: 5px;
+    font-size:16px;
+}
+
+.file-name {
+    color: #CCC;
+}

package/src/components/FileBrowser/TreeNode/TreeNode.jsx

@@ -0,0 +1,101 @@
+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";
+
+import { useFileBrowser } from "../FileBrowser";
+
+const INDENT_WIDTH = 20;
+const SELECTED_FILE_COLOR = "#00426b";
+
+import "./TreeNode.scss";
+
+/**
+ * Renders a single node in the file tree.
+ */
+export const TreeNode = ({ id, node }) => {
+    const { attributes, listeners, setNodeRef, transform } = useDraggable(
+        { 
+            id,
+            data: {
+                node: node
+            }
+         }
+    );
+    const { selectNode } = useFileBrowser();
+
+    /**
+     * Gets the appropriate icon for the node based on its type and collapsed state.
+     * @returns <JSX>
+     */
+    const getCollapsedIcon = () => {
+        if (node.collapsed) {
+            return <ChevronRight />;
+        } else {
+            return <ChevronDown />;
+        }
+    }
+
+    /**
+     * Sets the background color of the row if the node is selected.
+     */
+    const getRowStyle = () => {
+        const style = {};
+        if (node.selected) {
+            style["backgroundColor"] = SELECTED_FILE_COLOR;
+        }
+        return style;
+    }
+
+
+    /**
+     * Get the file icon based on the extension.
+     * 
+     * TODO: This can be improved by having a mapping of extensions to icons and color.
+     */
+    const getFileIcon = () => {
+        const extension = node.name.split('.').pop();
+        switch (extension) {
+            case "js":
+                return <FiletypeJs color="#f1e05a" />;
+            case "json":
+                return <Braces color="#fffb00" />;
+            case "scss":
+                return <FiletypeScss color="#f12727" />;
+            case "py":
+                return <FiletypePy color="#686affbd" />;
+            default:
+                return <FileCode color="#ffffff" />;
+        }
+    }
+
+
+    const onSelectRow = () => {
+        selectNode(node.uid);
+    }
+
+    return (
+        <div className="file-node-row" ref={setNodeRef} {...listeners} {...attributes} 
+            style={getRowStyle()} onClick={() => onSelectRow()}>
+            <div className="indent" style={{ width: node.level * INDENT_WIDTH + "px" }} />
+            {
+                node.type === "folder" ?
+                    <span className="folder-icon">{getCollapsedIcon()}</span> :
+                    <span className="file-icon">{getFileIcon()}</span>
+            }
+            <span className="file-name">{node.name}</span>
+        </div>
+    )
+}
+
+export const TreeNodePreview = ({node}) => {
+    return (
+         <div className="file-node-row">
+            <span className="file-name">{node.name}</span>
+         </div>
+    );
+}

package/src/components/FileBrowser/TreeNode/TreeNode.scss

@@ -0,0 +1,33 @@
+.file-node-row{
+    width:100%;
+    min-width: 200px;
+    display:flex;
+    padding: 5px 0;
+    font-size:13px;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    cursor: pointer;
+}
+
+.indent {
+    height:100%;
+}
+
+.center {
+    display:flex;
+    align-self: center;
+}
+
+
+.folder-icon {
+    display:flex;
+    margin-right: 5px;
+}
+
+.file-icon {
+    margin-right: 5px;
+    font-size:16px;
+}
+
+.file-name {
+    color: #CCC;
+}

package/src/components/FileBrowser/helper.js

@@ -5,6 +5,7 @@ export const setDefaultCollapsed = (tree) => {
     tree.forEach((node) => {
         node.collapsed = false;
     });
+    return tree;
 }
 
 

package/src/stories/Editor.stories.js

@@ -1,15 +1,16 @@
-import { useEffect } from "react";
+import { useEffect, useState, useRef, useLayoutEffect } from "react";
 import { Editor } from "../components/Editor";
 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 fileTrees from "./data/filetree.json";
+import WorkspaceSampleTree from "./data/FileBrowser/workspace_sample.json"
 
 import "./EditorStories.scss"
 
@@ -18,27 +19,6 @@ export default {
     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 
@@ -51,49 +31,66 @@ const offsetOverlay = ({ transform }) => {
   };
 };
 
+const flattenTree = (tree, level = 0) =>
+  tree.flatMap(node => [
+    { ...node, level },
+    ...(node.children ? flattenTree(node.children, level + 1) : [])
+  ]);
+
 const Template = (args) => {
     const [, updateArgs] = useArgs();
 
-    const onFileSelect = (selectedFile) => {
-        action('Selected Stack Position:')(selectedFile);
-    }
+    const [dragPreviewLabel, setDragPreviewLabel] = useState(<></>);
+
+    const editorRef = useRef();
 
-    useEffect(() => {
-        updateArgs({onFileSelect : onFileSelect});
+    useLayoutEffect(() => {
+        editorRef.current.setTabGroupId("tab-group-1");
+        flattenTree(WorkspaceSampleTree.tree).forEach((node, index) => {
+            if (node.type === "file") {
+                editorRef.current.addTab(node);
+            }
+        });
     }, []);
 
-    /**
-     * Callback for when drag ends.
-     */
+    const onDragStart = (event) => {
+        console.log("");
+        console.log("Drag Started");
+        const dragPreview = editorRef.current.getPreviewElement(event.active.data.current.node.uid);
+        setDragPreviewLabel(dragPreview);
+    }
+
     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);
+            console.log("Dragged item:", active);
+            console.log("Dropped on:", over);
         } else {
             console.log("Dropped outside any droppable");
+            return;
         }
-    }
 
-    /**
-     * Callback for when drag is started.
-     */
-    const onDragStart = (event) => {
-        console.log("Drag Started");
+        if (active.data.current.type === "tab-draggable" && over.data.current.type === "tab-gutter") {
+            editorRef.current.moveTab(active.data.current.node.uid, over.data.current.index);
+        }
     }
 
+    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} />
+                <Editor ref={editorRef}{...args} />
             </div>
             <DragOverlay modifiers={[offsetOverlay]} dropAnimation={null}>
-                <DragPreview label={"preview"}/>
+                {dragPreviewLabel}
             </DragOverlay>
         </DndContext>
     )
@@ -101,6 +98,4 @@ const Template = (args) => {
 
 export const Default = Template.bind({});
 
-Default.args = {
-    systemTree: fileTrees.fileTrees
-}
+Default.args = {}