@workbench-kit/react 0.0.1-prototype.0

package/src/workbench/workspace/WorkspaceSearchPanel.tsx

@@ -0,0 +1,113 @@
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import { SideBarHeaderControl, SideBarViewFrame } from '../../layout/SideBarViewFrame';
+import { Badge } from '../../primitives/Badge';
+import { EmptyState } from '../../primitives/EmptyState';
+import { IconButton } from '../../primitives/IconButton';
+import { TextInput } from '../../primitives/TextInput';
+import { Toolbar } from '../../primitives/Toolbar';
+import { WorkspaceSearchResults } from './WorkspaceSearchResults';
+import type { WorkspaceSearchResult } from './types';
+
+export interface WorkspaceSearchPanelProps {
+  activePath?: string;
+  compactRows?: boolean;
+  emptyQueryLabel?: ReactNode;
+  noResultsLabel?: ReactNode;
+  onActivateResult: (result: WorkspaceSearchResult) => void;
+  onQueryChange: (query: string) => void;
+  onRefresh?: () => void;
+  onResultContextMenu?: (event: MouseEvent<HTMLElement>, result: WorkspaceSearchResult) => void;
+  placeholder?: string;
+  query: string;
+  results: WorkspaceSearchResult[];
+  searchLabel?: string;
+  title?: ReactNode;
+}
+
+export function WorkspaceSearchPanel({
+  activePath,
+  compactRows,
+  emptyQueryLabel = 'Type to search files',
+  noResultsLabel = 'No results',
+  onActivateResult,
+  onQueryChange,
+  onRefresh,
+  onResultContextMenu,
+  placeholder = 'Search',
+  query,
+  results,
+  searchLabel = 'Search workspace',
+  title = 'Search',
+}: WorkspaceSearchPanelProps) {
+  const hasQuery = Boolean(query.trim());
+  const visibleResults = hasQuery ? results : [];
+  const resultLabel = `${visibleResults.length} ${visibleResults.length === 1 ? 'result' : 'results'}`;
+
+  const handleQueryKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      if (visibleResults[0]) {
+        event.preventDefault();
+        onActivateResult(visibleResults[0]);
+      }
+      return;
+    }
+
+    if (event.key === 'Escape' && query) {
+      event.preventDefault();
+      onQueryChange('');
+    }
+  };
+
+  return (
+    <SideBarViewFrame
+      title={title}
+      actions={
+        <Toolbar>
+          <Badge variant="muted">{resultLabel}</Badge>
+          {onRefresh ? (
+            <IconButton icon="codicon-refresh" label="Refresh results" onClick={onRefresh} />
+          ) : null}
+        </Toolbar>
+      }
+      headerAddon={
+        <SideBarHeaderControl>
+          <div className="workbench-search-control">
+            <TextInput
+              aria-label={searchLabel}
+              controlWidth="full"
+              placeholder={placeholder}
+              value={query}
+              onChange={(event) => onQueryChange(event.currentTarget.value)}
+              onKeyDown={handleQueryKeyDown}
+            />
+            <IconButton
+              disabled={!query}
+              icon="codicon-close"
+              label="Clear search"
+              onClick={() => onQueryChange('')}
+            />
+          </div>
+        </SideBarHeaderControl>
+      }
+    >
+      {!hasQuery ? (
+        <EmptyState compact icon="codicon-search">
+          {emptyQueryLabel}
+        </EmptyState>
+      ) : visibleResults.length > 0 ? (
+        <WorkspaceSearchResults
+          activePath={activePath}
+          compactRows={compactRows}
+          query={query}
+          results={visibleResults}
+          onActivateResult={onActivateResult}
+          onResultContextMenu={onResultContextMenu}
+        />
+      ) : (
+        <EmptyState compact icon="codicon-search">
+          {noResultsLabel}
+        </EmptyState>
+      )}
+    </SideBarViewFrame>
+  );
+}

package/src/workbench/workspace/WorkspaceSearchResults.tsx

