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

package/src/overlay/ContextMenu.tsx

@@ -1,145 +1,146 @@
-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>
-  );
-}
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { cxCodicon } from '../utils/codicon';
+import { cx } from '../utils/cx';
+
+export type ContextMenuItem =
+  | {
+      type: 'separator';
+      id?: string | undefined;
+    }
+  | {
+      type?: 'item';
+      id?: string | undefined;
+      label: ReactNode;
+      icon?: string | undefined;
+      shortcut?: ReactNode | undefined;
+      disabled?: boolean | undefined;
+      danger?: boolean | undefined;
+      onSelect: () => void;
+    };
+
+export interface ContextMenuProps {
+  ariaLabel?: string | undefined;
+  className?: string | undefined;
+  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={cxCodicon(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/AbsoluteBox.tsx

@@ -0,0 +1,46 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export interface WorkbenchRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface AbsoluteBoxProps {
+  background?: string | undefined;
+  children?: ReactNode;
+  className?: string | undefined;
+  overflow?: CSSProperties['overflow'] | undefined;
+  rect: WorkbenchRect;
+  style?: CSSProperties | undefined;
+}
+
+export function AbsoluteBox({
+  background,
+  children,
+  className,
+  overflow = 'hidden',
+  rect,
+  style,
+}: AbsoluteBoxProps) {
+  return (
+    <div
+      className={cx('ui-absolute-box', className)}
+      style={{
+        position: 'absolute',
+        left: rect.x,
+        top: rect.y,
+        width: rect.width,
+        height: rect.height,
+        overflow,
+        backgroundColor: background,
+        boxSizing: 'border-box',
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/src/primitives/Badge.tsx

@@ -1,12 +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} />;
-}
+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

@@ -1,14 +1,44 @@
-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} />
-  );
-}
+import type { ComponentPropsWithRef } from 'react';
+import { cxCodicon } from '../utils/codicon';
+import { cx } from '../utils/cx';
+
+type ButtonVariant = 'default' | 'primary' | 'danger';
+
+export interface ButtonProps extends ComponentPropsWithRef<'button'> {
+  block?: boolean | undefined;
+  compact?: boolean | undefined;
+  icon?: string | undefined;
+  secondary?: boolean | undefined;
+  variant?: ButtonVariant;
+}
+
+export function Button({
+  block = false,
+  children,
+  className,
+  compact = false,
+  icon,
+  secondary: _secondary,
+  type = 'button',
+  variant = 'default',
+  ...props
+}: ButtonProps) {
+  const iconClassName = cxCodicon(icon);
+
+  return (
+    <button
+      className={cx(
+        'ui-button',
+        block && 'ui-button--block',
+        compact && 'ui-button--compact',
+        className,
+      )}
+      data-variant={variant}
+      type={type}
+      {...props}
+    >
+      {iconClassName ? <i className={iconClassName} aria-hidden /> : null}
+      {children}
+    </button>
+  );
+}

package/src/primitives/Checkbox.tsx

@@ -1,15 +1,21 @@
-import type { ComponentPropsWithRef, ReactNode } from 'react';
+import type { ChangeEvent, ComponentPropsWithRef, ReactNode } from 'react';
 import { cx } from '../utils/cx';
 
 export interface CheckboxProps extends Omit<ComponentPropsWithRef<'input'>, 'type'> {
-  label: ReactNode;
+  label?: ReactNode | undefined;
+  onCheckedChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
 }
 
-export function Checkbox({ className, label, ...props }: CheckboxProps) {
+export function Checkbox({ className, label, onChange, onCheckedChange, ...props }: CheckboxProps) {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange?.(event);
+    onCheckedChange?.(event.currentTarget.checked, event);
+  };
+
   return (
     <label className={cx('ui-checkbox', className)}>
-      <input type="checkbox" {...props} />
-      <span>{label}</span>
+      <input type="checkbox" onChange={handleChange} {...props} />
+      {label !== undefined && label !== null && label !== '' ? <span>{label}</span> : null}
     </label>
   );
 }

package/src/primitives/EmptyState.tsx

@@ -1,26 +1,27 @@
-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>
-  );
-}
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { cxCodicon } from '../utils/codicon';
+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={cxCodicon(icon)} />
+      <span>{children}</span>
+    </div>
+  );
+}

package/src/primitives/Field.tsx

@@ -1,38 +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>
-  );
-}
+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

@@ -1,9 +1,11 @@
 import type { ComponentPropsWithRef } from 'react';
+import { cxCodicon } from '../utils/codicon';
 import { cx } from '../utils/cx';
 
 type IconButtonVariant = 'default' | 'danger';
 
 export interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
+  compact?: boolean | undefined;
   icon: string;
   label: string;
   variant?: IconButtonVariant;
@@ -11,6 +13,7 @@ export interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, '
 
 export function IconButton({
   className,
+  compact = false,
   icon,
   label,
   type = 'button',
@@ -20,13 +23,13 @@ export function IconButton({
   return (
     <button
       aria-label={label}
-      className={cx('ui-icon-button', className)}
+      className={cx('ui-icon-button', compact && 'ui-icon-button--compact', className)}
       data-variant={variant}
       title={label}
       type={type}
       {...props}
     >
-      <i className={`codicon ${icon}`} />
+      <i className={cxCodicon(icon)} />
     </button>
   );
 }