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

package/src/layout/WorkbenchFullscreen.tsx

@@ -0,0 +1,368 @@
+import { forwardRef } from 'react';
+import type { ComponentPropsWithRef } from 'react';
+import { cxCodicon } from '../utils/codicon';
+import { cx } from '../utils/cx';
+
+export type WorkbenchFullscreenLauncherRootProps = ComponentPropsWithRef<'div'>;
+
+export const WorkbenchFullscreenLauncherRoot = forwardRef<
+  HTMLDivElement,
+  WorkbenchFullscreenLauncherRootProps
+>(function WorkbenchFullscreenLauncherRoot({ className, ...props }, ref) {
+  return <div ref={ref} className={cx('ui-workbench-fullscreen-root', className)} {...props} />;
+});
+
+export type WorkbenchFullscreenBackdropProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchFullscreenBackdrop({
+  className,
+  ...props
+}: WorkbenchFullscreenBackdropProps) {
+  return <div className={cx('ui-workbench-fullscreen-backdrop', className)} {...props} />;
+}
+
+export interface WorkbenchFullscreenBackdropImageProps extends ComponentPropsWithRef<'img'> {
+  src: string;
+}
+
+export function WorkbenchFullscreenBackdropImage({
+  alt = '',
+  className,
+  ...props
+}: WorkbenchFullscreenBackdropImageProps) {
+  return (
+    <img
+      alt={alt}
+      className={cx('ui-workbench-fullscreen-backdrop__image', className)}
+      {...props}
+    />
+  );
+}
+
+export type WorkbenchFullscreenBackdropScrimProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchFullscreenBackdropScrim({
+  className,
+  ...props
+}: WorkbenchFullscreenBackdropScrimProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cx('ui-workbench-fullscreen-backdrop__scrim', className)}
+      {...props}
+    />
+  );
+}
+
+export type WorkbenchFullscreenContentProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchFullscreenContent({
+  className,
+  ...props
+}: WorkbenchFullscreenContentProps) {
+  return <div className={cx('ui-workbench-fullscreen-content', className)} {...props} />;
+}
+
+export type WorkbenchFullscreenHeaderProps = ComponentPropsWithRef<'header'>;
+
+export function WorkbenchFullscreenHeader({ className, ...props }: WorkbenchFullscreenHeaderProps) {
+  return <header className={cx('ui-workbench-fullscreen-header', className)} {...props} />;
+}
+
+export type WorkbenchFullscreenHeaderBrandProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchFullscreenHeaderBrand({
+  className,
+  ...props
+}: WorkbenchFullscreenHeaderBrandProps) {
+  return <div className={cx('ui-workbench-fullscreen-header__brand', className)} {...props} />;
+}
+
+export type WorkbenchFullscreenHeaderTitleProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchFullscreenHeaderTitle({
+  className,
+  ...props
+}: WorkbenchFullscreenHeaderTitleProps) {
+  return <div className={cx('ui-workbench-fullscreen-header__title', className)} {...props} />;
+}
+
+export type WorkbenchFullscreenHeaderSubtitleProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchFullscreenHeaderSubtitle({
+  className,
+  ...props
+}: WorkbenchFullscreenHeaderSubtitleProps) {
+  return <div className={cx('ui-workbench-fullscreen-header__subtitle', className)} {...props} />;
+}
+
+export type WorkbenchFullscreenHeaderActionsProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchFullscreenHeaderActions({
+  className,
+  ...props
+}: WorkbenchFullscreenHeaderActionsProps) {
+  return <div className={cx('ui-workbench-fullscreen-header__actions', className)} {...props} />;
+}
+
+export interface WorkbenchFullscreenButtonProps extends ComponentPropsWithRef<'button'> {
+  icon?: string | undefined;
+  prominent?: boolean | undefined;
+}
+
+export function WorkbenchFullscreenButton({
+  children,
+  className,
+  icon,
+  prominent = false,
+  type = 'button',
+  ...props
+}: WorkbenchFullscreenButtonProps) {
+  const iconClassName = cxCodicon(icon);
+
+  return (
+    <button
+      className={cx('ui-workbench-fullscreen-button', className)}
+      data-prominent={prominent ? 'true' : 'false'}
+      type={type}
+      {...props}
+    >
+      {iconClassName ? <span className={iconClassName} aria-hidden /> : null}
+      <span>{children}</span>
+    </button>
+  );
+}
+
+export type WorkbenchFullscreenHeroProps = ComponentPropsWithRef<'section'>;
+
+export function WorkbenchFullscreenHero({ className, ...props }: WorkbenchFullscreenHeroProps) {
+  return <section className={cx('ui-workbench-fullscreen-hero', className)} {...props} />;
+}
+
+export type WorkbenchFullscreenHeroMetaProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchFullscreenHeroMeta({
+  className,
+  ...props
+}: WorkbenchFullscreenHeroMetaProps) {
+  return <div className={cx('ui-workbench-fullscreen-hero__meta', className)} {...props} />;
+}
+
+export type WorkbenchFullscreenHeroTitleProps = ComponentPropsWithRef<'h1'>;
+
+export function WorkbenchFullscreenHeroTitle({
+  className,
+  ...props
+}: WorkbenchFullscreenHeroTitleProps) {
+  return <h1 className={cx('ui-workbench-fullscreen-hero__title', className)} {...props} />;
+}
+
+export type WorkbenchFullscreenPillRowProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchFullscreenPillRow({
+  className,
+  ...props
+}: WorkbenchFullscreenPillRowProps) {
+  return <div className={cx('ui-workbench-fullscreen-pill-row', className)} {...props} />;
+}
+
+export type WorkbenchFullscreenPillProps = ComponentPropsWithRef<'span'>;
+
+export function WorkbenchFullscreenPill({ className, ...props }: WorkbenchFullscreenPillProps) {
+  return <span className={cx('ui-workbench-fullscreen-pill', className)} {...props} />;
+}
+
+export type WorkbenchFullscreenHeroActionRowProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchFullscreenHeroActionRow({
+  className,
+  ...props
+}: WorkbenchFullscreenHeroActionRowProps) {
+  return <div className={cx('ui-workbench-fullscreen-hero__action-row', className)} {...props} />;
+}
+
+export type WorkbenchFullscreenHeroStatusProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchFullscreenHeroStatus({
+  className,
+  ...props
+}: WorkbenchFullscreenHeroStatusProps) {
+  return <div className={cx('ui-workbench-fullscreen-hero__status', className)} {...props} />;
+}
+
+export type WorkbenchFullscreenEmptyProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchFullscreenEmpty({ className, ...props }: WorkbenchFullscreenEmptyProps) {
+  return <div className={cx('ui-workbench-fullscreen-empty', className)} {...props} />;
+}
+
+export type WorkbenchFullscreenEmptyTitleProps = ComponentPropsWithRef<'h1'>;
+
+export function WorkbenchFullscreenEmptyTitle({
+  className,
+  ...props
+}: WorkbenchFullscreenEmptyTitleProps) {
+  return <h1 className={cx('ui-workbench-fullscreen-empty__title', className)} {...props} />;
+}
+
+export type WorkbenchFullscreenEmptyTextProps = ComponentPropsWithRef<'p'>;
+
+export function WorkbenchFullscreenEmptyText({
+  className,
+  ...props
+}: WorkbenchFullscreenEmptyTextProps) {
+  return <p className={cx('ui-workbench-fullscreen-empty__text', className)} {...props} />;
+}
+
+export type WorkbenchFullscreenCarouselProps = ComponentPropsWithRef<'section'>;
+
+export function WorkbenchFullscreenCarousel({
+  className,
+  ...props
+}: WorkbenchFullscreenCarouselProps) {
+  return <section className={cx('ui-workbench-fullscreen-carousel', className)} {...props} />;
+}
+
+export type WorkbenchFullscreenCarouselViewportProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchFullscreenCarouselViewport({
+  className,
+  ...props
+}: WorkbenchFullscreenCarouselViewportProps) {
+  return (
+    <div
+      className={cx(
+        'ui-workbench-fullscreen-carousel__viewport',
+        'ui-workbench-scrollbar',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export interface WorkbenchFullscreenNavButtonProps extends Omit<
+  ComponentPropsWithRef<'button'>,
+  'children'
+> {
+  icon: string;
+  label: string;
+}
+
+export function WorkbenchFullscreenNavButton({
+  className,
+  icon,
+  label,
+  type = 'button',
+  ...props
+}: WorkbenchFullscreenNavButtonProps) {
+  return (
+    <button
+      aria-label={label}
+      className={cx('ui-workbench-fullscreen-nav-button', className)}
+      title={label}
+      type={type}
+      {...props}
+    >
+      <span className={cxCodicon(icon)} aria-hidden />
+    </button>
+  );
+}
+
+export interface WorkbenchFullscreenOptionProps extends ComponentPropsWithRef<'div'> {
+  selected?: boolean | undefined;
+}
+
+export function WorkbenchFullscreenOption({
+  className,
+  selected = false,
+  ...props
+}: WorkbenchFullscreenOptionProps) {
+  return (
+    <div
+      aria-selected={selected}
+      className={cx('ui-workbench-fullscreen-option', className)}
+      data-selected={selected ? 'true' : 'false'}
+      role="option"
+      tabIndex={0}
+      {...props}
+    />
+  );
+}
+
+export type WorkbenchFullscreenArtworkTone = 'accent' | 'success';
+
+export interface WorkbenchFullscreenOptionArtworkProps extends ComponentPropsWithRef<'div'> {
+  tone?: WorkbenchFullscreenArtworkTone | undefined;
+}
+
+export function WorkbenchFullscreenOptionArtwork({
+  className,
+  tone = 'success',
+  ...props
+}: WorkbenchFullscreenOptionArtworkProps) {
+  return (
+    <div
+      className={cx('ui-workbench-fullscreen-option__artwork', className)}
+      data-tone={tone}
+      {...props}
+    />
+  );
+}
+
+export type WorkbenchFullscreenOptionImageProps = ComponentPropsWithRef<'img'>;
+
+export function WorkbenchFullscreenOptionImage({
+  alt = '',
+  className,
+  ...props
+}: WorkbenchFullscreenOptionImageProps) {
+  return (
+    <img alt={alt} className={cx('ui-workbench-fullscreen-option__image', className)} {...props} />
+  );
+}
+
+export interface WorkbenchFullscreenOptionPlaceholderProps extends ComponentPropsWithRef<'span'> {
+  icon?: string | undefined;
+}
+
+export function WorkbenchFullscreenOptionPlaceholder({
+  className,
+  icon = 'device-desktop',
+  ...props
+}: WorkbenchFullscreenOptionPlaceholderProps) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cxCodicon(icon, 'ui-workbench-fullscreen-option__placeholder', className)}
+      {...props}
+    />
+  );
+}
+
+export type WorkbenchFullscreenOptionBodyProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchFullscreenOptionBody({
+  className,
+  ...props
+}: WorkbenchFullscreenOptionBodyProps) {
+  return <div className={cx('ui-workbench-fullscreen-option__body', className)} {...props} />;
+}
+
+export type WorkbenchFullscreenOptionTitleProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchFullscreenOptionTitle({
+  className,
+  ...props
+}: WorkbenchFullscreenOptionTitleProps) {
+  return <div className={cx('ui-workbench-fullscreen-option__title', className)} {...props} />;
+}
+
+export type WorkbenchFullscreenOptionMetaProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchFullscreenOptionMeta({
+  className,
+  ...props
+}: WorkbenchFullscreenOptionMetaProps) {
+  return <div className={cx('ui-workbench-fullscreen-option__meta', className)} {...props} />;
+}

package/src/layout/WorkbenchLayout.tsx

@@ -0,0 +1,5 @@
+export * from './WorkbenchLayoutBase';
+export * from './WorkbenchCanvas';
+export * from './WorkbenchFullscreen';
+export * from './WorkbenchTree';
+export * from './WorkbenchPropertyPanel';

package/src/layout/WorkbenchLayoutBase.tsx

@@ -0,0 +1,294 @@
+import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
+import { ScrollArea } from '../primitives/ScrollArea';
+import { cxCodicon } from '../utils/codicon';
+import { cx } from '../utils/cx';
+import { toLengthValue } from './layoutHelpers';
+
+export type WorkbenchRootProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchRoot({ className, ...props }: WorkbenchRootProps) {
+  return <div className={cx('ui-workbench-root', className)} {...props} />;
+}
+
+export type WorkbenchFillProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchFill({ className, ...props }: WorkbenchFillProps) {
+  return <div className={cx('ui-workbench-fill', className)} {...props} />;
+}
+
+export type WorkbenchCenterProps = ComponentPropsWithRef<'main'>;
+
+export function WorkbenchCenter({ className, ...props }: WorkbenchCenterProps) {
+  return <main className={cx('ui-workbench-center', className)} {...props} />;
+}
+
+export type WorkbenchPaneProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchPane({ className, ...props }: WorkbenchPaneProps) {
+  return <div className={cx('ui-workbench-pane', className)} {...props} />;
+}
+
+export type WorkbenchColumnProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchColumn({ className, ...props }: WorkbenchColumnProps) {
+  return <div className={cx('ui-workbench-column', className)} {...props} />;
+}
+
+export interface WorkbenchPanelSurfaceProps extends ComponentPropsWithRef<'div'> {
+  border?: 'left' | 'right' | false;
+}
+
+export function WorkbenchPanelSurface({
+  border = false,
+  className,
+  ...props
+}: WorkbenchPanelSurfaceProps) {
+  return (
+    <ScrollArea
+      className={cx(
+        'ui-workbench-panel-surface',
+        border === 'left' && 'ui-workbench-panel-surface--border-left',
+        border === 'right' && 'ui-workbench-panel-surface--border-right',
+        className,
+      )}
+      gutter="auto"
+      orientation="vertical"
+      {...props}
+    />
+  );
+}
+
+export type WorkbenchPanelScrollProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchPanelScroll({ className, ...props }: WorkbenchPanelScrollProps) {
+  return (
+    <ScrollArea
+      className={cx('ui-workbench-panel-scroll', className)}
+      gutter="auto"
+      orientation="vertical"
+      {...props}
+    />
+  );
+}
+
+export interface WorkbenchBannerProps extends ComponentPropsWithRef<'div'> {
+  tone?: 'default' | 'warning';
+}
+
+export function WorkbenchBanner({ className, tone = 'default', ...props }: WorkbenchBannerProps) {
+  return (
+    <div
+      className={cx(
+        'ui-workbench-banner',
+        tone === 'warning' && 'ui-workbench-banner--warning',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export interface WorkbenchBannerIconProps extends ComponentPropsWithRef<'span'> {
+  icon: string;
+}
+
+export function WorkbenchBannerIcon({ className, icon, ...props }: WorkbenchBannerIconProps) {
+  return (
+    <span
+      className={cxCodicon(icon, 'ui-workbench-banner__icon', className)}
+      aria-hidden
+      {...props}
+    />
+  );
+}
+
+export type WorkbenchBannerMessageProps = ComponentPropsWithRef<'span'>;
+
+export function WorkbenchBannerMessage({ className, ...props }: WorkbenchBannerMessageProps) {
+  return <span className={cx('ui-workbench-banner__message', className)} {...props} />;
+}
+
+export type WorkbenchEditorFrameProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchEditorFrame({ className, ...props }: WorkbenchEditorFrameProps) {
+  return <div className={cx('ui-workbench-editor-frame', className)} {...props} />;
+}
+
+export type WorkbenchEditorBodyProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchEditorBody({ className, ...props }: WorkbenchEditorBodyProps) {
+  return <div className={cx('ui-workbench-editor-body', className)} {...props} />;
+}
+
+export type WorkbenchEditorViewportProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchEditorViewport({ className, ...props }: WorkbenchEditorViewportProps) {
+  return <div className={cx('ui-workbench-editor-viewport', className)} {...props} />;
+}
+
+export interface WorkbenchEditorBottomPanelProps extends ComponentPropsWithRef<'section'> {
+  height?: number | string;
+}
+
+export function WorkbenchEditorBottomPanel({
+  className,
+  height = 120,
+  style,
+  ...props
+}: WorkbenchEditorBottomPanelProps) {
+  const panelStyle = {
+    '--ui-workbench-editor-bottom-panel-height': toLengthValue(height),
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <section
+      className={cx('ui-workbench-editor-bottom-panel', className)}
+      style={panelStyle}
+      {...props}
+    />
+  );
+}
+
+export type WorkbenchEditorBottomPanelHeaderProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchEditorBottomPanelHeader({
+  className,
+  ...props
+}: WorkbenchEditorBottomPanelHeaderProps) {
+  return <div className={cx('ui-workbench-editor-bottom-panel__header', className)} {...props} />;
+}
+
+export type WorkbenchEditorBottomPanelTitleProps = ComponentPropsWithRef<'span'>;
+
+export function WorkbenchEditorBottomPanelTitle({
+  className,
+  ...props
+}: WorkbenchEditorBottomPanelTitleProps) {
+  return <span className={cx('ui-workbench-editor-bottom-panel__title', className)} {...props} />;
+}
+
+export type WorkbenchEditorBottomPanelBodyProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchEditorBottomPanelBody({
+  className,
+  ...props
+}: WorkbenchEditorBottomPanelBodyProps) {
+  return <div className={cx('ui-workbench-editor-bottom-panel__body', className)} {...props} />;
+}
+
+export type WorkbenchProblemSeverity = 'error' | 'info' | 'warning';
+
+export type WorkbenchProblemListProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchProblemList({ className, ...props }: WorkbenchProblemListProps) {
+  return <div className={cx('ui-workbench-problem-list', className)} {...props} />;
+}
+
+export interface WorkbenchProblemItemProps extends Omit<
+  ComponentPropsWithRef<'button'>,
+  'children'
+> {
+  location?: ReactNode;
+  message: ReactNode;
+  severity?: WorkbenchProblemSeverity;
+}
+
+export function WorkbenchProblemItem({
+  className,
+  location,
+  message,
+  severity = 'error',
+  type = 'button',
+  ...props
+}: WorkbenchProblemItemProps) {
+  return (
+    <button
+      className={cx('ui-workbench-problem-item', className)}
+      data-severity={severity}
+      type={type}
+      {...props}
+    >
+      {location ? <span className="ui-workbench-problem-item__location">{location}</span> : null}
+      <span className="ui-workbench-problem-item__message">{message}</span>
+    </button>
+  );
+}
+
+export type WorkbenchFloatingMenuAlign = 'end' | 'start';
+export type WorkbenchFloatingMenuPlacement = 'bottom' | 'top';
+
+export interface WorkbenchFloatingMenuProps extends ComponentPropsWithRef<'div'> {
+  align?: WorkbenchFloatingMenuAlign;
+  inset?: number | string;
+  offset?: number | string;
+  placement?: WorkbenchFloatingMenuPlacement;
+  width?: number | string;
+}
+
+export function WorkbenchFloatingMenu({
+  align = 'end',
+  className,
+  inset = 8,
+  offset = 28,
+  placement = 'top',
+  role = 'menu',
+  style,
+  width = 180,
+  ...props
+}: WorkbenchFloatingMenuProps) {
+  const menuStyle = {
+    '--ui-workbench-floating-menu-inset': toLengthValue(inset),
+    '--ui-workbench-floating-menu-offset': toLengthValue(offset),
+    '--ui-workbench-floating-menu-width': toLengthValue(width),
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <div
+      className={cx('ui-workbench-floating-menu', className)}
+      data-align={align}
+      data-placement={placement}
+      role={role}
+      style={menuStyle}
+      {...props}
+    />
+  );
+}
+
+export interface WorkbenchFloatingMenuItemProps extends Omit<
+  ComponentPropsWithRef<'button'>,
+  'children'
+> {
+  icon?: ReactNode | string;
+  label: ReactNode;
+  meta?: ReactNode;
+  selected?: boolean;
+}
+
+export function WorkbenchFloatingMenuItem({
+  className,
+  icon,
+  label,
+  meta,
+  role = 'menuitem',
+  selected = false,
+  type = 'button',
+  ...props
+}: WorkbenchFloatingMenuItemProps) {
+  const resolvedIcon = typeof icon === 'string' ? <i className={cxCodicon(icon)} /> : icon;
+
+  return (
+    <button
+      className={cx('ui-workbench-floating-menu__item', className)}
+      data-selected={selected ? 'true' : 'false'}
+      role={role}
+      type={type}
+      {...props}
+    >
+      <span className="ui-workbench-floating-menu__icon">{resolvedIcon}</span>
+      <span className="ui-workbench-floating-menu__label">{label}</span>
+      {meta ? <span className="ui-workbench-floating-menu__meta">{meta}</span> : null}
+    </button>
+  );
+}