@workbench-kit/jdw-editor 0.0.1-prototype.0

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@workbench-kit/jdw-editor",
+  "version": "0.0.1-prototype.0",
+  "private": false,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "files": [
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/**/*.stories.ts",
+    "!src/**/*.stories.tsx"
+  ],
+  "dependencies": {
+    "@workbench-kit/jdw": "0.0.1-prototype.0",
+    "@workbench-kit/react": "0.0.1-prototype.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "description": "React editor UI for JDW screen specs and live compile preview pipelines.",
+  "publishConfig": {
+    "access": "public",
+    "tag": "prototype",
+    "provenance": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NewChoBo/workbench-kit.git",
+    "directory": "packages/jdw-editor"
+  },
+  "scripts": {
+    "test": "pnpm exec vitest run --config ../../vitest.config.ts src",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}

package/src/JdwSampleScreenExplorer.tsx

@@ -0,0 +1,181 @@
+import { useEffect, useState } from 'react';
+
+import { compileScreenSpecText } from '@workbench-kit/jdw';
+import { JdwPreview } from '@workbench-kit/react/jdw/preview';
+import {
+  JDW_SAMPLE_SCREENS,
+  formatJdwSampleScreenSpec,
+  type JdwSampleScreenDefinition,
+} from '@workbench-kit/react/jdw/samples';
+import {
+  Field,
+  Panel,
+  PanelBody,
+  PanelHeader,
+  Select,
+  SegmentedControl,
+  WorkbenchParseError,
+} from '@workbench-kit/react/primitives';
+import { SplitView } from '@workbench-kit/react/workbench/shell';
+
+import { ScreenSpecEditor } from './ScreenSpecEditor.js';
+import { useScreenSpecPipeline } from './useScreenSpecPipeline.js';
+
+export type JdwSampleSourceView = 'editor' | 'jdw';
+
+export interface JdwSampleScreenExplorerProps {
+  readonly samples?: readonly JdwSampleScreenDefinition[] | undefined;
+  readonly initialSampleId?: string | undefined;
+  readonly initialSourceView?: JdwSampleSourceView | undefined;
+}
+
+function resolveSample(
+  samples: readonly JdwSampleScreenDefinition[],
+  sampleId: string,
+): JdwSampleScreenDefinition {
+  return samples.find((entry) => entry.id === sampleId) ?? samples[0]!;
+}
+
+const SOURCE_VIEW_OPTIONS = [
+  { label: 'Screen editor', testId: 'jdw-sample-source-editor', value: 'editor' as const },
+  { label: 'JDW JSON', testId: 'jdw-sample-source-jdw', value: 'jdw' as const },
+];
+
+export function JdwSampleScreenExplorer({
+  samples = JDW_SAMPLE_SCREENS,
+  initialSampleId,
+  initialSourceView = 'editor',
+}: JdwSampleScreenExplorerProps) {
+  const [sampleId, setSampleId] = useState(initialSampleId ?? samples[0]?.id ?? '');
+  const [sourceView, setSourceView] = useState<JdwSampleSourceView>(initialSourceView);
+  const activeSample = resolveSample(samples, sampleId);
+  const pipeline = useScreenSpecPipeline(activeSample);
+  const { resetSpec } = pipeline;
+  const [editorError, setEditorError] = useState<string | null>(null);
+
+  useEffect(() => {
+    resetSpec(resolveSample(samples, sampleId));
+    setEditorError(null);
+  }, [resetSpec, sampleId, samples]);
+
+  if (samples.length === 0) {
+    return <div data-testid="jdw-sample-explorer-empty">No sample screens configured.</div>;
+  }
+
+  const compileError = pipeline.compileError ?? editorError;
+
+  const handleSourceViewChange = (nextView: JdwSampleSourceView) => {
+    if (nextView === 'jdw') {
+      const compiled = compileScreenSpecText(formatJdwSampleScreenSpec(pipeline.spec));
+      if (compiled.json) {
+        pipeline.setJson(compiled.json);
+      }
+    }
+    setSourceView(nextView);
+  };
+
+  return (
+    <div className="jdw-sample-explorer" data-testid="jdw-sample-explorer">
+      <Panel
+        className="jdw-sample-explorer__panel"
+        style={{ display: 'flex', flexDirection: 'column', minHeight: 0, flex: 1 }}
+      >
+        <PanelHeader
+          actions={
+            <div className="jdw-sample-explorer__header-actions">
+              <SegmentedControl
+                ariaLabel="Source view"
+                options={SOURCE_VIEW_OPTIONS}
+                value={sourceView}
+                onChange={handleSourceViewChange}
+              />
+              <Field label="Sample screen" htmlFor="jdw-sample-screen-select" inline>
+                <Select
+                  id="jdw-sample-screen-select"
+                  aria-label="Sample screen"
+                  data-testid="jdw-sample-screen-select"
+                  controlWidth="wide"
+                  value={activeSample.id}
+                  onValueChange={setSampleId}
+                >
+                  {samples.map((sample) => (
+                    <option key={sample.id} value={sample.id}>
+                      {sample.title}
+                    </option>
+                  ))}
+                </Select>
+              </Field>
+            </div>
+          }
+        >
+          JDW Sample Explorer
+        </PanelHeader>
+        <PanelBody
+          className="jdw-sample-explorer__body"
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 8,
+            minHeight: 0,
+            flex: 1,
+            paddingTop: 0,
+          }}
+        >
+          <p className="jdw-sample-explorer__description">{activeSample.description}</p>
+          {compileError ? (
+            <WorkbenchParseError role="alert" data-testid="jdw-sample-explorer-error">
+              {compileError}
+            </WorkbenchParseError>
+          ) : null}
+          <SplitView
+            className="jdw-sample-explorer__split"
+            defaultPrimarySizePercent={46}
+            minPrimarySizePercent={24}
+            maxPrimarySizePercent={72}
+            primary={
+              <section
+                aria-label={sourceView === 'editor' ? 'Screen spec editor' : 'JDW JSON source'}
+                className="jdw-sample-explorer__pane"
+                data-testid="jdw-sample-explorer-source-pane"
+              >
+                <header className="jdw-sample-explorer__pane-header">
+                  {sourceView === 'editor' ? 'Screen editor' : 'JDW JSON'}
+                </header>
+                <div className="jdw-sample-explorer__pane-body">
+                  {sourceView === 'editor' ? (
+                    <ScreenSpecEditor
+                      value={pipeline.spec}
+                      onChange={pipeline.setSpec}
+                      onCompileError={setEditorError}
+                    />
+                  ) : (
+                    <textarea
+                      aria-label="JDW JSON source"
+                      className="jdw-sample-explorer__json-source"
+                      data-testid="jdw-sample-explorer-json"
+                      value={pipeline.json}
+                      onChange={(event) => pipeline.setJson(event.target.value)}
+                      spellCheck={false}
+                    />
+                  )}
+                </div>
+              </section>
+            }
+            secondary={
+              <section
+                aria-label="Rendered preview"
+                className="jdw-sample-explorer__pane"
+                data-testid="jdw-sample-explorer-preview-pane"
+              >
+                <header className="jdw-sample-explorer__pane-header">Preview</header>
+                <div className="jdw-sample-explorer__pane-body">
+                  <JdwPreview json={pipeline.json} layoutConstraints={pipeline.layoutConstraints} />
+                </div>
+              </section>
+            }
+          />
+        </PanelBody>
+      </Panel>
+    </div>
+  );
+}

