@workbench-kit/react 0.0.1-prototype.0 → 0.0.2-prototype.0.1.2

package/src/layout/WorkbenchSidebarActions.tsx

@@ -0,0 +1,274 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { forwardRef, useId, useState } from 'react';
+import { Badge } from '../primitives/Badge';
+import { cxCodicon } from '../utils/codicon';
+import { cx } from '../utils/cx';
+import {
+  getWorkbenchStatusLabel,
+  isWorkbenchStatusBusy,
+  isWorkbenchStatusDisabled,
+  type WorkbenchStatus,
+} from '../workbench/status';
+import {
+  SideBarList,
+  SideBarListItem,
+  type SideBarListItemProps,
+  type SideBarListProps,
+} from './SideBarViewFrame';
+
+export type WorkbenchActionStatus = WorkbenchStatus;
+
+export interface WorkbenchActionItem {
+  danger?: boolean;
+  description?: string;
+  disabledReason?: string;
+  icon?: ReactNode;
+  id: string;
+  label: string;
+  metadata?: Record<string, unknown>;
+  shortcut?: string;
+  status?: WorkbenchActionStatus;
+}
+
+type WorkbenchSidebarHeadingLevel = 2 | 3 | 4 | 5 | 6;
+
+export interface WorkbenchSidebarSectionProps extends Omit<
+  ComponentPropsWithRef<'section'>,
+  'title'
+> {
+  actions?: ReactNode;
+  badge?: ReactNode;
+  children?: ReactNode;
+  collapsible?: boolean;
+  collapsed?: boolean;
+  count?: number;
+  defaultCollapsed?: boolean;
+  headingLevel?: WorkbenchSidebarHeadingLevel;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  title: ReactNode;
+}
+
+export function WorkbenchSidebarSection({
+  actions,
+  badge,
+  children,
+  className,
+  collapsible = true,
+  collapsed,
+  count,
+  defaultCollapsed = false,
+  headingLevel = 3,
+  id,
+  onCollapsedChange,
+  title,
+  ...props
+}: WorkbenchSidebarSectionProps) {
+  const generatedId = useId();
+  const sectionId = id ?? generatedId;
+  const headingId = `${sectionId}-heading`;
+  const contentId = `${sectionId}-content`;
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(defaultCollapsed);
+  const resolvedCollapsed = collapsed ?? uncontrolledCollapsed;
+
+  const handleToggle = () => {
+    if (!collapsible) return;
+
+    const nextCollapsed = !resolvedCollapsed;
+    if (collapsed === undefined) {
+      setUncontrolledCollapsed(nextCollapsed);
+    }
+    onCollapsedChange?.(nextCollapsed);
+  };
+
+  const resolvedBadge =
+    badge ?? (count !== undefined ? <Badge variant="muted">{count}</Badge> : null);
+
+  return (
+    <section
+      id={id}
+      aria-labelledby={headingId}
+      className={cx('ui-workbench-sidebar-section', className)}
+      {...props}
+    >
+      <div className="ui-workbench-sidebar-section__header">
+        {collapsible ? (
+          <button
+            aria-controls={contentId}
+            aria-expanded={!resolvedCollapsed}
+            className="ui-workbench-sidebar-section__toggle"
+            type="button"
+            onClick={handleToggle}
+          >
+            <i
+              aria-hidden="true"
+              className={cxCodicon(
+                resolvedCollapsed ? 'chevron-right' : 'chevron-down',
+                'ui-workbench-sidebar-section__chevron',
+              )}
+            />
+            <span
+              id={headingId}
+              aria-level={headingLevel}
+              className="ui-workbench-sidebar-section__title"
+              role="heading"
+            >
+              {title}
+            </span>
+          </button>
+        ) : (
+          <div className="ui-workbench-sidebar-section__static-title">
+            <span className="ui-workbench-sidebar-section__chevron" />
+            <span
+              id={headingId}
+              aria-level={headingLevel}
+              className="ui-workbench-sidebar-section__title"
+              role="heading"
+            >
+              {title}
+            </span>
+          </div>
+        )}
+        {resolvedBadge || actions ? (
+          <div className="ui-workbench-sidebar-section__meta">
+            {resolvedBadge}
+            {actions}
+          </div>
+        ) : null}
+      </div>
+      <div
+        id={contentId}
+        className="ui-workbench-sidebar-section__content"
+        hidden={resolvedCollapsed}
+      >
+        {children}
+      </div>
+    </section>
+  );
+}
+
+export interface WorkbenchActionListProps extends SideBarListProps {
+  empty?: boolean;
+  emptyLabel?: ReactNode;
+}
+
+export function WorkbenchActionList({
+  children,
+  className,
+  empty,
+  emptyLabel = 'No actions',
+  ...props
+}: WorkbenchActionListProps) {
+  return (
+    <SideBarList className={cx('ui-workbench-action-list', className)} {...props}>
+      {empty ? (
+        <li className="ui-side-bar-list-entry">
+          <div className="ui-workbench-action-list__empty">{emptyLabel}</div>
+        </li>
+      ) : (
+        children
+      )}
+    </SideBarList>
+  );
+}
+
+export interface WorkbenchActionListItemProps extends Omit<
+  SideBarListItemProps,
+  'children' | 'variant'
+> {
+  danger?: boolean;
+  description?: ReactNode;
+  disabledReason?: ReactNode;
+  icon?: ReactNode;
+  label: ReactNode;
+  shortcut?: ReactNode;
+  showStatus?: boolean;
+  status?: WorkbenchActionStatus;
+  statusLabel?: string;
+  unavailable?: boolean;
+}
+
+export const WorkbenchActionListItem = forwardRef<HTMLButtonElement, WorkbenchActionListItemProps>(
+  function WorkbenchActionListItem(
+    {
+      className,
+      danger,
+      description,
+      disabled,
+      disabledReason,
+      icon,
+      label,
+      shortcut,
+      showStatus = true,
+      status = 'idle',
+      statusLabel,
+      title,
+      unavailable,
+      ...props
+    },
+    ref,
+  ) {
+    const generatedId = useId();
+    const resolvedStatus = unavailable ? 'unavailable' : status;
+    const resolvedDisabled = disabled || isWorkbenchStatusDisabled(resolvedStatus);
+    const reasonId = disabledReason ? `${generatedId}-disabled-reason` : undefined;
+    const resolvedStatusLabel = statusLabel ?? getWorkbenchStatusLabel(resolvedStatus);
+    const titleText =
+      title ??
+      (typeof disabledReason === 'string'
+        ? disabledReason
+        : unavailable
+          ? 'Unavailable'
+          : undefined);
+
+    return (
+      <SideBarListItem
+        ref={ref}
+        aria-busy={isWorkbenchStatusBusy(resolvedStatus) ? true : undefined}
+        aria-describedby={reasonId}
+        aria-disabled={resolvedDisabled ? true : undefined}
+        className={cx(
+          'ui-workbench-action-list-item',
+          Boolean(description) && 'ui-workbench-action-list-item--with-description',
+          danger && 'ui-workbench-action-list-item--danger',
+          className,
+        )}
+        data-danger={danger ? 'true' : undefined}
+        data-show-status={showStatus ? 'true' : 'false'}
+        data-status={resolvedStatus}
+        data-unavailable={unavailable ? 'true' : undefined}
+        disabled={resolvedDisabled || isWorkbenchStatusDisabled(resolvedStatus)}
+        title={titleText}
+        {...props}
+      >
+        <span className="ui-workbench-action-list-item__icon" aria-hidden="true">
+          {icon}
+        </span>
+        <span className="ui-workbench-action-list-item__content">
+          <span className="ui-workbench-action-list-item__label">{label}</span>
+          {description ? (
+            <span className="ui-workbench-action-list-item__description">{description}</span>
+          ) : null}
+          {disabledReason ? (
+            <span id={reasonId} className="ui-visually-hidden">
+              {disabledReason}
+            </span>
+          ) : null}
+        </span>
+        <span className="ui-workbench-action-list-item__meta">
+          {shortcut ? (
+            <kbd className="ui-workbench-action-list-item__shortcut">{shortcut}</kbd>
+          ) : null}
+        </span>
+        {showStatus ? (
+          <span
+            aria-label={resolvedStatusLabel}
+            className="ui-workbench-action-list-item__status"
+            title={resolvedStatusLabel}
+          >
+            <span aria-hidden="true" className="ui-workbench-action-list-item__status-dot" />
+          </span>
+        ) : null}
+      </SideBarListItem>
+    );
+  },
+);

