@principal-ai/principal-view-react 0.10.2 → 0.11.0
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@principal-ai/principal-view-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.0",
|
|
4
4
|
"description": "React components for graph-based principal view framework",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@principal-ade/industry-theme": "0.1.7",
|
|
18
18
|
"@principal-ai/codebase-composition": "^0.2.41",
|
|
19
|
-
"@principal-ai/principal-view-core": "0.
|
|
19
|
+
"@principal-ai/principal-view-core": "0.16.0",
|
|
20
20
|
"@xyflow/react": "12.0.0",
|
|
21
21
|
"js-yaml": "4.1.1",
|
|
22
22
|
"lucide-react": "0.554.0",
|
|
@@ -0,0 +1,440 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
|
+
import { GraphRenderer } from '../components/GraphRenderer';
|
|
4
|
+
import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
|
|
5
|
+
import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
|
|
6
|
+
|
|
7
|
+
const meta = {
|
|
8
|
+
title: 'Features/NumericColors',
|
|
9
|
+
component: GraphRenderer,
|
|
10
|
+
parameters: {
|
|
11
|
+
layout: 'centered',
|
|
12
|
+
},
|
|
13
|
+
tags: ['autodocs'],
|
|
14
|
+
decorators: [
|
|
15
|
+
(Story) => (
|
|
16
|
+
<ThemeProvider theme={defaultEditorTheme}>
|
|
17
|
+
<Story />
|
|
18
|
+
</ThemeProvider>
|
|
19
|
+
),
|
|
20
|
+
],
|
|
21
|
+
} satisfies Meta<typeof GraphRenderer>;
|
|
22
|
+
|
|
23
|
+
export default meta;
|
|
24
|
+
type Story = StoryObj<typeof meta>;
|
|
25
|
+
|
|
26
|
+
// ============================================================================
|
|
27
|
+
// Obsidian Canvas Numeric Color Presets
|
|
28
|
+
// Tests both string and number formats for color codes 1-6
|
|
29
|
+
// ============================================================================
|
|
30
|
+
|
|
31
|
+
const obsidianNumericColorsCanvas: ExtendedCanvas = {
|
|
32
|
+
nodes: [
|
|
33
|
+
// Header
|
|
34
|
+
{
|
|
35
|
+
id: 'header',
|
|
36
|
+
type: 'text',
|
|
37
|
+
x: 50,
|
|
38
|
+
y: 20,
|
|
39
|
+
width: 900,
|
|
40
|
+
height: 60,
|
|
41
|
+
text: '# Obsidian Canvas Numeric Color Presets\nTests resolveCanvasColor() support for "1"-"6" strings and 1-6 numbers',
|
|
42
|
+
pv: { nodeType: 'header', shape: 'rectangle' },
|
|
43
|
+
},
|
|
44
|
+
// Row 1: String format (Obsidian Canvas output)
|
|
45
|
+
{
|
|
46
|
+
id: 'string-1',
|
|
47
|
+
type: 'text',
|
|
48
|
+
x: 50,
|
|
49
|
+
y: 120,
|
|
50
|
+
width: 140,
|
|
51
|
+
height: 80,
|
|
52
|
+
text: 'color: "1"\nRed\n#ef4444',
|
|
53
|
+
color: '1' as any, // Obsidian format
|
|
54
|
+
pv: { nodeType: 'preset', shape: 'rectangle' },
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
id: 'string-2',
|
|
58
|
+
type: 'text',
|
|
59
|
+
x: 210,
|
|
60
|
+
y: 120,
|
|
61
|
+
width: 140,
|
|
62
|
+
height: 80,
|
|
63
|
+
text: 'color: "2"\nOrange\n#f97316',
|
|
64
|
+
color: '2' as any,
|
|
65
|
+
pv: { nodeType: 'preset', shape: 'rectangle' },
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
id: 'string-3',
|
|
69
|
+
type: 'text',
|
|
70
|
+
x: 370,
|
|
71
|
+
y: 120,
|
|
72
|
+
width: 140,
|
|
73
|
+
height: 80,
|
|
74
|
+
text: 'color: "3"\nYellow\n#eab308',
|
|
75
|
+
color: '3' as any,
|
|
76
|
+
pv: { nodeType: 'preset', shape: 'rectangle' },
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
id: 'string-4',
|
|
80
|
+
type: 'text',
|
|
81
|
+
x: 530,
|
|
82
|
+
y: 120,
|
|
83
|
+
width: 140,
|
|
84
|
+
height: 80,
|
|
85
|
+
text: 'color: "4"\nGreen\n#22c55e',
|
|
86
|
+
color: '4' as any,
|
|
87
|
+
pv: { nodeType: 'preset', shape: 'rectangle' },
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
id: 'string-5',
|
|
91
|
+
type: 'text',
|
|
92
|
+
x: 690,
|
|
93
|
+
y: 120,
|
|
94
|
+
width: 140,
|
|
95
|
+
height: 80,
|
|
96
|
+
text: 'color: "5"\nCyan\n#06b6d4',
|
|
97
|
+
color: '5' as any,
|
|
98
|
+
pv: { nodeType: 'preset', shape: 'rectangle' },
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
id: 'string-6',
|
|
102
|
+
type: 'text',
|
|
103
|
+
x: 850,
|
|
104
|
+
y: 120,
|
|
105
|
+
width: 140,
|
|
106
|
+
height: 80,
|
|
107
|
+
text: 'color: "6"\nPurple\n#8b5cf6',
|
|
108
|
+
color: '6' as any,
|
|
109
|
+
pv: { nodeType: 'preset', shape: 'rectangle' },
|
|
110
|
+
},
|
|
111
|
+
// Label for row 2
|
|
112
|
+
{
|
|
113
|
+
id: 'label-number',
|
|
114
|
+
type: 'text',
|
|
115
|
+
x: 50,
|
|
116
|
+
y: 230,
|
|
117
|
+
width: 900,
|
|
118
|
+
height: 40,
|
|
119
|
+
text: 'Number format (programmatic usage):',
|
|
120
|
+
pv: { nodeType: 'label', shape: 'rectangle' },
|
|
121
|
+
},
|
|
122
|
+
// Row 2: Number format (programmatic)
|
|
123
|
+
{
|
|
124
|
+
id: 'number-1',
|
|
125
|
+
type: 'text',
|
|
126
|
+
x: 50,
|
|
127
|
+
y: 290,
|
|
128
|
+
width: 140,
|
|
129
|
+
height: 80,
|
|
130
|
+
text: 'color: 1\nRed\n#ef4444',
|
|
131
|
+
color: 1,
|
|
132
|
+
pv: { nodeType: 'preset', shape: 'rectangle' },
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
id: 'number-2',
|
|
136
|
+
type: 'text',
|
|
137
|
+
x: 210,
|
|
138
|
+
y: 290,
|
|
139
|
+
width: 140,
|
|
140
|
+
height: 80,
|
|
141
|
+
text: 'color: 2\nOrange\n#f97316',
|
|
142
|
+
color: 2,
|
|
143
|
+
pv: { nodeType: 'preset', shape: 'rectangle' },
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
id: 'number-3',
|
|
147
|
+
type: 'text',
|
|
148
|
+
x: 370,
|
|
149
|
+
y: 290,
|
|
150
|
+
width: 140,
|
|
151
|
+
height: 80,
|
|
152
|
+
text: 'color: 3\nYellow\n#eab308',
|
|
153
|
+
color: 3,
|
|
154
|
+
pv: { nodeType: 'preset', shape: 'rectangle' },
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
id: 'number-4',
|
|
158
|
+
type: 'text',
|
|
159
|
+
x: 530,
|
|
160
|
+
y: 290,
|
|
161
|
+
width: 140,
|
|
162
|
+
height: 80,
|
|
163
|
+
text: 'color: 4\nGreen\n#22c55e',
|
|
164
|
+
color: 4,
|
|
165
|
+
pv: { nodeType: 'preset', shape: 'rectangle' },
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
id: 'number-5',
|
|
169
|
+
type: 'text',
|
|
170
|
+
x: 690,
|
|
171
|
+
y: 290,
|
|
172
|
+
width: 140,
|
|
173
|
+
height: 80,
|
|
174
|
+
text: 'color: 5\nCyan\n#06b6d4',
|
|
175
|
+
color: 5,
|
|
176
|
+
pv: { nodeType: 'preset', shape: 'rectangle' },
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
id: 'number-6',
|
|
180
|
+
type: 'text',
|
|
181
|
+
x: 850,
|
|
182
|
+
y: 290,
|
|
183
|
+
width: 140,
|
|
184
|
+
height: 80,
|
|
185
|
+
text: 'color: 6\nPurple\n#8b5cf6',
|
|
186
|
+
color: 6,
|
|
187
|
+
pv: { nodeType: 'preset', shape: 'rectangle' },
|
|
188
|
+
},
|
|
189
|
+
// Label for row 3
|
|
190
|
+
{
|
|
191
|
+
id: 'label-hex',
|
|
192
|
+
type: 'text',
|
|
193
|
+
x: 50,
|
|
194
|
+
y: 400,
|
|
195
|
+
width: 900,
|
|
196
|
+
height: 40,
|
|
197
|
+
text: 'Hex format (standard CSS colors):',
|
|
198
|
+
pv: { nodeType: 'label', shape: 'rectangle' },
|
|
199
|
+
},
|
|
200
|
+
// Row 3: Hex colors (should pass through unchanged)
|
|
201
|
+
{
|
|
202
|
+
id: 'hex-1',
|
|
203
|
+
type: 'text',
|
|
204
|
+
x: 50,
|
|
205
|
+
y: 460,
|
|
206
|
+
width: 140,
|
|
207
|
+
height: 80,
|
|
208
|
+
text: 'color: #ef4444\nRed\n(hex)',
|
|
209
|
+
color: '#ef4444',
|
|
210
|
+
pv: { nodeType: 'preset', shape: 'rectangle' },
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
id: 'hex-2',
|
|
214
|
+
type: 'text',
|
|
215
|
+
x: 210,
|
|
216
|
+
y: 460,
|
|
217
|
+
width: 140,
|
|
218
|
+
height: 80,
|
|
219
|
+
text: 'color: #f97316\nOrange\n(hex)',
|
|
220
|
+
color: '#f97316',
|
|
221
|
+
pv: { nodeType: 'preset', shape: 'rectangle' },
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
id: 'hex-3',
|
|
225
|
+
type: 'text',
|
|
226
|
+
x: 370,
|
|
227
|
+
y: 460,
|
|
228
|
+
width: 140,
|
|
229
|
+
height: 80,
|
|
230
|
+
text: 'color: #eab308\nYellow\n(hex)',
|
|
231
|
+
color: '#eab308',
|
|
232
|
+
pv: { nodeType: 'preset', shape: 'rectangle' },
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
id: 'hex-4',
|
|
236
|
+
type: 'text',
|
|
237
|
+
x: 530,
|
|
238
|
+
y: 460,
|
|
239
|
+
width: 140,
|
|
240
|
+
height: 80,
|
|
241
|
+
text: 'color: #22c55e\nGreen\n(hex)',
|
|
242
|
+
color: '#22c55e',
|
|
243
|
+
pv: { nodeType: 'preset', shape: 'rectangle' },
|
|
244
|
+
},
|
|
245
|
+
{
|
|
246
|
+
id: 'hex-5',
|
|
247
|
+
type: 'text',
|
|
248
|
+
x: 690,
|
|
249
|
+
y: 460,
|
|
250
|
+
width: 140,
|
|
251
|
+
height: 80,
|
|
252
|
+
text: 'color: #06b6d4\nCyan\n(hex)',
|
|
253
|
+
color: '#06b6d4',
|
|
254
|
+
pv: { nodeType: 'preset', shape: 'rectangle' },
|
|
255
|
+
},
|
|
256
|
+
{
|
|
257
|
+
id: 'hex-6',
|
|
258
|
+
type: 'text',
|
|
259
|
+
x: 850,
|
|
260
|
+
y: 460,
|
|
261
|
+
width: 140,
|
|
262
|
+
height: 80,
|
|
263
|
+
text: 'color: #8b5cf6\nPurple\n(hex)',
|
|
264
|
+
color: '#8b5cf6',
|
|
265
|
+
pv: { nodeType: 'preset', shape: 'rectangle' },
|
|
266
|
+
},
|
|
267
|
+
],
|
|
268
|
+
edges: [],
|
|
269
|
+
pv: {
|
|
270
|
+
version: '1.0.0',
|
|
271
|
+
name: 'Numeric Color Presets Demo',
|
|
272
|
+
description: 'Tests Obsidian Canvas numeric color preset support',
|
|
273
|
+
edgeTypes: {},
|
|
274
|
+
},
|
|
275
|
+
};
|
|
276
|
+
|
|
277
|
+
export const ObsidianColorPresets: Story = {
|
|
278
|
+
args: {
|
|
279
|
+
canvas: obsidianNumericColorsCanvas,
|
|
280
|
+
width: 1050,
|
|
281
|
+
height: 620,
|
|
282
|
+
showMinimap: false,
|
|
283
|
+
},
|
|
284
|
+
parameters: {
|
|
285
|
+
docs: {
|
|
286
|
+
description: {
|
|
287
|
+
story: `
|
|
288
|
+
**Obsidian Canvas Color Preset Support**
|
|
289
|
+
|
|
290
|
+
The \`resolveCanvasColor()\` function normalizes three color formats:
|
|
291
|
+
|
|
292
|
+
1. **String presets** ("1"-"6") - Obsidian Canvas output format
|
|
293
|
+
2. **Number presets** (1-6) - Programmatic usage
|
|
294
|
+
3. **Hex colors** ("#rrggbb") - Standard CSS format
|
|
295
|
+
|
|
296
|
+
**Color Mapping:**
|
|
297
|
+
- 1 = Red (#ef4444)
|
|
298
|
+
- 2 = Orange (#f97316)
|
|
299
|
+
- 3 = Yellow (#eab308)
|
|
300
|
+
- 4 = Green (#22c55e)
|
|
301
|
+
- 5 = Cyan (#06b6d4)
|
|
302
|
+
- 6 = Purple (#8b5cf6)
|
|
303
|
+
|
|
304
|
+
**Why this matters:**
|
|
305
|
+
- Obsidian Canvas color picker saves colors as strings ("1"-"6")
|
|
306
|
+
- Without conversion, these would be invalid CSS values (transparent/black nodes)
|
|
307
|
+
- This allows seamless editing in Obsidian while rendering correctly in React Flow
|
|
308
|
+
|
|
309
|
+
All three rows should display identical colors, proving the conversion works correctly.
|
|
310
|
+
`,
|
|
311
|
+
},
|
|
312
|
+
},
|
|
313
|
+
},
|
|
314
|
+
};
|
|
315
|
+
|
|
316
|
+
// ============================================================================
|
|
317
|
+
// Edge Numeric Colors
|
|
318
|
+
// Tests numeric color support on edges
|
|
319
|
+
// ============================================================================
|
|
320
|
+
|
|
321
|
+
const edgeNumericColorsCanvas: ExtendedCanvas = {
|
|
322
|
+
nodes: [
|
|
323
|
+
{
|
|
324
|
+
id: 'source',
|
|
325
|
+
type: 'text',
|
|
326
|
+
x: 100,
|
|
327
|
+
y: 250,
|
|
328
|
+
width: 150,
|
|
329
|
+
height: 60,
|
|
330
|
+
text: 'Source Node',
|
|
331
|
+
color: '#888888',
|
|
332
|
+
pv: { nodeType: 'source', shape: 'rectangle' },
|
|
333
|
+
},
|
|
334
|
+
{
|
|
335
|
+
id: 'target-1',
|
|
336
|
+
type: 'text',
|
|
337
|
+
x: 400,
|
|
338
|
+
y: 100,
|
|
339
|
+
width: 120,
|
|
340
|
+
height: 60,
|
|
341
|
+
text: 'Target 1\nRed edge',
|
|
342
|
+
color: '#888888',
|
|
343
|
+
pv: { nodeType: 'target', shape: 'rectangle' },
|
|
344
|
+
},
|
|
345
|
+
{
|
|
346
|
+
id: 'target-2',
|
|
347
|
+
type: 'text',
|
|
348
|
+
x: 400,
|
|
349
|
+
y: 200,
|
|
350
|
+
width: 120,
|
|
351
|
+
height: 60,
|
|
352
|
+
text: 'Target 2\nGreen edge',
|
|
353
|
+
color: '#888888',
|
|
354
|
+
pv: { nodeType: 'target', shape: 'rectangle' },
|
|
355
|
+
},
|
|
356
|
+
{
|
|
357
|
+
id: 'target-3',
|
|
358
|
+
type: 'text',
|
|
359
|
+
x: 400,
|
|
360
|
+
y: 300,
|
|
361
|
+
width: 120,
|
|
362
|
+
height: 60,
|
|
363
|
+
text: 'Target 3\nPurple edge',
|
|
364
|
+
color: '#888888',
|
|
365
|
+
pv: { nodeType: 'target', shape: 'rectangle' },
|
|
366
|
+
},
|
|
367
|
+
{
|
|
368
|
+
id: 'target-4',
|
|
369
|
+
type: 'text',
|
|
370
|
+
x: 400,
|
|
371
|
+
y: 400,
|
|
372
|
+
width: 120,
|
|
373
|
+
height: 60,
|
|
374
|
+
text: 'Target 4\nHex orange',
|
|
375
|
+
color: '#888888',
|
|
376
|
+
pv: { nodeType: 'target', shape: 'rectangle' },
|
|
377
|
+
},
|
|
378
|
+
],
|
|
379
|
+
edges: [
|
|
380
|
+
{
|
|
381
|
+
id: 'edge-string-1',
|
|
382
|
+
fromNode: 'source',
|
|
383
|
+
toNode: 'target-1',
|
|
384
|
+
color: '1' as any, // String format - red
|
|
385
|
+
label: 'color: "1"',
|
|
386
|
+
},
|
|
387
|
+
{
|
|
388
|
+
id: 'edge-number-4',
|
|
389
|
+
fromNode: 'source',
|
|
390
|
+
toNode: 'target-2',
|
|
391
|
+
color: 4, // Number format - green
|
|
392
|
+
label: 'color: 4',
|
|
393
|
+
},
|
|
394
|
+
{
|
|
395
|
+
id: 'edge-string-6',
|
|
396
|
+
fromNode: 'source',
|
|
397
|
+
toNode: 'target-3',
|
|
398
|
+
color: '6' as any, // String format - purple
|
|
399
|
+
label: 'color: "6"',
|
|
400
|
+
},
|
|
401
|
+
{
|
|
402
|
+
id: 'edge-hex',
|
|
403
|
+
fromNode: 'source',
|
|
404
|
+
toNode: 'target-4',
|
|
405
|
+
color: '#f97316', // Hex format - orange
|
|
406
|
+
label: 'color: #f97316',
|
|
407
|
+
},
|
|
408
|
+
],
|
|
409
|
+
pv: {
|
|
410
|
+
version: '1.0.0',
|
|
411
|
+
name: 'Edge Numeric Colors Demo',
|
|
412
|
+
description: 'Tests numeric color support on edges',
|
|
413
|
+
edgeTypes: {},
|
|
414
|
+
},
|
|
415
|
+
};
|
|
416
|
+
|
|
417
|
+
export const EdgeNumericColors: Story = {
|
|
418
|
+
args: {
|
|
419
|
+
canvas: edgeNumericColorsCanvas,
|
|
420
|
+
width: 650,
|
|
421
|
+
height: 580,
|
|
422
|
+
showMinimap: false,
|
|
423
|
+
},
|
|
424
|
+
parameters: {
|
|
425
|
+
docs: {
|
|
426
|
+
description: {
|
|
427
|
+
story: `
|
|
428
|
+
**Edge Color Numeric Support**
|
|
429
|
+
|
|
430
|
+
Edges also support numeric color presets in all three formats:
|
|
431
|
+
- String presets from Obsidian ("1"-"6")
|
|
432
|
+
- Number presets for programmatic use (1-6)
|
|
433
|
+
- Standard hex colors (#rrggbb)
|
|
434
|
+
|
|
435
|
+
This ensures consistency between node and edge color handling.
|
|
436
|
+
`,
|
|
437
|
+
},
|
|
438
|
+
},
|
|
439
|
+
},
|
|
440
|
+
};
|