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

package/src/workbench/management/IntegrationSettingsSurface.tsx

@@ -0,0 +1,290 @@
+import type { ReactNode } from 'react';
+import {
+  Button,
+  WorkbenchPropertyCard,
+  WorkbenchPropertyGrid,
+  WorkbenchPropertyHint,
+  WorkbenchPropertySection,
+  WorkbenchPropertyStack,
+} from '../../primitives/index';
+
+type IntegrationSettingsDensity = 'compact' | 'default';
+type IntegrationSettingsInset = 'default' | 'flush';
+type IntegrationBodyTextSize = 'compact' | 'default';
+
+interface IntegrationPathEditorRow {
+  actions?: ReactNode;
+  description?: ReactNode;
+  editor: ReactNode;
+  id: string;
+  label: ReactNode;
+}
+
+interface IntegrationAccountEditorField {
+  field: ReactNode;
+  id: string;
+  label: ReactNode;
+}
+
+export interface IntegrationSettingsSectionProps {
+  actions?: ReactNode;
+  children: ReactNode;
+  density?: IntegrationSettingsDensity;
+  description?: string;
+  inset?: IntegrationSettingsInset;
+  title?: string;
+}
+
+export interface IntegrationAddListActionProps {
+  children: ReactNode;
+  onClick: () => void;
+}
+
+export interface IntegrationSinglePathEditorProps {
+  actions?: ReactNode;
+  description?: ReactNode;
+  field: ReactNode;
+  fieldDescription?: ReactNode;
+  label: ReactNode;
+  title?: ReactNode;
+}
+
+export interface IntegrationPathListEditorProps {
+  addAction?: ReactNode;
+  description?: ReactNode;
+  emptyState?: ReactNode;
+  rows: ReadonlyArray<IntegrationPathEditorRow>;
+  title?: ReactNode;
+}
+
+export interface IntegrationListEditorEmptyStateProps {
+  action?: ReactNode;
+  description: ReactNode;
+}
+
+export interface IntegrationAccountRowEditorProps {
+  actions?: ReactNode;
+  description?: ReactNode;
+  fields: ReadonlyArray<IntegrationAccountEditorField>;
+  footer?: ReactNode;
+  title?: ReactNode;
+}
+
+export interface IntegrationBodyTextProps {
+  children: ReactNode;
+  size?: IntegrationBodyTextSize;
+}
+
+export function IntegrationSettingsSection({
+  actions,
+  children,
+  density = 'default',
+  description,
+  inset = 'default',
+  title,
+}: IntegrationSettingsSectionProps) {
+  return (
+    <WorkbenchPropertySection
+      className={inset === 'flush' ? 'rounded-none' : undefined}
+      data-density={density}
+      data-inset={inset}
+      {...(actions === undefined ? {} : { actions })}
+      {...(title === undefined ? {} : { title })}
+    >
+      {description === undefined ? null : (
+        <WorkbenchPropertyHint className="block">{description}</WorkbenchPropertyHint>
+      )}
+      <WorkbenchPropertyStack gap={density === 'compact' ? 'sm' : 'md'}>
+        {children}
+      </WorkbenchPropertyStack>
+    </WorkbenchPropertySection>
+  );
+}
+
+export function IntegrationAddListAction({ children, onClick }: IntegrationAddListActionProps) {
+  return (
+    <Button compact icon="add" onClick={onClick} variant="default">
+      {children}
+    </Button>
+  );
+}
+
+export function IntegrationSinglePathEditor({
+  actions,
+  description,
+  field,
+  fieldDescription,
+  label,
+  title,
+}: IntegrationSinglePathEditorProps) {
+  return (
+    <IntegrationEditorRow
+      actions={actions}
+      description={description}
+      editor={
+        <WorkbenchPropertyStack gap="xs">
+          {field}
+          <IntegrationEditorDescription>{fieldDescription}</IntegrationEditorDescription>
+        </WorkbenchPropertyStack>
+      }
+      label={label}
+      title={title}
+    />
+  );
+}
+
+export function IntegrationPathListEditor({
+  addAction,
+  description,
+  emptyState,
+  rows,
+  title,
+}: IntegrationPathListEditorProps) {
+  return (
+    <WorkbenchPropertyStack gap="sm">
+      <IntegrationListHeader actions={addAction} description={description} title={title} />
+      {rows.length === 0 ? (
+        emptyState
+      ) : (
+        <WorkbenchPropertyStack gap="xs">
+          {rows.map((row) => (
+            <IntegrationEditorRow
+              key={row.id}
+              actions={row.actions}
+              description={row.description}
+              editor={row.editor}
+              label={row.label}
+            />
+          ))}
+        </WorkbenchPropertyStack>
+      )}
+    </WorkbenchPropertyStack>
+  );
+}
+
+export function IntegrationListEditorEmptyState({
+  action,
+  description,
+}: IntegrationListEditorEmptyStateProps) {
+  return (
+    <WorkbenchPropertyCard className="border-dashed" data-empty="true">
+      <IntegrationBodyText size="compact">{description}</IntegrationBodyText>
+      {hasRenderableNode(action) ? <div className="mt-2">{action}</div> : null}
+    </WorkbenchPropertyCard>
+  );
+}
+
+export function IntegrationAccountRowEditor({
+  actions,
+  description,
+  fields,
+  footer,
+  title,
+}: IntegrationAccountRowEditorProps) {
+  return (
+    <IntegrationEditorRow
+      actions={actions}
+      description={description}
+      editor={
+        <>
+          <WorkbenchPropertyGrid columns={2} gap="md">
+            {fields.map((field) => (
+              <div className="min-w-0" key={field.id}>
+                <div className="text-xs font-semibold">{field.label}</div>
+                {field.field}
+              </div>
+            ))}
+          </WorkbenchPropertyGrid>
+          {hasRenderableNode(footer) ? <div className="mt-2">{footer}</div> : null}
+        </>
+      }
+      label={title}
+    />
+  );
+}
+
+export function IntegrationBodyText({ children, size = 'default' }: IntegrationBodyTextProps) {
+  return (
+    <WorkbenchPropertyHint
+      className={joinClasses('block', size === 'compact' ? 'text-xs' : undefined)}
+      data-size={size}
+    >
+      {children}
+    </WorkbenchPropertyHint>
+  );
+}
+
+function IntegrationListHeader({
+  actions,
+  description,
+  title,
+}: {
+  actions?: ReactNode;
+  description?: ReactNode;
+  title?: ReactNode;
+}) {
+  if (!hasRenderableNode(actions) && !hasRenderableNode(description) && !hasRenderableNode(title)) {
+    return null;
+  }
+
+  return (
+    <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
+      <div className="min-w-0">
+        {hasRenderableNode(title) ? <div className="text-xs font-semibold">{title}</div> : null}
+        <IntegrationEditorDescription>{description}</IntegrationEditorDescription>
+      </div>
+      {hasRenderableNode(actions) ? (
+        <div className="flex min-w-0 justify-end">{actions}</div>
+      ) : null}
+    </div>
+  );
+}
+
+function IntegrationEditorRow({
+  actions,
+  description,
+  editor,
+  label,
+  title,
+}: {
+  actions?: ReactNode;
+  description?: ReactNode;
+  editor: ReactNode;
+  label?: ReactNode;
+  title?: ReactNode;
+}) {
+  const resolvedTitle = hasRenderableNode(title) ? title : label;
+
+  return (
+    <WorkbenchPropertyCard className="grid gap-2">
+      {hasRenderableNode(resolvedTitle) || hasRenderableNode(actions) ? (
+        <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
+          {hasRenderableNode(resolvedTitle) ? (
+            <div className="text-xs font-semibold">{resolvedTitle}</div>
+          ) : null}
+          {hasRenderableNode(actions) ? (
+            <div className="flex min-w-0 justify-end">{actions}</div>
+          ) : null}
+        </div>
+      ) : null}
+      <IntegrationEditorDescription>{description}</IntegrationEditorDescription>
+      <div className="min-w-0">{editor}</div>
+    </WorkbenchPropertyCard>
+  );
+}
+
+function IntegrationEditorDescription({ children }: { children?: ReactNode }) {
+  if (!hasRenderableNode(children)) {
+    return null;
+  }
+
+  return <WorkbenchPropertyHint className="block">{children}</WorkbenchPropertyHint>;
+}
+
+function hasRenderableNode(node: ReactNode | undefined): boolean {
+  return node !== undefined && node !== null && node !== false;
+}
+
+function joinClasses(...classes: Array<string | undefined>): string {
+  return classes.filter(Boolean).join(' ');
+}

