@workbench-kit/react 0.0.1-prototype.0

package/src/overlay/ContextMenu.tsx

@@ -0,0 +1,145 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export type ContextMenuItem =
+  | {
+      type: 'separator';
+      id?: string;
+    }
+  | {
+      type?: 'item';
+      id?: string;
+      label: ReactNode;
+      icon?: string;
+      shortcut?: ReactNode;
+      disabled?: boolean;
+      danger?: boolean;
+      onSelect: () => void;
+    };
+
+export interface ContextMenuProps {
+  ariaLabel?: string;
+  className?: string;
+  items: ContextMenuItem[];
+  x: number;
+  y: number;
+  onClose: () => void;
+}
+
+function itemKey(item: ContextMenuItem, index: number): string {
+  return item.id ?? `${item.type ?? 'item'}-${index}`;
+}
+
+export function ContextMenu({
+  ariaLabel = 'Context menu',
+  className,
+  items,
+  x,
+  y,
+  onClose,
+}: ContextMenuProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState({ x, y });
+
+  useEffect(() => {
+    setPosition({ x, y });
+  }, [x, y]);
+
+  useEffect(() => {
+    const menu = ref.current;
+    if (!menu || typeof window === 'undefined') return;
+
+    const frame = window.requestAnimationFrame(() => {
+      const rect = menu.getBoundingClientRect();
+      setPosition({
+        x: Math.max(4, Math.min(x, window.innerWidth - rect.width - 4)),
+        y: Math.max(4, Math.min(y, window.innerHeight - rect.height - 4)),
+      });
+    });
+
+    return () => window.cancelAnimationFrame(frame);
+  }, [items.length, x, y]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        onClose();
+      }
+    };
+
+    const handlePointerDown = (event: PointerEvent) => {
+      if (ref.current?.contains(event.target as Node)) return;
+      onClose();
+    };
+
+    const handleContextMenu = (event: MouseEvent) => {
+      if (ref.current?.contains(event.target as Node)) {
+        event.preventDefault();
+        return;
+      }
+      onClose();
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('pointerdown', handlePointerDown, true);
+    window.addEventListener('contextmenu', handleContextMenu, true);
+    window.addEventListener('resize', onClose);
+    window.addEventListener('scroll', onClose, true);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('pointerdown', handlePointerDown, true);
+      window.removeEventListener('contextmenu', handleContextMenu, true);
+      window.removeEventListener('resize', onClose);
+      window.removeEventListener('scroll', onClose, true);
+    };
+  }, [onClose]);
+
+  useEffect(() => {
+    ref.current?.querySelector<HTMLButtonElement>('.ui-context-menu__item:not(:disabled)')?.focus();
+  }, []);
+
+  if (items.length === 0) return null;
+
+  return (
+    <div
+      ref={ref}
+      aria-label={ariaLabel}
+      className={cx('ui-context-menu', className)}
+      role="menu"
+      style={{
+        left: position.x,
+        top: position.y,
+      }}
+      onContextMenu={(event) => event.preventDefault()}
+    >
+      {items.map((item, index) =>
+        item.type === 'separator' ? (
+          <div key={itemKey(item, index)} className="ui-context-menu__separator" role="separator" />
+        ) : (
+          <button
+            key={itemKey(item, index)}
+            className="ui-context-menu__item"
+            data-danger={item.danger ? 'true' : undefined}
+            disabled={item.disabled}
+            role="menuitem"
+            type="button"
+            onClick={() => {
+              item.onSelect();
+              onClose();
+            }}
+          >
+            <span className="ui-context-menu__icon">
+              {item.icon ? <i className={`codicon ${item.icon}`} /> : null}
+            </span>
+            <span className="ui-context-menu__label">{item.label}</span>
+            {item.shortcut ? (
+              <span className="ui-context-menu__shortcut">{item.shortcut}</span>
+            ) : null}
+          </button>
+        ),
+      )}
+    </div>
+  );
+}

package/src/primitives/Badge.tsx

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithRef } from 'react';
+import { cx } from '../utils/cx';
+
+type BadgeVariant = 'accent' | 'muted' | 'danger';
+
+export interface BadgeProps extends ComponentPropsWithRef<'span'> {
+  variant?: BadgeVariant;
+}
+
+export function Badge({ className, variant = 'accent', ...props }: BadgeProps) {
+  return <span className={cx('ui-badge', className)} data-variant={variant} {...props} />;
+}

package/src/primitives/Button.tsx

