Explorer context menu preparations

packages/ui/src/components/DataStory/sidebar/explorer.tsx → packages/ui/src/components/DataStory/sidebar/explorer/explorer.tsx

@@ -1,32 +1,17 @@
 import { NodeApi, NodeRendererProps, Tree as ArboristTree } from 'react-arborist';
-import { ChevronRight } from '../icons/chevronRight';
-import { ChevronDown } from '../icons/chevronDown';
-import { LogoIcon } from '../icons/logoIcon';
+import { ChevronRight } from '../../icons/chevronRight';
+import { ChevronDown } from '../../icons/chevronDown';
+import { LogoIcon } from '../../icons/logoIcon';
 import { Tree } from '@data-story/core';
-import { NodeSettingsSidebarProps } from '../types';
+import { NodeSettingsSidebarProps } from '../../types';
 import React from 'react';
+import { FileNode } from './file';
+import { FolderNode } from './folder';
 
-function Node({ node, style, dragHandle }: NodeRendererProps<Tree>) {
-  const Icon = node.isOpen ? ChevronDown : (node.isLeaf ? LogoIcon : ChevronRight);
-  const isActualRoot = node.data.id === 'fake-project';
-
-  return (
-    <div
-      className={`
-        flex text-xs text-gray-900
-        ${node.isSelected ? 'bg-gray-100 border-blue-500 border' : ''}
-        ${isActualRoot ? 'font-bold uppercase' : ''}
-      `}
-      style={style}
-      ref={dragHandle}
-      onClick={() => node.toggle()}
-    >
-      <div className="scale-0.5">
-        <Icon/>
-      </div>
-      <div className="ml-2">{node.data.name}</div>
-    </div>
-  );
+function TreeNode(props: NodeRendererProps<Tree>) {
+  return props.node.isLeaf
+    ? <FileNode {...props} />
+    : <FolderNode {...props} />
 }
 
 export const ExplorerComponent = ({
@@ -53,7 +38,7 @@ export const ExplorerComponent = ({
           rowHeight={24}
           onActivate={handleClick}
         >
-          {Node}
+          {TreeNode}
         </ArboristTree>
       </div>
     </div>

packages/ui/src/components/DataStory/sidebar/explorer/file.tsx

@@ -0,0 +1,22 @@
+import { Tree } from '@data-story/core';
+import { NodeRendererProps } from 'react-arborist';
+import { LogoIcon } from '../../icons/logoIcon';
+
+export function FileNode({ node, style, dragHandle }: NodeRendererProps<Tree>) {
+  return (
+    <div
+      className={`
+        flex text-xs text-gray-900
+        ${node.isSelected ? 'bg-gray-100 border-blue-500 border' : ''}
+      `}
+      style={style}
+      ref={dragHandle}
+      onClick={() => node.toggle()}
+    >
+      <div className="scale-0.5">
+        <LogoIcon/>
+      </div>
+      <div className="ml-2">{node.data.name}</div>
+    </div>
+  );
+}

packages/ui/src/components/DataStory/sidebar/explorer/folder.tsx

@@ -0,0 +1,172 @@
+import { Tree } from '@data-story/core';
+import { NodeRendererProps } from 'react-arborist';
+import { ChevronDown } from '../../icons/chevronDown';
+import { ChevronRight } from '../../icons/chevronRight';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import {
+  autoUpdate,
+  flip,
+  FloatingFocusManager,
+  FloatingOverlay,
+  FloatingPortal,
+  offset,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useRole
+} from '@floating-ui/react';
+
+type Option = {
+  label: string;
+  value: string;
+  onClick: () => void;
+};
+
+const FolderDropdown = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: 'bottom-start',
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(5), flip(), shift()],
+  });
+
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+
+  const { getFloatingProps } = useInteractions([click, dismiss, role]);
+
+  return (
+    <div className="relative">
+      (
+      <FloatingPortal>
+        <div
+          ref={refs.setFloating}
+          {...getFloatingProps()}
+          style={floatingStyles}
+          className="z-50 bg-white rounded-md shadow-lg border w-44"
+        >
+            My dropdown 💕
+        </div>
+      </FloatingPortal>
+      )
+    </div>
+  );
+};
+
+export function FolderNode({ node, style, dragHandle }: NodeRendererProps<Tree>) {
+  const Icon = node.isOpen ? ChevronDown : ChevronRight;
+  const isActualRoot = node.data.id === 'fake-project';
+  const [isOpen, setIsOpen] = useState(false);
+  const allowMouseUpCloseRef = useRef(false);
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    middleware: [
+      offset({ mainAxis: 5, alignmentAxis: 4 }),
+      flip({
+        fallbackPlacements: ['left-start']
+      }),
+      shift({ padding: 10 })
+    ],
+    placement: 'right-start',
+    strategy: 'fixed',
+    whileElementsMounted: autoUpdate
+  });
+
+  const role = useRole(context, { role: 'menu' });
+  const dismiss = useDismiss(context);
+
+  const { getFloatingProps, getItemProps } = useInteractions([
+    role,
+    dismiss,
+  ]);
+
+  useEffect(() => {
+    let timeout: number;
+
+    function onContextMenu(e: MouseEvent) {
+      e.preventDefault();
+
+      refs.setPositionReference({
+        getBoundingClientRect() {
+          return {
+            width: 0,
+            height: 0,
+            x: e.clientX,
+            y: e.clientY,
+            top: e.clientY,
+            right: e.clientX,
+            bottom: e.clientY,
+            left: e.clientX
+          };
+        }
+      });
+
+      setIsOpen(true);
+      clearTimeout(timeout);
+
+      allowMouseUpCloseRef.current = false;
+      timeout = window.setTimeout(() => {
+        allowMouseUpCloseRef.current = true;
+      }, 300);
+    }
+
+    function onMouseUp() {
+      if (allowMouseUpCloseRef.current) {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener('contextmenu', onContextMenu);
+    document.addEventListener('mouseup', onMouseUp);
+    return () => {
+      document.removeEventListener('contextmenu', onContextMenu);
+      document.removeEventListener('mouseup', onMouseUp);
+      clearTimeout(timeout);
+    };
+  }, [refs]);
+
+  return (
+    <div
+      className={`
+        flex text-xs text-gray-900
+        ${node.isSelected ? 'bg-gray-100 border-blue-500 border' : ''}
+        ${isActualRoot ? 'font-bold uppercase' : ''}
+      `}
+      style={style}
+      ref={dragHandle}
+      onClick={() => node.toggle()}
+      onContextMenu={(event) => {
+        event.preventDefault();
+      }}
+    >
+      <div className="scale-0.5">
+        <Icon/>
+      </div>
+      <div className="ml-2">{node.data.name}</div>
+      <FloatingPortal>
+        {isOpen && (
+          <FloatingOverlay lockScroll>
+            <FloatingFocusManager context={context} initialFocus={refs.floating}>
+              <div
+                className="bg-red-500 text-white p-2"
+                ref={refs.setFloating}
+                style={floatingStyles}
+                {...getFloatingProps()}
+              >
+                Hey! I'm a context menu!
+              </div>
+            </FloatingFocusManager>
+          </FloatingOverlay>
+        )}
+      </FloatingPortal>
+    </div>
+  );
+}

packages/ui/src/components/DataStory/sidebar/sidebar.tsx

@@ -1,6 +1,6 @@
 import { NodeSettingsForm } from '../Form/nodeSettingsForm';
 import { NodeSettingsSidebarProps } from '../types';
-import { Explorer } from './explorer';
+import { Explorer } from './explorer/explorer';
 import { Placeholder } from '../common/placeholder';
 import { NodeDescription } from '@data-story/core';
 import { Run } from './run';

packages/ui/src/index.ts

@@ -6,7 +6,7 @@ export { useDataStoryControls } from './components/DataStory/dataStoryControls';
 export { eventManager, useDataStoryEvent } from './components/DataStory/events/eventManager'
 export { DataStoryEvents, type DataStoryEventType } from './components/DataStory/events/dataStoryEventType'
 export type { DataStoryObservers, DataStoryProps } from './components/DataStory/types'
-export { Explorer } from './components/DataStory/sidebar/explorer';
+export { Explorer } from './components/DataStory/sidebar/explorer/explorer';
 export { default as NodeComponent } from './components/Node/NodeComponent';
 export { WorkspaceApiJSClient } from './components/DataStory/clients/WorkspaceApiJSClient';
 export { WorkspaceSocketClient } from './components/DataStory/clients/WorkspaceSocketClient';