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

package/src/jdw/JdwPreview.tsx

@@ -0,0 +1,38 @@
+import type { WidgetRegistryContract } from '@workbench-kit/contracts';
+import { parseJsonWidgetData, type LayoutConstraints } from '@workbench-kit/jdw';
+
+import { WorkbenchParseError, WorkbenchRenderSurface } from '../layout/WorkbenchLayout.js';
+import { useRenderJdw } from './renderJdw.js';
+
+export interface JdwPreviewProps {
+  json: string;
+  registry?: WidgetRegistryContract<unknown> | undefined;
+  emptyLabel?: string | undefined;
+  className?: string | undefined;
+  layoutConstraints?: LayoutConstraints | undefined;
+}
+
+export function JdwPreview({
+  json,
+  registry,
+  emptyLabel = 'No render output.',
+  className,
+  layoutConstraints,
+}: JdwPreviewProps) {
+  const parsed = parseJsonWidgetData(json);
+  const renderOutput = useRenderJdw(json, { registry, emptyLabel, layoutConstraints });
+
+  if (parsed.parseError !== null) {
+    return (
+      <WorkbenchParseError role="alert" data-testid="jdw-preview-error">
+        {parsed.parseError}
+      </WorkbenchParseError>
+    );
+  }
+
+  return (
+    <WorkbenchRenderSurface className={className} data-testid="jdw-preview-output">
+      {renderOutput ?? emptyLabel}
+    </WorkbenchRenderSurface>
+  );
+}

package/src/jdw/JsonCodeEditorPane.tsx

