@checkflow/sdk 1.1.4 → 1.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunk-NRA75GGU.mjs +1737 -0
- package/dist/index.d.mts +16 -3
- package/dist/index.d.ts +16 -3
- package/dist/index.js +1213 -996
- package/dist/index.mjs +57 -1618
- package/dist/react.d.mts +47 -2
- package/dist/react.d.ts +47 -2
- package/dist/react.js +244 -36
- package/dist/react.mjs +32 -1
- package/dist/types-fCeePy5c.d.mts +101 -0
- package/dist/types-fCeePy5c.d.ts +101 -0
- package/dist/vue.d.mts +1 -1
- package/dist/vue.d.ts +1 -1
- package/dist/vue.js +208 -35
- package/dist/widget-LD24NDDL.mjs +10 -0
- package/package.json +1 -1
- package/dist/types-CBCRUGst.d.mts +0 -55
- package/dist/types-CBCRUGst.d.ts +0 -55
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
interface UserProfile {
|
|
2
|
+
name?: string;
|
|
3
|
+
email?: string;
|
|
4
|
+
avatar?: string;
|
|
5
|
+
id?: string;
|
|
6
|
+
}
|
|
7
|
+
interface ButtonConfig {
|
|
8
|
+
/** Button text (default: 'Report Bug') */
|
|
9
|
+
text?: string;
|
|
10
|
+
/** Background color */
|
|
11
|
+
backgroundColor?: string;
|
|
12
|
+
/** Text color */
|
|
13
|
+
textColor?: string;
|
|
14
|
+
/** Border radius (e.g., '8px', '50px', '0') */
|
|
15
|
+
borderRadius?: string;
|
|
16
|
+
/** Padding (e.g., '10px 20px') */
|
|
17
|
+
padding?: string;
|
|
18
|
+
/** Font size (e.g., '14px') */
|
|
19
|
+
fontSize?: string;
|
|
20
|
+
/** Font weight (e.g., '500', 'bold') */
|
|
21
|
+
fontWeight?: string;
|
|
22
|
+
/** Border (e.g., '1px solid #ccc', 'none') */
|
|
23
|
+
border?: string;
|
|
24
|
+
/** Box shadow */
|
|
25
|
+
boxShadow?: string;
|
|
26
|
+
/** Custom CSS class to apply */
|
|
27
|
+
className?: string;
|
|
28
|
+
/** Show icon (default: true) */
|
|
29
|
+
showIcon?: boolean;
|
|
30
|
+
/** Size preset: 'xs' | 'sm' | 'default' | 'lg' */
|
|
31
|
+
size?: 'xs' | 'sm' | 'default' | 'lg';
|
|
32
|
+
/** Variant preset: 'default' | 'outline' | 'ghost' | 'link' */
|
|
33
|
+
variant?: 'default' | 'outline' | 'ghost' | 'link';
|
|
34
|
+
}
|
|
35
|
+
interface CheckflowConfig {
|
|
36
|
+
apiKey: string;
|
|
37
|
+
endpoint?: string;
|
|
38
|
+
projectId?: string;
|
|
39
|
+
environment?: string;
|
|
40
|
+
enabled?: boolean;
|
|
41
|
+
widget?: WidgetConfig;
|
|
42
|
+
/** User profile to pre-fill reporter info (hides name/email fields if provided) */
|
|
43
|
+
user?: UserProfile;
|
|
44
|
+
/** Auto-load html2canvas for screenshot support (default: true) */
|
|
45
|
+
enableScreenshots?: boolean;
|
|
46
|
+
}
|
|
47
|
+
interface WidgetConfig {
|
|
48
|
+
/** @deprecated Use button.text instead */
|
|
49
|
+
text?: string;
|
|
50
|
+
/** @deprecated Use button.backgroundColor instead */
|
|
51
|
+
color?: string;
|
|
52
|
+
/** Button customization options */
|
|
53
|
+
button?: ButtonConfig;
|
|
54
|
+
/** Show floating button on init (default: true). Set to false for manual trigger only. */
|
|
55
|
+
showOnInit?: boolean;
|
|
56
|
+
/** @deprecated Position is now controlled by where you place the button */
|
|
57
|
+
position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'center';
|
|
58
|
+
}
|
|
59
|
+
interface FeedbackPayload {
|
|
60
|
+
title: string;
|
|
61
|
+
description?: string;
|
|
62
|
+
type?: 'BUG' | 'FEATURE' | 'IMPROVEMENT' | 'QUESTION';
|
|
63
|
+
priority?: 'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL';
|
|
64
|
+
url?: string;
|
|
65
|
+
environment?: string;
|
|
66
|
+
viewport?: {
|
|
67
|
+
width: number;
|
|
68
|
+
height: number;
|
|
69
|
+
device: string;
|
|
70
|
+
};
|
|
71
|
+
/** User ID from injected profile */
|
|
72
|
+
user_id?: string;
|
|
73
|
+
/** User avatar URL from injected profile */
|
|
74
|
+
user_avatar?: string;
|
|
75
|
+
user_agent?: string;
|
|
76
|
+
browser?: string;
|
|
77
|
+
os?: string;
|
|
78
|
+
locale?: string;
|
|
79
|
+
timezone?: string;
|
|
80
|
+
console_logs?: any[];
|
|
81
|
+
network_logs?: any[];
|
|
82
|
+
performance_metrics?: Record<string, number>;
|
|
83
|
+
javascript_errors?: any[];
|
|
84
|
+
screenshot_url?: string;
|
|
85
|
+
sdk_version?: string;
|
|
86
|
+
reporter_name?: string;
|
|
87
|
+
reporter_email?: string;
|
|
88
|
+
}
|
|
89
|
+
interface FeedbackResponse {
|
|
90
|
+
success: boolean;
|
|
91
|
+
data?: {
|
|
92
|
+
id: string;
|
|
93
|
+
short_id: string;
|
|
94
|
+
};
|
|
95
|
+
error?: {
|
|
96
|
+
message: string;
|
|
97
|
+
code: string;
|
|
98
|
+
};
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
export type { ButtonConfig as B, CheckflowConfig as C, FeedbackPayload as F, UserProfile as U, WidgetConfig as W, FeedbackResponse as a };
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
interface UserProfile {
|
|
2
|
+
name?: string;
|
|
3
|
+
email?: string;
|
|
4
|
+
avatar?: string;
|
|
5
|
+
id?: string;
|
|
6
|
+
}
|
|
7
|
+
interface ButtonConfig {
|
|
8
|
+
/** Button text (default: 'Report Bug') */
|
|
9
|
+
text?: string;
|
|
10
|
+
/** Background color */
|
|
11
|
+
backgroundColor?: string;
|
|
12
|
+
/** Text color */
|
|
13
|
+
textColor?: string;
|
|
14
|
+
/** Border radius (e.g., '8px', '50px', '0') */
|
|
15
|
+
borderRadius?: string;
|
|
16
|
+
/** Padding (e.g., '10px 20px') */
|
|
17
|
+
padding?: string;
|
|
18
|
+
/** Font size (e.g., '14px') */
|
|
19
|
+
fontSize?: string;
|
|
20
|
+
/** Font weight (e.g., '500', 'bold') */
|
|
21
|
+
fontWeight?: string;
|
|
22
|
+
/** Border (e.g., '1px solid #ccc', 'none') */
|
|
23
|
+
border?: string;
|
|
24
|
+
/** Box shadow */
|
|
25
|
+
boxShadow?: string;
|
|
26
|
+
/** Custom CSS class to apply */
|
|
27
|
+
className?: string;
|
|
28
|
+
/** Show icon (default: true) */
|
|
29
|
+
showIcon?: boolean;
|
|
30
|
+
/** Size preset: 'xs' | 'sm' | 'default' | 'lg' */
|
|
31
|
+
size?: 'xs' | 'sm' | 'default' | 'lg';
|
|
32
|
+
/** Variant preset: 'default' | 'outline' | 'ghost' | 'link' */
|
|
33
|
+
variant?: 'default' | 'outline' | 'ghost' | 'link';
|
|
34
|
+
}
|
|
35
|
+
interface CheckflowConfig {
|
|
36
|
+
apiKey: string;
|
|
37
|
+
endpoint?: string;
|
|
38
|
+
projectId?: string;
|
|
39
|
+
environment?: string;
|
|
40
|
+
enabled?: boolean;
|
|
41
|
+
widget?: WidgetConfig;
|
|
42
|
+
/** User profile to pre-fill reporter info (hides name/email fields if provided) */
|
|
43
|
+
user?: UserProfile;
|
|
44
|
+
/** Auto-load html2canvas for screenshot support (default: true) */
|
|
45
|
+
enableScreenshots?: boolean;
|
|
46
|
+
}
|
|
47
|
+
interface WidgetConfig {
|
|
48
|
+
/** @deprecated Use button.text instead */
|
|
49
|
+
text?: string;
|
|
50
|
+
/** @deprecated Use button.backgroundColor instead */
|
|
51
|
+
color?: string;
|
|
52
|
+
/** Button customization options */
|
|
53
|
+
button?: ButtonConfig;
|
|
54
|
+
/** Show floating button on init (default: true). Set to false for manual trigger only. */
|
|
55
|
+
showOnInit?: boolean;
|
|
56
|
+
/** @deprecated Position is now controlled by where you place the button */
|
|
57
|
+
position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'center';
|
|
58
|
+
}
|
|
59
|
+
interface FeedbackPayload {
|
|
60
|
+
title: string;
|
|
61
|
+
description?: string;
|
|
62
|
+
type?: 'BUG' | 'FEATURE' | 'IMPROVEMENT' | 'QUESTION';
|
|
63
|
+
priority?: 'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL';
|
|
64
|
+
url?: string;
|
|
65
|
+
environment?: string;
|
|
66
|
+
viewport?: {
|
|
67
|
+
width: number;
|
|
68
|
+
height: number;
|
|
69
|
+
device: string;
|
|
70
|
+
};
|
|
71
|
+
/** User ID from injected profile */
|
|
72
|
+
user_id?: string;
|
|
73
|
+
/** User avatar URL from injected profile */
|
|
74
|
+
user_avatar?: string;
|
|
75
|
+
user_agent?: string;
|
|
76
|
+
browser?: string;
|
|
77
|
+
os?: string;
|
|
78
|
+
locale?: string;
|
|
79
|
+
timezone?: string;
|
|
80
|
+
console_logs?: any[];
|
|
81
|
+
network_logs?: any[];
|
|
82
|
+
performance_metrics?: Record<string, number>;
|
|
83
|
+
javascript_errors?: any[];
|
|
84
|
+
screenshot_url?: string;
|
|
85
|
+
sdk_version?: string;
|
|
86
|
+
reporter_name?: string;
|
|
87
|
+
reporter_email?: string;
|
|
88
|
+
}
|
|
89
|
+
interface FeedbackResponse {
|
|
90
|
+
success: boolean;
|
|
91
|
+
data?: {
|
|
92
|
+
id: string;
|
|
93
|
+
short_id: string;
|
|
94
|
+
};
|
|
95
|
+
error?: {
|
|
96
|
+
message: string;
|
|
97
|
+
code: string;
|
|
98
|
+
};
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
export type { ButtonConfig as B, CheckflowConfig as C, FeedbackPayload as F, UserProfile as U, WidgetConfig as W, FeedbackResponse as a };
|
package/dist/vue.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { H as HighlightAnnotation } from './highlighter-D0FpwCSU.mjs';
|
|
2
|
-
import { C as CheckflowConfig, a as FeedbackResponse } from './types-
|
|
2
|
+
import { C as CheckflowConfig, a as FeedbackResponse } from './types-fCeePy5c.mjs';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Vue 3 plugin factory.
|
package/dist/vue.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { H as HighlightAnnotation } from './highlighter-D0FpwCSU.js';
|
|
2
|
-
import { C as CheckflowConfig, a as FeedbackResponse } from './types-
|
|
2
|
+
import { C as CheckflowConfig, a as FeedbackResponse } from './types-fCeePy5c.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Vue 3 plugin factory.
|
package/dist/vue.js
CHANGED
|
@@ -1321,9 +1321,16 @@ var init_editor = __esm({
|
|
|
1321
1321
|
});
|
|
1322
1322
|
|
|
1323
1323
|
// src/widget.ts
|
|
1324
|
+
var widget_exports = {};
|
|
1325
|
+
__export(widget_exports, {
|
|
1326
|
+
mountWidget: () => mountWidget,
|
|
1327
|
+
openFeedbackModal: () => openFeedbackModal,
|
|
1328
|
+
unmountWidget: () => unmountWidget
|
|
1329
|
+
});
|
|
1324
1330
|
function mountWidget(config2 = {}, onSubmit, opts) {
|
|
1325
1331
|
if (container) return;
|
|
1326
1332
|
onSubmitCallback = onSubmit;
|
|
1333
|
+
currentUser = opts?.user;
|
|
1327
1334
|
const cfg = { ...DEFAULT_CONFIG, ...config2 };
|
|
1328
1335
|
currentCfg = cfg;
|
|
1329
1336
|
container = document.createElement("div");
|
|
@@ -1334,13 +1341,20 @@ function mountWidget(config2 = {}, onSubmit, opts) {
|
|
|
1334
1341
|
const btn = container.querySelector("#cf-trigger");
|
|
1335
1342
|
btn?.addEventListener("click", () => openModal(cfg, opts));
|
|
1336
1343
|
}
|
|
1344
|
+
function openFeedbackModal(config2 = {}, onSubmit, opts) {
|
|
1345
|
+
onSubmitCallback = onSubmit;
|
|
1346
|
+
currentUser = opts?.user;
|
|
1347
|
+
const cfg = { ...DEFAULT_CONFIG, ...config2 };
|
|
1348
|
+
currentCfg = cfg;
|
|
1349
|
+
injectStyles(cfg);
|
|
1350
|
+
openModal(cfg, opts);
|
|
1351
|
+
}
|
|
1337
1352
|
function getBackdropClass(cfg, expanded) {
|
|
1338
1353
|
if (expanded) return "cf-backdrop--center";
|
|
1339
1354
|
if (cfg.position === "center") return "cf-backdrop--center";
|
|
1340
|
-
return "cf-backdrop--corner cf-pos-" + cfg.position;
|
|
1355
|
+
return "cf-backdrop--corner cf-pos-" + (cfg.position || "bottom-right");
|
|
1341
1356
|
}
|
|
1342
1357
|
function openModal(cfg, opts) {
|
|
1343
|
-
if (!container) return;
|
|
1344
1358
|
const existing = document.getElementById("cf-modal-backdrop");
|
|
1345
1359
|
if (existing) existing.remove();
|
|
1346
1360
|
isExpanded = false;
|
|
@@ -1453,8 +1467,10 @@ function bindModalEvents(cfg, opts) {
|
|
|
1453
1467
|
});
|
|
1454
1468
|
backdrop.querySelector("#cf-submit")?.addEventListener("click", () => {
|
|
1455
1469
|
const desc = backdrop.querySelector("#cf-desc")?.value;
|
|
1456
|
-
const
|
|
1457
|
-
const
|
|
1470
|
+
const nameEl = backdrop.querySelector("#cf-name");
|
|
1471
|
+
const emailEl = backdrop.querySelector("#cf-email");
|
|
1472
|
+
const name = nameEl?.value || currentUser?.name;
|
|
1473
|
+
const email = emailEl?.value || currentUser?.email;
|
|
1458
1474
|
if (!desc?.trim()) {
|
|
1459
1475
|
const descEl = backdrop.querySelector("#cf-desc");
|
|
1460
1476
|
if (descEl) {
|
|
@@ -1496,33 +1512,93 @@ function showToast(msg) {
|
|
|
1496
1512
|
setTimeout(() => toast.remove(), 3e3);
|
|
1497
1513
|
}
|
|
1498
1514
|
function injectStyles(cfg) {
|
|
1515
|
+
const existingStyle = document.getElementById("cf-widget-styles");
|
|
1516
|
+
if (existingStyle) existingStyle.remove();
|
|
1517
|
+
const btn = cfg.button || {};
|
|
1518
|
+
const sizePreset = SIZE_PRESETS[btn.size || "default"] || SIZE_PRESETS.default;
|
|
1519
|
+
const variantPreset = VARIANT_PRESETS[btn.variant || "default"] || VARIANT_PRESETS.default;
|
|
1520
|
+
const bgColor = btn.backgroundColor || cfg.color || variantPreset.bg;
|
|
1521
|
+
const textColor = btn.textColor || variantPreset.color;
|
|
1522
|
+
const borderRadius = btn.borderRadius || "8px";
|
|
1523
|
+
const padding = btn.padding || sizePreset.padding;
|
|
1524
|
+
const fontSize = btn.fontSize || sizePreset.fontSize;
|
|
1525
|
+
const fontWeight = btn.fontWeight || "500";
|
|
1526
|
+
const border = btn.border || variantPreset.border;
|
|
1527
|
+
const boxShadow = btn.boxShadow || "0 2px 8px rgba(0,0,0,0.15)";
|
|
1528
|
+
const primaryColor = cfg.color || "#1e3a5f";
|
|
1499
1529
|
const style = document.createElement("style");
|
|
1500
1530
|
style.id = "cf-widget-styles";
|
|
1501
1531
|
style.textContent = `
|
|
1502
1532
|
@keyframes cf-toast-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
|
|
1503
1533
|
@keyframes cf-modal-in { from { opacity:0; transform:scale(.96) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }
|
|
1504
1534
|
|
|
1535
|
+
/* User card styles */
|
|
1536
|
+
.cf-user-card {
|
|
1537
|
+
display:flex;
|
|
1538
|
+
align-items:center;
|
|
1539
|
+
gap:12px;
|
|
1540
|
+
padding:12px;
|
|
1541
|
+
background:#f8f9fa;
|
|
1542
|
+
border-radius:10px;
|
|
1543
|
+
margin-bottom:4px;
|
|
1544
|
+
}
|
|
1545
|
+
.cf-user-avatar {
|
|
1546
|
+
width:40px;
|
|
1547
|
+
height:40px;
|
|
1548
|
+
border-radius:50%;
|
|
1549
|
+
object-fit:cover;
|
|
1550
|
+
}
|
|
1551
|
+
.cf-user-avatar-placeholder {
|
|
1552
|
+
width:40px;
|
|
1553
|
+
height:40px;
|
|
1554
|
+
border-radius:50%;
|
|
1555
|
+
background:${primaryColor};
|
|
1556
|
+
color:#fff;
|
|
1557
|
+
display:flex;
|
|
1558
|
+
align-items:center;
|
|
1559
|
+
justify-content:center;
|
|
1560
|
+
font-size:16px;
|
|
1561
|
+
font-weight:600;
|
|
1562
|
+
}
|
|
1563
|
+
.cf-user-info {
|
|
1564
|
+
flex:1;
|
|
1565
|
+
min-width:0;
|
|
1566
|
+
}
|
|
1567
|
+
.cf-user-name {
|
|
1568
|
+
font-size:14px;
|
|
1569
|
+
font-weight:600;
|
|
1570
|
+
color:#1a1a2e;
|
|
1571
|
+
}
|
|
1572
|
+
.cf-user-email {
|
|
1573
|
+
font-size:12px;
|
|
1574
|
+
color:#666;
|
|
1575
|
+
overflow:hidden;
|
|
1576
|
+
text-overflow:ellipsis;
|
|
1577
|
+
white-space:nowrap;
|
|
1578
|
+
}
|
|
1579
|
+
|
|
1580
|
+
/* Trigger button - now inline, not fixed position */
|
|
1505
1581
|
#cf-trigger {
|
|
1506
1582
|
position:fixed;
|
|
1507
|
-
${getPositionCSS(cfg.position)}
|
|
1583
|
+
${getPositionCSS(cfg.position || "bottom-right")}
|
|
1508
1584
|
z-index:100000;
|
|
1509
|
-
background:${
|
|
1510
|
-
color
|
|
1511
|
-
border
|
|
1512
|
-
border-radius
|
|
1513
|
-
padding
|
|
1514
|
-
font-size
|
|
1515
|
-
font-weight
|
|
1585
|
+
background:${bgColor};
|
|
1586
|
+
color:${textColor};
|
|
1587
|
+
border:${border};
|
|
1588
|
+
border-radius:${borderRadius};
|
|
1589
|
+
padding:${padding};
|
|
1590
|
+
font-size:${fontSize};
|
|
1591
|
+
font-weight:${fontWeight};
|
|
1516
1592
|
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
|
|
1517
1593
|
cursor:pointer;
|
|
1518
|
-
box-shadow
|
|
1519
|
-
display:flex;
|
|
1594
|
+
box-shadow:${boxShadow};
|
|
1595
|
+
display:inline-flex;
|
|
1520
1596
|
align-items:center;
|
|
1521
1597
|
gap:8px;
|
|
1522
|
-
transition:transform .15s,box-shadow .15s;
|
|
1598
|
+
transition:transform .15s,box-shadow .15s,opacity .15s;
|
|
1523
1599
|
}
|
|
1524
|
-
#cf-trigger:hover {
|
|
1525
|
-
#cf-trigger svg { width:
|
|
1600
|
+
#cf-trigger:hover { opacity:0.9; }
|
|
1601
|
+
#cf-trigger svg { width:16px; height:16px; flex-shrink:0; }
|
|
1526
1602
|
|
|
1527
1603
|
#cf-modal-backdrop {
|
|
1528
1604
|
position:fixed;
|
|
@@ -1623,7 +1699,7 @@ function injectStyles(cfg) {
|
|
|
1623
1699
|
transition:all .15s;
|
|
1624
1700
|
}
|
|
1625
1701
|
.cf-tool-highlight {
|
|
1626
|
-
background:${
|
|
1702
|
+
background:${primaryColor};
|
|
1627
1703
|
color:#fff;
|
|
1628
1704
|
}
|
|
1629
1705
|
.cf-tool-highlight:hover { opacity:.9; }
|
|
@@ -1671,8 +1747,8 @@ function injectStyles(cfg) {
|
|
|
1671
1747
|
}
|
|
1672
1748
|
.cf-field input::placeholder, .cf-field textarea::placeholder { color:#bbb; }
|
|
1673
1749
|
.cf-field input:focus, .cf-field textarea:focus {
|
|
1674
|
-
border-color:${
|
|
1675
|
-
box-shadow:0 0 0 3px ${
|
|
1750
|
+
border-color:${primaryColor};
|
|
1751
|
+
box-shadow:0 0 0 3px ${primaryColor}18;
|
|
1676
1752
|
}
|
|
1677
1753
|
.cf-field textarea { resize:vertical; min-height:100px; }
|
|
1678
1754
|
|
|
@@ -1711,7 +1787,7 @@ function injectStyles(cfg) {
|
|
|
1711
1787
|
padding:13px;
|
|
1712
1788
|
border:none;
|
|
1713
1789
|
border-radius:10px;
|
|
1714
|
-
background:${
|
|
1790
|
+
background:${primaryColor};
|
|
1715
1791
|
color:#fff;
|
|
1716
1792
|
font-size:15px;
|
|
1717
1793
|
font-weight:600;
|
|
@@ -1719,7 +1795,7 @@ function injectStyles(cfg) {
|
|
|
1719
1795
|
font-family:inherit;
|
|
1720
1796
|
transition:all .15s;
|
|
1721
1797
|
}
|
|
1722
|
-
.cf-submit-btn:hover { opacity:.92; transform:translateY(-1px); box-shadow:0 4px 12px ${
|
|
1798
|
+
.cf-submit-btn:hover { opacity:.92; transform:translateY(-1px); box-shadow:0 4px 12px ${primaryColor}40; }
|
|
1723
1799
|
.cf-submit-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
|
|
1724
1800
|
|
|
1725
1801
|
.cf-cancel-btn {
|
|
@@ -1750,7 +1826,7 @@ function injectStyles(cfg) {
|
|
|
1750
1826
|
text-decoration:none;
|
|
1751
1827
|
font-weight:500;
|
|
1752
1828
|
}
|
|
1753
|
-
.cf-footer a:hover { color:${
|
|
1829
|
+
.cf-footer a:hover { color:${primaryColor}; }
|
|
1754
1830
|
`;
|
|
1755
1831
|
document.head.appendChild(style);
|
|
1756
1832
|
}
|
|
@@ -1769,10 +1845,15 @@ function getPositionCSS(pos) {
|
|
|
1769
1845
|
}
|
|
1770
1846
|
}
|
|
1771
1847
|
function getTriggerHTML(cfg) {
|
|
1848
|
+
const btn = cfg.button || {};
|
|
1849
|
+
const text = btn.text || cfg.text || "Report Bug";
|
|
1850
|
+
const showIcon = btn.showIcon !== false;
|
|
1851
|
+
const customClass = btn.className || "";
|
|
1852
|
+
const icon = showIcon ? `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>` : "";
|
|
1772
1853
|
return `
|
|
1773
|
-
<button id="cf-trigger">
|
|
1774
|
-
|
|
1775
|
-
${
|
|
1854
|
+
<button id="cf-trigger" class="${customClass}">
|
|
1855
|
+
${icon}
|
|
1856
|
+
${text}
|
|
1776
1857
|
</button>
|
|
1777
1858
|
`;
|
|
1778
1859
|
}
|
|
@@ -1781,15 +1862,29 @@ function getCheckflowLogo() {
|
|
|
1781
1862
|
}
|
|
1782
1863
|
function getModalHTML(cfg, expanded) {
|
|
1783
1864
|
const modalClass = expanded ? "cf-modal cf-modal--expanded" : "cf-modal cf-modal--compact";
|
|
1784
|
-
const
|
|
1865
|
+
const hasUser = currentUser && (currentUser.name || currentUser.email);
|
|
1866
|
+
const userInfoCard = hasUser ? `
|
|
1867
|
+
<div class="cf-user-card">
|
|
1868
|
+
${currentUser?.avatar ? `<img class="cf-user-avatar" src="${currentUser.avatar}" alt="${currentUser.name || "User"}" />` : `<div class="cf-user-avatar-placeholder">${(currentUser?.name || currentUser?.email || "U").charAt(0).toUpperCase()}</div>`}
|
|
1869
|
+
<div class="cf-user-info">
|
|
1870
|
+
${currentUser?.name ? `<div class="cf-user-name">${currentUser.name}</div>` : ""}
|
|
1871
|
+
${currentUser?.email ? `<div class="cf-user-email">${currentUser.email}</div>` : ""}
|
|
1872
|
+
</div>
|
|
1873
|
+
</div>
|
|
1874
|
+
` : "";
|
|
1875
|
+
const nameEmailFields = hasUser ? "" : `
|
|
1785
1876
|
<div class="cf-field">
|
|
1786
|
-
<label>Nom <span>(
|
|
1877
|
+
<label>Nom <span>(optionnel)</span></label>
|
|
1787
1878
|
<input id="cf-name" type="text" placeholder="Votre nom" />
|
|
1788
1879
|
</div>
|
|
1789
1880
|
<div class="cf-field">
|
|
1790
|
-
<label>Email <span>(
|
|
1881
|
+
<label>Email <span>(optionnel)</span></label>
|
|
1791
1882
|
<input id="cf-email" type="email" placeholder="votre.email@exemple.com" />
|
|
1792
1883
|
</div>
|
|
1884
|
+
`;
|
|
1885
|
+
const formFields = `
|
|
1886
|
+
${userInfoCard}
|
|
1887
|
+
${nameEmailFields}
|
|
1793
1888
|
<div class="cf-field">
|
|
1794
1889
|
<label>Description <span>(obligatoire)</span></label>
|
|
1795
1890
|
<textarea id="cf-desc" placeholder="Quel est le probl\xE8me ? Que vous attendiez-vous \xE0 voir ?"></textarea>
|
|
@@ -1838,16 +1933,44 @@ function getModalHTML(cfg, expanded) {
|
|
|
1838
1933
|
</div>
|
|
1839
1934
|
`;
|
|
1840
1935
|
}
|
|
1841
|
-
var DEFAULT_CONFIG, container, onSubmitCallback, screenshotDataUrl, annotatedImageUrl, annotationsData, isExpanded, currentCfg;
|
|
1936
|
+
var DEFAULT_BUTTON_CONFIG, SIZE_PRESETS, VARIANT_PRESETS, DEFAULT_CONFIG, container, onSubmitCallback, screenshotDataUrl, annotatedImageUrl, annotationsData, isExpanded, currentCfg, currentUser;
|
|
1842
1937
|
var init_widget = __esm({
|
|
1843
1938
|
"src/widget.ts"() {
|
|
1844
1939
|
"use strict";
|
|
1845
1940
|
init_editor();
|
|
1941
|
+
DEFAULT_BUTTON_CONFIG = {
|
|
1942
|
+
text: "Report Bug",
|
|
1943
|
+
backgroundColor: "#1e3a5f",
|
|
1944
|
+
textColor: "#ffffff",
|
|
1945
|
+
borderRadius: "8px",
|
|
1946
|
+
padding: "10px 18px",
|
|
1947
|
+
fontSize: "14px",
|
|
1948
|
+
fontWeight: "500",
|
|
1949
|
+
border: "none",
|
|
1950
|
+
boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
|
|
1951
|
+
className: "",
|
|
1952
|
+
showIcon: true,
|
|
1953
|
+
size: "default",
|
|
1954
|
+
variant: "default"
|
|
1955
|
+
};
|
|
1956
|
+
SIZE_PRESETS = {
|
|
1957
|
+
xs: { padding: "6px 10px", fontSize: "12px" },
|
|
1958
|
+
sm: { padding: "8px 14px", fontSize: "13px" },
|
|
1959
|
+
default: { padding: "10px 18px", fontSize: "14px" },
|
|
1960
|
+
lg: { padding: "12px 24px", fontSize: "15px" }
|
|
1961
|
+
};
|
|
1962
|
+
VARIANT_PRESETS = {
|
|
1963
|
+
default: { bg: "#1e3a5f", color: "#ffffff", border: "none" },
|
|
1964
|
+
outline: { bg: "transparent", color: "#1e3a5f", border: "1px solid #1e3a5f" },
|
|
1965
|
+
ghost: { bg: "transparent", color: "#1e3a5f", border: "none" },
|
|
1966
|
+
link: { bg: "transparent", color: "#1e3a5f", border: "none" }
|
|
1967
|
+
};
|
|
1846
1968
|
DEFAULT_CONFIG = {
|
|
1847
1969
|
position: "bottom-right",
|
|
1848
1970
|
color: "#1e3a5f",
|
|
1849
1971
|
text: "Report Bug",
|
|
1850
|
-
showOnInit: true
|
|
1972
|
+
showOnInit: true,
|
|
1973
|
+
button: DEFAULT_BUTTON_CONFIG
|
|
1851
1974
|
};
|
|
1852
1975
|
container = null;
|
|
1853
1976
|
onSubmitCallback = null;
|
|
@@ -1856,6 +1979,7 @@ var init_widget = __esm({
|
|
|
1856
1979
|
annotationsData = [];
|
|
1857
1980
|
isExpanded = false;
|
|
1858
1981
|
currentCfg = { ...DEFAULT_CONFIG };
|
|
1982
|
+
currentUser = void 0;
|
|
1859
1983
|
}
|
|
1860
1984
|
});
|
|
1861
1985
|
|
|
@@ -1929,10 +2053,13 @@ var init_screenshot = __esm({
|
|
|
1929
2053
|
var index_exports = {};
|
|
1930
2054
|
__export(index_exports, {
|
|
1931
2055
|
captureScreenshot: () => captureScreenshot,
|
|
2056
|
+
clearUser: () => clearUser,
|
|
1932
2057
|
destroy: () => destroy,
|
|
1933
2058
|
hideWidget: () => hideWidget,
|
|
1934
2059
|
init: () => init,
|
|
2060
|
+
openFeedbackModal: () => openFeedbackModal2,
|
|
1935
2061
|
sendFeedback: () => sendFeedback,
|
|
2062
|
+
setUser: () => setUser,
|
|
1936
2063
|
showWidget: () => showWidget
|
|
1937
2064
|
});
|
|
1938
2065
|
function init(cfg) {
|
|
@@ -1961,7 +2088,8 @@ function init(cfg) {
|
|
|
1961
2088
|
});
|
|
1962
2089
|
},
|
|
1963
2090
|
{
|
|
1964
|
-
onScreenshot: () => captureScreenshot()
|
|
2091
|
+
onScreenshot: () => captureScreenshot(),
|
|
2092
|
+
user: config.user
|
|
1965
2093
|
}
|
|
1966
2094
|
);
|
|
1967
2095
|
}
|
|
@@ -1991,12 +2119,22 @@ async function sendFeedback(data) {
|
|
|
1991
2119
|
if (data.annotations && data.annotations.length > 0) {
|
|
1992
2120
|
payload.annotations = data.annotations;
|
|
1993
2121
|
}
|
|
1994
|
-
if (
|
|
2122
|
+
if (config.user?.name) {
|
|
2123
|
+
payload.reporter_name = config.user.name;
|
|
2124
|
+
} else if (data.reporter_name) {
|
|
1995
2125
|
payload.reporter_name = data.reporter_name;
|
|
1996
2126
|
}
|
|
1997
|
-
if (
|
|
2127
|
+
if (config.user?.email) {
|
|
2128
|
+
payload.reporter_email = config.user.email;
|
|
2129
|
+
} else if (data.reporter_email) {
|
|
1998
2130
|
payload.reporter_email = data.reporter_email;
|
|
1999
2131
|
}
|
|
2132
|
+
if (config.user?.id) {
|
|
2133
|
+
payload.user_id = config.user.id;
|
|
2134
|
+
}
|
|
2135
|
+
if (config.user?.avatar) {
|
|
2136
|
+
payload.user_avatar = config.user.avatar;
|
|
2137
|
+
}
|
|
2000
2138
|
try {
|
|
2001
2139
|
const res = await fetch(`${config.endpoint}/sdk/feedback`, {
|
|
2002
2140
|
method: "POST",
|
|
@@ -2032,10 +2170,45 @@ function showWidget() {
|
|
|
2032
2170
|
});
|
|
2033
2171
|
},
|
|
2034
2172
|
{
|
|
2035
|
-
onScreenshot: () => captureScreenshot()
|
|
2173
|
+
onScreenshot: () => captureScreenshot(),
|
|
2174
|
+
user: config.user
|
|
2036
2175
|
}
|
|
2037
2176
|
);
|
|
2038
2177
|
}
|
|
2178
|
+
function setUser(user) {
|
|
2179
|
+
if (config) {
|
|
2180
|
+
config.user = user;
|
|
2181
|
+
}
|
|
2182
|
+
}
|
|
2183
|
+
function clearUser() {
|
|
2184
|
+
if (config) {
|
|
2185
|
+
config.user = void 0;
|
|
2186
|
+
}
|
|
2187
|
+
}
|
|
2188
|
+
function openFeedbackModal2() {
|
|
2189
|
+
if (!config) return;
|
|
2190
|
+
Promise.resolve().then(() => (init_widget(), widget_exports)).then(({ openFeedbackModal: openModal2 }) => {
|
|
2191
|
+
openModal2(
|
|
2192
|
+
config.widget,
|
|
2193
|
+
(data) => {
|
|
2194
|
+
sendFeedback({
|
|
2195
|
+
title: data.title,
|
|
2196
|
+
description: data.description,
|
|
2197
|
+
type: data.type,
|
|
2198
|
+
priority: data.priority,
|
|
2199
|
+
screenshot_data: data.screenshot,
|
|
2200
|
+
annotations: data.annotations,
|
|
2201
|
+
reporter_name: data.reporter_name,
|
|
2202
|
+
reporter_email: data.reporter_email
|
|
2203
|
+
});
|
|
2204
|
+
},
|
|
2205
|
+
{
|
|
2206
|
+
onScreenshot: () => captureScreenshot(),
|
|
2207
|
+
user: config.user
|
|
2208
|
+
}
|
|
2209
|
+
);
|
|
2210
|
+
});
|
|
2211
|
+
}
|
|
2039
2212
|
function hideWidget() {
|
|
2040
2213
|
unmountWidget();
|
|
2041
2214
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@checkflow/sdk",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.5",
|
|
4
4
|
"description": "Lightweight bug reporter & feedback SDK for Checkflow — with screenshot capture, element highlighting, and framework integrations",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|