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

package/src/workbench/settings/StructuredDataTableView.tsx

@@ -0,0 +1,127 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { EmptyState } from '../../primitives/EmptyState';
+import { ScrollArea } from '../../primitives/ScrollArea';
+import { cx } from '../../utils/cx';
+import {
+  getWorkbenchStructuredDataValue,
+  type WorkbenchStructuredDataRecord,
+  type WorkbenchStructuredDataTable,
+  type WorkbenchStructuredDataTableCellContext,
+  type WorkbenchStructuredDataTableColumn,
+} from './structuredDataSchema';
+
+export interface WorkbenchStructuredDataTableViewProps extends Omit<
+  ComponentPropsWithRef<'section'>,
+  'children'
+> {
+  table: WorkbenchStructuredDataTable;
+}
+
+export function buildWorkbenchStructuredDataTableFromRecords({
+  columns,
+  emptyLabel = 'No rows',
+  id = 'table',
+  label,
+  rows,
+}: {
+  columns: readonly string[];
+  emptyLabel?: ReactNode;
+  id?: string;
+  label?: ReactNode;
+  rows: readonly WorkbenchStructuredDataRecord[];
+}): WorkbenchStructuredDataTable {
+  return {
+    columns: columns.map((column) => ({
+      id: column,
+      label: column,
+      path: [column],
+    })),
+    emptyLabel,
+    id,
+    label,
+    rows: rows.map((data, index) => ({
+      data,
+      id: String(index),
+    })),
+  };
+}
+
+export function formatWorkbenchStructuredDataTableCell(value: unknown) {
+  if (value === undefined || value === null || value === '') return '-';
+  if (typeof value === 'boolean') return value ? 'Yes' : 'No';
+  if (Array.isArray(value)) return value.length === 0 ? '-' : value.join(', ');
+  return String(value);
+}
+
+function renderCell(
+  column: WorkbenchStructuredDataTableColumn,
+  context: WorkbenchStructuredDataTableCellContext,
+) {
+  return column.render?.(context) ?? formatWorkbenchStructuredDataTableCell(context.value);
+}
+
+export function WorkbenchStructuredDataTableView({
+  className,
+  table,
+  ...props
+}: WorkbenchStructuredDataTableViewProps) {
+  const hasHeader = Boolean(table.label || table.description);
+
+  return (
+    <section
+      className={cx(
+        'ui-workbench-structured-data-table-view',
+        hasHeader && 'ui-workbench-structured-data-table-view--with-header',
+        className,
+      )}
+      {...props}
+    >
+      {table.label ? (
+        <h3 className="ui-workbench-structured-data-table-view__label">{table.label}</h3>
+      ) : null}
+      {table.description ? (
+        <p className="ui-workbench-structured-data-table-view__description">{table.description}</p>
+      ) : null}
+      {table.rows.length === 0 ? (
+        <EmptyState compact icon="codicon-table">
+          {table.emptyLabel ?? 'No rows'}
+        </EmptyState>
+      ) : (
+        <ScrollArea
+          className="ui-workbench-structured-data-table-view__scroll"
+          gutter="auto"
+          orientation="both"
+        >
+          <table className="ui-workbench-structured-data-table-view__table">
+            <thead>
+              <tr>
+                {table.columns.map((column) => (
+                  <th key={column.id} data-align={column.align}>
+                    {column.label}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {table.rows.map((row) => (
+                <tr key={row.id}>
+                  {table.columns.map((column) => {
+                    const value = column.path
+                      ? getWorkbenchStructuredDataValue(row.data, column.path)
+                      : undefined;
+
+                    return (
+                      <td key={column.id} data-align={column.align}>
+                        {renderCell(column, { column, row, value })}
+                      </td>
+                    );
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </ScrollArea>
+      )}
+    </section>
+  );
+}

package/src/workbench/settings/WorkbenchPanelRegion.tsx

@@ -0,0 +1,46 @@
+import type { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+import { ScrollArea } from '../../primitives/ScrollArea';
+import { cx } from '../../utils/cx';
+
+type WorkbenchPanelRegionLayout = 'fill' | 'scroll';
+
+export interface WorkbenchPanelRegionProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+  as?: ElementType | undefined;
+  children: ReactNode;
+  layout?: WorkbenchPanelRegionLayout | undefined;
+}
+
+export function WorkbenchPanelRegion({
+  as,
+  children,
+  className,
+  layout = 'scroll',
+  ...props
+}: WorkbenchPanelRegionProps) {
+  const Component = (as ?? 'div') as ElementType;
+  const classNames = cx(
+    'ui-workbench-panel-region',
+    layout === 'fill' ? 'ui-workbench-panel-region--fill' : 'ui-workbench-panel-region--scroll',
+    className,
+  );
+
+  if (layout === 'scroll') {
+    return (
+      <ScrollArea
+        as={Component}
+        className={classNames}
+        orientation="vertical"
+        gutter="stable"
+        {...props}
+      >
+        {children}
+      </ScrollArea>
+    );
+  }
+
+  return (
+    <Component className={classNames} {...props}>
+      {children}
+    </Component>
+  );
+}

package/src/workbench/settings/WorkbenchSettingsModal.tsx

@@ -3,6 +3,7 @@ import { Modal } from '../../modal/Modal';
 import type { ModalProps } from '../../modal/Modal';
 import { TextInput } from '../../primitives/TextInput';
 import { cx } from '../../utils/cx';
+import { WorkbenchNavigationPanel } from './NavigationPanel';
 import { WorkbenchSettingsNav } from './WorkbenchSettingsNav';
 import type { WorkbenchSettingsCategory, WorkbenchSettingsScope } from './types';
 
@@ -129,6 +130,8 @@ export function WorkbenchSettingsModal({
       closeLabel={closeLabel}
       footer={footer}
       labelledBy={titleId}
+      maximizable
+      movable
       title={title}
       titleSuffix={titleSuffix}
       onClose={onClose}
@@ -170,19 +173,25 @@ export function WorkbenchSettingsModal({
         </div>
       ) : null}
 
-      <div className="workbench-settings-layout">
-        <WorkbenchSettingsNav
-          activeCategoryId={selectedCategoryId}
-          categories={categories}
-          onSelectCategory={handleSelectCategory}
-        />
-
-        <main className="workbench-settings-content">
-          {selectedCategory
+      <WorkbenchNavigationPanel
+        className="workbench-settings-layout"
+        content={
+          selectedCategory
             ? (renderCategory?.(selectedCategory) ?? selectedCategory.content ?? emptyContent)
-            : emptyContent}
-        </main>
-      </div>
+            : emptyContent
+        }
+        contentClassName="workbench-settings-content ui-workbench-scrollbar ui-scroll-area--stable-gutter"
+        nav={
+          <WorkbenchSettingsNav
+            activeCategoryId={selectedCategoryId}
+            categories={categories}
+            renderContainer={false}
+            onSelectCategory={handleSelectCategory}
+          />
+        }
+        navClassName="workbench-settings-sidebar ui-workbench-scrollbar"
+        navProps={{ 'aria-label': 'Settings categories' }}
+      />
     </Modal>
   );
 }

package/src/workbench/settings/WorkbenchSettingsNav.tsx

@@ -1,41 +1,57 @@
+import type { ComponentPropsWithRef } from 'react';
 import { cx } from '../../utils/cx';
 import type { WorkbenchSettingsCategory } from './types';
 
-export interface WorkbenchSettingsNavProps {
+export interface WorkbenchSettingsNavProps extends Omit<
+  ComponentPropsWithRef<'aside'>,
+  'children' | 'onSelect'
+> {
   activeCategoryId: string;
   categories: WorkbenchSettingsCategory[];
   ariaLabel?: string;
   onSelectCategory: (categoryId: string) => void;
+  renderContainer?: boolean | undefined;
 }
 
 export function WorkbenchSettingsNav({
   activeCategoryId,
   ariaLabel = 'Settings categories',
   categories,
+  className,
   onSelectCategory,
+  renderContainer = true,
+  ...props
 }: WorkbenchSettingsNavProps) {
-  return (
-    <aside className="workbench-settings-sidebar" aria-label={ariaLabel}>
-      {categories.map((category) => {
-        const isActive = category.id === activeCategoryId;
+  const items = categories.map((category) => {
+    const isActive = category.id === activeCategoryId;
+
+    return (
+      <button
+        key={category.id}
+        type="button"
+        className={cx(
+          'workbench-settings-nav-item',
+          isActive && 'workbench-settings-nav-item--active',
+        )}
+        aria-current={isActive ? 'page' : undefined}
+        disabled={category.disabled}
+        title={category.title}
+        onClick={() => onSelectCategory(category.id)}
+      >
+        {category.label}
+      </button>
+    );
+  });
 
-        return (
-          <button
-            key={category.id}
-            type="button"
-            className={cx(
-              'workbench-settings-nav-item',
-              isActive && 'workbench-settings-nav-item--active',
-            )}
-            aria-current={isActive ? 'page' : undefined}
-            disabled={category.disabled}
-            title={category.title}
-            onClick={() => onSelectCategory(category.id)}
-          >
-            {category.label}
-          </button>
-        );
-      })}
+  if (!renderContainer) return <>{items}</>;
+
+  return (
+    <aside
+      className={cx('workbench-settings-sidebar', 'ui-workbench-scrollbar', className)}
+      aria-label={ariaLabel}
+      {...props}
+    >
+      {items}
     </aside>
   );
 }

package/src/workbench/settings/index.ts

@@ -1,3 +1,138 @@
+export { WorkbenchPanelRegion } from './WorkbenchPanelRegion';
+export type { WorkbenchPanelRegionProps } from './WorkbenchPanelRegion';
+export { WorkbenchNavigationPanel } from './NavigationPanel';
+export type { WorkbenchNavigationPanelProps } from './NavigationPanel';
+export { WorkbenchSectionedPanel } from './SectionedPanel';
+export type { WorkbenchSectionedPanelItem, WorkbenchSectionedPanelProps } from './SectionedPanel';
+export { WorkbenchStructuredDataSchemaPanel } from './StructuredDataSchemaPanel';
+export type {
+  WorkbenchStructuredDataSchemaPanelClassNames,
+  WorkbenchStructuredDataSchemaPanelLabels,
+  WorkbenchStructuredDataSchemaPanelProps,
+} from './StructuredDataSchemaPanel';
+export { WorkbenchStructuredDataSchemaPanelEmbed } from './StructuredDataSchemaPanelEmbed';
+export type { WorkbenchStructuredDataSchemaPanelEmbedProps } from './StructuredDataSchemaPanelEmbed';
+export { WorkbenchStructuredDataSchemaPanelFrame } from './StructuredDataSchemaPanelFrame';
+export {
+  WorkbenchStructuredDataTableView,
+  buildWorkbenchStructuredDataTableFromRecords,
+  formatWorkbenchStructuredDataTableCell,
+} from './StructuredDataTableView';
+export type { WorkbenchStructuredDataTableViewProps } from './StructuredDataTableView';
+export type {
+  WorkbenchStructuredDataSchemaPanelFrameHeaderContent,
+  WorkbenchStructuredDataSchemaPanelFrameProps,
+} from './StructuredDataSchemaPanelFrame';
+export {
+  WorkbenchStructuredDataForm,
+  WorkbenchStructuredDataSchemaFieldInput,
+  WorkbenchStructuredDataTextArrayInput,
+  appendWorkbenchStructuredDataSchemaTableRow,
+  asWorkbenchStructuredDataRecord,
+  booleanWorkbenchStructuredDataSchemaFieldValue,
+  coerceWorkbenchStructuredDataFormFieldValue,
+  coerceWorkbenchStructuredDataSchemaFieldValue,
+  createWorkbenchStructuredDataSchemaDocumentEmptyRow,
+  createWorkbenchStructuredDataSchemaEmptyRow,
+  createWorkbenchStructuredDataSchemaDocumentSampleData,
+  createWorkbenchStructuredDataSchemaFallbackSection,
+  formatWorkbenchStructuredDataSchemaValue,
+  formatWorkbenchStructuredDataSchemaLabel,
+  getWorkbenchStructuredDataFormErrors,
+  getWorkbenchStructuredDataFormFieldDefaultValue,
+  getWorkbenchStructuredDataFormFieldError,
+  getWorkbenchStructuredDataFormFields,
+  getWorkbenchStructuredDataSchemaDocumentColumnDefinition,
+  getWorkbenchStructuredDataSchemaDocumentColumnLabel,
+  getWorkbenchStructuredDataSchemaDocumentFieldDefinition,
+  getWorkbenchStructuredDataSchemaDocumentFieldLabel,
+  getWorkbenchStructuredDataSchemaDocumentPanelData,
+  getWorkbenchStructuredDataSchemaDocumentSectionValue,
+  getWorkbenchStructuredDataSchemaDocumentSections,
+  getWorkbenchStructuredDataSchemaDocumentTableColumns,
+  getWorkbenchStructuredDataSchemaDocumentTableDefinition,
+  getWorkbenchStructuredDataSchemaFieldDataPath,
+  getWorkbenchStructuredDataSchemaFieldControl,
+  getWorkbenchStructuredDataSchemaFieldDefaultValue,
+  getWorkbenchStructuredDataSchemaFieldDescription,
+  getWorkbenchStructuredDataSchemaFieldDefinition,
+  getWorkbenchStructuredDataSchemaSectionAnchorId,
+  getWorkbenchStructuredDataSchemaSectionId,
+  getWorkbenchStructuredDataSchemaSectionPath,
+  getWorkbenchStructuredDataSchemaTableCellPath,
+  getWorkbenchStructuredDataSchemaTableColumns,
+  getWorkbenchStructuredDataSchemaTablePath,
+  getWorkbenchStructuredDataSchemaTableRowKey,
+  getWorkbenchStructuredDataSchemaTableRows,
+  getWorkbenchStructuredDataValue,
+  isWorkbenchStructuredDataFormSubmittable,
+  normalizeWorkbenchStructuredDataFormData,
+  removeWorkbenchStructuredDataSchemaTableRow,
+  setWorkbenchStructuredDataPathOrRootValue,
+  setWorkbenchStructuredDataValue,
+  slugWorkbenchStructuredDataSchemaAnchor,
+  stringifyWorkbenchStructuredDataSchemaFieldValue,
+} from './StructuredDataForm';
+export type {
+  WorkbenchStructuredDataFieldType,
+  WorkbenchStructuredDataFieldValue,
+  WorkbenchStructuredDataFormCancelContext,
+  WorkbenchStructuredDataFormCheckboxField,
+  WorkbenchStructuredDataFormErrors,
+  WorkbenchStructuredDataFormField,
+  WorkbenchStructuredDataFormFieldBase,
+  WorkbenchStructuredDataFormFieldChangeContext,
+  WorkbenchStructuredDataFormNumberField,
+  WorkbenchStructuredDataFormOption,
+  WorkbenchStructuredDataFormProps,
+  WorkbenchStructuredDataFormSection,
+  WorkbenchStructuredDataFormSelectField,
+  WorkbenchStructuredDataFormSubmitContext,
+  WorkbenchStructuredDataFormTextArrayField,
+  WorkbenchStructuredDataFormTextField,
+  WorkbenchStructuredDataTextArrayInputProps,
+  WorkbenchStructuredDataPath,
+  WorkbenchStructuredDataRecord,
+  WorkbenchStructuredDataSchemaDocument,
+  WorkbenchStructuredDataSchemaFieldControl,
+  WorkbenchStructuredDataSchemaFieldDefinition,
+  WorkbenchStructuredDataSchemaFieldInputProps,
+  WorkbenchStructuredDataSchemaSectionAliases,
+  WorkbenchStructuredDataSchemaSectionSummary,
+  WorkbenchStructuredDataSchemaTableColumnInput,
+  WorkbenchStructuredDataSchemaTableDefinition,
+  WorkbenchStructuredDataSchemaTableRowKeyInput,
+  WorkbenchStructuredDataTable,
+  WorkbenchStructuredDataTableCellContext,
+  WorkbenchStructuredDataTableColumn,
+  WorkbenchStructuredDataTableRow,
+} from './StructuredDataForm';
+export {
+  WorkbenchSchemaForm,
+  coerceWorkbenchSchemaFormFieldValue,
+  getWorkbenchSchemaFormErrors,
+  getWorkbenchSchemaFormFieldDefaultValue,
+  getWorkbenchSchemaFormFieldError,
+  isWorkbenchSchemaFormSubmittable,
+  normalizeWorkbenchSchemaFormValues,
+} from './SchemaForm';
+export type {
+  WorkbenchSchemaFormCancelContext,
+  WorkbenchSchemaFormCheckboxField,
+  WorkbenchSchemaFormErrors,
+  WorkbenchSchemaFormField,
+  WorkbenchSchemaFormFieldBase,
+  WorkbenchSchemaFormFieldChangeContext,
+  WorkbenchSchemaFormFieldType,
+  WorkbenchSchemaFormFieldValue,
+  WorkbenchSchemaFormNumberField,
+  WorkbenchSchemaFormOption,
+  WorkbenchSchemaFormProps,
+  WorkbenchSchemaFormSelectField,
+  WorkbenchSchemaFormSubmitContext,
+  WorkbenchSchemaFormTextField,
+  WorkbenchSchemaFormValues,
+} from './SchemaForm';
 export { WorkbenchSettingsModal } from './WorkbenchSettingsModal';
 export type { WorkbenchSettingsModalProps } from './WorkbenchSettingsModal';
 export { WorkbenchSettingsNav } from './WorkbenchSettingsNav';

package/src/workbench/settings/panel-region.css

@@ -0,0 +1,21 @@
+.ui-workbench-panel-region {
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+}
+
+.ui-workbench-panel-region--scroll {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+  padding: 18px 16px 28px;
+}
+
+.ui-workbench-panel-region--fill {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  align-content: stretch;
+  gap: 0;
+  overflow: hidden;
+  padding: 0;
+}

package/src/workbench/settings/sectionedPanelScrollSpy.ts

@@ -0,0 +1,143 @@
+export const WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_OFFSET = 24;
+export const WORKBENCH_SECTIONED_PANEL_SCROLL_THRESHOLD = 2;
+
+export interface WorkbenchSectionedPanelIntersectionEntry {
+  intersectionRatio: number;
+  isIntersecting: boolean;
+  target: { id: string };
+}
+
+export interface WorkbenchSectionedPanelScrollPosition {
+  anchorId: string;
+  top: number;
+}
+
+export function isWorkbenchSectionedPanelScrollable({
+  clientHeight,
+  scrollHeight,
+  threshold = WORKBENCH_SECTIONED_PANEL_SCROLL_THRESHOLD,
+}: {
+  clientHeight: number;
+  scrollHeight: number;
+  threshold?: number;
+}): boolean {
+  return scrollHeight > clientHeight + threshold;
+}
+
+export function isWorkbenchSectionedPanelAtScrollTop({
+  scrollTop,
+  topThreshold = WORKBENCH_SECTIONED_PANEL_SCROLL_THRESHOLD,
+}: {
+  scrollTop: number;
+  topThreshold?: number;
+}): boolean {
+  return scrollTop <= topThreshold;
+}
+
+export function isWorkbenchSectionedPanelAtScrollBottom({
+  bottomThreshold = WORKBENCH_SECTIONED_PANEL_SCROLL_THRESHOLD,
+  clientHeight,
+  scrollHeight,
+  scrollTop,
+}: {
+  bottomThreshold?: number;
+  clientHeight: number;
+  scrollHeight: number;
+  scrollTop: number;
+}): boolean {
+  return scrollTop + clientHeight >= scrollHeight - bottomThreshold;
+}
+
+export function resolveWorkbenchSectionedPanelActiveAnchorFromIntersection({
+  anchorOrder,
+  entries,
+  fallbackAnchorId,
+}: {
+  anchorOrder: readonly string[];
+  entries: readonly WorkbenchSectionedPanelIntersectionEntry[];
+  fallbackAnchorId?: string | undefined;
+}): string | undefined {
+  const intersectingAnchorIds = new Set(
+    entries
+      .filter((entry) => entry.isIntersecting && entry.target.id)
+      .map((entry) => entry.target.id),
+  );
+
+  if (intersectingAnchorIds.size === 0) {
+    return fallbackAnchorId;
+  }
+
+  let nextActive = fallbackAnchorId;
+
+  for (const anchorId of anchorOrder) {
+    if (intersectingAnchorIds.has(anchorId)) {
+      nextActive = anchorId;
+    }
+  }
+
+  return nextActive ?? fallbackAnchorId;
+}
+
+export function resolveWorkbenchSectionedPanelActiveAnchorFromScroll({
+  anchorOrder,
+  clientHeight,
+  fallbackAnchorId,
+  offset = WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_OFFSET,
+  scrollHeight,
+  scrollTop,
+  sectionPositions,
+}: {
+  anchorOrder: readonly string[];
+  clientHeight: number;
+  fallbackAnchorId?: string | undefined;
+  offset?: number;
+  scrollHeight: number;
+  scrollTop: number;
+  sectionPositions: readonly WorkbenchSectionedPanelScrollPosition[];
+}): string | undefined {
+  if (sectionPositions.length === 0) return fallbackAnchorId;
+
+  const firstAnchorId = anchorOrder[0];
+  const lastAnchorId = anchorOrder[anchorOrder.length - 1];
+
+  if (isWorkbenchSectionedPanelAtScrollTop({ scrollTop })) {
+    return firstAnchorId ?? fallbackAnchorId;
+  }
+
+  if (
+    isWorkbenchSectionedPanelAtScrollBottom({
+      clientHeight,
+      scrollHeight,
+      scrollTop,
+    })
+  ) {
+    return lastAnchorId ?? fallbackAnchorId;
+  }
+
+  const activeLine = scrollTop + offset;
+  let nextActive = fallbackAnchorId;
+
+  for (const section of sectionPositions) {
+    if (section.top <= activeLine) {
+      nextActive = section.anchorId;
+    }
+  }
+
+  return nextActive ?? fallbackAnchorId;
+}
+
+export function resolveWorkbenchSectionedPanelScrollTop({
+  offset = WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_OFFSET,
+  sectionTop,
+}: {
+  offset?: number;
+  sectionTop: number;
+}): number {
+  return Math.max(0, sectionTop - offset);
+}
+
+export function createWorkbenchSectionedPanelIntersectionRootMargin(
+  offset = WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_OFFSET,
+) {
+  return `-${offset}px 0px -55% 0px`;
+}