@@ -0,0 +1,14 @@
+import type { ComponentPropsWithRef } from 'react';
+import { cx } from '../utils/cx';
+
+type ButtonVariant = 'default' | 'primary' | 'danger';
+
+export interface ButtonProps extends ComponentPropsWithRef<'button'> {
+  variant?: ButtonVariant;
+}
+
+export function Button({ className, type = 'button', variant = 'default', ...props }: ButtonProps) {
+  return (
+    <button className={cx('ui-button', className)} data-variant={variant} type={type} {...props} />
+  );
+}

package/src/primitives/Checkbox.tsx

@@ -0,0 +1,15 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export interface CheckboxProps extends Omit<ComponentPropsWithRef<'input'>, 'type'> {
+  label: ReactNode;
+}
+
+export function Checkbox({ className, label, ...props }: CheckboxProps) {
+  return (
+    <label className={cx('ui-checkbox', className)}>
+      <input type="checkbox" {...props} />
+      <span>{label}</span>
+    </label>
+  );
+}

package/src/primitives/EmptyState.tsx

@@ -0,0 +1,26 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export interface EmptyStateProps extends ComponentPropsWithRef<'div'> {
+  compact?: boolean;
+  icon: string;
+  children: ReactNode;
+}
+
+export function EmptyState({
+  children,
+  className,
+  compact = false,
+  icon,
+  ...props
+}: EmptyStateProps) {
+  return (
+    <div
+      className={cx('ui-empty-state', compact && 'ui-empty-state--compact', className)}
+      {...props}
+    >
+      <i className={`codicon ${icon}`} />
+      <span>{children}</span>
+    </div>
+  );
+}

package/src/primitives/Field.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export interface FieldProps {
+  children: ReactNode;
+  className?: string;
+  description?: ReactNode;
+  htmlFor?: string;
+  inline?: boolean;
+  label?: ReactNode;
+}
+
+export function Field({
+  label,
+  children,
+  className,
+  description,
+  htmlFor,
+  inline = false,
+}: FieldProps) {
+  const labelElement = !label ? null : htmlFor ? (
+    <label className="ui-field__label" htmlFor={htmlFor}>
+      {label}
+    </label>
+  ) : (
+    <span className="ui-field__label">{label}</span>
+  );
+
+  return (
+    <div className={cx('ui-field', inline && 'ui-field--inline', className)}>
+      <div>
+        {labelElement}
+        {description && <div className="ui-field__description">{description}</div>}
+      </div>
+      {children}
+    </div>
+  );
+}

package/src/primitives/IconButton.tsx

@@ -0,0 +1,32 @@
+import type { ComponentPropsWithRef } from 'react';
+import { cx } from '../utils/cx';
+
+type IconButtonVariant = 'default' | 'danger';
+
+export interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
+  icon: string;
+  label: string;
+  variant?: IconButtonVariant;
+}
+
+export function IconButton({
+  className,
+  icon,
+  label,
+  type = 'button',
+  variant = 'default',
+  ...props
+}: IconButtonProps) {
+  return (
+    <button
+      aria-label={label}
+      className={cx('ui-icon-button', className)}
+      data-variant={variant}
+      title={label}
+      type={type}
+      {...props}
+    >
+      <i className={`codicon ${icon}`} />
+    </button>
+  );
+}

package/src/primitives/Select.tsx

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithRef } from 'react';
+import { cx } from '../utils/cx';
+
+type ControlWidth = 'default' | 'wide' | 'full';
+
+export interface SelectProps extends ComponentPropsWithRef<'select'> {
+  controlWidth?: ControlWidth;
+}
+
+export function Select({ className, controlWidth = 'default', ...props }: SelectProps) {
+  return <select className={cx('ui-select', className)} data-width={controlWidth} {...props} />;
+}

package/src/primitives/TextInput.tsx

@@ -0,0 +1,24 @@
+import type { ComponentPropsWithRef } from 'react';
+import { cx } from '../utils/cx';
+
+type ControlWidth = 'default' | 'wide' | 'full';
+
+export interface TextInputProps extends ComponentPropsWithRef<'input'> {
+  controlWidth?: ControlWidth;
+  monospace?: boolean;
+}
+
+export function TextInput({
+  className,
+  controlWidth = 'default',
+  monospace = false,
+  ...props
+}: TextInputProps) {
+  return (
+    <input
+      className={cx('ui-input', monospace && 'ui-input--monospace', className)}
+      data-width={controlWidth}
+      {...props}
+    />
+  );
+}

package/src/primitives/Toolbar.tsx

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithRef } from 'react';
+import { cx } from '../utils/cx';
+
+export type ToolbarProps = ComponentPropsWithRef<'div'>;
+
+export function Toolbar({ className, ...props }: ToolbarProps) {
+  return <div className={cx('ui-toolbar', className)} {...props} />;
+}