@workbench-kit/react 0.0.1-prototype.0

package/src/workbench/workspace/WorkspaceExplorer.tsx

@@ -0,0 +1,524 @@
+import {
+  Fragment,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type DragEvent,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from 'react';
+import {
+  getWorkspaceSelectionActionPaths,
+  normalizeWorkspaceSelectionPaths,
+  parentPathOf,
+  updateWorkspaceSelection,
+  type WorkspaceSelectionMode,
+  type WorkspaceSelectionState,
+} from '@workbench-kit/workspace';
+import { SideBarList, SideBarListItem } from '../../layout/SideBarViewFrame';
+import { flattenWorkspaceTree } from './tree';
+import { WorkspaceFileIcon } from './WorkspaceFileIcon';
+import type { WorkspaceTreeNode } from './types';
+
+export const WORKSPACE_EXPLORER_DRAG_DATA_TYPE = 'application/x-newchobo-ui-workspace-paths';
+export const WORKSPACE_EXPLORER_DRAG_METADATA_DATA_TYPE = `${WORKSPACE_EXPLORER_DRAG_DATA_TYPE}.metadata`;
+
+export interface WorkspaceExplorerSelectionChangeMeta {
+  event: DragEvent<HTMLButtonElement> | MouseEvent<HTMLButtonElement>;
+  mode: WorkspaceSelectionMode;
+  node: WorkspaceTreeNode;
+  reason: 'click' | 'context-menu' | 'drag-start';
+}
+
+export interface WorkspaceExplorerItemActionMeta {
+  actionPaths: string[];
+  selected: boolean;
+  selection: WorkspaceSelectionState;
+}
+
+export type WorkspaceExplorerItemContextMenuMeta = WorkspaceExplorerItemActionMeta;
+
+export interface WorkspaceExplorerDragMetadataContext {
+  event: DragEvent<HTMLButtonElement>;
+  node: WorkspaceTreeNode;
+  sourcePaths: string[];
+  selection: WorkspaceSelectionState;
+}
+
+export type WorkspaceExplorerDragMetadata = unknown;
+
+export type WorkspaceExplorerDragMetadataFactory<TMetadata = WorkspaceExplorerDragMetadata> = (
+  meta: WorkspaceExplorerDragMetadataContext,
+) => TMetadata | undefined;
+
+export interface WorkspaceExplorerItemKeyboardActionMeta extends WorkspaceExplorerItemActionMeta {
+  event: KeyboardEvent<HTMLButtonElement>;
+  node: WorkspaceTreeNode;
+}
+
+export interface WorkspaceExplorerMoveRequestMeta {
+  event: DragEvent<HTMLButtonElement | HTMLUListElement>;
+  sourcePaths: string[];
+  targetFolderPath: string;
+  targetNode?: WorkspaceTreeNode;
+}
+
+export type WorkspaceExplorerInlineEditKind =
+  | 'create-file'
+  | 'create-folder'
+  | 'rename-file'
+  | 'rename-folder';
+
+export interface WorkspaceExplorerInlineEditState {
+  error?: ReactNode;
+  id?: string;
+  kind: WorkspaceExplorerInlineEditKind;
+  parentPath?: string;
+  path?: string;
+  value: string;
+}
+
+export interface WorkspaceExplorerInlineEditCommitMeta {
+  edit: WorkspaceExplorerInlineEditState;
+  value: string;
+}
+
+export interface WorkspaceExplorerProps {
+  activePath?: string;
+  dragDataType?: string;
+  dragMetadataDataType?: string;
+  dragMetadataFactory?: WorkspaceExplorerDragMetadataFactory;
+  expandedPaths: Set<string>;
+  filterQuery?: string;
+  inlineEdit?: WorkspaceExplorerInlineEditState;
+  nodes: WorkspaceTreeNode[];
+  onActivateFile: (path: string) => void;
+  onInlineEditCancel?: (edit: WorkspaceExplorerInlineEditState) => void;
+  onInlineEditCommit?: (meta: WorkspaceExplorerInlineEditCommitMeta) => void;
+  onInlineEditValueChange?: (value: string, edit: WorkspaceExplorerInlineEditState) => void;
+  onItemContextMenu?: (
+    event: MouseEvent<HTMLButtonElement>,
+    node: WorkspaceTreeNode,
+    meta: WorkspaceExplorerItemContextMenuMeta,
+  ) => void;
+  onRequestDelete?: (meta: WorkspaceExplorerItemKeyboardActionMeta) => void;
+  onRequestMove?: (meta: WorkspaceExplorerMoveRequestMeta) => void;
+  onRequestRename?: (meta: WorkspaceExplorerItemKeyboardActionMeta) => void;
+  onSelectionChange?: (
+    selection: WorkspaceSelectionState,
+    meta: WorkspaceExplorerSelectionChangeMeta,
+  ) => void;
+  onToggleFolder: (path: string) => void;
+  selectedPaths?: Iterable<string>;
+  selectionAnchorPath?: string;
+}
+
+export function WorkspaceExplorer({
+  activePath,
+  dragDataType = WORKSPACE_EXPLORER_DRAG_DATA_TYPE,
+  dragMetadataDataType = WORKSPACE_EXPLORER_DRAG_METADATA_DATA_TYPE,
+  dragMetadataFactory,
+  expandedPaths,
+  filterQuery = '',
+  inlineEdit,
+  nodes,
+  onActivateFile,
+  onInlineEditCancel,
+  onInlineEditCommit,
+  onInlineEditValueChange,
+  onItemContextMenu,
+  onRequestDelete,
+  onRequestMove,
+  onRequestRename,
+  onSelectionChange,
+  onToggleFolder,
+  selectedPaths = [],
+  selectionAnchorPath,
+}: WorkspaceExplorerProps) {
+  const draggedPathsRef = useRef<string[]>([]);
+  const inlineEditInputRef = useRef<HTMLInputElement>(null);
+  const [dropTargetPath, setDropTargetPath] = useState<string | null>(null);
+  const visibleNodes = useMemo(
+    () => flattenWorkspaceTree({ expandedPaths, filterQuery, nodes }),
+    [expandedPaths, filterQuery, nodes],
+  );
+  const visibleFilePaths = useMemo(
+    () => visibleNodes.filter(({ node }) => node.type === 'file').map(({ node }) => node.path),
+    [visibleNodes],
+  );
+  const normalizedSelectedPaths = useMemo(
+    () => normalizeWorkspaceSelectionPaths(selectedPaths),
+    [selectedPaths],
+  );
+  const selectedPathSet = useMemo(
+    () => new Set(normalizedSelectedPaths),
+    [normalizedSelectedPaths],
+  );
+  const currentSelection = useMemo<WorkspaceSelectionState>(
+    () => ({
+      anchorPath: selectionAnchorPath,
+      paths: normalizedSelectedPaths,
+    }),
+    [normalizedSelectedPaths, selectionAnchorPath],
+  );
+  const inlineEditKey = inlineEdit
+    ? (inlineEdit.id ??
+      `${inlineEdit.kind}:${inlineEdit.path ?? ''}:${inlineEdit.parentPath ?? ''}`)
+    : undefined;
+
+  useEffect(() => {
+    const input = inlineEditInputRef.current;
+    if (!input) return;
+
+    input.focus();
+    input.select();
+  }, [inlineEditKey]);
+
+  const selectFile = (event: MouseEvent<HTMLButtonElement>, node: WorkspaceTreeNode) => {
+    const mode = resolveSelectionMode(event);
+
+    if (onSelectionChange) {
+      onSelectionChange(
+        updateWorkspaceSelection({
+          mode,
+          orderedPaths: visibleFilePaths,
+          selection: currentSelection,
+          targetPath: node.path,
+        }),
+        { event, mode, node, reason: 'click' },
+      );
+    }
+
+    if (mode === 'single' || !onSelectionChange) {
+      onActivateFile(node.path);
+    }
+  };
+
+  const getItemActionMeta = (node: WorkspaceTreeNode): WorkspaceExplorerItemActionMeta => {
+    const selected = node.type === 'file' && selectedPathSet.has(node.path);
+    const selection =
+      node.type === 'file' && !selected
+        ? {
+            anchorPath: node.path,
+            paths: [node.path],
+          }
+        : currentSelection;
+
+    return {
+      actionPaths: getWorkspaceSelectionActionPaths({
+        selectedPaths: selection.paths,
+        targetPath: node.path,
+      }),
+      selected,
+      selection,
+    };
+  };
+
+  const handleItemContextMenu = (event: MouseEvent<HTMLButtonElement>, node: WorkspaceTreeNode) => {
+    const meta = getItemActionMeta(node);
+
+    if (node.type === 'file' && !meta.selected) {
+      onSelectionChange?.(meta.selection, {
+        event,
+        mode: 'single',
+        node,
+        reason: 'context-menu',
+      });
+    }
+
+    onItemContextMenu?.(event, node, meta);
+  };
+
+  const handleItemKeyDown = (event: KeyboardEvent<HTMLButtonElement>, node: WorkspaceTreeNode) => {
+    if (event.key !== 'Delete' && event.key !== 'F2') return;
+
+    const meta = getItemActionMeta(node);
+
+    if (event.key === 'Delete') {
+      if (node.type === 'file' && meta.actionPaths.length === 0) return;
+
+      event.preventDefault();
+      onRequestDelete?.({ ...meta, event, node });
+      return;
+    }
+
+    if (meta.actionPaths.length !== 1) return;
+
+    event.preventDefault();
+    onRequestRename?.({ ...meta, event, node });
+  };
+
+  const canDropToFolder = (targetFolderPath: string) =>
+    Boolean(onRequestMove) &&
+    draggedPathsRef.current.length > 0 &&
+    draggedPathsRef.current.some((sourcePath) => parentPathOf(sourcePath) !== targetFolderPath);
+
+  const handleItemDragStart = (event: DragEvent<HTMLButtonElement>, node: WorkspaceTreeNode) => {
+    if (!onRequestMove || node.type !== 'file') {
+      event.preventDefault();
+      return;
+    }
+
+    const meta = getItemActionMeta(node);
+    const sourcePaths = meta.actionPaths;
+    if (sourcePaths.length === 0) {
+      event.preventDefault();
+      return;
+    }
+
+    if (!meta.selected) {
+      onSelectionChange?.(meta.selection, {
+        event,
+        mode: 'single',
+        node,
+        reason: 'drag-start',
+      });
+    }
+
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.setData(dragDataType, JSON.stringify(sourcePaths));
+    if (dragMetadataFactory) {
+      const metadata = dragMetadataFactory({
+        event,
+        node,
+        sourcePaths,
+        selection: meta.selection,
+      });
+
+      if (metadata !== undefined) {
+        event.dataTransfer.setData(dragMetadataDataType, JSON.stringify(metadata));
+      }
+    }
+    event.dataTransfer.setData('text/plain', sourcePaths.join('\n'));
+    draggedPathsRef.current = sourcePaths;
+    setDropTargetPath(null);
+  };
+
+  const handleDragEnd = () => {
+    draggedPathsRef.current = [];
+    setDropTargetPath(null);
+  };
+
+  const handleDropTargetDragOver = (
+    event: DragEvent<HTMLButtonElement | HTMLUListElement>,
+    targetFolderPath: string,
+  ) => {
+    if (!canDropToFolder(targetFolderPath)) return;
+
+    if (targetFolderPath) {
+      event.stopPropagation();
+    }
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+    setDropTargetPath(targetFolderPath);
+  };
+
+  const handleDropTargetDragLeave = (
+    event: DragEvent<HTMLButtonElement | HTMLUListElement>,
+    targetFolderPath: string,
+  ) => {
+    if (targetFolderPath) {
+      event.stopPropagation();
+    }
+    if (event.currentTarget.contains(event.relatedTarget as Node | null)) return;
+
+    setDropTargetPath((currentPath) => (currentPath === targetFolderPath ? null : currentPath));
+  };
+
+  const handleDrop = (
+    event: DragEvent<HTMLButtonElement | HTMLUListElement>,
+    targetFolderPath: string,
+    targetNode?: WorkspaceTreeNode,
+  ) => {
+    if (!canDropToFolder(targetFolderPath)) return;
+
+    if (targetFolderPath) {
+      event.stopPropagation();
+    }
+    event.preventDefault();
+    onRequestMove?.({
+      event,
+      sourcePaths: draggedPathsRef.current,
+      targetFolderPath,
+      targetNode,
+    });
+    draggedPathsRef.current = [];
+    setDropTargetPath(null);
+  };
+
+  const commitInlineEdit = () => {
+    if (!inlineEdit) return;
+
+    onInlineEditCommit?.({
+      edit: inlineEdit,
+      value: inlineEdit.value.trim(),
+    });
+  };
+
+  const handleInlineEditKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (!inlineEdit) return;
+
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      commitInlineEdit();
+      return;
+    }
+
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      onInlineEditCancel?.(inlineEdit);
+    }
+  };
+
+  const renderInlineEdit = ({
+    depth,
+    directory,
+    key,
+    mimeType,
+    path,
+  }: {
+    depth: number;
+    directory: boolean;
+    key: string;
+    mimeType?: string;
+    path: string;
+  }) => {
+    if (!inlineEdit) return null;
+
+    const depthStyle = { '--depth': depth } as CSSProperties;
+
+    return (
+      <li key={key} className="ui-side-bar-list-entry">
+        <div className="ui-side-bar-inline-edit" style={depthStyle}>
+          <span className="workbench-tree-prefix">
+            <span className="workbench-tree-spacer" />
+            <WorkspaceFileIcon directory={directory} mimeType={mimeType} path={path} />
+          </span>
+          <input
+            ref={inlineEditInputRef}
+            aria-label="Workspace item name"
+            className="ui-side-bar-inline-edit__input"
+            value={inlineEdit.value}
+            onBlur={commitInlineEdit}
+            onChange={(event) => onInlineEditValueChange?.(event.currentTarget.value, inlineEdit)}
+            onKeyDown={handleInlineEditKeyDown}
+          />
+        </div>
+        {inlineEdit.error ? (
+          <div className="ui-side-bar-inline-edit__error" style={depthStyle}>
+            {inlineEdit.error}
+          </div>
+        ) : null}
+      </li>
+    );
+  };
+
+  return (
+    <SideBarList
+      fill
+      aria-label="Workspace files"
+      dropTarget={dropTargetPath === ''}
+      onDragLeave={(event) => handleDropTargetDragLeave(event, '')}
+      onDragOver={(event) => handleDropTargetDragOver(event, '')}
+      onDrop={(event) => handleDrop(event, '')}
+    >
+      {inlineEdit?.kind.startsWith('create') && !inlineEdit.parentPath
+        ? renderInlineEdit({
+            depth: 0,
+            directory: inlineEdit.kind === 'create-folder',
+            key: `inline-edit:${inlineEditKey}`,
+            path: inlineEdit.value,
+          })
+        : null}
+      {visibleNodes.map(({ depth, node }) => {
+        const isFolder = node.type === 'folder';
+        const expanded = expandedPaths.has(node.path) || Boolean(filterQuery.trim());
+        const selected = node.type === 'file' && selectedPathSet.has(node.path);
+        const dropTarget = isFolder && dropTargetPath === node.path;
+        const editingRename =
+          inlineEdit?.kind.startsWith('rename') && inlineEdit.path === node.path;
+
+        return editingRename ? (
+          renderInlineEdit({
+            depth,
+            directory: isFolder,
+            key: `inline-edit:${inlineEditKey}`,
+            mimeType: node.file?.mimeType,
+            path: node.path,
+          })
+        ) : (
+          <Fragment key={node.path}>
+            <SideBarListItem
+              active={activePath === node.path}
+              data-workspace-path={node.path}
+              depth={depth}
+              draggable={node.type === 'file' && Boolean(onRequestMove)}
+              dropTarget={dropTarget}
+              selected={selected}
+              onClick={(event) => {
+                if (isFolder) {
+                  onToggleFolder(node.path);
+                  return;
+                }
+                selectFile(event, node);
+              }}
+              onContextMenu={(event) => handleItemContextMenu(event, node)}
+              onDragEnd={handleDragEnd}
+              onDragLeave={
+                isFolder ? (event) => handleDropTargetDragLeave(event, node.path) : undefined
+              }
+              onDragOver={
+                isFolder ? (event) => handleDropTargetDragOver(event, node.path) : undefined
+              }
+              onDragStart={(event) => handleItemDragStart(event, node)}
+              onDrop={isFolder ? (event) => handleDrop(event, node.path, node) : undefined}
+              onKeyDown={(event) => handleItemKeyDown(event, node)}
+            >
+              <span className="workbench-tree-prefix">
+                {isFolder ? (
+                  <i
+                    aria-hidden="true"
+                    className={`codicon codicon-chevron-${expanded ? 'down' : 'right'} workbench-tree-chevron`}
+                  />
+                ) : (
+                  <span className="workbench-tree-spacer" />
+                )}
+                <WorkspaceFileIcon
+                  directory={isFolder}
+                  expanded={expanded}
+                  mimeType={node.file?.mimeType}
+                  path={node.path}
+                />
+              </span>
+              <span className="workbench-tree-label">{node.name}</span>
+            </SideBarListItem>
+            {isFolder &&
+            inlineEdit?.kind.startsWith('create') &&
+            inlineEdit.parentPath === node.path
+              ? renderInlineEdit({
+                  depth: depth + 1,
+                  directory: inlineEdit.kind === 'create-folder',
+                  key: `inline-edit:${inlineEditKey}`,
+                  path: `${node.path}/${inlineEdit.value}`,
+                })
+              : null}
+          </Fragment>
+        );
+      })}
+      {visibleNodes.length === 0 ? <SideBarListItem disabled>No files</SideBarListItem> : null}
+    </SideBarList>
+  );
+}
+
+function resolveSelectionMode(event: MouseEvent<HTMLElement>): WorkspaceSelectionMode {
+  const range = event.shiftKey;
+  const toggle = event.ctrlKey || event.metaKey;
+
+  if (range && toggle) return 'toggle-range';
+  if (range) return 'range';
+  if (toggle) return 'toggle';
+  return 'single';
+}

