@explorer02/cfm-survey-sdk 0.2.9 → 0.3.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/dist/cli/index.js +41 -38
- package/dist/cli/index.mjs +39 -36
- package/package.json +1 -1
- package/templates/docs/00-integration/agent-execution-flow.md +6 -6
- package/templates/docs/00-integration/agent-operating-contract.md +1 -2
- package/templates/docs/00-integration/component-checklist.md +0 -1
- package/templates/docs/00-integration/ui-customization-wizard.md +38 -29
- package/templates/docs/00-integration/wizard-chrome-contract.md +1 -11
- package/templates/docs/00-integration/wizard-config-handoff.md +19 -11
- package/templates/docs/00-integration/wizard-post-customize-build.md +0 -6
- package/templates/docs/00-integration/wizard-question-type-styling.md +3 -3
- package/templates/docs/00-integration/wizard-troubleshooting.md +4 -20
- package/templates/docs/index.md +1 -1
- package/templates/docs/templates/CsatMatrixScale.tsx +59 -53
- package/templates/docs/templates/CustomSliderTrack.tsx +8 -17
- package/templates/docs/templates/FileUploadScale.tsx +4 -12
- package/templates/docs/templates/Header.tsx +48 -32
- package/templates/docs/templates/HeatmapScale.tsx +2 -5
- package/templates/docs/templates/LikertMatrixScale.tsx +45 -57
- package/templates/docs/templates/MatrixDropdown.tsx +11 -12
- package/templates/docs/templates/Question.tsx +24 -4
- package/templates/docs/templates/RankOrderScale.tsx +9 -42
- package/templates/docs/templates/RatingScale.tsx +0 -38
- package/templates/docs/templates/SliderMatrixScale.tsx +3 -4
- package/templates/docs/templates/verify-agent-build.sh +0 -17
- package/templates/preview-harness/preview-bridge.inline.js +17 -14
- package/templates/preview-harness/previewPages.js +23 -15
- package/templates/preview-harness/previewPages.ts +7 -5
- package/templates/preview-harness/vite-app/src/QuestionPreview.tsx +22 -14
- package/templates/preview-harness/vite-app/src/fixtures/questions.ts +13 -2
- package/templates/preview-harness/vite-app/src/preview-live-overrides.css +6 -11
- package/templates/previewBridge.ts +5 -5
- package/templates/survey-theme.css +17 -17
- package/templates/wizard-dist/assets/{PreviewMock-CysRws9G.js → PreviewMock-Bax7oRAL.js} +1 -1
- package/templates/wizard-dist/assets/{TypePanel-DWX1LL3q.js → TypePanel-D2t4FPSd.js} +1 -1
- package/templates/wizard-dist/assets/index-BhWM50Yu.css +1 -0
- package/templates/wizard-dist/assets/index-c5lka74l.js +34 -0
- package/templates/wizard-dist/index.html +2 -2
- package/templates/wizard-dist/assets/index-DIuc7AU2.js +0 -34
- package/templates/wizard-dist/assets/index-pCM8n0FT.css +0 -1
|
@@ -6,7 +6,6 @@ import {
|
|
|
6
6
|
scaleRadioDotStyle,
|
|
7
7
|
scaleCellSelectedStyle,
|
|
8
8
|
} from '@/lib/surveyUi/selectionStyles';
|
|
9
|
-
import { hintLabelStyle } from '@/lib/surveyUi/labelStyles';
|
|
10
9
|
import { getAccentColor, npsValueFromOption, starValueFromOption } from './surveyUiScaleUtils';
|
|
11
10
|
import { getEmojiForIndex } from './surveyUiIcons';
|
|
12
11
|
|
|
@@ -17,10 +16,6 @@ type RatingScaleProps = {
|
|
|
17
16
|
onSelect: (value: AnswerValue) => void;
|
|
18
17
|
variant?: 'nps' | 'star';
|
|
19
18
|
buttonStyle?: 'standard' | 'numbered' | 'emoji';
|
|
20
|
-
minLabel?: string;
|
|
21
|
-
midLabel?: string;
|
|
22
|
-
maxLabel?: string;
|
|
23
|
-
midLabelIndex?: number;
|
|
24
19
|
};
|
|
25
20
|
|
|
26
21
|
function resolveBadgeColor(index: number, value: number): string {
|
|
@@ -49,10 +44,6 @@ export default function RatingScale({
|
|
|
49
44
|
onSelect,
|
|
50
45
|
variant = 'nps',
|
|
51
46
|
buttonStyle = 'numbered',
|
|
52
|
-
minLabel,
|
|
53
|
-
midLabel,
|
|
54
|
-
maxLabel,
|
|
55
|
-
midLabelIndex,
|
|
56
47
|
}: RatingScaleProps) {
|
|
57
48
|
const resolvedOptions = options.map((option, index) => {
|
|
58
49
|
const value =
|
|
@@ -72,37 +63,9 @@ export default function RatingScale({
|
|
|
72
63
|
gap: 'var(--cfm-nps-cell-gap, 2px)',
|
|
73
64
|
};
|
|
74
65
|
|
|
75
|
-
const hintRow = (minLabel || midLabel || maxLabel) ? (
|
|
76
|
-
<div className="relative mb-3 h-6 w-full text-xs font-semibold">
|
|
77
|
-
<span
|
|
78
|
-
className="absolute left-0 top-0 max-w-[30%] text-left leading-tight"
|
|
79
|
-
style={hintLabelStyle()}
|
|
80
|
-
dangerouslySetInnerHTML={{ __html: minLabel ?? '' }}
|
|
81
|
-
/>
|
|
82
|
-
{midLabel && (
|
|
83
|
-
<span
|
|
84
|
-
className="absolute top-0 -translate-x-1/2 max-w-[40%] text-center leading-tight"
|
|
85
|
-
style={{
|
|
86
|
-
...hintLabelStyle(),
|
|
87
|
-
left: `${midLabelIndex !== undefined && columnCount > 1
|
|
88
|
-
? (midLabelIndex / (columnCount - 1)) * 100
|
|
89
|
-
: 50}%`,
|
|
90
|
-
}}
|
|
91
|
-
dangerouslySetInnerHTML={{ __html: midLabel }}
|
|
92
|
-
/>
|
|
93
|
-
)}
|
|
94
|
-
<span
|
|
95
|
-
className="absolute right-0 top-0 max-w-[30%] text-right leading-tight"
|
|
96
|
-
style={hintLabelStyle()}
|
|
97
|
-
dangerouslySetInnerHTML={{ __html: maxLabel ?? '' }}
|
|
98
|
-
/>
|
|
99
|
-
</div>
|
|
100
|
-
) : null;
|
|
101
|
-
|
|
102
66
|
if (buttonStyle === 'emoji') {
|
|
103
67
|
return (
|
|
104
68
|
<div role="radiogroup" className="w-full overflow-x-auto" data-cfm-nps-area>
|
|
105
|
-
{hintRow}
|
|
106
69
|
<div className="min-w-0" style={gridStyle}>
|
|
107
70
|
{resolvedOptions.map((option, index) => {
|
|
108
71
|
const isSelected = selectedValue === option.value;
|
|
@@ -127,7 +90,6 @@ export default function RatingScale({
|
|
|
127
90
|
|
|
128
91
|
return (
|
|
129
92
|
<div role="radiogroup" className="w-full overflow-x-auto" data-cfm-nps-area>
|
|
130
|
-
{hintRow}
|
|
131
93
|
<div className="mb-3 min-w-0" style={gridStyle}>
|
|
132
94
|
{resolvedOptions.map((option, index) => {
|
|
133
95
|
const isSelected = selectedValue === option.value;
|
|
@@ -7,7 +7,6 @@
|
|
|
7
7
|
|
|
8
8
|
import React from 'react';
|
|
9
9
|
import type { SliderMatrixQuestion, MatrixRowAnswers } from '@explorer02/cfm-survey-sdk';
|
|
10
|
-
import { sliderTickLabelStyle } from '@/lib/surveyUi/labelStyles';
|
|
11
10
|
import { tickColorFromIndex } from './surveyUiScaleUtils';
|
|
12
11
|
import { CustomSliderTrack } from './CustomSliderTrack';
|
|
13
12
|
|
|
@@ -98,7 +97,7 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
|
|
|
98
97
|
width: `${sliceWidth}%`, display: 'flex', justifyContent: 'center',
|
|
99
98
|
}}>
|
|
100
99
|
{sliderType === 'graphics' ? (
|
|
101
|
-
<div style={{ wordBreak: 'break-word', textAlign: 'center', lineHeight: '1.2', fontWeight: 500, fontSize: '13px'
|
|
100
|
+
<div style={{ wordBreak: 'break-word', textAlign: 'center', lineHeight: '1.2', fontWeight: 500, color: '#4b5563', fontSize: '13px' }}>
|
|
102
101
|
{tv.label}
|
|
103
102
|
</div>
|
|
104
103
|
) : (
|
|
@@ -122,7 +121,7 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
|
|
|
122
121
|
position: 'absolute', left: `${percentage}%`, transform: 'translateX(-50%)',
|
|
123
122
|
width: `${sliceWidth}%`, display: 'flex', justifyContent: 'center',
|
|
124
123
|
}}>
|
|
125
|
-
<span style={{ wordBreak: 'break-word', textAlign: 'center', lineHeight: '1.2'
|
|
124
|
+
<span style={{ wordBreak: 'break-word', textAlign: 'center', lineHeight: '1.2' }}>{m}</span>
|
|
126
125
|
</div>
|
|
127
126
|
);
|
|
128
127
|
})
|
|
@@ -152,7 +151,7 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
|
|
|
152
151
|
return (
|
|
153
152
|
<div key={row.id} style={{
|
|
154
153
|
display: 'flex', width: '100%', alignItems: 'center',
|
|
155
|
-
backgroundColor: '
|
|
154
|
+
backgroundColor: '#f3f4f6', borderRadius: '12px', padding: '16px', boxSizing: 'border-box',
|
|
156
155
|
}}>
|
|
157
156
|
<div style={{ flex: '0 0 25%', paddingRight: '16px', fontSize: '15px', color: '#111827', wordWrap: 'break-word', display: 'flex', alignItems: 'center' }}>
|
|
158
157
|
{row.statementText !== 'Question' && row.statementText !== '' ? (
|
|
@@ -102,23 +102,6 @@ if ! grep -q "layoutFlags" "$PREVIEW_BRIDGE"; then
|
|
|
102
102
|
fi
|
|
103
103
|
echo "OK: previewBridge.ts present with layoutFlags"
|
|
104
104
|
|
|
105
|
-
# Scale templates must consume wizard CSS vars (not only RatingScale)
|
|
106
|
-
SCALE_CFM_COUNT=0
|
|
107
|
-
for candidate in src/components/LikertMatrixScale.tsx components/LikertMatrixScale.tsx app/components/LikertMatrixScale.tsx; do
|
|
108
|
-
if [ -f "$candidate" ] && grep -q -- '--cfm-' "$candidate"; then SCALE_CFM_COUNT=1; break; fi
|
|
109
|
-
done
|
|
110
|
-
if [ "$SCALE_CFM_COUNT" -eq 0 ]; then
|
|
111
|
-
echo "WARN: LikertMatrixScale.tsx missing --cfm-* vars — copy from docs/templates"
|
|
112
|
-
fi
|
|
113
|
-
|
|
114
|
-
SCALE_CSAT_COUNT=0
|
|
115
|
-
for candidate in src/components/CsatMatrixScale.tsx components/CsatMatrixScale.tsx app/components/CsatMatrixScale.tsx; do
|
|
116
|
-
if [ -f "$candidate" ] && grep -q -- '--cfm-' "$candidate"; then SCALE_CSAT_COUNT=1; break; fi
|
|
117
|
-
done
|
|
118
|
-
if [ "$SCALE_CSAT_COUNT" -eq 0 ]; then
|
|
119
|
-
echo "WARN: CsatMatrixScale.tsx missing --cfm-* vars — copy from docs/templates"
|
|
120
|
-
fi
|
|
121
|
-
|
|
122
105
|
REQUIRED_TYPES=(MCQ TEXTFIELD NPS_SCALE CFM_MATRIX CSAT_MATRIX RATING_MATRIX SLIDER_MATRIX FILE_UPLOAD TEXT_AND_MEDIA HEATMAP RANK_ORDER)
|
|
123
106
|
QUESTION_FILE=""
|
|
124
107
|
for candidate in src/components/Question.tsx components/Question.tsx app/components/Question.tsx; do
|
|
@@ -49,6 +49,7 @@
|
|
|
49
49
|
if (patch.logoUrl) {
|
|
50
50
|
img.src = patch.logoUrl;
|
|
51
51
|
img.style.display = '';
|
|
52
|
+
img.style.background = 'transparent';
|
|
52
53
|
} else if (el.hasAttribute('data-cfm-logo')) {
|
|
53
54
|
img.style.display = 'none';
|
|
54
55
|
img.removeAttribute('src');
|
|
@@ -171,20 +172,22 @@
|
|
|
171
172
|
}
|
|
172
173
|
}
|
|
173
174
|
}
|
|
174
|
-
if (patch.previewState
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
175
|
+
if (patch.previewState) {
|
|
176
|
+
if (patch.previewState.textfieldPlaceholder !== undefined) {
|
|
177
|
+
document.querySelectorAll('[data-cfm-textfield]').forEach(function (el) {
|
|
178
|
+
el.setAttribute('placeholder', patch.previewState.textfieldPlaceholder || '');
|
|
179
|
+
});
|
|
180
|
+
}
|
|
181
|
+
if (patch.previewState.hintMinText !== undefined) {
|
|
182
|
+
document.querySelectorAll('[data-cfm-hint-min], .cfm-hint-min').forEach(function (el) {
|
|
183
|
+
el.textContent = patch.previewState.hintMinText || '';
|
|
184
|
+
});
|
|
185
|
+
}
|
|
186
|
+
if (patch.previewState.hintMaxText !== undefined) {
|
|
187
|
+
document.querySelectorAll('[data-cfm-hint-max], .cfm-hint-max').forEach(function (el) {
|
|
188
|
+
el.textContent = patch.previewState.hintMaxText || '';
|
|
189
|
+
});
|
|
190
|
+
}
|
|
188
191
|
}
|
|
189
192
|
}
|
|
190
193
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
const sharedStyles = `
|
|
4
4
|
.cfm-header { height:var(--cfm-header-height); background:var(--cfm-header-bg); border-bottom:1px solid var(--cfm-header-border); display:flex; align-items:center; padding:0 var(--cfm-header-padding-x); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
|
|
5
|
-
.cfm-header-logo { width:var(--cfm-header-logo-width); height:var(--cfm-header-logo-height); object-fit:contain; padding:var(--cfm-header-logo-padding); background:
|
|
5
|
+
.cfm-header-logo { width:var(--cfm-header-logo-width); height:var(--cfm-header-logo-height); object-fit:contain; padding:var(--cfm-header-logo-padding); background:transparent; }
|
|
6
6
|
.cfm-header-company { font-size:var(--cfm-header-company-size); font-weight:var(--cfm-header-company-weight); color:var(--cfm-header-company-color); margin-left:16px; }
|
|
7
7
|
.cfm-footer { background:var(--cfm-footer-bg); color:var(--cfm-footer-text); padding:var(--cfm-footer-padding-y) var(--cfm-footer-padding-x); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-end; }
|
|
8
8
|
.cfm-footer-links { display:flex; gap:24px; flex-wrap:wrap; }
|
|
@@ -12,27 +12,31 @@ const sharedStyles = `
|
|
|
12
12
|
.cfm-mcq-option { border:2px solid #e5e7eb; border-radius:var(--cfm-mcq-border-radius); padding:var(--cfm-mcq-card-padding); margin-bottom:var(--cfm-mcq-option-gap); display:flex; align-items:center; gap:8px; }
|
|
13
13
|
.cfm-mcq-option.selected { border-color:var(--cfm-mcq-selected-accent); background:var(--cfm-mcq-selected-bg); }
|
|
14
14
|
.cfm-nps-row { display:flex; gap:var(--cfm-nps-cell-gap); flex-wrap:wrap; }
|
|
15
|
-
.cfm-nps-cell { width:var(--cfm-nps-cell-size); height:var(--cfm-nps-cell-size); border-radius:var(--cfm-border-radius); background:var(--cfm-nps-track-bar); display:flex; align-items:center; justify-content:center; font-size:14px; }
|
|
16
|
-
.cfm-nps-cell.selected {
|
|
15
|
+
.cfm-nps-cell { width:var(--cfm-nps-cell-size); height:var(--cfm-nps-cell-size); border-radius:var(--cfm-border-radius); background:var(--cfm-nps-track-bar,#f2f2f2); display:flex; align-items:center; justify-content:center; font-size:14px; box-sizing:border-box; }
|
|
16
|
+
.cfm-nps-cell.selected { border:2px solid var(--cfm-input-focus-ring); background:var(--cfm-matrix-selected); color:#fff; }
|
|
17
|
+
.cfm-hint-row { display:flex; justify-content:space-between; font-size:12px; font-weight:600; margin-bottom:8px; }
|
|
18
|
+
.cfm-hint-min, .cfm-hint-max { color:var(--cfm-hint-label-color,#6b7280); background:var(--cfm-hint-label-bg,transparent); padding:2px 4px; border-radius:4px; }
|
|
19
|
+
.cfm-matrix-col-header { font-size:13px; font-weight:500; text-align:center; color:var(--cfm-csat-column-label-color,var(--cfm-matrix-column-label-color,#4b5563)); background:var(--cfm-csat-column-label-bg,var(--cfm-matrix-column-label-bg,transparent)); padding:2px 6px; border-radius:4px; }
|
|
17
20
|
.cfm-matrix-row { display:flex; align-items:center; padding:8px 0; background:var(--cfm-row-band); margin-bottom:4px; }
|
|
18
21
|
.cfm-matrix-label { width:var(--cfm-matrix-row-width); flex-shrink:0; padding:0 16px; font-size:14px; font-weight:500; }
|
|
19
22
|
.cfm-matrix-cells { display:flex; gap:8px; flex:1; justify-content:center; }
|
|
20
|
-
.cfm-matrix-cell { width:var(--cfm-csat-cell-size); height:var(--cfm-csat-cell-size); border-radius:50%; border:2px solid #d1d5db; }
|
|
21
|
-
.cfm-matrix-cell.selected { border-color:var(--cfm-
|
|
23
|
+
.cfm-matrix-cell { width:var(--cfm-csat-cell-size,18px); height:var(--cfm-csat-cell-size,18px); border-radius:50%; border:2px solid #d1d5db; box-sizing:border-box; }
|
|
24
|
+
.cfm-matrix-cell.selected { border-color:var(--cfm-input-focus-ring); background:var(--cfm-matrix-selected); }
|
|
22
25
|
.cfm-emoji { font-size:var(--cfm-csat-emoji-size); opacity:var(--cfm-csat-unselected-opacity); }
|
|
23
|
-
.cfm-emoji.selected { opacity:1; outline:2px solid var(--cfm-
|
|
24
|
-
.cfm-star { color:var(--cfm-
|
|
25
|
-
.cfm-star.selected { opacity:1; }
|
|
26
|
-
.cfm-badge { width:40px; height:40px; border-radius:8px; background:var(--cfm-
|
|
26
|
+
.cfm-emoji.selected { opacity:1; outline:2px solid var(--cfm-input-focus-ring); border-radius:8px; background:var(--cfm-matrix-selected); }
|
|
27
|
+
.cfm-star { color:var(--cfm-input-focus-ring); font-size:var(--cfm-csat-emoji-size,24px); opacity:var(--cfm-csat-unselected-opacity); }
|
|
28
|
+
.cfm-star.selected { opacity:1; color:var(--cfm-matrix-selected); }
|
|
29
|
+
.cfm-badge { width:40px; height:40px; border-radius:8px; background:var(--cfm-number-color-0,#9ca3af); color:white; display:flex; align-items:center; justify-content:center; font-weight:600; border:1px solid #d1d5db; box-sizing:border-box; }
|
|
30
|
+
.cfm-badge.selected { border:2px solid var(--cfm-input-focus-ring); background:var(--cfm-matrix-selected); color:#fff; }
|
|
27
31
|
.cfm-slider-track { height:8px; background:var(--cfm-slider-track); border-radius:4px; position:relative; margin:24px 0; }
|
|
28
32
|
.cfm-slider-thumb { width:20px; height:20px; background:var(--cfm-slider-thumb); border-radius:50%; position:absolute; top:-6px; left:60%; }
|
|
29
33
|
.cfm-tick { width:var(--cfm-slider-tick-size); height:var(--cfm-slider-tick-size); background:var(--cfm-slider-tick); border-radius:4px; font-size:11px; display:flex; align-items:center; justify-content:center; color:white; }
|
|
30
|
-
.cfm-dropzone { border:2px dashed var(--cfm-upload-
|
|
34
|
+
.cfm-dropzone { border-width:2px; border-style:var(--cfm-upload-border-style,dashed); border-color:var(--cfm-upload-border-color,#d1d5db); border-radius:var(--cfm-border-radius); padding:var(--cfm-upload-padding,24px); background:var(--cfm-upload-fill,#f9fafb); text-align:center; color:var(--cfm-text); }
|
|
31
35
|
.cfm-input { width:100%; height:var(--cfm-input-height); border:1px solid var(--cfm-input-border); border-radius:var(--cfm-input-radius); padding:0 var(--cfm-input-padding); font-family:inherit; box-sizing:border-box; }
|
|
32
36
|
.cfm-rank-item { background:var(--cfm-rank-item-bg); padding:var(--cfm-rank-item-padding); margin-bottom:var(--cfm-rank-item-gap); border-radius:var(--cfm-border-radius); display:flex; align-items:center; gap:12px; }
|
|
33
37
|
.cfm-rank-badge { background:var(--cfm-rank-badge); color:white; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; }
|
|
34
38
|
.cfm-handle { color:var(--cfm-rank-handle); cursor:grab; }
|
|
35
|
-
.cfm-pin { width:var(--cfm-heatmap-pin-size); height:var(--cfm-heatmap-pin-size); background:var(--cfm-heatmap-pin); border:2px solid
|
|
39
|
+
.cfm-pin { width:var(--cfm-heatmap-pin-size); height:var(--cfm-heatmap-pin-size); background:var(--cfm-heatmap-pin); border:2px solid var(--cfm-heatmap-pin-border,#fff); border-radius:50%; position:absolute; }
|
|
36
40
|
.cfm-media { max-width:var(--cfm-media-max-width); border-radius:var(--cfm-media-radius); background:#e5e7eb; height:200px; display:flex; align-items:center; justify-content:center; }
|
|
37
41
|
.cfm-btn-primary { background:var(--cfm-primary); color:var(--cfm-button-text); border:none; border-radius:var(--cfm-border-radius); padding:10px 20px; }
|
|
38
42
|
.cfm-btn-back { background:transparent; color:var(--cfm-primary); border:1px solid var(--cfm-primary); border-radius:var(--cfm-border-radius); padding:10px 20px; }
|
|
@@ -44,8 +48,12 @@ function cells(n) {
|
|
|
44
48
|
).join('');
|
|
45
49
|
}
|
|
46
50
|
|
|
51
|
+
function matrixColHeaders(n) {
|
|
52
|
+
return `<div class="cfm-matrix-row" style="background:transparent;margin-bottom:8px"><div class="cfm-matrix-label"></div><div class="cfm-matrix-cells">${Array.from({ length: n }, (_, i) => `<span class="cfm-matrix-col-header">${i + 1}</span>`).join('')}</div></div>`;
|
|
53
|
+
}
|
|
54
|
+
|
|
47
55
|
function matrixPreview(label) {
|
|
48
|
-
return
|
|
56
|
+
return `${matrixColHeaders(5)}<div class="cfm-matrix-row"><div class="cfm-matrix-label">${label}</div><div class="cfm-matrix-cells">${cells(5)}</div></div>`;
|
|
49
57
|
}
|
|
50
58
|
|
|
51
59
|
const npsCells = Array.from({ length: 11 }, (_, i) =>
|
|
@@ -63,7 +71,7 @@ const PREVIEW_PAGE_DEFS = [
|
|
|
63
71
|
{ key: 'MCQ_multiple', title: 'MCQ Multiple', body: `<p style="font-weight:600;margin-bottom:16px">Select all that apply</p><div class="cfm-mcq-option selected"><span>☑</span> Option A</div><div class="cfm-mcq-option"><span>☐</span> Option B</div>` },
|
|
64
72
|
{ key: 'TEXTFIELD_short', title: 'Text Short', body: `<p style="font-weight:600;margin-bottom:8px">Your name</p><input class="cfm-input" placeholder="Type here..." />` },
|
|
65
73
|
{ key: 'TEXTFIELD_long', title: 'Text Long', body: `<p style="font-weight:600;margin-bottom:8px">Comments</p><textarea class="cfm-input" style="height:120px;padding:12px" placeholder="Type your response..."></textarea>` },
|
|
66
|
-
{ key: 'NPS_SCALE', title: 'NPS', body: `<p style="font-weight:600;margin-bottom:8px">How likely are you to recommend us?</p><div class="cfm-nps-row">${npsCells}</div>` },
|
|
74
|
+
{ key: 'NPS_SCALE', title: 'NPS', body: `<p style="font-weight:600;margin-bottom:8px">How likely are you to recommend us?</p><div class="cfm-hint-row"><span class="cfm-hint-min" data-cfm-hint-min>Not likely</span><span class="cfm-hint-max" data-cfm-hint-max>Very likely</span></div><div class="cfm-nps-row">${npsCells}</div>` },
|
|
67
75
|
{ key: 'CFM_likert', title: 'CFM Likert', body: matrixPreview('Statement item 1') },
|
|
68
76
|
{ key: 'CFM_bipolar', title: 'CFM Bipolar', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width)">Left</div><div class="cfm-matrix-cells">${cells(5)}</div><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width);text-align:right">Right</div></div>` },
|
|
69
77
|
{ key: 'CFM_transpose', title: 'CFM Transpose', body: matrixPreview('Scale item (transposed)') },
|
|
@@ -71,7 +79,7 @@ const PREVIEW_PAGE_DEFS = [
|
|
|
71
79
|
{ key: 'CFM_dropdown', title: 'CFM Dropdown', body: `<div class="cfm-matrix-label">Statement 1</div><select class="cfm-input" style="margin-top:8px"><option>Select...</option></select>` },
|
|
72
80
|
{ key: 'CSAT_emoji', title: 'CSAT Emoji', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">How satisfied?</div><div class="cfm-matrix-cells"><span class="cfm-emoji selected">😞</span><span class="cfm-emoji">🙂</span><span class="cfm-emoji">😊</span></div></div>` },
|
|
73
81
|
{ key: 'CSAT_star', title: 'CSAT Star', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Rate us</div><div class="cfm-matrix-cells"><span class="cfm-star selected">★</span><span class="cfm-star selected">★</span><span class="cfm-star">★</span></div></div>` },
|
|
74
|
-
{ key: 'CSAT_numbered', title: 'CSAT Numbered', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Score</div><div class="cfm-matrix-cells"><div class="cfm-badge">1</div><div class="cfm-badge">2</div><div class="cfm-badge">3</div></div></div>` },
|
|
82
|
+
{ key: 'CSAT_numbered', title: 'CSAT Numbered', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Score</div><div class="cfm-matrix-cells"><div class="cfm-badge">1</div><div class="cfm-badge selected">2</div><div class="cfm-badge">3</div></div></div>` },
|
|
75
83
|
{ key: 'CSAT_graphics', title: 'CSAT Graphics', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Slider row</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div></div></div>` },
|
|
76
84
|
{ key: 'CSAT_carousel', title: 'CSAT Carousel', body: `${matrixPreview('Carousel row')}<div style="text-align:center"><span style="color:var(--cfm-csat-accent)">●</span> ○</div>` },
|
|
77
85
|
{ key: 'CSAT_dropdown', title: 'CSAT Dropdown', body: `<div class="cfm-matrix-label">Statement</div><select class="cfm-input" style="margin-top:8px"><option>Choose rating...</option></select>` },
|
|
@@ -81,7 +89,7 @@ const PREVIEW_PAGE_DEFS = [
|
|
|
81
89
|
{ key: 'RATING_emoji', title: 'Rating Emoji', body: `<div class="cfm-matrix-cells" style="padding:16px"><span class="cfm-emoji">🙂</span><span class="cfm-emoji selected">😊</span><span class="cfm-emoji">🤩</span></div>` },
|
|
82
90
|
{ key: 'RATING_graphics', title: 'Rating Graphics', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Experience</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div></div></div>` },
|
|
83
91
|
{ key: 'RATING_slider', title: 'Rating Slider', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Rate on slider</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div></div></div>` },
|
|
84
|
-
{ key: 'SLIDER_matrix', title: 'Slider Matrix', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Statement 1</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div></div></div>` },
|
|
92
|
+
{ key: 'SLIDER_matrix', title: 'Slider Matrix', body: `<div class="cfm-matrix-row" style="background:transparent;margin-bottom:4px"><div class="cfm-matrix-label"></div><div style="flex:1;padding:0 16px;display:flex;justify-content:space-between"><span class="cfm-matrix-col-header">Low</span><span class="cfm-matrix-col-header">High</span></div></div><div class="cfm-matrix-row"><div class="cfm-matrix-label">Statement 1</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div><div style="display:flex;justify-content:space-between;margin-top:8px"><span class="cfm-tick">0</span><span class="cfm-tick">5</span><span class="cfm-tick">10</span></div></div></div>` },
|
|
85
93
|
{ key: 'FILE_UPLOAD', title: 'File Upload', body: `<div data-cfm-dropzone-style="dashed" class="cfm-dropzone">Drop files here or click to upload</div>` },
|
|
86
94
|
{ key: 'TEXT_AND_MEDIA', title: 'Text & Media', body: `<div class="cfm-media">Media preview</div>` },
|
|
87
95
|
{ key: 'HEATMAP', title: 'Heatmap', body: `<div style="position:relative;background:#e5e7eb;height:240px;border-radius:var(--cfm-border-radius)"><div class="cfm-pin" style="top:40%;left:55%"></div></div>` },
|
|
@@ -3,9 +3,8 @@ export type PreviewPageDef = { key: string; title: string; body: string };
|
|
|
3
3
|
|
|
4
4
|
const sharedStyles = `
|
|
5
5
|
.cfm-header { height:var(--cfm-header-height); background:var(--cfm-header-bg); border-bottom:1px solid var(--cfm-header-border); display:flex; align-items:center; padding:0 var(--cfm-header-padding-x); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
|
|
6
|
-
.cfm-header-
|
|
7
|
-
.cfm-header-
|
|
8
|
-
.cfm-header-company { font-size:var(--cfm-header-company-size); font-weight:var(--cfm-header-company-weight); color:var(--cfm-header-company-color); }
|
|
6
|
+
.cfm-header-logo { width:var(--cfm-header-logo-width); height:var(--cfm-header-logo-height); object-fit:contain; padding:var(--cfm-header-logo-padding); background:var(--cfm-primary); }
|
|
7
|
+
.cfm-header-company { font-size:var(--cfm-header-company-size); font-weight:var(--cfm-header-company-weight); color:var(--cfm-header-company-color); margin-left:16px; }
|
|
9
8
|
.cfm-footer { background:var(--cfm-footer-bg); color:var(--cfm-footer-text); padding:var(--cfm-footer-padding-y) var(--cfm-footer-padding-x); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-end; }
|
|
10
9
|
.cfm-footer-links { display:flex; gap:24px; flex-wrap:wrap; }
|
|
11
10
|
.cfm-footer-links a { color:var(--cfm-footer-link); text-decoration:none; font-size:12px; }
|
|
@@ -29,7 +28,7 @@ const sharedStyles = `
|
|
|
29
28
|
.cfm-slider-track { height:8px; background:var(--cfm-slider-track); border-radius:4px; position:relative; margin:24px 0; }
|
|
30
29
|
.cfm-slider-thumb { width:20px; height:20px; background:var(--cfm-slider-thumb); border-radius:50%; position:absolute; top:-6px; left:60%; }
|
|
31
30
|
.cfm-tick { width:var(--cfm-slider-tick-size); height:var(--cfm-slider-tick-size); background:var(--cfm-slider-tick); border-radius:4px; font-size:11px; display:flex; align-items:center; justify-content:center; color:white; }
|
|
32
|
-
.cfm-dropzone { border:2px dashed var(--cfm-upload-
|
|
31
|
+
.cfm-dropzone { border:2px dashed var(--cfm-upload-accent); border-radius:var(--cfm-border-radius); padding:var(--cfm-upload-padding); text-align:center; color:var(--cfm-text); }
|
|
33
32
|
.cfm-input { width:100%; height:var(--cfm-input-height); border:1px solid var(--cfm-input-border); border-radius:var(--cfm-input-radius); padding:0 var(--cfm-input-padding); font-family:inherit; }
|
|
34
33
|
.cfm-input:focus { outline:2px solid var(--cfm-input-focus-ring); }
|
|
35
34
|
.cfm-rank-item { background:var(--cfm-rank-item-bg); padding:var(--cfm-rank-item-padding); margin-bottom:var(--cfm-rank-item-gap); border-radius:var(--cfm-border-radius); display:flex; align-items:center; gap:12px; }
|
|
@@ -60,7 +59,10 @@ export const PREVIEW_PAGE_DEFS: PreviewPageDef[] = [
|
|
|
60
59
|
{
|
|
61
60
|
key: 'header',
|
|
62
61
|
title: 'Header',
|
|
63
|
-
body: `<header class="cfm-header"
|
|
62
|
+
body: `<header class="cfm-header">
|
|
63
|
+
<img data-cfm-logo class="cfm-header-logo" src="" alt="Logo" style="display:none" />
|
|
64
|
+
<span data-cfm-company class="cfm-header-company">Company Name</span>
|
|
65
|
+
</header>`,
|
|
64
66
|
},
|
|
65
67
|
{
|
|
66
68
|
key: 'footer',
|
|
@@ -46,7 +46,28 @@ function QuestionPreviewInner({ question, initialValue }: QuestionPreviewProps)
|
|
|
46
46
|
};
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
if (
|
|
49
|
+
if ('statementRows' in q && Array.isArray(q.statementRows)) {
|
|
50
|
+
const rows = q.statementRows;
|
|
51
|
+
if (previewState.multiStatement) {
|
|
52
|
+
q = {
|
|
53
|
+
...q,
|
|
54
|
+
statementRows:
|
|
55
|
+
rows.length >= 2
|
|
56
|
+
? rows
|
|
57
|
+
: [
|
|
58
|
+
...rows,
|
|
59
|
+
{
|
|
60
|
+
id: 'r2',
|
|
61
|
+
statementText: 'Second statement row',
|
|
62
|
+
},
|
|
63
|
+
],
|
|
64
|
+
} as typeof q;
|
|
65
|
+
} else {
|
|
66
|
+
q = { ...q, statementRows: rows.slice(0, 1) } as typeof q;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
if (previewState.hintMinText !== undefined || previewState.hintMaxText !== undefined) {
|
|
50
71
|
if (q.type === 'NPS_SCALE') {
|
|
51
72
|
q = {
|
|
52
73
|
...q,
|
|
@@ -65,19 +86,6 @@ function QuestionPreviewInner({ question, initialValue }: QuestionPreviewProps)
|
|
|
65
86
|
}
|
|
66
87
|
}
|
|
67
88
|
|
|
68
|
-
const matrixTypes = new Set(['CFM_MATRIX', 'CSAT_MATRIX', 'RATING_MATRIX', 'SLIDER_MATRIX']);
|
|
69
|
-
if ('statementRows' in q && matrixTypes.has(q.type)) {
|
|
70
|
-
const rows = q.statementRows ?? [];
|
|
71
|
-
if (previewState.multiStatement) {
|
|
72
|
-
if (rows.length === 1) {
|
|
73
|
-
const extra = { id: 'r2', statementText: 'Second statement row' };
|
|
74
|
-
q = { ...q, statementRows: [...rows, extra] } as typeof q;
|
|
75
|
-
}
|
|
76
|
-
} else if (rows.length > 1) {
|
|
77
|
-
q = { ...q, statementRows: rows.slice(0, 1) } as typeof q;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
89
|
if (previewState.rankVariant === 'drag' && q.type === 'RANK_ORDER') {
|
|
82
90
|
q = { ...q, interactionMode: 'dragAndDrop', optionDisplay: 'textOnly' };
|
|
83
91
|
}
|
|
@@ -11,6 +11,15 @@ const base = (partial: Partial<SurveyQuestion> & { type: SurveyQuestion['type']
|
|
|
11
11
|
...partial,
|
|
12
12
|
}) as SurveyQuestion;
|
|
13
13
|
|
|
14
|
+
const MATRIX_ROW_SINGLE = [
|
|
15
|
+
{ id: 'r1', statementText: 'The product is easy to use' },
|
|
16
|
+
];
|
|
17
|
+
|
|
18
|
+
const MATRIX_ROWS_MULTI = [
|
|
19
|
+
{ id: 'r1', statementText: 'The product is easy to use' },
|
|
20
|
+
{ id: 'r2', statementText: 'Support was helpful' },
|
|
21
|
+
];
|
|
22
|
+
|
|
14
23
|
export const FIXTURE_INTRO: SpecialPage = {
|
|
15
24
|
id: 'preview-intro',
|
|
16
25
|
header: 'Welcome to our survey',
|
|
@@ -94,7 +103,7 @@ export const FIXTURE_TEXT_LONG = base({
|
|
|
94
103
|
|
|
95
104
|
export const FIXTURE_CFM_LIKERT = base({
|
|
96
105
|
type: 'CFM_MATRIX',
|
|
97
|
-
statementRows:
|
|
106
|
+
statementRows: MATRIX_ROW_SINGLE,
|
|
98
107
|
scaleColumns: [
|
|
99
108
|
{ id: 'c1', label: 'Strongly disagree' },
|
|
100
109
|
{ id: 'c2', label: 'Disagree' },
|
|
@@ -227,7 +236,9 @@ export const FIXTURE_RATING_SLIDER = base({
|
|
|
227
236
|
|
|
228
237
|
export const FIXTURE_SLIDER = base({
|
|
229
238
|
type: 'SLIDER_MATRIX',
|
|
230
|
-
statementRows: [
|
|
239
|
+
statementRows: [
|
|
240
|
+
{ id: 'r1', statementText: 'Ease of use', min: 0, max: 10, step: 1 },
|
|
241
|
+
],
|
|
231
242
|
scaleAnchorLabels: ['Not at all', 'Extremely'],
|
|
232
243
|
ticks: {
|
|
233
244
|
count: 11,
|
|
@@ -75,20 +75,15 @@ html.cfm-live-edit .max-w-4xl {
|
|
|
75
75
|
max-width: var(--cfm-max-width, 48rem) !important;
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
html.cfm-live-edit .cfm-header-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
html.cfm-live-edit [data-cfm-logo] {
|
|
85
|
-
background: var(--cfm-header-logo-bg, transparent) !important;
|
|
86
|
-
object-fit: contain !important;
|
|
78
|
+
html.cfm-live-edit .cfm-header-inner {
|
|
79
|
+
flex-direction: var(--cfm-header-flex-direction, column) !important;
|
|
80
|
+
justify-content: var(--cfm-header-justify, flex-start) !important;
|
|
81
|
+
align-items: var(--cfm-header-brand-align, flex-start) !important;
|
|
87
82
|
}
|
|
88
83
|
|
|
89
84
|
html.cfm-live-edit [data-cfm-company] {
|
|
90
|
-
margin-top:
|
|
91
|
-
margin-left: 0 !important;
|
|
85
|
+
margin-top: var(--cfm-header-company-margin-top, 8px) !important;
|
|
86
|
+
margin-left: var(--cfm-header-company-margin-left, 0) !important;
|
|
92
87
|
}
|
|
93
88
|
|
|
94
89
|
html.cfm-live-edit .cfm-footer-inner {
|
|
@@ -71,6 +71,7 @@ function applyContentPatch(patch: ContentPatch): void {
|
|
|
71
71
|
if (patch.logoUrl) {
|
|
72
72
|
img.src = patch.logoUrl;
|
|
73
73
|
img.style.display = '';
|
|
74
|
+
img.style.background = 'transparent';
|
|
74
75
|
} else if (el.hasAttribute('data-cfm-logo')) {
|
|
75
76
|
img.style.display = 'none';
|
|
76
77
|
img.removeAttribute('src');
|
|
@@ -204,17 +205,16 @@ function applyContentPatch(patch: ContentPatch): void {
|
|
|
204
205
|
el.setAttribute('placeholder', placeholder);
|
|
205
206
|
});
|
|
206
207
|
}
|
|
207
|
-
|
|
208
208
|
const hintMin = patch.previewState?.hintMinText;
|
|
209
209
|
if (typeof hintMin === 'string') {
|
|
210
|
-
document.querySelectorAll('[data-cfm-hint-min]').forEach((el) => {
|
|
211
|
-
el.textContent = hintMin;
|
|
210
|
+
document.querySelectorAll('[data-cfm-hint-min], .cfm-hint-min').forEach((el) => {
|
|
211
|
+
(el as HTMLElement).textContent = hintMin;
|
|
212
212
|
});
|
|
213
213
|
}
|
|
214
214
|
const hintMax = patch.previewState?.hintMaxText;
|
|
215
215
|
if (typeof hintMax === 'string') {
|
|
216
|
-
document.querySelectorAll('[data-cfm-hint-max]').forEach((el) => {
|
|
217
|
-
el.textContent = hintMax;
|
|
216
|
+
document.querySelectorAll('[data-cfm-hint-max], .cfm-hint-max').forEach((el) => {
|
|
217
|
+
(el as HTMLElement).textContent = hintMax;
|
|
218
218
|
});
|
|
219
219
|
}
|
|
220
220
|
}
|
|
@@ -18,8 +18,7 @@
|
|
|
18
18
|
--cfm-header-height: 120px;
|
|
19
19
|
--cfm-header-logo-width: 120px;
|
|
20
20
|
--cfm-header-logo-height: 120px;
|
|
21
|
-
--cfm-header-logo-padding:
|
|
22
|
-
--cfm-header-logo-bg: transparent;
|
|
21
|
+
--cfm-header-logo-padding: 10px;
|
|
23
22
|
--cfm-header-bg: #ffffff;
|
|
24
23
|
--cfm-header-company-color: #1a1f36;
|
|
25
24
|
--cfm-header-company-size: 18px;
|
|
@@ -182,7 +181,8 @@ body {
|
|
|
182
181
|
}
|
|
183
182
|
|
|
184
183
|
.cfm-header-inner {
|
|
185
|
-
display:
|
|
184
|
+
display: grid;
|
|
185
|
+
grid-template-columns: 1fr auto 1fr;
|
|
186
186
|
align-items: center;
|
|
187
187
|
gap: var(--cfm-header-brand-gap, 16px);
|
|
188
188
|
padding-left: var(--cfm-header-padding-x);
|
|
@@ -191,27 +191,27 @@ body {
|
|
|
191
191
|
padding-bottom: 12px;
|
|
192
192
|
min-height: var(--cfm-header-height);
|
|
193
193
|
box-sizing: border-box;
|
|
194
|
-
width: 100%;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
.cfm-header-brand {
|
|
198
|
-
display: flex;
|
|
199
|
-
align-items: center;
|
|
200
|
-
gap: var(--cfm-header-brand-gap, 16px);
|
|
201
|
-
min-width: 0;
|
|
202
194
|
}
|
|
203
195
|
|
|
204
|
-
.cfm-header-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
196
|
+
.cfm-header-logo-slot {
|
|
197
|
+
grid-column: var(--cfm-header-logo-col, 1);
|
|
198
|
+
grid-row: 1;
|
|
199
|
+
justify-self: var(--cfm-header-logo-justify, start);
|
|
200
|
+
width: var(--cfm-header-logo-width);
|
|
201
|
+
height: var(--cfm-header-logo-height);
|
|
208
202
|
}
|
|
209
203
|
|
|
210
|
-
.cfm-header-company-slot
|
|
211
|
-
|
|
204
|
+
.cfm-header-company-slot {
|
|
205
|
+
grid-column: var(--cfm-header-company-col, 1);
|
|
206
|
+
grid-row: 1;
|
|
207
|
+
justify-self: var(--cfm-header-company-justify, start);
|
|
208
|
+
align-self: center;
|
|
212
209
|
color: var(--cfm-header-company-color);
|
|
213
210
|
font-size: var(--cfm-header-company-size);
|
|
214
211
|
font-weight: var(--cfm-header-company-weight);
|
|
212
|
+
margin-top: var(--cfm-header-company-margin-top, 0);
|
|
213
|
+
margin-left: var(--cfm-header-company-margin-left, 0);
|
|
214
|
+
margin-right: var(--cfm-header-company-margin-right, 0);
|
|
215
215
|
line-height: 1.2;
|
|
216
216
|
}
|
|
217
217
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{u as x,j as e}from"./index-
|
|
1
|
+
import{u as x,j as e}from"./index-c5lka74l.js";import{b as t}from"./vendor-BwkXDkd3.js";function p(d=150){const l=x(r=>r.config),[a,s]=t.useState(l);return t.useEffect(()=>{const r=window.setTimeout(()=>s(l),d);return()=>window.clearTimeout(r)},[l,d]),a}const h=t.memo(function(){const l=p(150),a=x(n=>n.logoPreviewDataUrl),{global:s}=l,{layout:r,colorScheme:o,buttons:c}=s,m=t.useMemo(()=>r.borderStyle==="sharp"?"rounded-none":r.borderStyle==="pill"?"rounded-[32px]":"rounded-2xl",[r.borderStyle]),i=t.useMemo(()=>r.fontStyle==="serif"?"Georgia, serif":r.fontStyle==="system"?"system-ui, sans-serif":"Inter, sans-serif",[r.fontStyle]),u=a??s.logo.url,f=t.useMemo(()=>({backgroundColor:o.background,color:o.text,borderColor:o.secondary,fontFamily:i}),[o,i]);return e.jsxs("div",{className:`overflow-hidden border shadow-md ${m}`,style:f,children:[r.showHeader&&e.jsxs("div",{className:"flex items-center gap-3 border-b px-5 py-4",style:{borderColor:o.secondary},children:[u&&e.jsx("img",{src:u,alt:"Logo",className:"max-h-6 w-auto object-contain",loading:"lazy"}),e.jsx("span",{className:"text-xs font-semibold tracking-wider",children:s.companyName})]}),e.jsxs("div",{className:"space-y-6 p-6",children:[r.showProgressBar&&e.jsxs("div",{className:"space-y-1.5",children:[e.jsxs("div",{className:"flex justify-between text-[10px] font-semibold text-slate-400",children:[e.jsx("span",{children:"Progress"}),e.jsx("span",{children:"35%"})]}),e.jsx("div",{className:"h-1.5 w-full overflow-hidden rounded-full bg-slate-100",children:e.jsx("div",{className:"h-full w-[35%] rounded-full",style:{backgroundColor:o.accent}})})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("h4",{className:"flex items-start gap-1.5 text-sm font-bold leading-snug",children:[r.showQuestionNumbers&&e.jsx("span",{className:"font-medium text-slate-400",children:"Q1."}),e.jsx("span",{children:s.surveyTitle}),r.showRequiredAsterisk&&e.jsx("span",{className:"text-red-500",children:"*"})]}),e.jsx("p",{className:"text-[11px] text-slate-400",children:"How would you rate your overall experience?"}),e.jsx("div",{className:"grid grid-cols-5 gap-2",children:[1,2,3,4,5].map(n=>e.jsx("div",{className:`flex h-9 items-center justify-center border text-xs font-semibold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:n===1?{backgroundColor:o.secondary,borderColor:o.primary,color:o.primary}:{backgroundColor:o.background,borderColor:o.secondary,color:o.text},children:n},n))})]})]}),e.jsxs("div",{className:"flex items-center justify-between border-t bg-slate-50/50 px-6 py-4",children:[r.showBackButton&&e.jsx("span",{className:`border px-3 py-1.5 text-[10px] font-semibold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:{borderColor:o.secondary,color:o.text},children:c.back}),e.jsx("div",{className:"flex-1"}),r.showNextButton&&e.jsx("span",{className:`px-4 py-1.5 text-[10px] font-bold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:{backgroundColor:o.primary,color:o.buttonText},children:c.next})]})]})});export{h as PreviewMock};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{u as m,j as e,T as M,S as j,R as u,N as t,C as r,a as L,M as P}from"./index-
|
|
1
|
+
import{u as m,j as e,T as M,S as j,R as u,N as t,C as r,a as L,M as P}from"./index-c5lka74l.js";import"./vendor-BwkXDkd3.js";function b({values:o,onPatch:i}){return e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(r,{label:"Label text color",value:o.columnLabelColor,onChange:a=>i({columnLabelColor:a})}),e.jsx(r,{label:"Label background",value:o.columnLabelBgColor,onChange:a=>i({columnLabelBgColor:a})})]})}function k({values:o,onPatch:i}){return e.jsxs("div",{className:"grid grid-cols-1 gap-3 sm:grid-cols-2",children:[e.jsxs("label",{className:"space-y-1 sm:col-span-2",children:[e.jsx("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-slate-500",children:"Min hint label"}),e.jsx("input",{className:"w-full rounded-lg border border-white/10 bg-slate-950/50 px-3 py-2 text-sm text-white",value:o.hintMinText,onChange:a=>i({hintMinText:a.target.value})})]}),e.jsxs("label",{className:"space-y-1 sm:col-span-2",children:[e.jsx("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-slate-500",children:"Max hint label"}),e.jsx("input",{className:"w-full rounded-lg border border-white/10 bg-slate-950/50 px-3 py-2 text-sm text-white",value:o.hintMaxText,onChange:a=>i({hintMaxText:a.target.value})})]}),e.jsx(r,{label:"Hint text color",value:o.hintLabelColor,onChange:a=>i({hintLabelColor:a})}),e.jsx(r,{label:"Hint label background",value:o.hintLabelBgColor,onChange:a=>i({hintLabelBgColor:a})})]})}function p({values:o,onPatch:i,count:a=11}){return e.jsxs("div",{className:"space-y-3",children:[e.jsx(j,{label:"Number label style",value:o.numberLabelMode,onChange:d=>i({numberLabelMode:d}),options:[{value:"traffic",label:"Traffic light (default)"},{value:"monochrome",label:"Monochrome (one color)"},{value:"individual",label:"Individual per number"}]}),o.numberLabelMode==="monochrome"&&e.jsx(r,{label:"Monochrome color",value:o.monochromeNumberColor,onChange:d=>i({monochromeNumberColor:d})}),o.numberLabelMode==="individual"&&e.jsx("div",{className:"grid grid-cols-2 gap-2 sm:grid-cols-3",children:Array.from({length:a},(d,c)=>e.jsx(r,{label:`#${c}`,value:o.individualNumberColors[c]??"#9CA3AF",onChange:C=>{const x=[...o.individualNumberColors];x[c]=C,i({individualNumberColors:x})}},c))})]})}function s({title:o,children:i}){return e.jsxs("div",{className:"space-y-3 rounded-xl border border-white/5 bg-slate-950/20 p-4",children:[e.jsx("h4",{className:"text-xs font-semibold uppercase tracking-wider text-slate-400",children:o}),i]})}function B({type:o,activeFormat:i}){const a=m(l=>l.config.questionTypes[o]),d=m(l=>l.updateQuestionType),c=m(l=>l.previewMultiStatement),C=m(l=>l.setPreviewMultiStatement),x=m(l=>l.heatmapPreviewPin);if(!a)return e.jsx("p",{className:"text-sm text-slate-500",children:"No configuration available for this type."});const n=l=>d(o,l),S=P.includes(o),T=i.includes("star"),h=i.includes("emoji"),v=i.includes("numbered"),N=i.includes("drag"),w=i.includes("dropdown"),f=i.includes("radio"),g=h||T||v||f;return e.jsxs("div",{className:"space-y-4",children:[S&&e.jsx(M,{label:"Preview multiple statements",checked:c,onChange:C}),o==="MCQ"&&"optionGap"in a&&e.jsx(s,{title:"Option style",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(j,{label:"Option style",value:a.optionStyle??a.cardStyle??"outlined",onChange:l=>n({optionStyle:l}),options:[{value:"outlined",label:"Outlined"},{value:"filled",label:"Filled"},{value:"minimal",label:"Minimal"}]}),e.jsx(u,{label:"Option gap",value:a.optionGap,onChange:l=>n({optionGap:l}),min:0,max:32}),e.jsx(u,{label:"Border radius",value:a.borderRadius,onChange:l=>n({borderRadius:l}),min:0,max:24}),e.jsx(u,{label:"Option padding",value:a.optionPadding??12,onChange:l=>n({optionPadding:l}),min:4,max:24})]})}),o==="TEXTFIELD"&&"defaultPlaceholder"in a&&e.jsx(s,{title:"Text input",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsxs("label",{className:"space-y-1 sm:col-span-2",children:[e.jsx("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-slate-500",children:"Default placeholder"}),e.jsx("input",{className:"w-full rounded-lg border border-white/10 bg-slate-950/50 px-3 py-2 text-sm text-white",value:a.defaultPlaceholder,onChange:l=>n({defaultPlaceholder:l.target.value})})]}),e.jsx(t,{label:"Input radius (px)",value:a.inputRadius,onChange:l=>n({inputRadius:l}),min:0,max:24}),e.jsx(r,{label:"Border color",value:a.borderColor,onChange:l=>n({borderColor:l})}),e.jsx(r,{label:"Placeholder color",value:a.placeholderColor,onChange:l=>n({placeholderColor:l})})]})}),o==="NPS_SCALE"&&"buttonStyle"in a&&e.jsxs(e.Fragment,{children:[e.jsxs(s,{title:"NPS buttons",children:[e.jsx(j,{label:"Button style",value:a.buttonStyle,onChange:l=>n({buttonStyle:l}),options:[{value:"standard",label:"Radio"},{value:"numbered",label:"Numbered badges"},{value:"pill",label:"Pill"}]}),e.jsx("p",{className:"text-xs text-slate-500",children:"Selected cell and focus ring come from Theme → Question card."})]}),e.jsx(s,{title:"Hint labels",children:e.jsx(k,{values:a,onPatch:n})}),e.jsx(s,{title:"Number labels",children:e.jsx(p,{values:a,onPatch:n})})]}),o==="CFM_MATRIX"&&"rowLabelWidth"in a&&e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"Matrix layout",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(t,{label:"Row label width (px)",value:a.rowLabelWidth,onChange:l=>n({rowLabelWidth:l}),min:120,max:280}),e.jsx(t,{label:"Bipolar column width (%)",value:a.bipolarColumnWidthPercent,onChange:l=>n({bipolarColumnWidthPercent:l}),min:15,max:40})]})}),e.jsx(s,{title:"Label items",children:e.jsx(b,{values:a,onPatch:n})})]}),o==="CSAT_MATRIX"&&"emojiSize"in a&&e.jsxs(e.Fragment,{children:[(h||g)&&e.jsxs(s,{title:`${L.CSAT_MATRIX} — ${i.replace("CSAT_","")}`,children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[h&&e.jsx(t,{label:"Emoji size (px)",value:a.emojiSize,onChange:l=>n({emojiSize:l}),min:16,max:40}),g&&e.jsx(u,{label:"Unselected opacity",value:Math.round(a.unselectedOpacity*100),onChange:l=>n({unselectedOpacity:l/100}),min:10,max:100})]}),e.jsx("p",{className:"text-xs text-slate-500",children:"Selected cell color and focus ring come from Theme → Question card."})]}),e.jsx(s,{title:"Label items",children:e.jsx(b,{values:a,onPatch:n})}),v&&e.jsx(s,{title:"Number labels",children:e.jsx(p,{values:a,onPatch:n,count:10})})]}),o==="RATING_MATRIX"&&"unselectedStarOpacity"in a&&e.jsxs(e.Fragment,{children:[(h||g)&&e.jsxs(s,{title:`Rating — ${i.replace("RATING_","")}`,children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[h&&e.jsx(t,{label:"Emoji size (px)",value:a.emojiSize,onChange:l=>n({emojiSize:l}),min:16,max:40}),g&&e.jsx(u,{label:"Unselected opacity",value:Math.round(a.unselectedStarOpacity*100),onChange:l=>n({unselectedStarOpacity:l/100}),min:10,max:100})]}),e.jsx("p",{className:"text-xs text-slate-500",children:"Selected cell color and focus ring come from Theme → Question card."})]}),e.jsx(s,{title:"Label items",children:e.jsx(b,{values:a,onPatch:n})}),v&&e.jsx(s,{title:"Number labels",children:e.jsx(p,{values:a,onPatch:n,count:10})})]}),o==="SLIDER_MATRIX"&&"trackColor"in a&&e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"Slider track",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(r,{label:"Track",value:a.trackColor,onChange:l=>n({trackColor:l})}),e.jsx(r,{label:"Thumb",value:a.thumbColor,onChange:l=>n({thumbColor:l})}),e.jsx(r,{label:"Tick",value:a.tickColor,onChange:l=>n({tickColor:l})}),e.jsx(t,{label:"Row label width (px)",value:a.rowLabelWidth,onChange:l=>n({rowLabelWidth:l}),min:120,max:280})]})}),e.jsx(s,{title:"Tick label items",children:e.jsx(b,{values:a,onPatch:n})}),e.jsx(s,{title:"Tick number labels",children:e.jsx(p,{values:a,onPatch:n,count:11})})]}),o==="FILE_UPLOAD"&&"dropzoneStyle"in a&&e.jsx(s,{title:"Dropzone",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(j,{label:"Dropzone border",value:a.dropzoneStyle,onChange:l=>n({dropzoneStyle:l}),options:[{value:"dashed",label:"Dashed"},{value:"solid",label:"Solid"}]}),e.jsx(r,{label:"Border color",value:a.borderColor??a.accentColor,onChange:l=>n({borderColor:l})}),e.jsx(r,{label:"Fill color",value:a.dropzoneFillColor,onChange:l=>n({dropzoneFillColor:l})}),e.jsx(t,{label:"Padding (px)",value:a.dropzonePadding,onChange:l=>n({dropzonePadding:l}),min:12,max:48})]})}),o==="HEATMAP"&&"pinColor"in a&&e.jsx(s,{title:"Heatmap pin",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(r,{label:"Pin color",value:a.pinColor,onChange:l=>n({pinColor:l})}),e.jsx(r,{label:"Pin border",value:a.pinBorderColor,onChange:l=>n({pinBorderColor:l})}),e.jsx(u,{label:"Pin size",value:a.pinSize,onChange:l=>n({pinSize:l}),min:8,max:32}),e.jsxs("p",{className:"text-xs text-slate-500 sm:col-span-2",children:["Click the heatmap image in the preview to place a pin and see styling update live. Pin preview position: ",Math.round(x.x*100),"%, ",Math.round(x.y*100),"%"]})]})}),o==="RANK_ORDER"&&"drag"in a&&e.jsx(s,{title:N?"Drag & drop":w?"Dropdown rank":"Rank order",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[N&&e.jsxs(e.Fragment,{children:[e.jsx(r,{label:"Item background",value:a.drag.itemBg,onChange:l=>n({drag:{...a.drag,itemBg:l}})}),e.jsx(r,{label:"Drag handle",value:a.drag.dragHandleColor,onChange:l=>n({drag:{...a.drag,dragHandleColor:l}})}),e.jsx(r,{label:"Rank badge",value:a.drag.rankBadgeColor,onChange:l=>n({drag:{...a.drag,rankBadgeColor:l}})})]}),w&&e.jsxs(e.Fragment,{children:[e.jsx(r,{label:"Item background",value:a.dropdown.itemBg,onChange:l=>n({dropdown:{...a.dropdown,itemBg:l}})}),e.jsx(r,{label:"Select border",value:a.dropdown.selectBorderColor,onChange:l=>n({dropdown:{...a.dropdown,selectBorderColor:l}})}),e.jsx(r,{label:"Rank badge",value:a.dropdown.rankBadgeColor,onChange:l=>n({dropdown:{...a.dropdown,rankBadgeColor:l}})})]})]})})]})}export{B as TypePanel};
|