@workbench-kit/react 0.0.1-prototype.0

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@workbench-kit/react",
+  "version": "0.0.1-prototype.0",
+  "private": false,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./workbench/chat": "./src/workbench/chat/index.ts",
+    "./workbench/settings": "./src/workbench/settings/index.ts",
+    "./workbench": "./src/workbench/index.ts",
+    "./workbench/workspace": "./src/workbench/workspace/index.ts",
+    "./styles.css": "./src/styles.css"
+  },
+  "files": [
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/**/*.stories.ts",
+    "!src/**/*.stories.tsx"
+  ],
+  "dependencies": {
+    "@vscode/codicons": "^0.0.45",
+    "@workbench-kit/core": "0.0.1-prototype.0",
+    "@workbench-kit/runtime": "0.0.1-prototype.0",
+    "@workbench-kit/adapters": "0.0.1-prototype.0",
+    "@workbench-kit/workspace": "0.0.1-prototype.0",
+    "@workbench-kit/tokens": "0.0.1-prototype.0",
+    "@workbench-kit/services": "0.0.1-prototype.0",
+    "@workbench-kit/contracts": "0.0.1-prototype.0"
+  },
+  "peerDependencies": {
+    "@monaco-editor/react": "^4.7.0",
+    "monaco-editor": "^0.55.1",
+    "react-markdown": "^10.1.0",
+    "react": "^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@monaco-editor/react": {
+      "optional": true
+    },
+    "monaco-editor": {
+      "optional": true
+    },
+    "react-markdown": {
+      "optional": true
+    }
+  },
+  "description": "React primitives and workbench components for Workbench Kit.",
+  "publishConfig": {
+    "access": "public",
+    "tag": "prototype",
+    "provenance": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NewChoBo/newchobo-ui-package.git",
+    "directory": "packages/react"
+  },
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,43 @@
+export { Modal } from './modal/Modal';
+export type { ModalProps } from './modal/Modal';
+export { commandMenuItemsToContextMenuItems } from './workbench/commands';
+export { ConfirmDialog } from './modal/ConfirmDialog';
+export type { ConfirmDialogProps } from './modal/ConfirmDialog';
+export { ContextMenu } from './overlay/ContextMenu';
+export type { ContextMenuItem, ContextMenuProps } from './overlay/ContextMenu';
+export { Panel, PanelBody, PanelHeader } from './layout/Panel';
+export type { PanelBodyProps, PanelHeaderProps, PanelProps } from './layout/Panel';
+export {
+  SideBarHeaderControl,
+  SideBarList,
+  SideBarListItem,
+  SideBarViewFrame,
+  SideBarRow,
+  SideBarScrollSpacer,
+} from './layout/SideBarViewFrame';
+export type {
+  SideBarHeaderControlProps,
+  SideBarListItemProps,
+  SideBarListProps,
+  SideBarViewFrameProps,
+  SideBarRowProps,
+  SideBarScrollSpacerProps,
+} from './layout/SideBarViewFrame';
+export { Badge } from './primitives/Badge';
+export type { BadgeProps } from './primitives/Badge';
+export { Button } from './primitives/Button';
+export type { ButtonProps } from './primitives/Button';
+export { Checkbox } from './primitives/Checkbox';
+export type { CheckboxProps } from './primitives/Checkbox';
+export { EmptyState } from './primitives/EmptyState';
+export type { EmptyStateProps } from './primitives/EmptyState';
+export { Field } from './primitives/Field';
+export type { FieldProps } from './primitives/Field';
+export { IconButton } from './primitives/IconButton';
+export type { IconButtonProps } from './primitives/IconButton';
+export { Select } from './primitives/Select';
+export type { SelectProps } from './primitives/Select';
+export { TextInput } from './primitives/TextInput';
+export type { TextInputProps } from './primitives/TextInput';
+export { Toolbar } from './primitives/Toolbar';
+export type { ToolbarProps } from './primitives/Toolbar';

package/src/layout/Panel.tsx