@@ -0,0 +1,274 @@
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import type { WidgetJsonSchema } from '@workbench-kit/contracts';
+import type { OnMount } from '@monaco-editor/react';
+import type * as Monaco from 'monaco-editor';
+
+import { IconButton } from '../primitives/IconButton';
+import { ListEmptyState } from '../primitives/List';
+import {
+  WorkbenchEditorBody,
+  WorkbenchEditorBottomPanel,
+  WorkbenchEditorBottomPanelBody,
+  WorkbenchEditorBottomPanelHeader,
+  WorkbenchEditorBottomPanelTitle,
+  WorkbenchEditorFrame,
+  WorkbenchEditorViewport,
+  WorkbenchProblemItem,
+  WorkbenchProblemList,
+  type WorkbenchProblemSeverity,
+} from '../layout/WorkbenchLayoutBase';
+import {
+  StatusBar as WorkbenchStatusBar,
+  StatusBarItem as WorkbenchStatusBarItem,
+  StatusBarSection as WorkbenchStatusBarSection,
+} from '../workbench/StatusBar';
+import { WorkspaceEditor, type WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor';
+import type { WorkspaceFile } from '../workbench/workspace/types';
+
+interface JsonEditorProblem {
+  endColumn: number;
+  endLineNumber: number;
+  message: string;
+  severity: number;
+  startColumn: number;
+  startLineNumber: number;
+}
+
+function toWorkbenchProblemSeverity(severity: number): WorkbenchProblemSeverity {
+  if (severity === 8) return 'error';
+  if (severity === 4) return 'warning';
+  return 'info';
+}
+
+export interface JsonCodeEditorPaneProps {
+  documentParseError?: string | null | undefined;
+  file: WorkspaceFile;
+  jsonSchema?: WidgetJsonSchema | null | undefined;
+  onChange: (value: string) => void;
+  onEditorMount?: OnMount | undefined;
+  onSave?: (() => void) | undefined;
+  readOnly?: boolean | undefined;
+  showProblemsPanel?: boolean | undefined;
+  theme?: WorkspaceEditorTheme | undefined;
+  value: string;
+}
+
+export function JsonCodeEditorPane({
+  documentParseError = null,
+  file,
+  jsonSchema = null,
+  onChange,
+  onEditorMount,
+  onSave,
+  readOnly = false,
+  showProblemsPanel = true,
+  theme = 'dark',
+  value,
+}: JsonCodeEditorPaneProps) {
+  const editorRef = useRef<Monaco.editor.IStandaloneCodeEditor | null>(null);
+  const markerListenerRef = useRef<Monaco.IDisposable | null>(null);
+  const [monacoProblems, setMonacoProblems] = useState<JsonEditorProblem[]>([]);
+  const [showProblems, setShowProblems] = useState(false);
+
+  const problems = useMemo(() => {
+    if (!documentParseError) return monacoProblems;
+    return [
+      {
+        endColumn: 1,
+        endLineNumber: 1,
+        message: documentParseError,
+        severity: 8,
+        startColumn: 1,
+        startLineNumber: 1,
+      },
+      ...monacoProblems,
+    ];
+  }, [documentParseError, monacoProblems]);
+
+  const previousProblemCountRef = useRef(0);
+  useEffect(() => {
+    if (problems.length > previousProblemCountRef.current) {
+      setShowProblems(true);
+    }
+    previousProblemCountRef.current = problems.length;
+  }, [problems.length]);
+
+  useEffect(
+    () => () => {
+      markerListenerRef.current?.dispose();
+      markerListenerRef.current = null;
+    },
+    [],
+  );
+
+  const configureJsonSchema = (monaco: typeof Monaco, path: string) => {
+    if (!jsonSchema) return;
+
+    const jsonDefaults = (
+      monaco.languages.json as unknown as {
+        jsonDefaults?: { setDiagnosticsOptions: (options: unknown) => void };
+      }
+    ).jsonDefaults;
+    if (!jsonDefaults) return;
+
+    jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+      enableSchemaRequest: false,
+      schemas: [
+        {
+          uri: 'https://workbench-kit.dev/schemas/widget-document.schema.json',
+          fileMatch: [path],
+          schema: jsonSchema,
+        },
+      ],
+    });
+  };
+
+  const handleMount: OnMount = (editor, monaco) => {
+    editorRef.current = editor;
+    configureJsonSchema(monaco, file.path);
+    onEditorMount?.(editor, monaco);
+
+    if (onSave) {
+      editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+        onSave();
+      });
+    }
+
+    if (!showProblemsPanel) return;
+
+    markerListenerRef.current?.dispose();
+    markerListenerRef.current = null;
+
+    const model = editor.getModel();
+    if (!model) return;
+
+    const updateProblems = () => {
+      const markers = monaco.editor.getModelMarkers({ resource: model.uri });
+      setMonacoProblems(
+        markers.map((marker: Monaco.editor.IMarker) => ({
+          message: marker.message,
+          severity: marker.severity,
+          startLineNumber: marker.startLineNumber,
+          startColumn: marker.startColumn,
+          endLineNumber: marker.endLineNumber,
+          endColumn: marker.endColumn,
+        })),
+      );
+    };
+
+    updateProblems();
+    markerListenerRef.current = monaco.editor.onDidChangeMarkers(updateProblems);
+  };
+
+  const jumpToProblem = (problem: JsonEditorProblem) => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    editor.setPosition({ lineNumber: problem.startLineNumber, column: problem.startColumn });
+    editor.revealPositionInCenter({
+      lineNumber: problem.startLineNumber,
+      column: problem.startColumn,
+    });
+    editor.focus();
+  };
+
+  return (
+    <WorkbenchEditorFrame className="ui-json-code-editor-pane">
+      <WorkbenchEditorBody>
+        <WorkbenchEditorViewport className="ui-json-code-editor-pane__viewport">
+          <WorkspaceEditor
+            compact
+            file={file}
+            readOnly={readOnly}
+            showHeader={false}
+            theme={theme}
+            value={value}
+            onChange={onChange}
+            onEditorMount={handleMount}
+          />
+        </WorkbenchEditorViewport>
+      </WorkbenchEditorBody>
+
+      {showProblemsPanel && showProblems ? (
+        <WorkbenchEditorBottomPanel aria-label="Problems" height={120}>
+          <WorkbenchEditorBottomPanelHeader>
+            <WorkbenchEditorBottomPanelTitle>Problems</WorkbenchEditorBottomPanelTitle>
+            <IconButton
+              compact
+              icon="codicon-close"
+              label="Close problems"
+              onClick={() => setShowProblems(false)}
+            />
+          </WorkbenchEditorBottomPanelHeader>
+          <WorkbenchEditorBottomPanelBody>
+            <WorkbenchProblemList aria-label="JSON problems" role="list">
+              {problems.length === 0 ? (
+                <ListEmptyState>No problems have been detected.</ListEmptyState>
+              ) : (
+                problems.map((problem, index) => (
+                  <WorkbenchProblemItem
+                    key={`${problem.startLineNumber}:${problem.startColumn}:${index}`}
+                    location={`Line ${problem.startLineNumber}, Col ${problem.startColumn}:`}
+                    message={problem.message}
+                    severity={toWorkbenchProblemSeverity(problem.severity)}
+                    onClick={() => jumpToProblem(problem)}
+                  />
+                ))
+              )}
+            </WorkbenchProblemList>
+          </WorkbenchEditorBottomPanelBody>
+        </WorkbenchEditorBottomPanel>
+      ) : null}
+
+      {showProblemsPanel ? (
+        <WorkbenchStatusBar compact>
+          <WorkbenchStatusBarSection>
+            <WorkbenchStatusBarItem
+              active={showProblems}
+              icon={problems.length > 0 ? 'error' : 'check'}
+              status={problems.length > 0 ? 'failed' : 'completed'}
+              title="Toggle problems"
+              onClick={() => setShowProblems((current) => !current)}
+            >
+              {problems.length > 0 ? `${problems.length} Problems` : 'No Problems'}
+            </WorkbenchStatusBarItem>
+          </WorkbenchStatusBarSection>
+        </WorkbenchStatusBar>
+      ) : null}
+    </WorkbenchEditorFrame>
+  );
+}
+
+export interface JsonConfigValidationBannerProps {
+  canApply: boolean;
+  firstError?: ReactNode | undefined;
+  validationOk: boolean;
+}
+
+export function JsonConfigValidationBanner({
+  canApply,
+  firstError,
+  validationOk,
+}: JsonConfigValidationBannerProps) {
+  const tone = !validationOk ? 'warning' : canApply ? 'default' : 'default';
+  const icon = !validationOk ? 'codicon-error' : canApply ? 'codicon-check' : 'codicon-info';
+  const message = !validationOk
+    ? (firstError ?? 'Invalid JSON')
+    : canApply
+      ? 'Valid — unsaved changes'
+      : 'JSON valid';
+
+  return (
+    <div
+      className="ui-json-config-validation-banner"
+      data-can-apply={canApply ? 'true' : 'false'}
+      data-testid="json-config-validation-banner"
+      data-validation={validationOk ? 'valid' : 'invalid'}
+      data-tone={tone}
+      role="status"
+    >
+      <i className={`codicon ${icon}`} aria-hidden />
+      <span>{message}</span>
+    </div>
+  );
+}

