@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.10

package/src/workbench/SplitView.tsx

@@ -1,136 +0,0 @@
-import {
-  useRef,
-  useState,
-  type CSSProperties,
-  type KeyboardEvent,
-  type PointerEvent,
-  type ReactNode,
-} from 'react';
-import { cx } from '../utils/cx';
-
-export interface SplitViewProps {
-  className?: string;
-  defaultPrimarySizePercent?: number;
-  keyboardStepPercent?: number;
-  maxPrimarySizePercent?: number;
-  minPrimarySizePercent?: number;
-  onPrimarySizePercentChange?: (primarySizePercent: number) => void;
-  primary: ReactNode;
-  primarySizePercent?: number;
-  secondary: ReactNode;
-}
-
-export function SplitView({
-  className,
-  defaultPrimarySizePercent = 40,
-  keyboardStepPercent = 5,
-  maxPrimarySizePercent = 85,
-  minPrimarySizePercent = 15,
-  onPrimarySizePercentChange,
-  primary,
-  primarySizePercent: controlledPrimarySizePercent,
-  secondary,
-}: SplitViewProps) {
-  const [uncontrolledPrimarySizePercent, setUncontrolledPrimarySizePercent] =
-    useState(defaultPrimarySizePercent);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const dragging = useRef(false);
-  const isControlled = controlledPrimarySizePercent !== undefined;
-
-  const clampPrimarySize = (value: number) =>
-    Math.max(minPrimarySizePercent, Math.min(maxPrimarySizePercent, value));
-
-  const primarySizePercent = clampPrimarySize(
-    controlledPrimarySizePercent ?? uncontrolledPrimarySizePercent,
-  );
-
-  const commitPrimarySize = (value: number) => {
-    const nextValue = clampPrimarySize(value);
-    if (!isControlled) {
-      setUncontrolledPrimarySizePercent(nextValue);
-    }
-    onPrimarySizePercentChange?.(nextValue);
-  };
-
-  const updatePrimarySize = (clientX: number) => {
-    if (!containerRef.current) return;
-    const rect = containerRef.current.getBoundingClientRect();
-    const pct = ((clientX - rect.left) / rect.width) * 100;
-    commitPrimarySize(pct);
-  };
-
-  const onPointerDown = (event: PointerEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    event.currentTarget.setPointerCapture(event.pointerId);
-    dragging.current = true;
-    event.currentTarget.classList.add('is-dragging');
-  };
-
-  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {
-    if (!dragging.current) return;
-    updatePrimarySize(event.clientX);
-  };
-
-  const onPointerUp = (event: PointerEvent<HTMLDivElement>) => {
-    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-      event.currentTarget.releasePointerCapture(event.pointerId);
-    }
-    dragging.current = false;
-    event.currentTarget.classList.remove('is-dragging');
-  };
-
-  const onSeparatorKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    if (event.key === 'ArrowLeft') {
-      event.preventDefault();
-      commitPrimarySize(primarySizePercent - keyboardStepPercent);
-      return;
-    }
-
-    if (event.key === 'ArrowRight') {
-      event.preventDefault();
-      commitPrimarySize(primarySizePercent + keyboardStepPercent);
-      return;
-    }
-
-    if (event.key === 'Home') {
-      event.preventDefault();
-      commitPrimarySize(minPrimarySizePercent);
-      return;
-    }
-
-    if (event.key === 'End') {
-      event.preventDefault();
-      commitPrimarySize(maxPrimarySizePercent);
-    }
-  };
-
-  return (
-    <div
-      ref={containerRef}
-      className={cx('ui-workbench-split-view', className)}
-      style={
-        {
-          '--ui-workbench-split-primary-size': `${primarySizePercent}%`,
-        } as CSSProperties
-      }
-    >
-      <div className="ui-workbench-split-view__primary">{primary}</div>
-      <div
-        aria-orientation="vertical"
-        aria-valuemax={maxPrimarySizePercent}
-        aria-valuemin={minPrimarySizePercent}
-        aria-valuenow={Math.round(primarySizePercent)}
-        className="ui-workbench-split-view__separator"
-        role="separator"
-        tabIndex={0}
-        onKeyDown={onSeparatorKeyDown}
-        onPointerDown={onPointerDown}
-        onPointerMove={onPointerMove}
-        onPointerUp={onPointerUp}
-      >
-        <div className="ui-workbench-split-view__handle" />
-      </div>
-      <div className="ui-workbench-split-view__secondary">{secondary}</div>
-    </div>
-  );
-}

