@nitrogenbuilder/connector-payload 0.1.41 → 0.1.42
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/dist/components/NitrogenComponentInventoryClient.js +63 -53
- package/dist/components/NitrogenComponentInventoryField.js +1 -1
- package/dist/components/NitrogenComponentInventoryNavLink.js +1 -1
- package/dist/components/NitrogenComponentInventoryReindexButton.js +15 -5
- package/dist/components/NitrogenComponentInventoryView.js +1 -1
- package/dist/components/NitrogenPackageVersionsField.js +16 -6
- package/dist/components/NitrogenPackageVersionsHeaderField.js +6 -1
- package/package.json +1 -1
|
@@ -14,6 +14,31 @@ const EDITABLE_PROP_TYPES = new Set([
|
|
|
14
14
|
'url',
|
|
15
15
|
'wysiwyg',
|
|
16
16
|
]);
|
|
17
|
+
const payloadTheme = {
|
|
18
|
+
border: 'var(--theme-border-color)',
|
|
19
|
+
dangerText: 'var(--theme-error-500)',
|
|
20
|
+
divider: 'var(--theme-elevation-150)',
|
|
21
|
+
inputBackground: 'var(--theme-input-bg)',
|
|
22
|
+
inputBorder: 'var(--theme-elevation-250)',
|
|
23
|
+
mutedBackground: 'var(--theme-elevation-50)',
|
|
24
|
+
mutedText: 'var(--theme-elevation-600)',
|
|
25
|
+
panelBackground: 'var(--theme-elevation-50)',
|
|
26
|
+
primaryBackground: 'var(--theme-elevation-800)',
|
|
27
|
+
primaryBorder: 'var(--theme-elevation-800)',
|
|
28
|
+
primaryText: 'var(--theme-elevation-0)',
|
|
29
|
+
tagBackground: 'var(--theme-elevation-100)',
|
|
30
|
+
tagText: 'var(--theme-elevation-700)',
|
|
31
|
+
text: 'var(--theme-text)',
|
|
32
|
+
warningText: 'var(--theme-warning-600)',
|
|
33
|
+
};
|
|
34
|
+
const formControlStyle = {
|
|
35
|
+
background: payloadTheme.inputBackground,
|
|
36
|
+
border: `1px solid ${payloadTheme.inputBorder}`,
|
|
37
|
+
borderRadius: 8,
|
|
38
|
+
color: payloadTheme.text,
|
|
39
|
+
fontSize: 13,
|
|
40
|
+
padding: '8px 12px',
|
|
41
|
+
};
|
|
17
42
|
function formatSourceLabel(slug) {
|
|
18
43
|
if (slug === 'nitrogen-templates') {
|
|
19
44
|
return 'Nitrogen Templates';
|
|
@@ -105,21 +130,21 @@ function getDefaultDraft(option) {
|
|
|
105
130
|
};
|
|
106
131
|
}
|
|
107
132
|
function renderProp(name, prop, depth = 0) {
|
|
108
|
-
return (_jsxs("div", { style: { paddingLeft: depth * 16 }, children: [_jsxs("div", { style: { fontFamily: 'monospace', fontSize: 12, lineHeight: 1.5 }, children: [_jsx("strong", { children: name }), " ", _jsxs("span", { style: { color:
|
|
133
|
+
return (_jsxs("div", { style: { paddingLeft: depth * 16 }, children: [_jsxs("div", { style: { fontFamily: 'monospace', fontSize: 12, lineHeight: 1.5 }, children: [_jsx("strong", { children: name }), " ", _jsxs("span", { style: { color: payloadTheme.mutedText }, children: ["(", prop.type, ")"] }), prop.label ? _jsxs("span", { style: { color: payloadTheme.mutedText }, children: [" - ", prop.label] }) : null] }), prop.props ? (_jsx("div", { style: { marginTop: 4 }, children: Object.entries(prop.props).map(([childName, childProp]) => renderProp(childName, childProp, depth + 1)) })) : null] }, `${name}-${depth}`));
|
|
109
134
|
}
|
|
110
135
|
function renderGroup(group) {
|
|
111
|
-
return (_jsxs("div", { style: { marginTop: 12 }, children: [_jsx("h4", { style: { margin: '0 0 6px', fontSize: 14 }, children: group.label }), _jsx("div", { style: { display: 'grid', gap: 6 }, children: Object.entries(group.props).map(([propName, prop]) => renderProp(propName, prop)) })] }, group.key));
|
|
136
|
+
return (_jsxs("div", { style: { marginTop: 12 }, children: [_jsx("h4", { style: { color: payloadTheme.text, margin: '0 0 6px', fontSize: 14 }, children: group.label }), _jsx("div", { style: { display: 'grid', gap: 6 }, children: Object.entries(group.props).map(([propName, prop]) => renderProp(propName, prop)) })] }, group.key));
|
|
112
137
|
}
|
|
113
138
|
function renderCategory(category) {
|
|
114
|
-
return (_jsxs("div", { style: { marginTop: 16 }, children: [_jsx("h3", { style: { margin: '0 0 8px', fontSize: 16 }, children: category.label }), Object.values(category.groups).map((group) => renderGroup(group))] }, category.key));
|
|
139
|
+
return (_jsxs("div", { style: { marginTop: 16 }, children: [_jsx("h3", { style: { color: payloadTheme.text, margin: '0 0 8px', fontSize: 16 }, children: category.label }), Object.values(category.groups).map((group) => renderGroup(group))] }, category.key));
|
|
115
140
|
}
|
|
116
141
|
function buttonStyle(kind) {
|
|
117
142
|
return {
|
|
118
143
|
appearance: 'none',
|
|
119
|
-
background: kind === 'primary' ?
|
|
120
|
-
border: `1px solid ${kind === 'primary' ?
|
|
144
|
+
background: kind === 'primary' ? payloadTheme.primaryBackground : payloadTheme.inputBackground,
|
|
145
|
+
border: `1px solid ${kind === 'primary' ? payloadTheme.primaryBorder : payloadTheme.inputBorder}`,
|
|
121
146
|
borderRadius: 8,
|
|
122
|
-
color: kind === 'primary' ?
|
|
147
|
+
color: kind === 'primary' ? payloadTheme.primaryText : payloadTheme.text,
|
|
123
148
|
cursor: 'pointer',
|
|
124
149
|
fontSize: 13,
|
|
125
150
|
fontWeight: 600,
|
|
@@ -420,23 +445,18 @@ export default function NitrogenComponentInventoryClient({ adminRoute, component
|
|
|
420
445
|
flexWrap: 'wrap',
|
|
421
446
|
gap: 8,
|
|
422
447
|
justifyContent: 'space-between',
|
|
423
|
-
}, children: [_jsxs("div", { style: { color:
|
|
448
|
+
}, children: [_jsxs("div", { style: { color: payloadTheme.mutedText, fontSize: 13 }, children: [filteredComponents.length, " component", filteredComponents.length === 1 ? '' : 's', filteredComponents.length !== allComponentNames.length
|
|
424
449
|
? ` of ${allComponentNames.length}`
|
|
425
450
|
: ''] }), _jsxs("div", { style: { alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: 8 }, children: [_jsx("input", { onChange: (event) => setSearchValue(event.target.value), placeholder: "Search components...", style: {
|
|
426
|
-
|
|
427
|
-
border: '1px solid #d1d5db',
|
|
428
|
-
borderRadius: 8,
|
|
429
|
-
color: '#111827',
|
|
430
|
-
fontSize: 13,
|
|
451
|
+
...formControlStyle,
|
|
431
452
|
minWidth: 240,
|
|
432
|
-
padding: '8px 12px',
|
|
433
453
|
}, type: "search", value: searchValue }), _jsxs("details", { ref: sourceFilterRef, style: { position: 'relative' }, children: [_jsxs("summary", { style: {
|
|
434
454
|
alignItems: 'center',
|
|
435
455
|
appearance: 'none',
|
|
436
|
-
background:
|
|
437
|
-
border:
|
|
456
|
+
background: payloadTheme.inputBackground,
|
|
457
|
+
border: `1px solid ${payloadTheme.inputBorder}`,
|
|
438
458
|
borderRadius: 8,
|
|
439
|
-
color:
|
|
459
|
+
color: payloadTheme.text,
|
|
440
460
|
cursor: 'pointer',
|
|
441
461
|
display: 'flex',
|
|
442
462
|
fontSize: 13,
|
|
@@ -445,11 +465,11 @@ export default function NitrogenComponentInventoryClient({ adminRoute, component
|
|
|
445
465
|
minWidth: 220,
|
|
446
466
|
padding: '8px 12px',
|
|
447
467
|
userSelect: 'none',
|
|
448
|
-
}, children: [_jsx("span", { children: "Sources:" }), _jsx("span", { style: { color:
|
|
449
|
-
background:
|
|
450
|
-
border:
|
|
468
|
+
}, children: [_jsx("span", { children: "Sources:" }), _jsx("span", { style: { color: payloadTheme.mutedText, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: sourceFilterLabel }), _jsx("span", { style: { color: payloadTheme.mutedText, marginLeft: 'auto' }, children: "\u25BE" })] }), _jsx("div", { style: {
|
|
469
|
+
background: payloadTheme.inputBackground,
|
|
470
|
+
border: `1px solid ${payloadTheme.inputBorder}`,
|
|
451
471
|
borderRadius: 10,
|
|
452
|
-
boxShadow: '0 12px 32px
|
|
472
|
+
boxShadow: '0 12px 32px var(--theme-elevation-100)',
|
|
453
473
|
marginTop: 8,
|
|
454
474
|
padding: 12,
|
|
455
475
|
position: 'absolute',
|
|
@@ -457,12 +477,7 @@ export default function NitrogenComponentInventoryClient({ adminRoute, component
|
|
|
457
477
|
width: 320,
|
|
458
478
|
zIndex: 20,
|
|
459
479
|
}, children: _jsxs("div", { style: { display: 'grid', gap: 10 }, children: [_jsx("input", { onChange: (event) => setSourceSearchValue(event.target.value), placeholder: "Search collections or items...", style: {
|
|
460
|
-
|
|
461
|
-
border: '1px solid #d1d5db',
|
|
462
|
-
borderRadius: 8,
|
|
463
|
-
color: '#111827',
|
|
464
|
-
fontSize: 13,
|
|
465
|
-
padding: '8px 12px',
|
|
480
|
+
...formControlStyle,
|
|
466
481
|
width: '100%',
|
|
467
482
|
}, type: "search", value: sourceSearchValue }), _jsxs("div", { style: { display: 'flex', gap: 8 }, children: [_jsx("button", { onClick: () => setSelectedSources(sourceOptions.map((option) => option.key)), style: buttonStyle('secondary'), type: "button", children: "Select All" }), _jsx("button", { onClick: () => setSelectedSources([]), style: buttonStyle('secondary'), type: "button", children: "Clear" })] }), _jsx("div", { style: { display: 'grid', gap: 8, maxHeight: 220, overflow: 'auto' }, children: visibleSourceOptions.length ? (visibleSourceOptions.map((option) => {
|
|
468
483
|
const checked = selectedSources.includes(option.key);
|
|
@@ -475,15 +490,15 @@ export default function NitrogenComponentInventoryClient({ adminRoute, component
|
|
|
475
490
|
}, children: [_jsx("input", { checked: checked, onChange: () => setSelectedSources((current) => checked
|
|
476
491
|
? current.filter((value) => value !== option.key)
|
|
477
492
|
: [...current, option.key]), style: { marginTop: 2 }, type: "checkbox" }), _jsxs("div", { style: { display: 'grid', gap: 2 }, children: [_jsxs("div", { style: { alignItems: 'center', display: 'flex', gap: 8 }, children: [_jsx("span", { children: option.label }), _jsx("span", { style: {
|
|
478
|
-
background:
|
|
493
|
+
background: payloadTheme.tagBackground,
|
|
479
494
|
borderRadius: 999,
|
|
480
|
-
color:
|
|
495
|
+
color: payloadTheme.tagText,
|
|
481
496
|
fontSize: 11,
|
|
482
497
|
fontWeight: 700,
|
|
483
498
|
padding: '2px 8px',
|
|
484
499
|
textTransform: 'uppercase',
|
|
485
|
-
}, children: option.kind === 'collection' ? 'Collection' : 'Item' })] }), _jsx("span", { style: { color:
|
|
486
|
-
})) : (_jsx("p", { style: { color:
|
|
500
|
+
}, children: option.kind === 'collection' ? 'Collection' : 'Item' })] }), _jsx("span", { style: { color: payloadTheme.mutedText, fontSize: 12 }, children: option.description })] })] }, option.key));
|
|
501
|
+
})) : (_jsx("p", { style: { color: payloadTheme.mutedText, fontSize: 13, margin: 0 }, children: "No sources match." })) })] }) })] }), _jsx("button", { onClick: expandAll, style: buttonStyle('secondary'), type: "button", children: "Expand All" }), _jsx("button", { onClick: collapseAll, style: buttonStyle('secondary'), type: "button", children: "Collapse All" })] })] }), filteredComponents.map(({ componentName, definition, isUnknown, usages }) => {
|
|
487
502
|
const isOpen = Boolean(openNames[componentName]);
|
|
488
503
|
const editableProps = editablePropOptionsByComponent.get(componentName) || [];
|
|
489
504
|
const propDraft = propUpdateDrafts[componentName] || getDefaultDraft(editableProps[0]);
|
|
@@ -493,9 +508,10 @@ export default function NitrogenComponentInventoryClient({ adminRoute, component
|
|
|
493
508
|
? `${previewUrl}${previewUrl.includes('?') ? '&' : '?'}componentName=${encodeURIComponent(componentName)}`
|
|
494
509
|
: '';
|
|
495
510
|
return (_jsxs("section", { style: {
|
|
496
|
-
background:
|
|
497
|
-
border:
|
|
511
|
+
background: payloadTheme.panelBackground,
|
|
512
|
+
border: `1px solid ${payloadTheme.border}`,
|
|
498
513
|
borderRadius: 10,
|
|
514
|
+
color: payloadTheme.text,
|
|
499
515
|
overflow: 'hidden',
|
|
500
516
|
}, children: [_jsxs("button", { onClick: () => setOpenNames((current) => ({
|
|
501
517
|
...current,
|
|
@@ -512,28 +528,28 @@ export default function NitrogenComponentInventoryClient({ adminRoute, component
|
|
|
512
528
|
padding: 16,
|
|
513
529
|
textAlign: 'left',
|
|
514
530
|
width: '100%',
|
|
515
|
-
}, type: "button", children: [_jsxs("div", { style: { display: 'grid', gap: 4 }, children: [_jsxs("div", { style: { alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: 8 }, children: [_jsx("span", { style: { fontSize: 16, fontWeight: 700 }, children: componentName }), _jsxs("span", { style: { color:
|
|
516
|
-
borderTop:
|
|
531
|
+
}, type: "button", children: [_jsxs("div", { style: { display: 'grid', gap: 4 }, children: [_jsxs("div", { style: { alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: 8 }, children: [_jsx("span", { style: { fontSize: 16, fontWeight: 700 }, children: componentName }), _jsxs("span", { style: { color: payloadTheme.mutedText, fontSize: 13, fontWeight: 500 }, children: [usages.length, " usage", usages.length === 1 ? '' : 's'] }), isUnknown ? (_jsx("span", { style: { color: payloadTheme.warningText, fontSize: 13, fontWeight: 600 }, children: "Missing from manifest" })) : null] }), definition ? (_jsxs("div", { style: { color: payloadTheme.mutedText, fontSize: 13 }, children: [definition.sidebarCategory || 'Uncategorized', definition.scope ? ` - ${definition.scope}` : ''] })) : null] }), _jsx("span", { style: { color: payloadTheme.mutedText, fontSize: 18, lineHeight: 1 }, children: isOpen ? '−' : '+' })] }), isOpen ? (_jsxs("div", { style: {
|
|
532
|
+
borderTop: `1px solid ${payloadTheme.divider}`,
|
|
517
533
|
display: 'grid',
|
|
518
534
|
gap: 0,
|
|
519
535
|
gridTemplateColumns: 'minmax(0, 1.45fr) minmax(300px, 0.9fr)',
|
|
520
536
|
}, children: [_jsxs("div", { style: {
|
|
521
|
-
borderRight:
|
|
537
|
+
borderRight: `1px solid ${payloadTheme.divider}`,
|
|
522
538
|
display: 'grid',
|
|
523
539
|
gap: 18,
|
|
524
540
|
padding: 16,
|
|
525
|
-
}, children: [_jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 10px', fontSize: 15 }, children: "Used On" }), usages.length ? (_jsx("div", { style: { display: 'grid', gap: 8 }, children: usages.map((usage) => (_jsxs("a", { href: formatAdminURL({
|
|
541
|
+
}, children: [_jsxs("div", { children: [_jsx("h3", { style: { color: payloadTheme.text, margin: '0 0 10px', fontSize: 15 }, children: "Used On" }), usages.length ? (_jsx("div", { style: { display: 'grid', gap: 8 }, children: usages.map((usage) => (_jsxs("a", { href: formatAdminURL({
|
|
526
542
|
adminRoute,
|
|
527
543
|
path: `/collections/${usage.sourceCollection}/${usage.sourceDocumentId}`,
|
|
528
544
|
}), style: {
|
|
529
|
-
border:
|
|
545
|
+
border: `1px solid ${payloadTheme.border}`,
|
|
530
546
|
borderRadius: 6,
|
|
531
547
|
color: 'inherit',
|
|
532
548
|
display: 'block',
|
|
533
549
|
padding: 12,
|
|
534
550
|
textDecoration: 'none',
|
|
535
|
-
}, children: [_jsx("div", { style: { fontWeight: 600 }, children: usage.sourceTitle || usage.sourceSlug || usage.sourceDocumentId }), _jsxs("div", { style: { color:
|
|
536
|
-
border:
|
|
551
|
+
}, children: [_jsx("div", { style: { fontWeight: 600 }, children: usage.sourceTitle || usage.sourceSlug || usage.sourceDocumentId }), _jsxs("div", { style: { color: payloadTheme.mutedText, fontSize: 12, marginTop: 2 }, children: [usage.sourceCollection, " - ", usage.modulePath] })] }, usage.usageKey))) })) : (_jsx("p", { style: { color: payloadTheme.mutedText, margin: 0 }, children: "No indexed usages yet." }))] }), _jsxs("div", { children: [_jsx("h3", { style: { color: payloadTheme.text, margin: '0 0 10px', fontSize: 15 }, children: "Props" }), definition ? (Object.values(definition.categories).map((category) => renderCategory(category))) : (_jsx("p", { style: { color: payloadTheme.mutedText, margin: 0 }, children: "No manifest definition available." }))] }), _jsxs("div", { children: [_jsx("h3", { style: { color: payloadTheme.text, margin: '0 0 10px', fontSize: 15 }, children: "Update Prop Across Site" }), editableProps.length ? (_jsxs("div", { style: {
|
|
552
|
+
border: `1px solid ${payloadTheme.border}`,
|
|
537
553
|
borderRadius: 8,
|
|
538
554
|
display: 'grid',
|
|
539
555
|
gap: 10,
|
|
@@ -550,11 +566,9 @@ export default function NitrogenComponentInventoryClient({ adminRoute, component
|
|
|
550
566
|
: '',
|
|
551
567
|
});
|
|
552
568
|
}, style: {
|
|
553
|
-
|
|
569
|
+
...formControlStyle,
|
|
554
570
|
borderRadius: 6,
|
|
555
|
-
color: '#111827',
|
|
556
571
|
maxWidth: 520,
|
|
557
|
-
padding: '8px 10px',
|
|
558
572
|
width: '100%',
|
|
559
573
|
}, value: propDraft.propPath, children: editableProps.map((option) => (_jsx("option", { value: option.path, children: option.label }, option.path))) })] }), selectedEditableProp?.type === 'boolean' ? (_jsxs("label", { style: { alignItems: 'center', display: 'flex', gap: 8, fontSize: 13 }, children: [_jsx("input", { checked: Boolean(propDraft.value), onChange: (event) => updatePropDraft(componentName, {
|
|
560
574
|
result: undefined,
|
|
@@ -565,37 +579,33 @@ export default function NitrogenComponentInventoryClient({ adminRoute, component
|
|
|
565
579
|
status: 'idle',
|
|
566
580
|
value: event.target.value,
|
|
567
581
|
}), style: {
|
|
568
|
-
|
|
582
|
+
...formControlStyle,
|
|
569
583
|
borderRadius: 6,
|
|
570
|
-
color: '#111827',
|
|
571
584
|
maxWidth: 520,
|
|
572
|
-
padding: '8px 10px',
|
|
573
585
|
width: '100%',
|
|
574
586
|
}, value: String(propDraft.value), children: selectedEditableProp.options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) })] })) : (_jsxs("label", { style: { display: 'grid', gap: 6, fontSize: 13, fontWeight: 600 }, children: ["Value", _jsx("input", { onChange: (event) => updatePropDraft(componentName, {
|
|
575
587
|
result: undefined,
|
|
576
588
|
status: 'idle',
|
|
577
589
|
value: event.target.value,
|
|
578
590
|
}), style: {
|
|
579
|
-
|
|
591
|
+
...formControlStyle,
|
|
580
592
|
borderRadius: 6,
|
|
581
|
-
color: '#111827',
|
|
582
593
|
maxWidth: 520,
|
|
583
|
-
padding: '8px 10px',
|
|
584
594
|
width: '100%',
|
|
585
|
-
}, type: selectedEditableProp?.type === 'number' ? 'number' : 'text', value: String(propDraft.value) })] })), _jsxs("div", { style: { color:
|
|
595
|
+
}, type: selectedEditableProp?.type === 'number' ? 'number' : 'text', value: String(propDraft.value) })] })), _jsxs("div", { style: { color: payloadTheme.mutedText, fontSize: 12 }, children: ["Scope: ", selectedSources.length ? sourceFilterLabel : 'all indexed usages'] }), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 8 }, children: [_jsx("button", { disabled: propDraft.status === 'previewing' || propDraft.status === 'applying', onClick: () => void runPropUpdate(componentName, editableProps, 'preview', usages), style: buttonStyle('secondary'), type: "button", children: propDraft.status === 'previewing' ? 'Checking...' : 'Dry Run' }), _jsx("button", { disabled: propDraft.status === 'previewing' ||
|
|
586
596
|
propDraft.status === 'applying' ||
|
|
587
597
|
!propDraft.result, onClick: () => void runPropUpdate(componentName, editableProps, 'apply', usages), style: {
|
|
588
598
|
...buttonStyle('primary'),
|
|
589
599
|
opacity: propDraft.result ? 1 : 0.5,
|
|
590
|
-
}, type: "button", children: propDraft.status === 'applying' ? 'Applying...' : 'Apply Update' })] }), propDraft.error ? (_jsx("p", { style: { color:
|
|
600
|
+
}, type: "button", children: propDraft.status === 'applying' ? 'Applying...' : 'Apply Update' })] }), propDraft.error ? (_jsx("p", { style: { color: payloadTheme.dangerText, fontSize: 13, margin: 0 }, children: propDraft.error })) : null, propDraft.result ? (_jsxs("div", { style: { color: payloadTheme.text, fontSize: 13 }, children: [propDraft.result.mode === 'apply' ? 'Updated' : 'Would update', ' ', propDraft.result.occurrenceCount, " occurrence", propDraft.result.occurrenceCount === 1 ? '' : 's', " in", ' ', propDraft.result.documentCount, " document", propDraft.result.documentCount === 1 ? '' : 's', "."] })) : null] })) : (_jsx("p", { style: { color: payloadTheme.mutedText, margin: 0 }, children: "No scalar props are available for bulk updates." }))] })] }), _jsxs("div", { style: { padding: 16 }, children: [_jsxs("div", { style: {
|
|
591
601
|
alignItems: 'center',
|
|
592
602
|
display: 'flex',
|
|
593
603
|
gap: 12,
|
|
594
604
|
justifyContent: 'space-between',
|
|
595
605
|
marginBottom: 10,
|
|
596
|
-
}, children: [_jsxs("div", { children: [_jsx("h3", { style: { margin: 0, fontSize: 15 }, children: "Preview" }), previewState.data?.source ? (_jsxs("div", { style: { color:
|
|
597
|
-
background:
|
|
598
|
-
border:
|
|
606
|
+
}, children: [_jsxs("div", { children: [_jsx("h3", { style: { color: payloadTheme.text, margin: 0, fontSize: 15 }, children: "Preview" }), previewState.data?.source ? (_jsxs("div", { style: { color: payloadTheme.mutedText, fontSize: 12, marginTop: 2 }, children: ["Rendering saved usage from ", previewState.data.source.title || previewState.data.source.documentId] })) : null] }), previewState.status === 'loading' ? (_jsx("span", { style: { color: payloadTheme.mutedText, fontSize: 12 }, children: "Loading preview..." })) : null] }), !previewUrl ? (_jsx("p", { style: { color: payloadTheme.mutedText, margin: 0 }, children: "Configure a Nitrogen development or frontend URL to enable component previews." })) : previewState.status === 'error' ? (_jsx("p", { style: { color: payloadTheme.dangerText, margin: 0 }, children: previewState.error })) : (_jsx("div", { style: {
|
|
607
|
+
background: payloadTheme.mutedBackground,
|
|
608
|
+
border: `1px solid ${payloadTheme.border}`,
|
|
599
609
|
borderRadius: 8,
|
|
600
610
|
overflow: 'hidden',
|
|
601
611
|
position: 'relative',
|
|
@@ -31,6 +31,6 @@ const NitrogenComponentInventoryField = async ({ payload, req, }) => {
|
|
|
31
31
|
isUnknown: !catalogByName.get(componentName),
|
|
32
32
|
usages: usageByName.get(componentName) || [],
|
|
33
33
|
}));
|
|
34
|
-
return (_jsxs("div", { style: { display: 'grid', gap: 24, paddingBottom: 24 }, children: [_jsxs("div", { style: { display: 'grid', gap: 12 }, children: [_jsx("p", { style: { margin: 0, color: '
|
|
34
|
+
return (_jsxs("div", { style: { color: 'var(--theme-text)', display: 'grid', gap: 24, paddingBottom: 24 }, children: [_jsxs("div", { style: { display: 'grid', gap: 12 }, children: [_jsx("p", { style: { margin: 0, color: 'var(--theme-elevation-600)', maxWidth: 920 }, children: "Inventory view for the registered Nitrogen component manifest and all indexed usages across Nitrogen-enabled documents and templates." }), _jsx(NitrogenComponentInventoryReindexButton, {})] }), _jsx(NitrogenComponentInventoryClient, { adminRoute: req.payload.config.routes.admin, components: components, previewUrl: nitrogenSettings ? buildComponentPreviewUrl(nitrogenSettings) : '' })] }));
|
|
35
35
|
};
|
|
36
36
|
export default NitrogenComponentInventoryField;
|
|
@@ -32,7 +32,7 @@ export default function NitrogenComponentInventoryNavLink() {
|
|
|
32
32
|
link.style.textDecoration = 'none';
|
|
33
33
|
const icon = document.createElement('span');
|
|
34
34
|
icon.ariaHidden = 'true';
|
|
35
|
-
icon.style.color = '
|
|
35
|
+
icon.style.color = 'var(--theme-elevation-600)';
|
|
36
36
|
icon.style.display = 'inline-flex';
|
|
37
37
|
icon.style.fontSize = '16px';
|
|
38
38
|
icon.style.justifyContent = 'center';
|
|
@@ -2,6 +2,16 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useEffect, useState } from 'react';
|
|
4
4
|
const statusStorageKey = 'nitrogen-component-inventory:last-reindex-status';
|
|
5
|
+
const payloadTheme = {
|
|
6
|
+
dangerBackground: 'var(--theme-error-50)',
|
|
7
|
+
dangerBorder: 'var(--theme-error-200)',
|
|
8
|
+
dangerText: 'var(--theme-error-500)',
|
|
9
|
+
primaryBackground: 'var(--theme-elevation-800)',
|
|
10
|
+
primaryText: 'var(--theme-elevation-0)',
|
|
11
|
+
successBackground: 'var(--theme-success-50)',
|
|
12
|
+
successBorder: 'var(--theme-success-200)',
|
|
13
|
+
successText: 'var(--theme-success-600)',
|
|
14
|
+
};
|
|
5
15
|
export default function NitrogenComponentInventoryReindexButton() {
|
|
6
16
|
const [loading, setLoading] = useState(false);
|
|
7
17
|
const [status, setStatus] = useState(null);
|
|
@@ -62,18 +72,18 @@ export default function NitrogenComponentInventoryReindexButton() {
|
|
|
62
72
|
return (_jsxs("div", { style: { display: 'grid', gap: 12 }, children: [_jsx("div", { style: { display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }, children: _jsx("button", { type: "button", onClick: handleClick, disabled: loading, style: {
|
|
63
73
|
border: 'none',
|
|
64
74
|
borderRadius: 6,
|
|
65
|
-
background:
|
|
66
|
-
color:
|
|
75
|
+
background: payloadTheme.primaryBackground,
|
|
76
|
+
color: payloadTheme.primaryText,
|
|
67
77
|
cursor: loading ? 'wait' : 'pointer',
|
|
68
78
|
fontSize: 14,
|
|
69
79
|
fontWeight: 600,
|
|
70
80
|
padding: '10px 14px',
|
|
71
81
|
}, children: loading ? 'Reindexing...' : 'Reindex Components' }) }), status ? (_jsxs("div", { style: {
|
|
72
82
|
alignItems: 'start',
|
|
73
|
-
background: status.kind === 'success' ?
|
|
74
|
-
border: `1px solid ${status.kind === 'success' ?
|
|
83
|
+
background: status.kind === 'success' ? payloadTheme.successBackground : payloadTheme.dangerBackground,
|
|
84
|
+
border: `1px solid ${status.kind === 'success' ? payloadTheme.successBorder : payloadTheme.dangerBorder}`,
|
|
75
85
|
borderRadius: 10,
|
|
76
|
-
color: status.kind === 'success' ?
|
|
86
|
+
color: status.kind === 'success' ? payloadTheme.successText : payloadTheme.dangerText,
|
|
77
87
|
display: 'grid',
|
|
78
88
|
gap: 6,
|
|
79
89
|
gridTemplateColumns: '1fr auto',
|
|
@@ -34,5 +34,5 @@ export default async function NitrogenComponentInventoryView({ clientConfig, ini
|
|
|
34
34
|
isUnknown: !catalogByName.get(componentName),
|
|
35
35
|
usages: usageByName.get(componentName) || [],
|
|
36
36
|
}));
|
|
37
|
-
return (_jsx(DefaultTemplate, { i18n: i18n, locale: locale, params: params, payload: payload, req: initPageResult.req, searchParams: searchParams, user: initPageResult.req.user, viewActions: viewActions, viewType: viewType, visibleEntities: initPageResult.visibleEntities, children: _jsxs("div", { style: { padding: 24 }, children: [_jsxs("div", { style: { display: 'grid', gap: 12, marginBottom: 24 }, children: [_jsx("h1", { style: { margin: 0, fontSize: 28 }, children: "Nitrogen Components" }), _jsx("p", { style: { margin: 0, color: '
|
|
37
|
+
return (_jsx(DefaultTemplate, { i18n: i18n, locale: locale, params: params, payload: payload, req: initPageResult.req, searchParams: searchParams, user: initPageResult.req.user, viewActions: viewActions, viewType: viewType, visibleEntities: initPageResult.visibleEntities, children: _jsxs("div", { style: { color: 'var(--theme-text)', padding: 24 }, children: [_jsxs("div", { style: { display: 'grid', gap: 12, marginBottom: 24 }, children: [_jsx("h1", { style: { margin: 0, fontSize: 28 }, children: "Nitrogen Components" }), _jsx("p", { style: { margin: 0, color: 'var(--theme-elevation-600)', maxWidth: 920 }, children: "Inventory view for the registered Nitrogen component manifest and all indexed usages across Nitrogen-enabled documents and templates." }), _jsx(NitrogenComponentInventoryReindexButton, {})] }), _jsx(NitrogenComponentInventoryClient, { adminRoute: clientConfig.routes.admin, components: components, previewUrl: nitrogenSettings ? buildComponentPreviewUrl(nitrogenSettings) : '' })] }) }));
|
|
38
38
|
}
|
|
@@ -3,6 +3,15 @@ import fs from 'node:fs/promises';
|
|
|
3
3
|
import path from 'node:path';
|
|
4
4
|
import { createRequire } from 'node:module';
|
|
5
5
|
import { NITROGEN_PACKAGE_NAMES, } from '../constants.js';
|
|
6
|
+
const payloadTheme = {
|
|
7
|
+
border: 'var(--theme-border-color)',
|
|
8
|
+
codeText: 'var(--theme-text)',
|
|
9
|
+
errorText: 'var(--theme-error-500)',
|
|
10
|
+
mutedText: 'var(--theme-elevation-600)',
|
|
11
|
+
panelBackground: 'var(--theme-elevation-50)',
|
|
12
|
+
tableDivider: 'var(--theme-elevation-150)',
|
|
13
|
+
text: 'var(--theme-text)',
|
|
14
|
+
};
|
|
6
15
|
async function readJsonFile(filePath) {
|
|
7
16
|
try {
|
|
8
17
|
const contents = await fs.readFile(filePath, 'utf8');
|
|
@@ -101,25 +110,26 @@ async function getAppVersionSummary(app, label, packageJsonCandidates) {
|
|
|
101
110
|
};
|
|
102
111
|
}
|
|
103
112
|
function versionCell(version) {
|
|
104
|
-
return version ? (_jsx("code", { style: { color:
|
|
113
|
+
return version ? (_jsx("code", { style: { color: payloadTheme.codeText, fontSize: 12 }, children: version })) : (_jsx("span", { style: { color: payloadTheme.mutedText }, children: "Not resolved" }));
|
|
105
114
|
}
|
|
106
115
|
function renderAppSummary(summary) {
|
|
107
116
|
return (_jsxs("section", { style: {
|
|
108
|
-
border:
|
|
117
|
+
border: `1px solid ${payloadTheme.border}`,
|
|
109
118
|
borderRadius: 8,
|
|
110
119
|
overflow: 'hidden',
|
|
111
|
-
}, children: [_jsxs("div", { style: { background:
|
|
120
|
+
}, children: [_jsxs("div", { style: { background: payloadTheme.panelBackground, padding: '12px 14px' }, children: [_jsx("h3", { style: { color: payloadTheme.text, fontSize: 15, margin: 0 }, children: summary.label }), summary.packageJsonPath ? (_jsx("p", { style: { color: payloadTheme.mutedText, fontSize: 12, margin: '4px 0 0' }, children: summary.packageJsonPath })) : (_jsx("p", { style: { color: payloadTheme.errorText, fontSize: 12, margin: '4px 0 0' }, children: "Could not find package.json." }))] }), summary.packages.length ? (_jsx("div", { style: { overflowX: 'auto' }, children: _jsxs("table", { style: { borderCollapse: 'collapse', fontSize: 13, width: '100%' }, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: tableHeaderStyle, children: "Package" }), _jsx("th", { style: tableHeaderStyle, children: "Declared spec" }), _jsx("th", { style: tableHeaderStyle, children: "Installed version" })] }) }), _jsx("tbody", { children: summary.packages.map((pkg) => (_jsxs("tr", { children: [_jsx("td", { style: tableCellStyle, children: _jsx("code", { style: { fontSize: 12 }, children: pkg.packageName }) }), _jsx("td", { style: tableCellStyle, children: pkg.declaredSpec ? (_jsx("code", { style: { color: payloadTheme.codeText, fontSize: 12 }, children: pkg.declaredSpec })) : (_jsx("span", { style: { color: payloadTheme.mutedText }, children: "Not declared" })) }), _jsx("td", { style: tableCellStyle, children: versionCell(pkg.installedVersion) })] }, pkg.packageName))) })] }) })) : (_jsx("p", { style: { color: payloadTheme.mutedText, fontSize: 13, margin: 0, padding: 14 }, children: "No @nitrogenbuilder packages found for this app." }))] }, summary.app));
|
|
112
121
|
}
|
|
113
122
|
const tableHeaderStyle = {
|
|
114
|
-
borderTop:
|
|
115
|
-
color:
|
|
123
|
+
borderTop: `1px solid ${payloadTheme.tableDivider}`,
|
|
124
|
+
color: payloadTheme.mutedText,
|
|
116
125
|
fontSize: 12,
|
|
117
126
|
fontWeight: 700,
|
|
118
127
|
padding: '10px 12px',
|
|
119
128
|
textAlign: 'left',
|
|
120
129
|
};
|
|
121
130
|
const tableCellStyle = {
|
|
122
|
-
borderTop:
|
|
131
|
+
borderTop: `1px solid ${payloadTheme.tableDivider}`,
|
|
132
|
+
color: payloadTheme.text,
|
|
123
133
|
padding: '10px 12px',
|
|
124
134
|
verticalAlign: 'top',
|
|
125
135
|
};
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
const NitrogenPackageVersionsHeaderField = () => {
|
|
3
|
-
return (_jsxs("div", { style: { marginBottom: 16 }, children: [_jsx("h2", { style: { fontSize: 18, margin: '0 0 6px' }, children: "Nitrogen Versions" }), _jsx("p", { style: {
|
|
3
|
+
return (_jsxs("div", { style: { marginBottom: 16 }, children: [_jsx("h2", { style: { color: 'var(--theme-text)', fontSize: 18, margin: '0 0 6px' }, children: "Nitrogen Versions" }), _jsx("p", { style: {
|
|
4
|
+
color: 'var(--theme-elevation-600)',
|
|
5
|
+
fontSize: 13,
|
|
6
|
+
margin: 0,
|
|
7
|
+
maxWidth: 920,
|
|
8
|
+
}, children: "Declared spec is read from package.json. Installed version is resolved from node_modules, so dev link/file dependencies and production installs are shown separately." })] }));
|
|
4
9
|
};
|
|
5
10
|
export default NitrogenPackageVersionsHeaderField;
|
package/package.json
CHANGED