@bbearai/react 0.1.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/README.md +178 -0
- package/dist/index.d.mts +71 -0
- package/dist/index.d.ts +71 -0
- package/dist/index.js +885 -0
- package/dist/index.mjs +854 -0
- package/package.json +56 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,885 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/index.tsx
|
|
21
|
+
var index_exports = {};
|
|
22
|
+
__export(index_exports, {
|
|
23
|
+
BugBearErrorBoundary: () => BugBearErrorBoundary,
|
|
24
|
+
BugBearPanel: () => BugBearPanel,
|
|
25
|
+
BugBearProvider: () => BugBearProvider,
|
|
26
|
+
captureError: () => import_core3.captureError,
|
|
27
|
+
contextCapture: () => import_core3.contextCapture,
|
|
28
|
+
useBugBear: () => useBugBear,
|
|
29
|
+
useErrorContext: () => useErrorContext
|
|
30
|
+
});
|
|
31
|
+
module.exports = __toCommonJS(index_exports);
|
|
32
|
+
|
|
33
|
+
// src/BugBearProvider.tsx
|
|
34
|
+
var import_react = require("react");
|
|
35
|
+
var import_core = require("@bbearai/core");
|
|
36
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
|
+
var BugBearContext = (0, import_react.createContext)({
|
|
38
|
+
client: null,
|
|
39
|
+
isTester: false,
|
|
40
|
+
isQAEnabled: false,
|
|
41
|
+
shouldShowWidget: false,
|
|
42
|
+
testerInfo: null,
|
|
43
|
+
assignments: [],
|
|
44
|
+
currentAssignment: null,
|
|
45
|
+
refreshAssignments: async () => {
|
|
46
|
+
},
|
|
47
|
+
isLoading: true,
|
|
48
|
+
onNavigate: void 0
|
|
49
|
+
});
|
|
50
|
+
function useBugBear() {
|
|
51
|
+
return (0, import_react.useContext)(BugBearContext);
|
|
52
|
+
}
|
|
53
|
+
function BugBearProvider({ config, children }) {
|
|
54
|
+
const [client] = (0, import_react.useState)(() => (0, import_core.createBugBear)(config));
|
|
55
|
+
const [isTester, setIsTester] = (0, import_react.useState)(false);
|
|
56
|
+
const [isQAEnabled, setIsQAEnabled] = (0, import_react.useState)(false);
|
|
57
|
+
const [testerInfo, setTesterInfo] = (0, import_react.useState)(null);
|
|
58
|
+
const [assignments, setAssignments] = (0, import_react.useState)([]);
|
|
59
|
+
const [isLoading, setIsLoading] = (0, import_react.useState)(true);
|
|
60
|
+
const refreshAssignments = async () => {
|
|
61
|
+
const newAssignments = await client.getAssignedTests();
|
|
62
|
+
setAssignments(newAssignments);
|
|
63
|
+
};
|
|
64
|
+
(0, import_react.useEffect)(() => {
|
|
65
|
+
const init = async () => {
|
|
66
|
+
setIsLoading(true);
|
|
67
|
+
try {
|
|
68
|
+
const [qaEnabled, info] = await Promise.all([
|
|
69
|
+
client.isQAEnabled(),
|
|
70
|
+
client.getTesterInfo()
|
|
71
|
+
]);
|
|
72
|
+
console.log("BugBear: Init complete", { qaEnabled, testerInfo: info });
|
|
73
|
+
setIsQAEnabled(qaEnabled);
|
|
74
|
+
setTesterInfo(info);
|
|
75
|
+
setIsTester(!!info);
|
|
76
|
+
if (info && qaEnabled) {
|
|
77
|
+
await refreshAssignments();
|
|
78
|
+
}
|
|
79
|
+
} catch (err) {
|
|
80
|
+
console.error("BugBear: Init error", err);
|
|
81
|
+
} finally {
|
|
82
|
+
setIsLoading(false);
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
init();
|
|
86
|
+
}, [client]);
|
|
87
|
+
const currentAssignment = assignments.find(
|
|
88
|
+
(a) => a.status === "in_progress"
|
|
89
|
+
) || assignments[0] || null;
|
|
90
|
+
const shouldShowWidget = isQAEnabled && isTester;
|
|
91
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
92
|
+
BugBearContext.Provider,
|
|
93
|
+
{
|
|
94
|
+
value: {
|
|
95
|
+
client,
|
|
96
|
+
isTester,
|
|
97
|
+
isQAEnabled,
|
|
98
|
+
shouldShowWidget,
|
|
99
|
+
testerInfo,
|
|
100
|
+
assignments,
|
|
101
|
+
currentAssignment,
|
|
102
|
+
refreshAssignments,
|
|
103
|
+
isLoading,
|
|
104
|
+
onNavigate: config.onNavigate
|
|
105
|
+
},
|
|
106
|
+
children
|
|
107
|
+
}
|
|
108
|
+
);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// src/BugBearPanel.tsx
|
|
112
|
+
var import_react2 = require("react");
|
|
113
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
114
|
+
function BugBearIcon({ size = 24, className = "" }) {
|
|
115
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
116
|
+
"svg",
|
|
117
|
+
{
|
|
118
|
+
width: size,
|
|
119
|
+
height: size,
|
|
120
|
+
viewBox: "0 0 64 64",
|
|
121
|
+
fill: "none",
|
|
122
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
123
|
+
className,
|
|
124
|
+
children: [
|
|
125
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "32", cy: "32", r: "30", fill: "#1a1a2e", stroke: "#d4a852", strokeWidth: "3" }),
|
|
126
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ellipse", { cx: "18", cy: "18", rx: "8", ry: "7", fill: "#8B4513" }),
|
|
127
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ellipse", { cx: "18", cy: "18", rx: "5", ry: "4", fill: "#D2691E" }),
|
|
128
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ellipse", { cx: "46", cy: "18", rx: "8", ry: "7", fill: "#8B4513" }),
|
|
129
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ellipse", { cx: "46", cy: "18", rx: "5", ry: "4", fill: "#D2691E" }),
|
|
130
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ellipse", { cx: "32", cy: "34", rx: "20", ry: "18", fill: "#8B4513" }),
|
|
131
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ellipse", { cx: "32", cy: "40", rx: "12", ry: "10", fill: "#D2691E" }),
|
|
132
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ellipse", { cx: "32", cy: "38", rx: "4", ry: "3", fill: "#1a1a2e" }),
|
|
133
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "24", cy: "30", r: "4", fill: "#1a1a2e" }),
|
|
134
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "40", cy: "30", r: "4", fill: "#1a1a2e" }),
|
|
135
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "25", cy: "29", r: "1.5", fill: "white" }),
|
|
136
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "41", cy: "29", r: "1.5", fill: "white" }),
|
|
137
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "48", cy: "44", r: "8", fill: "none", stroke: "#d4a852", strokeWidth: "2.5" }),
|
|
138
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "54", y1: "50", x2: "58", y2: "54", stroke: "#d4a852", strokeWidth: "3", strokeLinecap: "round" }),
|
|
139
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M44 40 Q46 38, 48 40", stroke: "rgba(255,255,255,0.4)", strokeWidth: "1.5", fill: "none", strokeLinecap: "round" })
|
|
140
|
+
]
|
|
141
|
+
}
|
|
142
|
+
);
|
|
143
|
+
}
|
|
144
|
+
var templateInfo = {
|
|
145
|
+
steps: { name: "Steps", icon: "\u{1F4DD}", action: "Follow each step" },
|
|
146
|
+
checklist: { name: "Checklist", icon: "\u2705", action: "Pass/Fail each item" },
|
|
147
|
+
rubric: { name: "Rubric", icon: "\u{1F4CA}", action: "Rate each criterion" },
|
|
148
|
+
freeform: { name: "Freeform", icon: "\u{1F4AD}", action: "Provide observations" }
|
|
149
|
+
};
|
|
150
|
+
var STORAGE_KEY = "bugbear-panel-position";
|
|
151
|
+
var PANEL_WIDTH = 320;
|
|
152
|
+
var PANEL_HEIGHT_ESTIMATE = 500;
|
|
153
|
+
function getDefaultPosition(position) {
|
|
154
|
+
if (typeof window === "undefined") return { x: 0, y: 0 };
|
|
155
|
+
const padding = 16;
|
|
156
|
+
switch (position) {
|
|
157
|
+
case "bottom-left":
|
|
158
|
+
return { x: padding, y: window.innerHeight - PANEL_HEIGHT_ESTIMATE - padding };
|
|
159
|
+
case "top-right":
|
|
160
|
+
return { x: window.innerWidth - PANEL_WIDTH - padding, y: padding };
|
|
161
|
+
case "top-left":
|
|
162
|
+
return { x: padding, y: padding };
|
|
163
|
+
case "bottom-right":
|
|
164
|
+
default:
|
|
165
|
+
return { x: window.innerWidth - PANEL_WIDTH - padding, y: window.innerHeight - PANEL_HEIGHT_ESTIMATE - padding };
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
function clampPosition(pos) {
|
|
169
|
+
if (typeof window === "undefined") return pos;
|
|
170
|
+
const padding = 8;
|
|
171
|
+
return {
|
|
172
|
+
x: Math.max(padding, Math.min(pos.x, window.innerWidth - PANEL_WIDTH - padding)),
|
|
173
|
+
y: Math.max(padding, Math.min(pos.y, window.innerHeight - 100))
|
|
174
|
+
// Keep at least 100px visible
|
|
175
|
+
};
|
|
176
|
+
}
|
|
177
|
+
function BugBearPanel({
|
|
178
|
+
getAppContext,
|
|
179
|
+
position = "bottom-right",
|
|
180
|
+
defaultCollapsed = false,
|
|
181
|
+
draggable = true
|
|
182
|
+
}) {
|
|
183
|
+
const { client, shouldShowWidget, testerInfo, assignments, currentAssignment, refreshAssignments, isLoading, onNavigate } = useBugBear();
|
|
184
|
+
const [collapsed, setCollapsed] = (0, import_react2.useState)(defaultCollapsed);
|
|
185
|
+
const [activeTab, setActiveTab] = (0, import_react2.useState)("tests");
|
|
186
|
+
const [showSteps, setShowSteps] = (0, import_react2.useState)(false);
|
|
187
|
+
const [testView, setTestView] = (0, import_react2.useState)("detail");
|
|
188
|
+
const [selectedTestId, setSelectedTestId] = (0, import_react2.useState)(null);
|
|
189
|
+
const displayedAssignment = selectedTestId ? assignments.find((a) => a.id === selectedTestId) || currentAssignment : currentAssignment;
|
|
190
|
+
const [panelPosition, setPanelPosition] = (0, import_react2.useState)(null);
|
|
191
|
+
const [isDragging, setIsDragging] = (0, import_react2.useState)(false);
|
|
192
|
+
const dragStartRef = (0, import_react2.useRef)(null);
|
|
193
|
+
const panelRef = (0, import_react2.useRef)(null);
|
|
194
|
+
const [reportType, setReportType] = (0, import_react2.useState)("bug");
|
|
195
|
+
const [description, setDescription] = (0, import_react2.useState)("");
|
|
196
|
+
const [severity, setSeverity] = (0, import_react2.useState)("medium");
|
|
197
|
+
const [submitting, setSubmitting] = (0, import_react2.useState)(false);
|
|
198
|
+
const [submitted, setSubmitted] = (0, import_react2.useState)(false);
|
|
199
|
+
const [justPassed, setJustPassed] = (0, import_react2.useState)(false);
|
|
200
|
+
const [criteriaResults, setCriteriaResults] = (0, import_react2.useState)({});
|
|
201
|
+
(0, import_react2.useEffect)(() => {
|
|
202
|
+
if (typeof window === "undefined") return;
|
|
203
|
+
try {
|
|
204
|
+
const saved = localStorage.getItem(STORAGE_KEY);
|
|
205
|
+
if (saved) {
|
|
206
|
+
const parsed = JSON.parse(saved);
|
|
207
|
+
setPanelPosition(clampPosition(parsed));
|
|
208
|
+
} else {
|
|
209
|
+
setPanelPosition(getDefaultPosition(position));
|
|
210
|
+
}
|
|
211
|
+
} catch {
|
|
212
|
+
setPanelPosition(getDefaultPosition(position));
|
|
213
|
+
}
|
|
214
|
+
}, [position]);
|
|
215
|
+
(0, import_react2.useEffect)(() => {
|
|
216
|
+
if (panelPosition && typeof window !== "undefined") {
|
|
217
|
+
try {
|
|
218
|
+
localStorage.setItem(STORAGE_KEY, JSON.stringify(panelPosition));
|
|
219
|
+
} catch {
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
}, [panelPosition]);
|
|
223
|
+
(0, import_react2.useEffect)(() => {
|
|
224
|
+
if (typeof window === "undefined") return;
|
|
225
|
+
const handleResize = () => {
|
|
226
|
+
setPanelPosition((prev) => prev ? clampPosition(prev) : getDefaultPosition(position));
|
|
227
|
+
};
|
|
228
|
+
window.addEventListener("resize", handleResize);
|
|
229
|
+
return () => window.removeEventListener("resize", handleResize);
|
|
230
|
+
}, [position]);
|
|
231
|
+
(0, import_react2.useEffect)(() => {
|
|
232
|
+
setCriteriaResults({});
|
|
233
|
+
setShowSteps(false);
|
|
234
|
+
}, [displayedAssignment?.id]);
|
|
235
|
+
const handleMouseDown = (0, import_react2.useCallback)((e) => {
|
|
236
|
+
if (!draggable || !panelPosition) return;
|
|
237
|
+
const target = e.target;
|
|
238
|
+
if (!target.closest("[data-drag-handle]")) return;
|
|
239
|
+
e.preventDefault();
|
|
240
|
+
setIsDragging(true);
|
|
241
|
+
dragStartRef.current = {
|
|
242
|
+
mouseX: e.clientX,
|
|
243
|
+
mouseY: e.clientY,
|
|
244
|
+
panelX: panelPosition.x,
|
|
245
|
+
panelY: panelPosition.y
|
|
246
|
+
};
|
|
247
|
+
}, [draggable, panelPosition]);
|
|
248
|
+
(0, import_react2.useEffect)(() => {
|
|
249
|
+
if (!isDragging) return;
|
|
250
|
+
const handleMouseMove = (e) => {
|
|
251
|
+
if (!dragStartRef.current) return;
|
|
252
|
+
const deltaX = e.clientX - dragStartRef.current.mouseX;
|
|
253
|
+
const deltaY = e.clientY - dragStartRef.current.mouseY;
|
|
254
|
+
setPanelPosition(clampPosition({
|
|
255
|
+
x: dragStartRef.current.panelX + deltaX,
|
|
256
|
+
y: dragStartRef.current.panelY + deltaY
|
|
257
|
+
}));
|
|
258
|
+
};
|
|
259
|
+
const handleMouseUp = () => {
|
|
260
|
+
setIsDragging(false);
|
|
261
|
+
dragStartRef.current = null;
|
|
262
|
+
};
|
|
263
|
+
document.addEventListener("mousemove", handleMouseMove);
|
|
264
|
+
document.addEventListener("mouseup", handleMouseUp);
|
|
265
|
+
return () => {
|
|
266
|
+
document.removeEventListener("mousemove", handleMouseMove);
|
|
267
|
+
document.removeEventListener("mouseup", handleMouseUp);
|
|
268
|
+
};
|
|
269
|
+
}, [isDragging]);
|
|
270
|
+
const handleDoubleClick = (0, import_react2.useCallback)(() => {
|
|
271
|
+
if (!draggable) return;
|
|
272
|
+
setPanelPosition(getDefaultPosition(position));
|
|
273
|
+
try {
|
|
274
|
+
localStorage.removeItem(STORAGE_KEY);
|
|
275
|
+
} catch {
|
|
276
|
+
}
|
|
277
|
+
}, [draggable, position]);
|
|
278
|
+
if (isLoading || !shouldShowWidget) {
|
|
279
|
+
return null;
|
|
280
|
+
}
|
|
281
|
+
if (!panelPosition) {
|
|
282
|
+
return null;
|
|
283
|
+
}
|
|
284
|
+
const handlePass = async () => {
|
|
285
|
+
if (!client || !displayedAssignment) return;
|
|
286
|
+
setSubmitting(true);
|
|
287
|
+
await client.submitReport({
|
|
288
|
+
type: "test_pass",
|
|
289
|
+
description: `Test passed: ${displayedAssignment.testCase.title}`,
|
|
290
|
+
assignmentId: displayedAssignment.id,
|
|
291
|
+
testCaseId: displayedAssignment.testCase.id,
|
|
292
|
+
appContext: getAppContext?.() || { currentRoute: window.location.pathname }
|
|
293
|
+
});
|
|
294
|
+
await refreshAssignments();
|
|
295
|
+
setSubmitting(false);
|
|
296
|
+
setJustPassed(true);
|
|
297
|
+
setTimeout(() => {
|
|
298
|
+
setJustPassed(false);
|
|
299
|
+
setSelectedTestId(null);
|
|
300
|
+
setTestView("detail");
|
|
301
|
+
}, 1200);
|
|
302
|
+
};
|
|
303
|
+
const handleFail = async () => {
|
|
304
|
+
setActiveTab("report");
|
|
305
|
+
setReportType("test_fail");
|
|
306
|
+
};
|
|
307
|
+
const handleSubmitReport = async () => {
|
|
308
|
+
if (!client || !description.trim()) return;
|
|
309
|
+
setSubmitting(true);
|
|
310
|
+
const isTestFailure = reportType === "test_fail" && displayedAssignment;
|
|
311
|
+
await client.submitReport({
|
|
312
|
+
type: reportType,
|
|
313
|
+
description,
|
|
314
|
+
severity: reportType === "bug" || reportType === "test_fail" ? severity : void 0,
|
|
315
|
+
assignmentId: isTestFailure ? displayedAssignment.id : void 0,
|
|
316
|
+
testCaseId: isTestFailure ? displayedAssignment.testCase.id : void 0,
|
|
317
|
+
appContext: getAppContext?.() || { currentRoute: window.location.pathname }
|
|
318
|
+
});
|
|
319
|
+
setDescription("");
|
|
320
|
+
setSeverity("medium");
|
|
321
|
+
setSubmitted(true);
|
|
322
|
+
if (isTestFailure) {
|
|
323
|
+
await refreshAssignments();
|
|
324
|
+
}
|
|
325
|
+
setTimeout(() => {
|
|
326
|
+
setSubmitted(false);
|
|
327
|
+
setActiveTab("tests");
|
|
328
|
+
if (isTestFailure) {
|
|
329
|
+
setSelectedTestId(null);
|
|
330
|
+
setTestView("list");
|
|
331
|
+
}
|
|
332
|
+
}, 2e3);
|
|
333
|
+
setSubmitting(false);
|
|
334
|
+
};
|
|
335
|
+
const pendingCount = assignments.filter((a) => a.status === "pending").length;
|
|
336
|
+
const inProgressCount = assignments.filter((a) => a.status === "in_progress").length;
|
|
337
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
338
|
+
"div",
|
|
339
|
+
{
|
|
340
|
+
ref: panelRef,
|
|
341
|
+
className: "fixed font-sans",
|
|
342
|
+
style: {
|
|
343
|
+
zIndex: 2147483647,
|
|
344
|
+
// Max z-index to stay above all modals
|
|
345
|
+
left: panelPosition.x,
|
|
346
|
+
top: panelPosition.y,
|
|
347
|
+
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
348
|
+
cursor: isDragging ? "grabbing" : void 0,
|
|
349
|
+
userSelect: isDragging ? "none" : void 0
|
|
350
|
+
},
|
|
351
|
+
onMouseDown: handleMouseDown,
|
|
352
|
+
children: [
|
|
353
|
+
collapsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
354
|
+
"button",
|
|
355
|
+
{
|
|
356
|
+
onClick: () => setCollapsed(false),
|
|
357
|
+
"data-drag-handle": true,
|
|
358
|
+
onDoubleClick: handleDoubleClick,
|
|
359
|
+
className: "flex items-center gap-2 px-3 py-2 bg-purple-600 text-white rounded-full shadow-lg hover:bg-purple-700 transition-colors",
|
|
360
|
+
style: { cursor: draggable ? "grab" : "pointer" },
|
|
361
|
+
children: [
|
|
362
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BugBearIcon, { size: 24 }),
|
|
363
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-medium", children: "BugBear" }),
|
|
364
|
+
pendingCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "bg-white text-purple-600 text-xs font-bold px-1.5 py-0.5 rounded-full", children: pendingCount })
|
|
365
|
+
]
|
|
366
|
+
}
|
|
367
|
+
),
|
|
368
|
+
!collapsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "w-80 bg-white rounded-xl shadow-2xl border border-gray-200 overflow-hidden", children: [
|
|
369
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
370
|
+
"div",
|
|
371
|
+
{
|
|
372
|
+
"data-drag-handle": true,
|
|
373
|
+
onDoubleClick: handleDoubleClick,
|
|
374
|
+
className: "bg-purple-600 text-white px-4 py-3 flex items-center justify-between",
|
|
375
|
+
style: { cursor: draggable ? isDragging ? "grabbing" : "grab" : "default" },
|
|
376
|
+
children: [
|
|
377
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
378
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BugBearIcon, { size: 28 }),
|
|
379
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
|
|
380
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("h3", { className: "font-semibold text-sm flex items-center gap-2", children: [
|
|
381
|
+
"BugBear",
|
|
382
|
+
draggable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-purple-300 text-xs", title: "Drag to move, double-click to reset", children: "\u22EE\u22EE" })
|
|
383
|
+
] }),
|
|
384
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-purple-200 text-xs", children: testerInfo?.name })
|
|
385
|
+
] })
|
|
386
|
+
] }),
|
|
387
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
388
|
+
"button",
|
|
389
|
+
{
|
|
390
|
+
onClick: () => setCollapsed(true),
|
|
391
|
+
className: "p-1 hover:bg-purple-500 rounded",
|
|
392
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
|
|
393
|
+
}
|
|
394
|
+
)
|
|
395
|
+
]
|
|
396
|
+
}
|
|
397
|
+
),
|
|
398
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex border-b border-gray-200", children: [
|
|
399
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
400
|
+
"button",
|
|
401
|
+
{
|
|
402
|
+
onClick: () => setActiveTab("tests"),
|
|
403
|
+
className: `flex-1 px-4 py-2 text-sm font-medium transition-colors ${activeTab === "tests" ? "text-purple-600 border-b-2 border-purple-600" : "text-gray-500 hover:text-gray-700"}`,
|
|
404
|
+
children: [
|
|
405
|
+
"Tests ",
|
|
406
|
+
pendingCount > 0 && `(${pendingCount})`
|
|
407
|
+
]
|
|
408
|
+
}
|
|
409
|
+
),
|
|
410
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
411
|
+
"button",
|
|
412
|
+
{
|
|
413
|
+
onClick: () => setActiveTab("report"),
|
|
414
|
+
className: `flex-1 px-4 py-2 text-sm font-medium transition-colors ${activeTab === "report" ? "text-purple-600 border-b-2 border-purple-600" : "text-gray-500 hover:text-gray-700"}`,
|
|
415
|
+
children: "Report"
|
|
416
|
+
}
|
|
417
|
+
)
|
|
418
|
+
] }),
|
|
419
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "p-4 max-h-96 overflow-y-auto", children: [
|
|
420
|
+
activeTab === "tests" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: assignments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-center py-8", children: [
|
|
421
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-4xl", children: "\u2705" }),
|
|
422
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-gray-600 mt-2 font-medium", children: "All caught up!" }),
|
|
423
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-gray-400 text-sm", children: "No tests assigned" })
|
|
424
|
+
] }) : testView === "list" ? (
|
|
425
|
+
/* List View - Show all tests */
|
|
426
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-2", children: [
|
|
427
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-xs font-medium text-gray-500", children: [
|
|
428
|
+
assignments.length,
|
|
429
|
+
" test",
|
|
430
|
+
assignments.length !== 1 ? "s" : "",
|
|
431
|
+
" assigned"
|
|
432
|
+
] }) }),
|
|
433
|
+
assignments.map((assignment) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
434
|
+
"button",
|
|
435
|
+
{
|
|
436
|
+
onClick: () => {
|
|
437
|
+
setSelectedTestId(assignment.id);
|
|
438
|
+
setTestView("detail");
|
|
439
|
+
setShowSteps(false);
|
|
440
|
+
},
|
|
441
|
+
className: `w-full text-left p-3 rounded-lg border transition-colors ${assignment.id === currentAssignment?.id ? "bg-purple-50 border-purple-200" : "bg-gray-50 border-gray-200 hover:bg-gray-100"}`,
|
|
442
|
+
children: [
|
|
443
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-start justify-between mb-1", children: [
|
|
444
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs font-mono text-gray-500", children: assignment.testCase.testKey }),
|
|
445
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `text-xs px-1.5 py-0.5 rounded font-medium ${assignment.testCase.priority === "P0" ? "bg-red-100 text-red-700" : assignment.testCase.priority === "P1" ? "bg-orange-100 text-orange-700" : "bg-gray-100 text-gray-600"}`, children: assignment.testCase.priority })
|
|
446
|
+
] }),
|
|
447
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h4", { className: "font-medium text-gray-900 text-sm line-clamp-2", children: assignment.testCase.title }),
|
|
448
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 mt-1 text-xs text-gray-400", children: [
|
|
449
|
+
assignment.testCase.track && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
450
|
+
"span",
|
|
451
|
+
{
|
|
452
|
+
className: "px-1 py-0.5 rounded text-white",
|
|
453
|
+
style: { backgroundColor: assignment.testCase.track.color },
|
|
454
|
+
children: templateInfo[assignment.testCase.track.testTemplate || "steps"].icon
|
|
455
|
+
}
|
|
456
|
+
),
|
|
457
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
|
|
458
|
+
assignment.testCase.steps.length,
|
|
459
|
+
" ",
|
|
460
|
+
assignment.testCase.track?.testTemplate === "checklist" ? "items" : assignment.testCase.track?.testTemplate === "rubric" ? "criteria" : "steps"
|
|
461
|
+
] }),
|
|
462
|
+
assignment.id === currentAssignment?.id && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-purple-600 font-medium", children: "\u2022 Current" })
|
|
463
|
+
] })
|
|
464
|
+
]
|
|
465
|
+
},
|
|
466
|
+
assignment.id
|
|
467
|
+
))
|
|
468
|
+
] })
|
|
469
|
+
) : justPassed ? (
|
|
470
|
+
/* Success state after passing */
|
|
471
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-center py-8", children: [
|
|
472
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-5xl", children: "\u2713" }),
|
|
473
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-green-600 mt-3 font-semibold text-lg", children: "Passed!" }),
|
|
474
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-gray-400 text-sm mt-1", children: "Loading next test..." })
|
|
475
|
+
] })
|
|
476
|
+
) : displayedAssignment ? (
|
|
477
|
+
/* Detail View - Show single test */
|
|
478
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
|
|
479
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
480
|
+
"button",
|
|
481
|
+
{
|
|
482
|
+
onClick: () => {
|
|
483
|
+
setTestView("list");
|
|
484
|
+
setSelectedTestId(null);
|
|
485
|
+
},
|
|
486
|
+
className: "flex items-center gap-1 text-xs text-purple-600 font-medium hover:text-purple-700 mb-3",
|
|
487
|
+
children: [
|
|
488
|
+
"\u2190 All Tests (",
|
|
489
|
+
assignments.length,
|
|
490
|
+
")"
|
|
491
|
+
]
|
|
492
|
+
}
|
|
493
|
+
),
|
|
494
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-gray-50 rounded-lg p-3 mb-3", children: [
|
|
495
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-start justify-between mb-2", children: [
|
|
496
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs font-mono text-gray-500", children: displayedAssignment.testCase.testKey }),
|
|
497
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
498
|
+
displayedAssignment.testCase.track && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
499
|
+
"span",
|
|
500
|
+
{
|
|
501
|
+
className: "text-xs px-1.5 py-0.5 rounded text-white",
|
|
502
|
+
style: { backgroundColor: displayedAssignment.testCase.track.color },
|
|
503
|
+
children: templateInfo[displayedAssignment.testCase.track.testTemplate || "steps"].icon
|
|
504
|
+
}
|
|
505
|
+
),
|
|
506
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `text-xs px-1.5 py-0.5 rounded font-medium ${displayedAssignment.testCase.priority === "P0" ? "bg-red-100 text-red-700" : displayedAssignment.testCase.priority === "P1" ? "bg-orange-100 text-orange-700" : "bg-gray-100 text-gray-600"}`, children: displayedAssignment.testCase.priority })
|
|
507
|
+
] })
|
|
508
|
+
] }),
|
|
509
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h4", { className: "font-medium text-gray-900 text-sm mb-1", children: displayedAssignment.testCase.title }),
|
|
510
|
+
displayedAssignment.testCase.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-gray-500 text-xs mb-2", children: displayedAssignment.testCase.description }),
|
|
511
|
+
displayedAssignment.testCase.targetRoute && onNavigate && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
512
|
+
"button",
|
|
513
|
+
{
|
|
514
|
+
onClick: () => onNavigate(displayedAssignment.testCase.targetRoute),
|
|
515
|
+
className: "w-full mb-2 py-1.5 px-3 bg-blue-50 text-blue-700 border border-blue-200 rounded-lg text-xs font-medium hover:bg-blue-100 transition-colors flex items-center justify-center gap-1",
|
|
516
|
+
children: [
|
|
517
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Go to test location" }),
|
|
518
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u2192" })
|
|
519
|
+
]
|
|
520
|
+
}
|
|
521
|
+
),
|
|
522
|
+
(() => {
|
|
523
|
+
const template = displayedAssignment.testCase.track?.testTemplate || "steps";
|
|
524
|
+
const steps = displayedAssignment.testCase.steps;
|
|
525
|
+
const info = templateInfo[template];
|
|
526
|
+
const rubricMode = displayedAssignment.testCase.track?.rubricMode || "pass_fail";
|
|
527
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
528
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
529
|
+
"div",
|
|
530
|
+
{
|
|
531
|
+
className: "flex items-center gap-2 text-xs px-2 py-1 rounded mb-2",
|
|
532
|
+
style: {
|
|
533
|
+
backgroundColor: displayedAssignment.testCase.track ? `${displayedAssignment.testCase.track.color}15` : "#f3f4f6"
|
|
534
|
+
},
|
|
535
|
+
children: [
|
|
536
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: info.icon }),
|
|
537
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-medium", children: info.name }),
|
|
538
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-gray-500", children: [
|
|
539
|
+
"\u2022 ",
|
|
540
|
+
info.action
|
|
541
|
+
] })
|
|
542
|
+
]
|
|
543
|
+
}
|
|
544
|
+
),
|
|
545
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
546
|
+
"button",
|
|
547
|
+
{
|
|
548
|
+
onClick: () => setShowSteps(!showSteps),
|
|
549
|
+
className: "text-purple-600 text-xs font-medium hover:text-purple-700 flex items-center gap-1",
|
|
550
|
+
children: [
|
|
551
|
+
showSteps ? "\u25BC" : "\u25B6",
|
|
552
|
+
" ",
|
|
553
|
+
template === "freeform" ? "Instructions" : `${steps.length} ${template === "checklist" ? "items" : template === "rubric" ? "criteria" : "steps"}`
|
|
554
|
+
]
|
|
555
|
+
}
|
|
556
|
+
),
|
|
557
|
+
showSteps && template === "steps" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-2 space-y-2", children: steps.map((step, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-2 text-xs", children: [
|
|
558
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-5 h-5 rounded-full bg-purple-100 text-purple-700 flex items-center justify-center flex-shrink-0 font-medium", children: step.stepNumber }),
|
|
559
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
|
|
560
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-gray-700", children: step.action }),
|
|
561
|
+
step.expectedResult && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "text-gray-400 mt-0.5", children: [
|
|
562
|
+
"\u2192 ",
|
|
563
|
+
step.expectedResult
|
|
564
|
+
] })
|
|
565
|
+
] })
|
|
566
|
+
] }, idx)) }),
|
|
567
|
+
showSteps && template === "checklist" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-2 space-y-2", children: [
|
|
568
|
+
steps.map((step, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
569
|
+
"button",
|
|
570
|
+
{
|
|
571
|
+
onClick: () => setCriteriaResults((prev) => {
|
|
572
|
+
const newResults = { ...prev };
|
|
573
|
+
if (prev[idx] === true) {
|
|
574
|
+
delete newResults[idx];
|
|
575
|
+
} else {
|
|
576
|
+
newResults[idx] = true;
|
|
577
|
+
}
|
|
578
|
+
return newResults;
|
|
579
|
+
}),
|
|
580
|
+
className: `w-full flex items-center gap-2 text-xs p-2 rounded border transition-colors text-left ${criteriaResults[idx] === true ? "bg-green-50 border-green-300" : "bg-white border-gray-200 hover:bg-gray-50"}`,
|
|
581
|
+
children: [
|
|
582
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `w-5 h-5 rounded border-2 flex items-center justify-center ${criteriaResults[idx] === true ? "bg-green-500 border-green-500 text-white" : "border-cyan-400 text-cyan-600"}`, children: criteriaResults[idx] === true ? "\u2713" : "" }),
|
|
583
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: `flex-1 ${criteriaResults[idx] === true ? "text-green-700" : "text-gray-700"}`, children: step.action })
|
|
584
|
+
]
|
|
585
|
+
},
|
|
586
|
+
idx
|
|
587
|
+
)),
|
|
588
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between mt-2", children: [
|
|
589
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-gray-400", children: "Tap to check off each item." }),
|
|
590
|
+
Object.keys(criteriaResults).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
591
|
+
"button",
|
|
592
|
+
{
|
|
593
|
+
onClick: () => setCriteriaResults({}),
|
|
594
|
+
className: "text-xs text-gray-400 hover:text-red-500 transition-colors",
|
|
595
|
+
children: "\u21BA Reset"
|
|
596
|
+
}
|
|
597
|
+
)
|
|
598
|
+
] })
|
|
599
|
+
] }),
|
|
600
|
+
showSteps && template === "rubric" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-2 space-y-2", children: [
|
|
601
|
+
steps.map((step, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-white p-2 rounded border border-gray-200", children: [
|
|
602
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 text-xs mb-1", children: [
|
|
603
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-5 h-5 rounded bg-purple-100 text-purple-700 flex items-center justify-center font-medium", children: idx + 1 }),
|
|
604
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-gray-900 font-medium flex-1", children: step.action })
|
|
605
|
+
] }),
|
|
606
|
+
step.expectedResult && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-gray-500 ml-7 mb-2", children: step.expectedResult }),
|
|
607
|
+
rubricMode === "pass_fail" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-2 ml-7", children: [
|
|
608
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
609
|
+
"button",
|
|
610
|
+
{
|
|
611
|
+
onClick: () => setCriteriaResults((prev) => ({ ...prev, [idx]: true })),
|
|
612
|
+
className: `flex-1 py-1 px-2 rounded text-xs font-medium transition-colors ${criteriaResults[idx] === true ? "bg-green-500 text-white" : "bg-gray-100 text-gray-600 hover:bg-green-100"}`,
|
|
613
|
+
children: "\u2713 Pass"
|
|
614
|
+
}
|
|
615
|
+
),
|
|
616
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
617
|
+
"button",
|
|
618
|
+
{
|
|
619
|
+
onClick: () => setCriteriaResults((prev) => ({ ...prev, [idx]: false })),
|
|
620
|
+
className: `flex-1 py-1 px-2 rounded text-xs font-medium transition-colors ${criteriaResults[idx] === false ? "bg-red-500 text-white" : "bg-gray-100 text-gray-600 hover:bg-red-100"}`,
|
|
621
|
+
children: "\u2717 Fail"
|
|
622
|
+
}
|
|
623
|
+
)
|
|
624
|
+
] }),
|
|
625
|
+
rubricMode === "rating" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex gap-1 ml-7", children: [1, 2, 3, 4, 5].map((n) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
626
|
+
"button",
|
|
627
|
+
{
|
|
628
|
+
onClick: () => setCriteriaResults((prev) => ({ ...prev, [idx]: n })),
|
|
629
|
+
className: `w-8 h-8 rounded font-medium text-sm transition-colors ${criteriaResults[idx] === n ? "bg-purple-600 text-white" : "bg-gray-100 text-gray-600 hover:bg-purple-100"}`,
|
|
630
|
+
children: n
|
|
631
|
+
},
|
|
632
|
+
n
|
|
633
|
+
)) })
|
|
634
|
+
] }, idx)),
|
|
635
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between mt-2", children: [
|
|
636
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-gray-400", children: rubricMode === "rating" ? "Rate 1-5 for each criterion." : "Mark each criterion as Pass or Fail." }),
|
|
637
|
+
Object.keys(criteriaResults).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
638
|
+
"button",
|
|
639
|
+
{
|
|
640
|
+
onClick: () => setCriteriaResults({}),
|
|
641
|
+
className: "text-xs text-gray-400 hover:text-red-500 transition-colors",
|
|
642
|
+
children: "\u21BA Reset"
|
|
643
|
+
}
|
|
644
|
+
)
|
|
645
|
+
] })
|
|
646
|
+
] }),
|
|
647
|
+
showSteps && template === "freeform" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-2 p-2 bg-amber-50 rounded border border-amber-200 text-xs", children: [
|
|
648
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-amber-800 font-medium mb-1", children: "\u{1F4AD} Open Observation" }),
|
|
649
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-amber-700", children: "Review the area described above and note:" }),
|
|
650
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("ul", { className: "text-amber-700 mt-1 ml-4 list-disc", children: [
|
|
651
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: "What works well" }),
|
|
652
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: "Issues or concerns" }),
|
|
653
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: "Suggestions" })
|
|
654
|
+
] })
|
|
655
|
+
] })
|
|
656
|
+
] });
|
|
657
|
+
})(),
|
|
658
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-3 p-2 bg-green-50 rounded text-xs text-green-700", children: [
|
|
659
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-medium", children: displayedAssignment.testCase.track?.testTemplate === "checklist" ? "Pass criteria:" : displayedAssignment.testCase.track?.testTemplate === "rubric" ? "Target score:" : "Expected:" }),
|
|
660
|
+
" ",
|
|
661
|
+
displayedAssignment.testCase.expectedResult
|
|
662
|
+
] })
|
|
663
|
+
] }),
|
|
664
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-2", children: [
|
|
665
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
666
|
+
"button",
|
|
667
|
+
{
|
|
668
|
+
onClick: handleFail,
|
|
669
|
+
disabled: submitting,
|
|
670
|
+
className: "flex-1 py-2 px-3 bg-red-100 text-red-700 rounded-lg font-medium text-sm hover:bg-red-200 disabled:opacity-50 transition-colors",
|
|
671
|
+
children: "\u2717 Fail"
|
|
672
|
+
}
|
|
673
|
+
),
|
|
674
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
675
|
+
"button",
|
|
676
|
+
{
|
|
677
|
+
onClick: handlePass,
|
|
678
|
+
disabled: submitting,
|
|
679
|
+
className: "flex-1 py-2 px-3 bg-green-600 text-white rounded-lg font-medium text-sm hover:bg-green-700 disabled:opacity-50 transition-colors",
|
|
680
|
+
children: submitting ? "..." : "\u2713 Pass"
|
|
681
|
+
}
|
|
682
|
+
)
|
|
683
|
+
] })
|
|
684
|
+
] })
|
|
685
|
+
) : null }),
|
|
686
|
+
activeTab === "report" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: submitted ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-center py-8", children: [
|
|
687
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-4xl", children: "\u{1F389}" }),
|
|
688
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-gray-600 mt-2 font-medium", children: "Report submitted!" })
|
|
689
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
690
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex gap-2 mb-4", children: [
|
|
691
|
+
{ type: "bug", label: "\u{1F41B} Bug", color: "red" },
|
|
692
|
+
{ type: "feedback", label: "\u{1F4A1} Feedback", color: "blue" },
|
|
693
|
+
{ type: "suggestion", label: "\u2728 Idea", color: "purple" }
|
|
694
|
+
].map(({ type, label, color }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
695
|
+
"button",
|
|
696
|
+
{
|
|
697
|
+
onClick: () => setReportType(type),
|
|
698
|
+
className: `flex-1 py-1.5 px-2 rounded-lg text-xs font-medium transition-colors ${reportType === type ? color === "red" ? "bg-red-100 text-red-700 ring-2 ring-red-500" : color === "blue" ? "bg-blue-100 text-blue-700 ring-2 ring-blue-500" : "bg-purple-100 text-purple-700 ring-2 ring-purple-500" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
|
|
699
|
+
children: label
|
|
700
|
+
},
|
|
701
|
+
type
|
|
702
|
+
)) }),
|
|
703
|
+
(reportType === "bug" || reportType === "test_fail") && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-3", children: [
|
|
704
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Severity" }),
|
|
705
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex gap-1", children: ["critical", "high", "medium", "low"].map((sev) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
706
|
+
"button",
|
|
707
|
+
{
|
|
708
|
+
onClick: () => setSeverity(sev),
|
|
709
|
+
className: `flex-1 py-1 px-2 rounded text-xs font-medium capitalize transition-colors ${severity === sev ? sev === "critical" ? "bg-red-600 text-white" : sev === "high" ? "bg-orange-500 text-white" : sev === "medium" ? "bg-yellow-500 text-black" : "bg-gray-500 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
|
|
710
|
+
children: sev
|
|
711
|
+
},
|
|
712
|
+
sev
|
|
713
|
+
)) })
|
|
714
|
+
] }),
|
|
715
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-3", children: [
|
|
716
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "What happened?" }),
|
|
717
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
718
|
+
"textarea",
|
|
719
|
+
{
|
|
720
|
+
value: description,
|
|
721
|
+
onChange: (e) => setDescription(e.target.value),
|
|
722
|
+
placeholder: "Describe the issue...",
|
|
723
|
+
rows: 3,
|
|
724
|
+
className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 resize-none"
|
|
725
|
+
}
|
|
726
|
+
)
|
|
727
|
+
] }),
|
|
728
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
729
|
+
"button",
|
|
730
|
+
{
|
|
731
|
+
onClick: handleSubmitReport,
|
|
732
|
+
disabled: submitting || !description.trim(),
|
|
733
|
+
className: "w-full py-2 px-4 bg-purple-600 text-white rounded-lg font-medium text-sm hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
|
|
734
|
+
children: submitting ? "Submitting..." : "Submit Report"
|
|
735
|
+
}
|
|
736
|
+
)
|
|
737
|
+
] }) })
|
|
738
|
+
] }),
|
|
739
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "px-4 py-2 bg-gray-50 border-t border-gray-200 flex items-center justify-between text-xs text-gray-400", children: [
|
|
740
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
|
|
741
|
+
pendingCount,
|
|
742
|
+
" pending \xB7 ",
|
|
743
|
+
inProgressCount,
|
|
744
|
+
" in progress"
|
|
745
|
+
] }),
|
|
746
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
747
|
+
"button",
|
|
748
|
+
{
|
|
749
|
+
onClick: refreshAssignments,
|
|
750
|
+
className: "hover:text-gray-600",
|
|
751
|
+
children: "\u21BB Refresh"
|
|
752
|
+
}
|
|
753
|
+
)
|
|
754
|
+
] })
|
|
755
|
+
] })
|
|
756
|
+
]
|
|
757
|
+
}
|
|
758
|
+
);
|
|
759
|
+
}
|
|
760
|
+
|
|
761
|
+
// src/BugBearErrorBoundary.tsx
|
|
762
|
+
var import_react3 = require("react");
|
|
763
|
+
var import_core2 = require("@bbearai/core");
|
|
764
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
765
|
+
var BUGBEAR_LOGO_BASE64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAJhlWElmTU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAABIAAAAAQAAAEgAAAABAASQBAACAAAAFAAAAISgAQADAAAAAQABAACgAgAEAAAAAQAAAECgAwAEAAAAAQAAAEAAAAAAMjAyNjowMToyNCAxNjoyMTozOAAvO6cIAAAACXBIWXMAAAsTAAALEwEAmpwYAAACo2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpJcHRjNHhtcEV4dD0iaHR0cDovL2lwdGMub3JnL3N0ZC9JcHRjNHhtcEV4dC8yMDA4LTAyLTI5LyIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIj4KICAgICAgICAgPElwdGM0eG1wRXh0OkRpZ2l0YWxTb3VyY2VUeXBlPmh0dHA6Ly9jdi5pcHRjLm9yZy9uZXdzY29kZXMvZGlnaXRhbHNvdXJjZXR5cGUvdHJhaW5lZEFsZ29yaXRobWljTWVkaWE8L0lwdGM0eG1wRXh0OkRpZ2l0YWxTb3VyY2VUeXBlPgogICAgICAgICA8SXB0YzR4bXBFeHQ6RGlnSW1hZ2VHVUlEPmZjNzJlN2Q2LTYyYTEtNDE1ZS04MjY5LWM2NjA4MjY0OWRiMDwvSXB0YzR4bXBFeHQ6RGlnSW1hZ2VHVUlEPgogICAgICAgICA8eG1wOkNyZWF0ZURhdGU+MjAyNi0wMS0yNFQxNjoyMTozODwveG1wOkNyZWF0ZURhdGU+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+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";
|
|
766
|
+
var BugBearErrorBoundary = class extends import_react3.Component {
|
|
767
|
+
constructor(props) {
|
|
768
|
+
super(props);
|
|
769
|
+
this.reset = () => {
|
|
770
|
+
this.setState({
|
|
771
|
+
hasError: false,
|
|
772
|
+
error: null,
|
|
773
|
+
errorInfo: null
|
|
774
|
+
});
|
|
775
|
+
};
|
|
776
|
+
this.state = {
|
|
777
|
+
hasError: false,
|
|
778
|
+
error: null,
|
|
779
|
+
errorInfo: null
|
|
780
|
+
};
|
|
781
|
+
}
|
|
782
|
+
static getDerivedStateFromError(error) {
|
|
783
|
+
return { hasError: true, error };
|
|
784
|
+
}
|
|
785
|
+
componentDidCatch(error, errorInfo) {
|
|
786
|
+
this.setState({ errorInfo });
|
|
787
|
+
const capturedError = (0, import_core2.captureError)(error, {
|
|
788
|
+
componentStack: errorInfo.componentStack ?? void 0
|
|
789
|
+
});
|
|
790
|
+
console.error("BugBear: Error caught by ErrorBoundary", {
|
|
791
|
+
error: capturedError.errorMessage,
|
|
792
|
+
componentStack: capturedError.componentStack?.slice(0, 500)
|
|
793
|
+
});
|
|
794
|
+
this.props.onError?.(error, errorInfo);
|
|
795
|
+
}
|
|
796
|
+
render() {
|
|
797
|
+
const { hasError, error } = this.state;
|
|
798
|
+
const { children, fallback } = this.props;
|
|
799
|
+
if (hasError && error) {
|
|
800
|
+
if (typeof fallback === "function") {
|
|
801
|
+
return fallback(error, this.reset);
|
|
802
|
+
}
|
|
803
|
+
if (fallback) {
|
|
804
|
+
return fallback;
|
|
805
|
+
}
|
|
806
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
807
|
+
"div",
|
|
808
|
+
{
|
|
809
|
+
style: {
|
|
810
|
+
padding: "20px",
|
|
811
|
+
margin: "20px",
|
|
812
|
+
backgroundColor: "#fef2f2",
|
|
813
|
+
border: "1px solid #fecaca",
|
|
814
|
+
borderRadius: "8px",
|
|
815
|
+
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
|
|
816
|
+
},
|
|
817
|
+
children: [
|
|
818
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "12px" }, children: [
|
|
819
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { src: BUGBEAR_LOGO_BASE64, alt: "BugBear", width: 28, height: 28, style: { objectFit: "contain" } }),
|
|
820
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { margin: 0, color: "#991b1b", fontSize: "16px" }, children: "Something went wrong" })
|
|
821
|
+
] }),
|
|
822
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { color: "#7f1d1d", fontSize: "14px", margin: "0 0 12px 0" }, children: error.message }),
|
|
823
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
|
|
824
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
825
|
+
"button",
|
|
826
|
+
{
|
|
827
|
+
onClick: this.reset,
|
|
828
|
+
style: {
|
|
829
|
+
padding: "8px 16px",
|
|
830
|
+
backgroundColor: "#dc2626",
|
|
831
|
+
color: "white",
|
|
832
|
+
border: "none",
|
|
833
|
+
borderRadius: "6px",
|
|
834
|
+
fontSize: "14px",
|
|
835
|
+
fontWeight: "500",
|
|
836
|
+
cursor: "pointer"
|
|
837
|
+
},
|
|
838
|
+
children: "Try Again"
|
|
839
|
+
}
|
|
840
|
+
),
|
|
841
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
842
|
+
"button",
|
|
843
|
+
{
|
|
844
|
+
onClick: () => window.location.reload(),
|
|
845
|
+
style: {
|
|
846
|
+
padding: "8px 16px",
|
|
847
|
+
backgroundColor: "#f3f4f6",
|
|
848
|
+
color: "#374151",
|
|
849
|
+
border: "1px solid #d1d5db",
|
|
850
|
+
borderRadius: "6px",
|
|
851
|
+
fontSize: "14px",
|
|
852
|
+
fontWeight: "500",
|
|
853
|
+
cursor: "pointer"
|
|
854
|
+
},
|
|
855
|
+
children: "Reload Page"
|
|
856
|
+
}
|
|
857
|
+
)
|
|
858
|
+
] }),
|
|
859
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { color: "#9ca3af", fontSize: "12px", marginTop: "12px" }, children: "The error has been captured by BugBear" })
|
|
860
|
+
]
|
|
861
|
+
}
|
|
862
|
+
);
|
|
863
|
+
}
|
|
864
|
+
return children;
|
|
865
|
+
}
|
|
866
|
+
};
|
|
867
|
+
function useErrorContext() {
|
|
868
|
+
return {
|
|
869
|
+
captureError: import_core2.captureError,
|
|
870
|
+
getEnhancedContext: () => import_core2.contextCapture.getEnhancedContext()
|
|
871
|
+
};
|
|
872
|
+
}
|
|
873
|
+
|
|
874
|
+
// src/index.tsx
|
|
875
|
+
var import_core3 = require("@bbearai/core");
|
|
876
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
877
|
+
0 && (module.exports = {
|
|
878
|
+
BugBearErrorBoundary,
|
|
879
|
+
BugBearPanel,
|
|
880
|
+
BugBearProvider,
|
|
881
|
+
captureError,
|
|
882
|
+
contextCapture,
|
|
883
|
+
useBugBear,
|
|
884
|
+
useErrorContext
|
|
885
|
+
});
|