package/src/jdw/builtins/renderBuiltinWidgetLeaf.tsx

@@ -0,0 +1,29 @@
+import { createElement, type CSSProperties, type ReactNode } from 'react';
+import type { GenericWidget } from '@workbench-kit/jdw';
+
+function readNumber(value: unknown): number | undefined {
+  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}
+
+function textStyle(widget: GenericWidget): CSSProperties {
+  return {
+    color: typeof widget.color === 'string' ? widget.color : undefined,
+    background: typeof widget.background === 'string' ? widget.background : undefined,
+    fontSize: readNumber(widget.fontSize),
+  };
+}
+
+export function renderBuiltinWidgetLeaf(widget: GenericWidget): ReactNode {
+  if (widget.type === 'text') {
+    return createElement(
+      'span',
+      {
+        'data-widget-type': 'text',
+        style: textStyle(widget),
+      },
+      String(widget.text ?? ''),
+    );
+  }
+
+  return null;
+}

package/src/jdw/builtins/renderBuiltinWidgetNode.tsx

@@ -0,0 +1,126 @@
+import { createElement, type CSSProperties, type ReactNode } from 'react';
+import { getWidgetChildren, type GenericWidget } from '@workbench-kit/jdw';
+
+import { renderBuiltinWidgetLeaf } from './renderBuiltinWidgetLeaf.js';
+
+const LAYOUT_TYPES = new Set(['row', 'column', 'grid']);
+
+function readNumber(value: unknown): number | undefined {
+  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}
+
+function layoutContainerStyle(widget: GenericWidget): CSSProperties {
+  const gap = readNumber(widget.gap) ?? 8;
+  const padding = readNumber(widget.padding) ?? 0;
+  const background =
+    typeof widget.background === 'string' && widget.background.trim().length > 0
+      ? widget.background
+      : undefined;
+
+  if (widget.type === 'row') {
+    return {
+      display: 'flex',
+      flexDirection: 'row',
+      gap,
+      padding,
+      background,
+      alignItems: 'stretch',
+      minHeight: 24,
+    };
+  }
+
+  if (widget.type === 'column') {
+    return {
+      display: 'flex',
+      flexDirection: 'column',
+      gap,
+      padding,
+      background,
+      alignItems: 'stretch',
+      minHeight: 24,
+    };
+  }
+
+  if (widget.type === 'grid') {
+    const columns = readNumber(widget.columns) ?? 2;
+    return {
+      display: 'grid',
+      gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))`,
+      gap,
+      padding,
+      background,
+      minHeight: 24,
+    };
+  }
+
+  return {};
+}
+
+function childPlacementStyle(child: GenericWidget, parentType: string): CSSProperties {
+  if (parentType === 'grid') {
+    const col = readNumber(child.col);
+    const row = readNumber(child.row);
+    const colSpan = readNumber(child.colSpan);
+    const rowSpan = readNumber(child.rowSpan);
+
+    return {
+      gridColumn:
+        col !== undefined
+          ? colSpan !== undefined
+            ? `${col + 1} / span ${colSpan}`
+            : `${col + 1}`
+          : undefined,
+      gridRow:
+        row !== undefined
+          ? rowSpan !== undefined
+            ? `${row + 1} / span ${rowSpan}`
+            : `${row + 1}`
+          : undefined,
+      minWidth: 0,
+    };
+  }
+
+  if (parentType === 'row' || parentType === 'column') {
+    const flex = readNumber(child.flex);
+    const align = typeof child.align === 'string' ? child.align : undefined;
+
+    return {
+      flex: flex !== undefined ? flex : undefined,
+      alignSelf: align,
+      minWidth: 0,
+    };
+  }
+
+  return {};
+}
+
+export function renderBuiltinWidgetNode(widget: GenericWidget): ReactNode {
+  const leaf = renderBuiltinWidgetLeaf(widget);
+  if (leaf !== null) {
+    return leaf;
+  }
+
+  if (LAYOUT_TYPES.has(widget.type)) {
+    const children = getWidgetChildren(widget);
+    return createElement(
+      'div',
+      {
+        'data-widget-type': widget.type,
+        style: layoutContainerStyle(widget),
+      },
+      children.map((child, index) =>
+        createElement(
+          'div',
+          {
+            key: index,
+            'data-widget-child': true,
+            style: childPlacementStyle(child, widget.type),
+          },
+          renderBuiltinWidgetNode(child),
+        ),
+      ),
+    );
+  }
+
+  return null;
+}

package/src/jdw/createBuiltinJdwRegistry.ts

@@ -0,0 +1,111 @@
+import type { WidgetRegistryContract, WidgetTypeShape } from '@workbench-kit/contracts';
+import { createWidgetRegistry, type GenericWidget } from '@workbench-kit/jdw';
+
+import { renderBuiltinWidgetNode } from './builtins/renderBuiltinWidgetNode.js';
+
+const LAYOUT_INSPECTOR = [
+  {
+    title: 'Layout',
+    fields: [
+      { kind: 'number' as const, prop: 'gap', label: 'Gap', min: 0 },
+      { kind: 'number' as const, prop: 'padding', label: 'Padding', min: 0 },
+      { kind: 'color' as const, prop: 'background', label: 'Background' },
+    ],
+  },
+];
+
+function build(widget: WidgetTypeShape) {
+  return renderBuiltinWidgetNode(widget as GenericWidget);
+}
+
+/** workbench-jdw-react-v1 builtin widget registry (text, row, column, grid). */
+export function createBuiltinJdwRegistry(): WidgetRegistryContract<unknown> {
+  return createWidgetRegistry([
+    {
+      type: 'text',
+      build,
+      displayName: 'Text',
+      schema: {
+        type: 'object',
+        required: ['text'],
+        properties: {
+          text: { type: 'string' },
+          color: { type: 'string' },
+          background: { type: 'string' },
+          fontSize: { type: 'number' },
+        },
+      },
+      inspector: [
+        {
+          title: 'Text',
+          fields: [
+            { kind: 'text', prop: 'text', label: 'Content' },
+            { kind: 'color', prop: 'color', label: 'Color' },
+            { kind: 'number', prop: 'fontSize', label: 'Font size', min: 8, max: 96 },
+          ],
+        },
+      ],
+    },
+    {
+      type: 'row',
+      build,
+      displayName: 'Row',
+      schema: {
+        type: 'object',
+        properties: {
+          gap: { type: 'number', minimum: 0 },
+          padding: { type: 'number', minimum: 0 },
+          background: { type: 'string' },
+          children: { type: 'array' },
+        },
+      },
+      inspector: LAYOUT_INSPECTOR,
+      capabilities: ['container'],
+    },
+    {
+      type: 'column',
+      build,
+      displayName: 'Column',
+      schema: {
+        type: 'object',
+        properties: {
+          gap: { type: 'number', minimum: 0 },
+          padding: { type: 'number', minimum: 0 },
+          background: { type: 'string' },
+          children: { type: 'array' },
+        },
+      },
+      inspector: LAYOUT_INSPECTOR,
+      capabilities: ['container'],
+    },
+    {
+      type: 'grid',
+      build,
+      displayName: 'Grid',
+      schema: {
+        type: 'object',
+        properties: {
+          columns: { type: 'number', minimum: 1 },
+          gap: { type: 'number', minimum: 0 },
+          padding: { type: 'number', minimum: 0 },
+          background: { type: 'string' },
+          children: { type: 'array' },
+        },
+      },
+      inspector: [
+        {
+          title: 'Grid',
+          fields: [
+            { kind: 'number', prop: 'columns', label: 'Columns', min: 1, max: 12 },
+            { kind: 'number', prop: 'gap', label: 'Gap', min: 0 },
+            { kind: 'number', prop: 'padding', label: 'Padding', min: 0 },
+            { kind: 'color', prop: 'background', label: 'Background' },
+          ],
+        },
+      ],
+      capabilities: ['container'],
+    },
+  ]);
+}
+
+export const BUILTIN_JDW_REGISTRY = createBuiltinJdwRegistry();