package/src/workbench/WorkbenchShell.tsx

@@ -1,74 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react';
-import { ActivityBar, type ActivityBarProps, type ActivityBarItem } from './ActivityBar';
-import { SplitView } from './SplitView';
-import { StatusBar, type StatusBarItemModel, type StatusBarSectionModel } from './StatusBar';
-import { DEFAULT_PRIMARY_SIDEBAR_SIZE_PERCENT } from './shellState';
-
-export interface WorkbenchShellProps {
-  activityBar: Omit<ActivityBarProps, 'items'> & {
-    items: ActivityBarItem[];
-  };
-  compactStatus?: boolean;
-  onStatusItemActivate?: (item: StatusBarItemModel) => void;
-  primarySidebar?: {
-    isVisible: boolean;
-    node: ReactNode;
-    onSizePercentChange?: (sizePercent: number) => void;
-    primarySizePercent?: number;
-    minPrimarySizePercent?: number;
-    maxPrimarySizePercent?: number;
-    className?: string;
-    style?: CSSProperties;
-  };
-  rootClassName?: string;
-  rootStyle?: CSSProperties;
-  secondaryArea: ReactNode;
-  statusSections: StatusBarSectionModel[];
-  titleBar?: ReactNode;
-  overlays?: ReactNode;
-  theme?: string;
-}
-
-export function WorkbenchShell({
-  activityBar,
-  compactStatus = true,
-  onStatusItemActivate,
-  overlays,
-  primarySidebar,
-  rootClassName,
-  rootStyle,
-  secondaryArea,
-  statusSections,
-  titleBar,
-  theme,
-}: WorkbenchShellProps) {
-  const body = primarySidebar?.isVisible ? (
-    <SplitView
-      className={primarySidebar?.className}
-      minPrimarySizePercent={primarySidebar?.minPrimarySizePercent}
-      maxPrimarySizePercent={primarySidebar?.maxPrimarySizePercent}
-      onPrimarySizePercentChange={primarySidebar?.onSizePercentChange}
-      primary={primarySidebar.node}
-      primarySizePercent={primarySidebar.primarySizePercent ?? DEFAULT_PRIMARY_SIDEBAR_SIZE_PERCENT}
-      secondary={secondaryArea}
-    />
-  ) : (
-    secondaryArea
-  );
-
-  return (
-    <div className={rootClassName} data-theme={theme} style={rootStyle}>
-      {titleBar ? <header className="ui-workbench-titlebar">{titleBar}</header> : null}
-      <div className="ide-body">
-        <ActivityBar {...activityBar} />
-        {body}
-      </div>
-      <StatusBar
-        compact={compactStatus}
-        sections={statusSections}
-        onItemActivate={onStatusItemActivate}
-      />
-      {overlays}
-    </div>
-  );
-}

package/src/workbench/WorkbenchStandaloneShell.tsx

