@explorer02/cfm-survey-sdk 0.2.3 → 0.2.5

package/templates/docs/templates/LikertMatrixScale.tsx

@@ -0,0 +1,414 @@
+import React, { useState } from 'react';
+import type { CfmMatrixQuestion, MatrixRowAnswers } from '@explorer02/cfm-survey-sdk';
+import { columnSubmitValue } from './surveyUiScaleUtils';
+import MatrixDropdown from './MatrixDropdown';
+
+type LikertMatrixScaleProps = {
+  question: CfmMatrixQuestion;
+  selectedValue?: MatrixRowAnswers;
+  onSelect: (value: MatrixRowAnswers) => void;
+};
+
+// ── SUB-COMPONENT: Dropdown Layout ──────────────────────────────────────────
+type DropdownLayoutProps = {
+  question: CfmMatrixQuestion;
+  selectedValue: MatrixRowAnswers;
+  isMultiple: boolean;
+  onCellSelect: (rowId: string, colValue: string | number | null | undefined) => void;
+  onSelectAll: (value: MatrixRowAnswers) => void;
+};
+
+function LikertMatrixDropdownLayout({
+  question,
+  selectedValue,
+  isMultiple,
+  onCellSelect,
+  onSelectAll
+}: DropdownLayoutProps) {
+  const { statementRows, scaleColumns } = question;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+      {statementRows.map(row => (
+        <div key={row.id} style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <div style={{ fontSize: '15px', fontWeight: 500, color: '#374151' }} dangerouslySetInnerHTML={{ __html: row.statementText }} />
+          <MatrixDropdown
+            options={scaleColumns}
+            value={isMultiple ? (Array.isArray(selectedValue[row.id]) ? selectedValue[row.id] as any[] : []) : selectedValue[row.id]}
+            multiple={isMultiple}
+            onChange={(vals) => {
+              if (isMultiple) {
+                const multiVals = Array.isArray(vals) ? vals : [];
+                if (multiVals.length === 0) {
+                  const next = { ...selectedValue };
+                  delete next[row.id];
+                  onSelectAll(next);
+                } else {
+                  onSelectAll({ ...selectedValue, [row.id]: multiVals });
+                }
+              } else if (!Array.isArray(vals)) {
+                onCellSelect(row.id, vals);
+              }
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ── SUB-COMPONENT: Carousel Layout ──────────────────────────────────────────
+type CarouselLayoutProps = {
+  question: CfmMatrixQuestion;
+  selectedValue: MatrixRowAnswers;
+  isMultiple: boolean;
+  onCellSelect: (rowId: string, colValue: string | number | null | undefined) => void;
+  isSelected: (rowId: string, colValue: string | number | null) => boolean;
+};
+
+function LikertMatrixCarouselLayout({
+  question,
+  selectedValue,
+  isMultiple,
+  onCellSelect,
+  isSelected
+}: CarouselLayoutProps) {
+  const { scaleColumns, statementRows } = question;
+  const [activeCarouselIndex, setActiveCarouselIndex] = useState(0);
+
+  const row = statementRows[activeCarouselIndex];
+  if (!row) return null;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', backgroundColor: '#fff', borderRadius: '12px', border: '1px solid #e5e5e5', padding: '32px', boxShadow: '0 4px 6px -1px rgba(0,0,0,0.05)', width: '100%', boxSizing: 'border-box' }}>
+      <h3 style={{ fontSize: '18px', fontWeight: 500, color: '#111827', marginBottom: '32px', textAlign: 'center' }} dangerouslySetInnerHTML={{ __html: row.statementText }} />
+      
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: '20px 32px', width: '100%', maxWidth: '800px', marginBottom: '40px', justifyContent: 'center' }}>
+        {scaleColumns.map(col => {
+          const submitValue = columnSubmitValue(col);
+          const selected = isSelected(row.id, submitValue);
+          const isNaSelected = isSelected(row.id, null);
+          const isDisabled = isNaSelected && submitValue !== null;
+
+          return (
+            <div 
+              key={col.id} 
+              onClick={() => {
+                if (isDisabled) return;
+                if (!isMultiple && selected) {
+                  onCellSelect(row.id, undefined);
+                } else {
+                  onCellSelect(row.id, submitValue);
+                }
+              }}
+              style={{ 
+                display: 'flex', alignItems: 'center', gap: '12px', 
+                cursor: isDisabled ? 'not-allowed' : 'pointer',
+                opacity: isDisabled ? 0.5 : 1,
+                transition: 'opacity 0.15s'
+            }}>
+              {isMultiple ? (
+                <div style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  width: '18px', height: '18px', borderRadius: '4px',
+                  border: selected ? '2px solid #e20074' : '2px solid #d1d5db',
+                  backgroundColor: selected ? '#e20074' : '#fff',
+                  flexShrink: 0, transition: 'all 0.15s'
+                }}>
+                  {selected && (
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                      <polyline points="20 6 9 17 4 12" />
+                    </svg>
+                  )}
+                </div>
+              ) : (
+                <div style={{
+                  display: 'flex', width: '18px', height: '18px', flexShrink: 0,
+                  alignItems: 'center', justifyContent: 'center', borderRadius: '50%',
+                  border: selected ? '2px solid #e20074' : '1.5px solid #9ca3af',
+                  backgroundColor: '#fff',
+                }}>
+                  {selected && <div style={{ width: '10px', height: '10px', borderRadius: '50%', backgroundColor: '#e20074' }} />}
+                </div>
+              )}
+              <span style={{ fontSize: '15px', fontWeight: 400, color: '#374151', userSelect: 'none' }} dangerouslySetInnerHTML={{ __html: col.label }} />
+            </div>
+          );
+        })}
+      </div>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+        <button 
+          type="button"
+          disabled={activeCarouselIndex === 0}
+          onClick={() => setActiveCarouselIndex(i => i - 1)}
+          style={{ padding: '8px', color: activeCarouselIndex === 0 ? '#d1d5db' : '#6b7280', cursor: activeCarouselIndex === 0 ? 'not-allowed' : 'pointer', background: 'none', border: 'none' }}
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
+        </button>
+        
+        <div style={{ display: 'flex', gap: '8px' }}>
+          {statementRows.map((_, i) => (
+            <div key={i} style={{ 
+              width: '10px', height: '10px', borderRadius: '50%', 
+              backgroundColor: i === activeCarouselIndex ? '#2563eb' : '#e5e7eb',
+              cursor: 'pointer', transition: 'background-color 0.2s'
+            }} onClick={() => setActiveCarouselIndex(i)} />
+          ))}
+        </div>
+
+        <button 
+          type="button"
+          disabled={activeCarouselIndex === statementRows.length - 1}
+          onClick={() => setActiveCarouselIndex(i => i + 1)}
+          style={{ padding: '8px', color: activeCarouselIndex === statementRows.length - 1 ? '#d1d5db' : '#6b7280', cursor: activeCarouselIndex === statementRows.length - 1 ? 'not-allowed' : 'pointer', background: 'none', border: 'none' }}
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ── SUB-COMPONENT: Standard Grid Layout ──────────────────────────────────────
+type GridLayoutProps = {
+  question: CfmMatrixQuestion;
+  isMultiple: boolean;
+  onCellSelect: (rowId: string, colValue: string | number | null | undefined) => void;
+  isSelected: (rowId: string, colValue: string | number | null) => boolean;
+};
+
+function LikertMatrixGridLayout({
+  question,
+  isMultiple,
+  onCellSelect,
+  isSelected
+}: GridLayoutProps) {
+  const { 
+    scaleColumns, statementRows, transposeTable = false, repeatColumnHeaders = false,
+    showColumnHeaders = true
+  } = question;
+
+  const gridRows = transposeTable ? scaleColumns : statementRows;
+  const gridCols = transposeTable ? statementRows : scaleColumns;
+  const isBipolar = question.statementLayout === 'bipolar';
+  const labels = question.scaleAnchorLabels;
+
+  const renderHeader = () => {
+    const numCols = gridCols.length;
+    const hasLabels = isBipolar && labels && labels.length > 0;
+    
+    if (!hasLabels && !showColumnHeaders) {
+      return null;
+    }
+    
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '16px' }}>
+        {hasLabels && (
+          <div style={{ display: 'flex', alignItems: 'flex-end', minHeight: '24px', marginBottom: '8px' }}>
+            <div style={{ flex: '0 0 25%', paddingRight: '16px', boxSizing: 'border-box' }} />
+            <div style={{ flex: 1, position: 'relative', height: '20px' }}>
+              {labels.map((lbl, idx) => {
+                let leftPos = '50%';
+                if (idx === 0) leftPos = `${100 / (2 * numCols)}%`;
+                else if (idx === labels.length - 1 && labels.length > 1) leftPos = `${100 - 100 / (2 * numCols)}%`;
+                else if (labels.length === 3 && idx === 1) leftPos = '50%';
+                
+                return (
+                  <div key={idx} style={{ 
+                    position: 'absolute', left: leftPos, transform: 'translateX(-50%)',
+                    bottom: 0, display: 'flex', justifyContent: 'center', whiteSpace: 'nowrap'
+                  }}>
+                    <span style={{ fontSize: '13px', fontWeight: 600, color: '#111827' }}>{lbl}</span>
+                  </div>
+                );
+              })}
+            </div>
+            <div style={{ flex: '0 0 25%', paddingLeft: '16px', boxSizing: 'border-box' }} />
+          </div>
+        )}
+        {showColumnHeaders && (
+          <div style={{ display: 'flex', alignItems: 'flex-end', minHeight: '24px' }}>
+            <div style={{ flex: isBipolar ? '0 0 25%' : '0 0 180px', paddingRight: '16px', boxSizing: 'border-box' }} />
+            <div style={{ flex: 1, display: 'flex' }}>
+              <div style={{ flex: 1, display: 'grid', gridTemplateColumns: `repeat(${gridCols.length}, 1fr)` }}>
+                {gridCols.map((col) => (
+                  <div key={col.id} style={{ display: 'flex', justifyContent: 'center', padding: '0 4px' }}>
+                    <span style={{ fontSize: '13px', fontWeight: 500, color: '#4b5563', textAlign: 'center', lineHeight: 1.2 }}
+                          dangerouslySetInnerHTML={{ __html: transposeTable ? ('statementText' in col ? col.statementText : col.label) : ('label' in col ? col.label : (col as { statementText: string }).statementText) }} />
+                  </div>
+                ))}
+              </div>
+            </div>
+            {isBipolar && <div style={{ flex: '0 0 25%', paddingLeft: '16px', boxSizing: 'border-box' }} />}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div style={{ width: '100%' }}>
+      {!repeatColumnHeaders && renderHeader()}
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: repeatColumnHeaders ? '24px' : '0' }}>
+        {gridRows.map((rowItem, rowIdx) => {
+          return (
+            <div key={rowItem.id} style={{ display: 'flex', flexDirection: 'column' }}>
+              {repeatColumnHeaders && renderHeader()}
+              <div style={{
+                display: 'flex', alignItems: 'center', borderRadius: '8px',
+                padding: '12px 0', backgroundColor: !repeatColumnHeaders && rowIdx % 2 === 0 ? 'rgba(249, 250, 251, 0.8)' : '#fff',
+                boxSizing: 'border-box'
+              }}>
+                <div style={{ flex: isBipolar ? '0 0 25%' : '0 0 180px', padding: '0 16px', boxSizing: 'border-box' }}>
+                  <span style={{ fontSize: '14px', fontWeight: 500, color: '#111827', lineHeight: 1.4, wordWrap: 'break-word', display: 'block' }}
+                    dangerouslySetInnerHTML={{ __html: transposeTable ? ('label' in rowItem ? rowItem.label : '') : ('statementText' in rowItem ? rowItem.statementText : '') }} />
+                </div>
+                
+                <div style={{ flex: 1, display: 'flex', boxSizing: 'border-box' }}>
+                  <div style={{ flex: 1, display: 'grid', alignItems: 'center', gridTemplateColumns: `repeat(${gridCols.length}, 1fr)` }}>
+                    {gridCols.map((colItem) => {
+                      const actualRowId = transposeTable ? colItem.id : rowItem.id;
+                      const actualColValue = transposeTable
+                        ? columnSubmitValue(rowItem as typeof scaleColumns[number])
+                        : columnSubmitValue(colItem as typeof scaleColumns[number]);
+                      const selected = isSelected(actualRowId, actualColValue);
+                      const isNaSelected = isSelected(actualRowId, null);
+                      const isDisabled = isNaSelected && actualColValue !== null;
+
+                      return (
+                        <div key={colItem.id} style={{ display: 'flex', justifyContent: 'center' }}>
+                          <label style={{ 
+                            cursor: isDisabled ? 'not-allowed' : 'pointer', 
+                            opacity: isDisabled ? 0.4 : 1,
+                            padding: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center' 
+                          }}>
+                            <input 
+                              type={isMultiple ? "checkbox" : "radio"} 
+                              checked={selected}
+                              disabled={isDisabled}
+                              onClick={(e) => {
+                                if (!isMultiple && selected) {
+                                  onCellSelect(actualRowId, undefined);
+                                }
+                              }}
+                              onChange={(e) => {
+                                if (isMultiple || !selected) {
+                                  onCellSelect(actualRowId, actualColValue);
+                                }
+                              }}
+                              style={{ 
+                                width: '18px', height: '18px', accentColor: '#e20074', 
+                                cursor: isDisabled ? 'not-allowed' : 'pointer',
+                                ...(isMultiple ? { borderRadius: '4px' } : {})
+                              }} 
+                            />
+                          </label>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                {isBipolar && (
+                  <div style={{ flex: '0 0 25%', padding: '0 16px', textAlign: 'right', boxSizing: 'border-box' }}>
+                    <span style={{ fontSize: '14px', fontWeight: 500, color: '#111827', lineHeight: 1.4, wordWrap: 'break-word', display: 'block' }}
+                      dangerouslySetInnerHTML={{ __html: transposeTable ? '' : ('oppositeStatementText' in rowItem ? rowItem.oppositeStatementText ?? '' : '') }} />
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ── ORCHESTRATOR COMPONENT: LikertMatrixScale ────────────────────────────────
+export function LikertMatrixScale({ question, selectedValue = {}, onSelect }: LikertMatrixScaleProps) {
+  const { gridLayout = 'standard', selectionMode = 'single' } = question;
+  const isMultiple = selectionMode === 'multiple';
+
+  const handleCellSelect = (rowId: string, colValue: string | number | null | undefined) => {
+    if (colValue === undefined) {
+      const next = { ...selectedValue };
+      delete next[rowId];
+      onSelect(next);
+      return;
+    }
+
+    if (isMultiple) {
+      const currentVals = Array.isArray(selectedValue[rowId]) ? selectedValue[rowId] as any[] : [];
+      if (colValue === null) {
+        if (currentVals.includes(null)) {
+          const next = { ...selectedValue };
+          delete next[rowId];
+          onSelect(next);
+        } else {
+          onSelect({ ...selectedValue, [rowId]: [null] });
+        }
+        return;
+      }
+
+      let nextVals = currentVals.filter(v => v !== null);
+      if (nextVals.includes(colValue)) {
+        nextVals = nextVals.filter(v => v !== colValue);
+      } else {
+        nextVals = [...nextVals, colValue];
+      }
+
+      if (nextVals.length === 0) {
+        const next = { ...selectedValue };
+        delete next[rowId];
+        onSelect(next);
+      } else {
+        onSelect({ ...selectedValue, [rowId]: nextVals });
+      }
+    } else {
+      onSelect({ ...selectedValue, [rowId]: colValue });
+    }
+  };
+
+  const isSelected = (rowId: string, colValue: string | number | null) => {
+    const val = selectedValue[rowId];
+    if (isMultiple) {
+      return Array.isArray(val) && val.includes(colValue);
+    }
+    return val === colValue;
+  };
+
+  if (gridLayout === 'dropdown') {
+    return (
+      <LikertMatrixDropdownLayout
+        question={question}
+        selectedValue={selectedValue}
+        isMultiple={isMultiple}
+        onCellSelect={handleCellSelect}
+        onSelectAll={onSelect}
+      />
+    );
+  }
+
+  if (gridLayout === 'carousel') {
+    return (
+      <LikertMatrixCarouselLayout
+        question={question}
+        selectedValue={selectedValue}
+        isMultiple={isMultiple}
+        onCellSelect={handleCellSelect}
+        isSelected={isSelected}
+      />
+    );
+  }
+
+  return (
+    <LikertMatrixGridLayout
+      question={question}
+      isMultiple={isMultiple}
+      onCellSelect={handleCellSelect}
+      isSelected={isSelected}
+    />
+  );
+}

package/templates/docs/templates/Question.tsx

@@ -103,6 +103,9 @@ export default function Question({
   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">
+        {question.questionNumber != null && (
+          <span className="mr-1 font-semibold">{question.questionNumber}.</span>
+        )}
         <span dangerouslySetInnerHTML={{ __html: displayQuestionText }} />
         {question.required && <span className="text-red-500 ml-1">*</span>}
       </h2>

package/templates/docs/templates/RatingScale.tsx

@@ -0,0 +1,129 @@
+import type { AnswerValue, NpsScalePoint } from '@explorer02/cfm-survey-sdk';
+import { getAccentColor, npsValueFromOption, starValueFromOption } from './surveyUiScaleUtils';
+import { getEmojiForIndex } from './surveyUiIcons';
+
+type RatingScaleProps = {
+  questionId: string;
+  options: NpsScalePoint[];
+  selectedValue?: AnswerValue;
+  onSelect: (value: AnswerValue) => void;
+  variant?: 'nps' | 'star';
+  buttonStyle?: 'standard' | 'numbered' | 'emoji';
+};
+
+export default function RatingScale({
+  questionId,
+  options,
+  selectedValue,
+  onSelect,
+  variant = 'nps',
+  buttonStyle = 'numbered',
+}: RatingScaleProps) {
+  const resolvedOptions = options.map((option, index) => {
+    const value =
+      variant === 'star'
+        ? starValueFromOption(option, index)
+        : npsValueFromOption(option as NpsScalePoint, index);
+    const color =
+      variant === 'nps' && typeof value === 'number' ? getAccentColor(value) : '#e20074';
+    return {
+      id: option.id,
+      label: option.optionLabel,
+      value,
+      color,
+    };
+  });
+
+  const columnCount = resolvedOptions.length;
+  const gridStyle = {
+    display: 'grid' as const,
+    gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
+    gap: '2px',
+  };
+
+  if (buttonStyle === 'emoji') {
+    return (
+      <div role="radiogroup" className="w-full overflow-x-auto">
+        <div className="min-w-0" style={gridStyle}>
+          {resolvedOptions.map((option, index) => {
+            const isSelected = selectedValue === option.value;
+            return (
+              <label
+                key={`${questionId}-${option.value}`}
+                title={option.label}
+                className="flex cursor-pointer justify-center"
+              >
+                <input
+                  type="radio"
+                  name={questionId}
+                  checked={isSelected}
+                  onChange={() => onSelect(option.value)}
+                  className="sr-only"
+                />
+                <div
+                  className={`flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-lg border-2 text-2xl transition-all ${
+                    isSelected ? 'border-[#e20074] bg-[#fdf2f8] shadow-md' : 'border-transparent'
+                  }`}
+                >
+                  {getEmojiForIndex(index, columnCount)}
+                </div>
+              </label>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div role="radiogroup" className="w-full overflow-x-auto">
+      <div className="mb-3 min-w-0" style={gridStyle}>
+        {resolvedOptions.map(option => (
+          <div key={`${questionId}-badge-${option.value}`} className="flex justify-center">
+            <div
+              className="flex h-5 w-5 sm:h-6 sm:w-6 items-center justify-center rounded-[3px] text-[10px] sm:text-xs font-bold text-white shadow-sm"
+              style={{ backgroundColor: option.color }}
+              title={option.label}
+            >
+              {option.label}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="relative w-full rounded-md bg-[#f2f2f2] px-1 py-2">
+        <div className="min-w-0" style={gridStyle}>
+          {resolvedOptions.map(option => {
+            const isSelected = selectedValue === option.value;
+            return (
+              <label
+                key={`${questionId}-${option.value}`}
+                title={option.label}
+                className="flex cursor-pointer justify-center"
+              >
+                <input
+                  type="radio"
+                  name={questionId}
+                  checked={isSelected}
+                  onChange={() => onSelect(option.value)}
+                  className="sr-only"
+                />
+                <div
+                  className={`flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-full border-2 transition-all ${
+                    isSelected ? 'border-[#e20074] bg-[#fbe8f3]' : 'border-transparent bg-white'
+                  }`}
+                >
+                  <div
+                    className={`h-3 w-3 sm:h-4 sm:w-4 rounded-full ${
+                      isSelected ? 'bg-[#e20074]' : 'bg-gray-300'
+                    }`}
+                  />
+                </div>
+              </label>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}