package/src/layout/WorkbenchTree.tsx

@@ -0,0 +1,351 @@
+import { forwardRef } from 'react';
+import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
+import { IconButton } from '../primitives/IconButton';
+import type { IconButtonProps } from '../primitives/IconButton';
+import { cxCodicon } from '../utils/codicon';
+import { cx } from '../utils/cx';
+import { toLengthValue, workbenchTreeIndentOffset } from './layoutHelpers';
+
+export interface WorkbenchTreeProps extends ComponentPropsWithRef<'div'> {
+  indentSize?: number | string;
+  rowHeight?: number | string;
+}
+
+export function WorkbenchTree({
+  className,
+  indentSize,
+  role = 'tree',
+  rowHeight,
+  style,
+  ...props
+}: WorkbenchTreeProps) {
+  const treeStyle = {
+    ...(indentSize !== undefined
+      ? { '--ui-workbench-tree-indent-size': toLengthValue(indentSize) }
+      : null),
+    ...(rowHeight !== undefined
+      ? { '--ui-workbench-tree-row-height': toLengthValue(rowHeight) }
+      : null),
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <div className={cx('ui-workbench-tree', className)} role={role} style={treeStyle} {...props} />
+  );
+}
+
+export type WorkbenchTreeInteraction = 'default' | 'draggable' | 'dragging';
+
+export interface WorkbenchTreeItemProps extends ComponentPropsWithRef<'div'> {
+  actions?: ReactNode;
+  control?: ReactNode;
+  depth?: number;
+  icon?: ReactNode;
+  indentSize?: number;
+  interaction?: WorkbenchTreeInteraction;
+  label: ReactNode;
+  meta?: ReactNode;
+  selected?: boolean;
+}
+
+export const WorkbenchTreeItem = forwardRef<HTMLDivElement, WorkbenchTreeItemProps>(
+  function WorkbenchTreeItem(
+    {
+      actions,
+      children,
+      className,
+      control,
+      depth = 0,
+      icon,
+      indentSize = 14,
+      interaction = 'default',
+      label,
+      meta,
+      role = 'treeitem',
+      selected = false,
+      style,
+      tabIndex = 0,
+      ...props
+    },
+    ref,
+  ) {
+    const itemStyle = {
+      '--ui-workbench-tree-depth': depth,
+      '--ui-workbench-tree-indent-offset': workbenchTreeIndentOffset(depth, indentSize),
+      ...style,
+    } as CSSProperties;
+
+    return (
+      <div
+        ref={ref}
+        aria-selected={selected}
+        className={cx('ui-workbench-tree-item', className)}
+        data-interaction={interaction}
+        data-selected={selected ? 'true' : 'false'}
+        role={role}
+        style={itemStyle}
+        tabIndex={tabIndex}
+        {...props}
+      >
+        <span className="ui-workbench-tree-item__control">{control}</span>
+        <span className="ui-workbench-tree-item__icon" aria-hidden="true">
+          {icon}
+        </span>
+        <span className="ui-workbench-tree-item__label">{label}</span>
+        {meta ? <span className="ui-workbench-tree-item__meta">{meta}</span> : null}
+        {actions ? <span className="ui-workbench-tree-item__actions">{actions}</span> : null}
+        {children}
+      </div>
+    );
+  },
+);
+
+export interface WorkbenchTreeExpanderProps extends Omit<
+  ComponentPropsWithRef<'button'>,
+  'children'
+> {
+  expanded?: boolean;
+  label?: string;
+  visible?: boolean;
+}
+
+function handleNestedTreeControlEvent<TEvent extends { stopPropagation(): void }>(
+  event: TEvent,
+  handler: ((event: TEvent) => void) | undefined,
+) {
+  event.stopPropagation();
+  handler?.(event);
+}
+
+export function WorkbenchTreeExpander({
+  className,
+  disabled,
+  expanded = false,
+  label,
+  onClick,
+  onDoubleClick,
+  onPointerDown,
+  tabIndex,
+  type = 'button',
+  visible = true,
+  ...props
+}: WorkbenchTreeExpanderProps) {
+  return (
+    <button
+      aria-expanded={visible ? expanded : undefined}
+      aria-hidden={visible ? undefined : true}
+      aria-label={visible ? label : undefined}
+      className={cx('ui-workbench-tree-expander', className)}
+      data-visible={visible ? 'true' : 'false'}
+      disabled={!visible || disabled}
+      onClick={(event) => handleNestedTreeControlEvent(event, onClick)}
+      onDoubleClick={(event) => handleNestedTreeControlEvent(event, onDoubleClick)}
+      onPointerDown={(event) => handleNestedTreeControlEvent(event, onPointerDown)}
+      tabIndex={visible ? tabIndex : -1}
+      type={type}
+      {...props}
+    >
+      <i aria-hidden="true" className={cxCodicon(expanded ? 'chevron-down' : 'chevron-right')} />
+    </button>
+  );
+}
+
+export interface WorkbenchTreeActionButtonProps extends IconButtonProps {
+  active?: boolean;
+  tone?: 'default' | 'muted' | 'warning';
+  visible?: boolean;
+}
+
+export function WorkbenchTreeActionButton({
+  active = false,
+  className,
+  compact = true,
+  onClick,
+  onDoubleClick,
+  onPointerDown,
+  tabIndex,
+  tone = 'default',
+  visible = false,
+  ...props
+}: WorkbenchTreeActionButtonProps) {
+  return (
+    <IconButton
+      className={cx('ui-workbench-tree-action', className)}
+      compact={compact}
+      data-active={active ? 'true' : 'false'}
+      data-tone={tone}
+      data-visible={visible ? 'true' : 'false'}
+      onClick={(event) => handleNestedTreeControlEvent(event, onClick)}
+      onDoubleClick={(event) => handleNestedTreeControlEvent(event, onDoubleClick)}
+      onPointerDown={(event) => handleNestedTreeControlEvent(event, onPointerDown)}
+      tabIndex={visible ? tabIndex : -1}
+      {...props}
+    />
+  );
+}
+
+export interface WorkbenchTreeDropLineProps extends ComponentPropsWithRef<'div'> {
+  position: 'above' | 'below';
+}
+
+export function WorkbenchTreeDropLine({
+  className,
+  position,
+  ...props
+}: WorkbenchTreeDropLineProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cx('ui-workbench-tree-drop-line', className)}
+      data-position={position}
+      {...props}
+    />
+  );
+}
+
+export interface WorkbenchTreeDropZoneProps extends ComponentPropsWithRef<'div'> {
+  depth?: number;
+  empty?: boolean;
+  highlighted?: boolean;
+  indentSize?: number;
+}
+
+export const WorkbenchTreeDropZone = forwardRef<HTMLDivElement, WorkbenchTreeDropZoneProps>(
+  function WorkbenchTreeDropZone(
+    { className, depth = 0, empty = false, highlighted = false, indentSize = 14, style, ...props },
+    ref,
+  ) {
+    const zoneStyle = {
+      '--ui-workbench-tree-depth': depth,
+      '--ui-workbench-tree-indent-offset': workbenchTreeIndentOffset(depth, indentSize),
+      ...style,
+    } as CSSProperties;
+
+    return (
+      <div
+        ref={ref}
+        className={cx('ui-workbench-tree-drop-zone', className)}
+        data-empty={empty ? 'true' : 'false'}
+        data-highlighted={highlighted ? 'true' : 'false'}
+        style={zoneStyle}
+        {...props}
+      />
+    );
+  },
+);
+
+export interface WorkbenchTreeDragOverlayProps extends ComponentPropsWithRef<'div'> {
+  rowHeight?: number | string;
+}
+
+export function WorkbenchTreeDragOverlay({
+  className,
+  rowHeight,
+  style,
+  ...props
+}: WorkbenchTreeDragOverlayProps) {
+  const overlayStyle = {
+    ...(rowHeight !== undefined
+      ? { '--ui-workbench-tree-row-height': toLengthValue(rowHeight) }
+      : null),
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <div
+      className={cx('ui-workbench-tree-drag-overlay', className)}
+      style={overlayStyle}
+      {...props}
+    />
+  );
+}
+
+export interface WorkbenchDragPreviewProps extends ComponentPropsWithRef<'div'> {
+  maxWidth?: number | string;
+  offset?: number | string;
+  x: number | string;
+  y: number | string;
+}
+
+export function WorkbenchDragPreview({
+  children,
+  className,
+  maxWidth = 160,
+  offset = 8,
+  style,
+  x,
+  y,
+  ...props
+}: WorkbenchDragPreviewProps) {
+  const previewStyle = {
+    '--ui-workbench-drag-preview-x': toLengthValue(x),
+    '--ui-workbench-drag-preview-y': toLengthValue(y),
+    '--ui-workbench-drag-preview-offset': toLengthValue(offset),
+    '--ui-workbench-drag-preview-max-width': toLengthValue(maxWidth),
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <div className={cx('ui-workbench-drag-preview', className)} style={previewStyle} {...props}>
+      <span className="ui-workbench-drag-preview__label">{children}</span>
+    </div>
+  );
+}
+
+export type WorkbenchTemplateGlyphIcon =
+  | 'badge'
+  | 'color'
+  | 'flex'
+  | 'frame'
+  | 'grid'
+  | 'image'
+  | 'list'
+  | 'text';
+
+export interface WorkbenchTemplateGlyphProps extends ComponentPropsWithRef<'span'> {
+  accent: string;
+  icon: WorkbenchTemplateGlyphIcon;
+}
+
+export function WorkbenchTemplateGlyph({
+  accent,
+  className,
+  icon,
+  style,
+  ...props
+}: WorkbenchTemplateGlyphProps) {
+  const glyphStyle = {
+    '--ui-workbench-template-glyph-accent': accent,
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <span
+      aria-hidden="true"
+      className={cx('ui-workbench-template-glyph', className)}
+      data-icon={icon}
+      style={glyphStyle}
+      {...props}
+    >
+      {icon === 'text' ? <span className="ui-workbench-template-glyph__text">T</span> : null}
+      {icon === 'list'
+        ? [0, 1, 2].map((index) => (
+            <span key={index} className="ui-workbench-template-glyph__list-line" />
+          ))
+        : null}
+      {icon === 'flex'
+        ? [0, 1, 2].map((index) => (
+            <span key={index} className="ui-workbench-template-glyph__flex-bar" />
+          ))
+        : null}
+      {icon === 'image' ? <span className="ui-workbench-template-glyph__image-mark" /> : null}
+      {icon === 'badge' ? <span className="ui-workbench-template-glyph__badge-mark" /> : null}
+    </span>
+  );
+}
+
+export type WorkbenchDividerProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchDivider({ className, ...props }: WorkbenchDividerProps) {
+  return <div className={cx('ui-workbench-divider', className)} {...props} />;
+}

package/src/layout/layoutHelpers.ts

@@ -0,0 +1,25 @@
+export function toLengthValue(value: number | string) {
+  return typeof value === 'number' ? `${value}px` : value;
+}
+
+export function toAngleValue(value: number | string) {
+  return typeof value === 'number' ? `${value}deg` : value;
+}
+
+export function toLineLengthValue(start: number | string, end: number | string) {
+  if (typeof start === 'number' && typeof end === 'number') {
+    return `${Math.max(1, end - start)}px`;
+  }
+  return `max(1px, calc(${toLengthValue(end)} - ${toLengthValue(start)}))`;
+}
+
+export const DEFAULT_WORKBENCH_TREE_BASE_INDENT = 8;
+export const DEFAULT_WORKBENCH_TREE_INDENT_SIZE = 14;
+
+export function workbenchTreeIndentOffset(
+  depth: number,
+  indentSize: number = DEFAULT_WORKBENCH_TREE_INDENT_SIZE,
+  baseIndent: number = DEFAULT_WORKBENCH_TREE_BASE_INDENT,
+) {
+  return `${baseIndent + Math.max(0, depth) * indentSize}px`;
+}