package/src/workbench/management/IntegrationsShell.tsx

@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react';
+import { PanelHeader } from '../../layout/panel';
+import { WorkbenchEditorFrame, WorkbenchPanelScroll } from '../../layout/WorkbenchLayoutBase';
+import { WorkbenchPropertyHint } from '../../layout/WorkbenchPropertyPanel';
+import { SplitView } from '../SplitView';
+
+export interface IntegrationsShellProps {
+  children: ReactNode;
+  detailDataAttributes?: Record<string, string> | undefined;
+  primaryDataAttributes?: Record<string, string> | undefined;
+  rootDataAttributes?: Record<string, string> | undefined;
+  sidebar: ReactNode;
+  sourceDescription: string;
+  sourceTitle: string;
+  sourceTitleTooltip?: string | undefined;
+}
+
+export function IntegrationsShell({
+  children,
+  detailDataAttributes,
+  primaryDataAttributes,
+  rootDataAttributes,
+  sidebar,
+  sourceDescription,
+  sourceTitle,
+  sourceTitleTooltip,
+}: IntegrationsShellProps) {
+  return (
+    <WorkbenchEditorFrame className="workbench-integrations-shell" {...(rootDataAttributes ?? {})}>
+      <SplitView
+        defaultPrimarySizePercent={28}
+        maxPrimarySizePercent={40}
+        minPrimarySizePercent={20}
+        primary={
+          <div className="workbench-primary-sidebar" {...(primaryDataAttributes ?? {})}>
+            {sidebar}
+          </div>
+        }
+        secondary={
+          <section className="workbench-editor-area" {...(detailDataAttributes ?? {})}>
+            <PanelHeader>
+              <span className="block min-w-0 truncate" title={sourceTitleTooltip}>
+                {sourceTitle}
+              </span>
+              <WorkbenchPropertyHint>{sourceDescription}</WorkbenchPropertyHint>
+            </PanelHeader>
+            <WorkbenchPanelScroll>{children}</WorkbenchPanelScroll>
+          </section>
+        }
+      />
+    </WorkbenchEditorFrame>
+  );
+}

