@sunboard/react 0.6.1 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +24 -1
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +138 -20
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +124 -48
- package/package.json +2 -2
package/dist/index.d.mts
CHANGED
|
@@ -52,6 +52,12 @@ type TourResult = {
|
|
|
52
52
|
ok: false;
|
|
53
53
|
reason: "not-ready" | "missing-user" | "missing-tour";
|
|
54
54
|
};
|
|
55
|
+
type StepResult = {
|
|
56
|
+
ok: true;
|
|
57
|
+
} | {
|
|
58
|
+
ok: false;
|
|
59
|
+
reason: "not-ready" | "missing-user" | "missing-step" | "not-manual" | "network-error";
|
|
60
|
+
};
|
|
55
61
|
type TooltipResult = {
|
|
56
62
|
ok: true;
|
|
57
63
|
} | {
|
|
@@ -106,6 +112,12 @@ type SunboardContextValue = {
|
|
|
106
112
|
advanceTour: () => Promise<TourResult>;
|
|
107
113
|
navigateToStep: (step: SunboardStep) => Promise<void>;
|
|
108
114
|
startChecklistStep: (step: SunboardStep) => Promise<TourResult | TooltipResult | void>;
|
|
115
|
+
/**
|
|
116
|
+
* Complete a checklist step because the user checked it off. Only steps the
|
|
117
|
+
* spec allows (`manual` not set to false) accept it; the completion is
|
|
118
|
+
* recorded with a "manual" source, distinct from event/tour completions.
|
|
119
|
+
*/
|
|
120
|
+
completeChecklistStep: (stepKey: string) => Promise<StepResult>;
|
|
109
121
|
visibleHotspots: Array<{
|
|
110
122
|
key: string;
|
|
111
123
|
hotspot: SunboardHotspot;
|
|
@@ -209,6 +221,12 @@ type ChecklistViewStep = {
|
|
|
209
221
|
description?: string;
|
|
210
222
|
badge?: string;
|
|
211
223
|
actionLabel?: string;
|
|
224
|
+
/**
|
|
225
|
+
* True when the user can complete this step by checking it off (the spec
|
|
226
|
+
* default). False (`manual: false` in the spec) means the step completes
|
|
227
|
+
* only through its instrumented rule; render its checkbox non-interactive.
|
|
228
|
+
*/
|
|
229
|
+
manuallyCompletable: boolean;
|
|
212
230
|
};
|
|
213
231
|
type ChecklistCompletion = {
|
|
214
232
|
title: string;
|
|
@@ -229,6 +247,11 @@ type UseChecklistResult = {
|
|
|
229
247
|
isCompleted: (key: string) => boolean;
|
|
230
248
|
hasAction: (step: ChecklistViewStep) => boolean;
|
|
231
249
|
startStep: (step: ChecklistViewStep) => void;
|
|
250
|
+
/**
|
|
251
|
+
* Mark the step complete because the user checked it off. A no-op for
|
|
252
|
+
* steps that are not manually completable or already complete.
|
|
253
|
+
*/
|
|
254
|
+
completeStep: (step: ChecklistViewStep) => void;
|
|
232
255
|
completion?: ChecklistCompletion;
|
|
233
256
|
dismissCompletion: () => void;
|
|
234
257
|
};
|
|
@@ -321,5 +344,5 @@ type UseTooltipsResult = {
|
|
|
321
344
|
*/
|
|
322
345
|
declare function useTooltips(): UseTooltipsResult;
|
|
323
346
|
//#endregion
|
|
324
|
-
export { type ChecklistViewStep, type RuntimeBootstrapRequest, type RuntimeBootstrapResponse, type RuntimeExperience, type RuntimeProgress, type RuntimeTrackRequest, type RuntimeTrackResponse, Sunboard, SunboardChecklist, type SunboardContextValue, SunboardHotspots, SunboardProvider, type SunboardProviderProps, SunboardRuntimeApiError, SunboardRuntimeClient, type SunboardRuntimeClientOptions, SunboardSurvey, SunboardTooltips, SunboardTour, type SunboardUser, type SurveyResult, type SurveyViewOption, type SurveyViewQuestion, type SurveyViewStep, type TooltipResult, type TooltipView, type TourResult, type TrackProperties, type TrackResult, type UseChecklistResult, type UseSurveyResult, type UseTooltipsResult, type VisibleSunboardTooltip, useChecklist, useSunboard, useSurvey, useTooltips };
|
|
347
|
+
export { type ChecklistViewStep, type RuntimeBootstrapRequest, type RuntimeBootstrapResponse, type RuntimeExperience, type RuntimeProgress, type RuntimeTrackRequest, type RuntimeTrackResponse, type StepResult, Sunboard, SunboardChecklist, type SunboardContextValue, SunboardHotspots, SunboardProvider, type SunboardProviderProps, SunboardRuntimeApiError, SunboardRuntimeClient, type SunboardRuntimeClientOptions, SunboardSurvey, SunboardTooltips, SunboardTour, type SunboardUser, type SurveyResult, type SurveyViewOption, type SurveyViewQuestion, type SurveyViewStep, type TooltipResult, type TooltipView, type TourResult, type TrackProperties, type TrackResult, type UseChecklistResult, type UseSurveyResult, type UseTooltipsResult, type VisibleSunboardTooltip, useChecklist, useSunboard, useSurvey, useTooltips };
|
|
325
348
|
//# sourceMappingURL=index.d.mts.map
|
package/dist/index.d.mts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","names":[],"sources":["../src/adapters/navigation.ts","../src/lib/detect-identities.ts","../src/hooks/sunboard-context.ts","../src/components/SunboardProvider.tsx","../src/components/SunboardHotspots.tsx","../src/components/SunboardTooltips.tsx","../src/components/SunboardTour.tsx","../src/components/Sunboard.tsx","../src/hooks/useSunboard.ts","../src/hooks/useChecklist.ts","../src/hooks/useSurvey.ts","../src/hooks/useTooltips.ts"],"sourcesContent":[],"mappings":";;;;;;KAAY,gBAAA,2BAA2C;;;;;;;;;AAAvD;;;;ACkBA;;;;ACPA;AAOA;AAEA;AAIY,KDNA,cAAA,GAAiB,MCML,CAAA,MAAA,EAAA,MAAA,CAAA,GAAA,KAAA;;;KAbZ,YAAA;;;;EFXA,UAAA,CAAA,EEeG,MFfa,CAAA,MAAA,EAAA,OAA2B,CAAA;;KEkB3C,eAAA,GAAkB;KAElB,WAAA;EDFA,EAAA,EAAA,IAAA;;;;ACPZ,CAAA;AAOY,KAMA,YAAA,GANe;EAEf,EAAA,EAAA,IAAA;AAIZ,CAAA,GAAY;EAOA,EAAA,EAAA,KAAA;EAIA,MAAA,EAAA,
|
|
1
|
+
{"version":3,"file":"index.d.mts","names":[],"sources":["../src/adapters/navigation.ts","../src/lib/detect-identities.ts","../src/hooks/sunboard-context.ts","../src/components/SunboardProvider.tsx","../src/components/SunboardHotspots.tsx","../src/components/SunboardTooltips.tsx","../src/components/SunboardTour.tsx","../src/components/Sunboard.tsx","../src/hooks/useSunboard.ts","../src/hooks/useChecklist.ts","../src/hooks/useSurvey.ts","../src/hooks/useTooltips.ts"],"sourcesContent":[],"mappings":"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"}
|
package/dist/index.mjs
CHANGED
|
@@ -310,6 +310,52 @@ function SunboardProvider({ spec: specProp, user, loading: loadingProp, route, n
|
|
|
310
310
|
user,
|
|
311
311
|
versionId
|
|
312
312
|
]);
|
|
313
|
+
const completeChecklistStep = useCallback(async (stepKey) => {
|
|
314
|
+
if (resolvedLoading || !resolvedSpec) return {
|
|
315
|
+
ok: false,
|
|
316
|
+
reason: "not-ready"
|
|
317
|
+
};
|
|
318
|
+
if (!user) return {
|
|
319
|
+
ok: false,
|
|
320
|
+
reason: "missing-user"
|
|
321
|
+
};
|
|
322
|
+
const step = (resolvedSpec.checklist?.steps ?? []).find((candidate) => candidate.key === stepKey);
|
|
323
|
+
if (!step) return {
|
|
324
|
+
ok: false,
|
|
325
|
+
reason: "missing-step"
|
|
326
|
+
};
|
|
327
|
+
if (step.manual === false) return {
|
|
328
|
+
ok: false,
|
|
329
|
+
reason: "not-manual"
|
|
330
|
+
};
|
|
331
|
+
setCompletedStepKeys((current) => mergeKeys(current, [stepKey]));
|
|
332
|
+
if (hostedMode && client && experienceKey) try {
|
|
333
|
+
applyProgress((await client.completeStep({
|
|
334
|
+
experienceKey,
|
|
335
|
+
origin: currentOrigin,
|
|
336
|
+
route: currentRoute,
|
|
337
|
+
stepKey,
|
|
338
|
+
user: toRuntimeUser(user),
|
|
339
|
+
versionId: versionId ?? void 0
|
|
340
|
+
})).progress, setCompletedStepKeys, setCompletedTourKeys, setDismissedTooltipKeys);
|
|
341
|
+
} catch {
|
|
342
|
+
return {
|
|
343
|
+
ok: false,
|
|
344
|
+
reason: "network-error"
|
|
345
|
+
};
|
|
346
|
+
}
|
|
347
|
+
return { ok: true };
|
|
348
|
+
}, [
|
|
349
|
+
client,
|
|
350
|
+
currentOrigin,
|
|
351
|
+
currentRoute,
|
|
352
|
+
experienceKey,
|
|
353
|
+
hostedMode,
|
|
354
|
+
resolvedLoading,
|
|
355
|
+
resolvedSpec,
|
|
356
|
+
user,
|
|
357
|
+
versionId
|
|
358
|
+
]);
|
|
313
359
|
const submitSurvey = useCallback(async (answers) => {
|
|
314
360
|
if (resolvedLoading || !resolvedSpec) return {
|
|
315
361
|
ok: false,
|
|
@@ -632,6 +678,7 @@ function SunboardProvider({ spec: specProp, user, loading: loadingProp, route, n
|
|
|
632
678
|
advanceTour,
|
|
633
679
|
navigateToStep,
|
|
634
680
|
startChecklistStep,
|
|
681
|
+
completeChecklistStep,
|
|
635
682
|
visibleHotspots,
|
|
636
683
|
dismissedTooltipKeys: effectiveDismissedTooltipKeys,
|
|
637
684
|
visibleTooltips,
|
|
@@ -655,6 +702,7 @@ function SunboardProvider({ spec: specProp, user, loading: loadingProp, route, n
|
|
|
655
702
|
advanceTour,
|
|
656
703
|
navigateToStep,
|
|
657
704
|
startChecklistStep,
|
|
705
|
+
completeChecklistStep,
|
|
658
706
|
visibleHotspots,
|
|
659
707
|
effectiveDismissedTooltipKeys,
|
|
660
708
|
visibleTooltips,
|
|
@@ -893,7 +941,7 @@ function interpolateOptional$1(text, user) {
|
|
|
893
941
|
return interpolateTokens(text, user) || void 0;
|
|
894
942
|
}
|
|
895
943
|
function useChecklist() {
|
|
896
|
-
const { spec, user, loading, completedStepKeys, completedCount, totalSteps, startChecklistStep } = useSunboard();
|
|
944
|
+
const { spec, user, loading, completedStepKeys, completedCount, totalSteps, startChecklistStep, completeChecklistStep } = useSunboard();
|
|
897
945
|
const [dismissedKey, setDismissedKey] = useState(null);
|
|
898
946
|
const hasChecklist = Boolean(spec && spec.checklist?.steps.length);
|
|
899
947
|
const allCompleted = totalSteps > 0 && completedCount >= totalSteps;
|
|
@@ -932,7 +980,8 @@ function useChecklist() {
|
|
|
932
980
|
title: interpolateTokens(step.title, user ?? null),
|
|
933
981
|
description: step.description ? interpolateTokens(step.description, user ?? null) : void 0,
|
|
934
982
|
badge: step.badge ? interpolateTokens(step.badge, user ?? null) : void 0,
|
|
935
|
-
actionLabel: actionLabelFor(step)
|
|
983
|
+
actionLabel: actionLabelFor(step),
|
|
984
|
+
manuallyCompletable: step.manual !== false
|
|
936
985
|
}));
|
|
937
986
|
}, [rawSteps, user]);
|
|
938
987
|
const stepsByKey = useMemo(() => {
|
|
@@ -961,6 +1010,9 @@ function useChecklist() {
|
|
|
961
1010
|
const raw = stepsByKey.get(step.key);
|
|
962
1011
|
if (raw) startChecklistStep(raw);
|
|
963
1012
|
},
|
|
1013
|
+
completeStep: (step) => {
|
|
1014
|
+
if (step.manuallyCompletable && !completedStepKeys.has(step.key)) completeChecklistStep(step.key);
|
|
1015
|
+
},
|
|
964
1016
|
completion: showingCompletion ? completion : void 0,
|
|
965
1017
|
dismissCompletion
|
|
966
1018
|
};
|
|
@@ -1117,14 +1169,74 @@ const CheckIcon = () => {
|
|
|
1117
1169
|
children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
|
|
1118
1170
|
});
|
|
1119
1171
|
};
|
|
1172
|
+
const ListIcon = () => {
|
|
1173
|
+
return /* @__PURE__ */ jsxs("svg", {
|
|
1174
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1175
|
+
width: "24",
|
|
1176
|
+
height: "24",
|
|
1177
|
+
viewBox: "0 0 24 24",
|
|
1178
|
+
fill: "none",
|
|
1179
|
+
stroke: "currentColor",
|
|
1180
|
+
strokeWidth: "2",
|
|
1181
|
+
strokeLinecap: "round",
|
|
1182
|
+
strokeLinejoin: "round",
|
|
1183
|
+
className: "lucide lucide-list-icon lucide-list",
|
|
1184
|
+
children: [
|
|
1185
|
+
/* @__PURE__ */ jsx("path", { d: "M3 12h.01" }),
|
|
1186
|
+
/* @__PURE__ */ jsx("path", { d: "M3 18h.01" }),
|
|
1187
|
+
/* @__PURE__ */ jsx("path", { d: "M3 6h.01" }),
|
|
1188
|
+
/* @__PURE__ */ jsx("path", { d: "M8 12h13" }),
|
|
1189
|
+
/* @__PURE__ */ jsx("path", { d: "M8 18h13" }),
|
|
1190
|
+
/* @__PURE__ */ jsx("path", { d: "M8 6h13" })
|
|
1191
|
+
]
|
|
1192
|
+
});
|
|
1193
|
+
};
|
|
1194
|
+
const XIcon = () => {
|
|
1195
|
+
return /* @__PURE__ */ jsxs("svg", {
|
|
1196
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1197
|
+
width: "24",
|
|
1198
|
+
height: "24",
|
|
1199
|
+
viewBox: "0 0 24 24",
|
|
1200
|
+
fill: "none",
|
|
1201
|
+
stroke: "currentColor",
|
|
1202
|
+
strokeWidth: "2",
|
|
1203
|
+
strokeLinecap: "round",
|
|
1204
|
+
strokeLinejoin: "round",
|
|
1205
|
+
className: "lucide lucide-x-icon lucide-x",
|
|
1206
|
+
children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
|
|
1207
|
+
});
|
|
1208
|
+
};
|
|
1209
|
+
const ChevronRightIcon = () => {
|
|
1210
|
+
return /* @__PURE__ */ jsx("svg", {
|
|
1211
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1212
|
+
width: "24",
|
|
1213
|
+
height: "24",
|
|
1214
|
+
viewBox: "0 0 24 24",
|
|
1215
|
+
fill: "none",
|
|
1216
|
+
stroke: "currentColor",
|
|
1217
|
+
strokeWidth: "2",
|
|
1218
|
+
strokeLinecap: "round",
|
|
1219
|
+
strokeLinejoin: "round",
|
|
1220
|
+
className: "lucide lucide-chevron-right-icon lucide-chevron-right",
|
|
1221
|
+
children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
|
|
1222
|
+
});
|
|
1223
|
+
};
|
|
1120
1224
|
|
|
1121
1225
|
//#endregion
|
|
1122
1226
|
//#region src/components/ChecklistStep.tsx
|
|
1123
|
-
function ChecklistStep({ completed, onStart, step }) {
|
|
1227
|
+
function ChecklistStep({ completed, onComplete, onStart, step }) {
|
|
1124
1228
|
const hasAction = step.actionLabel !== void 0;
|
|
1125
|
-
const
|
|
1229
|
+
const checkable = step.manuallyCompletable && !completed;
|
|
1230
|
+
const status = checkable ? /* @__PURE__ */ jsx("button", {
|
|
1126
1231
|
className: "sunboard-step-status",
|
|
1127
|
-
|
|
1232
|
+
type: "button",
|
|
1233
|
+
onClick: onComplete,
|
|
1234
|
+
"aria-label": `Mark ${step.title} complete`,
|
|
1235
|
+
children: /* @__PURE__ */ jsx(CheckIcon, {})
|
|
1236
|
+
}) : /* @__PURE__ */ jsx("span", {
|
|
1237
|
+
className: "sunboard-step-status",
|
|
1238
|
+
"data-locked": !completed && !step.manuallyCompletable ? "true" : void 0,
|
|
1239
|
+
"aria-label": completed ? "Completed" : step.manuallyCompletable ? "Incomplete" : "Completes automatically",
|
|
1128
1240
|
children: completed ? /* @__PURE__ */ jsx(CheckIcon, {}) : null
|
|
1129
1241
|
});
|
|
1130
1242
|
const content = /* @__PURE__ */ jsxs("div", {
|
|
@@ -1146,15 +1258,20 @@ function ChecklistStep({ completed, onStart, step }) {
|
|
|
1146
1258
|
return /* @__PURE__ */ jsx("li", {
|
|
1147
1259
|
className: "sunboard-step",
|
|
1148
1260
|
"data-completed": completed,
|
|
1149
|
-
children:
|
|
1150
|
-
className: "sunboard-step-row",
|
|
1151
|
-
type: "button",
|
|
1152
|
-
onClick: onStart,
|
|
1153
|
-
"aria-label": `${step.actionLabel} ${step.title}`,
|
|
1154
|
-
children: [status, content]
|
|
1155
|
-
}) : /* @__PURE__ */ jsxs("div", {
|
|
1261
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
1156
1262
|
className: "sunboard-step-row",
|
|
1157
|
-
|
|
1263
|
+
"data-interactive": hasAction || checkable ? "true" : void 0,
|
|
1264
|
+
children: [status, hasAction ? /* @__PURE__ */ jsxs("button", {
|
|
1265
|
+
className: "sunboard-step-main",
|
|
1266
|
+
type: "button",
|
|
1267
|
+
onClick: onStart,
|
|
1268
|
+
"aria-label": `${step.actionLabel} ${step.title}`,
|
|
1269
|
+
children: [content, /* @__PURE__ */ jsx("span", {
|
|
1270
|
+
className: "sunboard-step-arrow",
|
|
1271
|
+
"aria-hidden": "true",
|
|
1272
|
+
children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
|
|
1273
|
+
})]
|
|
1274
|
+
}) : content]
|
|
1158
1275
|
})
|
|
1159
1276
|
});
|
|
1160
1277
|
}
|
|
@@ -1556,7 +1673,7 @@ function SunboardTourScrim({ rect }) {
|
|
|
1556
1673
|
//#region src/components/Sunboard.tsx
|
|
1557
1674
|
function SunboardChecklist() {
|
|
1558
1675
|
const [open, setOpen] = useState(true);
|
|
1559
|
-
const { visible, title, subtitle, steps, completedCount, totalSteps, remainingCount, progress, isCompleted, startStep, completion, dismissCompletion } = useChecklist();
|
|
1676
|
+
const { visible, title, subtitle, steps, completedCount, totalSteps, remainingCount, progress, isCompleted, startStep, completeStep, completion, dismissCompletion } = useChecklist();
|
|
1560
1677
|
useEffect(() => {
|
|
1561
1678
|
if (!completion?.dismissAfterMs) return;
|
|
1562
1679
|
const handle = window.setTimeout(dismissCompletion, completion.dismissAfterMs);
|
|
@@ -1573,7 +1690,7 @@ function SunboardChecklist() {
|
|
|
1573
1690
|
type: "button",
|
|
1574
1691
|
onClick: dismissCompletion,
|
|
1575
1692
|
"aria-label": "Dismiss completion message",
|
|
1576
|
-
children:
|
|
1693
|
+
children: /* @__PURE__ */ jsx(XIcon, {})
|
|
1577
1694
|
}), /* @__PURE__ */ jsxs("div", {
|
|
1578
1695
|
className: "sunboard-completion",
|
|
1579
1696
|
children: [
|
|
@@ -1605,15 +1722,15 @@ function SunboardChecklist() {
|
|
|
1605
1722
|
]
|
|
1606
1723
|
})]
|
|
1607
1724
|
});
|
|
1608
|
-
if (!open) return /* @__PURE__ */
|
|
1725
|
+
if (!open) return /* @__PURE__ */ jsxs("button", {
|
|
1609
1726
|
className: "sunboard-launcher",
|
|
1610
1727
|
type: "button",
|
|
1611
1728
|
onClick: () => setOpen(true),
|
|
1612
1729
|
"aria-label": `Open ${title} checklist, ${remainingCount} tasks remaining`,
|
|
1613
|
-
children: /* @__PURE__ */ jsx("span", {
|
|
1614
|
-
className: "sunboard-launcher-
|
|
1730
|
+
children: [remainingCount > 0 ? /* @__PURE__ */ jsx("span", {
|
|
1731
|
+
className: "sunboard-launcher-badge",
|
|
1615
1732
|
children: remainingCount
|
|
1616
|
-
})
|
|
1733
|
+
}) : null, /* @__PURE__ */ jsx(ListIcon, {})]
|
|
1617
1734
|
});
|
|
1618
1735
|
return /* @__PURE__ */ jsxs("aside", {
|
|
1619
1736
|
className: "sunboard-root",
|
|
@@ -1642,7 +1759,7 @@ function SunboardChecklist() {
|
|
|
1642
1759
|
type: "button",
|
|
1643
1760
|
onClick: () => setOpen(false),
|
|
1644
1761
|
"aria-label": `Close ${title} checklist`,
|
|
1645
|
-
children:
|
|
1762
|
+
children: /* @__PURE__ */ jsx(XIcon, {})
|
|
1646
1763
|
})]
|
|
1647
1764
|
})]
|
|
1648
1765
|
}),
|
|
@@ -1662,6 +1779,7 @@ function SunboardChecklist() {
|
|
|
1662
1779
|
className: "sunboard-step-list",
|
|
1663
1780
|
children: steps.map((step) => /* @__PURE__ */ jsx(ChecklistStep, {
|
|
1664
1781
|
completed: isCompleted(step.key),
|
|
1782
|
+
onComplete: () => completeStep(step),
|
|
1665
1783
|
onStart: () => startStep(step),
|
|
1666
1784
|
step
|
|
1667
1785
|
}, step.key))
|