@explorer02/cfm-survey-sdk 0.2.2 → 0.2.4

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/FileUploadScale.tsx

@@ -0,0 +1,262 @@
+'use client';
+
+/**
+ * Portable FileUploadScale — copy to src/components/FileUploadScale.tsx
+ * Wire UPLOAD_API_BASE env (see docs/00-integration/file-upload-aws.md).
+ * Final answer MUST be UploadedFileAnswer[] with id + mediaUrl — not raw File[].
+ */
+
+import React, { useState, useRef } from 'react';
+import type { FileUploadQuestion } from '@explorer02/cfm-survey-sdk';
+
+type UploadedFileAnswer = {
+  id: string;
+  mediaUrl: string;
+  name?: string;
+  mimeType?: string;
+  size?: number;
+};
+
+type FileUploadScaleProps = {
+  question: FileUploadQuestion;
+  selectedValue?: UploadedFileAnswer[];
+  onSelect: (value: UploadedFileAnswer[] | undefined) => void;
+};
+
+const UPLOAD_API_BASE =
+  typeof process !== 'undefined' && process.env.NEXT_PUBLIC_UPLOAD_API_BASE
+    ? process.env.NEXT_PUBLIC_UPLOAD_API_BASE
+    : typeof process !== 'undefined' && process.env.VITE_UPLOAD_API_BASE
+      ? process.env.VITE_UPLOAD_API_BASE
+      : '';
+
+async function uploadFileToS3(
+  file: File,
+  questionId: string
+): Promise<UploadedFileAnswer> {
+  if (!UPLOAD_API_BASE) {
+    throw new Error('UPLOAD_API_BASE env not configured — see file-upload-aws.md');
+  }
+  const res = await fetch(`${UPLOAD_API_BASE}/get-upload-url`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      fileName: file.name,
+      contentType: file.type || 'application/octet-stream',
+      questionId,
+    }),
+  });
+  if (!res.ok) throw new Error('Failed to get upload URL');
+  const { uploadUrl, fileId, mediaUrl } = await res.json();
+  const putRes = await fetch(uploadUrl, {
+    method: 'PUT',
+    body: file,
+    headers: { 'Content-Type': file.type || 'application/octet-stream' },
+  });
+  if (!putRes.ok) throw new Error('Failed to upload file');
+  return {
+    id: fileId,
+    mediaUrl,
+    name: file.name,
+    mimeType: file.type,
+    size: file.size,
+  };
+}
+
+function FileUploadDropzone({
+  uploadMessage,
+  isDragActive,
+  maxFileCount,
+  fileSizeLimit,
+  fileSizeLimitType,
+  formattedFormats,
+  disabled,
+  onTriggerInput,
+  onDrag,
+  onDrop,
+}: {
+  uploadMessage: string;
+  isDragActive: boolean;
+  maxFileCount: number;
+  fileSizeLimit: number;
+  fileSizeLimitType: string;
+  formattedFormats: string;
+  disabled: boolean;
+  onTriggerInput: () => void;
+  onDrag: (e: React.DragEvent) => void;
+  onDrop: (e: React.DragEvent) => void;
+}) {
+  return (
+    <div
+      onDragEnter={onDrag}
+      onDragOver={onDrag}
+      onDragLeave={onDrag}
+      onDrop={onDrop}
+      onClick={disabled ? undefined : onTriggerInput}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        border: `2px dashed ${isDragActive ? '#e20074' : '#d1d5db'}`,
+        borderRadius: '12px',
+        backgroundColor: isDragActive ? '#fdf2f8' : '#f9fafb',
+        padding: '40px 24px',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? 0.6 : 1,
+        textAlign: 'center',
+        boxSizing: 'border-box',
+      }}
+    >
+      <div style={{ fontSize: '16px', fontWeight: 600, color: '#374151', marginBottom: '8px' }}
+        dangerouslySetInnerHTML={{ __html: uploadMessage }}
+      />
+      <div style={{ fontSize: '13px', color: '#6b7280', lineHeight: 1.5 }}>
+        File limit: {maxFileCount}; File size limit: {fileSizeLimit}MB/
+        {fileSizeLimitType === 'PER_FILE' ? 'file' : 'in total'};
+        {formattedFormats && ` Supports: ${formattedFormats};`}
+      </div>
+    </div>
+  );
+}
+
+export function FileUploadScale({ question, selectedValue, onSelect }: FileUploadScaleProps) {
+  const {
+    uploadMessage = 'Drag attachments here or browse',
+    supportedFileFormats = [],
+    maxFileCount = 1,
+    fileSizeLimit = 10,
+    fileSizeLimitType = 'PER_FILE',
+  } = question;
+
+  const [isDragActive, setIsDragActive] = useState(false);
+  const [localError, setLocalError] = useState<string | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const currentFiles: UploadedFileAnswer[] = Array.isArray(selectedValue) ? selectedValue : [];
+
+  const validateAndUpload = async (files: FileList) => {
+    setLocalError(null);
+    const newFiles = Array.from(files);
+
+    if (currentFiles.length + newFiles.length > maxFileCount) {
+      setLocalError(`You can only upload up to ${maxFileCount} file(s) in total.`);
+      return;
+    }
+
+    for (const file of newFiles) {
+      const ext = file.name.split('.').pop()?.toUpperCase() || '';
+      if (supportedFileFormats.length > 0 && !supportedFileFormats.includes(ext)) {
+        setLocalError(`File type .${ext.toLowerCase()} is not supported.`);
+        return;
+      }
+      if (fileSizeLimitType === 'PER_FILE' && file.size > fileSizeLimit * 1024 * 1024) {
+        setLocalError(`File "${file.name}" exceeds the size limit of ${fileSizeLimit}MB per file.`);
+        return;
+      }
+    }
+
+    if (fileSizeLimitType === 'IN_TOTAL') {
+      const total = [...currentFiles.map(f => f.size ?? 0), ...newFiles.map(f => f.size)].reduce((a, b) => a + b, 0);
+      if (total > fileSizeLimit * 1024 * 1024) {
+        setLocalError(`Total size exceeds the limit of ${fileSizeLimit}MB.`);
+        return;
+      }
+    }
+
+    setUploading(true);
+    try {
+      const uploaded: UploadedFileAnswer[] = [];
+      for (const file of newFiles) {
+        uploaded.push(await uploadFileToS3(file, question.id));
+      }
+      onSelect([...currentFiles, ...uploaded]);
+    } catch (err) {
+      setLocalError(err instanceof Error ? err.message : 'Upload failed');
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleDrag = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (uploading) return;
+    setIsDragActive(e.type === 'dragenter' || e.type === 'dragover');
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragActive(false);
+    if (!uploading && e.dataTransfer.files?.length) {
+      void validateAndUpload(e.dataTransfer.files);
+    }
+  };
+
+  const removeFile = (index: number) => {
+    const next = currentFiles.filter((_, i) => i !== index);
+    onSelect(next.length > 0 ? next : undefined);
+    setLocalError(null);
+  };
+
+  const formattedFormats = supportedFileFormats.join(', ');
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '100%' }}>
+      <input
+        type="file"
+        ref={fileInputRef}
+        onChange={e => e.target.files && void validateAndUpload(e.target.files)}
+        multiple={maxFileCount > 1}
+        accept={supportedFileFormats.map(f => `.${f.toLowerCase()}`).join(',')}
+        style={{ display: 'none' }}
+      />
+
+      <FileUploadDropzone
+        uploadMessage={uploadMessage}
+        isDragActive={isDragActive}
+        maxFileCount={maxFileCount}
+        fileSizeLimit={fileSizeLimit}
+        fileSizeLimitType={fileSizeLimitType}
+        formattedFormats={formattedFormats}
+        disabled={uploading}
+        onTriggerInput={() => fileInputRef.current?.click()}
+        onDrag={handleDrag}
+        onDrop={handleDrop}
+      />
+
+      {uploading && (
+        <div style={{ fontSize: '14px', color: '#6b7280' }}>Uploading…</div>
+      )}
+
+      {localError && (
+        <div style={{
+          backgroundColor: '#fee2e2', border: '1px solid #fecaca', borderRadius: '8px',
+          padding: '12px 16px', color: '#b91c1c', fontSize: '14px', fontWeight: 500,
+        }}>
+          {localError}
+        </div>
+      )}
+
+      {currentFiles.length > 0 && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          {currentFiles.map((file, idx) => (
+            <div key={file.id} style={{
+              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+              padding: '12px 16px', backgroundColor: '#fff', border: '1px solid #e5e7eb', borderRadius: '8px',
+            }}>
+              <span style={{ fontSize: '14px', fontWeight: 500, color: '#374151' }}>{file.name ?? file.mediaUrl}</span>
+              <button type="button" onClick={() => removeFile(idx)} style={{
+                border: 'none', background: '#f3f4f6', borderRadius: '50%', width: 24, height: 24, cursor: 'pointer',
+              }}>
+                ×
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/docs/templates/HeatmapScale.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+/**
+ * Portable HeatmapScale — copy to src/components/HeatmapScale.tsx
+ * Also copy templates/heatmapCoords.ts to src/lib/heatmapCoords.ts
+ */
+
+import React, { useState } from 'react';
+import type { HeatmapAnswer, HeatmapQuestion } from '@explorer02/cfm-survey-sdk';
+import {
+  createNewSpot,
+  findSpotNearClick,
+  getNormalizedClickFromImage,
+} from './heatmapCoords';
+
+type HeatmapScaleProps = {
+  question: HeatmapQuestion;
+  selectedValue?: HeatmapAnswer;
+  onSelect: (answer: HeatmapAnswer) => void;
+};
+
+function HeatmapSpot({ spot }: { spot: { id: string; x: number; y: number } }) {
+  return (
+    <div
+      className="absolute rounded-full transition-transform duration-150 ease-out"
+      style={{
+        left: `${spot.x * 100}%`,
+        top: `${spot.y * 100}%`,
+        width: 16,
+        height: 16,
+        transform: 'translate(-50%, -50%)',
+        backgroundColor: '#F97316',
+        border: '2px solid white',
+        boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
+      }}
+    />
+  );
+}
+
+export function HeatmapScale({ question, selectedValue = [], onSelect }: HeatmapScaleProps) {
+  const [isImageReady, setIsImageReady] = useState(false);
+  const spots = selectedValue ?? [];
+  const spotLabel = question.maxClicksAllowed === 1 ? 'spot' : 'spots';
+
+  function handleImageClick(event: React.MouseEvent<HTMLImageElement>) {
+    if (!isImageReady) {
+      return;
+    }
+
+    const imageElement = event.currentTarget;
+    const rect = imageElement.getBoundingClientRect();
+    const { x, y } = getNormalizedClickFromImage(event, imageElement);
+    const nearSpot = findSpotNearClick(x, y, spots, rect);
+
+    if (nearSpot) {
+      const updated = spots.filter(spot => spot.id !== nearSpot.id);
+      onSelect(updated);
+      return;
+    }
+
+    if (spots.length >= question.maxClicksAllowed) {
+      return;
+    }
+
+    onSelect([...spots, createNewSpot(x, y)]);
+  }
+
+  function handleImageLoad() {
+    setIsImageReady(true);
+  }
+
+  function handleImageError() {
+    setIsImageReady(false);
+  }
+
+  return (
+    <div className="mt-4 flex w-full flex-col items-center">
+      <div className="relative inline-block max-w-full">
+        {!isImageReady && (
+          <div className="absolute inset-0 z-10 flex items-center justify-center rounded-md bg-gray-100">
+            <span className="text-sm text-gray-500">Loading image...</span>
+          </div>
+        )}
+        <img
+          src={question.imageUrl}
+          alt=""
+          draggable={false}
+          onLoad={handleImageLoad}
+          onError={handleImageError}
+          onClick={handleImageClick}
+          className="block max-w-full h-auto select-none rounded-md"
+          style={{ cursor: isImageReady ? 'crosshair' : 'default' }}
+        />
+        {isImageReady && (
+          <div className="pointer-events-none absolute inset-0">
+            {spots.map(spot => (
+              <HeatmapSpot key={spot.id} spot={spot} />
+            ))}
+          </div>
+        )}
+      </div>
+
+      <p className="mt-3 flex items-start gap-2 text-sm text-gray-500">
+        <span aria-hidden="true" className="mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-gray-400 text-[10px] font-semibold text-gray-500">
+          i
+        </span>
+        <span>
+          You can select up to {question.maxClicksAllowed} {spotLabel}. To change your selection,
+          simply click on the same spot again to remove it.
+        </span>
+      </p>
+    </div>
+  );
+}