@dataimago/interview 0.2.0-alpha.5 → 0.2.0-alpha.7

package/dist/index.js

@@ -38,8 +38,8 @@ function ProgressBar({ current, total, estimatedMinutesRemaining }) {
 }
 
 // src/QuestionCard.tsx
-import { useState, useEffect } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useState, useEffect, useId } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function defaultValueFor(question) {
   switch (question.inputType) {
     case "multi-select":
@@ -62,6 +62,30 @@ function canAdvanceWith(question, value) {
   if (typeof value === "object") return Object.keys(value).length > 0;
   return true;
 }
+function validationError(question, value) {
+  const v = question.validation;
+  if (!v) return null;
+  if (typeof value !== "string" || value.trim().length === 0) return null;
+  try {
+    return new RegExp(v.pattern).test(value) ? null : v.message;
+  } catch {
+    return null;
+  }
+}
+function hasValidationError(question, value) {
+  if (validationError(question, value) !== null) return true;
+  if (question.inputType === "composite" && question.subQuestions) {
+    const rec = value ?? {};
+    return question.subQuestions.some((sub) => validationError(sub, rec[sub.id]) !== null);
+  }
+  if ((question.inputType === "repeater" || question.inputType === "file-upload") && question.itemSchema) {
+    const rows = value ?? [];
+    return rows.some(
+      (row) => question.itemSchema.some((sub) => validationError(sub, row[sub.id]) !== null)
+    );
+  }
+  return false;
+}
 function QuestionCard({
   question,
   existingAnswer,
@@ -82,9 +106,12 @@ function QuestionCard({
     onAnswerSubmit(question.id, localValue);
     onNext();
   };
-  const canAdvance = canAdvanceWith(question, localValue);
+  const canAdvance = canAdvanceWith(question, localValue) && !hasValidationError(question, localValue);
   return /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className: "animate-slide-up", children: [
-    /* @__PURE__ */ jsx2("h2", { className: "font-display text-3xl font-medium text-stone-900 sm:text-4xl", children: question.prompt }),
+    /* @__PURE__ */ jsxs2("h2", { className: "font-display text-3xl font-medium text-stone-900 sm:text-4xl", children: [
+      question.prompt,
+      !question.required && /* @__PURE__ */ jsx2("span", { className: "ml-3 inline-block translate-y-[-0.2em] rounded-full border border-stone-300 bg-stone-100 px-3 py-1 align-middle font-sans text-xs font-medium uppercase tracking-wider text-stone-700", children: "Optional" })
+    ] }),
     question.subprompt && /* @__PURE__ */ jsx2("p", { className: "mt-4 text-lg text-stone-700", children: question.subprompt }),
     /* @__PURE__ */ jsx2("div", { className: "mt-8", children: /* @__PURE__ */ jsx2(
       InputForType,
@@ -128,7 +155,15 @@ function QuestionCard({
 function InputForType({ question, value, onChange }) {
   switch (question.inputType) {
     case "short-text":
-      return /* @__PURE__ */ jsx2(ShortTextInput, { value, onChange });
+      return /* @__PURE__ */ jsx2(
+        ShortTextInput,
+        {
+          question,
+          value,
+          onChange
+        },
+        question.id
+      );
     case "long-text":
       return /* @__PURE__ */ jsx2(LongTextInput, { value, onChange });
     case "single-select":
@@ -153,18 +188,33 @@ function InputForType({ question, value, onChange }) {
     }
   }
 }
-function ShortTextInput({ value, onChange }) {
-  return /* @__PURE__ */ jsx2(
-    "input",
-    {
-      type: "text",
-      value: value ?? "",
-      onChange: (e) => onChange(e.target.value),
-      autoFocus: true,
-      className: "w-full rounded-lg border-2 border-stone-200 bg-stone-50 px-4 py-3 text-lg text-stone-900 focus:border-forest-700 focus:outline-none",
-      placeholder: "Type your answer\u2026"
-    }
-  );
+function ShortTextInput({
+  question,
+  value,
+  onChange
+}) {
+  const [blurred, setBlurred] = useState(false);
+  const errorId = useId();
+  const error = question ? validationError(question, value) : null;
+  const showError = blurred && error !== null;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "text",
+        value: value ?? "",
+        onChange: (e) => onChange(e.target.value),
+        onBlur: () => setBlurred(true),
+        autoFocus: true,
+        "aria-label": question?.prompt,
+        "aria-invalid": showError || void 0,
+        "aria-describedby": showError ? errorId : void 0,
+        className: `w-full rounded-lg border-2 bg-stone-50 px-4 py-3 text-lg text-stone-900 focus:outline-none ${showError ? "border-red-400 focus:border-red-700" : "border-stone-200 focus:border-forest-700"}`,
+        placeholder: "Type your answer\u2026"
+      }
+    ),
+    showError && /* @__PURE__ */ jsx2("p", { id: errorId, className: "mt-2 text-sm font-medium text-red-800", children: error })
+  ] });
 }
 function LongTextInput({ value, onChange }) {
   return /* @__PURE__ */ jsx2(
@@ -379,6 +429,23 @@ function CompositeInput({
     ) })
   ] }, sub.id)) });
 }
+function isRowComplete(itemSchema, row) {
+  return itemSchema.every((sub) => {
+    if (!sub.required) return true;
+    const v = row[sub.id];
+    return typeof v === "string" ? v.trim().length > 0 : v !== void 0 && v !== null;
+  });
+}
+function summarizeRow(question, itemSchema, row) {
+  const stringValue = (id) => {
+    const v = row[id];
+    return typeof v === "string" ? v.trim() : "";
+  };
+  let primaryId = question.summaryField && stringValue(question.summaryField) ? question.summaryField : itemSchema.find((sub) => stringValue(sub.id))?.id;
+  const primary = primaryId ? stringValue(primaryId) : "";
+  const secondary = itemSchema.filter((sub) => sub.id !== primaryId).map((sub) => stringValue(sub.id)).filter(Boolean).join(" \xB7 ");
+  return { primary, secondary: secondary.length > 80 ? `${secondary.slice(0, 80)}\u2026` : secondary };
+}
 function RepeaterInput({
   question,
   value,
@@ -388,60 +455,137 @@ function RepeaterInput({
   const itemSchema = question.itemSchema ?? [];
   const min = question.listRange?.min ?? 1;
   const max = question.listRange?.max ?? Infinity;
+  const [activeRow, setActiveRow] = useState(() => {
+    const firstIncomplete = rows.findIndex((row) => !isRowComplete(itemSchema, row));
+    return firstIncomplete === -1 ? null : firstIncomplete;
+  });
   const updateRow = (i, patch) => {
     const next = [...rows];
     next[i] = { ...next[i], ...patch };
     onChange(next);
   };
   const addRow = () => {
-    if (rows.length < max) onChange([...rows, {}]);
+    if (rows.length >= max) return;
+    onChange([...rows, {}]);
+    setActiveRow(rows.length);
   };
   const removeRow = (i) => {
     if (rows.length <= 1) return;
     onChange(rows.filter((_, idx) => idx !== i));
+    setActiveRow((a) => a === null ? null : a === i ? null : a > i ? a - 1 : a);
   };
-  return /* @__PURE__ */ jsxs2("div", { className: "space-y-4", children: [
-    rows.map((row, i) => /* @__PURE__ */ jsxs2("div", { className: "rounded-lg border-2 border-stone-200 bg-stone-50 p-4", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "mb-3 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs2("span", { className: "font-mono text-xs uppercase tracking-wider text-stone-700", children: [
-          "Item ",
-          i + 1
-        ] }),
-        /* @__PURE__ */ jsx2(
-          "button",
-          {
-            type: "button",
-            onClick: () => removeRow(i),
-            disabled: rows.length <= min,
-            className: "btn-ghost text-xs text-stone-700 disabled:opacity-30",
-            "aria-label": `Remove item ${i + 1}`,
-            children: "Remove"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx2("div", { className: "space-y-4", children: itemSchema.map((sub) => /* @__PURE__ */ jsxs2("div", { children: [
-        /* @__PURE__ */ jsx2("div", { className: "text-sm font-medium text-stone-900", children: sub.prompt }),
-        sub.subprompt && /* @__PURE__ */ jsx2("div", { className: "mt-1 text-xs text-stone-700", children: sub.subprompt }),
-        /* @__PURE__ */ jsx2("div", { className: "mt-2", children: /* @__PURE__ */ jsx2(
-          InputForType,
+  const completeCount = rows.filter((row) => isRowComplete(itemSchema, row)).length;
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
+    rows.map((row, i) => {
+      const complete = isRowComplete(itemSchema, row);
+      if (i !== activeRow) {
+        const { primary, secondary } = summarizeRow(question, itemSchema, row);
+        return /* @__PURE__ */ jsxs2(
+          "div",
           {
-            question: sub,
-            value: row[sub.id],
-            onChange: (next) => updateRow(i, { [sub.id]: next })
-          }
-        ) })
-      ] }, sub.id)) })
-    ] }, i)),
-    /* @__PURE__ */ jsx2(
-      "button",
-      {
-        type: "button",
-        onClick: addRow,
-        disabled: rows.length >= max,
-        className: "inline-flex min-h-12 items-center px-2 text-sm font-medium text-forest-700 hover:text-forest-800 disabled:opacity-40",
-        children: "+ Add another"
+            className: "flex items-center justify-between gap-3 rounded-lg border-2 border-stone-200 bg-stone-50 px-4 py-2",
+            children: [
+              /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx2("div", { className: "truncate text-sm font-medium text-stone-900", children: primary || /* @__PURE__ */ jsx2("span", { className: "italic text-stone-600", children: "Empty entry" }) }),
+                (secondary || !complete) && /* @__PURE__ */ jsxs2("div", { className: "truncate text-xs text-stone-700", children: [
+                  secondary,
+                  !complete && /* @__PURE__ */ jsxs2("span", { className: "font-medium text-amber-800", children: [
+                    secondary ? " \xB7 " : "",
+                    "incomplete"
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-center", children: [
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setActiveRow(i),
+                    className: "btn-ghost text-xs text-stone-700",
+                    "aria-label": `Edit entry ${i + 1}${primary ? `: ${primary}` : ""}`,
+                    children: "Edit"
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => removeRow(i),
+                    disabled: rows.length <= min,
+                    className: "btn-ghost text-xs text-stone-700 disabled:opacity-30",
+                    "aria-label": `Remove entry ${i + 1}${primary ? `: ${primary}` : ""}`,
+                    children: "Remove"
+                  }
+                )
+              ] })
+            ]
+          },
+          i
+        );
       }
-    )
+      return /* @__PURE__ */ jsxs2("div", { className: "rounded-lg border-2 border-forest-700 bg-stone-50 p-4", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "mb-3 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs2("span", { className: "font-mono text-xs uppercase tracking-wider text-stone-700", children: [
+            "Entry ",
+            i + 1
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                onClick: () => setActiveRow(null),
+                className: "btn-ghost text-xs text-stone-700",
+                children: "Done"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                onClick: () => removeRow(i),
+                disabled: rows.length <= min,
+                className: "btn-ghost text-xs text-stone-700 disabled:opacity-30",
+                "aria-label": `Remove entry ${i + 1}`,
+                children: "Remove"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: "space-y-4", children: itemSchema.map((sub) => /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx2("div", { className: "text-sm font-medium text-stone-900", children: sub.prompt }),
+          sub.subprompt && /* @__PURE__ */ jsx2("div", { className: "mt-1 text-xs text-stone-700", children: sub.subprompt }),
+          /* @__PURE__ */ jsx2("div", { className: "mt-2", children: /* @__PURE__ */ jsx2(
+            InputForType,
+            {
+              question: sub,
+              value: row[sub.id],
+              onChange: (next) => updateRow(i, { [sub.id]: next })
+            }
+          ) })
+        ] }, sub.id)) })
+      ] }, i);
+    }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          onClick: addRow,
+          disabled: rows.length >= max,
+          className: "inline-flex min-h-12 items-center px-2 text-sm font-medium text-forest-700 hover:text-forest-800 disabled:opacity-40",
+          children: "+ Add another"
+        }
+      ),
+      /* @__PURE__ */ jsxs2("p", { "aria-live": "polite", className: "font-mono text-xs text-stone-700", children: [
+        completeCount,
+        " of ",
+        rows.length,
+        " ",
+        rows.length === 1 ? "entry" : "entries",
+        " complete"
+      ] })
+    ] })
   ] });
 }
 function FileUploadInput({
@@ -694,7 +838,12 @@ function AnswerSidebar({ questions, currentIndex, answers, onSelectQuestion }) {
                       children: q.prompt.length > 50 ? q.prompt.slice(0, 50) + "\u2026" : q.prompt
                     }
                   ),
-                  answered && /* @__PURE__ */ jsx3("div", { className: "mt-1 text-xs italic text-stone-700 line-clamp-1", children: preview })
+                  answered && /* @__PURE__ */ jsx3("div", { className: "mt-1 text-xs italic text-stone-700 line-clamp-1", children: preview }),
+                  !answered && q.required && /* @__PURE__ */ jsxs3("div", { className: "mt-1 text-xs font-medium text-amber-800", children: [
+                    /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\u25CF" }),
+                    " Required \u2014 not yet answered"
+                  ] }),
+                  !answered && !q.required && /* @__PURE__ */ jsx3("div", { className: "mt-1 text-xs text-stone-600", children: "Optional" })
                 ] })
               ] })
             }