@@ -0,0 +1,47 @@
+import type { MouseEvent } from 'react';
+import { SideBarList, SideBarListItem } from '../../layout/SideBarViewFrame';
+import { WorkspaceFileIcon } from './WorkspaceFileIcon';
+import { WorkspaceHighlightedText } from './WorkspaceHighlightedText';
+import type { WorkspaceSearchResult } from './types';
+
+export interface WorkspaceSearchResultsProps {
+  activePath?: string;
+  compactRows?: boolean;
+  onActivateResult: (result: WorkspaceSearchResult) => void;
+  onResultContextMenu?: (event: MouseEvent<HTMLElement>, result: WorkspaceSearchResult) => void;
+  query: string;
+  results: WorkspaceSearchResult[];
+}
+
+export function WorkspaceSearchResults({
+  activePath,
+  compactRows,
+  onActivateResult,
+  onResultContextMenu,
+  query,
+  results,
+}: WorkspaceSearchResultsProps) {
+  return (
+    <SideBarList fill aria-label="Search results">
+      {results.map((result) => (
+        <SideBarListItem
+          key={result.id}
+          active={activePath === result.path}
+          style={compactRows ? { minHeight: 46 } : undefined}
+          variant="stacked"
+          onClick={() => onActivateResult(result)}
+          onContextMenu={(event) => onResultContextMenu?.(event, result)}
+        >
+          <strong>
+            <WorkspaceFileIcon mimeType={result.file.mimeType} path={result.path} />
+            <WorkspaceHighlightedText query={query} text={result.path} />
+          </strong>
+          <span>
+            Line {result.line}: <WorkspaceHighlightedText query={query} text={result.preview} />
+          </span>
+        </SideBarListItem>
+      ))}
+      {results.length === 0 ? <SideBarListItem disabled>No results</SideBarListItem> : null}
+    </SideBarList>
+  );
+}

package/src/workbench/workspace/index.ts

@@ -0,0 +1,98 @@
+export { WorkspaceEditor, languageForFile, monacoThemeForWorkspaceTheme } from './WorkspaceEditor';
+export type { WorkspaceEditorProps, WorkspaceEditorTheme } from './WorkspaceEditor';
+export { WorkspaceEditorPanel } from './WorkspaceEditorPanel';
+export type { WorkspaceEditorPanelProps } from './WorkspaceEditorPanel';
+export {
+  WORKSPACE_EXPLORER_DRAG_DATA_TYPE,
+  WORKSPACE_EXPLORER_DRAG_METADATA_DATA_TYPE,
+  WorkspaceExplorer,
+} from './WorkspaceExplorer';
+export type {
+  WorkspaceExplorerItemActionMeta,
+  WorkspaceExplorerItemContextMenuMeta,
+  WorkspaceExplorerItemKeyboardActionMeta,
+  WorkspaceExplorerInlineEditCommitMeta,
+  WorkspaceExplorerDragMetadataContext,
+  WorkspaceExplorerDragMetadataFactory,
+  WorkspaceExplorerInlineEditKind,
+  WorkspaceExplorerInlineEditState,
+  WorkspaceExplorerMoveRequestMeta,
+  WorkspaceExplorerProps,
+  WorkspaceExplorerSelectionChangeMeta,
+} from './WorkspaceExplorer';
+export { WorkspaceFileIcon, codiconForFileKind, fileIconKindForPath } from './WorkspaceFileIcon';
+export type { WorkspaceFileIconKind, WorkspaceFileIconProps } from './WorkspaceFileIcon';
+export { WorkspaceHighlightedText } from './WorkspaceHighlightedText';
+export type { WorkspaceHighlightedTextProps } from './WorkspaceHighlightedText';
+export { WorkspaceSearchPanel } from './WorkspaceSearchPanel';
+export type { WorkspaceSearchPanelProps } from './WorkspaceSearchPanel';
+export { WorkspaceSearchResults } from './WorkspaceSearchResults';
+export type { WorkspaceSearchResultsProps } from './WorkspaceSearchResults';
+export {
+  extensionOfPath,
+  fileNameOfPath,
+  isSimpleWorkspaceName,
+  joinWorkspacePath,
+  normalizeWorkspacePath,
+  parentPathOf,
+  parentPathsOf,
+  workspacePathSegments,
+} from './path';
+export {
+  createWorkspaceFileDraft,
+  discardWorkspaceFileDraft,
+  isWorkspaceFileDraftDirty,
+  resolveWorkspaceFileDraft,
+  saveWorkspaceFileDraft,
+  updateWorkspaceFileDraft,
+  type DiscardWorkspaceFileDraftInput,
+  type ResolveWorkspaceFileDraftInput,
+  type SaveWorkspaceFileDraftInput,
+  type UpdateWorkspaceFileDraftInput,
+  type WorkspaceFileDraft,
+  type WorkspaceFileDraftMap,
+} from '@workbench-kit/workspace';
+export { compactText, createContentPreview, highlightText, searchWorkspaceFiles } from './search';
+export {
+  getWorkspaceSelectionActionPaths,
+  getWorkspaceSelectionRange,
+  normalizeWorkspaceSelectionPaths,
+  pruneWorkspaceSelection,
+  updateWorkspaceSelection,
+  type UpdateWorkspaceSelectionInput,
+  type WorkspaceSelectionActionPathsInput,
+  type WorkspaceSelectionMode,
+  type WorkspaceSelectionState,
+} from '@workbench-kit/workspace';
+export { buildWorkspaceTree, flattenWorkspaceTree } from './tree';
+export {
+  getAvailableWorkspaceEntryName,
+  getWorkspaceFileMovePlan,
+  initializeVirtualWorkspaceState,
+  isWorkspaceEntryPathAvailable,
+  useVirtualWorkspace,
+  virtualWorkspaceReducer,
+} from './useVirtualWorkspace';
+export type {
+  CreateWorkspaceFileInput,
+  VirtualWorkspaceAction,
+  VirtualWorkspaceApi,
+  VirtualWorkspaceInitialState,
+  VirtualWorkspaceState,
+  WorkspaceEntryNameSuggestionInput,
+  WorkspaceEntryPathAvailabilityInput,
+  WorkspaceFileMove,
+  WorkspaceFileMovePlan,
+  WorkspaceFileMovePlanInput,
+  WriteWorkspaceFileInput,
+} from './useVirtualWorkspace';
+export type {
+  VisibleWorkspaceNode,
+  WorkspaceFile,
+  WorkspaceFileSource,
+  WorkspaceHighlightPart,
+  WorkspaceNodeType,
+  WorkspaceSearchMatchKind,
+  WorkspaceSearchResult,
+  WorkspaceTreeNode,
+} from './types';

