@explorer02/cfm-survey-sdk 0.1.9 → 0.2.1

package/templates/docs/templates/Question.tsx

@@ -0,0 +1,243 @@
+/**
+ * CANONICAL QUESTION DISPATCHER TEMPLATE
+ *
+ * Agents: copy this file to your project's components folder (e.g. src/components/Question.tsx).
+ * Then create EVERY imported scale component listed below — see:
+ *   docs/00-integration/component-checklist.md
+ *   docs/03-ui-specs/00-question-shell.md
+ *
+ * RULES:
+ * - Do NOT add a default/fallback branch that renders "not yet implemented" or similar stub text.
+ * - matrix MUST route by question.subType — type alone is NOT enough.
+ * - If a question type appears in the fetched survey, its branch MUST render a real interactive component.
+ *
+ * Replace @explorer02/cfm-survey-sdk with your package.json import name if different.
+ */
+'use client';
+
+import React from 'react';
+import type { SurveyQuestion, AnswerValue } from '@explorer02/cfm-survey-sdk';
+import { CsatScale } from './CsatScale';
+import { CsatMatrixScale } from './CsatMatrixScale';
+import { SliderMatrixScale } from './SliderMatrixScale';
+import { LikertMatrixScale } from './LikertMatrixScale';
+import { FileUploadScale } from './FileUploadScale';
+import RatingScale from './RatingScale';
+// rating_scale / slider gaps — create these if survey contains those types:
+// import { CustomSliderTrack } from './CustomSliderTrack';
+
+type QuestionProps = {
+  question: SurveyQuestion;
+  selectedValue?: AnswerValue;
+  validationError?: string;
+  onSelect: (value: AnswerValue) => void;
+};
+
+export default function Question({ question, selectedValue, validationError, onSelect }: QuestionProps) {
+  return (
+    <section id={question.id} className="space-y-4 rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+      <h2 className="text-lg font-medium leading-relaxed text-gray-900">
+        <span dangerouslySetInnerHTML={{ __html: question.text }} />
+        {question.required && <span className="text-red-500 ml-1">*</span>}
+      </h2>
+      {question.description && (
+        <div
+          className="text-sm text-gray-600 mt-2 leading-relaxed"
+          dangerouslySetInnerHTML={{ __html: question.description }}
+        />
+      )}
+
+      {question.type === 'rating' && (
+        <div className="space-y-3">
+          {(question.minLabel || question.midLabel || question.maxLabel) && (
+            <div className="relative w-full h-6 text-xs font-semibold text-gray-500">
+              <span
+                className="absolute left-0 top-0 max-w-[30%] text-left leading-tight"
+                dangerouslySetInnerHTML={{ __html: question.minLabel ?? '' }}
+              />
+              {question.midLabel && (
+                <span
+                  className="absolute top-0 -translate-x-1/2 text-center max-w-[40%] leading-tight"
+                  style={{
+                    left: `${question.midLabelIndex !== undefined && question.options.length > 1
+                        ? (question.midLabelIndex / (question.options.length - 1)) * 100
+                        : 50
+                      }%`,
+                  }}
+                  dangerouslySetInnerHTML={{ __html: question.midLabel }}
+                />
+              )}
+              <span
+                className="absolute right-0 top-0 max-w-[30%] text-right leading-tight"
+                dangerouslySetInnerHTML={{ __html: question.maxLabel ?? '' }}
+              />
+            </div>
+          )}
+          <RatingScale
+            questionId={question.id}
+            options={question.options}
+            selectedValue={selectedValue}
+            onSelect={onSelect}
+          />
+        </div>
+      )}
+
+      {question.type === 'radio' && (
+        <div className="space-y-3">
+          {question.options.map(option => {
+            const isSelected = selectedValue === option.value;
+            return (
+              <label
+                key={String(option.value)}
+                className={`flex items-center gap-4 rounded-lg border py-4 px-5 cursor-pointer transition-all ${isSelected ? 'border-[#e20074] bg-[#fdf2f8]' : 'border-[#e5e5e5] bg-white hover:bg-gray-50/50'
+                  }`}
+              >
+                <input
+                  type="radio"
+                  name={question.id}
+                  value={option.value === null ? '' : option.value}
+                  checked={isSelected}
+                  onChange={() => onSelect(option.value)}
+                  className="sr-only"
+                />
+                <div
+                  className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full border transition-all ${isSelected ? 'border-2 border-[#e20074] bg-white' : 'border-gray-400 bg-white'
+                    }`}
+                >
+                  {isSelected && <div className="h-2.5 w-2.5 rounded-full bg-[#e20074]" />}
+                </div>
+                <span
+                  className="text-[15px] font-medium text-gray-900 leading-tight"
+                  dangerouslySetInnerHTML={{ __html: option.label }}
+                />
+              </label>
+            );
+          })}
+        </div>
+      )}
+
+      {question.type === 'text' && (
+        <div className="space-y-1.5">
+          <textarea
+            rows={4}
+            value={(selectedValue as string | number | null) ?? ''}
+            onChange={e => onSelect(e.target.value)}
+            placeholder={question.placeholder || 'Type your response here...'}
+            className="w-full rounded-[4px] border border-gray-300 p-4 text-sm outline-none transition-colors focus:border-[#e20074] focus:ring-1 focus:ring-[#e20074]"
+          />
+          <div className="text-right text-xs text-gray-500 pr-1">
+            {Math.max(
+              0,
+              (question.maxCharacterCount ?? 1000) - (typeof selectedValue === 'string' ? selectedValue.length : 0)
+            )}{' '}
+            Zeichen verbleiben.
+          </div>
+        </div>
+      )}
+
+      {question.type === 'csat' && (
+        <div className="space-y-3">
+          {(question.minLabel || question.maxLabel) && (
+            <div className="flex w-full justify-between text-xs font-semibold text-gray-500">
+              {question.minLabel && <span dangerouslySetInnerHTML={{ __html: question.minLabel }} />}
+              {question.maxLabel && <span dangerouslySetInnerHTML={{ __html: question.maxLabel }} />}
+            </div>
+          )}
+          <CsatScale
+            question={question}
+            selectedValue={selectedValue as string | number | null}
+            onSelect={onSelect}
+          />
+        </div>
+      )}
+
+      {/* matrix: subType is REQUIRED — never route on type alone */}
+      {question.type === 'matrix' && (question.subType === 'CSAT_MATRIX' || question.subType === 'RATING_MATRIX') && (
+        <div className="space-y-3">
+          <CsatMatrixScale
+            question={question}
+            selectedValue={typeof selectedValue === 'object' && selectedValue !== null && !Array.isArray(selectedValue) ? selectedValue : {}}
+            onSelect={onSelect}
+          />
+        </div>
+      )}
+
+      {question.type === 'matrix' && question.subType === 'CFM_MATRIX' && (
+        <div className="space-y-3">
+          <LikertMatrixScale
+            question={question}
+            selectedValue={typeof selectedValue === 'object' && selectedValue !== null && !Array.isArray(selectedValue) ? selectedValue : {}}
+            onSelect={onSelect}
+          />
+        </div>
+      )}
+
+      {question.type === 'slider_matrix' && (
+        <div className="space-y-3">
+          <SliderMatrixScale
+            question={question}
+            selectedValue={typeof selectedValue === 'object' && selectedValue !== null && !Array.isArray(selectedValue) ? selectedValue : {}}
+            onSelect={onSelect}
+          />
+        </div>
+      )}
+
+      {question.type === 'file_upload' && (
+        <div className="space-y-3">
+          <FileUploadScale
+            question={question}
+            selectedValue={selectedValue}
+            onSelect={onSelect}
+          />
+        </div>
+      )}
+
+      {question.type === 'text_and_media' && question.mediaUrl && (
+        <div className={`mt-4 flex w-full ${
+          question.mediaAlignment === 'TOP_CENTER' || question.mediaAlignment === 'BOTTOM_CENTER'
+            ? 'justify-center'
+            : question.mediaAlignment === 'TOP_RIGHT' || question.mediaAlignment === 'BOTTOM_RIGHT'
+              ? 'justify-end'
+              : 'justify-start'
+        }`}>
+          <div
+            style={{ width: question.mediaSize ? `${question.mediaSize}%` : '100%' }}
+            className="flex flex-col gap-2"
+          >
+            {question.mediaMimeType?.startsWith('video/') || question.mediaMimeType === 'VIDEO' ? (
+              <video controls src={question.mediaUrl} className="max-w-full rounded-md shadow-sm" />
+            ) : (
+              <img src={question.mediaUrl} alt={question.mediaTitle || ''} className="max-w-full rounded-md shadow-sm" />
+            )}
+            {question.mediaTitle && (
+              <p className="text-sm text-gray-500 text-center">{question.mediaTitle}</p>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* rating_scale / slider: implement per 03-ui-specs/05-rating-scale.md and 06-slider.md if present in survey */}
+      {question.type === 'rating_scale' && (
+        <div className="space-y-3">
+          <CsatScale
+            question={{ ...question, type: 'csat', buttonType: question.scaleStyle === 'star' ? 'star' : 'emoji' }}
+            selectedValue={selectedValue as number | null}
+            onSelect={onSelect}
+          />
+        </div>
+      )}
+
+      {question.type === 'slider' && (
+        <div className="space-y-3">
+          {/* Wire CustomSliderTrack — min/max/step from question; see 03-ui-specs/06-slider.md */}
+        </div>
+      )}
+
+      {validationError && (
+        <div className="mt-4 rounded-[4px] border border-[#333333] bg-[#d9d9d9] py-3.5 px-4 text-left">
+          <p className="text-[13px] sm:text-sm font-bold text-gray-900 leading-tight">{validationError}</p>
+        </div>
+      )}
+    </section>
+  );
+}

package/templates/docs/templates/implementation_plan.md

@@ -42,6 +42,20 @@ Exhaustive switch — check each:
 - [ ] `dangerouslySetInnerHTML` for `question.text` / `description`
 - [ ] `validationError` banner per question
 - [ ] `id={question.id}` on every question wrapper
+- [ ] Copied from `docs/templates/Question.tsx` — no stub/default fallback branches
+
+## 3b. Required Component Files (from fetched survey)
+
+Fill from `00-integration/component-checklist.md` — every file below that applies to your survey **must exist** before Phase 5:
+
+| Component file | Required if survey contains | Created? |
+|----------------|----------------------------|----------|
+| `LikertMatrixScale.tsx` | `matrix` + `CFM_MATRIX` | |
+| `CsatMatrixScale.tsx` | `matrix` + `CSAT_MATRIX` or `RATING_MATRIX` | |
+| `SliderMatrixScale.tsx` | `slider_matrix` | **blocking** |
+| `FileUploadScale.tsx` | `file_upload` | **blocking** |
+| `MatrixDropdown.tsx` | matrix with dropdown/selectbox modes | |
+| `CustomSliderTrack.tsx` | `slider_matrix` or CSAT matrix `graphics` | |
 
 ## 4. Component Architecture Checklist
 
@@ -59,6 +73,20 @@ Exhaustive switch — check each:
 | LanguageSelector | | `01-components/12-language-selector.md` | |
 | MatrixDropdown | | `01-components/13-matrix-dropdown.md` | |
 
+## 4b. Per-Question Config & UI Coverage
+
+Fill one row per question in the fetched survey:
+
+| questionId | type | subType | configs detected | uiSpec read | ref component | branches implemented |
+|------------|------|---------|------------------|-------------|---------------|---------------------|
+| | | | | | | |
+
+- **configs detected:** non-default fields from `02-reference/config-field-index.md` (e.g. `matrixFormat: carousel`, `buttonType: emoji`)
+- **uiSpec read:** path from `MANIFEST.json` `uiSpecs` (matrix: use `matrix_{subType}`)
+- **ref component:** monorepo: `apps/client/src/components/{Component}.tsx`; npm: implement from ui-spec only
+- **branches implemented:** list decision-tree branches from the ui-spec (e.g. dropdown vs grid vs carousel)
+- **blocking types:** `matrix`, `slider_matrix`, `file_upload` must show interactive UI, not placeholder text
+
 ## 5. Theme, Brand & Logo
 
 - [ ] CSS-only logo (no `<img>`, no `public/` uploads)
@@ -76,3 +104,15 @@ Exhaustive switch — check each:
 - [ ] No imports from `.../src/` internal paths
 - [ ] All mutations via `onAction` — no direct state mutation
 - [ ] `npm run build` passes
+
+## 7b. Stub-Free Verification
+
+Per question type in the fetched survey, confirm interactive UI renders (not grey placeholder text):
+
+| type | subType | Renders real component? | No "not yet implemented" text? |
+|------|---------|---------------------------|--------------------------------|
+| | | | |
+
+- [ ] `grep -r "not yet implemented" src/ components/ app/` returns **zero matches**
+- [ ] Matrix questions route by `subType` in `Question.tsx`
+- [ ] `slider_matrix` shows sliders; `file_upload` shows dropzone