@marktiderman/genesis-forms-studio 0.1.1 → 0.2.0

package/dist/index.js

@@ -1,8 +1,8 @@
 "use client";
-import { SAVE_STATE_LABEL, readinessChip, prefilledUrl, embedSnippet, lowThisWeek, NO_FILTERS, lowScaleAtMost, dayLabel } from './chunk-ZHH2UHOS.js';
-export { NO_FILTERS, SAVE_STATE_LABEL, answerCell, answerColumns, answersByKey, carryAnswers, comparisonFilter, dayLabel, embedSnippet, filterResponses, followUpOf, formAvailability, formCounts, formNavItems, formStatusChip, hasLowRating, hasLowRatingExcept, headlineCards, headlineNumbers, highestRating, isFiltered, isFull, lowRatingAtMost, lowRatingLabel, lowScaleAtMost, lowThisWeek, lowestRating, needsFollowUp, parseInstant, plainLabel, prefilledUrl, presetRange, readinessChip, readinessOf, summarizeResponses, takesResponses, toCsv, toResponseFilter, valuesByKey } from './chunk-ZHH2UHOS.js';
+import { SAVE_STATE_LABEL, readinessChip, prefilledUrl, embedSnippet, STATUS_FILTER_LABEL, lowThisWeek, NO_FILTERS, lowScaleAtMost, dayLabel } from './chunk-HAEZ7G3G.js';
+export { NO_FILTERS, RESPONSE_STATUS_LABEL, SAVE_STATE_LABEL, STATUS_FILTER_LABEL, answerCell, answerColumns, answersByKey, carryAnswers, comparisonFilter, dayLabel, dropOffByQuestion, embedSnippet, filterResponses, followUpOf, formAvailability, formCounts, formNavItems, formStatusChip, hasLowRating, hasLowRatingExcept, headlineCards, headlineNumbers, highestRating, isFiltered, isFull, lowRatingAtMost, lowRatingLabel, lowScaleAtMost, lowThisWeek, lowestRating, matchesStatus, needsFollowUp, parseInstant, plainLabel, prefilledUrl, presetRange, readinessChip, readinessOf, summarizeResponses, takesResponses, toCsv, toResponseFilter, valuesByKey } from './chunk-HAEZ7G3G.js';
 import { StatusBadge, cn, Badge, Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage, Button, Separator, ToggleGroup, ToggleGroupItem, Skeleton, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Tabs, TabsList, TabsTrigger, TabsContent, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Label, Textarea, Input, EmptyState, toast } from '@marktiderman/genesis-ui';
-import { Settings, Inbox, GitBranch, ListChecks, Check, Loader2, TriangleAlert, Undo2, Redo2, Eye, Share2, Rocket, CircleAlert, CircleCheck, Star, ExternalLink, Printer, Copy, CalendarDays, X, CircleDot, SquareCheck, Gauge, Type } from 'lucide-react';
+import { Settings, Inbox, GitBranch, ListChecks, Check, Loader2, TriangleAlert, Undo2, Redo2, Eye, Share2, Rocket, CircleAlert, CircleCheck, Star, ExternalLink, Printer, Copy, CalendarDays, CircleDashed, X, CircleDot, SquareCheck, Gauge, Type, ChartNoAxesColumnDecreasing, ImageOff, Image } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useId, useState, useEffect } from 'react';
 
@@ -604,6 +604,7 @@ function ResponsesFilters({
   choices = [],
   ratingMax = null,
   lowLabel = null,
+  statuses = false,
   filtered
 }) {
   const ratings = ratingMax ? Array.from({ length: Math.min(ratingMax, 10) - 1 }, (_, i) => i + 1) : [];
@@ -640,6 +641,20 @@ function ResponsesFilters({
         }
       )
     ] }) : null,
