@explorer02/cfm-survey-sdk 0.2.2 → 0.2.3

package/templates/docs/templates/CustomSliderTrack.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+/**
+ * Portable CustomSliderTrack template — copy to src/components/CustomSliderTrack.tsx
+ * Also copy surveyUiIcons.tsx to the same folder (or src/lib/surveyUiIcons.tsx)
+ * Pass tickLabels from scaleColumns[].label for matrix scale label rendering (Day 19 fix)
+ */
+
+import React from 'react';
+import { getEmojiForIndex } from './surveyUiIcons';
+
+type CustomSliderTrackProps = {
+  min: number;
+  max: number;
+  htmlStep: number;
+  value: number;
+  disabled: boolean;
+  displayValues?: boolean;
+  hasSelectedValue: boolean;
+  sliderType?: 'graphics';
+  ticks?: number;
+  /** Pass scaleColumns.map(c => c.label) for visible column labels under slider */
+  tickLabels?: string[];
+  reverseScaleOrder?: boolean;
+  onChange: (v: number) => void;
+};
+
+export function CustomSliderTrack({
+  min,
+  max,
+  htmlStep,
+  value,
+  disabled,
+  sliderType,
+  ticks,
+  tickLabels,
+  reverseScaleOrder,
+  onChange,
+}: CustomSliderTrackProps) {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isDragging, setIsDragging] = React.useState(false);
+
+  const percentage = ((value - min) / (max - min)) * 100;
+  const tickIndex = Math.min(
+    Math.max(0, Math.round(value)),
+    tickLabels && tickLabels.length > 0 ? tickLabels.length - 1 : Math.round(value)
+  );
+  const tooltipLabel = tickLabels?.[tickIndex];
+  const tooltipText = tooltipLabel
+    ? tooltipLabel.replace(/<[^>]*>/g, '')
+    : String(Math.round(value));
+
+  const themeColor = disabled ? '#9ca3af' : '#e20074';
+
+  return (
+    <div
+      style={{ position: 'relative', height: '32px', display: 'flex', alignItems: 'center', margin: '0 16px', opacity: disabled ? 0.5 : 1 }}
+      onMouseEnter={() => !disabled && setIsHovered(true)}
+      onMouseLeave={() => { setIsHovered(false); setIsDragging(false); }}
+    >
+      <div style={{
+        position: 'absolute', top: '50%', left: 0, right: 0, transform: 'translateY(-50%)',
+        height: '4px', borderRadius: '2px', backgroundColor: '#e5e7eb',
+      }} />
+
+      <div style={{
+        position: 'absolute', top: '50%', left: 0, width: `${percentage}%`, transform: 'translateY(-50%)',
+        height: '4px', borderRadius: '2px', backgroundColor: themeColor,
+        transition: isDragging ? 'none' : 'width 0.15s ease-in-out',
+      }} />
+
+      {ticks && ticks > 1 && Array.from({ length: ticks }).map((_, idx) => {
+        const tickPct = (idx / (ticks - 1)) * 100;
+        return (
+          <div
+            key={idx}
+            style={{
+              position: 'absolute', top: '50%', left: `${tickPct}%`, transform: 'translate(-50%, -50%)',
+              width: '1px', height: '8px', backgroundColor: '#d1d5db', pointerEvents: 'none',
+            }}
+          />
+        );
+      })}
+
+      <input
+        type="range"
+        min={min} max={max} step={htmlStep} value={value}
+        disabled={disabled}
+        onChange={(e) => onChange(Number(e.target.value))}
+        onMouseDown={() => !disabled && setIsDragging(true)}
+        onMouseUp={() => setIsDragging(false)}
+        onTouchStart={() => !disabled && setIsDragging(true)}
+        onTouchEnd={() => setIsDragging(false)}
+        style={{
+          position: 'absolute', top: '50%', left: '-16px', right: '-16px', width: 'calc(100% + 32px)', height: '100%',
+          transform: 'translateY(-50%)', opacity: 0, cursor: disabled ? 'not-allowed' : 'pointer', zIndex: 10, margin: 0,
+        }}
+      />
+
+      {sliderType === 'graphics' ? (
+        <div style={{
+          position: 'absolute', top: '50%', left: `${percentage}%`, transform: 'translate(-50%, -50%)',
+          transition: isDragging ? 'none' : 'left 0.15s ease-in-out', pointerEvents: 'none', zIndex: 11,
+          opacity: disabled ? 0.5 : 1,
+        }}>
+          {getEmojiForIndex(
+            reverseScaleOrder
+              ? (ticks || 10) - 1 - Math.min((ticks || 10) - 1, Math.max(0, Math.round(((value - min) / (max - min)) * ((ticks || 10) - 1))))
+              : Math.min((ticks || 10) - 1, Math.max(0, Math.round(((value - min) / (max - min)) * ((ticks || 10) - 1)))),
+            ticks || 10
+          ) as React.ReactNode}
+        </div>
+      ) : (
+        <div style={{
+          position: 'absolute', top: '50%', left: `${percentage}%`, transform: 'translate(-50%, -50%)',
+          width: '18px', height: '18px', borderRadius: '50%', backgroundColor: '#ffffff',
+          border: `2.5px solid ${themeColor}`,
+          boxShadow: (isHovered || isDragging) && !disabled
+            ? '0 0 0 6px rgba(226, 0, 116, 0.2), 0 1px 3px rgba(0,0,0,0.2)'
+            : '0 1px 3px rgba(0,0,0,0.2)',
+          pointerEvents: 'none',
+          transition: isDragging ? 'none' : 'left 0.15s ease-in-out, box-shadow 0.15s, border-color 0.2s',
+          boxSizing: 'border-box',
+        }} />
+      )}
+
+      {(isHovered || isDragging) && !disabled && (
+        <div style={{
+          position: 'absolute', bottom: '100%', left: `${percentage}%`, transform: 'translate(-50%, -10px)',
+          backgroundColor: '#1f2937', color: '#fff', fontSize: '13px', fontWeight: 600,
+          padding: '4px 10px', borderRadius: '6px', pointerEvents: 'none',
+          boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', zIndex: 20,
+        }}>
+          {tooltipText}
+          <div style={{
+            position: 'absolute', top: '100%', left: '50%', transform: 'translateX(-50%)',
+            borderWidth: '5px', borderStyle: 'solid',
+            borderColor: '#1f2937 transparent transparent transparent',
+          }} />
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/docs/templates/MatrixDropdown.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+/**
+ * Portable MatrixDropdown template — copy to src/components/MatrixDropdown.tsx
+ * Import SDK from your package.json: @explorer02/cfm-survey-sdk or @repo/sdk
+ * UI spec: docs/03-ui-specs/shared/matrix-dropdown.md
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import type { ScaleColumn } from '@explorer02/cfm-survey-sdk';
+import { matrixColumnStoredValue } from '@explorer02/cfm-survey-sdk';
+
+type MatrixDropdownProps = {
+  options: ScaleColumn[];
+  value: string | number | null | Array<string | number | null> | undefined;
+  onChange: (val: string | number | null | Array<string | number | null>) => void;
+  multiple?: boolean;
+  placeholder?: string;
+};
+
+export default function MatrixDropdown({
+  options,
+  value,
+  onChange,
+  multiple = false,
+  placeholder = 'Select Answer',
+}: MatrixDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const multiValues: Array<string | number | null> = Array.isArray(value) ? value : [];
+  const selectedOptionSingle = !multiple
+    ? options.find(o => matrixColumnStoredValue(o) === value)
+    : null;
+
+  const toggleMultiOption = (val: string | number | null) => {
+    if (val === null) {
+      if (multiValues.includes(null)) onChange([]);
+      else onChange([null]);
+      return;
+    }
+
+    let nextVals = multiValues.filter(v => v !== null);
+    if (nextVals.includes(val)) {
+      nextVals = nextVals.filter(v => v !== val);
+    } else {
+      nextVals = [...nextVals, val];
+    }
+    onChange(nextVals);
+  };
+
+  const removeMultiOption = (e: React.MouseEvent, val: string | number | null) => {
+    e.stopPropagation();
+    onChange(multiValues.filter(v => v !== val));
+  };
+
+  const renderTrigger = () => {
+    if (multiple) {
+      return (
+        <div
+          onClick={() => setIsOpen(!isOpen)}
+          style={{
+            display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '8px',
+            width: '100%', padding: '10px 14px', backgroundColor: '#fff',
+            border: `1px solid ${isOpen ? '#e20074' : '#d1d5db'}`, borderRadius: '8px',
+            cursor: 'pointer', transition: 'all 0.2s', minHeight: '44px',
+            boxShadow: isOpen ? '0 0 0 3px rgba(226, 0, 116, 0.1)' : '0 1px 2px rgba(0,0,0,0.05)',
+          }}
+        >
+          {multiValues.length === 0 ? (
+            <span style={{ fontSize: '15px', color: '#6b7280', flex: 1 }}>{placeholder}</span>
+          ) : (
+            multiValues.map(v => {
+              const opt = options.find(o => matrixColumnStoredValue(o) === v);
+              return (
+                <div
+                  key={String(v)}
+                  style={{
+                    display: 'flex', alignItems: 'center', gap: '6px',
+                    backgroundColor: '#f3f4f6', padding: '4px 8px', borderRadius: '4px',
+                    fontSize: '14px', color: '#374151', fontWeight: 500,
+                  }}
+                >
+                  <span dangerouslySetInnerHTML={{ __html: opt?.label || String(v) }} />
+                  <div
+                    onClick={e => removeMultiOption(e, v)}
+                    style={{
+                      display: 'flex', alignItems: 'center', justifyContent: 'center',
+                      width: '16px', height: '16px', borderRadius: '50%', backgroundColor: '#e5e7eb',
+                      color: '#6b7280', cursor: 'pointer', fontSize: '12px', fontWeight: 'bold',
+                    }}
+                  >
+                    &times;
+                  </div>
+                </div>
+              );
+            })
+          )}
+          <div style={{ marginLeft: 'auto' }}>
+            <svg
+              style={{ width: '18px', height: '18px', color: '#6b7280', transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }}
+              fill="none" stroke="currentColor" viewBox="0 0 24 24"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            </svg>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div
+        onClick={() => setIsOpen(!isOpen)}
+        style={{
+          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+          width: '100%', padding: '14px 16px', backgroundColor: '#fff',
+          border: `1px solid ${isOpen ? '#e20074' : '#d1d5db'}`, borderRadius: '8px',
+          cursor: 'pointer', transition: 'all 0.2s',
+          boxShadow: isOpen ? '0 0 0 3px rgba(226, 0, 116, 0.1)' : '0 1px 2px rgba(0,0,0,0.05)',
+        }}
+      >
+        <span
+          style={{ fontSize: '15px', color: selectedOptionSingle ? '#111827' : '#6b7280', fontWeight: selectedOptionSingle ? 500 : 400 }}
+          dangerouslySetInnerHTML={{ __html: selectedOptionSingle ? selectedOptionSingle.label : placeholder }}
+        />
+        <svg
+          style={{ width: '18px', height: '18px', color: '#6b7280', transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }}
+          fill="none" stroke="currentColor" viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </div>
+    );
+  };
+
+  return (
+    <div ref={containerRef} style={{ position: 'relative', width: '100%', userSelect: 'none' }}>
+      {renderTrigger()}
+
+      {isOpen && (
+        <div style={{
+          position: 'absolute', top: 'calc(100% + 8px)', left: 0, right: 0,
+          backgroundColor: '#fff', border: '1px solid #e5e5e5', borderRadius: '8px',
+          boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
+          zIndex: 50, overflow: 'hidden', maxHeight: '280px', overflowY: 'auto',
+        }}>
+          {options.map(col => {
+            const submitValue = matrixColumnStoredValue(col);
+            const isSelected = multiple ? multiValues.includes(submitValue) : value === submitValue;
+            const isNaSelected = multiple && multiValues.includes(null);
+            const isDisabled = multiple && isNaSelected && submitValue !== null;
+
+            return (
+              <div
+                key={col.id}
+                style={{
+                  padding: '12px 16px', cursor: isDisabled ? 'not-allowed' : 'pointer', transition: 'background-color 0.15s',
+                  backgroundColor: isSelected ? '#fdf2f8' : '#fff',
+                  opacity: isDisabled ? 0.5 : 1,
+                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px',
+                }}
+                onMouseEnter={e => { if (!isDisabled) e.currentTarget.style.backgroundColor = '#fdf2f8'; }}
+                onMouseLeave={e => { if (!isDisabled) e.currentTarget.style.backgroundColor = isSelected ? '#fdf2f8' : '#fff'; }}
+                onClick={e => {
+                  e.preventDefault();
+                  if (isDisabled) return;
+                  if (multiple) {
+                    toggleMultiOption(submitValue);
+                  } else {
+                    onChange(submitValue);
+                    setIsOpen(false);
+                  }
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flex: 1 }}>
+                  {multiple && (
+                    <div style={{
+                      display: 'flex', alignItems: 'center', justifyContent: 'center',
+                      width: '18px', height: '18px', borderRadius: '4px',
+                      border: isSelected ? '2px solid #e20074' : '2px solid #d1d5db',
+                      backgroundColor: isSelected ? '#e20074' : '#fff',
+                      flexShrink: 0, transition: 'all 0.15s',
+                    }}>
+                      {isSelected && (
+                        <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>
+                  )}
+                  <span style={{ fontSize: '15px', fontWeight: isSelected ? 600 : 400, color: isSelected ? '#e20074' : '#374151', userSelect: 'none' }}
+                        dangerouslySetInnerHTML={{ __html: col.label }} />
+                </div>
+                {!multiple && isSelected && (
+                  <svg style={{ width: '18px', height: '18px', color: '#e20074', flexShrink: 0 }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+                  </svg>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}