@workbench-kit/react 0.0.2-prototype.0.2.4 → 0.0.2-prototype.0.2.6

package/src/workbench/workspace/WorkspaceExplorerPanel.tsx

@@ -1,73 +1,73 @@
-import type { ReactNode } from 'react';
-import { SideBarViewFrame, SidebarToolbar, WorkbenchSidebarSection } from '../../layout/sidebar';
-import { IconButton } from '../../primitives/icon-button';
-import { cx } from '../../utils/cx';
-import { WorkspaceExplorer, type WorkspaceExplorerProps } from './WorkspaceExplorer';
-
-export interface WorkspaceExplorerPanelProps extends WorkspaceExplorerProps {
-  'aria-label'?: string | undefined;
-  className?: string | undefined;
-  onNewFile?: (() => void) | undefined;
-  onNewFolder?: (() => void) | undefined;
-  onRefresh?: (() => void) | undefined;
-  refreshLabel?: string;
-  sectionTitle?: string;
-  title?: string;
-  toolbarLeading?: ReactNode;
-  toolbarStatus?: ReactNode;
-  toolbarTrailing?: ReactNode;
-}
-
-export function WorkspaceExplorerPanel({
-  'aria-label': ariaLabel,
-  className,
-  onNewFile,
-  onNewFolder,
-  onRefresh,
-  refreshLabel = 'Refresh Explorer',
-  sectionTitle = 'Workspace',
-  title = 'Explorer',
-  toolbarLeading,
-  toolbarStatus,
-  toolbarTrailing,
-  ...explorerProps
-}: WorkspaceExplorerPanelProps) {
-  const hasDefaultActions = Boolean(onNewFile || onNewFolder || onRefresh);
-  const hasToolbarSlots = Boolean(toolbarLeading || toolbarTrailing || toolbarStatus);
-  const headerActions =
-    hasDefaultActions || hasToolbarSlots ? (
-      <SidebarToolbar
-        aria-label="Explorer actions"
-        className="ui-explorer-action-bar"
-        role="toolbar"
-      >
-        {toolbarLeading}
-        {onNewFile ? (
-          <IconButton compact icon="codicon-new-file" label="New file" onClick={onNewFile} />
-        ) : null}
-        {onNewFolder ? (
-          <IconButton compact icon="codicon-new-folder" label="New folder" onClick={onNewFolder} />
-        ) : null}
-        {onRefresh ? (
-          <IconButton compact icon="codicon-refresh" label={refreshLabel} onClick={onRefresh} />
-        ) : null}
-        {toolbarTrailing}
-        {toolbarStatus ? (
-          <span className="ui-explorer-action-bar__status">{toolbarStatus}</span>
-        ) : null}
-      </SidebarToolbar>
-    ) : undefined;
-
-  return (
-    <SideBarViewFrame
-      actions={headerActions}
-      aria-label={ariaLabel}
-      className={cx('workbench-explorer-view', 'ui-workspace-explorer-panel', className)}
-      title={title}
-    >
-      <WorkbenchSidebarSection id="workspace-explorer-section" title={sectionTitle}>
-        <WorkspaceExplorer {...explorerProps} />
-      </WorkbenchSidebarSection>
-    </SideBarViewFrame>
-  );
-}
+import type { ReactNode } from 'react';
+import { SideBarViewFrame, SidebarToolbar, WorkbenchSidebarSection } from '../../layout/sidebar';
+import { IconButton } from '../../primitives/icon-button';
+import { cx } from '../../utils/cx';
+import { WorkspaceExplorer, type WorkspaceExplorerProps } from './WorkspaceExplorer';
+
+export interface WorkspaceExplorerPanelProps extends WorkspaceExplorerProps {
+  'aria-label'?: string | undefined;
+  className?: string | undefined;
+  onNewFile?: (() => void) | undefined;
+  onNewFolder?: (() => void) | undefined;
+  onRefresh?: (() => void) | undefined;
+  refreshLabel?: string;
+  sectionTitle?: string;
+  title?: string;
+  toolbarLeading?: ReactNode;
+  toolbarStatus?: ReactNode;
+  toolbarTrailing?: ReactNode;
+}
+
+export function WorkspaceExplorerPanel({
+  'aria-label': ariaLabel,
+  className,
+  onNewFile,
+  onNewFolder,
+  onRefresh,
+  refreshLabel = 'Refresh Explorer',
+  sectionTitle = 'Workspace',
+  title = 'Explorer',
+  toolbarLeading,
+  toolbarStatus,
+  toolbarTrailing,
+  ...explorerProps
+}: WorkspaceExplorerPanelProps) {
+  const hasDefaultActions = Boolean(onNewFile || onNewFolder || onRefresh);
+  const hasToolbarSlots = Boolean(toolbarLeading || toolbarTrailing || toolbarStatus);
+  const headerActions =
+    hasDefaultActions || hasToolbarSlots ? (
+      <SidebarToolbar
+        aria-label="Explorer actions"
+        className="ui-explorer-action-bar"
+        role="toolbar"
+      >
+        {toolbarLeading}
+        {onNewFile ? (
+          <IconButton compact icon="codicon-new-file" label="New file" onClick={onNewFile} />
+        ) : null}
+        {onNewFolder ? (
+          <IconButton compact icon="codicon-new-folder" label="New folder" onClick={onNewFolder} />
+        ) : null}
+        {onRefresh ? (
+          <IconButton compact icon="codicon-refresh" label={refreshLabel} onClick={onRefresh} />
+        ) : null}
+        {toolbarTrailing}
+        {toolbarStatus ? (
+          <span className="ui-explorer-action-bar__status">{toolbarStatus}</span>
+        ) : null}
+      </SidebarToolbar>
+    ) : undefined;
+
+  return (
+    <SideBarViewFrame
+      actions={headerActions}
+      aria-label={ariaLabel}
+      className={cx('workbench-explorer-view', 'ui-workspace-explorer-panel', className)}
+      title={title}
+    >
+      <WorkbenchSidebarSection id="workspace-explorer-section" title={sectionTitle}>
+        <WorkspaceExplorer {...explorerProps} />
+      </WorkbenchSidebarSection>
+    </SideBarViewFrame>
+  );
+}