package/src/workbench/management/KeybindingCaptureField.tsx

@@ -0,0 +1,142 @@
+import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';
+import { formatKeybindingLabel } from '@workbench-kit/platform';
+import { Button } from '../../primitives/button';
+import { cx } from '../../utils/cx';
+
+export interface KeybindingCaptureFieldProps {
+  ariaLabel?: string | undefined;
+  className?: string | undefined;
+  disabled?: boolean | undefined;
+  onCancel?: (() => void) | undefined;
+  onChange: (key: string | undefined) => void;
+  placeholder?: string | undefined;
+  value?: string | undefined;
+}
+
+export function KeybindingCaptureField({
+  ariaLabel = 'Keyboard shortcut',
+  className,
+  disabled = false,
+  onCancel,
+  onChange,
+  placeholder = 'Press keys to record',
+  value,
+}: KeybindingCaptureFieldProps) {
+  const fieldId = useId();
+  const [recording, setRecording] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!recording) {
+      return undefined;
+    }
+
+    const handleKeyDown = (event: globalThis.KeyboardEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (event.key === 'Escape') {
+        setRecording(false);
+        onCancel?.();
+        return;
+      }
+
+      if (event.key === 'Backspace' || event.key === 'Delete') {
+        onChange(undefined);
+        setRecording(false);
+        return;
+      }
+
+      if (event.key === 'Tab' || event.key === 'Shift') {
+        return;
+      }
+
+      onChange(normalizeKeybindingKeyFromEvent(event));
+      setRecording(false);
+    };
+
+    window.addEventListener('keydown', handleKeyDown, true);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown, true);
+    };
+  }, [onCancel, onChange, recording]);
+
+  const displayValue = value ? formatKeybindingLabel(value) : undefined;
+
+  return (
+    <div className={cx('workbench-keybinding-capture', className)}>
+      <Button
+        ref={buttonRef}
+        aria-label={ariaLabel}
+        className={cx(
+          'workbench-keybinding-capture__trigger',
+          recording && 'workbench-keybinding-capture__trigger--recording',
+        )}
+        disabled={disabled}
+        id={fieldId}
+        type="button"
+        onClick={() => {
+          if (disabled) {
+            return;
+          }
+          setRecording(true);
+          buttonRef.current?.focus();
+        }}
+        onKeyDown={(event: KeyboardEvent<HTMLButtonElement>) => {
+          if (disabled) {
+            return;
+          }
+
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            setRecording(true);
+          }
+        }}
+      >
+        {recording ? 'Press shortcut…' : (displayValue ?? placeholder)}
+      </Button>
+      {value ? (
+        <Button
+          aria-label="Clear keyboard shortcut"
+          compact
+          disabled={disabled}
+          type="button"
+          onClick={() => {
+            onChange(undefined);
+            setRecording(false);
+          }}
+        >
+          Clear
+        </Button>
+      ) : null}
+    </div>
+  );
+}
+
+function normalizeKeybindingKeyFromEvent(
+  event: Pick<KeyboardEvent, 'altKey' | 'ctrlKey' | 'key' | 'metaKey' | 'shiftKey'>,
+): string {
+  const parts: string[] = [];
+
+  if (event.ctrlKey || event.metaKey) {
+    parts.push('ctrl');
+  }
+  if (event.altKey) {
+    parts.push('alt');
+  }
+  if (event.shiftKey) {
+    parts.push('shift');
+  }
+
+  parts.push(normalizeKeyToken(event.key));
+  return parts.join('+');
+}
+
+function normalizeKeyToken(token: string): string {
+  const key = token.trim().toLowerCase();
+  if (key === 'del') return 'delete';
+  if (key === 'esc') return 'escape';
+  if (key === 'return') return 'enter';
+  if (key === 'spacebar' || key === 'space') return 'space';
+  return key.length === 1 ? key : key;
+}

