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

package/src/json-config/JsonConfigWorkbench.tsx

@@ -0,0 +1,316 @@
+import { useMemo, useState, type ReactNode } from 'react';
+import type { WidgetRegistryContract } from '@workbench-kit/contracts';
+import { parseJsonWidgetData } from '@workbench-kit/jdw';
+
+import { Panel, PanelBody, PanelHeader } from '../layout/Panel';
+import { EmptyState } from '../primitives/EmptyState';
+import { Button } from '../primitives/Button';
+import { IconButton } from '../primitives/IconButton';
+import { Toolbar } from '../primitives/Toolbar';
+import { JsonCodeEditorPane, JsonConfigValidationBanner } from '../jdw/JsonCodeEditorPane.js';
+import { JdwPreview } from '../jdw/JdwPreview.js';
+import { SplitView } from '../workbench/SplitView';
+import { WorkbenchStructuredDataSchemaPanel } from '../workbench/settings/StructuredDataSchemaPanel';
+import { type WorkbenchStructuredDataSchemaDocument } from '../workbench/settings/StructuredDataForm';
+import { type WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor';
+import { type WorkspaceFile } from '../workbench/workspace/types';
+import { createJsonConfigEditorState } from './json-config-editor-state.js';
+
+export type JsonConfigPreviewKind = 'auto' | 'none' | 'schema' | 'widget';
+export type JsonConfigWorkbenchMode = 'code' | 'form' | 'preview';
+type JsonConfigWorkbenchModeInput = JsonConfigWorkbenchMode | 'split';
+
+export interface JsonConfigWorkbenchProps {
+  activePattern?: string | undefined;
+  baselineValue?: string | undefined;
+  defaultMode?: JsonConfigWorkbenchModeInput | undefined;
+  emptyPreviewLabel?: ReactNode | undefined;
+  headerActions?: ReactNode | undefined;
+  mode?: JsonConfigWorkbenchModeInput | undefined;
+  onChange: (value: string) => void;
+  onApply?: (() => void) | undefined;
+  onDiscard?: (() => void) | undefined;
+  onModeChange?: ((mode: JsonConfigWorkbenchMode) => void) | undefined;
+  onSave?: (() => void) | undefined;
+  path?: string | undefined;
+  preferredTableColumns?: readonly string[] | undefined;
+  previewKind?: JsonConfigPreviewKind | undefined;
+  readOnly?: boolean | undefined;
+  schema?: WorkbenchStructuredDataSchemaDocument | null | undefined;
+  sectionValueAliases?: Record<string, readonly (string | number)[][]> | undefined;
+  theme?: WorkspaceEditorTheme | undefined;
+  title?: ReactNode | undefined;
+  titleFallback?: string | undefined;
+  value: string;
+  widgetRegistry?: WidgetRegistryContract<unknown> | undefined;
+}
+
+const defaultDeserialize = (content: string) => {
+  if (!content.trim()) return null;
+  return JSON.parse(content);
+};
+
+const defaultSerialize = (data: unknown) => JSON.stringify(data, null, 2);
+
+export function resolveJsonConfigPreviewKind(
+  previewKind: JsonConfigPreviewKind,
+  _schema: WorkbenchStructuredDataSchemaDocument | null | undefined,
+  json: string,
+): 'none' | 'widget' {
+  if (previewKind === 'none') return 'none';
+  if (previewKind === 'schema') return 'none';
+  if (previewKind === 'widget') return 'widget';
+
+  const parsed = parseJsonWidgetData(json);
+  if (parsed.value !== null) {
+    return 'widget';
+  }
+
+  return 'none';
+}
+
+export function JsonConfigWorkbench({
+  activePattern,
+  baselineValue,
+  defaultMode = 'form',
+  emptyPreviewLabel = 'No preview available for this document.',
+  headerActions,
+  mode,
+  onChange,
+  onApply,
+  onDiscard,
+  onModeChange,
+  onSave,
+  path = 'config.json',
+  preferredTableColumns,
+  previewKind = 'auto',
+  readOnly = false,
+  schema,
+  sectionValueAliases,
+  theme = 'dark',
+  title = 'Configuration',
+  titleFallback,
+  value,
+  widgetRegistry,
+}: JsonConfigWorkbenchProps) {
+  const formAvailable = schema !== null && schema !== undefined;
+  const [uncontrolledMode, setUncontrolledMode] =
+    useState<JsonConfigWorkbenchModeInput>(defaultMode);
+  const resolvedMode = normalizeJsonConfigWorkbenchMode(mode ?? uncontrolledMode, formAvailable);
+
+  const setMode = (nextMode: JsonConfigWorkbenchMode) => {
+    if (mode === undefined) {
+      setUncontrolledMode(nextMode);
+    }
+    onModeChange?.(nextMode);
+  };
+
+  const dirty = baselineValue !== undefined && value !== baselineValue;
+  const editorState = useMemo(
+    () =>
+      createJsonConfigEditorState({
+        baselineValue: baselineValue ?? value,
+        currentValue: value,
+      }),
+    [baselineValue, value],
+  );
+  const resolvedPreviewKind = resolveJsonConfigPreviewKind(previewKind, schema, value);
+
+  const structuredData = useMemo(() => {
+    try {
+      return defaultDeserialize(value);
+    } catch {
+      return null;
+    }
+  }, [value]);
+
+  const editorFile = useMemo<WorkspaceFile>(
+    () => ({
+      content: value,
+      mimeType: 'application/json',
+      path,
+    }),
+    [path, value],
+  );
+
+  const handleDataChange = (nextData: unknown) => {
+    try {
+      onChange(defaultSerialize(nextData));
+    } catch {
+      // ignore serialization failures during active input
+    }
+  };
+
+  const codePane = (
+    <JsonCodeEditorPane
+      file={editorFile}
+      readOnly={readOnly}
+      showProblemsPanel
+      theme={theme}
+      value={value}
+      onChange={onChange}
+      onSave={onSave}
+    />
+  );
+
+  const formPane = formAvailable ? (
+    <div className="ui-json-config-workbench__form">
+      <WorkbenchStructuredDataSchemaPanel
+        activePattern={activePattern}
+        ariaLabel="Configuration form"
+        data={structuredData}
+        fill
+        preferredTableColumns={preferredTableColumns}
+        readOnly={readOnly}
+        schema={schema}
+        sectionValueAliases={sectionValueAliases}
+        titleFallback={titleFallback ?? path}
+        onDataChange={handleDataChange}
+      />
+    </div>
+  ) : (
+    <EmptyState compact icon="codicon-settings">
+      No form is available for this document.
+    </EmptyState>
+  );
+
+  const previewPane = (() => {
+    if (resolvedPreviewKind === 'widget') {
+      return (
+        <div className="ui-json-config-workbench__preview">
+          <JdwPreview json={value} registry={widgetRegistry} />
+        </div>
+      );
+    }
+
+    return (
+      <EmptyState compact icon="codicon-open-preview">
+        {emptyPreviewLabel}
+      </EmptyState>
+    );
+  })();
+
+  return (
+    <Panel className="ui-json-config-workbench" data-theme={theme} data-mode={resolvedMode}>
+      <PanelHeader
+        actions={
+          <Toolbar>
+            {editorState.canApply && onApply ? (
+              <Button variant="primary" onClick={onApply}>
+                Apply
+              </Button>
+            ) : null}
+            {dirty && !readOnly ? (
+              <>
+                {onDiscard ? <Button onClick={onDiscard}>Discard</Button> : null}
+                {onSave ? (
+                  <Button variant="primary" onClick={onSave}>
+                    Save
+                  </Button>
+                ) : null}
+              </>
+            ) : null}
+            {headerActions}
+            <JsonConfigModeControls
+              formAvailable={formAvailable}
+              mode={resolvedMode}
+              onModeChange={setMode}
+            />
+          </Toolbar>
+        }
+      >
+        <span className="ui-json-config-workbench__title">
+          {title}
+          {dirty ? (
+            <span className="ui-json-config-workbench__dirty-indicator" title="Unsaved changes">
+              ●
+            </span>
+          ) : null}
+        </span>
+      </PanelHeader>
+      <PanelBody className="ui-json-config-workbench__body">
+        {!editorState.validationOk || editorState.canApply ? (
+          <JsonConfigValidationBanner
+            canApply={editorState.canApply}
+            firstError={editorState.firstError}
+            validationOk={editorState.validationOk}
+          />
+        ) : null}
+        {resolvedMode === 'preview' ? (
+          <section className="ui-json-config-workbench__pane" aria-label="Preview">
+            {previewPane}
+          </section>
+        ) : (
+          <SplitView
+            className="ui-json-config-workbench__split"
+            defaultPrimarySizePercent={50}
+            minPrimarySizePercent={20}
+            primary={
+              <section
+                className="ui-json-config-workbench__pane"
+                aria-label={resolvedMode === 'form' ? 'Form' : 'Code JSON'}
+              >
+                {resolvedMode === 'form' ? formPane : codePane}
+              </section>
+            }
+            secondary={
+              <section className="ui-json-config-workbench__pane" aria-label="Preview">
+                {previewPane}
+              </section>
+            }
+          />
+        )}
+      </PanelBody>
+    </Panel>
+  );
+}
+
+function normalizeJsonConfigWorkbenchMode(
+  mode: JsonConfigWorkbenchModeInput,
+  formAvailable: boolean,
+): JsonConfigWorkbenchMode {
+  const normalized = mode === 'split' ? 'code' : mode;
+  if (normalized === 'form' && !formAvailable) {
+    return 'code';
+  }
+
+  return normalized;
+}
+
+function JsonConfigModeControls({
+  formAvailable,
+  mode,
+  onModeChange,
+}: {
+  formAvailable: boolean;
+  mode: JsonConfigWorkbenchMode;
+  onModeChange: (mode: JsonConfigWorkbenchMode) => void;
+}) {
+  return (
+    <div className="ui-json-config-workbench__modes">
+      <IconButton
+        aria-pressed={mode === 'code'}
+        className="ui-json-config-workbench__mode"
+        icon="codicon-code"
+        label="Code (JSON)"
+        onClick={() => onModeChange('code')}
+      />
+      {formAvailable ? (
+        <IconButton
+          aria-pressed={mode === 'form'}
+          className="ui-json-config-workbench__mode"
+          icon="codicon-settings"
+          label="Form"
+          onClick={() => onModeChange('form')}
+        />
+      ) : null}
+      <IconButton
+        aria-pressed={mode === 'preview'}
+        className="ui-json-config-workbench__mode"
+        icon="codicon-open-preview"
+        label="Preview"
+        onClick={() => onModeChange('preview')}
+      />
+    </div>
+  );
+}

package/src/json-config/index.ts

@@ -0,0 +1,6 @@
+export { JsonConfigWorkbench, resolveJsonConfigPreviewKind } from './JsonConfigWorkbench.js';
+export type {
+  JsonConfigPreviewKind,
+  JsonConfigWorkbenchMode,
+  JsonConfigWorkbenchProps,
+} from './JsonConfigWorkbench.js';

package/src/json-config/json-config-editor-state.ts

@@ -0,0 +1,42 @@
+export type JsonConfigValidationState = 'invalid' | 'unchanged' | 'valid-changed';
+
+export interface JsonConfigEditorState {
+  canApply: boolean;
+  firstError: string | null;
+  textDirty: boolean;
+  validationOk: boolean;
+  validationState: JsonConfigValidationState;
+}
+
+export function createJsonConfigEditorState(input: {
+  baselineValue: string;
+  currentValue: string;
+}): JsonConfigEditorState {
+  const textDirty = input.currentValue !== input.baselineValue;
+  let validationOk = true;
+  let firstError: string | null = null;
+
+  if (input.currentValue.trim().length > 0) {
+    try {
+      JSON.parse(input.currentValue);
+    } catch (error) {
+      validationOk = false;
+      firstError = error instanceof Error ? error.message : 'Invalid JSON';
+    }
+  }
+
+  const canApply = textDirty && validationOk;
+  const validationState: JsonConfigValidationState = !validationOk
+    ? 'invalid'
+    : textDirty
+      ? 'valid-changed'
+      : 'unchanged';
+
+  return {
+    canApply,
+    firstError,
+    textDirty,
+    validationOk,
+    validationState,
+  };
+}

package/src/layout/Panel.tsx

@@ -1,4 +1,5 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { ScrollArea } from '../primitives/ScrollArea';
 import { cx } from '../utils/cx';
 
 export type PanelProps = ComponentPropsWithRef<'div'>;
@@ -23,5 +24,149 @@ export function PanelHeader({ actions, children, className, ...props }: PanelHea
 export type PanelBodyProps = ComponentPropsWithRef<'div'>;
 
 export function PanelBody({ className, ...props }: PanelBodyProps) {
-  return <div className={cx('panel-body', className)} {...props} />;
+  return (
+    <ScrollArea
+      className={cx('panel-body', 'ui-panel-body', className)}
+      orientation="both"
+      {...props}
+    />
+  );
+}
+
+export type PanelFooterProps = ComponentPropsWithRef<'div'>;
+
+export function PanelFooter({ className, ...props }: PanelFooterProps) {
+  return <div className={cx('ui-panel-footer', className)} {...props} />;
+}
+
+export type FilterBarProps = ComponentPropsWithRef<'div'>;
+
+export function FilterBar({ className, ...props }: FilterBarProps) {
+  return <div className={cx('ui-filter-bar', className)} {...props} />;
+}
+
+export type FilterBarRowProps = ComponentPropsWithRef<'div'>;
+
+export function FilterBarRow({ className, ...props }: FilterBarRowProps) {
+  return <div className={cx('ui-filter-bar__row', className)} {...props} />;
+}
+
+export interface FilterChipProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
+  count?: number | undefined;
+  label: ReactNode;
+  onDismiss?: (() => void) | undefined;
+}
+
+export function FilterChip({
+  className,
+  count,
+  label,
+  onDismiss,
+  type = 'button',
+  ...props
+}: FilterChipProps) {
+  return (
+    <button className={cx('ui-filter-chip', className)} type={type} {...props}>
+      <span className="ui-filter-chip__label">{label}</span>
+      {count !== undefined ? <span className="ui-filter-chip__count">{count}</span> : null}
+      {onDismiss ? (
+        <span
+          aria-hidden={true}
+          className="ui-filter-chip__dismiss"
+          onClick={(event) => {
+            event.stopPropagation();
+            onDismiss();
+          }}
+        >
+          <i className="codicon codicon-close" />
+        </span>
+      ) : null}
+    </button>
+  );
+}
+
+export interface FilterBarActiveChipsProps extends ComponentPropsWithRef<'div'> {
+  clearAllLabel?: string | undefined;
+  onClearAll?: (() => void) | undefined;
+}
+
+export function FilterBarActiveChips({
+  children,
+  className,
+  clearAllLabel = 'Clear all',
+  onClearAll,
+  ...props
+}: FilterBarActiveChipsProps) {
+  return (
+    <FilterBarRow className={cx('ui-filter-bar__active-chips', className)} {...props}>
+      <div className="ui-filter-bar__chip-list" role="list">
+        {children}
+      </div>
+      {onClearAll ? (
+        <button className="ui-filter-bar__clear-all" type="button" onClick={onClearAll}>
+          {clearAllLabel}
+        </button>
+      ) : null}
+    </FilterBarRow>
+  );
+}
+
+export interface HelpTextProps extends ComponentPropsWithRef<'div'> {
+  tone?: 'error' | 'normal';
+}
+
+export function HelpText({ className, tone = 'normal', ...props }: HelpTextProps) {
+  return (
+    <div
+      className={cx('ui-help-text', tone === 'error' && 'ui-help-text--error', className)}
+      {...props}
+    />
+  );
+}
+
+export type PreviewPaneProps = ComponentPropsWithRef<'div'>;
+
+export function PreviewPane({ className, ...props }: PreviewPaneProps) {
+  return <div className={cx('ui-preview-pane', className)} {...props} />;
+}
+
+export type PreviewPaneContentProps = ComponentPropsWithRef<'div'>;
+
+export function PreviewPaneContent({ className, ...props }: PreviewPaneContentProps) {
+  return <div className={cx('ui-preview-pane__content', className)} {...props} />;
+}
+
+export type PreviewPaneViewportProps = ComponentPropsWithRef<'div'>;
+
+export function PreviewPaneViewport({ className, ...props }: PreviewPaneViewportProps) {
+  return <div className={cx('ui-preview-pane__viewport', className)} {...props} />;
+}
+
+export type PreviewPaneDetailsProps = ComponentPropsWithRef<'div'>;
+
+export function PreviewPaneDetails({ className, ...props }: PreviewPaneDetailsProps) {
+  return <div className={cx('ui-preview-pane__details', className)} {...props} />;
+}
+
+export type PreviewPaneTitleProps = ComponentPropsWithRef<'div'>;
+
+export function PreviewPaneTitle({ className, ...props }: PreviewPaneTitleProps) {
+  return <div className={cx('ui-preview-pane__title', className)} {...props} />;
+}
+
+export interface PreviewPaneTextProps extends ComponentPropsWithRef<'div'> {
+  tone?: 'error' | 'normal';
+}
+
+export function PreviewPaneText({ className, tone = 'normal', ...props }: PreviewPaneTextProps) {
+  return (
+    <div
+      className={cx(
+        'ui-preview-pane__text',
+        tone === 'error' && 'ui-preview-pane__text--error',
+        className,
+      )}
+      {...props}
+    />
+  );
 }