package/src/workbench/workspace/WorkspaceFileIcon.tsx

@@ -1,23 +1,23 @@
-import { codiconForFileKind, fileIconKindForPath, type FileIconKind } from '../../icons/file-icon';
-import { FileIcon } from '../../primitives/file-icon';
-
-export interface WorkspaceFileIconProps {
-  className?: string;
-  directory?: boolean;
-  expanded?: boolean;
-  mimeType?: string;
-  path: string;
-}
-
-export function WorkspaceFileIcon({
-  className,
-  directory,
-  expanded,
-  mimeType,
-  path,
-}: WorkspaceFileIconProps) {
-  const kind: FileIconKind = directory ? 'folder' : fileIconKindForPath(path, mimeType);
-  const icon = directory && expanded ? 'codicon-folder-opened' : codiconForFileKind(kind);
-
-  return <FileIcon className={className} icon={icon} kind={kind} />;
-}
+import { codiconForFileKind, fileIconKindForPath, type FileIconKind } from '../../icons/file-icon';
+import { FileIcon } from '../../primitives/file-icon';
+
+export interface WorkspaceFileIconProps {
+  className?: string;
+  directory?: boolean;
+  expanded?: boolean;
+  mimeType?: string;
+  path: string;
+}
+
+export function WorkspaceFileIcon({
+  className,
+  directory,
+  expanded,
+  mimeType,
+  path,
+}: WorkspaceFileIconProps) {
+  const kind: FileIconKind = directory ? 'folder' : fileIconKindForPath(path, mimeType);
+  const icon = directory && expanded ? 'codicon-folder-opened' : codiconForFileKind(kind);
+
+  return <FileIcon className={className} icon={icon} kind={kind} />;
+}

package/src/workbench/workspace/WorkspaceHighlightedText.tsx

@@ -1,22 +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>
-        ),
-      )}
-    </>
-  );
-}
+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>
+        ),
+      )}
+    </>
+  );
+}

package/src/workbench/workspace/WorkspacePathLabel.tsx

@@ -1,42 +1,42 @@
-import { workspacePathSegments } from './path';
-import { cx } from '../../utils/cx';
-
-export interface WorkspacePathLabelProps {
-  className?: string;
-  path: string;
-}
-
-export function WorkspacePathLabel({ className, path }: WorkspacePathLabelProps) {
-  const segments = workspacePathSegments(path);
-
-  if (segments.length === 0) {
-    return null;
-  }
-
-  if (segments.length === 1) {
-    return (
-      <span className={cx('workspace-path-label', className)} title={path}>
-        {segments[0]}
-      </span>
-    );
-  }
-
-  return (
-    <span className={cx('workspace-path-label', className)} title={path}>
-      {segments.map((segment, index) => (
-        <span className="workspace-path-label__segment" key={`${index}-${segment}`}>
-          {index > 0 ? <span className="workspace-path-label__separator">{' > '}</span> : null}
-          <span
-            className={
-              index === segments.length - 1
-                ? 'workspace-path-label__leaf'
-                : 'workspace-path-label__crumb'
-            }
-          >
-            {segment}
-          </span>
-        </span>
-      ))}
-    </span>
-  );
-}
+import { workspacePathSegments } from './path';
+import { cx } from '../../utils/cx';
+
+export interface WorkspacePathLabelProps {
+  className?: string;
+  path: string;
+}
+
+export function WorkspacePathLabel({ className, path }: WorkspacePathLabelProps) {
+  const segments = workspacePathSegments(path);
+
+  if (segments.length === 0) {
+    return null;
+  }
+
+  if (segments.length === 1) {
+    return (
+      <span className={cx('workspace-path-label', className)} title={path}>
+        {segments[0]}
+      </span>
+    );
+  }
+
+  return (
+    <span className={cx('workspace-path-label', className)} title={path}>
+      {segments.map((segment, index) => (
+        <span className="workspace-path-label__segment" key={`${index}-${segment}`}>
+          {index > 0 ? <span className="workspace-path-label__separator">{' > '}</span> : null}
+          <span
+            className={
+              index === segments.length - 1
+                ? 'workspace-path-label__leaf'
+                : 'workspace-path-label__crumb'
+            }
+          >
+            {segment}
+          </span>
+        </span>
+      ))}
+    </span>
+  );
+}