@@ -0,0 +1,27 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export type PanelProps = ComponentPropsWithRef<'div'>;
+
+export function Panel({ className, ...props }: PanelProps) {
+  return <div className={cx('ide-panel', className)} {...props} />;
+}
+
+export interface PanelHeaderProps extends ComponentPropsWithRef<'div'> {
+  actions?: ReactNode;
+}
+
+export function PanelHeader({ actions, children, className, ...props }: PanelHeaderProps) {
+  return (
+    <div className={cx('panel-header', className)} {...props}>
+      <span className="ui-panel-header__title">{children}</span>
+      {actions ? <span className="ui-panel-header__actions">{actions}</span> : null}
+    </div>
+  );
+}
+
+export type PanelBodyProps = ComponentPropsWithRef<'div'>;
+
+export function PanelBody({ className, ...props }: PanelBodyProps) {
+  return <div className={cx('panel-body', className)} {...props} />;
+}

package/src/layout/SideBarViewFrame.tsx

@@ -0,0 +1,328 @@
+import type { ComponentPropsWithRef, CSSProperties, PointerEvent, ReactNode } from 'react';
+import { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { cx } from '../utils/cx';
+import { Panel, PanelBody, PanelHeader, type PanelBodyProps, type PanelProps } from './Panel';
+
+type SideBarFooterPlacement = 'static' | 'overlay';
+
+export interface SideBarViewFrameProps extends Omit<PanelProps, 'children' | 'title'> {
+  actions?: ReactNode;
+  bodyClassName?: string;
+  bodyProps?: PanelBodyProps;
+  children: ReactNode;
+  footer?: ReactNode;
+  footerPlacement?: SideBarFooterPlacement;
+  headerAddon?: ReactNode;
+  title: ReactNode;
+}
+
+export function SideBarViewFrame({
+  actions,
+  bodyClassName,
+  bodyProps,
+  children,
+  className,
+  footer,
+  footerPlacement = 'static',
+  headerAddon,
+  style,
+  title,
+  ...props
+}: SideBarViewFrameProps) {
+  const { className: bodyPropsClassName, ...resolvedBodyProps } = bodyProps ?? {};
+  const hasFooter = Boolean(footer);
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const footerRef = useRef<HTMLDivElement>(null);
+  const [scrollbar, setScrollbar] = useState({ needed: false, top: 0, height: 0 });
+  const [isDraggingScrollbar, setIsDraggingScrollbar] = useState(false);
+  const [footerHeight, setFooterHeight] = useState(0);
+  const dragStateRef = useRef<{
+    maxScrollTop: number;
+    maxThumbTop: number;
+    startScrollTop: number;
+    startY: number;
+  } | null>(null);
+
+  const updateScrollbar = useCallback(() => {
+    const element = bodyRef.current;
+    if (!element) return;
+
+    const viewportHeight = element.clientHeight;
+    const scrollHeight = element.scrollHeight;
+    const maxScrollTop = scrollHeight - viewportHeight;
+    if (viewportHeight <= 0 || maxScrollTop <= 1) {
+      setScrollbar((current) => (current.needed ? { needed: false, top: 0, height: 0 } : current));
+      return;
+    }
+
+    const thumbHeight = Math.max(24, Math.round((viewportHeight / scrollHeight) * viewportHeight));
+    const maxThumbTop = Math.max(0, viewportHeight - thumbHeight);
+    const thumbTop = Math.round((element.scrollTop / maxScrollTop) * maxThumbTop);
+
+    setScrollbar((current) => {
+      if (current.needed && current.top === thumbTop && current.height === thumbHeight) {
+        return current;
+      }
+
+      return { needed: true, top: thumbTop, height: thumbHeight };
+    });
+  }, []);
+
+  useLayoutEffect(() => {
+    updateScrollbar();
+  });
+
+  useEffect(() => {
+    const element = bodyRef.current;
+    if (!element) return undefined;
+
+    element.addEventListener('scroll', updateScrollbar, { passive: true });
+
+    const resizeObserver = new ResizeObserver(updateScrollbar);
+    resizeObserver.observe(element);
+
+    const mutationObserver = new MutationObserver(updateScrollbar);
+    mutationObserver.observe(element, {
+      attributes: true,
+      characterData: true,
+      childList: true,
+      subtree: true,
+    });
+
+    return () => {
+      element.removeEventListener('scroll', updateScrollbar);
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [updateScrollbar]);
+
+  useEffect(() => {
+    if (!isDraggingScrollbar) return undefined;
+
+    const handlePointerMove = (event: globalThis.PointerEvent) => {
+      const element = bodyRef.current;
+      const dragState = dragStateRef.current;
+      if (!element || !dragState || dragState.maxThumbTop <= 0) return;
+
+      const deltaY = event.clientY - dragState.startY;
+      element.scrollTop =
+        dragState.startScrollTop + (deltaY / dragState.maxThumbTop) * dragState.maxScrollTop;
+    };
+
+    const handlePointerUp = () => {
+      dragStateRef.current = null;
+      setIsDraggingScrollbar(false);
+    };
+
+    window.addEventListener('pointermove', handlePointerMove);
+    window.addEventListener('pointerup', handlePointerUp);
+
+    return () => {
+      window.removeEventListener('pointermove', handlePointerMove);
+      window.removeEventListener('pointerup', handlePointerUp);
+    };
+  }, [isDraggingScrollbar]);
+
+  const handleScrollbarTrackPointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    if (event.target !== event.currentTarget) return;
+
+    const element = bodyRef.current;
+    if (!element) return;
+
+    event.preventDefault();
+    const maxScrollTop = element.scrollHeight - element.clientHeight;
+    const maxThumbTop = element.clientHeight - scrollbar.height;
+    if (maxScrollTop <= 0 || maxThumbTop <= 0) return;
+
+    const trackTop = event.currentTarget.getBoundingClientRect().top;
+    const nextThumbTop = Math.min(
+      maxThumbTop,
+      Math.max(0, event.clientY - trackTop - scrollbar.height / 2),
+    );
+
+    element.scrollTop = (nextThumbTop / maxThumbTop) * maxScrollTop;
+  };
+
+  const handleScrollbarThumbPointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    const element = bodyRef.current;
+    if (!element) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    const maxScrollTop = element.scrollHeight - element.clientHeight;
+    const maxThumbTop = element.clientHeight - scrollbar.height;
+    if (maxScrollTop <= 0 || maxThumbTop <= 0) return;
+
+    dragStateRef.current = {
+      maxScrollTop,
+      maxThumbTop,
+      startScrollTop: element.scrollTop,
+      startY: event.clientY,
+    };
+    setIsDraggingScrollbar(true);
+  };
+
+  useLayoutEffect(() => {
+    const element = footerRef.current;
+    if (!element || footerPlacement !== 'overlay' || !hasFooter) {
+      setFooterHeight(0);
+      return undefined;
+    }
+
+    const updateFooterHeight = () => {
+      const nextHeight = Math.ceil(element.getBoundingClientRect().height);
+      setFooterHeight((currentHeight) =>
+        currentHeight === nextHeight ? currentHeight : nextHeight,
+      );
+    };
+
+    updateFooterHeight();
+    const resizeObserver = new ResizeObserver(updateFooterHeight);
+    resizeObserver.observe(element);
+
+    return () => resizeObserver.disconnect();
+  }, [footerPlacement, hasFooter]);
+
+  const panelStyle = {
+    '--ui-side-bar-footer-height': `${footerHeight}px`,
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <Panel className={cx('ui-side-bar-view', className)} style={panelStyle} {...props}>
+      <PanelHeader actions={actions} className="ui-side-bar-view__header">
+        {title}
+      </PanelHeader>
+      {headerAddon ? <div className="ui-side-bar-view__header-addon">{headerAddon}</div> : null}
+      <div className="ui-side-bar-view__scroll-region">
+        <PanelBody
+          {...resolvedBodyProps}
+          ref={bodyRef}
+          className={cx('ui-side-bar-view__body', bodyClassName, bodyPropsClassName)}
+        >
+          {children}
+        </PanelBody>
+        {scrollbar.needed ? (
+          <div
+            aria-hidden="true"
+            className={cx(
+              'ui-side-bar-overlay-scrollbar',
+              isDraggingScrollbar && 'ui-side-bar-overlay-scrollbar--dragging',
+            )}
+            onPointerDown={handleScrollbarTrackPointerDown}
+          >
+            <div
+              className="ui-side-bar-overlay-scrollbar__thumb"
+              style={{
+                height: scrollbar.height,
+                transform: `translateY(${scrollbar.top}px)`,
+              }}
+              onPointerDown={handleScrollbarThumbPointerDown}
+            />
+          </div>
+        ) : null}
+      </div>
+      {hasFooter ? (
+        <div
+          ref={footerRef}
+          className={cx(
+            'panel-footer',
+            'ui-side-bar-view__footer',
+            footerPlacement === 'overlay' && 'ui-side-bar-view__footer--overlay',
+          )}
+        >
+          {footer}
+        </div>
+      ) : null}
+    </Panel>
+  );
+}
+
+export interface SideBarListProps extends ComponentPropsWithRef<'ul'> {
+  dropTarget?: boolean;
+  fill?: boolean;
+}
+
+export function SideBarList({ className, dropTarget, fill, ...props }: SideBarListProps) {
+  return (
+    <ul
+      className={cx(
+        'ui-side-bar-list',
+        fill && 'ui-side-bar-list--fill',
+        dropTarget && 'ui-side-bar-list--drop-target',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export interface SideBarListItemProps extends ComponentPropsWithRef<'button'> {
+  active?: boolean;
+  depth?: number;
+  dropTarget?: boolean;
+  selected?: boolean;
+  variant?: 'default' | 'stacked';
+}
+
+export const SideBarListItem = forwardRef<HTMLButtonElement, SideBarListItemProps>(
+  function SideBarListItem(
+    {
+      active,
+      'aria-current': ariaCurrent,
+      className,
+      depth = 0,
+      dropTarget,
+      selected,
+      style,
+      type = 'button',
+      variant = 'default',
+      ...props
+    },
+    ref,
+  ) {
+    const depthStyle = { '--depth': depth, ...style } as CSSProperties;
+
+    return (
+      <li className="ui-side-bar-list-entry">
+        <button
+          ref={ref}
+          type={type}
+          aria-current={ariaCurrent ?? (active ? 'true' : undefined)}
+          className={cx(
+            'ui-side-bar-list-item',
+            variant === 'stacked' && 'ui-side-bar-list-item--stacked',
+            active && 'ui-side-bar-list-item--active',
+            selected && 'ui-side-bar-list-item--selected',
+            dropTarget && 'ui-side-bar-list-item--drop-target',
+            className,
+          )}
+          data-selected={selected ? 'true' : undefined}
+          style={depthStyle}
+          {...props}
+        />
+      </li>
+    );
+  },
+);
+
+export type SideBarRowProps = ComponentPropsWithRef<'div'>;
+
+export function SideBarRow({ className, ...props }: SideBarRowProps) {
+  return <div className={cx('ui-side-bar-row', className)} {...props} />;
+}
+
+export type SideBarHeaderControlProps = ComponentPropsWithRef<'div'>;
+
+export function SideBarHeaderControl({ className, ...props }: SideBarHeaderControlProps) {
+  return <div className={cx('ui-side-bar-header-control', className)} {...props} />;
+}
+
+export type SideBarScrollSpacerProps = ComponentPropsWithRef<'div'>;
+
+export const SideBarScrollSpacer = forwardRef<HTMLDivElement, SideBarScrollSpacerProps>(
+  function SideBarScrollSpacer({ className, ...props }, ref) {
+    return <div ref={ref} className={cx('ui-side-bar-scroll-spacer', className)} {...props} />;
+  },
+);

package/src/modal/ConfirmDialog.tsx

@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react';
+import { Button } from '../primitives/Button';
+import { cx } from '../utils/cx';
+import { Modal } from './Modal';
+
+type ConfirmDialogVariant = 'default' | 'danger';
+
+export interface ConfirmDialogProps {
+  title: ReactNode;
+  message: ReactNode;
+  detail?: ReactNode;
+  confirmLabel?: ReactNode;
+  cancelLabel?: ReactNode;
+  closeLabel?: string;
+  className?: string;
+  variant?: ConfirmDialogVariant;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export function ConfirmDialog({
+  cancelLabel = 'Cancel',
+  className,
+  closeLabel = 'Close confirmation dialog',
+  confirmLabel = 'Confirm',
+  detail,
+  message,
+  title,
+  variant = 'default',
+  onCancel,
+  onConfirm,
+}: ConfirmDialogProps) {
+  return (
+    <Modal
+      title={title}
+      closeLabel={closeLabel}
+      className={cx('ui-confirm-dialog', className)}
+      bodyClassName="ui-confirm-dialog__body"
+      onClose={onCancel}
+      footer={
+        <>
+          <Button onClick={onCancel}>{cancelLabel}</Button>
+          <Button variant={variant === 'danger' ? 'danger' : 'primary'} onClick={onConfirm}>
+            {confirmLabel}
+          </Button>
+        </>
+      }
+    >
+      <p className="ui-confirm-dialog__message">{message}</p>
+      {detail ? <div className="ui-confirm-dialog__detail">{detail}</div> : null}
+    </Modal>
+  );
+}

package/src/modal/Modal.tsx

@@ -0,0 +1,110 @@
+import { useId, type FormEventHandler, type ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export interface ModalProps {
+  title: ReactNode;
+  titleSuffix?: ReactNode;
+  children: ReactNode;
+  footer?: ReactNode;
+  className?: string;
+  bodyClassName?: string;
+  closeLabel?: string;
+  labelledBy?: string;
+  onClose: () => void;
+  onSubmit?: FormEventHandler<HTMLFormElement>;
+}
+
+function ModalContent({
+  title,
+  titleSuffix,
+  children,
+  footer,
+  bodyClassName,
+  closeLabel = 'Close modal',
+  labelledBy,
+  onClose,
+}: Omit<ModalProps, 'className' | 'onSubmit'>) {
+  return (
+    <>
+      <div className="ui-modal__titlebar">
+        <span id={labelledBy} className="ui-modal__title">
+          {title}
+          {titleSuffix}
+        </span>
+        <button type="button" className="ui-modal__close" aria-label={closeLabel} onClick={onClose}>
+          <i className="codicon codicon-close" />
+        </button>
+      </div>
+      <div className={cx('ui-modal__body', bodyClassName)}>{children}</div>
+      {footer && <div className="ui-modal__footer">{footer}</div>}
+    </>
+  );
+}
+
+export function Modal({
+  title,
+  titleSuffix,
+  children,
+  footer,
+  className,
+  bodyClassName,
+  closeLabel,
+  labelledBy,
+  onClose,
+  onSubmit,
+}: ModalProps) {
+  const modalClassName = cx('ui-modal', className);
+  const generatedLabelId = useId();
+  const resolvedLabelledBy = labelledBy ?? generatedLabelId;
+
+  if (onSubmit) {
+    return (
+      <div className="ui-modal-overlay" onClick={onClose}>
+        <form
+          className={modalClassName}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={resolvedLabelledBy}
+          onClick={(event) => event.stopPropagation()}
+          onSubmit={onSubmit}
+        >
+          <ModalContent
+            title={title}
+            titleSuffix={titleSuffix}
+            bodyClassName={bodyClassName}
+            closeLabel={closeLabel}
+            labelledBy={resolvedLabelledBy}
+            onClose={onClose}
+            footer={footer}
+          >
+            {children}
+          </ModalContent>
+        </form>
+      </div>
+    );
+  }
+
+  return (
+    <div className="ui-modal-overlay" onClick={onClose}>
+      <div
+        className={modalClassName}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={resolvedLabelledBy}
+        onClick={(event) => event.stopPropagation()}
+      >
+        <ModalContent
+          title={title}
+          titleSuffix={titleSuffix}
+          bodyClassName={bodyClassName}
+          closeLabel={closeLabel}
+          labelledBy={resolvedLabelledBy}
+          onClose={onClose}
+          footer={footer}
+        >
+          {children}
+        </ModalContent>
+      </div>
+    </div>
+  );
+}