@explorer02/cfm-survey-sdk 0.3.1 → 0.3.3

package/templates/preview-harness/vite-app/src/SurveyPagePreview.tsx

@@ -4,11 +4,24 @@ import SurveyStickyChrome from '@/components/SurveyStickyChrome';
 import LanguageSelector from '@/components/LanguageSelector';
 import Question from '@/components/Question';
 import Footer from '@/components/Footer';
-import { FIXTURE_SURVEY_PAGE_NPS, PREVIEW_LANGUAGES } from './fixtures/questions';
+import { PreviewConfigProvider, usePreviewConfig } from './PreviewConfigContext';
+import {
+  FIXTURE_SURVEY_PAGE_MCQ,
+  FIXTURE_SURVEY_PAGE_NPS,
+  PREVIEW_LANGUAGES,
+} from './fixtures/questions';
 
-export function SurveyPagePreview() {
+function SurveyPagePreviewInner() {
+  const { configRevision } = usePreviewConfig();
   const [lang, setLang] = useState('en');
-  const [answer, setAnswer] = useState<AnswerValue | undefined>();
+  const [mcqAnswer, setMcqAnswer] = useState<AnswerValue>('a');
+  const [npsAnswer, setNpsAnswer] = useState<AnswerValue>(8);
+
+  const allQuestions = [FIXTURE_SURVEY_PAGE_MCQ, FIXTURE_SURVEY_PAGE_NPS];
+  const allAnswers = {
+    [FIXTURE_SURVEY_PAGE_MCQ.id]: mcqAnswer,
+    [FIXTURE_SURVEY_PAGE_NPS.id]: npsAnswer,
+  };
 
   return (
     <div
@@ -30,13 +43,20 @@ export function SurveyPagePreview() {
           onChange={setLang}
         />
 
-        <div className="space-y-12">
+        <div className="space-y-8" key={configRevision}>
+          <Question
+            question={FIXTURE_SURVEY_PAGE_MCQ}
+            selectedValue={mcqAnswer}
+            allAnswers={allAnswers}
+            allQuestions={allQuestions}
+            onSelect={setMcqAnswer}
+          />
           <Question
             question={FIXTURE_SURVEY_PAGE_NPS}
-            selectedValue={answer}
-            allAnswers={answer ? { [FIXTURE_SURVEY_PAGE_NPS.id]: answer } : {}}
-            allQuestions={[FIXTURE_SURVEY_PAGE_NPS]}
-            onSelect={setAnswer}
+            selectedValue={npsAnswer}
+            allAnswers={allAnswers}
+            allQuestions={allQuestions}
+            onSelect={setNpsAnswer}
           />
         </div>
 
@@ -73,3 +93,12 @@ export function SurveyPagePreview() {
     </div>
   );
 }
+
+/** Full survey page mockup for wizard Theme / Layout steps — header, progress, language, cards, footer. */
+export function SurveyPagePreview() {
+  return (
+    <PreviewConfigProvider>
+      <SurveyPagePreviewInner />
+    </PreviewConfigProvider>
+  );
+}

package/templates/preview-harness/vite-app/src/fixtures/questions.ts

@@ -4,22 +4,34 @@ import type { SpecialPage, SurveyQuestion } from '@explorer02/cfm-survey-sdk';
 const base = (partial: Partial<SurveyQuestion> & { type: SurveyQuestion['type'] }): SurveyQuestion =>
   ({
     id: 'preview-q',
-    questionText: 'How satisfied are you with our service?',
+    questionText: 'Question',
     required: true,
     questionNumber: 1,
     options: [],
     ...partial,
   }) as SurveyQuestion;
 
-const MATRIX_ROW_SINGLE = [
-  { id: 'r1', statementText: 'The product is easy to use' },
+const LIKERT_COLUMNS = [
+  { id: 'c1', label: 'Strongly Disagree' },
+  { id: 'c2', label: 'Disagree' },
+  { id: 'c3', label: 'Neutral' },
+  { id: 'c4', label: 'Agree' },
+  { id: 'c5', label: 'Strongly Agree' },
 ];
 
+const MATRIX_ROW_SINGLE = [{ id: 'r1', statementText: 'Statement Item 1' }];
+
 const MATRIX_ROWS_MULTI = [
-  { id: 'r1', statementText: 'The product is easy to use' },
-  { id: 'r2', statementText: 'Support was helpful' },
+  { id: 'r1', statementText: 'Statement Item 1' },
+  { id: 'r2', statementText: 'Statement Item 2' },
+  { id: 'r3', statementText: 'Statement Item 3' },
 ];
 
+const SLIDER_TICKS = Array.from({ length: 11 }, (_, i) => ({
+  tickPosition: i,
+  tickLabel: String(i),
+}));
+
 export const FIXTURE_INTRO: SpecialPage = {
   id: 'preview-intro',
   header: 'Welcome to our survey',
@@ -35,39 +47,60 @@ export const FIXTURE_END: SpecialPage = {
 
 export const FIXTURE_MCQ_SINGLE = base({
   type: 'MCQ',
+  questionText: 'Select one option',
   selectionMode: 'single',
   options: [
-    { id: 'a', optionLabel: 'Very satisfied', value: 'a' },
-    { id: 'b', optionLabel: 'Satisfied', value: 'b' },
-    { id: 'c', optionLabel: 'Neutral', value: 'c' },
+    { id: 'a', optionLabel: 'Option 1', value: 'a' },
+    { id: 'b', optionLabel: 'Option 2', value: 'b' },
+    { id: 'c', optionLabel: 'Option 3', value: 'c' },
+    { id: 'd', optionLabel: 'Option 4', value: 'd' },
   ],
-  defaultOptionIds: ['a'],
 });
 
 export const FIXTURE_MCQ_MULTIPLE = base({
   type: 'MCQ',
+  questionText: 'Select all that apply',
   selectionMode: 'multiple',
   minSelections: 1,
   maxSelections: 2,
   options: [
-    { id: 'a', optionLabel: 'Fast delivery', value: 'a' },
-    { id: 'b', optionLabel: 'Great support', value: 'b' },
-    { id: 'c', optionLabel: 'Easy to use', value: 'c' },
+    { id: 'a', optionLabel: 'Option 1', value: 'a' },
+    { id: 'b', optionLabel: 'Option 2', value: 'b' },
+    { id: 'c', optionLabel: 'Option 3', value: 'c' },
   ],
 });
 
+export const PREVIEW_LANGUAGES = [
+  { code: 'en', name: 'English' },
+  { code: 'de', name: 'Deutsch' },
+];
+
 export const FIXTURE_NPS = base({
   type: 'NPS_SCALE',
+  questionText:
+    'Based on your experience, how likely are you to recommend [Company/Product/Service] to your friends and family?',
   buttonStyle: 'standard',
-  minLabel: 'Not at all likely',
-  maxLabel: 'Extremely likely',
+  minLabel: 'Not Likely At All',
+  maxLabel: 'Extremely Likely',
   options: Array.from({ length: 11 }, (_, i) => ({
     id: `nps-${i}`,
     optionLabel: String(i),
-    value: i,
   })),
 });
 
+export const FIXTURE_SURVEY_PAGE_MCQ = base({
+  id: 'preview-survey-mcq',
+  type: 'MCQ',
+  questionNumber: 1,
+  questionText: 'Which option best describes your experience?',
+  selectionMode: 'single',
+  options: [
+    { id: 'a', optionLabel: 'Excellent — exceeded expectations', value: 'a' },
+    { id: 'b', optionLabel: 'Good — met expectations', value: 'b' },
+    { id: 'c', optionLabel: 'Fair — room for improvement', value: 'c' },
+  ],
+});
+
 export const FIXTURE_SURVEY_PAGE_NPS = base({
   id: 'preview-survey-nps',
   type: 'NPS_SCALE',
@@ -80,43 +113,47 @@ export const FIXTURE_SURVEY_PAGE_NPS = base({
   options: Array.from({ length: 11 }, (_, i) => ({
     id: `nps-${i}`,
     optionLabel: String(i),
-    value: i,
   })),
 });
 
-export const PREVIEW_LANGUAGES = [
-  { code: 'en', name: 'English' },
-  { code: 'de', name: 'Deutsch' },
-];
-
 export const FIXTURE_TEXT_SHORT = base({
   type: 'TEXTFIELD',
-  textFieldType: 'short',
-  placeholder: 'Your answer',
+  questionText: 'Question',
+  inputVariant: 'short',
+  placeholder: 'Enter Text',
+  maxCharacterCount: 1000,
 });
 
 export const FIXTURE_TEXT_LONG = base({
   type: 'TEXTFIELD',
-  textFieldType: 'long',
-  placeholder: 'Tell us more…',
+  questionText: 'Question',
+  inputVariant: 'long',
+  placeholder: 'Type your response here...',
+  maxCharacterCount: 1000,
 });
 
 export const FIXTURE_CFM_LIKERT = base({
   type: 'CFM_MATRIX',
-  statementRows: MATRIX_ROW_SINGLE,
-  scaleColumns: [
-    { id: 'c1', label: 'Strongly disagree' },
-    { id: 'c2', label: 'Disagree' },
-    { id: 'c3', label: 'Neutral' },
-    { id: 'c4', label: 'Agree' },
-    { id: 'c5', label: 'Strongly agree' },
-  ],
+  statementLayout: 'likert',
+  gridLayout: 'standard',
+  transposeTable: false,
+  selectionMode: 'single',
+  showColumnHeaders: true,
+  repeatColumnHeaders: false,
+  hasNotApplicableOption: false,
+  statementRows: MATRIX_ROWS_MULTI,
+  scaleColumns: LIKERT_COLUMNS,
 });
 
 export const FIXTURE_CFM_BIPOLAR = base({
   type: 'CFM_MATRIX',
   statementLayout: 'bipolar',
+  gridLayout: 'standard',
+  transposeTable: false,
+  selectionMode: 'single',
   showColumnHeaders: false,
+  repeatColumnHeaders: false,
+  hasNotApplicableOption: false,
   statementRows: [
     {
       id: 'r1',
@@ -128,43 +165,77 @@ export const FIXTURE_CFM_BIPOLAR = base({
   scaleAnchorLabels: ['Hard', '', '', '', 'Easy'],
 });
 
+export const FIXTURE_CFM_TRANSPOSE = base({
+  type: 'CFM_MATRIX',
+  statementLayout: 'likert',
+  gridLayout: 'standard',
+  transposeTable: true,
+  selectionMode: 'single',
+  showColumnHeaders: true,
+  repeatColumnHeaders: false,
+  hasNotApplicableOption: false,
+  statementRows: MATRIX_ROW_SINGLE,
+  scaleColumns: Array.from({ length: 5 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+});
+
+export const FIXTURE_CFM_CAROUSEL = base({
+  type: 'CFM_MATRIX',
+  statementLayout: 'likert',
+  gridLayout: 'carousel',
+  transposeTable: false,
+  selectionMode: 'single',
+  showColumnHeaders: true,
+  repeatColumnHeaders: false,
+  hasNotApplicableOption: false,
+  statementRows: MATRIX_ROWS_MULTI,
+  scaleColumns: LIKERT_COLUMNS,
+});
+
+export const FIXTURE_CFM_DROPDOWN = base({
+  type: 'CFM_MATRIX',
+  statementLayout: 'likert',
+  gridLayout: 'dropdown',
+  transposeTable: false,
+  selectionMode: 'single',
+  showColumnHeaders: true,
+  repeatColumnHeaders: false,
+  hasNotApplicableOption: false,
+  statementRows: MATRIX_ROW_SINGLE,
+  scaleColumns: LIKERT_COLUMNS,
+});
+
 export const FIXTURE_CSAT_EMOJI = base({
   type: 'CSAT_MATRIX',
   displayStyle: 'emoji',
-  statementRows: [{ id: 'r1', statementText: 'How do you feel?' }],
-  scaleColumns: [
-    { id: 'c1', label: '😞' },
-    { id: 'c2', label: '😐' },
-    { id: 'c3', label: '🙂' },
-    { id: 'c4', label: '😊' },
-    { id: 'c5', label: '🤩' },
-  ],
+  gridLayout: 'standard',
+  statementRows: MATRIX_ROW_SINGLE,
+  scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
   scaleAnchorLabels: ['Very unhappy', '', '', '', 'Very happy'],
 });
 
 export const FIXTURE_CSAT_STAR = base({
   type: 'CSAT_MATRIX',
   displayStyle: 'star',
-  statementRows: [{ id: 'r1', statementText: 'Rate our app' }],
-  scaleColumns: Array.from({ length: 5 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+  gridLayout: 'standard',
+  statementRows: MATRIX_ROW_SINGLE,
+  scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
 });
 
 export const FIXTURE_CSAT_NUMBERED = base({
   type: 'CSAT_MATRIX',
   displayStyle: 'numbered',
-  statementRows: [{ id: 'r1', statementText: 'Rate support' }],
+  gridLayout: 'standard',
+  statementRows: MATRIX_ROWS_MULTI,
   scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
 });
 
 export const FIXTURE_CSAT_GRAPHICS = base({
   type: 'CSAT_MATRIX',
   displayStyle: 'graphics',
-  statementRows: [{ id: 'r1', statementText: 'Experience quality' }],
-  scaleColumns: [
-    { id: 'c1', label: 'Low' },
-    { id: 'c2', label: 'Mid' },
-    { id: 'c3', label: 'High' },
-  ],
+  gridLayout: 'standard',
+  statementRows: MATRIX_ROW_SINGLE,
+  scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+  scaleAnchorLabels: ['Label 1', 'Label 2'],
 });
 
 export const FIXTURE_CSAT_CAROUSEL = base({
@@ -178,7 +249,8 @@ export const FIXTURE_CSAT_CAROUSEL = base({
 export const FIXTURE_CSAT_DROPDOWN = base({
   type: 'CSAT_MATRIX',
   displayStyle: 'dropdown',
-  statementRows: [{ id: 'r1', statementText: 'Select your rating' }],
+  gridLayout: 'standard',
+  statementRows: MATRIX_ROW_SINGLE,
   scaleColumns: [
     { id: 'c1', label: 'Poor' },
     { id: 'c2', label: 'Fair' },
@@ -190,99 +262,123 @@ export const FIXTURE_CSAT_DROPDOWN = base({
 export const FIXTURE_RATING_STAR = base({
   type: 'RATING_MATRIX',
   displayStyle: 'star',
-  statementRows: [{ id: 'r1', statementText: 'Overall rating' }],
-  scaleColumns: Array.from({ length: 5 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+  gridLayout: 'standard',
+  showColumnHeaders: true,
+  statementRows: MATRIX_ROWS_MULTI,
+  scaleColumns: LIKERT_COLUMNS,
 });
 
 export const FIXTURE_RATING_NUMBERED = base({
   type: 'RATING_MATRIX',
   displayStyle: 'numbered',
-  statementRows: [{ id: 'r1', statementText: 'Value for money' }],
+  gridLayout: 'standard',
+  statementRows: MATRIX_ROWS_MULTI,
   scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
 });
 
 export const FIXTURE_RATING_RADIO = base({
   type: 'RATING_MATRIX',
   displayStyle: 'standard',
-  statementRows: [{ id: 'r1', statementText: 'Recommend to a friend' }],
-  scaleColumns: Array.from({ length: 5 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+  gridLayout: 'standard',
+  statementRows: MATRIX_ROW_SINGLE,
+  scaleColumns: LIKERT_COLUMNS,
 });
 
 export const FIXTURE_RATING_EMOJI = base({
   type: 'RATING_MATRIX',
   displayStyle: 'emoji',
-  statementRows: [{ id: 'r1', statementText: 'How do you feel?' }],
-  scaleColumns: Array.from({ length: 5 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+  gridLayout: 'standard',
+  statementRows: MATRIX_ROW_SINGLE,
+  scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
 });
 
 export const FIXTURE_RATING_GRAPHICS = base({
   type: 'RATING_MATRIX',
   displayStyle: 'graphics',
-  statementRows: [{ id: 'r1', statementText: 'Experience quality' }],
-  scaleColumns: [
-    { id: 'c1', label: 'Low' },
-    { id: 'c2', label: 'Mid' },
-    { id: 'c3', label: 'High' },
-  ],
+  gridLayout: 'standard',
+  statementRows: MATRIX_ROW_SINGLE,
+  scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+  scaleAnchorLabels: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
 });
 
 export const FIXTURE_RATING_SLIDER = base({
   type: 'RATING_MATRIX',
   displayStyle: 'graphics',
-  statementRows: [{ id: 'r1', statementText: 'Rate on slider' }],
-  scaleColumns: Array.from({ length: 5 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
-  scaleAnchorLabels: ['Low', 'High'],
+  gridLayout: 'standard',
+  statementRows: [
+    { id: 'r1', statementText: 'Statement Item 1' },
+    { id: 'r2', statementText: 'Statement Item 2' },
+  ],
+  scaleColumns: [
+    { id: 'c1', label: 'Likely' },
+    { id: 'c2', label: 'Unlikely' },
+    { id: 'c3', label: 'Option 3' },
+    { id: 'c4', label: 'Option 4' },
+  ],
+  scaleAnchorLabels: ['Likely', 'Unlikely', 'Option 3', 'Option 4'],
 });
 
 export const FIXTURE_SLIDER = base({
   type: 'SLIDER_MATRIX',
   statementRows: [
-    { id: 'r1', statementText: 'Ease of use', min: 0, max: 10, step: 1 },
+    { id: 'r1', statementText: 'Statement Item 1', min: 0, max: 10, step: 1 },
+    { id: 'r2', statementText: 'Statement Item 2', min: 0, max: 10, step: 1 },
   ],
-  scaleAnchorLabels: ['Not at all', 'Extremely'],
+  scaleAnchorLabels: ['Label 1', 'Label 2'],
   ticks: {
     count: 11,
-    marks: Array.from({ length: 11 }, (_, i) => ({
-      tickPosition: i,
-      tickLabel: String(i),
-    })),
+    marks: SLIDER_TICKS,
   },
   enableInputBox: false,
-  displayValues: false,
+  displayValues: true,
   hasNotApplicableOption: false,
   sliderStyle: 'standard',
 });
 
 export const FIXTURE_FILE_UPLOAD = base({
   type: 'FILE_UPLOAD',
+  questionText: 'Question',
+  uploadMessage: 'Drag attachments here or browse',
   maxFileCount: 1,
 });
 
 export const FIXTURE_HEATMAP = base({
   type: 'HEATMAP',
+  questionText: 'Question',
+  questionDescription: 'Please click on the region of the image which you like the most',
   maxClicksAllowed: 3,
   imageUrl: 'https://placehold.co/600x400/e5e7eb/6b7280?text=Heatmap+Image',
 });
 
+export const FIXTURE_TEXT_AND_MEDIA = base({
+  type: 'TEXT_AND_MEDIA',
+  questionText: 'Question',
+  media: {
+    url: 'https://placehold.co/600x300/e5e7eb/6b7280?text=Media',
+    mimeType: 'IMAGE',
+    alignment: 'TOP_CENTER',
+    title: 'Caption text',
+    size: 80,
+  },
+});
+
 export const FIXTURE_RANK_DRAG = base({
   type: 'RANK_ORDER',
   interactionMode: 'dragAndDrop',
-  optionDisplay: 'textOnly',
+  optionDisplay: 'textAndImage',
   options: [
-    { id: 'o1', optionLabel: 'Speed' },
-    { id: 'o2', optionLabel: 'Price' },
-    { id: 'o3', optionLabel: 'Quality' },
+    { id: 'o1', optionLabel: 'Option 1' },
+    { id: 'o2', optionLabel: 'Option 2' },
   ],
 });
 
 export const FIXTURE_RANK_DROPDOWN = base({
   type: 'RANK_ORDER',
   interactionMode: 'dropdown',
-  optionDisplay: 'textOnly',
+  optionDisplay: 'textAndImage',
   options: [
-    { id: 'o1', optionLabel: 'Feature A' },
-    { id: 'o2', optionLabel: 'Feature B' },
-    { id: 'o3', optionLabel: 'Feature C' },
+    { id: 'o1', optionLabel: 'Option 1' },
+    { id: 'o2', optionLabel: 'Option 2' },
   ],
 });
 
@@ -294,6 +390,9 @@ export const PREVIEW_FIXTURES: Record<string, SurveyQuestion | null> = {
   NPS_SCALE: FIXTURE_NPS,
   CFM_likert: FIXTURE_CFM_LIKERT,
   CFM_bipolar: FIXTURE_CFM_BIPOLAR,
+  CFM_transpose: FIXTURE_CFM_TRANSPOSE,
+  CFM_carousel: FIXTURE_CFM_CAROUSEL,
+  CFM_dropdown: FIXTURE_CFM_DROPDOWN,
   CSAT_emoji: FIXTURE_CSAT_EMOJI,
   CSAT_star: FIXTURE_CSAT_STAR,
   CSAT_numbered: FIXTURE_CSAT_NUMBERED,
@@ -308,6 +407,7 @@ export const PREVIEW_FIXTURES: Record<string, SurveyQuestion | null> = {
   RATING_slider: FIXTURE_RATING_SLIDER,
   SLIDER_matrix: FIXTURE_SLIDER,
   FILE_UPLOAD: FIXTURE_FILE_UPLOAD,
+  TEXT_AND_MEDIA: FIXTURE_TEXT_AND_MEDIA,
   HEATMAP: FIXTURE_HEATMAP,
   RANK_drag: FIXTURE_RANK_DRAG,
   RANK_dropdown: FIXTURE_RANK_DROPDOWN,

package/templates/survey-theme.css

@@ -73,10 +73,12 @@
   --cfm-mcq-selected-accent: var(--cfm-accent);
   --cfm-mcq-border-radius: 8px;
   --cfm-mcq-option-gap: 8px;
-  --cfm-mcq-card-padding: 12px;
+  --cfm-mcq-card-padding: 16px 20px;
   --cfm-mcq-selected-bg: var(--cfm-secondary);
   --cfm-mcq-hover-border: var(--cfm-accent);
 
+  --cfm-input-focus-glow: rgba(226, 0, 116, 0.1);
+
   --cfm-input-radius: 8px;
   --cfm-input-focus-ring: var(--cfm-accent);
   --cfm-input-border: #e5e7eb;
@@ -115,8 +117,9 @@
 
   --cfm-upload-accent: var(--cfm-accent);
   --cfm-upload-border-color: #d1d5db;
-  --cfm-upload-fill: var(--cfm-rank-item-bg);
-  --cfm-upload-padding: 24px;
+  --cfm-upload-fill: #f9fafb;
+  --cfm-upload-padding: 40px 24px;
+  --cfm-upload-icon-color: #9ca3af;
 
   --cfm-media-max-width: 100%;
   --cfm-media-radius: 8px;
@@ -124,7 +127,9 @@
   --cfm-heatmap-pin: var(--cfm-accent);
   --cfm-heatmap-pin-size: 12px;
 
-  --cfm-rank-item-bg: #f9fafb;
+  --cfm-rank-item-bg: #ffffff;
+  --cfm-rank-badge-bg: var(--cfm-mcq-selected-bg);
+  --cfm-rank-badge-text: var(--cfm-mcq-selected-accent);
   --cfm-rank-badge: var(--cfm-primary);
   --cfm-rank-handle: #9ca3af;
   --cfm-rank-item-padding: 12px;
@@ -289,6 +294,10 @@ body {
   box-shadow: none;
 }
 
+.cfm-mcq-option:hover {
+  border-color: var(--cfm-mcq-hover-border, var(--cfm-accent));
+}
+
 [data-cfm-dropzone-style='dashed'] .cfm-dropzone {
   border-style: dashed;
 }

package/templates/wizard-dist/assets/{PreviewMock-Bax7oRAL.js → PreviewMock-_9SsNLwC.js}

@@ -1 +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};
+import{u as x,j as e}from"./index-pKQOivEa.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};

package/templates/wizard-dist/assets/TypePanel-DyEcZlWP.js

@@ -0,0 +1 @@
+import{u as m,j as e,T as L,S as j,R as d,C as i,N as s,a as P,M as R}from"./index-pKQOivEa.js";import"./vendor-BwkXDkd3.js";function S({values:o,onPatch:r}){return e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Label text color",value:o.columnLabelColor,onChange:a=>r({columnLabelColor:a})}),e.jsx(i,{label:"Label background",value:o.columnLabelBgColor,onChange:a=>r({columnLabelBgColor:a})})]})}function z({values:o,onPatch:r}){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=>r({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=>r({hintMaxText:a.target.value})})]}),e.jsx(i,{label:"Hint text color",value:o.hintLabelColor,onChange:a=>r({hintLabelColor:a})}),e.jsx(i,{label:"Hint label background",value:o.hintLabelBgColor,onChange:a=>r({hintLabelBgColor:a})})]})}function b({values:o,onPatch:r,count:a=11}){return e.jsxs("div",{className:"space-y-3",children:[e.jsx(j,{label:"Number label style",value:o.numberLabelMode,onChange:c=>r({numberLabelMode:c}),options:[{value:"traffic",label:"Traffic light (default)"},{value:"monochrome",label:"Monochrome (one color)"},{value:"individual",label:"Individual per number"}]}),o.numberLabelMode==="monochrome"&&e.jsx(i,{label:"Monochrome color",value:o.monochromeNumberColor,onChange:c=>r({monochromeNumberColor:c})}),o.numberLabelMode==="individual"&&e.jsx("div",{className:"grid grid-cols-2 gap-2 sm:grid-cols-3",children:Array.from({length:a},(c,x)=>e.jsx(i,{label:`#${x}`,value:o.individualNumberColors[x]??"#9CA3AF",onChange:C=>{const u=[...o.individualNumberColors];u[x]=C,r({individualNumberColors:u})}},x))})]})}function t({title:o,children:r}){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}),r]})}function I({type:o,activeFormat:r}){const a=m(l=>l.config.questionTypes[o]),c=m(l=>l.updateQuestionType),x=m(l=>l.previewMultiStatementByType),C=m(l=>l.setPreviewMultiStatementForType),u=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=>c(o,l),T=R.includes(o),M=!!x[o],h=r.includes("star"),g=r.includes("emoji"),v=r.includes("numbered"),w=r.includes("drag"),N=r.includes("dropdown"),f=r.includes("radio"),y=r==="CFM_bipolar",p=g||h||v||f,B=a.optionStyle??a.cardStyle??"outlined",k=a.buttonStyle??"numbered";return e.jsxs("div",{className:"space-y-4",children:[T&&e.jsx(L,{label:"Preview multiple statements",checked:M,onChange:l=>C(o,l)}),o==="MCQ"&&"optionGap"in a&&e.jsx(t,{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(d,{label:"Option gap",value:a.optionGap,onChange:l=>n({optionGap:l}),min:0,max:32}),e.jsx(d,{label:"Border radius",value:a.borderRadius,onChange:l=>n({borderRadius:l}),min:0,max:24}),e.jsx(d,{label:"Option padding",value:a.optionPadding??12,onChange:l=>n({optionPadding:l}),min:4,max:24}),e.jsx(i,{label:"Hover border",value:a.hoverBorderColor,onChange:l=>n({hoverBorderColor:l})}),B==="filled"&&e.jsx(i,{label:"Unselected fill color",value:a.filledOptionBg??"#F9FAFB",onChange:l=>n({filledOptionBg:l})})]})}),o==="TEXTFIELD"&&"defaultPlaceholder"in a&&e.jsx(t,{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(s,{label:"Input radius (px)",value:a.inputRadius,onChange:l=>n({inputRadius:l}),min:0,max:24}),e.jsx(i,{label:"Border color",value:a.borderColor,onChange:l=>n({borderColor:l})}),e.jsx(i,{label:"Placeholder color",value:a.placeholderColor,onChange:l=>n({placeholderColor:l})}),e.jsx(s,{label:"Input height (px)",value:a.inputHeight,onChange:l=>n({inputHeight:l}),min:32,max:64}),e.jsx(s,{label:"Input padding (px)",value:a.inputPadding,onChange:l=>n({inputPadding:l}),min:8,max:24})]})}),o==="NPS_SCALE"&&"buttonStyle"in a&&e.jsxs(e.Fragment,{children:[e.jsxs(t,{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"}]}),e.jsx("p",{className:"text-xs text-slate-500",children:"Selected cell and focus ring come from Theme → Question card."})]}),e.jsx(t,{title:"Hint labels",children:e.jsx(z,{values:a,onPatch:n})}),k==="numbered"&&e.jsx(t,{title:"Number labels",children:e.jsx(b,{values:a,onPatch:n})}),e.jsx(t,{title:"Track & cells",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(s,{label:"Cell size (px)",value:a.cellSize,onChange:l=>n({cellSize:l}),min:24,max:56}),e.jsx(s,{label:"Cell gap (px)",value:a.cellGap,onChange:l=>n({cellGap:l}),min:0,max:16}),e.jsx(i,{label:"Track bar",value:a.trackBarColor,onChange:l=>n({trackBarColor:l})}),e.jsx(i,{label:"Track highlight",value:a.trackHighlightColor,onChange:l=>n({trackHighlightColor:l})})]})})]}),o==="CFM_MATRIX"&&"rowLabelWidth"in a&&e.jsxs(e.Fragment,{children:[e.jsx(t,{title:"Matrix layout",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(s,{label:"Row label width (px)",value:a.rowLabelWidth,onChange:l=>n({rowLabelWidth:l}),min:120,max:280}),y&&e.jsx(s,{label:"Bipolar column width (%)",value:a.bipolarColumnWidthPercent,onChange:l=>n({bipolarColumnWidthPercent:l}),min:15,max:40}),e.jsx(s,{label:"Cell padding (px)",value:a.cellPadding,onChange:l=>n({cellPadding:l}),min:4,max:24})]})}),e.jsx(t,{title:"Label items",children:e.jsx(S,{values:a,onPatch:n})})]}),o==="CSAT_MATRIX"&&"emojiSize"in a&&e.jsxs(e.Fragment,{children:[(g||p||h)&&e.jsxs(t,{title:`${P.CSAT_MATRIX} — ${r.replace("CSAT_","")}`,children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[g&&e.jsx(s,{label:"Emoji size (px)",value:a.emojiSize,onChange:l=>n({emojiSize:l}),min:16,max:40}),h&&e.jsx(i,{label:"Star color",value:a.accentColor,onChange:l=>n({accentColor:l})}),p&&e.jsx(d,{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. Column labels appear above stars in the star format preview."})]}),e.jsx(t,{title:"Label items",children:e.jsx(S,{values:a,onPatch:n})}),v&&e.jsx(t,{title:"Number labels",children:e.jsx(b,{values:a,onPatch:n,count:10})})]}),o==="RATING_MATRIX"&&"unselectedStarOpacity"in a&&e.jsxs(e.Fragment,{children:[(g||p||h)&&e.jsxs(t,{title:`Rating — ${r.replace("RATING_","")}`,children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[g&&e.jsx(s,{label:"Emoji size (px)",value:a.emojiSize,onChange:l=>n({emojiSize:l}),min:16,max:40}),h&&e.jsx(i,{label:"Star color",value:a.starColor,onChange:l=>n({starColor:l})}),p&&e.jsx(d,{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(t,{title:"Label items",children:e.jsx(S,{values:a,onPatch:n})}),v&&e.jsx(t,{title:"Number labels",children:e.jsx(b,{values:a,onPatch:n,count:10})})]}),o==="SLIDER_MATRIX"&&"trackColor"in a&&e.jsxs(e.Fragment,{children:[e.jsx(t,{title:"Slider track",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Track",value:a.trackColor,onChange:l=>n({trackColor:l})}),e.jsx(i,{label:"Thumb",value:a.thumbColor,onChange:l=>n({thumbColor:l})}),e.jsx(s,{label:"Row label width (px)",value:a.rowLabelWidth,onChange:l=>n({rowLabelWidth:l}),min:120,max:280}),e.jsx(i,{label:"Row band",value:a.rowBandColor,onChange:l=>n({rowBandColor:l})}),e.jsx(s,{label:"Tick badge size (px)",value:a.tickBadgeSize,onChange:l=>n({tickBadgeSize:l}),min:20,max:40})]})}),e.jsxs(t,{title:"Anchor hint labels",children:[e.jsxs("p",{className:"text-xs text-slate-500",children:["Anchor text comes from the slider preview fixture: “",a.hintMinText,"” / “",a.hintMaxText,"”."]}),e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Hint text color",value:a.hintLabelColor,onChange:l=>n({hintLabelColor:l})}),e.jsx(i,{label:"Hint label background",value:a.hintLabelBgColor,onChange:l=>n({hintLabelBgColor:l})})]})]}),e.jsx(t,{title:"Tick number labels",children:e.jsx(b,{values:a,onPatch:n,count:11})})]}),o==="FILE_UPLOAD"&&"dropzoneStyle"in a&&e.jsx(t,{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(i,{label:"Border color",value:a.borderColor??a.accentColor,onChange:l=>n({borderColor:l})}),e.jsx(i,{label:"Fill color",value:a.dropzoneFillColor,onChange:l=>n({dropzoneFillColor:l})}),e.jsx(s,{label:"Padding (px)",value:a.dropzonePadding,onChange:l=>n({dropzonePadding:l}),min:12,max:48})]})}),o==="TEXT_AND_MEDIA"&&"mediaMaxWidth"in a&&e.jsx(t,{title:"Text & media",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(d,{label:"Media max width (%)",value:a.mediaMaxWidth,onChange:l=>n({mediaMaxWidth:l}),min:50,max:100}),e.jsx(d,{label:"Media corner radius",value:a.mediaRadius,onChange:l=>n({mediaRadius:l}),min:0,max:24}),e.jsx(i,{label:"Caption color",value:a.captionColor,onChange:l=>n({captionColor:l})}),e.jsx(s,{label:"Caption size (px)",value:a.captionSize,onChange:l=>n({captionSize:l}),min:10,max:24})]})}),o==="HEATMAP"&&"pinColor"in a&&e.jsx(t,{title:"Heatmap pin",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Pin color",value:a.pinColor,onChange:l=>n({pinColor:l})}),e.jsx(i,{label:"Pin border",value:a.pinBorderColor,onChange:l=>n({pinBorderColor:l})}),e.jsx(d,{label:"Pin size",value:a.pinSize,onChange:l=>n({pinSize:l}),min:8,max:32}),e.jsx(d,{label:"Overlay opacity",value:Math.round(a.overlayOpacity*100),onChange:l=>n({overlayOpacity:l/100}),min:0,max:80}),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(u.x*100),"%, ",Math.round(u.y*100),"%"]})]})}),o==="RANK_ORDER"&&"drag"in a&&e.jsx(t,{title:w?"Drag & drop":N?"Dropdown rank":"Rank order",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[w&&e.jsxs(e.Fragment,{children:[e.jsx(i,{label:"Item background",value:a.drag.itemBg,onChange:l=>n({drag:{...a.drag,itemBg:l}})}),e.jsx(i,{label:"Drag handle",value:a.drag.dragHandleColor,onChange:l=>n({drag:{...a.drag,dragHandleColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.drag.rankBadgeColor,onChange:l=>n({drag:{...a.drag,rankBadgeColor:l}})})]}),N&&e.jsxs(e.Fragment,{children:[e.jsx(i,{label:"Item background",value:a.dropdown.itemBg,onChange:l=>n({dropdown:{...a.dropdown,itemBg:l}})}),e.jsx(i,{label:"List hover background",value:a.dropdown.itemHoverBg??"#F3F4F6",onChange:l=>n({dropdown:{...a.dropdown,itemHoverBg:l}})}),e.jsx(i,{label:"Select border",value:a.dropdown.selectBorderColor,onChange:l=>n({dropdown:{...a.dropdown,selectBorderColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.dropdown.rankBadgeColor,onChange:l=>n({dropdown:{...a.dropdown,rankBadgeColor:l}})})]})]})})]})}export{I as TypePanel};