package/src/workbench/management/KeybindingManagementPanel.tsx

@@ -0,0 +1,120 @@
+import { useMemo } from 'react';
+import type { KeybindingManagementEntry } from '@workbench-kit/platform';
+import { filterKeybindingManagementEntries } from '@workbench-kit/platform';
+import { Badge } from '../../primitives/badge';
+import { Button } from '../../primitives/button';
+import { KeybindingCaptureField } from './KeybindingCaptureField.js';
+import {
+  ManagementPanelEmptyState,
+  ManagementPanelFrame,
+  ManagementPanelToolbar,
+  useManagementPanelQuery,
+} from './ManagementPanelFrame.js';
+
+export interface KeybindingManagementPanelProps {
+  className?: string | undefined;
+  emptyLabel?: string | undefined;
+  entries: readonly KeybindingManagementEntry[];
+  onResetKeybinding?: ((commandId: string) => void) | undefined;
+  onSetKeybinding?: ((commandId: string, key: string | undefined) => void) | undefined;
+  query?: string | undefined;
+  summaryLabel?: string | undefined;
+}
+
+export function KeybindingManagementPanel({
+  className,
+  emptyLabel = 'No commands match the current filter.',
+  entries,
+  onResetKeybinding,
+  onSetKeybinding,
+  query: controlledQuery,
+  summaryLabel,
+}: KeybindingManagementPanelProps) {
+  const { query, updateQuery } = useManagementPanelQuery(controlledQuery);
+  const filteredEntries = useMemo(
+    () => filterKeybindingManagementEntries(entries, query),
+    [entries, query],
+  );
+
+  return (
+    <ManagementPanelFrame
+      className={className}
+      description="Assign keyboard shortcuts to registered commands. User overrides replace the default binding for that command and persist in this host."
+      id="workbench-keybinding-management"
+      title="Keyboard Shortcuts"
+    >
+      <ManagementPanelToolbar
+        filterLabel="Filter keyboard shortcuts"
+        filterPlaceholder="Filter by command, id, category, or shortcut"
+        query={query}
+        summary={
+          summaryLabel ??
+          `${filteredEntries.length} of ${entries.length} command${entries.length === 1 ? '' : 's'} visible`
+        }
+        onQueryChange={updateQuery}
+      />
+
+      {filteredEntries.length === 0 ? (
+        <ManagementPanelEmptyState>{emptyLabel}</ManagementPanelEmptyState>
+      ) : (
+        <ul className="workbench-management-list">
+          {filteredEntries.map((entry) => (
+            <KeybindingManagementRow
+              key={entry.commandId}
+              entry={entry}
+              onResetKeybinding={onResetKeybinding}
+              onSetKeybinding={onSetKeybinding}
+            />
+          ))}
+        </ul>
+      )}
+    </ManagementPanelFrame>
+  );
+}
+
+function KeybindingManagementRow({
+  entry,
+  onResetKeybinding,
+  onSetKeybinding,
+}: {
+  entry: KeybindingManagementEntry;
+  onResetKeybinding?: ((commandId: string) => void) | undefined;
+  onSetKeybinding?: ((commandId: string, key: string | undefined) => void) | undefined;
+}) {
+  const hasOverride = Boolean(entry.userKey);
+  const canReset = hasOverride && onResetKeybinding;
+
+  return (
+    <li className="workbench-management-list-item workbench-management-list-item--responsive">
+      <div className="workbench-management-list-item__main">
+        <span className="workbench-management-list-item__label">{entry.commandLabel}</span>
+        <code className="workbench-management-list-item__id">{entry.commandId}</code>
+        <div className="workbench-management-list-item__meta">
+          {entry.category ? <Badge variant="muted">{entry.category}</Badge> : null}
+          {entry.sourceLabel ? <Badge variant="muted">{entry.sourceLabel}</Badge> : null}
+          {entry.defaultKeyLabel && hasOverride ? (
+            <Badge variant="muted">Default: {entry.defaultKeyLabel}</Badge>
+          ) : null}
+          {entry.conflictCommandId ? (
+            <Badge variant="danger">Conflicts with {entry.conflictCommandId}</Badge>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="workbench-management-list-item__actions">
+        <KeybindingCaptureField
+          ariaLabel={`Keyboard shortcut for ${entry.commandLabel}`}
+          value={entry.userKey ?? entry.defaultKey}
+          onChange={(key) => {
+            onSetKeybinding?.(entry.commandId, key);
+          }}
+        />
+        {canReset ? (
+          <Button compact type="button" onClick={() => onResetKeybinding(entry.commandId)}>
+            Reset
+          </Button>
+        ) : null}
+      </div>
+    </li>
+  );
+}