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

package/src/primitives/List.tsx

@@ -0,0 +1,111 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { IconButton } from './IconButton';
+import type { IconButtonProps } from './IconButton';
+import { cxCodicon } from '../utils/codicon';
+import { cx } from '../utils/cx';
+
+export interface ListProps extends ComponentPropsWithRef<'div'> {
+  ariaLabel?: string;
+}
+
+export function List({ ariaLabel, className, role = 'listbox', ...props }: ListProps) {
+  return (
+    <div
+      aria-label={ariaLabel ?? props['aria-label']}
+      className={cx('ui-list', 'ui-workbench-scrollbar', className)}
+      role={role}
+      {...props}
+    />
+  );
+}
+
+export interface ListItemProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+  actions?: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode | string;
+  label: ReactNode;
+  leading?: ReactNode;
+  meta?: ReactNode;
+  selected?: boolean;
+}
+
+export function ListItem({
+  actions,
+  className,
+  description,
+  icon,
+  label,
+  leading,
+  meta,
+  role = 'option',
+  selected = false,
+  tabIndex = 0,
+  ...props
+}: ListItemProps) {
+  const hasDescription = description !== undefined && description !== null && description !== '';
+  const resolvedIcon = typeof icon === 'string' ? <i className={cxCodicon(icon)} /> : icon;
+
+  return (
+    <div
+      aria-selected={selected}
+      className={cx('ui-list-item', selected && 'ui-list-item--selected', className)}
+      role={role}
+      tabIndex={tabIndex}
+      {...props}
+    >
+      {leading ??
+        (resolvedIcon ? <span className="ui-list-item__icon">{resolvedIcon}</span> : null)}
+      <span className="ui-list-item__content">
+        <span className="ui-list-item__label">{label}</span>
+        {hasDescription ? <span className="ui-list-item__description">{description}</span> : null}
+      </span>
+      {meta ? <span className="ui-list-item__meta">{meta}</span> : null}
+      {actions ? <span className="ui-list-item__actions">{actions}</span> : null}
+    </div>
+  );
+}
+
+export type ListItemActionButtonProps = IconButtonProps;
+
+function handleNestedListActionEvent<TEvent extends { stopPropagation(): void }>(
+  event: TEvent,
+  handler: ((event: TEvent) => void) | undefined,
+) {
+  event.stopPropagation();
+  handler?.(event);
+}
+
+export function ListItemActionButton({
+  compact = true,
+  onClick,
+  onDoubleClick,
+  onPointerDown,
+  ...props
+}: ListItemActionButtonProps) {
+  return (
+    <IconButton
+      compact={compact}
+      onClick={(event) => handleNestedListActionEvent(event, onClick)}
+      onDoubleClick={(event) => handleNestedListActionEvent(event, onDoubleClick)}
+      onPointerDown={(event) => handleNestedListActionEvent(event, onPointerDown)}
+      {...props}
+    />
+  );
+}
+
+export interface ListEmptyStateProps extends ComponentPropsWithRef<'div'> {
+  tone?: 'error' | 'normal';
+}
+
+export function ListEmptyState({ className, tone = 'normal', ...props }: ListEmptyStateProps) {
+  return (
+    <div
+      className={cx(
+        'ui-list-empty-state',
+        tone === 'error' && 'ui-list-empty-state--error',
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/primitives/NumberInput.tsx

@@ -0,0 +1,38 @@
+import type { ChangeEvent } from 'react';
+import { TextInput } from './TextInput';
+import type { ControlWidth, TextInputProps } from './TextInput';
+
+export interface NumberInputProps extends Omit<
+  TextInputProps,
+  'defaultValue' | 'onValueChange' | 'type' | 'value'
+> {
+  defaultValue?: number | undefined;
+  onValueChange?: (value: number, event: ChangeEvent<HTMLInputElement>) => void;
+  value?: number | undefined;
+}
+
+export function NumberInput({
+  controlWidth = 'default',
+  defaultValue,
+  onValueChange,
+  value,
+  ...props
+}: NumberInputProps & { controlWidth?: ControlWidth }) {
+  const valueProps =
+    value !== undefined ? { value } : defaultValue !== undefined ? { defaultValue } : {};
+
+  return (
+    <TextInput
+      controlWidth={controlWidth}
+      type="number"
+      onValueChange={(next, event) => {
+        const parsed = Number.parseFloat(next);
+        if (!Number.isNaN(parsed)) {
+          onValueChange?.(parsed, event);
+        }
+      }}
+      {...valueProps}
+      {...props}
+    />
+  );
+}

package/src/primitives/ScrollArea.tsx

@@ -0,0 +1,42 @@
+import type { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export type ScrollAreaGutter = 'auto' | 'stable';
+export type ScrollAreaOrientation = 'both' | 'horizontal' | 'vertical';
+export type ScrollAreaScrollbarVisibility = 'auto' | 'hidden';
+
+export interface ScrollAreaProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+  as?: ElementType | undefined;
+  children?: ReactNode | undefined;
+  gutter?: ScrollAreaGutter | undefined;
+  orientation?: ScrollAreaOrientation | undefined;
+  scrollbars?: ScrollAreaScrollbarVisibility | undefined;
+}
+
+export function ScrollArea({
+  as,
+  children,
+  className,
+  gutter = 'stable',
+  orientation = 'both',
+  scrollbars = 'auto',
+  ...props
+}: ScrollAreaProps) {
+  const Component = (as ?? 'div') as ElementType;
+
+  return (
+    <Component
+      className={cx(
+        'ui-scroll-area',
+        'ui-workbench-scrollbar',
+        `ui-scroll-area--${orientation}`,
+        gutter === 'stable' && 'ui-scroll-area--stable-gutter',
+        scrollbars === 'hidden' && 'ui-workbench-scrollbar--hidden',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+}

package/src/primitives/Select.tsx

@@ -1,12 +1 @@
-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} />;
-}
+export { Select, type SelectProps } from './select/index';

package/src/primitives/StatusBar.tsx

@@ -0,0 +1,46 @@
+import type { ComponentPropsWithRef } from 'react';
+import { cx } from '../utils/cx';
+
+export type StatusBarSeverity = 'error' | 'normal' | 'warning';
+export type StatusBarSectionAlign = 'end' | 'start';
+
+export interface StatusBarProps extends ComponentPropsWithRef<'footer'> {
+  severity?: StatusBarSeverity;
+}
+
+export function StatusBar({ className, severity = 'normal', ...props }: StatusBarProps) {
+  return (
+    <footer
+      className={cx(
+        'ui-status-bar',
+        severity !== 'normal' && `ui-status-bar--${severity}`,
+        className,
+      )}
+      data-severity={severity}
+      {...props}
+    />
+  );
+}
+
+export interface StatusBarSectionProps extends ComponentPropsWithRef<'span'> {
+  align?: StatusBarSectionAlign;
+}
+
+export function StatusBarSection({ align = 'start', className, ...props }: StatusBarSectionProps) {
+  return (
+    <span
+      className={cx(
+        'ui-status-bar__section',
+        align === 'end' && 'ui-status-bar__section--end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export type StatusBarLabelProps = ComponentPropsWithRef<'span'>;
+
+export function StatusBarLabel({ className, ...props }: StatusBarLabelProps) {
+  return <span className={cx('ui-status-bar__label', className)} {...props} />;
+}

package/src/primitives/TextArea.tsx

@@ -0,0 +1,36 @@
+import type { ComponentPropsWithRef, CSSProperties } from 'react';
+import { cx } from '../utils/cx';
+
+type ControlWidth = 'default' | 'wide' | 'full';
+
+export interface TextAreaProps extends ComponentPropsWithRef<'textarea'> {
+  controlWidth?: ControlWidth;
+  monospace?: boolean;
+  resize?: CSSProperties['resize'] | undefined;
+}
+
+export function TextArea({
+  className,
+  controlWidth = 'default',
+  monospace = false,
+  resize,
+  style,
+  ...props
+}: TextAreaProps) {
+  const resolvedStyle =
+    resize !== undefined
+      ? {
+          resize,
+          ...style,
+        }
+      : style;
+
+  return (
+    <textarea
+      className={cx('ui-textarea', monospace && 'ui-input--monospace', className)}
+      data-width={controlWidth}
+      style={resolvedStyle}
+      {...props}
+    />
+  );
+}

package/src/primitives/TextInput.tsx

@@ -1,23 +1,32 @@
-import type { ComponentPropsWithRef } from 'react';
+import type { ChangeEvent, ComponentPropsWithRef } from 'react';
 import { cx } from '../utils/cx';
 
-type ControlWidth = 'default' | 'wide' | 'full';
+export type ControlWidth = 'default' | 'wide' | 'full';
 
 export interface TextInputProps extends ComponentPropsWithRef<'input'> {
   controlWidth?: ControlWidth;
   monospace?: boolean;
+  onValueChange?: ((value: string, event: ChangeEvent<HTMLInputElement>) => void) | undefined;
 }
 
 export function TextInput({
   className,
   controlWidth = 'default',
   monospace = false,
+  onChange,
+  onValueChange,
   ...props
 }: TextInputProps) {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange?.(event);
+    onValueChange?.(event.currentTarget.value, event);
+  };
+
   return (
     <input
       className={cx('ui-input', monospace && 'ui-input--monospace', className)}
       data-width={controlWidth}
+      onChange={handleChange}
       {...props}
     />
   );