@knocklabs/react 0.11.12 → 0.11.13
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/CHANGELOG.md +15 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/modules/guide/components/Toolbar/V2/FocusChin.js +1 -1
- package/dist/cjs/modules/guide/components/Toolbar/V2/FocusChin.js.map +1 -1
- package/dist/cjs/modules/guide/components/Toolbar/V2/GuideAnnotatedStatusDot.js +1 -1
- package/dist/cjs/modules/guide/components/Toolbar/V2/GuideAnnotatedStatusDot.js.map +1 -1
- package/dist/cjs/modules/guide/components/Toolbar/V2/GuideContextDetails.js +1 -1
- package/dist/cjs/modules/guide/components/Toolbar/V2/GuideContextDetails.js.map +1 -1
- package/dist/cjs/modules/guide/components/Toolbar/V2/GuideRow.js +1 -1
- package/dist/cjs/modules/guide/components/Toolbar/V2/GuideRow.js.map +1 -1
- package/dist/cjs/modules/guide/components/Toolbar/V2/GuideRowDetails.js +1 -1
- package/dist/cjs/modules/guide/components/Toolbar/V2/GuideRowDetails.js.map +1 -1
- package/dist/cjs/modules/guide/components/Toolbar/V2/V2.js +1 -1
- package/dist/cjs/modules/guide/components/Toolbar/V2/V2.js.map +1 -1
- package/dist/cjs/modules/guide/components/Toolbar/V2/helpers.js +1 -1
- package/dist/cjs/modules/guide/components/Toolbar/V2/helpers.js.map +1 -1
- package/dist/cjs/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.js.map +1 -1
- package/dist/cjs/modules/guide/providers/KnockGuideProvider.js +1 -1
- package/dist/cjs/modules/guide/providers/KnockGuideProvider.js.map +1 -1
- package/dist/esm/index.mjs +1 -1
- package/dist/esm/modules/guide/components/Toolbar/V2/FocusChin.mjs +32 -31
- package/dist/esm/modules/guide/components/Toolbar/V2/FocusChin.mjs.map +1 -1
- package/dist/esm/modules/guide/components/Toolbar/V2/GuideAnnotatedStatusDot.mjs +6 -5
- package/dist/esm/modules/guide/components/Toolbar/V2/GuideAnnotatedStatusDot.mjs.map +1 -1
- package/dist/esm/modules/guide/components/Toolbar/V2/GuideContextDetails.mjs +14 -13
- package/dist/esm/modules/guide/components/Toolbar/V2/GuideContextDetails.mjs.map +1 -1
- package/dist/esm/modules/guide/components/Toolbar/V2/GuideRow.mjs +37 -37
- package/dist/esm/modules/guide/components/Toolbar/V2/GuideRow.mjs.map +1 -1
- package/dist/esm/modules/guide/components/Toolbar/V2/GuideRowDetails.mjs +39 -29
- package/dist/esm/modules/guide/components/Toolbar/V2/GuideRowDetails.mjs.map +1 -1
- package/dist/esm/modules/guide/components/Toolbar/V2/V2.mjs +83 -77
- package/dist/esm/modules/guide/components/Toolbar/V2/V2.mjs.map +1 -1
- package/dist/esm/modules/guide/components/Toolbar/V2/helpers.mjs +5 -48
- package/dist/esm/modules/guide/components/Toolbar/V2/helpers.mjs.map +1 -1
- package/dist/esm/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.mjs.map +1 -1
- package/dist/esm/modules/guide/providers/KnockGuideProvider.mjs +12 -10
- package/dist/esm/modules/guide/providers/KnockGuideProvider.mjs.map +1 -1
- package/dist/types/modules/guide/components/Toolbar/V2/FocusChin.d.ts.map +1 -1
- package/dist/types/modules/guide/components/Toolbar/V2/GuideAnnotatedStatusDot.d.ts.map +1 -1
- package/dist/types/modules/guide/components/Toolbar/V2/GuideContextDetails.d.ts.map +1 -1
- package/dist/types/modules/guide/components/Toolbar/V2/GuideRow.d.ts.map +1 -1
- package/dist/types/modules/guide/components/Toolbar/V2/GuideRowDetails.d.ts.map +1 -1
- package/dist/types/modules/guide/components/Toolbar/V2/V2.d.ts +5 -1
- package/dist/types/modules/guide/components/Toolbar/V2/V2.d.ts.map +1 -1
- package/dist/types/modules/guide/components/Toolbar/V2/helpers.d.ts +3 -7
- package/dist/types/modules/guide/components/Toolbar/V2/helpers.d.ts.map +1 -1
- package/dist/types/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.d.ts +1 -2
- package/dist/types/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.d.ts.map +1 -1
- package/dist/types/modules/guide/providers/KnockGuideProvider.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -1,154 +1,160 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import { KnockGuideClient as A } from "@knocklabs/client";
|
|
2
|
+
import { useGuideContext as L } from "@knocklabs/react-core";
|
|
3
|
+
import { Button as E } from "@telegraph/button";
|
|
4
|
+
import { Icon as T } from "@telegraph/icon";
|
|
4
5
|
import { Box as u, Stack as r } from "@telegraph/layout";
|
|
5
|
-
import { SegmentedControl as
|
|
6
|
-
import { Tooltip as
|
|
7
|
-
import { Text as
|
|
8
|
-
import { GripVertical as
|
|
6
|
+
import { SegmentedControl as p } from "@telegraph/segmented-control";
|
|
7
|
+
import { Tooltip as h } from "@telegraph/tooltip";
|
|
8
|
+
import { Text as w } from "@telegraph/typography";
|
|
9
|
+
import { GripVertical as B, ChevronDown as H, ChevronRight as V, SlidersHorizontal as j, LogOut as F, Minimize2 as M } from "lucide-react";
|
|
9
10
|
import e from "react";
|
|
10
|
-
import { KnockButton as
|
|
11
|
-
import { TOOLBAR_Z_INDEX as
|
|
11
|
+
import { KnockButton as W } from "../KnockButton.mjs";
|
|
12
|
+
import { TOOLBAR_Z_INDEX as Y } from "../shared.mjs";
|
|
12
13
|
/* empty css */
|
|
13
|
-
import { FocusChin as
|
|
14
|
+
import { FocusChin as X } from "./FocusChin.mjs";
|
|
14
15
|
import { GuideContextDetails as N } from "./GuideContextDetails.mjs";
|
|
15
|
-
import { GuideRow as
|
|
16
|
-
import {
|
|
17
|
-
import { useDraggable as
|
|
18
|
-
import { useInspectGuideClientStore as
|
|
19
|
-
const
|
|
20
|
-
children:
|
|
16
|
+
import { GuideRow as U } from "./GuideRow.mjs";
|
|
17
|
+
import { sharedTooltipProps as k } from "./helpers.mjs";
|
|
18
|
+
import { useDraggable as Z } from "./useDraggable.mjs";
|
|
19
|
+
import { useInspectGuideClientStore as q } from "./useInspectGuideClientStore.mjs";
|
|
20
|
+
const J = ".", Q = "540px", $ = ["0 0 0 1px rgba(0, 0, 0, 0.06)", "0 0 0 1px rgba(255, 255, 255, 0.10)", "inset 0 1px 0 rgba(255, 255, 255, 0.04)", "0 1px 1px 0 rgba(0, 0, 0, 0.04)", "0 4px 6px -1px rgba(0, 0, 0, 0.05)", "0 8px 16px -4px rgba(0, 0, 0, 0.06)"].join(", "), G = ({
|
|
21
|
+
children: i
|
|
21
22
|
}) => /* @__PURE__ */ e.createElement("kbd", { style: {
|
|
22
23
|
display: "inline-block",
|
|
23
24
|
padding: "1px 4px",
|
|
24
25
|
borderRadius: "var(--tgph-rounded-2)",
|
|
25
26
|
border: "1px solid rgba(255, 255, 255, 0.3)",
|
|
26
27
|
backgroundColor: "rgba(255, 255, 255, 0.15)"
|
|
27
|
-
} },
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
28
|
+
} }, i), ee = (i) => {
|
|
29
|
+
switch (i) {
|
|
30
|
+
case "all-guides":
|
|
31
|
+
return "You have no guides. Get started by creating a guide.";
|
|
32
|
+
case "only-active":
|
|
33
|
+
return "There are no active guides.";
|
|
34
|
+
case "only-eligible":
|
|
35
|
+
return "Your current user is not eligible for any guides.";
|
|
36
|
+
}
|
|
37
|
+
}, S = (i, o) => i.filter((l) => !(o === "only-eligible" && !l.annotation.isEligible || o === "only-active" && !l.annotation.active.status)), he = ({
|
|
38
|
+
readyToTarget: i
|
|
39
|
+
}) => {
|
|
34
40
|
const {
|
|
35
41
|
client: o
|
|
36
|
-
} =
|
|
42
|
+
} = L(), [l, m] = e.useState("only-active"), [s, _] = e.useState(() => A.getToolbarRunConfigFromUrl()), [v, g] = e.useState(!1), [d, z] = e.useState(!1), [I, D] = e.useState();
|
|
37
43
|
e.useEffect(() => {
|
|
38
44
|
D(void 0);
|
|
39
|
-
}, [
|
|
40
|
-
var
|
|
45
|
+
}, [l]), e.useEffect(() => {
|
|
46
|
+
var y;
|
|
41
47
|
const {
|
|
42
48
|
isVisible: t = !1,
|
|
43
49
|
focusedGuideKeys: n = {}
|
|
44
|
-
} =
|
|
45
|
-
return t && !c && (o.setDebug({
|
|
50
|
+
} = s || {}, c = (y = o.store.state.debug) == null ? void 0 : y.debugging;
|
|
51
|
+
return t && !c && i && (o.setDebug({
|
|
46
52
|
focusedGuideKeys: n
|
|
47
|
-
}), Object.keys(n).length > 0 &&
|
|
53
|
+
}), Object.keys(n).length > 0 && m("all-guides")), () => {
|
|
48
54
|
o.unsetDebug();
|
|
49
55
|
};
|
|
50
|
-
}, [i, o,
|
|
56
|
+
}, [i, s, o, m]), e.useEffect(() => {
|
|
51
57
|
const t = (n) => {
|
|
52
|
-
n.ctrlKey && n.key ===
|
|
58
|
+
n.ctrlKey && n.key === J && !n.repeat && (n.preventDefault(), g((c) => !c));
|
|
53
59
|
};
|
|
54
60
|
return window.addEventListener("keydown", t), () => {
|
|
55
61
|
window.removeEventListener("keydown", t);
|
|
56
62
|
};
|
|
57
63
|
}, []);
|
|
58
|
-
const
|
|
64
|
+
const C = e.useRef(null), O = e.useRef(null), {
|
|
59
65
|
position: R,
|
|
60
|
-
isDragging:
|
|
61
|
-
handlePointerDown:
|
|
62
|
-
hasDraggedRef:
|
|
63
|
-
} =
|
|
64
|
-
elementRef:
|
|
65
|
-
reclampDeps: [
|
|
66
|
+
isDragging: f,
|
|
67
|
+
handlePointerDown: b,
|
|
68
|
+
hasDraggedRef: P
|
|
69
|
+
} = Z({
|
|
70
|
+
elementRef: C,
|
|
71
|
+
reclampDeps: [v],
|
|
66
72
|
initialPosition: {
|
|
67
73
|
top: 16,
|
|
68
74
|
right: 16
|
|
69
75
|
}
|
|
70
|
-
}),
|
|
71
|
-
if (!
|
|
76
|
+
}), a = q(s);
|
|
77
|
+
if (!a || !(s != null && s.isVisible))
|
|
72
78
|
return null;
|
|
73
|
-
const
|
|
74
|
-
return /* @__PURE__ */ e.createElement(u, { tgphRef:
|
|
79
|
+
const x = a.status === "ok" ? S(a.guides, l) : [];
|
|
80
|
+
return /* @__PURE__ */ e.createElement(u, { tgphRef: C, position: "fixed", style: {
|
|
75
81
|
top: R.top + "px",
|
|
76
82
|
right: R.right + "px",
|
|
77
|
-
zIndex:
|
|
78
|
-
} },
|
|
79
|
-
cursor:
|
|
83
|
+
zIndex: Y
|
|
84
|
+
} }, v ? /* @__PURE__ */ e.createElement(h, { side: "left", label: /* @__PURE__ */ e.createElement(w, { as: "span", size: "1" }, "Guide Toolbar", /* @__PURE__ */ e.createElement(r, { display: "inline-block", ml: "3" }, /* @__PURE__ */ e.createElement(G, null, "ctrl"), " + ", /* @__PURE__ */ e.createElement(G, null, "."))), ...k }, /* @__PURE__ */ e.createElement(r, { border: "px", rounded: "4", align: "center", justify: "center", w: "10", h: "10", onPointerDown: b, backgroundColor: "surface-1", style: {
|
|
85
|
+
cursor: f ? "grabbing" : "grab",
|
|
80
86
|
touchAction: "none",
|
|
81
87
|
userSelect: "none",
|
|
82
88
|
animation: "toolbar-collapse-fade-in 150ms ease-out"
|
|
83
89
|
} }, /* @__PURE__ */ e.createElement(u, { style: {
|
|
84
90
|
transform: "scale(0.7)",
|
|
85
91
|
transformOrigin: "center center"
|
|
86
|
-
} }, /* @__PURE__ */ e.createElement(
|
|
87
|
-
|
|
88
|
-
}, positioned: !1 })))) : /* @__PURE__ */ e.createElement(r, { direction: "column", backgroundColor: "surface-1", rounded: "4",
|
|
89
|
-
width:
|
|
90
|
-
boxShadow:
|
|
92
|
+
} }, /* @__PURE__ */ e.createElement(W, { onClick: () => {
|
|
93
|
+
P.current || g(!1);
|
|
94
|
+
}, positioned: !1 })))) : /* @__PURE__ */ e.createElement(r, { direction: "column", backgroundColor: "surface-1", rounded: "4", overflow: "hidden", style: {
|
|
95
|
+
width: Q,
|
|
96
|
+
boxShadow: $,
|
|
91
97
|
animation: "toolbar-expand-fade-in 150ms ease-out"
|
|
92
|
-
} }, /* @__PURE__ */ e.createElement(r, { w: "full", p: "2", justify: "space-between", direction: "row", align: "center", gap: "2", borderBottom: "px", onPointerDown:
|
|
98
|
+
} }, /* @__PURE__ */ e.createElement(r, { w: "full", p: "2", justify: "space-between", direction: "row", align: "center", gap: "2", borderBottom: "px", onPointerDown: b, style: {
|
|
93
99
|
boxSizing: "border-box",
|
|
94
|
-
cursor:
|
|
100
|
+
cursor: f ? "grabbing" : "grab",
|
|
95
101
|
touchAction: "none",
|
|
96
102
|
userSelect: "none"
|
|
97
103
|
} }, /* @__PURE__ */ e.createElement(r, { align: "center", gap: "1_5", style: {
|
|
98
104
|
minWidth: 0,
|
|
99
105
|
flex: 1
|
|
100
106
|
} }, /* @__PURE__ */ e.createElement(r, { display: "inline-flex", align: "center", style: {
|
|
101
|
-
cursor:
|
|
107
|
+
cursor: f ? "grabbing" : "grab",
|
|
102
108
|
touchAction: "none",
|
|
103
109
|
userSelect: "none"
|
|
104
110
|
}, onPointerDown: (t) => {
|
|
105
|
-
t.stopPropagation(),
|
|
106
|
-
} }, /* @__PURE__ */ e.createElement(
|
|
111
|
+
t.stopPropagation(), b(t);
|
|
112
|
+
} }, /* @__PURE__ */ e.createElement(T, { color: "gray", size: "1", icon: B, "aria-hidden": !0 })), /* @__PURE__ */ e.createElement(r, { align: "center", gap: "1_5", onPointerDown: (t) => t.stopPropagation() }, /* @__PURE__ */ e.createElement(p.Root, { size: "1", type: "single", value: l, onValueChange: (t) => {
|
|
107
113
|
if (!t) return;
|
|
108
114
|
const n = o.store.state.debug, c = Object.keys((n == null ? void 0 : n.focusedGuideKeys) || {});
|
|
109
|
-
|
|
115
|
+
a.status === "ok" && c.length > 0 && (S(a.guides, t).find((K) => K.key === c[0]) || o.setDebug({
|
|
110
116
|
...n,
|
|
111
117
|
focusedGuideKeys: {}
|
|
112
|
-
})),
|
|
113
|
-
} }, /* @__PURE__ */ e.createElement(
|
|
118
|
+
})), m(t);
|
|
119
|
+
} }, /* @__PURE__ */ e.createElement(p.Option, { value: "all-guides", style: {
|
|
114
120
|
width: "54px"
|
|
115
|
-
} }, "All"), /* @__PURE__ */ e.createElement(
|
|
121
|
+
} }, "All"), /* @__PURE__ */ e.createElement(p.Option, { value: "only-active", style: {
|
|
116
122
|
width: "54px"
|
|
117
|
-
} }, "Active"), /* @__PURE__ */ e.createElement(
|
|
123
|
+
} }, "Active"), /* @__PURE__ */ e.createElement(p.Option, { value: "only-eligible", style: {
|
|
118
124
|
width: "54px"
|
|
119
|
-
} }, "Eligible")), /* @__PURE__ */ e.createElement(
|
|
120
|
-
icon:
|
|
125
|
+
} }, "Eligible")), /* @__PURE__ */ e.createElement(h, { label: "Settings", ...k }, /* @__PURE__ */ e.createElement(E, { size: "1", variant: d ? "outline" : "ghost", color: d ? "blue" : "gray", leadingIcon: {
|
|
126
|
+
icon: j,
|
|
121
127
|
alt: "Inspect target params"
|
|
122
128
|
}, trailingIcon: d ? {
|
|
123
|
-
icon:
|
|
129
|
+
icon: H,
|
|
124
130
|
alt: "Hide context data"
|
|
125
131
|
} : {
|
|
126
|
-
icon:
|
|
132
|
+
icon: V,
|
|
127
133
|
alt: "Show context data"
|
|
128
|
-
}, onClick: () =>
|
|
134
|
+
}, onClick: () => z((t) => !t) })))), /* @__PURE__ */ e.createElement(r, { align: "center", gap: "1_5", style: {
|
|
129
135
|
flexShrink: 0
|
|
130
|
-
}, onPointerDown: (t) => t.stopPropagation() }, /* @__PURE__ */ e.createElement(r, { align: "center", gap: "1_5" }, /* @__PURE__ */ e.createElement(
|
|
131
|
-
icon:
|
|
136
|
+
}, onPointerDown: (t) => t.stopPropagation() }, /* @__PURE__ */ e.createElement(r, { align: "center", gap: "1_5" }, /* @__PURE__ */ e.createElement(E, { size: "1", variant: "outline", leadingIcon: {
|
|
137
|
+
icon: F,
|
|
132
138
|
alt: "Exit"
|
|
133
139
|
}, onClick: () => {
|
|
134
|
-
|
|
140
|
+
_((t) => ({
|
|
135
141
|
...t,
|
|
136
142
|
isVisible: !1
|
|
137
|
-
})),
|
|
138
|
-
} }, "Exit"), /* @__PURE__ */ e.createElement(
|
|
139
|
-
icon:
|
|
143
|
+
})), o.unsetDebug();
|
|
144
|
+
} }, "Exit"), /* @__PURE__ */ e.createElement(h, { label: "Minimize toolbar", ...k }, /* @__PURE__ */ e.createElement(E, { size: "1", variant: "outline", leadingIcon: {
|
|
145
|
+
icon: M,
|
|
140
146
|
alt: "Minimize"
|
|
141
|
-
}, onClick: () =>
|
|
147
|
+
}, onClick: () => g(!0) }))))), d && /* @__PURE__ */ e.createElement(u, { borderBottom: "px" }, /* @__PURE__ */ e.createElement(N, null)), /* @__PURE__ */ e.createElement(u, { tgphRef: O, p: "1", overflow: "auto", style: {
|
|
142
148
|
maxHeight: "calc(80vh - 96px)"
|
|
143
|
-
} },
|
|
149
|
+
} }, a.status === "error" ? /* @__PURE__ */ e.createElement(u, { px: "2", pb: "1", style: {
|
|
144
150
|
lineHeight: "1.2"
|
|
145
|
-
} }, /* @__PURE__ */ e.createElement(
|
|
151
|
+
} }, /* @__PURE__ */ e.createElement(w, { as: "span", size: "1", weight: "medium", color: a.error === "no_guides_fetched" ? "default" : "red" }, a.message)) : x.length === 0 ? /* @__PURE__ */ e.createElement(u, { px: "2", pb: "1", style: {
|
|
146
152
|
lineHeight: "1.2"
|
|
147
|
-
} }, /* @__PURE__ */ e.createElement(
|
|
153
|
+
} }, /* @__PURE__ */ e.createElement(w, { as: "span", size: "1", weight: "medium", color: "default" }, ee(l))) : x.map((t) => /* @__PURE__ */ e.createElement(U, { key: t.key, guide: t, orderIndex: t.orderIndex, isExpanded: t.key === I, onClick: () => {
|
|
148
154
|
D((n) => n && n === t.key ? void 0 : t.key);
|
|
149
|
-
} }))), /* @__PURE__ */ e.createElement(
|
|
155
|
+
} }))), /* @__PURE__ */ e.createElement(X, { guides: x, guideListRef: O })));
|
|
150
156
|
};
|
|
151
157
|
export {
|
|
152
|
-
|
|
158
|
+
he as V2
|
|
153
159
|
};
|
|
154
160
|
//# sourceMappingURL=V2.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"V2.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/V2.tsx"],"sourcesContent":["import { useGuideContext } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Icon } from \"@telegraph/icon\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { SegmentedControl } from \"@telegraph/segmented-control\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport {\n ChevronDown,\n ChevronRight,\n GripVertical,\n LogOut,\n Minimize2,\n SlidersHorizontal,\n} from \"lucide-react\";\nimport React from \"react\";\n\nimport { KnockButton } from \"../KnockButton\";\nimport { TOOLBAR_Z_INDEX } from \"../shared\";\nimport \"../styles.css\";\n\nimport { FocusChin } from \"./FocusChin\";\nimport { GuideContextDetails } from \"./GuideContextDetails\";\nimport { GuideRow } from \"./GuideRow\";\nimport { DisplayOption, clearRunConfigLS, getRunConfig } from \"./helpers\";\nimport { useDraggable } from \"./useDraggable\";\nimport {\n InspectionResultOk,\n useInspectGuideClientStore,\n} from \"./useInspectGuideClientStore\";\n\nconst TOGGLE_COLLAPSED_HOTKEY = \".\";\n\nconst TOOLBAR_WIDTH = \"540px\";\n\nconst Kbd = ({ children }: { children: React.ReactNode }) => {\n return (\n <kbd\n style={{\n display: \"inline-block\",\n padding: \"1px 4px\",\n borderRadius: \"var(--tgph-rounded-2)\",\n border: \"1px solid rgba(255, 255, 255, 0.3)\",\n backgroundColor: \"rgba(255, 255, 255, 0.15)\",\n }}\n >\n {children}\n </kbd>\n );\n};\n\nconst filterGuides = (\n guides: InspectionResultOk[\"guides\"],\n displayOption: DisplayOption,\n) => {\n return guides.filter((guide) => {\n const { isEligible, isQualified } = guide.annotation;\n const isDisplayable = isEligible && isQualified;\n\n if (displayOption === \"only-displayable\" && !isDisplayable) {\n return false;\n }\n if (displayOption === \"only-eligible\" && !isEligible) {\n return false;\n }\n if (displayOption === \"only-active\" && !guide.annotation.active.status) {\n return false;\n }\n return true;\n });\n};\n\nexport const V2 = () => {\n const { client } = useGuideContext();\n\n const [displayOption, setDisplayOption] =\n React.useState<DisplayOption>(\"only-active\");\n const [runConfig, setRunConfig] = React.useState(() => getRunConfig());\n const [isCollapsed, setIsCollapsed] = React.useState(false);\n const [isContextPanelOpen, setIsContextPanelOpen] = React.useState(false);\n\n const [expandedGuideRowKey, setExpandedGuideRowKey] = React.useState<\n string | undefined\n >();\n\n React.useEffect(() => {\n setExpandedGuideRowKey(undefined);\n }, [displayOption]);\n\n React.useEffect(() => {\n const { isVisible = false, focusedGuideKeys = {} } = runConfig || {};\n const isDebugging = client.store.state.debug?.debugging;\n if (isVisible && !isDebugging) {\n client.setDebug({ focusedGuideKeys });\n\n // If focused, switch to all guides so you can see in the list.\n if (Object.keys(focusedGuideKeys).length > 0) {\n setDisplayOption(\"all-guides\");\n }\n }\n\n return () => {\n client.unsetDebug();\n };\n }, [runConfig, client, setDisplayOption]);\n\n // Toggle collapsed state with Ctrl + .\n React.useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.ctrlKey && e.key === TOGGLE_COLLAPSED_HOTKEY && !e.repeat) {\n e.preventDefault();\n setIsCollapsed((prev) => !prev);\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => {\n window.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, []);\n\n const containerRef = React.useRef<HTMLDivElement>(null);\n const guideListRef = React.useRef<HTMLDivElement>(null);\n const { position, isDragging, handlePointerDown, hasDraggedRef } =\n useDraggable({\n elementRef: containerRef,\n reclampDeps: [isCollapsed],\n initialPosition: { top: 16, right: 16 },\n });\n\n const result = useInspectGuideClientStore(runConfig);\n if (!result || !runConfig?.isVisible) {\n return null;\n }\n\n const guides =\n result.status === \"ok\" ? filterGuides(result.guides, displayOption) : [];\n\n return (\n <Box\n tgphRef={containerRef}\n position=\"fixed\"\n style={{\n top: position.top + \"px\",\n right: position.right + \"px\",\n zIndex: TOOLBAR_Z_INDEX,\n }}\n >\n {isCollapsed ? (\n <Tooltip\n side=\"left\"\n delayDuration={500}\n label={\n <Text as=\"span\" size=\"1\">\n Guide Toolbar\n <Stack display=\"inline-block\" ml=\"3\">\n <Kbd>ctrl</Kbd> + <Kbd>.</Kbd>\n </Stack>\n </Text>\n }\n >\n <Stack\n border=\"px\"\n rounded=\"4\"\n align=\"center\"\n justify=\"center\"\n w=\"10\"\n h=\"10\"\n onPointerDown={handlePointerDown}\n backgroundColor=\"surface-1\"\n style={{\n cursor: isDragging ? \"grabbing\" : \"grab\",\n touchAction: \"none\",\n userSelect: \"none\",\n animation: \"toolbar-collapse-fade-in 150ms ease-out\",\n }}\n >\n <Box\n style={{\n transform: \"scale(0.7)\",\n transformOrigin: \"center center\",\n }}\n >\n <KnockButton\n onClick={() => {\n if (!hasDraggedRef.current) {\n setIsCollapsed(false);\n }\n }}\n positioned={false}\n />\n </Box>\n </Stack>\n </Tooltip>\n ) : (\n <Stack\n direction=\"column\"\n backgroundColor=\"surface-1\"\n rounded=\"4\"\n border=\"px\"\n overflow=\"hidden\"\n style={{\n width: TOOLBAR_WIDTH,\n boxShadow: \"0 8px 32px var(--tgph-gray-5)\",\n animation: \"toolbar-expand-fade-in 150ms ease-out\",\n }}\n >\n {/* Header — also acts as drag handle area */}\n <Stack\n w=\"full\"\n p=\"2\"\n justify=\"space-between\"\n direction=\"row\"\n align=\"center\"\n gap=\"2\"\n borderBottom=\"px\"\n onPointerDown={handlePointerDown}\n style={{\n boxSizing: \"border-box\",\n cursor: isDragging ? \"grabbing\" : \"grab\",\n touchAction: \"none\",\n userSelect: \"none\",\n }}\n >\n {/* Left: drag icon + segmented control + settings */}\n <Stack align=\"center\" gap=\"1_5\" style={{ minWidth: 0, flex: 1 }}>\n <Stack\n display=\"inline-flex\"\n align=\"center\"\n style={{\n cursor: isDragging ? \"grabbing\" : \"grab\",\n touchAction: \"none\",\n userSelect: \"none\",\n }}\n onPointerDown={(e: React.PointerEvent) => {\n // Already handled by parent, prevent double-fire\n e.stopPropagation();\n handlePointerDown(e);\n }}\n >\n <Icon color=\"gray\" size=\"1\" icon={GripVertical} aria-hidden />\n </Stack>\n <Stack\n align=\"center\"\n gap=\"1_5\"\n onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}\n >\n <SegmentedControl.Root\n size=\"1\"\n type=\"single\"\n value={displayOption}\n onValueChange={(val: DisplayOption) => {\n if (!val) return;\n\n const debugSettings = client.store.state.debug;\n\n const focusedGuideKeys = Object.keys(\n debugSettings?.focusedGuideKeys || {},\n );\n\n // Exit out of focus if the currently focused guide is not\n // part of the selected list filter.\n if (result.status === \"ok\" && focusedGuideKeys.length > 0) {\n const currFocusedGuide = filterGuides(\n result.guides,\n val,\n ).find((g) => g.key === focusedGuideKeys[0]);\n\n if (!currFocusedGuide) {\n client.setDebug({\n ...debugSettings,\n focusedGuideKeys: {},\n });\n }\n }\n\n setDisplayOption(val);\n }}\n >\n <SegmentedControl.Option\n value=\"all-guides\"\n style={{ width: \"54px\" }}\n >\n All\n </SegmentedControl.Option>\n <SegmentedControl.Option\n value=\"only-active\"\n style={{ width: \"54px\" }}\n >\n Active\n </SegmentedControl.Option>\n <SegmentedControl.Option\n value=\"only-eligible\"\n style={{ width: \"54px\" }}\n >\n Eligible\n </SegmentedControl.Option>\n {/* Note: `only-displayable` is not available for now */}\n </SegmentedControl.Root>\n\n <Tooltip label=\"Settings & target params\">\n <Button\n size=\"1\"\n variant={isContextPanelOpen ? \"outline\" : \"ghost\"}\n color={isContextPanelOpen ? \"blue\" : \"gray\"}\n leadingIcon={{\n icon: SlidersHorizontal,\n alt: \"Inspect target params\",\n }}\n trailingIcon={\n isContextPanelOpen\n ? { icon: ChevronDown, alt: \"Hide context data\" }\n : { icon: ChevronRight, alt: \"Show context data\" }\n }\n onClick={() => setIsContextPanelOpen((v) => !v)}\n />\n </Tooltip>\n </Stack>\n </Stack>\n\n {/* Right: exit + minimize buttons */}\n <Stack\n align=\"center\"\n gap=\"1_5\"\n style={{ flexShrink: 0 }}\n onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}\n >\n <Stack align=\"center\" gap=\"1_5\">\n <Button\n size=\"1\"\n variant=\"outline\"\n leadingIcon={{ icon: LogOut, alt: \"Exit\" }}\n onClick={() => {\n setRunConfig((curr) => ({ ...curr, isVisible: false }));\n clearRunConfigLS();\n client.unsetDebug();\n }}\n >\n Exit\n </Button>\n <Tooltip label=\"Minimize toolbar\">\n <Button\n size=\"1\"\n variant=\"outline\"\n leadingIcon={{ icon: Minimize2, alt: \"Minimize\" }}\n onClick={() => setIsCollapsed(true)}\n />\n </Tooltip>\n </Stack>\n </Stack>\n </Stack>\n\n {/* Collapsible panel to show context data */}\n {isContextPanelOpen && (\n <Box borderBottom=\"px\">\n <GuideContextDetails />\n </Box>\n )}\n\n {/* Guide list content area */}\n <Box\n tgphRef={guideListRef}\n p=\"1\"\n overflow=\"auto\"\n style={{ maxHeight: \"calc(80vh - 96px)\" }}\n >\n {result.status === \"error\" ? (\n <Box px=\"2\" pb=\"1\" style={{ lineHeight: \"1.2\" }}>\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color={\n result.error === \"no_guides_fetched\" ? \"default\" : \"red\"\n }\n >\n {result.message}\n </Text>\n </Box>\n ) : guides.length === 0 ? (\n <Box px=\"2\" pb=\"1\" style={{ lineHeight: \"1.2\" }}>\n <Text as=\"span\" size=\"1\" weight=\"medium\" color=\"default\">\n No guides match the current filter.\n </Text>\n </Box>\n ) : (\n guides.map((guide) => (\n <GuideRow\n key={guide.key}\n guide={guide}\n orderIndex={guide.orderIndex}\n isExpanded={guide.key === expandedGuideRowKey}\n onClick={() => {\n setExpandedGuideRowKey((k) =>\n k && k === guide.key ? undefined : guide.key,\n );\n }}\n />\n ))\n )}\n </Box>\n\n {/* Focus chin with dedicated controls */}\n <FocusChin guides={guides} guideListRef={guideListRef} />\n </Stack>\n )}\n </Box>\n );\n};\n"],"names":["TOGGLE_COLLAPSED_HOTKEY","TOOLBAR_WIDTH","Kbd","children","React","display","padding","borderRadius","border","backgroundColor","filterGuides","guides","displayOption","filter","guide","isEligible","isQualified","annotation","active","status","V2","client","useGuideContext","setDisplayOption","useState","runConfig","setRunConfig","getRunConfig","isCollapsed","setIsCollapsed","isContextPanelOpen","setIsContextPanelOpen","expandedGuideRowKey","setExpandedGuideRowKey","useEffect","undefined","isVisible","focusedGuideKeys","isDebugging","store","state","debug","debugging","setDebug","Object","keys","length","unsetDebug","handleKeyDown","e","ctrlKey","key","repeat","preventDefault","prev","addEventListener","removeEventListener","containerRef","useRef","guideListRef","position","isDragging","handlePointerDown","hasDraggedRef","useDraggable","elementRef","reclampDeps","initialPosition","top","right","result","useInspectGuideClientStore","Box","zIndex","TOOLBAR_Z_INDEX","Tooltip","Text","Stack","cursor","touchAction","userSelect","animation","transform","transformOrigin","KnockButton","current","width","boxShadow","boxSizing","minWidth","flex","stopPropagation","Icon","GripVertical","SegmentedControl","val","debugSettings","find","g","Button","icon","SlidersHorizontal","alt","ChevronDown","ChevronRight","v","flexShrink","LogOut","curr","clearRunConfigLS","Minimize2","GuideContextDetails","maxHeight","lineHeight","error","message","map","GuideRow","orderIndex","k","FocusChin"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"V2.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/V2.tsx"],"sourcesContent":["import { KnockGuideClient } from \"@knocklabs/client\";\nimport { useGuideContext } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Icon } from \"@telegraph/icon\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { SegmentedControl } from \"@telegraph/segmented-control\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport {\n ChevronDown,\n ChevronRight,\n GripVertical,\n LogOut,\n Minimize2,\n SlidersHorizontal,\n} from \"lucide-react\";\nimport React from \"react\";\n\nimport { KnockButton } from \"../KnockButton\";\nimport { TOOLBAR_Z_INDEX } from \"../shared\";\nimport \"../styles.css\";\n\nimport { FocusChin } from \"./FocusChin\";\nimport { GuideContextDetails } from \"./GuideContextDetails\";\nimport { GuideRow } from \"./GuideRow\";\nimport { DisplayOption, sharedTooltipProps } from \"./helpers\";\nimport { useDraggable } from \"./useDraggable\";\nimport {\n InspectionResultOk,\n useInspectGuideClientStore,\n} from \"./useInspectGuideClientStore\";\n\nconst TOGGLE_COLLAPSED_HOTKEY = \".\";\n\nconst TOOLBAR_WIDTH = \"540px\";\n\nconst TOOLBAR_BOX_SHADOW = [\n \"0 0 0 1px rgba(0, 0, 0, 0.06)\",\n \"0 0 0 1px rgba(255, 255, 255, 0.10)\",\n \"inset 0 1px 0 rgba(255, 255, 255, 0.04)\",\n \"0 1px 1px 0 rgba(0, 0, 0, 0.04)\",\n \"0 4px 6px -1px rgba(0, 0, 0, 0.05)\",\n \"0 8px 16px -4px rgba(0, 0, 0, 0.06)\",\n].join(\", \");\n\nconst Kbd = ({ children }: { children: React.ReactNode }) => {\n return (\n <kbd\n style={{\n display: \"inline-block\",\n padding: \"1px 4px\",\n borderRadius: \"var(--tgph-rounded-2)\",\n border: \"1px solid rgba(255, 255, 255, 0.3)\",\n backgroundColor: \"rgba(255, 255, 255, 0.15)\",\n }}\n >\n {children}\n </kbd>\n );\n};\n\nconst getEmptyStateMessage = (displayOption: DisplayOption) => {\n switch (displayOption) {\n case \"all-guides\":\n return \"You have no guides. Get started by creating a guide.\";\n case \"only-active\":\n return \"There are no active guides.\";\n case \"only-eligible\":\n return \"Your current user is not eligible for any guides.\";\n }\n};\n\nconst filterGuides = (\n guides: InspectionResultOk[\"guides\"],\n displayOption: DisplayOption,\n) => {\n return guides.filter((guide) => {\n if (displayOption === \"only-eligible\" && !guide.annotation.isEligible) {\n return false;\n }\n if (displayOption === \"only-active\" && !guide.annotation.active.status) {\n return false;\n }\n return true;\n });\n};\n\ntype Props = {\n readyToTarget: boolean;\n};\n\nexport const V2 = ({ readyToTarget }: Props) => {\n const { client } = useGuideContext();\n\n const [displayOption, setDisplayOption] =\n React.useState<DisplayOption>(\"only-active\");\n const [runConfig, setRunConfig] = React.useState(() =>\n KnockGuideClient.getToolbarRunConfigFromUrl(),\n );\n const [isCollapsed, setIsCollapsed] = React.useState(false);\n const [isContextPanelOpen, setIsContextPanelOpen] = React.useState(false);\n\n const [expandedGuideRowKey, setExpandedGuideRowKey] = React.useState<\n string | undefined\n >();\n\n React.useEffect(() => {\n setExpandedGuideRowKey(undefined);\n }, [displayOption]);\n\n React.useEffect(() => {\n const { isVisible = false, focusedGuideKeys = {} } = runConfig || {};\n const isDebugging = client.store.state.debug?.debugging;\n if (isVisible && !isDebugging && readyToTarget) {\n client.setDebug({ focusedGuideKeys });\n\n // If focused, switch to all guides so you can see in the list.\n if (Object.keys(focusedGuideKeys).length > 0) {\n setDisplayOption(\"all-guides\");\n }\n }\n\n return () => {\n client.unsetDebug();\n };\n }, [readyToTarget, runConfig, client, setDisplayOption]);\n\n // Toggle collapsed state with Ctrl + .\n React.useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.ctrlKey && e.key === TOGGLE_COLLAPSED_HOTKEY && !e.repeat) {\n e.preventDefault();\n setIsCollapsed((prev) => !prev);\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => {\n window.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, []);\n\n const containerRef = React.useRef<HTMLDivElement>(null);\n const guideListRef = React.useRef<HTMLDivElement>(null);\n const { position, isDragging, handlePointerDown, hasDraggedRef } =\n useDraggable({\n elementRef: containerRef,\n reclampDeps: [isCollapsed],\n initialPosition: { top: 16, right: 16 },\n });\n\n const result = useInspectGuideClientStore(runConfig);\n if (!result || !runConfig?.isVisible) {\n return null;\n }\n\n const guides =\n result.status === \"ok\" ? filterGuides(result.guides, displayOption) : [];\n\n return (\n <Box\n tgphRef={containerRef}\n position=\"fixed\"\n style={{\n top: position.top + \"px\",\n right: position.right + \"px\",\n zIndex: TOOLBAR_Z_INDEX,\n }}\n >\n {isCollapsed ? (\n <Tooltip\n side=\"left\"\n label={\n <Text as=\"span\" size=\"1\">\n Guide Toolbar\n <Stack display=\"inline-block\" ml=\"3\">\n <Kbd>ctrl</Kbd> + <Kbd>.</Kbd>\n </Stack>\n </Text>\n }\n {...sharedTooltipProps}\n >\n <Stack\n border=\"px\"\n rounded=\"4\"\n align=\"center\"\n justify=\"center\"\n w=\"10\"\n h=\"10\"\n onPointerDown={handlePointerDown}\n backgroundColor=\"surface-1\"\n style={{\n cursor: isDragging ? \"grabbing\" : \"grab\",\n touchAction: \"none\",\n userSelect: \"none\",\n animation: \"toolbar-collapse-fade-in 150ms ease-out\",\n }}\n >\n <Box\n style={{\n transform: \"scale(0.7)\",\n transformOrigin: \"center center\",\n }}\n >\n <KnockButton\n onClick={() => {\n if (!hasDraggedRef.current) {\n setIsCollapsed(false);\n }\n }}\n positioned={false}\n />\n </Box>\n </Stack>\n </Tooltip>\n ) : (\n <Stack\n direction=\"column\"\n backgroundColor=\"surface-1\"\n rounded=\"4\"\n overflow=\"hidden\"\n style={{\n width: TOOLBAR_WIDTH,\n boxShadow: TOOLBAR_BOX_SHADOW,\n animation: \"toolbar-expand-fade-in 150ms ease-out\",\n }}\n >\n {/* Header — also acts as drag handle area */}\n <Stack\n w=\"full\"\n p=\"2\"\n justify=\"space-between\"\n direction=\"row\"\n align=\"center\"\n gap=\"2\"\n borderBottom=\"px\"\n onPointerDown={handlePointerDown}\n style={{\n boxSizing: \"border-box\",\n cursor: isDragging ? \"grabbing\" : \"grab\",\n touchAction: \"none\",\n userSelect: \"none\",\n }}\n >\n {/* Left: drag icon + segmented control + settings */}\n <Stack align=\"center\" gap=\"1_5\" style={{ minWidth: 0, flex: 1 }}>\n <Stack\n display=\"inline-flex\"\n align=\"center\"\n style={{\n cursor: isDragging ? \"grabbing\" : \"grab\",\n touchAction: \"none\",\n userSelect: \"none\",\n }}\n onPointerDown={(e: React.PointerEvent) => {\n // Already handled by parent, prevent double-fire\n e.stopPropagation();\n handlePointerDown(e);\n }}\n >\n <Icon color=\"gray\" size=\"1\" icon={GripVertical} aria-hidden />\n </Stack>\n <Stack\n align=\"center\"\n gap=\"1_5\"\n onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}\n >\n <SegmentedControl.Root\n size=\"1\"\n type=\"single\"\n value={displayOption}\n onValueChange={(val: DisplayOption) => {\n if (!val) return;\n\n const debugSettings = client.store.state.debug;\n\n const focusedGuideKeys = Object.keys(\n debugSettings?.focusedGuideKeys || {},\n );\n\n // Exit out of focus if the currently focused guide is not\n // part of the selected list filter.\n if (result.status === \"ok\" && focusedGuideKeys.length > 0) {\n const currFocusedGuide = filterGuides(\n result.guides,\n val,\n ).find((g) => g.key === focusedGuideKeys[0]);\n\n if (!currFocusedGuide) {\n client.setDebug({\n ...debugSettings,\n focusedGuideKeys: {},\n });\n }\n }\n\n setDisplayOption(val);\n }}\n >\n <SegmentedControl.Option\n value=\"all-guides\"\n style={{ width: \"54px\" }}\n >\n All\n </SegmentedControl.Option>\n <SegmentedControl.Option\n value=\"only-active\"\n style={{ width: \"54px\" }}\n >\n Active\n </SegmentedControl.Option>\n <SegmentedControl.Option\n value=\"only-eligible\"\n style={{ width: \"54px\" }}\n >\n Eligible\n </SegmentedControl.Option>\n </SegmentedControl.Root>\n\n <Tooltip label=\"Settings\" {...sharedTooltipProps}>\n <Button\n size=\"1\"\n variant={isContextPanelOpen ? \"outline\" : \"ghost\"}\n color={isContextPanelOpen ? \"blue\" : \"gray\"}\n leadingIcon={{\n icon: SlidersHorizontal,\n alt: \"Inspect target params\",\n }}\n trailingIcon={\n isContextPanelOpen\n ? { icon: ChevronDown, alt: \"Hide context data\" }\n : { icon: ChevronRight, alt: \"Show context data\" }\n }\n onClick={() => setIsContextPanelOpen((v) => !v)}\n />\n </Tooltip>\n </Stack>\n </Stack>\n\n {/* Right: exit + minimize buttons */}\n <Stack\n align=\"center\"\n gap=\"1_5\"\n style={{ flexShrink: 0 }}\n onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}\n >\n <Stack align=\"center\" gap=\"1_5\">\n <Button\n size=\"1\"\n variant=\"outline\"\n leadingIcon={{ icon: LogOut, alt: \"Exit\" }}\n onClick={() => {\n setRunConfig((curr) => ({ ...curr, isVisible: false }));\n client.unsetDebug();\n }}\n >\n Exit\n </Button>\n <Tooltip label=\"Minimize toolbar\" {...sharedTooltipProps}>\n <Button\n size=\"1\"\n variant=\"outline\"\n leadingIcon={{ icon: Minimize2, alt: \"Minimize\" }}\n onClick={() => setIsCollapsed(true)}\n />\n </Tooltip>\n </Stack>\n </Stack>\n </Stack>\n\n {/* Collapsible panel to show context data */}\n {isContextPanelOpen && (\n <Box borderBottom=\"px\">\n <GuideContextDetails />\n </Box>\n )}\n\n {/* Guide list content area */}\n <Box\n tgphRef={guideListRef}\n p=\"1\"\n overflow=\"auto\"\n style={{ maxHeight: \"calc(80vh - 96px)\" }}\n >\n {result.status === \"error\" ? (\n <Box px=\"2\" pb=\"1\" style={{ lineHeight: \"1.2\" }}>\n <Text\n as=\"span\"\n size=\"1\"\n weight=\"medium\"\n color={\n result.error === \"no_guides_fetched\" ? \"default\" : \"red\"\n }\n >\n {result.message}\n </Text>\n </Box>\n ) : guides.length === 0 ? (\n <Box px=\"2\" pb=\"1\" style={{ lineHeight: \"1.2\" }}>\n <Text as=\"span\" size=\"1\" weight=\"medium\" color=\"default\">\n {getEmptyStateMessage(displayOption)}\n </Text>\n </Box>\n ) : (\n guides.map((guide) => (\n <GuideRow\n key={guide.key}\n guide={guide}\n orderIndex={guide.orderIndex}\n isExpanded={guide.key === expandedGuideRowKey}\n onClick={() => {\n setExpandedGuideRowKey((k) =>\n k && k === guide.key ? undefined : guide.key,\n );\n }}\n />\n ))\n )}\n </Box>\n\n {/* Focus chin with dedicated controls */}\n <FocusChin guides={guides} guideListRef={guideListRef} />\n </Stack>\n )}\n </Box>\n );\n};\n"],"names":["TOGGLE_COLLAPSED_HOTKEY","TOOLBAR_WIDTH","TOOLBAR_BOX_SHADOW","join","Kbd","children","React","display","padding","borderRadius","border","backgroundColor","getEmptyStateMessage","displayOption","filterGuides","guides","filter","guide","annotation","isEligible","active","status","V2","readyToTarget","client","useGuideContext","setDisplayOption","useState","runConfig","setRunConfig","KnockGuideClient","getToolbarRunConfigFromUrl","isCollapsed","setIsCollapsed","isContextPanelOpen","setIsContextPanelOpen","expandedGuideRowKey","setExpandedGuideRowKey","useEffect","undefined","isVisible","focusedGuideKeys","isDebugging","store","state","debug","debugging","setDebug","Object","keys","length","unsetDebug","handleKeyDown","e","ctrlKey","key","repeat","preventDefault","prev","addEventListener","removeEventListener","containerRef","useRef","guideListRef","position","isDragging","handlePointerDown","hasDraggedRef","useDraggable","elementRef","reclampDeps","initialPosition","top","right","result","useInspectGuideClientStore","Box","zIndex","TOOLBAR_Z_INDEX","Tooltip","Text","Stack","sharedTooltipProps","cursor","touchAction","userSelect","animation","transform","transformOrigin","KnockButton","current","width","boxShadow","boxSizing","minWidth","flex","stopPropagation","Icon","GripVertical","SegmentedControl","val","debugSettings","find","g","Button","icon","SlidersHorizontal","alt","ChevronDown","ChevronRight","v","flexShrink","LogOut","curr","Minimize2","GuideContextDetails","maxHeight","lineHeight","error","message","map","GuideRow","orderIndex","k","FocusChin"],"mappings":"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"}
|
|
@@ -1,55 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import "lodash.debounce";
|
|
5
|
-
import { checkForWindow as e } from "../../../../core/utils.mjs";
|
|
6
|
-
const a = "knock_guide_toolbar", u = "focused_guide_key", c = "knock_guide_debug", _ = () => {
|
|
7
|
-
const t = {
|
|
8
|
-
isVisible: !1
|
|
9
|
-
}, o = e();
|
|
10
|
-
if (!o || !o.location)
|
|
11
|
-
return t;
|
|
12
|
-
const i = new URLSearchParams(o.location.search), r = i.get(a), s = i.get(u);
|
|
13
|
-
if (r !== null) {
|
|
14
|
-
const n = {
|
|
15
|
-
isVisible: r === "true"
|
|
16
|
-
};
|
|
17
|
-
return s && (n.focusedGuideKeys = {
|
|
18
|
-
[s]: !0
|
|
19
|
-
}), l(n), n;
|
|
20
|
-
}
|
|
21
|
-
return g() || t;
|
|
22
|
-
}, l = (t) => {
|
|
23
|
-
const o = e();
|
|
24
|
-
if (!(!o || !o.localStorage))
|
|
25
|
-
try {
|
|
26
|
-
o.localStorage.setItem(c, JSON.stringify(t));
|
|
27
|
-
} catch {
|
|
28
|
-
}
|
|
29
|
-
}, g = () => {
|
|
30
|
-
const t = e();
|
|
31
|
-
if (!(!t || !t.localStorage))
|
|
32
|
-
try {
|
|
33
|
-
const o = t.localStorage.getItem(c);
|
|
34
|
-
if (o)
|
|
35
|
-
return JSON.parse(o);
|
|
36
|
-
} catch {
|
|
37
|
-
}
|
|
38
|
-
}, h = () => {
|
|
39
|
-
const t = e();
|
|
40
|
-
if (!(!t || !t.localStorage))
|
|
41
|
-
try {
|
|
42
|
-
t.localStorage.removeItem(c);
|
|
43
|
-
} catch {
|
|
44
|
-
}
|
|
45
|
-
}, p = {
|
|
1
|
+
const e = {
|
|
2
|
+
delayDuration: 1e3
|
|
3
|
+
}, o = {
|
|
46
4
|
focusUnknownGuide: "No such guide exists",
|
|
47
5
|
focusUncommittedGuide: "This guide has not been committed",
|
|
48
6
|
focusUnselectableGuide: "No component that can display this guide is present"
|
|
49
7
|
};
|
|
50
8
|
export {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
_ as getRunConfig
|
|
9
|
+
o as FOCUS_ERRORS,
|
|
10
|
+
e as sharedTooltipProps
|
|
54
11
|
};
|
|
55
12
|
//# sourceMappingURL=helpers.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/helpers.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"helpers.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/helpers.ts"],"sourcesContent":["export const sharedTooltipProps = {\n delayDuration: 1000,\n};\n\nexport type DisplayOption = \"all-guides\" | \"only-active\" | \"only-eligible\";\n\nexport const FOCUS_ERRORS = {\n focusUnknownGuide: \"No such guide exists\",\n focusUncommittedGuide: \"This guide has not been committed\",\n focusUnselectableGuide: \"No component that can display this guide is present\",\n};\n"],"names":["sharedTooltipProps","delayDuration","FOCUS_ERRORS","focusUnknownGuide","focusUncommittedGuide","focusUnselectableGuide"],"mappings":"AAAO,MAAMA,IAAqB;AAAA,EAChCC,eAAe;AACjB,GAIaC,IAAe;AAAA,EAC1BC,mBAAmB;AAAA,EACnBC,uBAAuB;AAAA,EACvBC,wBAAwB;AAC1B;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInspectGuideClientStore.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts"],"sourcesContent":["import {\n KnockGuide,\n KnockGuideClientGroupStage,\n KnockGuideClientStoreState,\n KnockGuideIneligibilityMarker,\n KnockGuideSelectionResult,\n checkActivatable,\n checkStateIfThrottled,\n} from \"@knocklabs/client\";\nimport { useGuideContext, useStore } from \"@knocklabs/react-core\";\n\nimport { FOCUS_ERRORS, ToolbarV2RunConfig } from \"./helpers\";\n\nconst byKey = <T extends { key: string }>(items: T[]) => {\n return items.reduce((acc, item) => ({ ...acc, [item.key]: item }), {});\n};\n\n/**\n * This is the main module that will house core logic for the toolbar. It hooks\n * into the guide client state store, extracts relevant data for debugging, and\n * transforms it into easily consumable data for the toolbar - namely\n * \"annotating\" guides for its various statuses to display.\n */\n\n// Active: `true` status = good\ntype ActiveStatus = {\n status: boolean;\n};\n\n// Targetable: `true` status = good\ntype TargetableStatusTrue = {\n status: true;\n};\ntype TargetableStatusFalse = {\n status: false;\n reason: string;\n message: string;\n};\ntype TargetableStatus = TargetableStatusTrue | TargetableStatusFalse;\n\ntype ActivatableStatus = {\n status: boolean;\n};\n\n// Archived: `false` status = good\ntype ArchivedStatus = {\n status: boolean;\n};\n\n// Selectable:\n// - \"returned\": Queried and resolved to return the guide from useGuide(s).\n// - \"throttled\": Queried and resolved but being throttled, so not yet returned.\n// - \"queried\": Queried but not resolved, because there are other higher\n// priority guides that are ahead of this guide in the query result.\n// - undefined: Not reachable with any of the given queries and filters.\ntype SelectionResultByLimit = {\n one?: KnockGuideSelectionResult;\n all?: KnockGuideSelectionResult;\n};\ntype SelectionResultByQuery = {\n key?: SelectionResultByLimit;\n type?: SelectionResultByLimit;\n};\ntype SelectableStatusPresent = {\n status: \"returned\" | \"throttled\" | \"queried\";\n query: SelectionResultByQuery;\n};\ntype SelectableStatusAbsent = {\n status: undefined;\n};\ntype SelectableStatus = SelectableStatusPresent | SelectableStatusAbsent;\n\nexport type AnnotatedStatuses = {\n // Individual eligibility statuses:\n active: ActiveStatus;\n targetable: TargetableStatus;\n archived: ArchivedStatus;\n // Individual qualified statuses:\n activatable: ActivatableStatus;\n selectable: SelectableStatus;\n};\n\ntype GuideAnnotation = AnnotatedStatuses & {\n // Resolved eligibility based on active, targetable and archived statuses,\n // which are backend driven evaluation results that are exposed for debugging.\n isEligible: boolean;\n\n // Resolved display qualification based on an activatable status, which\n // informs \"when\" and \"where\" an eligible guide can be displayed to user.\n isQualified: boolean;\n};\n\nexport type AnnotatedGuide = KnockGuide & {\n orderIndex: number;\n annotation: GuideAnnotation;\n\n // Legacy fields, typed only to make tsc happy when we prune these out.\n activation_location_rules?: KnockGuide[\"activation_url_patterns\"];\n priority?: number;\n};\n\n// Exists and ordered in control but absent in switchboard (therefore not\n// included in the api response), which implies a newly created guide that has\n// never been published to switchboard.\nexport type UncommittedGuide = {\n __typename: \"UncommittedGuide\";\n orderIndex: number;\n key: KnockGuide[\"key\"];\n active: false;\n bypass_global_group_limit: false;\n annotation: {\n isEligible: false;\n isQualified: false;\n active: {\n status: false;\n };\n selectable: {\n status: undefined;\n };\n };\n};\n\nexport type InspectionResultOk = {\n status: \"ok\";\n guides: (AnnotatedGuide | UncommittedGuide)[];\n};\ntype InspectionResultError = {\n status: \"error\";\n error:\n | \"no_guides_fetched\"\n | \"no_guide_group\"\n | \"focus_unknown_guide\"\n | \"focus_uncommitted_guide\"\n | \"focus_unselectable_guide\";\n message: string;\n};\ntype InspectionResult = InspectionResultOk | InspectionResultError;\n\ntype StoreStateSnapshot = Pick<\n KnockGuideClientStoreState,\n | \"location\"\n | \"guides\"\n | \"guideGroups\"\n | \"ineligibleGuides\"\n | \"debug\"\n | \"counter\"\n | \"queries\"\n> & {\n throttled: boolean;\n};\n\nconst inferSelectByKeyReturnStatus = (\n guide: KnockGuide,\n snapshot: StoreStateSnapshot,\n stage: KnockGuideClientGroupStage,\n query: SelectionResultByQuery,\n): SelectableStatusPresent[\"status\"] => {\n const includeThrottled =\n !!query.key?.one?.metadata?.opts?.includeThrottled ||\n !!query.key?.all?.metadata?.opts?.includeThrottled;\n\n // If unthrottled, then it should always be returned.\n if (guide.bypass_global_group_limit) {\n return \"returned\";\n }\n\n // If resolved, expect this guide to be returned unless being throttled.\n if (guide.key === stage.resolved) {\n if (snapshot.throttled && !includeThrottled) {\n return \"throttled\";\n }\n return \"returned\";\n }\n\n // If queried but not resolved, it means this guide is being shadowed by\n // another guide with higher priority because throttled guides can be\n // displayed only one at a time.\n return \"queried\";\n};\n\nconst inferSelectOneByTypeReturnStatus = (\n guide: KnockGuide,\n snapshot: StoreStateSnapshot,\n stage: KnockGuideClientGroupStage,\n query: SelectionResultByQuery,\n): SelectableStatusPresent[\"status\"] => {\n const includeThrottled = !!query.type?.one?.metadata?.opts?.includeThrottled;\n\n const result = query.type!.one!;\n if (result.size === 0) {\n return \"queried\";\n }\n\n // There may be multiple unthrottled guides of the same type, being queried\n // by type to return a single guide, for example: useGuide({ type: \"card\" }).\n //\n // So it is possible for an unthrottled guide to be shadowed by another\n // unthrottled guide of the same type with higher priority, so we need to\n // look at the query result to determine its return status.\n if (guide.bypass_global_group_limit) {\n const guides = [...result.values()];\n const first = guides[0]!;\n\n if (guide.key !== first.key) {\n // Being shadowed by another guide with higher priority.\n return \"queried\";\n }\n return \"returned\";\n }\n\n // If resolved, expect this guide to be returned unless being throttled.\n if (guide.key === stage.resolved) {\n if (snapshot.throttled && !includeThrottled) {\n return \"throttled\";\n }\n return \"returned\";\n }\n\n // If queried but not resolved, it means this guide is being shadowed by\n // another guide with higher priority because throttled guides can be\n // displayed only one at a time.\n return \"queried\";\n};\n\nconst inferSelectAllByTypeReturnStatus = (\n guide: KnockGuide,\n snapshot: StoreStateSnapshot,\n stage: KnockGuideClientGroupStage,\n query: SelectionResultByQuery,\n): SelectableStatusPresent[\"status\"] => {\n const result = query.type!.all!;\n if (result.size === 0) {\n return \"queried\";\n }\n\n const guides = [...result.values()];\n const first = guides[0]!;\n\n // Might want to consider moving this up to do once.\n const guidesByKey: Record<KnockGuide[\"key\"], KnockGuide> = byKey(guides);\n\n // If includeThrottled given, then expect all selected guides to be returned.\n const includeThrottled = !!query.type?.all?.metadata?.opts?.includeThrottled;\n if (includeThrottled) {\n return guidesByKey[guide.key] ? \"returned\" : \"queried\";\n }\n\n // If the first selected guide is unthrottled or resolved, then we should\n // have at minimum one guide to return, and potentially more based on whether\n // we are throttling currently and which other guides are unthrottled.\n if (first.bypass_global_group_limit || first.key === stage.resolved) {\n if (!guidesByKey[guide.key]) {\n return \"queried\";\n }\n if (snapshot.throttled) {\n return guide.bypass_global_group_limit ? \"returned\" : \"throttled\";\n }\n return \"returned\";\n }\n\n return \"queried\";\n};\n\nconst inferSelectReturnStatus = (\n guide: KnockGuide,\n snapshot: StoreStateSnapshot,\n stage: KnockGuideClientGroupStage,\n query: SelectionResultByQuery,\n) => {\n // Querying by key can only return up to a max of one guide, regardless of\n // useGuide or useGuides, and should take precedence in status designation.\n if (query.key) {\n return inferSelectByKeyReturnStatus(guide, snapshot, stage, query);\n }\n\n if (query.type?.all) {\n return inferSelectAllByTypeReturnStatus(guide, snapshot, stage, query);\n }\n if (query.type?.one) {\n return inferSelectOneByTypeReturnStatus(guide, snapshot, stage, query);\n }\n\n // Should not happen but just for completeness.\n return undefined;\n};\n\nconst toSelectableStatus = (\n guide: KnockGuide,\n snapshot: StoreStateSnapshot,\n stage: KnockGuideClientGroupStage | undefined,\n): SelectableStatus => {\n if (!stage || stage.status === \"open\") {\n return { status: undefined };\n }\n\n const query = {\n key: (stage.results.key || {})[guide.key],\n type: (stage.results.type || {})[guide.type],\n };\n\n const queried = Boolean(query.key || query.type);\n if (!queried) {\n // No present query in the current location can select this guide.\n return { status: undefined };\n }\n\n const status = inferSelectReturnStatus(guide, snapshot, stage, query);\n if (!status) {\n return { status: undefined };\n }\n\n return { status, query };\n};\n\nconst toIneligibilityStatus = (\n guide: KnockGuide,\n marker?: KnockGuideIneligibilityMarker,\n): Partial<AnnotatedStatuses> => {\n const statuses: Partial<AnnotatedStatuses> = {};\n\n if (\n marker?.reason === \"not_in_target_audience\" ||\n marker?.reason === \"target_conditions_not_met\"\n ) {\n statuses.targetable = {\n status: false,\n reason: marker.reason,\n message: marker.message,\n };\n }\n\n if (\n marker?.reason === \"marked_as_archived\" ||\n (guide.steps || []).every((s) => !!s.message.archived_at)\n ) {\n statuses.archived = {\n status: true,\n };\n }\n\n if (marker?.reason === \"guide_not_active\") {\n statuses.active = {\n status: false,\n };\n }\n\n return statuses;\n};\n\nconst resolveIsEligible = ({\n active,\n targetable,\n archived,\n}: AnnotatedStatuses) => {\n if (!active.status) return false;\n if (!targetable.status) return false;\n if (archived.status) return false;\n return true;\n};\n\nexport const resolveIsQualified = ({\n activatable,\n selectable,\n}: AnnotatedStatuses) => {\n if (!activatable.status) return false;\n if (!selectable.status) return false;\n return true;\n};\n\nconst annotateGuide = (\n guide: KnockGuide,\n orderIndex: number,\n snapshot: StoreStateSnapshot,\n stage: KnockGuideClientGroupStage | undefined,\n): AnnotatedGuide => {\n const { ineligibleGuides, location } = snapshot;\n const marker = ineligibleGuides[guide.key];\n const ineligiblity = toIneligibilityStatus(guide, marker);\n\n const statuses: AnnotatedStatuses = {\n // isEligible:\n active: ineligiblity?.active || { status: true },\n targetable: ineligiblity?.targetable || { status: true },\n archived: ineligiblity?.archived || { status: false },\n // isQualified:\n activatable: { status: checkActivatable(guide, location) },\n selectable: toSelectableStatus(guide, snapshot, stage),\n };\n\n const annotation: GuideAnnotation = {\n ...statuses,\n isEligible: resolveIsEligible(statuses),\n isQualified: resolveIsQualified(statuses),\n };\n\n return {\n ...guide,\n orderIndex,\n annotation,\n };\n};\n\nconst newUncommittedGuide = (key: KnockGuide[\"key\"], orderIndex: number) =>\n ({\n __typename: \"UncommittedGuide\",\n key,\n orderIndex,\n active: false,\n bypass_global_group_limit: false,\n annotation: {\n isEligible: false,\n isQualified: false,\n active: {\n status: false,\n },\n selectable: {\n status: undefined,\n },\n },\n }) as UncommittedGuide;\n\nexport const useInspectGuideClientStore = (\n runConfig: ToolbarV2RunConfig,\n): InspectionResult | undefined => {\n const { client } = useGuideContext();\n\n // Extract a snapshot of the client store state for debugging.\n const snapshot: StoreStateSnapshot = useStore(client.store, (state) => {\n const throttled = checkStateIfThrottled(state);\n\n return {\n location: state.location,\n guides: state.guides,\n guideGroups: state.guideGroups,\n ineligibleGuides: state.ineligibleGuides,\n debug: state.debug,\n counter: state.counter,\n queries: state.queries,\n throttled,\n };\n });\n\n // Not in debugging session, so noop.\n if (!snapshot.debug?.debugging) {\n return undefined;\n }\n\n // No recorded fetch requests, which implies an inflight request loading.\n const req = Object.entries(snapshot.queries)[0];\n if (!req || req[1].status === \"loading\") {\n return {\n status: \"error\",\n error: \"no_guides_fetched\",\n message: \"Loading...\",\n };\n }\n\n // Should always be a default group so this should never happen.\n const defaultGroup = snapshot.guideGroups[0];\n if (!defaultGroup) {\n return {\n status: \"error\",\n error: \"no_guide_group\",\n message: \"No guide group found\",\n };\n }\n\n const groupStage = client.getStage();\n\n // Annotate guides for various eligibility, activation and query statuses\n // that are useful for debugging purposes.\n const orderedGuides = defaultGroup.display_sequence.map((guideKey, index) => {\n const guide = snapshot.guides[guideKey];\n if (!guide) {\n return newUncommittedGuide(guideKey, index);\n }\n\n return annotateGuide(guide, index, snapshot, groupStage);\n });\n\n // Check if the focused guide actually exists and is selectable on the page.\n const focusedGuideKey = Object.keys(runConfig.focusedGuideKeys || {})[0];\n if (groupStage?.status === \"closed\" && focusedGuideKey) {\n const foundGuide = orderedGuides.find((g) => g.key === focusedGuideKey);\n\n // No such guide exists for the given focused guide key.\n if (!foundGuide) {\n return {\n status: \"error\",\n error: \"focus_unknown_guide\",\n message: `Unable to display \\`${focusedGuideKey}\\`, ${FOCUS_ERRORS.focusUnknownGuide.toLowerCase()}.`,\n };\n }\n\n // This guide exists but has never been committed and published, so it is\n // not present in the API response.\n if (isUncommittedGuide(foundGuide)) {\n return {\n status: \"error\",\n error: \"focus_uncommitted_guide\",\n message: `Unable to display \\`${focusedGuideKey}\\`, ${FOCUS_ERRORS.focusUncommittedGuide.toLowerCase()}.`,\n };\n }\n\n // This guide exists and is present in the response, but it is not queried\n // in the current page so it is impossible to force render this guide.\n if (!foundGuide.annotation.selectable.status) {\n return {\n status: \"error\",\n error: \"focus_unselectable_guide\",\n message: `Unable to display \\`${focusedGuideKey}\\`, ${FOCUS_ERRORS.focusUnselectableGuide.toLowerCase()}.`,\n };\n }\n }\n\n return {\n status: \"ok\",\n guides: orderedGuides,\n };\n};\n\nexport const isUncommittedGuide = (input: unknown): input is UncommittedGuide =>\n typeof input === \"object\" &&\n input !== null &&\n \"__typename\" in input &&\n (input as UncommittedGuide).__typename === \"UncommittedGuide\";\n"],"names":["byKey","items","reduce","acc","item","key","inferSelectByKeyReturnStatus","guide","snapshot","stage","query","includeThrottled","one","metadata","opts","all","bypass_global_group_limit","resolved","throttled","inferSelectOneByTypeReturnStatus","type","result","size","first","values","inferSelectAllByTypeReturnStatus","guides","guidesByKey","inferSelectReturnStatus","toSelectableStatus","status","undefined","results","Boolean","toIneligibilityStatus","marker","statuses","reason","targetable","message","steps","every","s","archived_at","archived","active","resolveIsEligible","resolveIsQualified","activatable","selectable","annotateGuide","orderIndex","ineligibleGuides","location","ineligiblity","checkActivatable","annotation","isEligible","isQualified","newUncommittedGuide","__typename","useInspectGuideClientStore","runConfig","client","useGuideContext","useStore","store","state","checkStateIfThrottled","guideGroups","debug","counter","queries","debugging","req","Object","entries","error","defaultGroup","groupStage","getStage","orderedGuides","display_sequence","map","guideKey","index","focusedGuideKey","keys","focusedGuideKeys","foundGuide","find","g","FOCUS_ERRORS","focusUnknownGuide","toLowerCase","isUncommittedGuide","focusUncommittedGuide","focusUnselectableGuide","input"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useInspectGuideClientStore.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts"],"sourcesContent":["import {\n KnockGuide,\n KnockGuideClientGroupStage,\n KnockGuideClientStoreState,\n KnockGuideIneligibilityMarker,\n KnockGuideSelectionResult,\n type ToolbarV2RunConfig,\n checkActivatable,\n checkStateIfThrottled,\n} from \"@knocklabs/client\";\nimport { useGuideContext, useStore } from \"@knocklabs/react-core\";\n\nimport { FOCUS_ERRORS } from \"./helpers\";\n\nconst byKey = <T extends { key: string }>(items: T[]) => {\n return items.reduce((acc, item) => ({ ...acc, [item.key]: item }), {});\n};\n\n/**\n * This is the main module that will house core logic for the toolbar. It hooks\n * into the guide client state store, extracts relevant data for debugging, and\n * transforms it into easily consumable data for the toolbar - namely\n * \"annotating\" guides for its various statuses to display.\n */\n\n// Active: `true` status = good\ntype ActiveStatus = {\n status: boolean;\n};\n\n// Targetable: `true` status = good\ntype TargetableStatusTrue = {\n status: true;\n};\ntype TargetableStatusFalse = {\n status: false;\n reason: string;\n message: string;\n};\ntype TargetableStatus = TargetableStatusTrue | TargetableStatusFalse;\n\ntype ActivatableStatus = {\n status: boolean;\n};\n\n// Archived: `false` status = good\ntype ArchivedStatus = {\n status: boolean;\n};\n\n// Selectable:\n// - \"returned\": Queried and resolved to return the guide from useGuide(s).\n// - \"throttled\": Queried and resolved but being throttled, so not yet returned.\n// - \"queried\": Queried but not resolved, because there are other higher\n// priority guides that are ahead of this guide in the query result.\n// - undefined: Not reachable with any of the given queries and filters.\ntype SelectionResultByLimit = {\n one?: KnockGuideSelectionResult;\n all?: KnockGuideSelectionResult;\n};\ntype SelectionResultByQuery = {\n key?: SelectionResultByLimit;\n type?: SelectionResultByLimit;\n};\ntype SelectableStatusPresent = {\n status: \"returned\" | \"throttled\" | \"queried\";\n query: SelectionResultByQuery;\n};\ntype SelectableStatusAbsent = {\n status: undefined;\n};\ntype SelectableStatus = SelectableStatusPresent | SelectableStatusAbsent;\n\nexport type AnnotatedStatuses = {\n // Individual eligibility statuses:\n active: ActiveStatus;\n targetable: TargetableStatus;\n archived: ArchivedStatus;\n // Individual qualified statuses:\n activatable: ActivatableStatus;\n selectable: SelectableStatus;\n};\n\ntype GuideAnnotation = AnnotatedStatuses & {\n // Resolved eligibility based on active, targetable and archived statuses,\n // which are backend driven evaluation results that are exposed for debugging.\n isEligible: boolean;\n\n // Resolved display qualification based on an activatable status, which\n // informs \"when\" and \"where\" an eligible guide can be displayed to user.\n isQualified: boolean;\n};\n\nexport type AnnotatedGuide = KnockGuide & {\n orderIndex: number;\n annotation: GuideAnnotation;\n\n // Legacy fields, typed only to make tsc happy when we prune these out.\n activation_location_rules?: KnockGuide[\"activation_url_patterns\"];\n priority?: number;\n};\n\n// Exists and ordered in control but absent in switchboard (therefore not\n// included in the api response), which implies a newly created guide that has\n// never been published to switchboard.\nexport type UncommittedGuide = {\n __typename: \"UncommittedGuide\";\n orderIndex: number;\n key: KnockGuide[\"key\"];\n active: false;\n bypass_global_group_limit: false;\n annotation: {\n isEligible: false;\n isQualified: false;\n active: {\n status: false;\n };\n selectable: {\n status: undefined;\n };\n };\n};\n\nexport type InspectionResultOk = {\n status: \"ok\";\n guides: (AnnotatedGuide | UncommittedGuide)[];\n};\ntype InspectionResultError = {\n status: \"error\";\n error:\n | \"no_guides_fetched\"\n | \"no_guide_group\"\n | \"focus_unknown_guide\"\n | \"focus_uncommitted_guide\"\n | \"focus_unselectable_guide\";\n message: string;\n};\ntype InspectionResult = InspectionResultOk | InspectionResultError;\n\ntype StoreStateSnapshot = Pick<\n KnockGuideClientStoreState,\n | \"location\"\n | \"guides\"\n | \"guideGroups\"\n | \"ineligibleGuides\"\n | \"debug\"\n | \"counter\"\n | \"queries\"\n> & {\n throttled: boolean;\n};\n\nconst inferSelectByKeyReturnStatus = (\n guide: KnockGuide,\n snapshot: StoreStateSnapshot,\n stage: KnockGuideClientGroupStage,\n query: SelectionResultByQuery,\n): SelectableStatusPresent[\"status\"] => {\n const includeThrottled =\n !!query.key?.one?.metadata?.opts?.includeThrottled ||\n !!query.key?.all?.metadata?.opts?.includeThrottled;\n\n // If unthrottled, then it should always be returned.\n if (guide.bypass_global_group_limit) {\n return \"returned\";\n }\n\n // If resolved, expect this guide to be returned unless being throttled.\n if (guide.key === stage.resolved) {\n if (snapshot.throttled && !includeThrottled) {\n return \"throttled\";\n }\n return \"returned\";\n }\n\n // If queried but not resolved, it means this guide is being shadowed by\n // another guide with higher priority because throttled guides can be\n // displayed only one at a time.\n return \"queried\";\n};\n\nconst inferSelectOneByTypeReturnStatus = (\n guide: KnockGuide,\n snapshot: StoreStateSnapshot,\n stage: KnockGuideClientGroupStage,\n query: SelectionResultByQuery,\n): SelectableStatusPresent[\"status\"] => {\n const includeThrottled = !!query.type?.one?.metadata?.opts?.includeThrottled;\n\n const result = query.type!.one!;\n if (result.size === 0) {\n return \"queried\";\n }\n\n // There may be multiple unthrottled guides of the same type, being queried\n // by type to return a single guide, for example: useGuide({ type: \"card\" }).\n //\n // So it is possible for an unthrottled guide to be shadowed by another\n // unthrottled guide of the same type with higher priority, so we need to\n // look at the query result to determine its return status.\n if (guide.bypass_global_group_limit) {\n const guides = [...result.values()];\n const first = guides[0]!;\n\n if (guide.key !== first.key) {\n // Being shadowed by another guide with higher priority.\n return \"queried\";\n }\n return \"returned\";\n }\n\n // If resolved, expect this guide to be returned unless being throttled.\n if (guide.key === stage.resolved) {\n if (snapshot.throttled && !includeThrottled) {\n return \"throttled\";\n }\n return \"returned\";\n }\n\n // If queried but not resolved, it means this guide is being shadowed by\n // another guide with higher priority because throttled guides can be\n // displayed only one at a time.\n return \"queried\";\n};\n\nconst inferSelectAllByTypeReturnStatus = (\n guide: KnockGuide,\n snapshot: StoreStateSnapshot,\n stage: KnockGuideClientGroupStage,\n query: SelectionResultByQuery,\n): SelectableStatusPresent[\"status\"] => {\n const result = query.type!.all!;\n if (result.size === 0) {\n return \"queried\";\n }\n\n const guides = [...result.values()];\n const first = guides[0]!;\n\n // Might want to consider moving this up to do once.\n const guidesByKey: Record<KnockGuide[\"key\"], KnockGuide> = byKey(guides);\n\n // If includeThrottled given, then expect all selected guides to be returned.\n const includeThrottled = !!query.type?.all?.metadata?.opts?.includeThrottled;\n if (includeThrottled) {\n return guidesByKey[guide.key] ? \"returned\" : \"queried\";\n }\n\n // If the first selected guide is unthrottled or resolved, then we should\n // have at minimum one guide to return, and potentially more based on whether\n // we are throttling currently and which other guides are unthrottled.\n if (first.bypass_global_group_limit || first.key === stage.resolved) {\n if (!guidesByKey[guide.key]) {\n return \"queried\";\n }\n if (snapshot.throttled) {\n return guide.bypass_global_group_limit ? \"returned\" : \"throttled\";\n }\n return \"returned\";\n }\n\n return \"queried\";\n};\n\nconst inferSelectReturnStatus = (\n guide: KnockGuide,\n snapshot: StoreStateSnapshot,\n stage: KnockGuideClientGroupStage,\n query: SelectionResultByQuery,\n) => {\n // Querying by key can only return up to a max of one guide, regardless of\n // useGuide or useGuides, and should take precedence in status designation.\n if (query.key) {\n return inferSelectByKeyReturnStatus(guide, snapshot, stage, query);\n }\n\n if (query.type?.all) {\n return inferSelectAllByTypeReturnStatus(guide, snapshot, stage, query);\n }\n if (query.type?.one) {\n return inferSelectOneByTypeReturnStatus(guide, snapshot, stage, query);\n }\n\n // Should not happen but just for completeness.\n return undefined;\n};\n\nconst toSelectableStatus = (\n guide: KnockGuide,\n snapshot: StoreStateSnapshot,\n stage: KnockGuideClientGroupStage | undefined,\n): SelectableStatus => {\n if (!stage || stage.status === \"open\") {\n return { status: undefined };\n }\n\n const query = {\n key: (stage.results.key || {})[guide.key],\n type: (stage.results.type || {})[guide.type],\n };\n\n const queried = Boolean(query.key || query.type);\n if (!queried) {\n // No present query in the current location can select this guide.\n return { status: undefined };\n }\n\n const status = inferSelectReturnStatus(guide, snapshot, stage, query);\n if (!status) {\n return { status: undefined };\n }\n\n return { status, query };\n};\n\nconst toIneligibilityStatus = (\n guide: KnockGuide,\n marker?: KnockGuideIneligibilityMarker,\n): Partial<AnnotatedStatuses> => {\n const statuses: Partial<AnnotatedStatuses> = {};\n\n if (\n marker?.reason === \"not_in_target_audience\" ||\n marker?.reason === \"target_conditions_not_met\"\n ) {\n statuses.targetable = {\n status: false,\n reason: marker.reason,\n message: marker.message,\n };\n }\n\n if (\n marker?.reason === \"marked_as_archived\" ||\n (guide.steps || []).every((s) => !!s.message.archived_at)\n ) {\n statuses.archived = {\n status: true,\n };\n }\n\n if (marker?.reason === \"guide_not_active\") {\n statuses.active = {\n status: false,\n };\n }\n\n return statuses;\n};\n\nconst resolveIsEligible = ({\n active,\n targetable,\n archived,\n}: AnnotatedStatuses) => {\n if (!active.status) return false;\n if (!targetable.status) return false;\n if (archived.status) return false;\n return true;\n};\n\nexport const resolveIsQualified = ({\n activatable,\n selectable,\n}: AnnotatedStatuses) => {\n if (!activatable.status) return false;\n if (!selectable.status) return false;\n return true;\n};\n\nconst annotateGuide = (\n guide: KnockGuide,\n orderIndex: number,\n snapshot: StoreStateSnapshot,\n stage: KnockGuideClientGroupStage | undefined,\n): AnnotatedGuide => {\n const { ineligibleGuides, location } = snapshot;\n const marker = ineligibleGuides[guide.key];\n const ineligiblity = toIneligibilityStatus(guide, marker);\n\n const statuses: AnnotatedStatuses = {\n // isEligible:\n active: ineligiblity?.active || { status: true },\n targetable: ineligiblity?.targetable || { status: true },\n archived: ineligiblity?.archived || { status: false },\n // isQualified:\n activatable: { status: checkActivatable(guide, location) },\n selectable: toSelectableStatus(guide, snapshot, stage),\n };\n\n const annotation: GuideAnnotation = {\n ...statuses,\n isEligible: resolveIsEligible(statuses),\n isQualified: resolveIsQualified(statuses),\n };\n\n return {\n ...guide,\n orderIndex,\n annotation,\n };\n};\n\nconst newUncommittedGuide = (key: KnockGuide[\"key\"], orderIndex: number) =>\n ({\n __typename: \"UncommittedGuide\",\n key,\n orderIndex,\n active: false,\n bypass_global_group_limit: false,\n annotation: {\n isEligible: false,\n isQualified: false,\n active: {\n status: false,\n },\n selectable: {\n status: undefined,\n },\n },\n }) as UncommittedGuide;\n\nexport const useInspectGuideClientStore = (\n runConfig: ToolbarV2RunConfig,\n): InspectionResult | undefined => {\n const { client } = useGuideContext();\n\n // Extract a snapshot of the client store state for debugging.\n const snapshot: StoreStateSnapshot = useStore(client.store, (state) => {\n const throttled = checkStateIfThrottled(state);\n\n return {\n location: state.location,\n guides: state.guides,\n guideGroups: state.guideGroups,\n ineligibleGuides: state.ineligibleGuides,\n debug: state.debug,\n counter: state.counter,\n queries: state.queries,\n throttled,\n };\n });\n\n // Not in debugging session, so noop.\n if (!snapshot.debug?.debugging) {\n return undefined;\n }\n\n // No recorded fetch requests, which implies an inflight request loading.\n const req = Object.entries(snapshot.queries)[0];\n if (!req || req[1].status === \"loading\") {\n return {\n status: \"error\",\n error: \"no_guides_fetched\",\n message: \"Loading...\",\n };\n }\n\n // Should always be a default group so this should never happen.\n const defaultGroup = snapshot.guideGroups[0];\n if (!defaultGroup) {\n return {\n status: \"error\",\n error: \"no_guide_group\",\n message: \"No guide group found\",\n };\n }\n\n const groupStage = client.getStage();\n\n // Annotate guides for various eligibility, activation and query statuses\n // that are useful for debugging purposes.\n const orderedGuides = defaultGroup.display_sequence.map((guideKey, index) => {\n const guide = snapshot.guides[guideKey];\n if (!guide) {\n return newUncommittedGuide(guideKey, index);\n }\n\n return annotateGuide(guide, index, snapshot, groupStage);\n });\n\n // Check if the focused guide actually exists and is selectable on the page.\n const focusedGuideKey = Object.keys(runConfig.focusedGuideKeys || {})[0];\n if (groupStage?.status === \"closed\" && focusedGuideKey) {\n const foundGuide = orderedGuides.find((g) => g.key === focusedGuideKey);\n\n // No such guide exists for the given focused guide key.\n if (!foundGuide) {\n return {\n status: \"error\",\n error: \"focus_unknown_guide\",\n message: `Unable to display \\`${focusedGuideKey}\\`, ${FOCUS_ERRORS.focusUnknownGuide.toLowerCase()}.`,\n };\n }\n\n // This guide exists but has never been committed and published, so it is\n // not present in the API response.\n if (isUncommittedGuide(foundGuide)) {\n return {\n status: \"error\",\n error: \"focus_uncommitted_guide\",\n message: `Unable to display \\`${focusedGuideKey}\\`, ${FOCUS_ERRORS.focusUncommittedGuide.toLowerCase()}.`,\n };\n }\n\n // This guide exists and is present in the response, but it is not queried\n // in the current page so it is impossible to force render this guide.\n if (!foundGuide.annotation.selectable.status) {\n return {\n status: \"error\",\n error: \"focus_unselectable_guide\",\n message: `Unable to display \\`${focusedGuideKey}\\`, ${FOCUS_ERRORS.focusUnselectableGuide.toLowerCase()}.`,\n };\n }\n }\n\n return {\n status: \"ok\",\n guides: orderedGuides,\n };\n};\n\nexport const isUncommittedGuide = (input: unknown): input is UncommittedGuide =>\n typeof input === \"object\" &&\n input !== null &&\n \"__typename\" in input &&\n (input as UncommittedGuide).__typename === \"UncommittedGuide\";\n"],"names":["byKey","items","reduce","acc","item","key","inferSelectByKeyReturnStatus","guide","snapshot","stage","query","includeThrottled","one","metadata","opts","all","bypass_global_group_limit","resolved","throttled","inferSelectOneByTypeReturnStatus","type","result","size","first","values","inferSelectAllByTypeReturnStatus","guides","guidesByKey","inferSelectReturnStatus","toSelectableStatus","status","undefined","results","Boolean","toIneligibilityStatus","marker","statuses","reason","targetable","message","steps","every","s","archived_at","archived","active","resolveIsEligible","resolveIsQualified","activatable","selectable","annotateGuide","orderIndex","ineligibleGuides","location","ineligiblity","checkActivatable","annotation","isEligible","isQualified","newUncommittedGuide","__typename","useInspectGuideClientStore","runConfig","client","useGuideContext","useStore","store","state","checkStateIfThrottled","guideGroups","debug","counter","queries","debugging","req","Object","entries","error","defaultGroup","groupStage","getStage","orderedGuides","display_sequence","map","guideKey","index","focusedGuideKey","keys","focusedGuideKeys","foundGuide","find","g","FOCUS_ERRORS","focusUnknownGuide","toLowerCase","isUncommittedGuide","focusUncommittedGuide","focusUnselectableGuide","input"],"mappings":"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"}
|
|
@@ -1,24 +1,26 @@
|
|
|
1
|
-
import { KnockGuideProvider as
|
|
1
|
+
import { KnockGuideProvider as i } from "@knocklabs/react-core";
|
|
2
2
|
import r from "react";
|
|
3
3
|
import "../components/Banner/Banner.mjs";
|
|
4
4
|
import "../components/Card/Card.mjs";
|
|
5
|
-
import { V1 as
|
|
5
|
+
import { V1 as c } from "../components/Toolbar/V1/V1.mjs";
|
|
6
6
|
import { V2 as n } from "../components/Toolbar/V2/V2.mjs";
|
|
7
7
|
import "../components/Modal/Modal.mjs";
|
|
8
|
-
const
|
|
9
|
-
children:
|
|
8
|
+
const k = ({
|
|
9
|
+
children: o,
|
|
10
10
|
toolbar: e = "v2",
|
|
11
|
-
|
|
11
|
+
readyToTarget: t,
|
|
12
|
+
...m
|
|
12
13
|
}) => /* @__PURE__ */ r.createElement(
|
|
13
|
-
|
|
14
|
+
i,
|
|
14
15
|
{
|
|
15
|
-
...
|
|
16
|
+
...m,
|
|
17
|
+
readyToTarget: t,
|
|
16
18
|
trackDebugParams: e === "v1"
|
|
17
19
|
},
|
|
18
|
-
|
|
19
|
-
e === "v2" ? /* @__PURE__ */ r.createElement(n,
|
|
20
|
+
o,
|
|
21
|
+
e === "v2" ? /* @__PURE__ */ r.createElement(n, { readyToTarget: t }) : /* @__PURE__ */ r.createElement(c, null)
|
|
20
22
|
);
|
|
21
23
|
export {
|
|
22
|
-
|
|
24
|
+
k as KnockGuideProvider
|
|
23
25
|
};
|
|
24
26
|
//# sourceMappingURL=KnockGuideProvider.mjs.map
|