@adhese/sdk-devtools 0.11.6 → 0.12.1
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 +20 -0
- package/dist/AdheseContext.js +19 -0
- package/dist/AdheseContext.js.map +1 -0
- package/dist/Devtools.hooks.js +24 -0
- package/dist/Devtools.hooks.js.map +1 -0
- package/dist/Devtools.js +79 -0
- package/dist/Devtools.js.map +1 -0
- package/dist/cjs/AdheseContext.cjs +19 -0
- package/dist/cjs/AdheseContext.cjs.map +1 -0
- package/dist/cjs/Devtools.cjs +79 -0
- package/dist/cjs/Devtools.cjs.map +1 -0
- package/dist/cjs/Devtools.hooks.cjs +24 -0
- package/dist/cjs/Devtools.hooks.cjs.map +1 -0
- package/dist/cjs/components/badge.cjs +27 -0
- package/dist/cjs/components/badge.cjs.map +1 -0
- package/dist/cjs/components/button.cjs +49 -0
- package/dist/cjs/components/button.cjs.map +1 -0
- package/dist/cjs/components/editSlot.cjs +110 -0
- package/dist/cjs/components/editSlot.cjs.map +1 -0
- package/dist/cjs/components/form.cjs +110 -0
- package/dist/cjs/components/form.cjs.map +1 -0
- package/dist/cjs/components/fronttailSettings.cjs +94 -0
- package/dist/cjs/components/fronttailSettings.cjs.map +1 -0
- package/dist/cjs/components/input.cjs +22 -0
- package/dist/cjs/components/input.cjs.map +1 -0
- package/dist/cjs/components/label.cjs +38 -0
- package/dist/cjs/components/label.cjs.map +1 -0
- package/dist/cjs/components/logTable.cjs +67 -0
- package/dist/cjs/components/logTable.cjs.map +1 -0
- package/dist/cjs/components/parametersTable.cjs +40 -0
- package/dist/cjs/components/parametersTable.cjs.map +1 -0
- package/dist/cjs/components/previewButton.cjs +19 -0
- package/dist/cjs/components/previewButton.cjs.map +1 -0
- package/dist/cjs/components/settings.cjs +10 -0
- package/dist/cjs/components/settings.cjs.map +1 -0
- package/dist/cjs/components/sheet.cjs +118 -0
- package/dist/cjs/components/sheet.cjs.map +1 -0
- package/dist/cjs/components/slotsTable.cjs +230 -0
- package/dist/cjs/components/slotsTable.cjs.map +1 -0
- package/dist/cjs/components/switch.cjs +45 -0
- package/dist/cjs/components/switch.cjs.map +1 -0
- package/dist/cjs/components/table.cjs +91 -0
- package/dist/cjs/components/table.cjs.map +1 -0
- package/dist/cjs/components/tabs.cjs +65 -0
- package/dist/cjs/components/tabs.cjs.map +1 -0
- package/dist/cjs/devtools.composables.cjs +116 -0
- package/dist/cjs/devtools.composables.cjs.map +1 -0
- package/dist/cjs/main.cjs +16 -0
- package/dist/cjs/main.cjs.map +1 -0
- package/dist/cjs/modifiedSlots.store.cjs +63 -0
- package/dist/cjs/modifiedSlots.store.cjs.map +1 -0
- package/dist/cjs/package.json.cjs +7 -0
- package/dist/cjs/package.json.cjs.map +1 -0
- package/dist/cjs/sdkDevtools.cjs +17 -0
- package/dist/cjs/sdkDevtools.cjs.map +1 -0
- package/dist/cjs/utils.cjs +9 -0
- package/dist/cjs/utils.cjs.map +1 -0
- package/dist/components/badge.js +27 -0
- package/dist/components/badge.js.map +1 -0
- package/dist/components/button.js +49 -0
- package/dist/components/button.js.map +1 -0
- package/dist/components/editSlot.js +110 -0
- package/dist/components/editSlot.js.map +1 -0
- package/dist/components/form.js +110 -0
- package/dist/components/form.js.map +1 -0
- package/dist/components/fronttailSettings.js +94 -0
- package/dist/components/fronttailSettings.js.map +1 -0
- package/dist/components/input.js +22 -0
- package/dist/components/input.js.map +1 -0
- package/dist/components/label.js +21 -0
- package/dist/components/label.js.map +1 -0
- package/dist/components/logTable.js +67 -0
- package/dist/components/logTable.js.map +1 -0
- package/dist/components/parametersTable.js +40 -0
- package/dist/components/parametersTable.js.map +1 -0
- package/dist/components/previewButton.js +19 -0
- package/dist/components/previewButton.js.map +1 -0
- package/dist/components/settings.js +10 -0
- package/dist/components/settings.js.map +1 -0
- package/dist/components/sheet.js +101 -0
- package/dist/components/sheet.js.map +1 -0
- package/dist/components/slotsTable.js +230 -0
- package/dist/components/slotsTable.js.map +1 -0
- package/dist/components/switch.js +28 -0
- package/dist/components/switch.js.map +1 -0
- package/dist/components/table.js +91 -0
- package/dist/components/table.js.map +1 -0
- package/dist/components/tabs.js +48 -0
- package/dist/components/tabs.js.map +1 -0
- package/dist/devtools.composables.js +116 -0
- package/dist/devtools.composables.js.map +1 -0
- package/dist/main.js +16 -0
- package/dist/main.js.map +1 -0
- package/dist/modifiedSlots.store.js +63 -0
- package/dist/modifiedSlots.store.js.map +1 -0
- package/dist/package.json.js +7 -0
- package/dist/package.json.js.map +1 -0
- package/dist/sdkDevtools.d.ts +11 -0
- package/dist/sdkDevtools.js +17 -0
- package/dist/sdkDevtools.js.map +1 -0
- package/dist/utils.js +9 -0
- package/dist/utils.js.map +1 -0
- package/package.json +11 -8
- package/dist/devtools-Cbms1xWf.cjs +0 -816
- package/dist/devtools-Cbms1xWf.cjs.map +0 -1
- package/dist/devtools-CjRcI3Xd.js +0 -797
- package/dist/devtools-CjRcI3Xd.js.map +0 -1
- package/dist/index.cjs +0 -47
- package/dist/index.cjs.map +0 -1
- package/dist/index.d.ts +0 -14
- package/dist/index.js +0 -47
- package/dist/index.js.map +0 -1
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useEffect, useMemo, Fragment } from "react";
|
|
3
|
+
import { watch, generateName } from "@adhese/sdk-shared";
|
|
4
|
+
import { ResetIcon } from "@radix-ui/react-icons";
|
|
5
|
+
import { cn } from "../utils.js";
|
|
6
|
+
import { useAdheseContext } from "../AdheseContext.js";
|
|
7
|
+
import { useModifiedSlots } from "../modifiedSlots.store.js";
|
|
8
|
+
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "./table.js";
|
|
9
|
+
import { Badge } from "./badge.js";
|
|
10
|
+
import { buttonVariants, Button } from "./button.js";
|
|
11
|
+
import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle } from "./sheet.js";
|
|
12
|
+
import { EditSlot } from "./editSlot.js";
|
|
13
|
+
const slotIndexBadgeClasses = [
|
|
14
|
+
"bg-blue-500 hover:bg-blue-500",
|
|
15
|
+
"bg-amber-500 hover:bg-amber-500",
|
|
16
|
+
"bg-green-500 hover:bg-green-500",
|
|
17
|
+
"bg-red-500 hover:bg-red-500",
|
|
18
|
+
"bg-purple-500 hover:bg-purple-500",
|
|
19
|
+
"bg-cyan-500 hover:bg-cyan-500",
|
|
20
|
+
"bg-pink-500 hover:bg-pink-500"
|
|
21
|
+
];
|
|
22
|
+
const renderStatusMap = {
|
|
23
|
+
initializing: "Initializing",
|
|
24
|
+
initialized: "Initialized",
|
|
25
|
+
loading: "Loading",
|
|
26
|
+
loaded: "Loaded",
|
|
27
|
+
rendering: "Rendering",
|
|
28
|
+
rendered: "Rendered",
|
|
29
|
+
empty: "Empty",
|
|
30
|
+
error: "Error"
|
|
31
|
+
};
|
|
32
|
+
function SlotsTable() {
|
|
33
|
+
const [slots, setSlots] = useState([]);
|
|
34
|
+
const adheseContext = useAdheseContext();
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
if (!adheseContext)
|
|
37
|
+
return;
|
|
38
|
+
const disposeWatcher = watch(() => adheseContext.slots, (newSlots) => {
|
|
39
|
+
setSlots(Array.from(newSlots.values()));
|
|
40
|
+
}, { immediate: true, deep: true });
|
|
41
|
+
return () => {
|
|
42
|
+
disposeWatcher();
|
|
43
|
+
};
|
|
44
|
+
}, [adheseContext]);
|
|
45
|
+
const modifiedSlots = useModifiedSlots();
|
|
46
|
+
const formattedSlots = useMemo(() => slots.filter((slot) => {
|
|
47
|
+
var _a, _b;
|
|
48
|
+
return !((_b = (_a = slot.pluginOptions) == null ? void 0 : _a.devtools) == null ? void 0 : _b.hijackedSlot);
|
|
49
|
+
}).map((slot) => {
|
|
50
|
+
var _a;
|
|
51
|
+
const hijackedSlotOptions = modifiedSlots.slots.get(slot.name);
|
|
52
|
+
const hijackedSlot = adheseContext && hijackedSlotOptions && ((_a = adheseContext.get) == null ? void 0 : _a.call(adheseContext, generateName(adheseContext.location, hijackedSlotOptions.format, hijackedSlotOptions.slot)));
|
|
53
|
+
return {
|
|
54
|
+
...hijackedSlot ?? slot,
|
|
55
|
+
parameters: Array.from((hijackedSlot ?? slot).parameters.entries()),
|
|
56
|
+
hijackedSlot,
|
|
57
|
+
originalSlot: slot
|
|
58
|
+
};
|
|
59
|
+
}).toSorted((a, b) => {
|
|
60
|
+
var _a, _b;
|
|
61
|
+
const offsetA = ((_a = a.element) == null ? void 0 : _a.getBoundingClientRect().top) ?? 0;
|
|
62
|
+
const offsetB = ((_b = b.element) == null ? void 0 : _b.getBoundingClientRect().top) ?? 0;
|
|
63
|
+
return offsetA - offsetB;
|
|
64
|
+
}), [slots]);
|
|
65
|
+
const slotParametersExist = useMemo(() => formattedSlots.some((formattedSlot) => formattedSlot.parameters.length > 0), [formattedSlots]);
|
|
66
|
+
const previewExist = useMemo(() => formattedSlots.some((formattedSlot) => {
|
|
67
|
+
var _a;
|
|
68
|
+
return (_a = formattedSlot.data) == null ? void 0 : _a.preview;
|
|
69
|
+
}), [formattedSlots]);
|
|
70
|
+
const slotCodeExists = useMemo(() => formattedSlots.some((formattedSlot) => formattedSlot.slot), [formattedSlots]);
|
|
71
|
+
const origins = useMemo(() => {
|
|
72
|
+
const set = /* @__PURE__ */ new Set();
|
|
73
|
+
for (const slot of formattedSlots) {
|
|
74
|
+
const { data } = slot;
|
|
75
|
+
if (data)
|
|
76
|
+
set.add(data.origin);
|
|
77
|
+
}
|
|
78
|
+
return Array.from(set);
|
|
79
|
+
}, [formattedSlots]);
|
|
80
|
+
return adheseContext && formattedSlots.length > 0 ? /* @__PURE__ */ jsxs(Table, { children: [
|
|
81
|
+
/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
|
|
82
|
+
/* @__PURE__ */ jsx(TableHead, { children: "Name" }),
|
|
83
|
+
/* @__PURE__ */ jsx(TableHead, { children: "Location" }),
|
|
84
|
+
slotCodeExists && /* @__PURE__ */ jsx(TableHead, { children: "Slot" }),
|
|
85
|
+
/* @__PURE__ */ jsx(TableHead, { children: "Format" }),
|
|
86
|
+
origins.length > 1 && /* @__PURE__ */ jsx(TableHead, { children: "Origin" }),
|
|
87
|
+
/* @__PURE__ */ jsx(TableHead, { children: "Render Status" }),
|
|
88
|
+
/* @__PURE__ */ jsx(TableHead, { children: "Campaign ID" }),
|
|
89
|
+
/* @__PURE__ */ jsx(TableHead, { children: "Booking ID" }),
|
|
90
|
+
/* @__PURE__ */ jsx(TableHead, { children: "Creative ID" }),
|
|
91
|
+
/* @__PURE__ */ jsx(TableHead, { children: "Traffic ID" }),
|
|
92
|
+
/* @__PURE__ */ jsx(TableHead, { children: "Creative type" }),
|
|
93
|
+
/* @__PURE__ */ jsx(TableHead, { children: "Impression tracked" }),
|
|
94
|
+
/* @__PURE__ */ jsx(TableHead, { children: "Viewability tracked" }),
|
|
95
|
+
slotParametersExist && /* @__PURE__ */ jsx(TableHead, { children: "Parameters" }),
|
|
96
|
+
previewExist && /* @__PURE__ */ jsx(TableHead, { children: "Preview" }),
|
|
97
|
+
/* @__PURE__ */ jsx(TableHead, { children: "Controls" })
|
|
98
|
+
] }) }),
|
|
99
|
+
/* @__PURE__ */ jsx(TableBody, { children: formattedSlots.map(({
|
|
100
|
+
data,
|
|
101
|
+
name,
|
|
102
|
+
format,
|
|
103
|
+
location,
|
|
104
|
+
status,
|
|
105
|
+
isViewabilityTracked,
|
|
106
|
+
isImpressionTracked,
|
|
107
|
+
element,
|
|
108
|
+
parameters,
|
|
109
|
+
slot,
|
|
110
|
+
hijackedSlot,
|
|
111
|
+
originalSlot
|
|
112
|
+
}, index) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(TableRow, { id: name, children: [
|
|
113
|
+
/* @__PURE__ */ jsx(TableCell, { className: "font-medium", children: /* @__PURE__ */ jsxs(
|
|
114
|
+
"button",
|
|
115
|
+
{
|
|
116
|
+
onClick: () => {
|
|
117
|
+
if (element) {
|
|
118
|
+
element.scrollIntoView();
|
|
119
|
+
element.style.outline = "solid 5px red";
|
|
120
|
+
setTimeout(() => {
|
|
121
|
+
element.style.outline = "";
|
|
122
|
+
}, 1e3);
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
className: "flex flex-col gap-1",
|
|
126
|
+
children: [
|
|
127
|
+
/* @__PURE__ */ jsx(Badge, { className: cn(slotIndexBadgeClasses[index % slotIndexBadgeClasses.length], "text-white"), children: name }),
|
|
128
|
+
hijackedSlot && /* @__PURE__ */ jsx("del", { className: "text-xs text-muted-foreground", children: originalSlot.name })
|
|
129
|
+
]
|
|
130
|
+
}
|
|
131
|
+
) }),
|
|
132
|
+
/* @__PURE__ */ jsx(TableCell, { children: location }),
|
|
133
|
+
slotCodeExists && /* @__PURE__ */ jsx(TableCell, { children: slot ?? "" }),
|
|
134
|
+
/* @__PURE__ */ jsx(TableCell, { children: !(data == null ? void 0 : data.adFormat) || (data == null ? void 0 : data.adFormat) === format ? format : /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
135
|
+
/* @__PURE__ */ jsx("del", { className: "text-red-300 italic", children: format }),
|
|
136
|
+
/* @__PURE__ */ jsx("ins", { className: "no-underline text-green-700", children: data == null ? void 0 : data.adFormat })
|
|
137
|
+
] }) }),
|
|
138
|
+
origins.length > 1 && /* @__PURE__ */ jsx(TableCell, { children: (data == null ? void 0 : data.origin) && /* @__PURE__ */ jsx(Badge, { className: cn(slotIndexBadgeClasses[origins.indexOf(data.origin) % slotIndexBadgeClasses.length], "text-white"), children: data.origin.toLowerCase() }) }),
|
|
139
|
+
/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { variant: "outline", className: cn(status === "error" ? "bg-red-500 text-red-50" : ""), children: renderStatusMap[status] }) }),
|
|
140
|
+
/* @__PURE__ */ jsx(TableCell, { children: (data == null ? void 0 : data.orderId) && (data == null ? void 0 : data.orderId) !== "0" ? /* @__PURE__ */ jsx(
|
|
141
|
+
"a",
|
|
142
|
+
{
|
|
143
|
+
href: `https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/editCampaign/${data.orderId}`,
|
|
144
|
+
target: "_blank",
|
|
145
|
+
referrerPolicy: "no-referrer",
|
|
146
|
+
className: cn(buttonVariants({
|
|
147
|
+
variant: "ghost",
|
|
148
|
+
size: "sm"
|
|
149
|
+
})),
|
|
150
|
+
children: data.orderId
|
|
151
|
+
}
|
|
152
|
+
) : "-" }),
|
|
153
|
+
/* @__PURE__ */ jsx(TableCell, { children: (data == null ? void 0 : data.adspaceId) && (data == null ? void 0 : data.adspaceId) !== "0" ? /* @__PURE__ */ jsx(
|
|
154
|
+
"a",
|
|
155
|
+
{
|
|
156
|
+
href: `https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/bookingDetail/${data.adspaceId}/${data.orderId}`,
|
|
157
|
+
target: "_blank",
|
|
158
|
+
referrerPolicy: "no-referrer",
|
|
159
|
+
className: cn(buttonVariants({
|
|
160
|
+
variant: "ghost",
|
|
161
|
+
size: "sm"
|
|
162
|
+
})),
|
|
163
|
+
children: data.adspaceId
|
|
164
|
+
}
|
|
165
|
+
) : "-" }),
|
|
166
|
+
/* @__PURE__ */ jsx(TableCell, { children: (data == null ? void 0 : data.libId) && (data == null ? void 0 : data.orderId) !== "0" ? /* @__PURE__ */ jsx(
|
|
167
|
+
"a",
|
|
168
|
+
{
|
|
169
|
+
href: `https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/creativeDetail/${data.libId}/${data.orderId}`,
|
|
170
|
+
target: "_blank",
|
|
171
|
+
referrerPolicy: "no-referrer",
|
|
172
|
+
className: cn(buttonVariants({
|
|
173
|
+
variant: "ghost",
|
|
174
|
+
size: "sm"
|
|
175
|
+
})),
|
|
176
|
+
children: data.libId
|
|
177
|
+
}
|
|
178
|
+
) : "-" }),
|
|
179
|
+
/* @__PURE__ */ jsx(TableCell, { children: (data == null ? void 0 : data.id) ?? "-" }),
|
|
180
|
+
/* @__PURE__ */ jsx(TableCell, { children: (data == null ? void 0 : data.ext) ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: data.ext }) : "-" }),
|
|
181
|
+
/* @__PURE__ */ jsx(TableCell, { children: isImpressionTracked ? /* @__PURE__ */ jsx(Badge, { className: "bg-green-100 text-green-900 hover:bg-green-100", children: "Yes" }) : /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "No" }) }),
|
|
182
|
+
/* @__PURE__ */ jsx(TableCell, { children: isViewabilityTracked ? /* @__PURE__ */ jsx(Badge, { className: "bg-green-100 text-green-900 hover:bg-green-100", children: "Yes" }) : /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "No" }) }),
|
|
183
|
+
slotParametersExist && /* @__PURE__ */ jsx(TableCell, { children: parameters.length > 0 && /* @__PURE__ */ jsxs(Sheet, { children: [
|
|
184
|
+
/* @__PURE__ */ jsx(
|
|
185
|
+
SheetTrigger,
|
|
186
|
+
{
|
|
187
|
+
className: buttonVariants({
|
|
188
|
+
variant: "secondary",
|
|
189
|
+
size: "sm"
|
|
190
|
+
}),
|
|
191
|
+
children: "Show"
|
|
192
|
+
}
|
|
193
|
+
),
|
|
194
|
+
/* @__PURE__ */ jsxs(SheetContent, { className: "bg-white flex flex-col gap-4", children: [
|
|
195
|
+
/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: "Parameters" }) }),
|
|
196
|
+
/* @__PURE__ */ jsxs(Table, { children: [
|
|
197
|
+
/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
|
|
198
|
+
/* @__PURE__ */ jsx(TableHead, { children: "Key" }),
|
|
199
|
+
/* @__PURE__ */ jsx(TableHead, { children: "Value" })
|
|
200
|
+
] }) }),
|
|
201
|
+
/* @__PURE__ */ jsx(TableBody, { children: parameters.map(([parameterName, value]) => /* @__PURE__ */ jsxs(TableRow, { children: [
|
|
202
|
+
/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { variant: "outline", children: parameterName }) }),
|
|
203
|
+
/* @__PURE__ */ jsx(TableCell, { children: Array.isArray(value) ? /* @__PURE__ */ jsx("ul", { className: "flex gap-1", children: value.map((item, paramIndex) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Badge, { variant: "outline", children: item }) }, paramIndex)) }) : /* @__PURE__ */ jsx(Badge, { variant: "outline", children: value }) })
|
|
204
|
+
] }, parameterName)) })
|
|
205
|
+
] })
|
|
206
|
+
] })
|
|
207
|
+
] }) }),
|
|
208
|
+
previewExist && /* @__PURE__ */ jsx(TableCell, { children: (data == null ? void 0 : data.preview) && /* @__PURE__ */ jsx(Badge, { className: "bg-amber-400 text-amber-950 hover:bg-amber-400", children: "PREVIEW" }) }),
|
|
209
|
+
/* @__PURE__ */ jsxs(TableCell, { className: "flex gap-1", children: [
|
|
210
|
+
/* @__PURE__ */ jsx(EditSlot, { id: originalSlot.id }),
|
|
211
|
+
modifiedSlots.slots.has(originalSlot.name) && /* @__PURE__ */ jsx(
|
|
212
|
+
Button,
|
|
213
|
+
{
|
|
214
|
+
onClick: () => {
|
|
215
|
+
modifiedSlots.remove(originalSlot.name);
|
|
216
|
+
},
|
|
217
|
+
variant: "ghost",
|
|
218
|
+
size: "sm",
|
|
219
|
+
title: "Reset",
|
|
220
|
+
children: /* @__PURE__ */ jsx(ResetIcon, {})
|
|
221
|
+
}
|
|
222
|
+
)
|
|
223
|
+
] })
|
|
224
|
+
] }) }, originalSlot.id)) })
|
|
225
|
+
] }) : /* @__PURE__ */ jsx("p", { children: "No slots available" });
|
|
226
|
+
}
|
|
227
|
+
export {
|
|
228
|
+
SlotsTable
|
|
229
|
+
};
|
|
230
|
+
//# sourceMappingURL=slotsTable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"slotsTable.js","sources":["../../src/components/slotsTable.tsx"],"sourcesContent":["import { Fragment, type ReactElement, useEffect, useMemo, useState } from 'react';\nimport type { AdheseSlot } from '@adhese/sdk';\nimport { type UnwrapRef, generateName, watch } from '@adhese/sdk-shared';\nimport { ResetIcon } from '@radix-ui/react-icons';\nimport { cn } from '../utils';\nimport { useAdheseContext } from '../AdheseContext';\nimport { useModifiedSlots } from '../modifiedSlots.store';\nimport type { DevtoolsSlotPluginOptions } from '../devtools.composables';\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table';\nimport { Badge } from './badge';\nimport { Button, buttonVariants } from './button';\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from './sheet';\nimport { EditSlot } from './editSlot';\n\nconst slotIndexBadgeClasses = [\n 'bg-blue-500 hover:bg-blue-500',\n 'bg-amber-500 hover:bg-amber-500',\n 'bg-green-500 hover:bg-green-500',\n 'bg-red-500 hover:bg-red-500',\n 'bg-purple-500 hover:bg-purple-500',\n 'bg-cyan-500 hover:bg-cyan-500',\n 'bg-pink-500 hover:bg-pink-500',\n] as const;\n\nconst renderStatusMap = {\n initializing: 'Initializing',\n initialized: 'Initialized',\n loading: 'Loading',\n loaded: 'Loaded',\n rendering: 'Rendering',\n rendered: 'Rendered',\n empty: 'Empty',\n error: 'Error',\n} as const satisfies Record<UnwrapRef<AdheseSlot['status']>, string>;\n\n// eslint-disable-next-line ts/naming-convention\nexport function SlotsTable(): ReactElement {\n const [slots, setSlots] = useState<ReadonlyArray<AdheseSlot>>([]);\n\n const adheseContext = useAdheseContext();\n\n useEffect(() => {\n if (!adheseContext)\n return;\n\n const disposeWatcher = watch(() => adheseContext.slots, (newSlots) => {\n setSlots(Array.from(newSlots.values()));\n }, { immediate: true, deep: true });\n\n return (): void => {\n disposeWatcher();\n };\n }, [adheseContext]);\n const modifiedSlots = useModifiedSlots();\n\n const formattedSlots = useMemo(() => slots\n .filter(slot => !(slot.pluginOptions?.devtools as DevtoolsSlotPluginOptions)?.hijackedSlot).map((slot) => {\n const hijackedSlotOptions = modifiedSlots.slots.get(slot.name);\n const hijackedSlot = (adheseContext && hijackedSlotOptions) && adheseContext.get?.(generateName(adheseContext.location, hijackedSlotOptions.format, hijackedSlotOptions.slot));\n\n return ({\n ...(hijackedSlot ?? slot),\n parameters: Array.from((hijackedSlot ?? slot).parameters.entries()),\n hijackedSlot,\n originalSlot: slot,\n });\n })\n .toSorted((a, b) => {\n const offsetA = a.element?.getBoundingClientRect().top ?? 0;\n const offsetB = b.element?.getBoundingClientRect().top ?? 0;\n\n return offsetA - offsetB;\n }), [slots]);\n\n const slotParametersExist = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.parameters.length > 0), [formattedSlots]);\n const previewExist = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.data?.preview), [formattedSlots]);\n const slotCodeExists = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.slot), [formattedSlots]);\n\n const origins: ReadonlyArray<string> = useMemo(() => {\n const set = new Set<string>();\n\n for (const slot of formattedSlots) {\n const { data } = slot;\n\n if (data)\n set.add(data.origin);\n }\n\n return Array.from(set);\n }, [formattedSlots]);\n\n return (\n adheseContext && (formattedSlots.length > 0)\n ? (\n <Table>\n <TableHeader>\n <TableRow>\n <TableHead>Name</TableHead>\n <TableHead>Location</TableHead>\n {slotCodeExists && <TableHead>Slot</TableHead>}\n <TableHead>Format</TableHead>\n {origins.length > 1 && <TableHead>Origin</TableHead>}\n <TableHead>Render Status</TableHead>\n <TableHead>Campaign ID</TableHead>\n <TableHead>Booking ID</TableHead>\n <TableHead>Creative ID</TableHead>\n <TableHead>Traffic ID</TableHead>\n <TableHead>Creative type</TableHead>\n <TableHead>Impression tracked</TableHead>\n <TableHead>Viewability tracked</TableHead>\n {\n slotParametersExist && <TableHead>Parameters</TableHead>\n }\n {\n previewExist && <TableHead>Preview</TableHead>\n }\n <TableHead>Controls</TableHead>\n </TableRow>\n </TableHeader>\n <TableBody>\n {formattedSlots.map(({\n data,\n name,\n format,\n location,\n status,\n isViewabilityTracked,\n isImpressionTracked,\n element,\n parameters,\n slot,\n hijackedSlot,\n originalSlot,\n }, index) => (\n <Fragment key={originalSlot.id}>\n <TableRow id={name}>\n <TableCell className=\"font-medium\">\n <button\n onClick={() => {\n if (element) {\n element.scrollIntoView();\n element.style.outline = 'solid 5px red';\n\n setTimeout(() => {\n element.style.outline = '';\n }, 1000);\n }\n }}\n className=\"flex flex-col gap-1\"\n >\n <Badge className={cn(slotIndexBadgeClasses[index % slotIndexBadgeClasses.length], 'text-white')}>\n {name}\n </Badge>\n {hijackedSlot && <del className=\"text-xs text-muted-foreground\">{originalSlot.name}</del>}\n </button>\n </TableCell>\n <TableCell>{location}</TableCell>\n {slotCodeExists && <TableCell>{slot ?? ''}</TableCell>}\n <TableCell>\n {!data?.adFormat || data?.adFormat === format\n ? format\n : (\n <>\n <del className=\"text-red-300 italic\">{format}</del>\n <ins className=\"no-underline text-green-700\">{data?.adFormat}</ins>\n </>\n )}\n </TableCell>\n {origins.length > 1 && (\n <TableCell>\n {data?.origin && <Badge className={cn(slotIndexBadgeClasses[origins.indexOf(data.origin) % slotIndexBadgeClasses.length], 'text-white')}>{data.origin.toLowerCase()}</Badge>}\n </TableCell>\n )}\n <TableCell>\n <Badge variant=\"outline\" className={cn(status === 'error' ? 'bg-red-500 text-red-50' : '')}>\n {renderStatusMap[status]}\n </Badge>\n </TableCell>\n <TableCell>\n {data?.orderId && data?.orderId !== '0'\n ? (\n <a\n href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/editCampaign/${data.orderId}`}\n target=\"_blank\"\n referrerPolicy=\"no-referrer\"\n className={cn(buttonVariants({\n variant: 'ghost',\n size: 'sm',\n }))}\n >\n {data.orderId}\n </a>\n )\n : '-'}\n </TableCell>\n <TableCell>\n {data?.adspaceId && data?.adspaceId !== '0'\n ? (\n <a\n href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/bookingDetail/${data.adspaceId}/${data.orderId}`}\n target=\"_blank\"\n referrerPolicy=\"no-referrer\"\n className={cn(buttonVariants({\n variant: 'ghost',\n size: 'sm',\n }))}\n >\n {data.adspaceId}\n </a>\n )\n : '-'}\n </TableCell>\n <TableCell>\n {data?.libId && data?.orderId !== '0'\n ? (\n <a\n href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/creativeDetail/${data.libId}/${data.orderId}`}\n target=\"_blank\"\n referrerPolicy=\"no-referrer\"\n className={cn(buttonVariants({\n variant: 'ghost',\n size: 'sm',\n }))}\n >\n {data.libId}\n </a>\n )\n : '-'}\n </TableCell>\n <TableCell>{data?.id ?? '-'}</TableCell>\n <TableCell>{data?.ext ? <Badge variant=\"outline\">{data.ext}</Badge> : '-'}</TableCell>\n <TableCell>\n {isImpressionTracked\n ? <Badge className=\"bg-green-100 text-green-900 hover:bg-green-100\">Yes</Badge>\n : <Badge variant=\"secondary\">No</Badge>}\n </TableCell>\n <TableCell>\n {isViewabilityTracked\n ? <Badge className=\"bg-green-100 text-green-900 hover:bg-green-100\">Yes</Badge>\n : <Badge variant=\"secondary\">No</Badge>}\n </TableCell>\n {\n slotParametersExist && (\n <TableCell>\n {\n parameters.length > 0 && (\n <Sheet>\n <SheetTrigger className={buttonVariants({\n variant: 'secondary',\n size: 'sm',\n })}\n >\n Show\n </SheetTrigger>\n <SheetContent className=\"bg-white flex flex-col gap-4\">\n <SheetHeader>\n <SheetTitle>\n Parameters\n </SheetTitle>\n </SheetHeader>\n <Table>\n <TableHeader>\n <TableRow>\n <TableHead>Key</TableHead>\n <TableHead>Value</TableHead>\n </TableRow>\n </TableHeader>\n <TableBody>\n {parameters.map(([parameterName, value]) => (\n <TableRow key={parameterName}>\n <TableCell>\n <Badge variant=\"outline\">{parameterName}</Badge>\n </TableCell>\n <TableCell>\n {\n Array.isArray(value)\n ? (\n <ul className=\"flex gap-1\">\n {value.map((item, paramIndex) => (\n <li key={paramIndex}>\n <Badge variant=\"outline\">{item}</Badge>\n </li>\n ))}\n </ul>\n )\n : <Badge variant=\"outline\">{value}</Badge>\n }\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </SheetContent>\n </Sheet>\n )\n }\n </TableCell>\n )\n }\n {previewExist && (\n <TableCell>\n {data?.preview\n && (\n <Badge className=\"bg-amber-400 text-amber-950 hover:bg-amber-400\">\n PREVIEW\n </Badge>\n )}\n </TableCell>\n )}\n <TableCell className=\"flex gap-1\">\n <EditSlot id={originalSlot.id} />\n {modifiedSlots.slots.has(originalSlot.name) && (\n <Button\n onClick={\n () => {\n modifiedSlots.remove(originalSlot.name);\n }\n }\n variant=\"ghost\"\n size=\"sm\"\n title=\"Reset\"\n >\n <ResetIcon />\n </Button>\n )}\n </TableCell>\n </TableRow>\n </Fragment>\n ))}\n </TableBody>\n </Table>\n )\n : <p>No slots available</p>\n );\n}\n"],"names":["Fragment"],"mappings":"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"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as SwitchPrimitives from "@radix-ui/react-switch";
|
|
3
|
+
import { forwardRef } from "react";
|
|
4
|
+
import { cn } from "../utils.js";
|
|
5
|
+
const Switch = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
6
|
+
SwitchPrimitives.Root,
|
|
7
|
+
{
|
|
8
|
+
className: cn(
|
|
9
|
+
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
|
|
10
|
+
className
|
|
11
|
+
),
|
|
12
|
+
...props,
|
|
13
|
+
ref,
|
|
14
|
+
children: /* @__PURE__ */ jsx(
|
|
15
|
+
SwitchPrimitives.Thumb,
|
|
16
|
+
{
|
|
17
|
+
className: cn(
|
|
18
|
+
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
|
|
19
|
+
)
|
|
20
|
+
}
|
|
21
|
+
)
|
|
22
|
+
}
|
|
23
|
+
));
|
|
24
|
+
Switch.displayName = SwitchPrimitives.Root.displayName;
|
|
25
|
+
export {
|
|
26
|
+
Switch
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=switch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"switch.js","sources":["../../src/components/switch.tsx"],"sourcesContent":["// eslint-disable-next-line ts/naming-convention\nimport * as SwitchPrimitives from '@radix-ui/react-switch';\n\nimport { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react';\nimport { cn } from '../utils';\n\n// eslint-disable-next-line ts/naming-convention\nconst Switch = forwardRef<\n ElementRef<typeof SwitchPrimitives.Root>,\n ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ className, ...props }, ref) => (\n <SwitchPrimitives.Root\n className={cn(\n 'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n className,\n )}\n {...props}\n ref={ref}\n >\n <SwitchPrimitives.Thumb\n className={cn(\n 'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',\n )}\n />\n </SwitchPrimitives.Root>\n));\nSwitch.displayName = SwitchPrimitives.Root.displayName;\n\nexport { Switch };\n"],"names":[],"mappings":";;;;AAOM,MAAA,SAAS,WAGb,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,iBAAiB;AAAA,EAAjB;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IACJ;AAAA,IAEA,UAAA;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AACF,CACD;AACD,OAAO,cAAc,iBAAiB,KAAK;"}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import { cn } from "../utils.js";
|
|
4
|
+
const Table = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
|
|
5
|
+
"table",
|
|
6
|
+
{
|
|
7
|
+
ref,
|
|
8
|
+
className: cn("w-full caption-bottom text-sm", className),
|
|
9
|
+
...props
|
|
10
|
+
}
|
|
11
|
+
) }));
|
|
12
|
+
Table.displayName = "Table";
|
|
13
|
+
const TableHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
|
|
14
|
+
TableHeader.displayName = "TableHeader";
|
|
15
|
+
const TableBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
16
|
+
"tbody",
|
|
17
|
+
{
|
|
18
|
+
ref,
|
|
19
|
+
className: cn("[&_tr:last-child]:border-0", className),
|
|
20
|
+
...props
|
|
21
|
+
}
|
|
22
|
+
));
|
|
23
|
+
TableBody.displayName = "TableBody";
|
|
24
|
+
const TableFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
25
|
+
"tfoot",
|
|
26
|
+
{
|
|
27
|
+
ref,
|
|
28
|
+
className: cn(
|
|
29
|
+
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
|
30
|
+
className
|
|
31
|
+
),
|
|
32
|
+
...props
|
|
33
|
+
}
|
|
34
|
+
));
|
|
35
|
+
TableFooter.displayName = "TableFooter";
|
|
36
|
+
const TableRow = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
37
|
+
"tr",
|
|
38
|
+
{
|
|
39
|
+
ref,
|
|
40
|
+
className: cn(
|
|
41
|
+
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
|
42
|
+
className
|
|
43
|
+
),
|
|
44
|
+
...props
|
|
45
|
+
}
|
|
46
|
+
));
|
|
47
|
+
TableRow.displayName = "TableRow";
|
|
48
|
+
const TableHead = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
49
|
+
"th",
|
|
50
|
+
{
|
|
51
|
+
ref,
|
|
52
|
+
className: cn(
|
|
53
|
+
"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
|
54
|
+
className
|
|
55
|
+
),
|
|
56
|
+
...props
|
|
57
|
+
}
|
|
58
|
+
));
|
|
59
|
+
TableHead.displayName = "TableHead";
|
|
60
|
+
const TableCell = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
61
|
+
"td",
|
|
62
|
+
{
|
|
63
|
+
ref,
|
|
64
|
+
className: cn(
|
|
65
|
+
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
|
66
|
+
className
|
|
67
|
+
),
|
|
68
|
+
...props
|
|
69
|
+
}
|
|
70
|
+
));
|
|
71
|
+
TableCell.displayName = "TableCell";
|
|
72
|
+
const TableCaption = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
73
|
+
"caption",
|
|
74
|
+
{
|
|
75
|
+
ref,
|
|
76
|
+
className: cn("mt-4 text-sm text-muted-foreground", className),
|
|
77
|
+
...props
|
|
78
|
+
}
|
|
79
|
+
));
|
|
80
|
+
TableCaption.displayName = "TableCaption";
|
|
81
|
+
export {
|
|
82
|
+
Table,
|
|
83
|
+
TableBody,
|
|
84
|
+
TableCaption,
|
|
85
|
+
TableCell,
|
|
86
|
+
TableFooter,
|
|
87
|
+
TableHead,
|
|
88
|
+
TableHeader,
|
|
89
|
+
TableRow
|
|
90
|
+
};
|
|
91
|
+
//# sourceMappingURL=table.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table.js","sources":["../../src/components/table.tsx"],"sourcesContent":["/* eslint-disable ts/naming-convention */\nimport { type HTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes, forwardRef } from 'react';\nimport { cn } from '../utils';\n\nconst Table = forwardRef<\n HTMLTableElement,\n HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n <div className=\"relative w-full overflow-auto\">\n <table\n ref={ref}\n className={cn('w-full caption-bottom text-sm', className)}\n {...props}\n />\n </div>\n));\nTable.displayName = 'Table';\n\nconst TableHeader = forwardRef<\n HTMLTableSectionElement,\n HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = forwardRef<\n HTMLTableSectionElement,\n HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tbody\n ref={ref}\n className={cn('[&_tr:last-child]:border-0', className)}\n {...props}\n />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = forwardRef<\n HTMLTableSectionElement,\n HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tfoot\n ref={ref}\n className={cn(\n 'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',\n className,\n )}\n {...props}\n />\n));\nTableFooter.displayName = 'TableFooter';\n\nconst TableRow = forwardRef<\n HTMLTableRowElement,\n HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n <tr\n ref={ref}\n className={cn(\n 'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',\n className,\n )}\n {...props}\n />\n));\nTableRow.displayName = 'TableRow';\n\nconst TableHead = forwardRef<\n HTMLTableCellElement,\n ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n <th\n ref={ref}\n className={cn(\n 'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n className,\n )}\n {...props}\n />\n));\nTableHead.displayName = 'TableHead';\n\nconst TableCell = forwardRef<\n HTMLTableCellElement,\n TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n <td\n ref={ref}\n className={cn(\n 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n className,\n )}\n {...props}\n />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = forwardRef<\n HTMLTableCaptionElement,\n HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n <caption\n ref={ref}\n className={cn('mt-4 text-sm text-muted-foreground', className)}\n {...props}\n />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n};\n"],"names":[],"mappings":";;;AAIA,MAAM,QAAQ,WAGZ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,oBAAC,OAAI,EAAA,WAAU,iCACb,UAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,iCAAiC,SAAS;AAAA,IACvD,GAAG;AAAA,EAAA;AACN,EAAA,CACF,CACD;AACD,MAAM,cAAc;AAEpB,MAAM,cAAc,WAGlB,CAAC,EAAE,WAAW,GAAG,MAAS,GAAA,4BACzB,SAAM,EAAA,KAAU,WAAW,GAAG,mBAAmB,SAAS,GAAI,GAAG,OAAO,CAC1E;AACD,YAAY,cAAc;AAEpB,MAAA,YAAY,WAGhB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,8BAA8B,SAAS;AAAA,IACpD,GAAG;AAAA,EAAA;AACN,CACD;AACD,UAAU,cAAc;AAElB,MAAA,cAAc,WAGlB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN,CACD;AACD,YAAY,cAAc;AAEpB,MAAA,WAAW,WAGf,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN,CACD;AACD,SAAS,cAAc;AAEjB,MAAA,YAAY,WAGhB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN,CACD;AACD,UAAU,cAAc;AAElB,MAAA,YAAY,WAGhB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN,CACD;AACD,UAAU,cAAc;AAElB,MAAA,eAAe,WAGnB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,sCAAsC,SAAS;AAAA,IAC5D,GAAG;AAAA,EAAA;AACN,CACD;AACD,aAAa,cAAc;"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
3
|
+
import { forwardRef } from "react";
|
|
4
|
+
import { cn } from "../utils.js";
|
|
5
|
+
const Tabs = TabsPrimitive.Root;
|
|
6
|
+
const TabsList = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
7
|
+
TabsPrimitive.List,
|
|
8
|
+
{
|
|
9
|
+
ref,
|
|
10
|
+
className: cn(
|
|
11
|
+
"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
|
|
12
|
+
className
|
|
13
|
+
),
|
|
14
|
+
...props
|
|
15
|
+
}
|
|
16
|
+
));
|
|
17
|
+
TabsList.displayName = TabsPrimitive.List.displayName;
|
|
18
|
+
const TabsTrigger = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
19
|
+
TabsPrimitive.Trigger,
|
|
20
|
+
{
|
|
21
|
+
ref,
|
|
22
|
+
className: cn(
|
|
23
|
+
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
|
|
24
|
+
className
|
|
25
|
+
),
|
|
26
|
+
...props
|
|
27
|
+
}
|
|
28
|
+
));
|
|
29
|
+
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
30
|
+
const TabsContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
31
|
+
TabsPrimitive.Content,
|
|
32
|
+
{
|
|
33
|
+
ref,
|
|
34
|
+
className: cn(
|
|
35
|
+
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
36
|
+
className
|
|
37
|
+
),
|
|
38
|
+
...props
|
|
39
|
+
}
|
|
40
|
+
));
|
|
41
|
+
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
|
42
|
+
export {
|
|
43
|
+
Tabs,
|
|
44
|
+
TabsContent,
|
|
45
|
+
TabsList,
|
|
46
|
+
TabsTrigger
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=tabs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs.js","sources":["../../src/components/tabs.tsx"],"sourcesContent":["/* eslint-disable ts/naming-convention */\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react';\nimport { cn } from '../utils';\n\nconst Tabs = TabsPrimitive.Root;\n\nconst TabsList = forwardRef<\n ElementRef<typeof TabsPrimitive.List>,\n ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n 'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',\n className,\n )}\n {...props}\n />\n));\nTabsList.displayName = TabsPrimitive.List.displayName;\n\nconst TabsTrigger = forwardRef<\n ElementRef<typeof TabsPrimitive.Trigger>,\n ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',\n className,\n )}\n {...props}\n />\n));\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\nconst TabsContent = forwardRef<\n ElementRef<typeof TabsPrimitive.Content>,\n ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Content\n ref={ref}\n className={cn(\n 'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n className,\n )}\n {...props}\n />\n));\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n"],"names":[],"mappings":";;;;AAMA,MAAM,OAAO,cAAc;AAErB,MAAA,WAAW,WAGf,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN,CACD;AACD,SAAS,cAAc,cAAc,KAAK;AAEpC,MAAA,cAAc,WAGlB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN,CACD;AACD,YAAY,cAAc,cAAc,QAAQ;AAE1C,MAAA,cAAc,WAGlB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN,CACD;AACD,YAAY,cAAc,cAAc,QAAQ;"}
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import { watch, ref, computed, omit } from "@adhese/sdk-shared";
|
|
2
|
+
function useDevtoolsUi(context, { onInit, onDispose }) {
|
|
3
|
+
const wrapperElement = document.createElement("div");
|
|
4
|
+
let unmount;
|
|
5
|
+
async function initDevtools() {
|
|
6
|
+
const main = await import("./main.js");
|
|
7
|
+
if (!unmount) {
|
|
8
|
+
document.body.appendChild(wrapperElement);
|
|
9
|
+
unmount = main.createAdheseDevtools(wrapperElement, context);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
onInit(() => {
|
|
13
|
+
watch(() => [context.debug, context.isDisposed], async ([debug, isDisposed]) => {
|
|
14
|
+
if (debug && !isDisposed) {
|
|
15
|
+
await initDevtools();
|
|
16
|
+
if (context.isDisposed)
|
|
17
|
+
dispose();
|
|
18
|
+
} else {
|
|
19
|
+
dispose();
|
|
20
|
+
}
|
|
21
|
+
}, {
|
|
22
|
+
immediate: true
|
|
23
|
+
});
|
|
24
|
+
});
|
|
25
|
+
function dispose() {
|
|
26
|
+
unmount == null ? void 0 : unmount();
|
|
27
|
+
unmount = void 0;
|
|
28
|
+
if (wrapperElement.parentElement)
|
|
29
|
+
wrapperElement.outerHTML = "";
|
|
30
|
+
}
|
|
31
|
+
onDispose(dispose);
|
|
32
|
+
}
|
|
33
|
+
function useModifiedSlotsHijack(context, { onSlotCreate }, logger) {
|
|
34
|
+
async function initStore() {
|
|
35
|
+
const { modifiedSlotsStore: store } = await import("./modifiedSlots.store.js");
|
|
36
|
+
return store;
|
|
37
|
+
}
|
|
38
|
+
onSlotCreate(
|
|
39
|
+
(slot) => ({
|
|
40
|
+
...slot,
|
|
41
|
+
setup(slotContext, slotHooks) {
|
|
42
|
+
var _a;
|
|
43
|
+
(_a = slot.setup) == null ? void 0 : _a.call(slot, slotContext, slotHooks);
|
|
44
|
+
let store;
|
|
45
|
+
const state = ref(null);
|
|
46
|
+
const hijackSlot = ref(null);
|
|
47
|
+
const hijackSlotOptions = computed(() => {
|
|
48
|
+
var _a2, _b;
|
|
49
|
+
return (_b = state.value ?? (store == null ? void 0 : store.getState())) == null ? void 0 : _b.slots.get(((_a2 = slotContext.value) == null ? void 0 : _a2.name) ?? "");
|
|
50
|
+
});
|
|
51
|
+
let disposeSub;
|
|
52
|
+
async function createHijack() {
|
|
53
|
+
var _a2, _b, _c, _d, _e;
|
|
54
|
+
if (context.debug && slotContext.value && slotContext.value.element) {
|
|
55
|
+
(_a2 = hijackSlot.value) == null ? void 0 : _a2.dispose();
|
|
56
|
+
if (hijackSlotOptions.value) {
|
|
57
|
+
slotContext.value.renderMode = "none";
|
|
58
|
+
hijackSlot.value = ((_b = context.addSlot) == null ? void 0 : _b.call(context, {
|
|
59
|
+
...omit(slotContext.value.options, ["setup"]),
|
|
60
|
+
...hijackSlotOptions.value,
|
|
61
|
+
containingElement: slotContext.value.element,
|
|
62
|
+
lazyLoading: false,
|
|
63
|
+
lazyLoadingOptions: void 0,
|
|
64
|
+
pluginOptions: {
|
|
65
|
+
devtools: {
|
|
66
|
+
hijackedSlot: slotContext.value.name
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
})) ?? null;
|
|
70
|
+
logger.value.debug(`Hijacking slot ${slotContext.value.name} with new slot ${(_c = hijackSlot.value) == null ? void 0 : _c.name}`);
|
|
71
|
+
await ((_d = hijackSlot.value) == null ? void 0 : _d.render());
|
|
72
|
+
} else {
|
|
73
|
+
slotContext.value.renderMode = slotContext.value.options.renderMode ?? "iframe";
|
|
74
|
+
(_e = hijackSlot.value) == null ? void 0 : _e.dispose();
|
|
75
|
+
hijackSlot.value = null;
|
|
76
|
+
await slotContext.value.render();
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
slotHooks.onInit(async () => {
|
|
81
|
+
if (context.debug && slotContext.value) {
|
|
82
|
+
store = await initStore();
|
|
83
|
+
disposeSub = store.subscribe((newState) => {
|
|
84
|
+
state.value = newState;
|
|
85
|
+
});
|
|
86
|
+
state.value = store.getState();
|
|
87
|
+
await createHijack();
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
slotHooks.onRender(async () => {
|
|
91
|
+
if (hijackSlot.value) {
|
|
92
|
+
await hijackSlot.value.render();
|
|
93
|
+
}
|
|
94
|
+
});
|
|
95
|
+
watch(state, async () => {
|
|
96
|
+
await createHijack();
|
|
97
|
+
}, { immediate: true });
|
|
98
|
+
watch(() => context.debug, async (debug) => {
|
|
99
|
+
var _a2;
|
|
100
|
+
if (!debug)
|
|
101
|
+
(_a2 = hijackSlot.value) == null ? void 0 : _a2.dispose();
|
|
102
|
+
});
|
|
103
|
+
slotHooks.onDispose(() => {
|
|
104
|
+
var _a2;
|
|
105
|
+
disposeSub == null ? void 0 : disposeSub();
|
|
106
|
+
(_a2 = hijackSlot.value) == null ? void 0 : _a2.dispose();
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
})
|
|
110
|
+
);
|
|
111
|
+
}
|
|
112
|
+
export {
|
|
113
|
+
useDevtoolsUi,
|
|
114
|
+
useModifiedSlotsHijack
|
|
115
|
+
};
|
|
116
|
+
//# sourceMappingURL=devtools.composables.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"devtools.composables.js","sources":["../src/devtools.composables.ts"],"sourcesContent":["import type { AdheseContext, AdhesePlugin, AdheseSlot } from '@adhese/sdk';\nimport { computed, omit, ref, type useLogger, watch } from '@adhese/sdk-shared';\nimport type { ModifiedSlotsStore, modifiedSlotsStore } from './modifiedSlots.store';\n\nexport type DevtoolsSlotPluginOptions = {\n hijackedSlot?: string;\n};\n\nexport function useDevtoolsUi(context: AdheseContext, { onInit, onDispose }: Parameters<AdhesePlugin>[1]['hooks']): void {\n const wrapperElement = document.createElement('div');\n let unmount: (() => void) | undefined;\n\n async function initDevtools(): Promise<void> {\n const main = await import('./main');\n\n if (!unmount) {\n document.body.appendChild(wrapperElement);\n\n unmount = main.createAdheseDevtools(wrapperElement, context);\n }\n }\n\n onInit(() => {\n watch(() => [context.debug, context.isDisposed], async ([debug, isDisposed]) => {\n if (debug && !isDisposed) {\n await initDevtools();\n\n if (context.isDisposed)\n dispose();\n }\n else {\n dispose();\n }\n }, {\n immediate: true,\n });\n });\n\n function dispose(): void {\n unmount?.();\n unmount = undefined;\n if (wrapperElement.parentElement)\n wrapperElement.outerHTML = '';\n }\n\n onDispose(dispose);\n}\n\nexport function useModifiedSlotsHijack(\n context: AdheseContext,\n { onSlotCreate }: Parameters<AdhesePlugin>[1]['hooks'],\n logger: ReturnType<typeof useLogger>,\n): void {\n async function initStore(): Promise<typeof modifiedSlotsStore> {\n const { modifiedSlotsStore: store } = await import('./modifiedSlots.store');\n\n return store;\n }\n\n onSlotCreate(slot =>\n ({\n ...slot,\n setup(slotContext, slotHooks): void {\n slot.setup?.(slotContext, slotHooks);\n\n let store: typeof modifiedSlotsStore | undefined;\n const state = ref<ModifiedSlotsStore | null>(null);\n const hijackSlot = ref<AdheseSlot | null>(null);\n\n const hijackSlotOptions = computed(() => (state.value ?? store?.getState())?.slots.get(slotContext.value?.name ?? ''));\n\n let disposeSub: (() => void) | undefined;\n\n async function createHijack(): Promise<void> {\n if (context.debug && slotContext.value && slotContext.value.element) {\n hijackSlot.value?.dispose();\n\n if (hijackSlotOptions.value) {\n slotContext.value.renderMode = 'none';\n\n hijackSlot.value = context.addSlot?.({\n ...omit(slotContext.value.options, ['setup']),\n ...hijackSlotOptions.value,\n containingElement: slotContext.value.element,\n lazyLoading: false,\n lazyLoadingOptions: undefined,\n pluginOptions: {\n devtools: {\n hijackedSlot: slotContext.value.name,\n } satisfies DevtoolsSlotPluginOptions,\n },\n }) ?? null;\n\n logger.value.debug(`Hijacking slot ${slotContext.value.name} with new slot ${hijackSlot.value?.name}`);\n\n await hijackSlot.value?.render();\n }\n else {\n slotContext.value.renderMode = slotContext.value.options.renderMode ?? 'iframe';\n\n hijackSlot.value?.dispose();\n hijackSlot.value = null;\n\n await slotContext.value.render();\n }\n }\n }\n\n slotHooks.onInit(async () => {\n if (context.debug && slotContext.value) {\n store = await initStore();\n\n disposeSub = store.subscribe((newState) => {\n state.value = newState;\n });\n\n state.value = store.getState();\n\n await createHijack();\n }\n });\n\n slotHooks.onRender(async () => {\n if (hijackSlot.value) {\n await hijackSlot.value.render();\n }\n });\n\n watch(state, async () => {\n await createHijack();\n }, { immediate: true });\n\n watch(() => context.debug, async (debug) => {\n if (!debug)\n hijackSlot.value?.dispose();\n });\n\n slotHooks.onDispose(() => {\n disposeSub?.();\n hijackSlot.value?.dispose();\n });\n },\n }),\n );\n}\n"],"names":["_a"],"mappings":"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"}
|
package/dist/main.js
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createRoot } from "react-dom/client";
|
|
3
|
+
import { StrictMode } from "react";
|
|
4
|
+
import { Devtools } from "./Devtools.js";
|
|
5
|
+
import { AdheseProvider } from "./AdheseContext.js";
|
|
6
|
+
function createAdheseDevtools(element, context) {
|
|
7
|
+
const root = createRoot(element);
|
|
8
|
+
root.render(/* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(AdheseProvider, { adhese: context, children: /* @__PURE__ */ jsx(Devtools, {}) }) }));
|
|
9
|
+
return () => {
|
|
10
|
+
root.unmount();
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
export {
|
|
14
|
+
createAdheseDevtools
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=main.js.map
|
package/dist/main.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/main.tsx"],"sourcesContent":["import { createRoot } from 'react-dom/client';\nimport type { AdheseContext } from '@adhese/sdk';\nimport { StrictMode } from 'react';\nimport { Devtools } from './Devtools';\nimport { AdheseProvider } from './AdheseContext';\n\nexport function createAdheseDevtools(element: HTMLElement, context: AdheseContext): () => void {\n const root = createRoot(element);\n\n root.render((\n <StrictMode>\n <AdheseProvider adhese={context}>\n <Devtools />\n </AdheseProvider>\n </StrictMode>\n ));\n\n return () => {\n root.unmount();\n };\n}\n"],"names":[],"mappings":";;;;;AAMgB,SAAA,qBAAqB,SAAsB,SAAoC;AACvF,QAAA,OAAO,WAAW,OAAO;AAE1B,OAAA,OACF,oBAAA,YAAA,EACC,UAAC,oBAAA,gBAAA,EAAe,QAAQ,SACtB,UAAC,oBAAA,UAAA,CAAA,CAAS,EACZ,CAAA,EACF,CAAA,CACD;AAED,SAAO,MAAM;AACX,SAAK,QAAQ;AAAA,EAAA;AAEjB;"}
|