@explorer02/cfm-survey-sdk 0.2.2 → 0.2.4

package/templates/docs/templates/RankOrderScale.tsx

@@ -0,0 +1,353 @@
+'use client';
+
+/**
+ * Portable RankOrderScale template — copy to src/components/RankOrderScale.tsx
+ * Import SDK from your package.json: @explorer02/cfm-survey-sdk or @repo/sdk
+ * Requires: @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
+ * Next.js: add 'use client' (already present); optional dynamic(..., { ssr: false }) wrapper in Question.tsx
+ */
+
+import React, { useMemo } from 'react';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import type {
+  RankOrderAnswers,
+  RankOrderOption,
+  RankOrderOptionDisplay,
+  RankOrderQuestion,
+} from '@explorer02/cfm-survey-sdk';
+import {
+  assignRankWithoutDuplicates,
+  buildRankOrderFromOrderedOptionIds,
+  getOrderedOptionIdsFromRanks,
+  normalizeRankOrderAnswers,
+} from '@explorer02/cfm-survey-sdk';
+
+type RankOrderScaleProps = {
+  question: RankOrderQuestion;
+  selectedValue?: RankOrderAnswers;
+  onSelect: (value: RankOrderAnswers) => void;
+};
+
+type RankOrderOptionRowProps = {
+  option: RankOrderOption;
+  optionDisplay: RankOrderOptionDisplay;
+  rankSelect?: React.ReactNode;
+  trailingControls?: React.ReactNode;
+  dragHandle?: React.ReactNode;
+  rankBadge?: number;
+};
+
+function RankOrderOptionContent({
+  option,
+  optionDisplay,
+}: {
+  option: RankOrderOption;
+  optionDisplay: RankOrderOptionDisplay;
+}) {
+  const imageUrl = option.imageUrl || option.previewImageUrl;
+
+  if (optionDisplay === 'imageOnly') {
+    return (
+      <div className="flex flex-1 items-center">
+        {imageUrl ? (
+          <img
+            src={imageUrl}
+            alt={option.optionLabel || 'Option image'}
+            className="h-24 w-24 rounded-md object-cover"
+          />
+        ) : (
+          <div className="flex h-24 w-24 items-center justify-center rounded-md bg-gray-100 text-xs text-gray-400">
+            No image
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (optionDisplay === 'textOnly') {
+    return (
+      <span
+        className="flex-1 text-[15px] font-medium leading-tight text-gray-900"
+        dangerouslySetInnerHTML={{ __html: option.optionLabel }}
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-1 items-center gap-4">
+      {imageUrl ? (
+        <img
+          src={imageUrl}
+          alt={option.optionLabel || 'Option image'}
+          className="h-14 w-14 shrink-0 rounded-md object-cover"
+        />
+      ) : (
+        <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-md bg-gray-100 text-xs text-gray-400">
+          No image
+        </div>
+      )}
+      <span
+        className="text-[15px] font-medium leading-tight text-gray-900"
+        dangerouslySetInnerHTML={{ __html: option.optionLabel }}
+      />
+    </div>
+  );
+}
+
+function RankOrderOptionRow({
+  option,
+  optionDisplay,
+  rankSelect,
+  trailingControls,
+  dragHandle,
+  rankBadge,
+}: RankOrderOptionRowProps) {
+  return (
+    <div className="flex items-center gap-3 rounded-lg border border-[#e5e5e5] bg-white px-4 py-3 transition-colors hover:bg-gray-50/50">
+      {rankSelect}
+      {dragHandle}
+      {rankBadge !== undefined && (
+        <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[#fdf2f8] text-sm font-semibold text-[#e20074]">
+          {rankBadge}
+        </span>
+      )}
+      <RankOrderOptionContent option={option} optionDisplay={optionDisplay} />
+      {trailingControls}
+    </div>
+  );
+}
+
+function DropdownRankLayout({
+  question,
+  selectedValue,
+  onSelect,
+}: RankOrderScaleProps) {
+  const rankAnswers = normalizeRankOrderAnswers(selectedValue);
+  const rankChoices = question.options.map((_, index) => index + 1);
+
+  const handleRankChange = (optionId: string, rawValue: string) => {
+    const nextRank = rawValue === '' ? undefined : Number(rawValue);
+    onSelect(assignRankWithoutDuplicates(rankAnswers, optionId, nextRank));
+  };
+
+  return (
+    <div className="space-y-3">
+      {question.options.map(option => {
+        const currentRank = rankAnswers[option.id];
+
+        return (
+          <RankOrderOptionRow
+            key={option.id}
+            option={option}
+            optionDisplay={question.optionDisplay}
+            rankSelect={
+              <select
+                aria-label={`Rank for ${option.optionLabel || option.id}`}
+                value={currentRank ?? ''}
+                onChange={event => handleRankChange(option.id, event.target.value)}
+                className="h-10 w-16 shrink-0 rounded border border-gray-300 bg-white px-2 text-sm outline-none focus:border-[#e20074] focus:ring-1 focus:ring-[#e20074]"
+              >
+                <option value="">-</option>
+                {rankChoices.map(rank => (
+                  <option key={rank} value={rank}>
+                    {rank}
+                  </option>
+                ))}
+              </select>
+            }
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+type SortableRankItemProps = {
+  option: RankOrderOption;
+  optionDisplay: RankOrderOptionDisplay;
+  rank: number;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+  isFirst: boolean;
+  isLast: boolean;
+};
+
+function SortableRankItem({
+  option,
+  optionDisplay,
+  rank,
+  onMoveUp,
+  onMoveDown,
+  isFirst,
+  isLast,
+}: SortableRankItemProps) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: option.id,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.85 : 1,
+    zIndex: isDragging ? 10 : undefined,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style}>
+      <RankOrderOptionRow
+        option={option}
+        optionDisplay={optionDisplay}
+        rankBadge={rank}
+        dragHandle={
+          <button
+            type="button"
+            aria-label={`Drag to reorder ${option.optionLabel || option.id}`}
+            className="flex h-10 w-8 shrink-0 cursor-grab items-center justify-center rounded text-gray-500 hover:bg-gray-100 active:cursor-grabbing"
+            {...attributes}
+            {...listeners}
+          >
+            <svg viewBox="0 0 20 20" className="h-5 w-5" fill="currentColor" aria-hidden="true">
+              <circle cx="7" cy="6" r="1.5" />
+              <circle cx="13" cy="6" r="1.5" />
+              <circle cx="7" cy="10" r="1.5" />
+              <circle cx="13" cy="10" r="1.5" />
+              <circle cx="7" cy="14" r="1.5" />
+              <circle cx="13" cy="14" r="1.5" />
+            </svg>
+          </button>
+        }
+        trailingControls={
+          <div className="flex shrink-0 flex-col gap-1">
+            <button
+              type="button"
+              aria-label={`Move ${option.optionLabel || option.id} up`}
+              disabled={isFirst}
+              onClick={onMoveUp}
+              className="rounded border border-gray-300 px-2 py-1 text-xs text-gray-700 disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              Up
+            </button>
+            <button
+              type="button"
+              aria-label={`Move ${option.optionLabel || option.id} down`}
+              disabled={isLast}
+              onClick={onMoveDown}
+              className="rounded border border-gray-300 px-2 py-1 text-xs text-gray-700 disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              Down
+            </button>
+          </div>
+        }
+      />
+    </div>
+  );
+}
+
+function DragDropRankLayout({
+  question,
+  selectedValue,
+  onSelect,
+}: RankOrderScaleProps) {
+  const rankAnswers = normalizeRankOrderAnswers(selectedValue);
+  const optionIds = question.options.map(option => option.id);
+
+  const orderedOptionIds = useMemo(() => {
+    const rankedIds = getOrderedOptionIdsFromRanks(rankAnswers, optionIds);
+    const unrankedIds = optionIds.filter(optionId => !rankedIds.includes(optionId));
+    return rankedIds.length > 0 ? [...rankedIds, ...unrankedIds] : optionIds;
+  }, [rankAnswers, optionIds]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const updateOrder = (nextOrder: string[]) => {
+    onSelect(buildRankOrderFromOrderedOptionIds(nextOrder));
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) {
+      return;
+    }
+
+    const oldIndex = orderedOptionIds.indexOf(String(active.id));
+    const newIndex = orderedOptionIds.indexOf(String(over.id));
+    if (oldIndex === -1 || newIndex === -1) {
+      return;
+    }
+
+    updateOrder(arrayMove(orderedOptionIds, oldIndex, newIndex));
+  };
+
+  const moveOption = (optionId: string, direction: 'up' | 'down') => {
+    const currentIndex = orderedOptionIds.indexOf(optionId);
+    if (currentIndex === -1) {
+      return;
+    }
+
+    const targetIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1;
+    if (targetIndex < 0 || targetIndex >= orderedOptionIds.length) {
+      return;
+    }
+
+    updateOrder(arrayMove(orderedOptionIds, currentIndex, targetIndex));
+  };
+
+  return (
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <SortableContext items={orderedOptionIds} strategy={verticalListSortingStrategy}>
+        <div className="space-y-3">
+          {orderedOptionIds.map((optionId, index) => {
+            const option = question.options.find(item => item.id === optionId);
+            if (!option) {
+              return null;
+            }
+
+            return (
+              <SortableRankItem
+                key={option.id}
+                option={option}
+                optionDisplay={question.optionDisplay}
+                rank={index + 1}
+                isFirst={index === 0}
+                isLast={index === orderedOptionIds.length - 1}
+                onMoveUp={() => moveOption(option.id, 'up')}
+                onMoveDown={() => moveOption(option.id, 'down')}
+              />
+            );
+          })}
+        </div>
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+export function RankOrderScale({ question, selectedValue, onSelect }: RankOrderScaleProps) {
+  if (question.interactionMode === 'dragAndDrop') {
+    return (
+      <DragDropRankLayout question={question} selectedValue={selectedValue} onSelect={onSelect} />
+    );
+  }
+
+  return <DropdownRankLayout question={question} selectedValue={selectedValue} onSelect={onSelect} />;
+}

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>
+  );
+}