package/src/ScreenNodeInspector.tsx

@@ -0,0 +1,203 @@
+import type { ScreenNode, ScreenTextStyle } from '@workbench-kit/jdw';
+
+import {
+  TextInput,
+  WorkbenchPropertyHint,
+  WorkbenchPropertyNumberRow,
+  WorkbenchPropertyPanel,
+  WorkbenchPropertyRow,
+  WorkbenchPropertyStack,
+  WorkbenchPropertyTextRow,
+} from '@workbench-kit/react/primitives';
+
+export interface ScreenNodeInspectorProps {
+  readonly node: ScreenNode;
+  readonly parentKind?: ScreenNode['kind'] | undefined;
+  readonly onChange: (node: ScreenNode) => void;
+}
+
+function readStyle(node: ScreenNode): ScreenTextStyle {
+  if (node.kind === 'text' || node.kind === 'panel') {
+    return node.style ?? {};
+  }
+  return {};
+}
+
+function patchStyle(node: ScreenNode, patch: ScreenTextStyle): ScreenNode {
+  if (node.kind === 'text' || node.kind === 'panel') {
+    return { ...node, style: { ...node.style, ...patch } };
+  }
+  return node;
+}
+
+function OptionalNumberRow({
+  label,
+  testId,
+  value,
+  onChange,
+}: {
+  readonly label: string;
+  readonly testId: string;
+  readonly value: number | undefined;
+  readonly onChange: (value: number | undefined) => void;
+}) {
+  return (
+    <WorkbenchPropertyRow label={label} htmlFor={testId}>
+      <TextInput
+        id={testId}
+        data-testid={testId}
+        controlWidth="full"
+        type="number"
+        value={value ?? ''}
+        onChange={(event) => {
+          const raw = event.currentTarget.value;
+          onChange(raw === '' ? undefined : Number(raw));
+        }}
+      />
+    </WorkbenchPropertyRow>
+  );
+}
+
+export function ScreenNodeInspector({ node, parentKind, onChange }: ScreenNodeInspectorProps) {
+  if (node.kind === 'text' || node.kind === 'panel') {
+    const style = readStyle(node);
+
+    return (
+      <WorkbenchPropertyPanel
+        className="jdw-screen-node-inspector"
+        data-testid="screen-spec-node-inspector"
+      >
+        <WorkbenchPropertyStack>
+          <WorkbenchPropertyRow label="Content" htmlFor="screen-spec-field-content">
+            <TextInput
+              id="screen-spec-field-content"
+              data-testid="screen-spec-field-content"
+              controlWidth="full"
+              value={node.content}
+              onValueChange={(content) => onChange({ ...node, content })}
+            />
+          </WorkbenchPropertyRow>
+          {node.kind === 'panel' ? (
+            <WorkbenchPropertyTextRow
+              htmlFor="screen-spec-field-panel-background"
+              label="Panel background"
+              value={node.background ?? ''}
+              onValueChange={(background) => onChange({ ...node, background })}
+            />
+          ) : null}
+          <WorkbenchPropertyTextRow
+            htmlFor="screen-spec-field-color"
+            label="Text color"
+            value={style.color ?? ''}
+            onValueChange={(color) => onChange(patchStyle(node, { color }))}
+          />
+          <OptionalNumberRow
+            label="Font size"
+            testId="screen-spec-field-font-size"
+            value={style.fontSize}
+            onChange={(fontSize) => onChange(patchStyle(node, { fontSize }))}
+          />
+          <WorkbenchPropertyTextRow
+            htmlFor="screen-spec-field-background"
+            label="Background"
+            value={style.background ?? ''}
+            onValueChange={(background) => onChange(patchStyle(node, { background }))}
+          />
+          {parentKind === 'grid' ? (
+            <>
+              <OptionalNumberRow
+                label="Column"
+                testId="screen-spec-field-col"
+                value={node.col}
+                onChange={(col) => onChange({ ...node, col })}
+              />
+              <OptionalNumberRow
+                label="Row"
+                testId="screen-spec-field-row"
+                value={node.row}
+                onChange={(row) => onChange({ ...node, row })}
+              />
+              <OptionalNumberRow
+                label="Column span"
+                testId="screen-spec-field-col-span"
+                value={node.colSpan}
+                onChange={(colSpan) => onChange({ ...node, colSpan })}
+              />
+              <OptionalNumberRow
+                label="Row span"
+                testId="screen-spec-field-row-span"
+                value={node.rowSpan}
+                onChange={(rowSpan) => onChange({ ...node, rowSpan })}
+              />
+            </>
+          ) : null}
+        </WorkbenchPropertyStack>
+      </WorkbenchPropertyPanel>
+    );
+  }
+
+  if (node.kind === 'expanded') {
+    return (
+      <WorkbenchPropertyPanel
+        className="jdw-screen-node-inspector"
+        data-testid="screen-spec-node-inspector"
+      >
+        <WorkbenchPropertyStack>
+          <OptionalNumberRow
+            label="Flex"
+            testId="screen-spec-field-flex"
+            value={node.flex}
+            onChange={(flex) => onChange({ ...node, flex })}
+          />
+          <WorkbenchPropertyHint>Edit the wrapped child from the outline.</WorkbenchPropertyHint>
+        </WorkbenchPropertyStack>
+      </WorkbenchPropertyPanel>
+    );
+  }
+
+  if (
+    node.kind === 'row' ||
+    node.kind === 'column' ||
+    node.kind === 'grid' ||
+    node.kind === 'stack'
+  ) {
+    return (
+      <WorkbenchPropertyPanel
+        className="jdw-screen-node-inspector"
+        data-testid="screen-spec-node-inspector"
+      >
+        <WorkbenchPropertyStack>
+          {node.kind === 'grid' ? (
+            <WorkbenchPropertyNumberRow
+              htmlFor="screen-spec-field-columns"
+              label="Columns"
+              min={1}
+              value={node.columns}
+              onValueChange={(columns) => onChange({ ...node, columns: Math.max(1, columns) })}
+            />
+          ) : null}
+          <OptionalNumberRow
+            label="Gap"
+            testId="screen-spec-field-gap"
+            value={node.gap}
+            onChange={(gap) => onChange({ ...node, gap })}
+          />
+          <OptionalNumberRow
+            label="Padding"
+            testId="screen-spec-field-padding"
+            value={node.padding}
+            onChange={(padding) => onChange({ ...node, padding })}
+          />
+          <WorkbenchPropertyTextRow
+            htmlFor="screen-spec-field-container-background"
+            label="Background"
+            value={node.background ?? ''}
+            onValueChange={(background) => onChange({ ...node, background })}
+          />
+        </WorkbenchPropertyStack>
+      </WorkbenchPropertyPanel>
+    );
+  }
+
+  return null;
+}