package/src/workbench/workspace/path.ts

@@ -0,0 +1,10 @@
+export {
+  extensionOfPath,
+  fileNameOfPath,
+  isSimpleWorkspaceName,
+  joinWorkspacePath,
+  normalizeWorkspacePath,
+  parentPathOf,
+  parentPathsOf,
+  workspacePathSegments,
+} from '@workbench-kit/workspace';

package/src/workbench/workspace/search.ts

@@ -0,0 +1,6 @@
+export {
+  compactText,
+  createContentPreview,
+  highlightText,
+  searchWorkspaceFiles,
+} from '@workbench-kit/workspace';

package/src/workbench/workspace/tree.ts

@@ -0,0 +1 @@
+export { buildWorkspaceTree, flattenWorkspaceTree } from '@workbench-kit/workspace';

package/src/workbench/workspace/types.ts

@@ -0,0 +1,10 @@
+export type {
+  VisibleWorkspaceNode,
+  WorkspaceFile,
+  WorkspaceFileSource,
+  WorkspaceHighlightPart,
+  WorkspaceNodeType,
+  WorkspaceSearchMatchKind,
+  WorkspaceSearchResult,
+  WorkspaceTreeNode,
+} from '@workbench-kit/workspace';

package/src/workbench/workspace/useVirtualWorkspace.ts