+    statuses ? /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: value.status ?? "counted",
+        onValueChange: (status) => onChange({ ...value, status }),
+        children: [
+          /* @__PURE__ */ jsxs(SelectTrigger, { className: TRIGGER, "aria-label": "Status", "data-testid": "responses-status", children: [
+            /* @__PURE__ */ jsx(CircleDashed, { className: "size-4 text-muted-foreground", "aria-hidden": true }),
+            /* @__PURE__ */ jsx(SelectValue, {})
+          ] }),
+          /* @__PURE__ */ jsx(SelectContent, { children: Object.keys(STATUS_FILTER_LABEL).map((s) => /* @__PURE__ */ jsx(SelectItem, { value: s, children: STATUS_FILTER_LABEL[s] }, s)) })
+        ]
+      }
+    ) : null,
     choices.filter((c) => c.options.length > 0).map((c) => /* @__PURE__ */ jsxs(
       Select,
       {
@@ -879,7 +894,118 @@ function QuestionSummaryCards({
   }
   return /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 flex-col gap-3", className), children: summaries.map((s) => /* @__PURE__ */ jsx(QuestionSummaryCard, { summary: s, today, answerMeta }, s.key)) });
 }
+var plural2 = (n, one, many = `${one}s`) => `${n} ${n === 1 ? one : many}`;
+function DropOffByQuestion({
+  dropOffs,
+  isLoading = false,
+  title = "Drop-off by question",
+  className
+}) {
+  if (isLoading) return /* @__PURE__ */ jsx(Skeleton, { className: cn("h-40 w-full rounded-lg", className) });
+  const started = dropOffs[0]?.views ?? 0;
+  const worst = Math.max(0, ...dropOffs.map((d) => d.stopped));
+  return /* @__PURE__ */ jsx(
+    SummaryCard,
+    {
+      icon: /* @__PURE__ */ jsx(ChartNoAxesColumnDecreasing, {}),
+      title,
+      meta: started ? `${plural2(started, "person", "people")} started` : "Nobody has started yet",
+      className,
+      testID: "drop-off",
+      children: started ? /* @__PURE__ */ jsx("ol", { className: "space-y-3", children: dropOffs.map((d, i) => /* @__PURE__ */ jsxs("li", { className: "space-y-1.5 text-sm", "data-testid": `drop-off-${d.key}`, children: [
+        /* @__PURE__ */ jsxs("p", { className: "flex items-baseline justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 break-words", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground tabular-nums", children: [
+              i + 1,
+              ". "
+            ] }),
+            d.label || "Untitled question"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 whitespace-nowrap tabular-nums text-muted-foreground", children: d.dropOff === null ? "\u2013" : `${d.dropOff}% drop-off` })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "block h-2 overflow-hidden rounded-full bg-muted", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "block h-full rounded-full",
+              d.stopped && d.stopped === worst ? "bg-warning" : "bg-primary"
+            ),
+            style: { width: `${d.dropOff ?? 0}%` }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          plural2(d.views, "view"),
+          " \xB7 ",
+          d.stopped,
+          " stopped here"
+        ] })
+      ] }, d.key)) }) : null
+    }
+  );
+}
+var UNDRAWABLE = /* @__PURE__ */ new Set(["image/heic", "image/heif"]);
+function Photo({ photo, resolveUrl }) {
+  const [resolved, setResolved] = useState({ state: "loading" });
+  const [broken, setBroken] = useState(false);
+  useEffect(() => {
+    let live = true;
+    setResolved({ state: "loading" });
+    setBroken(false);
+    resolveUrl(photo).then((url) => live && setResolved(url ? { state: "ready", url } : { state: "missing" })).catch(() => live && setResolved({ state: "missing" }));
+    return () => {
+      live = false;
+    };
+  }, [photo.id]);
+  const tile = "relative size-28 overflow-hidden rounded-md border border-border bg-muted";
+  if (resolved.state === "loading") return /* @__PURE__ */ jsx(Skeleton, { className: "size-28 rounded-md", "aria-label": `Loading ${photo.name}` });
+  if (resolved.state === "missing") {
+    return /* @__PURE__ */ jsxs("div", { className: cn(tile, "flex flex-col items-center justify-center gap-1 p-2 text-center text-xs text-muted-foreground"), children: [
+      /* @__PURE__ */ jsx(ImageOff, { className: "size-5", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("span", { children: "Photo unavailable" })
+    ] });
+  }
+  if (broken || UNDRAWABLE.has(photo.type.toLowerCase())) {
+    return /* @__PURE__ */ jsxs("div", { className: cn(tile, "flex flex-col items-center justify-center gap-1 p-2 text-center text-xs"), children: [
+      /* @__PURE__ */ jsx(Image, { className: "size-5 text-muted-foreground", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("span", { className: "line-clamp-2 break-all text-muted-foreground", children: photo.name }),
+      /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: resolved.url,
+          target: "_blank",
+          rel: "noreferrer",
+          className: "inline-flex items-center gap-1 font-medium text-primary underline-offset-4 hover:underline",
+          children: [
+            "Open ",
+            /* @__PURE__ */ jsx(ExternalLink, { className: "size-3", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: photo.name })
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: resolved.url,
+      target: "_blank",
+      rel: "noreferrer",
+      className: cn(tile, "block outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"),
+      title: photo.name,
+      children: /* @__PURE__ */ jsx("img", { src: resolved.url, alt: photo.name, loading: "lazy", className: "size-full object-cover", onError: () => setBroken(true) })
+    }
+  );
+}
+function PhotoAnswer({
+  photos,
+  resolveUrl,
+  className,
+  testID
+}) {
+  if (!photos.length) return null;
+  return /* @__PURE__ */ jsx("ul", { className: cn("flex flex-wrap gap-3", className), "aria-label": "Photos", "data-testid": testID, children: photos.map((photo) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Photo, { photo, resolveUrl }) }, photo.id)) });
+}
 
-export { Chip, FORM_NAV_ICONS, FollowUpList, HeadlineNumbers, QuestionSummaryCard, QuestionSummaryCards, ReadinessChip, ResourceHeader, ResourceSettingsPage, ResponsesFilters, ResponsesToolbar, SettingsSection, ShareDialog, SummaryCard };
+export { Chip, DropOffByQuestion, FORM_NAV_ICONS, FollowUpList, HeadlineNumbers, PhotoAnswer, QuestionSummaryCard, QuestionSummaryCards, ReadinessChip, ResourceHeader, ResourceSettingsPage, ResponsesFilters, ResponsesToolbar, SettingsSection, ShareDialog, SummaryCard };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map