@workbench-kit/react 0.0.1-prototype.0

package/src/utils/cx.ts

@@ -0,0 +1,3 @@
+export function cx(...classNames: Array<false | null | string | undefined>): string {
+  return classNames.filter(Boolean).join(' ');
+}

package/src/workbench/ActivityBar.tsx

@@ -0,0 +1,52 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export interface ActivityBarItem {
+  active?: boolean;
+  disabled?: boolean;
+  icon: ReactNode;
+  id: string;
+  label: string;
+  title?: string;
+}
+
+export interface ActivityBarProps extends Omit<ComponentPropsWithoutRef<'nav'>, 'children'> {
+  items: ActivityBarItem[];
+  onItemActivate?: (item: ActivityBarItem) => void;
+  secondaryItems?: ActivityBarItem[];
+}
+
+export function ActivityBar({
+  'aria-label': ariaLabel = 'Activity bar',
+  className,
+  items,
+  onItemActivate,
+  secondaryItems = [],
+  ...props
+}: ActivityBarProps) {
+  const renderItem = (item: ActivityBarItem) => (
+    <button
+      key={item.id}
+      type="button"
+      aria-label={item.label}
+      aria-pressed={item.active}
+      className={cx(
+        'ui-workbench-activity-bar__item',
+        item.active && 'ui-workbench-activity-bar__item--active',
+      )}
+      disabled={item.disabled}
+      title={item.title ?? item.label}
+      onClick={() => onItemActivate?.(item)}
+    >
+      <span className="ui-workbench-activity-bar__icon">{item.icon}</span>
+    </button>
+  );
+
+  return (
+    <nav aria-label={ariaLabel} className={cx('ui-workbench-activity-bar', className)} {...props}>
+      {items.map(renderItem)}
+      {secondaryItems.length ? <span className="ui-workbench-activity-bar__spacer" /> : null}
+      {secondaryItems.map(renderItem)}
+    </nav>
+  );
+}

package/src/workbench/SplitView.tsx

@@ -0,0 +1,136 @@
+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/StatusBar.tsx

@@ -0,0 +1,123 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export type StatusBarSectionAlign = 'end' | 'start';
+
+export interface StatusBarItemModel {
+  active?: boolean;
+  ariaLabel?: string;
+  disabled?: boolean;
+  hidden?: boolean;
+  icon?: ReactNode;
+  id: string;
+  label: ReactNode;
+  title?: string;
+}
+
+export interface StatusBarSectionModel {
+  align?: StatusBarSectionAlign;
+  hidden?: boolean;
+  id: string;
+  items: StatusBarItemModel[];
+}
+
+export interface StatusBarProps extends ComponentPropsWithRef<'footer'> {
+  compact?: boolean;
+  onItemActivate?: (item: StatusBarItemModel) => void;
+  sections?: StatusBarSectionModel[];
+}
+
+export function StatusBar({
+  'aria-label': ariaLabel = 'Status bar',
+  children,
+  className,
+  compact,
+  onItemActivate,
+  sections,
+  ...props
+}: StatusBarProps) {
+  const content =
+    children ??
+    sections
+      ?.filter((section) => !section.hidden)
+      .map((section) => (
+        <StatusBarSection key={section.id} align={section.align}>
+          {section.items
+            .filter((item) => !item.hidden)
+            .map((item) => (
+              <StatusBarItem
+                key={item.id}
+                active={item.active}
+                aria-label={item.ariaLabel}
+                disabled={item.disabled}
+                icon={item.icon}
+                title={item.title}
+                onClick={() => onItemActivate?.(item)}
+              >
+                {item.label}
+              </StatusBarItem>
+            ))}
+        </StatusBarSection>
+      ));
+
+  return (
+    <footer
+      aria-label={ariaLabel}
+      className={cx(
+        'ui-workbench-status-bar',
+        compact && 'ui-workbench-status-bar--compact',
+        className,
+      )}
+      {...props}
+    >
+      {content}
+    </footer>
+  );
+}
+
+export interface StatusBarSectionProps extends ComponentPropsWithRef<'div'> {
+  align?: StatusBarSectionAlign;
+}
+
+export function StatusBarSection({ align = 'start', className, ...props }: StatusBarSectionProps) {
+  return (
+    <div
+      className={cx(
+        'ui-workbench-status-bar__section',
+        align === 'end' && 'ui-workbench-status-bar__section--end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export interface StatusBarItemProps extends ComponentPropsWithRef<'button'> {
+  active?: boolean;
+  icon?: ReactNode;
+}
+
+export function StatusBarItem({
+  active,
+  children,
+  className,
+  icon,
+  type = 'button',
+  ...props
+}: StatusBarItemProps) {
+  return (
+    <button
+      type={type}
+      className={cx(
+        'ui-workbench-status-bar__item',
+        active && 'ui-workbench-status-bar__item--active',
+        className,
+      )}
+      data-active={active ? 'true' : undefined}
+      {...props}
+    >
+      {icon ? <span className="ui-workbench-status-bar__icon">{icon}</span> : null}
+      <span className="ui-workbench-status-bar__label">{children}</span>
+    </button>
+  );
+}

package/src/workbench/WorkbenchShell.tsx

@@ -0,0 +1,70 @@
+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';
+
+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[];
+  overlays?: ReactNode;
+  theme?: string;
+}
+
+export function WorkbenchShell({
+  activityBar,
+  compactStatus = true,
+  onStatusItemActivate,
+  overlays,
+  primarySidebar,
+  rootClassName,
+  rootStyle,
+  secondaryArea,
+  statusSections,
+  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}
+      secondary={secondaryArea}
+    />
+  ) : (
+    secondaryArea
+  );
+
+  return (
+    <div className={rootClassName} data-theme={theme} style={rootStyle}>
+      <div className="ide-body">
+        <ActivityBar {...activityBar} />
+        {body}
+      </div>
+      <StatusBar
+        compact={compactStatus}
+        sections={statusSections}
+        onItemActivate={onStatusItemActivate}
+      />
+      {overlays}
+    </div>
+  );
+}

package/src/workbench/WorkbenchStandaloneShell.tsx

@@ -0,0 +1,291 @@
+import { useMemo } from 'react';
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
+import type { StatusBarItemModel, StatusBarSectionModel } from './StatusBar';
+import type { WorkbenchShellProps } from './WorkbenchShell';
+import { WorkbenchShell } from './WorkbenchShell';
+import type { WorkbenchShellCommandContext } from './commands';
+import { useWorkbenchShellState } from './shellState';
+import type {
+  WorkbenchActivityChangeEvent,
+  WorkbenchActivityDescriptor,
+  WorkbenchStandaloneBootstrap,
+  WorkbenchStandaloneBootstrapEvent,
+  WorkbenchTheme,
+} from './standalone';
+
+const DEFAULT_THEME: WorkbenchTheme = 'dark';
+const DEFAULT_ACTIVITY_ID = 'explorer';
+
+export interface WorkbenchStandaloneShellContext<
+  TActivityId extends string = string,
+  TTheme extends WorkbenchTheme = WorkbenchTheme,
+> {
+  activityId: TActivityId;
+  commandContext: WorkbenchShellCommandContext<TActivityId>;
+  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;
+}
+
+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={`codicon ${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 ?? 24,
+    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,
+    },
+    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],
+  );
+
+  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 (
+    <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}
+    />
+  );
+}