package/src/workbench/workspace/WorkspaceFileIcon.tsx

@@ -0,0 +1,149 @@
+import { extensionOfPath, fileNameOfPath } from './path';
+
+export type WorkspaceFileIconKind =
+  | 'archive'
+  | 'config'
+  | 'css'
+  | 'default'
+  | 'env'
+  | 'folder'
+  | 'git'
+  | 'html'
+  | 'image'
+  | 'javascript'
+  | 'json'
+  | 'lock'
+  | 'markdown'
+  | 'package'
+  | 'pdf'
+  | 'sql'
+  | 'text'
+  | 'typescript'
+  | 'vue'
+  | 'xml'
+  | 'yaml';
+
+export function fileIconKindForPath(path: string, mimeType?: string): WorkspaceFileIconKind {
+  const fileName = fileNameOfPath(path).toLowerCase();
+  const extension = extensionOfPath(path);
+
+  if (fileName === 'package.json') return 'package';
+  if (fileName.endsWith('.lock') || fileName.includes('lock')) return 'lock';
+  if (fileName.startsWith('.env')) return 'env';
+  if (fileName.startsWith('.git')) return 'git';
+  if (mimeType?.startsWith('image/')) return 'image';
+  if (mimeType === 'application/pdf' || extension === 'pdf') return 'pdf';
+
+  switch (extension) {
+    case '7z':
+    case 'gz':
+    case 'rar':
+    case 'tar':
+    case 'zip':
+      return 'archive';
+    case 'css':
+    case 'less':
+    case 'scss':
+      return 'css';
+    case 'html':
+      return 'html';
+    case 'jpeg':
+    case 'jpg':
+    case 'png':
+    case 'svg':
+    case 'webp':
+      return 'image';
+    case 'cjs':
+    case 'js':
+    case 'jsx':
+    case 'mjs':
+      return 'javascript';
+    case 'json':
+      return 'json';
+    case 'md':
+    case 'mdx':
+      return 'markdown';
+    case 'sql':
+      return 'sql';
+    case 'ts':
+    case 'tsx':
+      return 'typescript';
+    case 'vue':
+      return 'vue';
+    case 'xml':
+      return 'xml';
+    case 'yaml':
+    case 'yml':
+      return 'yaml';
+    case 'ini':
+    case 'toml':
+      return 'config';
+    case 'txt':
+      return 'text';
+    default:
+      return 'default';
+  }
+}
+
+export function codiconForFileKind(kind: WorkspaceFileIconKind) {
+  switch (kind) {
+    case 'archive':
+      return 'codicon-file-zip';
+    case 'config':
+      return 'codicon-settings';
+    case 'css':
+      return 'codicon-symbol-color';
+    case 'env':
+      return 'codicon-key';
+    case 'folder':
+      return 'codicon-folder';
+    case 'git':
+      return 'codicon-source-control';
+    case 'html':
+      return 'codicon-code';
+    case 'image':
+      return 'codicon-file-media';
+    case 'javascript':
+      return 'codicon-symbol-method';
+    case 'json':
+      return 'codicon-json';
+    case 'lock':
+      return 'codicon-lock';
+    case 'markdown':
+      return 'codicon-markdown';
+    case 'package':
+      return 'codicon-package';
+    case 'pdf':
+      return 'codicon-file-pdf';
+    case 'sql':
+      return 'codicon-database';
+    case 'text':
+      return 'codicon-file-text';
+    case 'typescript':
+      return 'codicon-symbol-class';
+    case 'vue':
+      return 'codicon-symbol-object';
+    case 'xml':
+      return 'codicon-code';
+    case 'yaml':
+      return 'codicon-symbol-property';
+    default:
+      return 'codicon-file';
+  }
+}
+
+export interface WorkspaceFileIconProps {
+  directory?: boolean;
+  expanded?: boolean;
+  mimeType?: string;
+  path: string;
+}
+
+export function WorkspaceFileIcon({ directory, expanded, mimeType, path }: WorkspaceFileIconProps) {
+  const kind = directory ? 'folder' : fileIconKindForPath(path, mimeType);
+  const icon = directory && expanded ? 'codicon-folder-opened' : codiconForFileKind(kind);
+
+  return (
+    <i aria-hidden="true" className={`codicon ${icon} workspace-file-icon`} data-file-kind={kind} />
+  );
+}

package/src/workbench/workspace/WorkspaceHighlightedText.tsx

@@ -0,0 +1,22 @@
+import { highlightText } from './search';
+
+export interface WorkspaceHighlightedTextProps {
+  query: string;
+  text: string;
+}
+
+export function WorkspaceHighlightedText({ query, text }: WorkspaceHighlightedTextProps) {
+  return (
+    <>
+      {highlightText(text, query).map((part, index) =>
+        part.match ? (
+          <mark key={`${part.text}-${index}`} className="workbench-search-mark">
+            {part.text}
+          </mark>
+        ) : (
+          <span key={`${part.text}-${index}`}>{part.text}</span>
+        ),
+      )}
+    </>
+  );
+}