@@ -1,318 +0,0 @@
-import { useMemo } from 'react';
-import type { CSSProperties, MouseEvent, ReactNode } from 'react';
-import { cxCodicon } from '../utils/codicon';
-import type { StatusBarItemModel, StatusBarSectionModel } from './StatusBar';
-import type { WorkbenchShellProps } from './WorkbenchShell';
-import { WorkbenchShell } from './WorkbenchShell';
-import type { WorkbenchShellCommandContext } from './commands';
-import { DEFAULT_PRIMARY_SIDEBAR_SIZE_PERCENT, useWorkbenchShellState } from './shellState';
-import type {
-  WorkbenchActivityChangeEvent,
-  WorkbenchActivityDescriptor,
-  WorkbenchStandaloneBootstrap,
-  WorkbenchStandaloneBootstrapEvent,
-  WorkbenchTheme,
-} from './standalone';
-import { WorkspaceDraftsProvider } from './workspace/WorkspaceDraftsContext';
-
-const DEFAULT_THEME: WorkbenchTheme = 'dark';
-const DEFAULT_ACTIVITY_ID = 'explorer';
-
-/**
- * Stable host context passed to `WorkbenchStandaloneShell` render and event callbacks.
- * See `docs/workbench/standalone-host.md` for the public contract.
- */
-export interface WorkbenchStandaloneShellContext<
-  TActivityId extends string = string,
-  TTheme extends WorkbenchTheme = WorkbenchTheme,
-> {
-  activityId: TActivityId;
-  commandContext: WorkbenchShellCommandContext<TActivityId>;
-  isPrimarySidebarVisible: boolean;
-  isSettingsOpen: boolean;
-  primarySidebarSizePercent: number;
-  theme: TTheme;
-  showActivity: (activityId: TActivityId) => void;
-  activateActivity: (activityId: TActivityId) => void;
-  setTheme: (theme: TTheme) => void;
-  setPrimarySidebarSizePercent: (sizePercent: number) => void;
-  setPrimarySidebarVisible: (isVisible: boolean) => void;
-  togglePrimarySidebar: () => void;
-  openSettings: () => void;
-  closeSettings: () => void;
-  setSettingsCategoryId: (settingsCategoryId: string) => void;
-  setSettingsScopeId: (settingsScopeId: string) => void;
-  setSettingsSearchValue: (settingsSearchValue: string) => void;
-}
-
-/**
- * Props for the standalone workbench chrome host. Supply `bootstrap` plus render
- * callbacks; the shell manages activity, theme, sidebar, and settings visibility.
- */
-export interface WorkbenchStandaloneShellProps<
-  TActivityId extends string = string,
-  TTheme extends WorkbenchTheme = WorkbenchTheme,
-> {
-  bootstrap: WorkbenchStandaloneBootstrap<TActivityId>;
-  activityBar?: Omit<
-    WorkbenchShellProps['activityBar'],
-    'items' | 'secondaryItems' | 'onContextMenu' | 'onItemActivate'
-  >;
-  compactStatus?: boolean;
-  includeSettings?: boolean;
-  maxPrimarySidebarSizePercent?: number;
-  minPrimarySidebarSizePercent?: number;
-  onActivityActivate?: (
-    event: WorkbenchActivityChangeEvent<TActivityId>,
-    context: WorkbenchStandaloneShellContext<TActivityId, TTheme>,
-  ) => void;
-  onActivityBarContextMenu?: (
-    event: MouseEvent<HTMLElement>,
-    context: WorkbenchStandaloneShellContext<TActivityId, TTheme>,
-  ) => void;
-  onActivityBarItemActivate?: (
-    itemId: TActivityId | string,
-    context: WorkbenchStandaloneShellContext<TActivityId, TTheme>,
-  ) => void;
-  onStatusItemActivate?: (
-    item: StatusBarItemModel,
-    context: WorkbenchStandaloneShellContext<TActivityId, TTheme>,
-  ) => void;
-  onEvent?: (event: WorkbenchStandaloneBootstrapEvent<TActivityId>) => void;
-  renderPrimarySidebar: (
-    context: WorkbenchStandaloneShellContext<TActivityId, TTheme>,
-  ) => ReactNode;
-  renderOverlays?: (context: WorkbenchStandaloneShellContext<TActivityId, TTheme>) => ReactNode;
-  renderSecondaryArea: (context: WorkbenchStandaloneShellContext<TActivityId, TTheme>) => ReactNode;
-  rootClassName?: string;
-  rootStyle?: CSSProperties;
-  settingsItemIcon?: ReactNode;
-  settingsItemId?: string;
-  settingsItemLabel?: string;
-  primarySidebarClassName?: string;
-  primarySidebarStyle?: CSSProperties;
-  getStatusSections?: (
-    context: WorkbenchStandaloneShellContext<TActivityId, TTheme>,
-  ) => StatusBarSectionModel[];
-}
-
-function toWorkbenchActivityItems<TActivityId extends string>(
-  activities: WorkbenchActivityDescriptor<TActivityId>[],
-): Array<{ icon: ReactNode; id: TActivityId; label: string }> {
-  return activities.map((activity) => ({
-    id: activity.id,
-    label: activity.label,
-    icon: activity.iconNode ?? (activity.icon ? <i className={cxCodicon(activity.icon)} /> : null),
-  }));
-}
-
-export function WorkbenchStandaloneShell<
-  TActivityId extends string = string,
-  TTheme extends WorkbenchTheme = WorkbenchTheme,
->({
-  bootstrap,
-  activityBar,
-  compactStatus = true,
-  includeSettings = true,
-  maxPrimarySidebarSizePercent,
-  minPrimarySidebarSizePercent,
-  onActivityActivate,
-  onActivityBarContextMenu,
-  onActivityBarItemActivate,
-  onStatusItemActivate,
-  onEvent,
-  renderPrimarySidebar,
-  renderOverlays,
-  renderSecondaryArea,
-  rootClassName,
-  rootStyle,
-  settingsItemIcon,
-  settingsItemId = 'settings',
-  settingsItemLabel = 'Settings',
-  primarySidebarClassName,
-  primarySidebarStyle,
-  getStatusSections,
-}: WorkbenchStandaloneShellProps<TActivityId, TTheme>) {
-  const { contract, initialState } = bootstrap;
-  const activityIds = useMemo(
-    () => new Set(contract.activities.map((activity) => activity.id)),
-    [contract.activities],
-  );
-
-  const shell = useWorkbenchShellState<TActivityId, TTheme>({
-    activeActivityId:
-      initialState?.activeActivityId ??
-      contract.activities[0]?.id ??
-      (DEFAULT_ACTIVITY_ID as TActivityId),
-    isPrimarySidebarVisible: initialState?.isPrimarySidebarVisible ?? true,
-    isSettingsOpen: initialState?.isSettingsOpen ?? false,
-    primarySidebarSizePercent:
-      initialState?.primarySidebarSizePercent ?? DEFAULT_PRIMARY_SIDEBAR_SIZE_PERCENT,
-    settingsCategoryId: initialState?.settingsCategoryId ?? '',
-    settingsScopeId: initialState?.settingsScopeId ?? '',
-    settingsSearchValue: initialState?.settingsSearchValue ?? '',
-    theme: (initialState?.theme ?? contract.initialTheme ?? DEFAULT_THEME) as TTheme,
-  });
-  const {
-    isPrimarySidebarVisible,
-    isSettingsOpen,
-    primarySidebarSizePercent,
-    theme,
-    activeActivityId,
-  } = shell.state;
-
-  const emitEvent = (event: WorkbenchStandaloneBootstrapEvent<TActivityId>) => {
-    onEvent?.(event);
-  };
-  const showActivity = (activityId: TActivityId) => {
-    shell.showActivity(activityId);
-    emitEvent({ type: 'activity-change', payload: { nextActivityId: activityId } });
-    onActivityActivate?.(
-      { nextActivityId: activityId },
-      createContext({
-        activityId,
-        shell,
-      }),
-    );
-  };
-  const activateActivity = (activityId: TActivityId) => {
-    shell.activateActivity(activityId);
-    emitEvent({ type: 'activity-change', payload: { nextActivityId: activityId } });
-    onActivityActivate?.(
-      { nextActivityId: activityId },
-      createContext({
-        activityId,
-        shell,
-      }),
-    );
-  };
-  const createContext = ({
-    activityId,
-    shell,
-  }: {
-    activityId: TActivityId;
-    shell: ReturnType<typeof useWorkbenchShellState<TActivityId, TTheme>>;
-  }): WorkbenchStandaloneShellContext<TActivityId, TTheme> => ({
-    activityId,
-    commandContext: {
-      isPrimarySidebarVisible,
-      openSettings: shell.openSettings,
-      showActivity: shell.showActivity,
-      togglePrimarySidebar: shell.togglePrimarySidebar,
-    },
-    isPrimarySidebarVisible,
-    isSettingsOpen,
-    primarySidebarSizePercent,
-    theme,
-    showActivity,
-    activateActivity,
-    setTheme: shell.setTheme,
-    setPrimarySidebarSizePercent: shell.setPrimarySidebarSizePercent,
-    setPrimarySidebarVisible: shell.setPrimarySidebarVisible,
-    togglePrimarySidebar: shell.togglePrimarySidebar,
-    openSettings: shell.openSettings,
-    closeSettings: shell.closeSettings,
-    setSettingsCategoryId: shell.setSettingsCategoryId,
-    setSettingsScopeId: shell.setSettingsScopeId,
-    setSettingsSearchValue: shell.setSettingsSearchValue,
-  });
-
-  const context = useMemo(
-    () => createContext({ activityId: activeActivityId, shell }),
-    [
-      shell,
-      activeActivityId,
-      isPrimarySidebarVisible,
-      isSettingsOpen,
-      primarySidebarSizePercent,
-      theme,
-    ],
-  );
-
-  const statusSections = useMemo(
-    () =>
-      getStatusSections?.(context) ??
-      contract.statusSections.map((section) => ({
-        ...section,
-        items: section.items.map((item) => ({ ...item })),
-      })),
-    [contract.statusSections, context, getStatusSections],
-  );
-
-  const activityItems = useMemo(
-    () => toWorkbenchActivityItems(contract.activities),
-    [contract.activities],
-  );
-  const activityBarItems = useMemo(
-    () =>
-      activityItems.map((item) => ({
-        ...item,
-        active: item.id === activeActivityId,
-      })),
-    [activityItems, activeActivityId],
-  );
-
-  const hasSettingsSection = includeSettings && settingsItemId !== '';
-
-  const primarySidebarNode = renderPrimarySidebar(context);
-  const secondaryArea = renderSecondaryArea(context);
-  const overlays = renderOverlays?.(context);
-
-  return (
-    <WorkspaceDraftsProvider>
-      <WorkbenchShell
-        activityBar={{
-          ...activityBar,
-          items: activityBarItems,
-          secondaryItems: hasSettingsSection
-            ? [
-                {
-                  id: settingsItemId,
-                  icon: settingsItemIcon ?? <i className="codicon codicon-settings-gear" />,
-                  label: settingsItemLabel,
-                  active: isSettingsOpen,
-                },
-              ]
-            : [],
-          onContextMenu: (event) => onActivityBarContextMenu?.(event, context),
-          onItemActivate: (item) => {
-            if (item.id === settingsItemId) {
-              shell.openSettings();
-              emitEvent({
-                type: 'status-message',
-                message: `Settings ${isSettingsOpen ? 'opened' : 'closed'}`,
-              });
-              return;
-            }
-
-            if (activityIds.has(item.id as TActivityId)) {
-              activateActivity(item.id as TActivityId);
-              onActivityBarItemActivate?.(item.id, context);
-              return;
-            }
-
-            onActivityBarItemActivate?.(item.id, context);
-          },
-        }}
-        compactStatus={compactStatus}
-        onStatusItemActivate={(item) => onStatusItemActivate?.(item, context)}
-        primarySidebar={{
-          className: primarySidebarClassName,
-          isVisible: isPrimarySidebarVisible,
-          maxPrimarySizePercent: maxPrimarySidebarSizePercent,
-          minPrimarySizePercent: minPrimarySidebarSizePercent,
-          onSizePercentChange: shell.setPrimarySidebarSizePercent,
-          primarySizePercent: primarySidebarSizePercent,
-          node: primarySidebarNode,
-          style: primarySidebarStyle,
-        }}
-        rootClassName={rootClassName}
-        rootStyle={rootStyle}
-        secondaryArea={secondaryArea}
-        statusSections={statusSections}
-        theme={theme}
-        overlays={overlays}
-      />
-    </WorkspaceDraftsProvider>
-  );
-}

package/src/workbench/shell.ts

@@ -1,15 +0,0 @@
-export { ActivityBar } from './ActivityBar';
-export type { ActivityBarItem, ActivityBarProps } from './ActivityBar';
-export { SplitView } from './SplitView';
-export type { SplitViewProps } from './SplitView';
-export { StatusBar, StatusBarItem, StatusBarSection } from './StatusBar';
-export type {
-  StatusBarItemModel,
-  StatusBarItemProps,
-  StatusBarProps,
-  StatusBarSectionAlign,
-  StatusBarSectionModel,
-  StatusBarSectionProps,
-} from './StatusBar';
-export { WorkbenchShell } from './WorkbenchShell';
-export type { WorkbenchShellProps } from './WorkbenchShell';