package/src/workbench/workspace/WorkspaceSearchPanel.tsx

@@ -1,116 +1,116 @@
-import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
-import { SideBarHeaderControl, SideBarViewFrame, SidebarToolbar } from '../../layout/sidebar';
-import { Badge } from '../../primitives/badge';
-import { ClearableTextInput } from '../../primitives/clearable-text-input';
-import { EmptyState } from '../../primitives/empty-state';
-import { IconButton } from '../../primitives/icon-button';
-import { cx } from '../../utils/cx';
-import { WorkspaceSearchResults } from './WorkspaceSearchResults';
-import type { WorkspaceSearchResult } from './types';
-
-export interface WorkspaceSearchPanelProps {
-  activePath?: string;
-  'aria-label'?: string | undefined;
-  className?: string | undefined;
-  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,
-  'aria-label': ariaLabel = 'Workspace Search',
-  className,
-  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;
-    }
-  };
-
-  return (
-    <SideBarViewFrame
-      aria-label={ariaLabel}
-      className={cx('ui-workspace-search-panel', className)}
-      title={title}
-      actions={
-        <SidebarToolbar>
-          <Badge variant="muted">{resultLabel}</Badge>
-          {onRefresh ? (
-            <IconButton icon="codicon-refresh" label="Refresh results" onClick={onRefresh} />
-          ) : null}
-        </SidebarToolbar>
-      }
-      headerAddon={
-        <SideBarHeaderControl>
-          <div className="workbench-search-control">
-            <ClearableTextInput
-              aria-label={searchLabel}
-              clearLabel="Clear search"
-              controlWidth="full"
-              placeholder={placeholder}
-              value={query}
-              onClear={() => onQueryChange('')}
-              onChange={(event) => onQueryChange(event.currentTarget.value)}
-              onKeyDown={handleQueryKeyDown}
-            />
-          </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>
-  );
-}
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import { SideBarHeaderControl, SideBarViewFrame, SidebarToolbar } from '../../layout/sidebar';
+import { Badge } from '../../primitives/badge';
+import { ClearableTextInput } from '../../primitives/clearable-text-input';
+import { EmptyState } from '../../primitives/empty-state';
+import { IconButton } from '../../primitives/icon-button';
+import { cx } from '../../utils/cx';
+import { WorkspaceSearchResults } from './WorkspaceSearchResults';
+import type { WorkspaceSearchResult } from './types';
+
+export interface WorkspaceSearchPanelProps {
+  activePath?: string;
+  'aria-label'?: string | undefined;
+  className?: string | undefined;
+  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,
+  'aria-label': ariaLabel = 'Workspace Search',
+  className,
+  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;
+    }
+  };
+
+  return (
+    <SideBarViewFrame
+      aria-label={ariaLabel}
+      className={cx('ui-workspace-search-panel', className)}
+      title={title}
+      actions={
+        <SidebarToolbar>
+          <Badge variant="muted">{resultLabel}</Badge>
+          {onRefresh ? (
+            <IconButton icon="codicon-refresh" label="Refresh results" onClick={onRefresh} />
+          ) : null}
+        </SidebarToolbar>
+      }
+      headerAddon={
+        <SideBarHeaderControl>
+          <div className="workbench-search-control">
+            <ClearableTextInput
+              aria-label={searchLabel}
+              clearLabel="Clear search"
+              controlWidth="full"
+              placeholder={placeholder}
+              value={query}
+              onClear={() => onQueryChange('')}
+              onChange={(event) => onQueryChange(event.currentTarget.value)}
+              onKeyDown={handleQueryKeyDown}
+            />
+          </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

@@ -1,51 +1,51 @@
-import type { MouseEvent } from 'react';
-import { SideBarList, SideBarListItem } from '../../layout/sidebar';
-import { WorkspaceFileIcon } from './WorkspaceFileIcon';
-import { WorkspaceHighlightedText } from './WorkspaceHighlightedText';
-import { formatWorkspacePathDisplay } from './path';
-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={formatWorkspacePathDisplay(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>
-  );
-}
+import type { MouseEvent } from 'react';
+import { SideBarList, SideBarListItem } from '../../layout/sidebar';
+import { WorkspaceFileIcon } from './WorkspaceFileIcon';
+import { WorkspaceHighlightedText } from './WorkspaceHighlightedText';
+import { formatWorkspacePathDisplay } from './path';
+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={formatWorkspacePathDisplay(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>
+  );
+}