@workbench-kit/jdw-editor 0.0.2-prototype.0.2.4 → 0.0.2-prototype.0.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -3
- package/src/JdwSampleScreenExplorer.tsx +81 -81
- package/src/ScreenNodeInspector.tsx +369 -369
- package/src/ScreenSpecEditor.tsx +431 -431
- package/src/ScreenSpecEditorStoryHost.tsx +103 -103
- package/src/ScreenSpecPalette.tsx +119 -119
- package/src/ScreenSpecWorkbench.tsx +177 -177
- package/src/filterScreenSpecOutline.ts +40 -40
- package/src/index.ts +27 -27
- package/src/useScreenSpecPipeline.ts +82 -82
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workbench-kit/jdw-editor",
|
|
3
|
-
"version": "0.0.2-prototype.0.2.
|
|
3
|
+
"version": "0.0.2-prototype.0.2.6",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"!src/**/*.stories.tsx"
|
|
15
15
|
],
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@workbench-kit/
|
|
18
|
-
"@workbench-kit/
|
|
17
|
+
"@workbench-kit/jdw": "0.0.2-prototype.0.2.6",
|
|
18
|
+
"@workbench-kit/react": "0.0.2-prototype.0.2.6"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": "^19.0.0"
|
|
@@ -1,81 +1,81 @@
|
|
|
1
|
-
import { useMemo, useState } from 'react';
|
|
2
|
-
import { createScreenSpecPaletteAssetCatalog } from '@workbench-kit/jdw';
|
|
3
|
-
import { BUILTIN_JDW_REGISTRY } from '@workbench-kit/react/jdw';
|
|
4
|
-
import { WidgetTreeLab } from '@workbench-kit/react/widget-tree';
|
|
5
|
-
import { Field, Select, WorkbenchAuthoringShell } from '@workbench-kit/react/primitives';
|
|
6
|
-
import {
|
|
7
|
-
JDW_SAMPLE_SCREENS,
|
|
8
|
-
formatJdwSampleScreenJson,
|
|
9
|
-
type JdwSampleScreenDefinition,
|
|
10
|
-
} from '@workbench-kit/react/jdw/samples';
|
|
11
|
-
|
|
12
|
-
export interface JdwSampleScreenExplorerProps {
|
|
13
|
-
readonly samples?: readonly JdwSampleScreenDefinition[] | undefined;
|
|
14
|
-
readonly initialSampleId?: string | undefined;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
function resolveSample(
|
|
18
|
-
samples: readonly JdwSampleScreenDefinition[],
|
|
19
|
-
sampleId: string,
|
|
20
|
-
): JdwSampleScreenDefinition {
|
|
21
|
-
return samples.find((entry) => entry.id === sampleId) ?? samples[0]!;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
/**
|
|
25
|
-
* Compiles a selected Screen Spec template once, then opens the resulting JDW
|
|
26
|
-
* document in the canonical WidgetTreeLab design/code authoring surface.
|
|
27
|
-
*/
|
|
28
|
-
export function JdwSampleScreenExplorer({
|
|
29
|
-
samples = JDW_SAMPLE_SCREENS,
|
|
30
|
-
initialSampleId,
|
|
31
|
-
}: JdwSampleScreenExplorerProps) {
|
|
32
|
-
const [sampleId, setSampleId] = useState(initialSampleId ?? samples[0]?.id ?? '');
|
|
33
|
-
const activeSample = resolveSample(samples, sampleId);
|
|
34
|
-
const [documentValue, setDocumentValue] = useState(() => formatJdwSampleScreenJson(activeSample));
|
|
35
|
-
const assetCatalog = useMemo(() => createScreenSpecPaletteAssetCatalog(), []);
|
|
36
|
-
|
|
37
|
-
const sampleOptions = useMemo(
|
|
38
|
-
() =>
|
|
39
|
-
samples.map((sample) => (
|
|
40
|
-
<option key={sample.id} value={sample.id}>
|
|
41
|
-
{sample.title}
|
|
42
|
-
</option>
|
|
43
|
-
)),
|
|
44
|
-
[samples],
|
|
45
|
-
);
|
|
46
|
-
|
|
47
|
-
if (samples.length === 0) {
|
|
48
|
-
return <div data-testid="jdw-sample-explorer-empty">No sample screens configured.</div>;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
return (
|
|
52
|
-
<WorkbenchAuthoringShell
|
|
53
|
-
data-testid="jdw-sample-explorer"
|
|
54
|
-
toolbar={
|
|
55
|
-
<Field label="Load sample" htmlFor="jdw-sample-screen-select" inline>
|
|
56
|
-
<Select
|
|
57
|
-
id="jdw-sample-screen-select"
|
|
58
|
-
aria-label="Load sample"
|
|
59
|
-
data-testid="jdw-sample-screen-select"
|
|
60
|
-
controlWidth="wide"
|
|
61
|
-
value={activeSample.id}
|
|
62
|
-
onValueChange={(nextId) => {
|
|
63
|
-
const next = resolveSample(samples, nextId);
|
|
64
|
-
setSampleId(next.id);
|
|
65
|
-
setDocumentValue(formatJdwSampleScreenJson(next));
|
|
66
|
-
}}
|
|
67
|
-
>
|
|
68
|
-
{sampleOptions}
|
|
69
|
-
</Select>
|
|
70
|
-
</Field>
|
|
71
|
-
}
|
|
72
|
-
>
|
|
73
|
-
<WidgetTreeLab
|
|
74
|
-
assetCatalog={assetCatalog}
|
|
75
|
-
registry={BUILTIN_JDW_REGISTRY}
|
|
76
|
-
value={documentValue}
|
|
77
|
-
onChange={setDocumentValue}
|
|
78
|
-
/>
|
|
79
|
-
</WorkbenchAuthoringShell>
|
|
80
|
-
);
|
|
81
|
-
}
|
|
1
|
+
import { useMemo, useState } from 'react';
|
|
2
|
+
import { createScreenSpecPaletteAssetCatalog } from '@workbench-kit/jdw';
|
|
3
|
+
import { BUILTIN_JDW_REGISTRY } from '@workbench-kit/react/jdw';
|
|
4
|
+
import { WidgetTreeLab } from '@workbench-kit/react/widget-tree';
|
|
5
|
+
import { Field, Select, WorkbenchAuthoringShell } from '@workbench-kit/react/primitives';
|
|
6
|
+
import {
|
|
7
|
+
JDW_SAMPLE_SCREENS,
|
|
8
|
+
formatJdwSampleScreenJson,
|
|
9
|
+
type JdwSampleScreenDefinition,
|
|
10
|
+
} from '@workbench-kit/react/jdw/samples';
|
|
11
|
+
|
|
12
|
+
export interface JdwSampleScreenExplorerProps {
|
|
13
|
+
readonly samples?: readonly JdwSampleScreenDefinition[] | undefined;
|
|
14
|
+
readonly initialSampleId?: string | undefined;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
function resolveSample(
|
|
18
|
+
samples: readonly JdwSampleScreenDefinition[],
|
|
19
|
+
sampleId: string,
|
|
20
|
+
): JdwSampleScreenDefinition {
|
|
21
|
+
return samples.find((entry) => entry.id === sampleId) ?? samples[0]!;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Compiles a selected Screen Spec template once, then opens the resulting JDW
|
|
26
|
+
* document in the canonical WidgetTreeLab design/code authoring surface.
|
|
27
|
+
*/
|
|
28
|
+
export function JdwSampleScreenExplorer({
|
|
29
|
+
samples = JDW_SAMPLE_SCREENS,
|
|
30
|
+
initialSampleId,
|
|
31
|
+
}: JdwSampleScreenExplorerProps) {
|
|
32
|
+
const [sampleId, setSampleId] = useState(initialSampleId ?? samples[0]?.id ?? '');
|
|
33
|
+
const activeSample = resolveSample(samples, sampleId);
|
|
34
|
+
const [documentValue, setDocumentValue] = useState(() => formatJdwSampleScreenJson(activeSample));
|
|
35
|
+
const assetCatalog = useMemo(() => createScreenSpecPaletteAssetCatalog(), []);
|
|
36
|
+
|
|
37
|
+
const sampleOptions = useMemo(
|
|
38
|
+
() =>
|
|
39
|
+
samples.map((sample) => (
|
|
40
|
+
<option key={sample.id} value={sample.id}>
|
|
41
|
+
{sample.title}
|
|
42
|
+
</option>
|
|
43
|
+
)),
|
|
44
|
+
[samples],
|
|
45
|
+
);
|
|
46
|
+
|
|
47
|
+
if (samples.length === 0) {
|
|
48
|
+
return <div data-testid="jdw-sample-explorer-empty">No sample screens configured.</div>;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<WorkbenchAuthoringShell
|
|
53
|
+
data-testid="jdw-sample-explorer"
|
|
54
|
+
toolbar={
|
|
55
|
+
<Field label="Load sample" htmlFor="jdw-sample-screen-select" inline>
|
|
56
|
+
<Select
|
|
57
|
+
id="jdw-sample-screen-select"
|
|
58
|
+
aria-label="Load sample"
|
|
59
|
+
data-testid="jdw-sample-screen-select"
|
|
60
|
+
controlWidth="wide"
|
|
61
|
+
value={activeSample.id}
|
|
62
|
+
onValueChange={(nextId) => {
|
|
63
|
+
const next = resolveSample(samples, nextId);
|
|
64
|
+
setSampleId(next.id);
|
|
65
|
+
setDocumentValue(formatJdwSampleScreenJson(next));
|
|
66
|
+
}}
|
|
67
|
+
>
|
|
68
|
+
{sampleOptions}
|
|
69
|
+
</Select>
|
|
70
|
+
</Field>
|
|
71
|
+
}
|
|
72
|
+
>
|
|
73
|
+
<WidgetTreeLab
|
|
74
|
+
assetCatalog={assetCatalog}
|
|
75
|
+
registry={BUILTIN_JDW_REGISTRY}
|
|
76
|
+
value={documentValue}
|
|
77
|
+
onChange={setDocumentValue}
|
|
78
|
+
/>
|
|
79
|
+
</WorkbenchAuthoringShell>
|
|
80
|
+
);
|
|
81
|
+
}
|