@@ -0,0 +1,98 @@
+import { useMemo, useReducer } from 'react';
+import {
+  buildWorkspaceTree,
+  getAvailableWorkspaceEntryName,
+  getWorkspaceFileMovePlan,
+  initializeVirtualWorkspaceState,
+  isWorkspaceEntryPathAvailable,
+  searchWorkspaceFiles,
+  virtualWorkspaceReducer,
+  type CreateWorkspaceFileInput,
+  type VirtualWorkspaceAction,
+  type VirtualWorkspaceInitialState,
+  type VirtualWorkspaceState,
+  type WorkspaceEntryNameSuggestionInput,
+  type WorkspaceEntryPathAvailabilityInput,
+  type WorkspaceFileMove,
+  type WorkspaceFileMovePlan,
+  type WorkspaceFileMovePlanInput,
+  type WorkspaceSearchResult,
+  type WorkspaceTreeNode,
+  type WriteWorkspaceFileInput,
+} from '@workbench-kit/workspace';
+
+export interface VirtualWorkspaceApi extends VirtualWorkspaceState {
+  closeAll: () => void;
+  closeOthers: (path: string) => void;
+  closePath: (path: string) => void;
+  createFile: (file: CreateWorkspaceFileInput) => void;
+  createFolder: (path: string) => void;
+  deleteFile: (path: string) => void;
+  deleteFolder: (path: string) => void;
+  moveFile: (sourcePath: string, targetFolderPath: string) => void;
+  openFile: (path: string) => void;
+  renameFile: (path: string, name: string, mimeType?: string) => void;
+  renameFolder: (path: string, name: string) => void;
+  saveFile: (path: string, file: WriteWorkspaceFileInput) => void;
+  searchResults: WorkspaceSearchResult[];
+  setSearchQuery: (query: string) => void;
+  toggleFolder: (path: string) => void;
+  workspaceTree: WorkspaceTreeNode[];
+}
+
+export function useVirtualWorkspace(
+  initialState: VirtualWorkspaceInitialState,
+): VirtualWorkspaceApi {
+  const [state, dispatch] = useReducer(
+    virtualWorkspaceReducer,
+    initialState,
+    initializeVirtualWorkspaceState,
+  );
+  const workspaceTree = useMemo(
+    () => buildWorkspaceTree(state.folders, state.files),
+    [state.files, state.folders],
+  );
+  const searchResults = useMemo(
+    () => searchWorkspaceFiles(state.files, state.searchQuery),
+    [state.files, state.searchQuery],
+  );
+
+  return {
+    ...state,
+    closeAll: () => dispatch({ type: 'close-all' }),
+    closeOthers: (path) => dispatch({ path, type: 'close-others' }),
+    closePath: (path) => dispatch({ path, type: 'close-path' }),
+    createFile: (file) => dispatch({ file, type: 'create-file' }),
+    createFolder: (path) => dispatch({ path, type: 'create-folder' }),
+    deleteFile: (path) => dispatch({ path, type: 'delete-file' }),
+    deleteFolder: (path) => dispatch({ path, type: 'delete-folder' }),
+    moveFile: (sourcePath, targetFolderPath) =>
+      dispatch({ sourcePath, targetFolderPath, type: 'move-file' }),
+    openFile: (path) => dispatch({ path, type: 'open-file' }),
+    renameFile: (path, name, mimeType) => dispatch({ mimeType, name, path, type: 'rename-file' }),
+    renameFolder: (path, name) => dispatch({ name, path, type: 'rename-folder' }),
+    saveFile: (path, file) => dispatch({ file, path, type: 'save-file' }),
+    searchResults,
+    setSearchQuery: (query) => dispatch({ query, type: 'set-search-query' }),
+    toggleFolder: (path) => dispatch({ path, type: 'toggle-folder' }),
+    workspaceTree,
+  };
+}
+
+export {
+  getAvailableWorkspaceEntryName,
+  getWorkspaceFileMovePlan,
+  initializeVirtualWorkspaceState,
+  isWorkspaceEntryPathAvailable,
+  virtualWorkspaceReducer,
+  type CreateWorkspaceFileInput,
+  type VirtualWorkspaceAction,
+  type VirtualWorkspaceInitialState,
+  type VirtualWorkspaceState,
+  type WorkspaceEntryNameSuggestionInput,
+  type WorkspaceEntryPathAvailabilityInput,
+  type WorkspaceFileMove,
+  type WorkspaceFileMovePlan,
+  type WorkspaceFileMovePlanInput,
+  type WriteWorkspaceFileInput,
+};