package/src/ScreenSpecEditor.tsx

@@ -0,0 +1,196 @@
+import { useMemo, useState } from 'react';
+import {
+  compileScreenSpecToJson,
+  listScreenSpecOutline,
+  updateScreenNodeAt,
+  updateScreenSpecMetadata,
+  type JdwScreenSpec,
+  type ScreenNode,
+  type ScreenNodePath,
+} from '@workbench-kit/jdw';
+
+import {
+  Panel,
+  PanelBody,
+  ResizablePanels,
+  TextInput,
+  WorkbenchPropertyNumberRow,
+  WorkbenchPropertyRow,
+  WorkbenchPropertySection,
+  WorkbenchPropertyStack,
+  WorkbenchPropertyTextRow,
+} from '@workbench-kit/react/primitives';
+import { ScreenNodeInspector } from './ScreenNodeInspector.js';
+
+function cx(...parts: Array<string | false | undefined | null | undefined>) {
+  return parts.filter(Boolean).join(' ');
+}
+
+function pathKey(path: ScreenNodePath): string {
+  return path.length === 0 ? 'root' : path.join('.');
+}
+
+export interface ScreenSpecEditorProps {
+  readonly value: JdwScreenSpec;
+  readonly onChange: (spec: JdwScreenSpec) => void;
+  readonly onCompileError?: ((message: string | null) => void) | undefined;
+  readonly className?: string | undefined;
+}
+
+export function ScreenSpecEditor({
+  value,
+  onChange,
+  onCompileError,
+  className,
+}: ScreenSpecEditorProps) {
+  const [selectedPath, setSelectedPath] = useState<ScreenNodePath>([]);
+  const outline = useMemo(() => listScreenSpecOutline(value), [value]);
+  const selectedEntry =
+    outline.find((entry) => pathKey(entry.path) === pathKey(selectedPath)) ?? outline[0];
+  const selectedNode = selectedEntry?.node ?? value.root;
+
+  const commitSpec = (nextSpec: JdwScreenSpec) => {
+    onChange(nextSpec);
+    try {
+      compileScreenSpecToJson(nextSpec);
+      onCompileError?.(null);
+    } catch (error) {
+      onCompileError?.(error instanceof Error ? error.message : String(error));
+    }
+  };
+
+  const updateNode = (nextNode: ScreenNode) => {
+    commitSpec(updateScreenNodeAt(value, selectedEntry?.path ?? [], nextNode));
+  };
+
+  const metadataPanel = (
+    <WorkbenchPropertySection title="Screen" data-testid="screen-spec-metadata">
+      <WorkbenchPropertyStack gap="sm">
+        <WorkbenchPropertyRow label="Title" htmlFor="screen-spec-field-title">
+          <TextInput
+            id="screen-spec-field-title"
+            data-testid="screen-spec-field-title"
+            controlWidth="full"
+            value={value.title}
+            onValueChange={(title) => commitSpec(updateScreenSpecMetadata(value, { title }))}
+          />
+        </WorkbenchPropertyRow>
+        <WorkbenchPropertyTextRow
+          htmlFor="screen-spec-field-description"
+          label="Description"
+          value={value.description}
+          onValueChange={(description) =>
+            commitSpec(updateScreenSpecMetadata(value, { description }))
+          }
+        />
+        <WorkbenchPropertyNumberRow
+          htmlFor="screen-spec-field-frame-width"
+          label="Frame width"
+          min={1}
+          value={value.frameWidth}
+          onValueChange={(frameWidth) =>
+            commitSpec(updateScreenSpecMetadata(value, { frameWidth }))
+          }
+        />
+        <WorkbenchPropertyNumberRow
+          htmlFor="screen-spec-field-max-width"
+          label="Preview max width"
+          min={1}
+          value={value.layout.maxWidth}
+          onValueChange={(maxWidth) =>
+            commitSpec(
+              updateScreenSpecMetadata(value, {
+                layout: { ...value.layout, maxWidth },
+              }),
+            )
+          }
+        />
+        <WorkbenchPropertyNumberRow
+          htmlFor="screen-spec-field-max-height"
+          label="Preview max height"
+          min={1}
+          value={value.layout.maxHeight}
+          onValueChange={(maxHeight) =>
+            commitSpec(
+              updateScreenSpecMetadata(value, {
+                layout: { ...value.layout, maxHeight },
+              }),
+            )
+          }
+        />
+      </WorkbenchPropertyStack>
+    </WorkbenchPropertySection>
+  );
+
+  const outlinePanel = (
+    <Panel
+      className="widget-tree-outline jdw-screen-spec-editor__outline"
+      data-testid="screen-spec-outline"
+    >
+      <PanelBody className="widget-tree-outline__body">
+        <ul aria-label="Screen node outline" className="widget-tree-outline__list" role="tree">
+          {outline.map((entry) => {
+            const key = pathKey(entry.path);
+            const selected = pathKey(selectedEntry?.path ?? []) === key;
+            const depth = entry.depth;
+
+            return (
+              <li
+                key={key}
+                aria-level={depth + 1}
+                aria-selected={selected}
+                className={cx(
+                  'widget-tree-outline__item',
+                  selected && 'widget-tree-outline__item--selected',
+                )}
+                role="treeitem"
+                style={{ paddingLeft: `${depth * 14 + 6}px` }}
+              >
+                <button
+                  className="widget-tree-outline__button"
+                  data-testid={`screen-spec-outline-${key}`}
+                  type="button"
+                  onClick={() => setSelectedPath(entry.path)}
+                >
+                  <span className="widget-tree-outline__type">{entry.label}</span>
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </PanelBody>
+    </Panel>
+  );
+
+  return (
+    <div className={cx('jdw-screen-spec-editor', className)} data-testid="screen-spec-editor">
+      <ResizablePanels
+        className="jdw-screen-spec-editor__layout"
+        defaultFirstSize={280}
+        minFirstSize={200}
+        minSecondSize={220}
+        maxFirstSize={420}
+        first={
+          <div className="jdw-screen-spec-editor__sidebar">
+            {metadataPanel}
+            {outlinePanel}
+          </div>
+        }
+        second={
+          <WorkbenchPropertySection
+            aria-label="Selected node properties"
+            className="jdw-screen-spec-editor__inspector"
+            data-testid="screen-spec-inspector"
+            title={selectedEntry?.label ?? 'Node'}
+          >
+            <ScreenNodeInspector
+              node={selectedNode}
+              parentKind={selectedEntry?.parentKind}
+              onChange={updateNode}
+            />
+          </WorkbenchPropertySection>
+        }
+      />
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+export { JdwSampleScreenExplorer } from './JdwSampleScreenExplorer.js';
+export type {
+  JdwSampleScreenExplorerProps,
+  JdwSampleSourceView,
+} from './JdwSampleScreenExplorer.js';
+export { ScreenNodeInspector } from './ScreenNodeInspector.js';
+export type { ScreenNodeInspectorProps } from './ScreenNodeInspector.js';
+export { ScreenSpecEditor } from './ScreenSpecEditor.js';
+export type { ScreenSpecEditorProps } from './ScreenSpecEditor.js';
+export { useScreenSpecPipeline } from './useScreenSpecPipeline.js';
+export type {
+  ScreenSpecPipelineState,
+  UseScreenSpecPipelineResult,
+} from './useScreenSpecPipeline.js';

package/src/useScreenSpecPipeline.ts

@@ -0,0 +1,88 @@
+import { useCallback, useMemo, useState } from 'react';
+import {
+  compileScreenSpecToJson,
+  type JdwScreenSpec,
+  type LayoutConstraints,
+} from '@workbench-kit/jdw';
+
+export interface ScreenSpecPipelineState {
+  readonly spec: JdwScreenSpec;
+  readonly json: string;
+  readonly compileError: string | null;
+  readonly layoutConstraints: LayoutConstraints;
+}
+
+export interface UseScreenSpecPipelineResult extends ScreenSpecPipelineState {
+  readonly setSpec: (spec: JdwScreenSpec) => void;
+  readonly setJson: (json: string) => void;
+  readonly resetSpec: (spec: JdwScreenSpec) => void;
+}
+
+function layoutConstraintsFromSpec(spec: JdwScreenSpec): LayoutConstraints {
+  return {
+    minWidth: 0,
+    maxWidth: spec.layout.maxWidth,
+    minHeight: 0,
+    maxHeight: spec.layout.maxHeight,
+  };
+}
+
+function compileSpec(spec: JdwScreenSpec): { json: string; error: string | null } {
+  try {
+    return { json: compileScreenSpecToJson(spec), error: null };
+  } catch (error) {
+    return {
+      json: '',
+      error: error instanceof Error ? error.message : String(error),
+    };
+  }
+}
+
+export function useScreenSpecPipeline(initialSpec: JdwScreenSpec): UseScreenSpecPipelineResult {
+  const initial = useMemo(() => {
+    const compiled = compileSpec(initialSpec);
+    return {
+      spec: initialSpec,
+      json: compiled.json,
+      compileError: compiled.error,
+      layoutConstraints: layoutConstraintsFromSpec(initialSpec),
+    };
+  }, [initialSpec]);
+
+  const [spec, setSpecState] = useState(initial.spec);
+  const [json, setJsonState] = useState(initial.json);
+  const [compileError, setCompileError] = useState<string | null>(initial.compileError);
+  const [layoutConstraints, setLayoutConstraints] = useState(initial.layoutConstraints);
+
+  const setSpec = useCallback((nextSpec: JdwScreenSpec) => {
+    const compiled = compileSpec(nextSpec);
+    setSpecState(nextSpec);
+    setLayoutConstraints(layoutConstraintsFromSpec(nextSpec));
+    setCompileError(compiled.error);
+    if (compiled.error === null) {
+      setJsonState(compiled.json);
+    }
+  }, []);
+
+  const resetSpec = useCallback(
+    (nextSpec: JdwScreenSpec) => {
+      setSpec(nextSpec);
+    },
+    [setSpec],
+  );
+
+  const setJson = useCallback((nextJson: string) => {
+    setJsonState(nextJson);
+    setCompileError(null);
+  }, []);
+
+  return {
+    spec,
+    json,
+    compileError,
+    layoutConstraints,
+    setSpec,
+    setJson,
+    resetSpec,
+  };
+}