@checkflow/sdk 1.1.3 → 1.1.5

package/dist/index.mjs

@@ -1,10 +1,11 @@
+import {
+  mountWidget,
+  unmountWidget
+} from "./chunk-NRA75GGU.mjs";
 import {
   captureScreenshot,
   clearScreenshot
 } from "./chunk-6EVTRC5X.mjs";
-import {
-  startHighlighting
-} from "./chunk-CD33QAA6.mjs";
 
 // src/collector.ts
 function collectContext() {
@@ -179,501 +180,6 @@ function clearNetworkLogs() {
   logs2 = [];
 }
 
-// src/widget.ts
-var DEFAULT_CONFIG = {
-  position: "bottom-right",
-  color: "#1e3a5f",
-  text: "Report Bug",
-  showOnInit: true
-};
-var container = null;
-var onSubmitCallback = null;
-var screenshotDataUrl = null;
-var annotationsData = [];
-var isExpanded = false;
-function mountWidget(config2 = {}, onSubmit, opts) {
-  if (container) return;
-  onSubmitCallback = onSubmit;
-  const cfg = { ...DEFAULT_CONFIG, ...config2 };
-  container = document.createElement("div");
-  container.id = "checkflow-widget";
-  injectStyles(cfg);
-  container.innerHTML = getTriggerHTML(cfg);
-  document.body.appendChild(container);
-  const btn = container.querySelector("#cf-trigger");
-  btn?.addEventListener("click", () => openModal(cfg, opts));
-}
-function openModal(cfg, opts) {
-  if (!container) return;
-  const existing = document.getElementById("cf-modal-backdrop");
-  if (existing) existing.remove();
-  isExpanded = false;
-  screenshotDataUrl = null;
-  annotationsData = [];
-  const backdrop = document.createElement("div");
-  backdrop.id = "cf-modal-backdrop";
-  backdrop.innerHTML = getModalHTML(cfg, false);
-  document.body.appendChild(backdrop);
-  backdrop.addEventListener("click", (e) => {
-    if (e.target === backdrop) closeModal();
-  });
-  bindModalEvents(cfg, opts);
-}
-function closeModal() {
-  const backdrop = document.getElementById("cf-modal-backdrop");
-  if (backdrop) backdrop.remove();
-  isExpanded = false;
-  screenshotDataUrl = null;
-  annotationsData = [];
-}
-function expandModal(cfg, opts) {
-  const backdrop = document.getElementById("cf-modal-backdrop");
-  if (!backdrop) return;
-  const name = backdrop.querySelector("#cf-name")?.value || "";
-  const email = backdrop.querySelector("#cf-email")?.value || "";
-  const desc = backdrop.querySelector("#cf-desc")?.value || "";
-  isExpanded = true;
-  backdrop.innerHTML = getModalHTML(cfg, true);
-  bindModalEvents(cfg, opts);
-  const nameEl = backdrop.querySelector("#cf-name");
-  const emailEl = backdrop.querySelector("#cf-email");
-  const descEl = backdrop.querySelector("#cf-desc");
-  if (nameEl) nameEl.value = name;
-  if (emailEl) emailEl.value = email;
-  if (descEl) descEl.value = desc;
-}
-function collapseModal(cfg, opts) {
-  const backdrop = document.getElementById("cf-modal-backdrop");
-  if (!backdrop) return;
-  const name = backdrop.querySelector("#cf-name")?.value || "";
-  const email = backdrop.querySelector("#cf-email")?.value || "";
-  const desc = backdrop.querySelector("#cf-desc")?.value || "";
-  isExpanded = false;
-  screenshotDataUrl = null;
-  annotationsData = [];
-  backdrop.innerHTML = getModalHTML(cfg, false);
-  bindModalEvents(cfg, opts);
-  const nameEl = backdrop.querySelector("#cf-name");
-  const emailEl = backdrop.querySelector("#cf-email");
-  const descEl = backdrop.querySelector("#cf-desc");
-  if (nameEl) nameEl.value = name;
-  if (emailEl) emailEl.value = email;
-  if (descEl) descEl.value = desc;
-}
-function bindModalEvents(cfg, opts) {
-  const backdrop = document.getElementById("cf-modal-backdrop");
-  if (!backdrop) return;
-  backdrop.querySelector("#cf-cancel")?.addEventListener("click", closeModal);
-  backdrop.querySelector("#cf-screenshot-btn")?.addEventListener("click", async () => {
-    if (!opts?.onScreenshot) return;
-    backdrop.style.display = "none";
-    try {
-      const data = await opts.onScreenshot();
-      if (data) {
-        screenshotDataUrl = data;
-        backdrop.style.display = "flex";
-        expandModal(cfg, opts);
-        return;
-      }
-    } catch {
-    }
-    backdrop.style.display = "flex";
-  });
-  backdrop.querySelector("#cf-remove-screenshot")?.addEventListener("click", () => {
-    collapseModal(cfg, opts);
-  });
-  backdrop.querySelector("#cf-highlight-btn")?.addEventListener("click", async () => {
-    if (!opts?.onHighlight) return;
-    backdrop.style.display = "none";
-    try {
-      const annotations = await opts.onHighlight();
-      if (annotations && annotations.length > 0) {
-        annotationsData = annotations;
-      }
-    } catch {
-    }
-    backdrop.style.display = "flex";
-    const hlBtn = backdrop.querySelector("#cf-highlight-btn");
-    if (hlBtn && annotationsData.length > 0) {
-      hlBtn.textContent = `Surligner (${annotationsData.length})`;
-    }
-  });
-  backdrop.querySelector("#cf-mask-btn")?.addEventListener("click", async () => {
-    if (!opts?.onHighlight) return;
-    backdrop.style.display = "none";
-    try {
-      const annotations = await opts.onHighlight();
-      if (annotations && annotations.length > 0) {
-        annotationsData = [...annotationsData, ...annotations];
-      }
-    } catch {
-    }
-    backdrop.style.display = "flex";
-  });
-  backdrop.querySelector("#cf-submit")?.addEventListener("click", () => {
-    const desc = backdrop.querySelector("#cf-desc")?.value;
-    const name = backdrop.querySelector("#cf-name")?.value;
-    const email = backdrop.querySelector("#cf-email")?.value;
-    if (!desc?.trim()) {
-      const descEl = backdrop.querySelector("#cf-desc");
-      if (descEl) {
-        descEl.style.borderColor = "#e74c3c";
-        descEl.focus();
-      }
-      return;
-    }
-    onSubmitCallback?.({
-      title: desc.trim().slice(0, 100),
-      description: desc.trim(),
-      type: "BUG",
-      priority: "MEDIUM",
-      screenshot: screenshotDataUrl || void 0,
-      annotations: annotationsData.length > 0 ? annotationsData : void 0,
-      reporter_name: name?.trim() || void 0,
-      reporter_email: email?.trim() || void 0
-    });
-    closeModal();
-    showToast("Rapport envoy\xE9 avec succ\xE8s !");
-  });
-}
-function unmountWidget() {
-  closeModal();
-  if (container) {
-    container.remove();
-    container = null;
-  }
-}
-function showToast(msg) {
-  const toast = document.createElement("div");
-  toast.textContent = msg;
-  toast.style.cssText = 'position:fixed;bottom:80px;right:20px;background:#10b981;color:#fff;padding:10px 20px;border-radius:10px;font-size:14px;z-index:100010;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;box-shadow:0 4px 16px rgba(0,0,0,.18);animation:cf-toast-in .3s ease;';
-  document.body.appendChild(toast);
-  setTimeout(() => {
-    toast.style.opacity = "0";
-    toast.style.transition = "opacity .3s";
-  }, 2500);
-  setTimeout(() => toast.remove(), 3e3);
-}
-function injectStyles(cfg) {
-  const style = document.createElement("style");
-  style.id = "cf-widget-styles";
-  style.textContent = `
-    @keyframes cf-toast-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
-    @keyframes cf-modal-in { from { opacity:0; transform:scale(.96) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }
-
-    #cf-trigger {
-      position:fixed;
-      ${getPositionCSS(cfg.position)}
-      z-index:100000;
-      background:${cfg.color};
-      color:#fff;
-      border:none;
-      border-radius:50px;
-      padding:11px 20px;
-      font-size:14px;
-      font-weight:500;
-      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
-      cursor:pointer;
-      box-shadow:0 4px 16px rgba(0,0,0,.18);
-      display:flex;
-      align-items:center;
-      gap:8px;
-      transition:transform .15s,box-shadow .15s;
-    }
-    #cf-trigger:hover { transform:scale(1.04); box-shadow:0 6px 24px rgba(0,0,0,.22); }
-    #cf-trigger svg { width:18px; height:18px; }
-
-    #cf-modal-backdrop {
-      position:fixed;
-      top:0;left:0;right:0;bottom:0;
-      background:rgba(0,0,0,.45);
-      z-index:100001;
-      display:flex;
-      align-items:center;
-      justify-content:center;
-      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
-    }
-
-    .cf-modal {
-      background:#fff;
-      border-radius:16px;
-      box-shadow:0 24px 80px rgba(0,0,0,.25);
-      overflow:hidden;
-      animation:cf-modal-in .25s ease;
-      display:flex;
-      flex-direction:column;
-      max-height:90vh;
-    }
-    .cf-modal--compact { width:420px; }
-    .cf-modal--expanded { width:min(1100px,92vw); flex-direction:column; }
-
-    .cf-modal-header {
-      display:flex;
-      align-items:center;
-      justify-content:space-between;
-      padding:20px 24px 16px;
-      border-bottom:1px solid #f0f0f0;
-    }
-    .cf-modal-header h2 {
-      margin:0;
-      font-size:20px;
-      font-weight:700;
-      color:#1a1a2e;
-    }
-    .cf-modal-header .cf-logo {
-      width:28px;
-      height:28px;
-      color:${cfg.color};
-    }
-
-    .cf-modal-body { display:flex; flex:1; overflow:hidden; }
-
-    .cf-screenshot-panel {
-      flex:1;
-      min-width:0;
-      background:#1a1a2e;
-      display:flex;
-      flex-direction:column;
-      position:relative;
-    }
-    .cf-screenshot-panel img {
-      width:100%;
-      height:100%;
-      object-fit:contain;
-      max-height:60vh;
-    }
-    .cf-screenshot-tools {
-      position:absolute;
-      bottom:16px;
-      left:50%;
-      transform:translateX(-50%);
-      display:flex;
-      gap:8px;
-    }
-    .cf-screenshot-tools button {
-      padding:8px 18px;
-      border-radius:8px;
-      font-size:13px;
-      font-weight:500;
-      cursor:pointer;
-      font-family:inherit;
-      border:none;
-      transition:all .15s;
-    }
-    .cf-tool-highlight {
-      background:${cfg.color};
-      color:#fff;
-    }
-    .cf-tool-highlight:hover { opacity:.9; }
-    .cf-tool-mask {
-      background:#fff;
-      color:#1a1a2e;
-      border:1px solid #e0e0e0 !important;
-    }
-    .cf-tool-mask:hover { background:#f5f5f5; }
-
-    .cf-form-panel {
-      width:100%;
-      padding:20px 24px;
-      display:flex;
-      flex-direction:column;
-      gap:14px;
-      overflow-y:auto;
-    }
-    .cf-modal--expanded .cf-form-panel {
-      width:340px;
-      flex-shrink:0;
-      border-left:1px solid #f0f0f0;
-    }
-
-    .cf-field label {
-      display:block;
-      font-size:13px;
-      font-weight:500;
-      color:#1a1a2e;
-      margin-bottom:6px;
-    }
-    .cf-field label span { font-weight:400; color:#999; }
-    .cf-field input, .cf-field textarea {
-      width:100%;
-      padding:10px 14px;
-      border:1px solid #e0e0e0;
-      border-radius:10px;
-      font-size:14px;
-      font-family:inherit;
-      box-sizing:border-box;
-      outline:none;
-      transition:border-color .15s,box-shadow .15s;
-      color:#1a1a2e;
-      background:#fff;
-    }
-    .cf-field input::placeholder, .cf-field textarea::placeholder { color:#bbb; }
-    .cf-field input:focus, .cf-field textarea:focus {
-      border-color:${cfg.color};
-      box-shadow:0 0 0 3px ${cfg.color}18;
-    }
-    .cf-field textarea { resize:vertical; min-height:100px; }
-
-    .cf-screenshot-action {
-      width:100%;
-      padding:12px;
-      border:1px solid #e0e0e0;
-      border-radius:10px;
-      background:#fff;
-      font-size:14px;
-      color:#1a1a2e;
-      cursor:pointer;
-      font-family:inherit;
-      transition:all .15s;
-      text-align:center;
-    }
-    .cf-screenshot-action:hover { background:#f8f8f8; border-color:#ccc; }
-
-    .cf-remove-screenshot {
-      width:100%;
-      padding:10px;
-      border:1px solid #e0e0e0;
-      border-radius:10px;
-      background:#fff;
-      font-size:13px;
-      color:#666;
-      cursor:pointer;
-      font-family:inherit;
-      transition:all .15s;
-      text-align:center;
-    }
-    .cf-remove-screenshot:hover { background:#fff0f0; color:#e74c3c; border-color:#e74c3c; }
-
-    .cf-submit-btn {
-      width:100%;
-      padding:13px;
-      border:none;
-      border-radius:10px;
-      background:${cfg.color};
-      color:#fff;
-      font-size:15px;
-      font-weight:600;
-      cursor:pointer;
-      font-family:inherit;
-      transition:all .15s;
-    }
-    .cf-submit-btn:hover { opacity:.92; transform:translateY(-1px); box-shadow:0 4px 12px ${cfg.color}40; }
-    .cf-submit-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
-
-    .cf-cancel-btn {
-      width:100%;
-      padding:11px;
-      border:1px solid #e0e0e0;
-      border-radius:10px;
-      background:#fff;
-      color:#1a1a2e;
-      font-size:14px;
-      font-weight:500;
-      cursor:pointer;
-      font-family:inherit;
-      transition:all .15s;
-      text-align:center;
-    }
-    .cf-cancel-btn:hover { background:#f8f8f8; }
-
-    .cf-footer {
-      text-align:center;
-      padding:12px;
-      border-top:1px solid #f0f0f0;
-      font-size:11px;
-      color:#bbb;
-    }
-    .cf-footer a {
-      color:#999;
-      text-decoration:none;
-      font-weight:500;
-    }
-    .cf-footer a:hover { color:${cfg.color}; }
-  `;
-  document.head.appendChild(style);
-}
-function getPositionCSS(pos) {
-  switch (pos) {
-    case "bottom-left":
-      return "bottom:20px;left:20px;";
-    case "top-right":
-      return "top:20px;right:20px;";
-    case "top-left":
-      return "top:20px;left:20px;";
-    default:
-      return "bottom:20px;right:20px;";
-  }
-}
-function getTriggerHTML(cfg) {
-  return `
-    <button id="cf-trigger">
-      <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>
-      ${cfg.text}
-    </button>
-  `;
-}
-function getCheckflowLogo() {
-  return `<svg class="cf-logo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12C2 6.5 6.5 2 12 2a10 10 0 0 1 8 4"/><path d="M5 19.5C5.5 18 6 15 6 12c0-.7.12-1.37.34-2"/><path d="M17.29 21.02c.12-.6.43-2.3.5-3.02"/><path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"/><path d="M8.65 22c.21-.66.45-1.32.57-2"/><path d="M14 13.12c0 2.38 0 6.38-1 8.88"/><path d="M2 16h.01"/><path d="M21.8 16c.2-2 .131-5.354 0-6"/><path d="M9 6.8a6 6 0 0 1 9 5.2v2"/></svg>`;
-}
-function getModalHTML(cfg, expanded) {
-  const modalClass = expanded ? "cf-modal cf-modal--expanded" : "cf-modal cf-modal--compact";
-  const formFields = `
-    <div class="cf-field">
-      <label>Nom <span>(obligatoire)</span></label>
-      <input id="cf-name" type="text" placeholder="Votre nom" />
-    </div>
-    <div class="cf-field">
-      <label>Email <span>(obligatoire)</span></label>
-      <input id="cf-email" type="email" placeholder="votre.email@exemple.com" />
-    </div>
-    <div class="cf-field">
-      <label>Description <span>(obligatoire)</span></label>
-      <textarea id="cf-desc" placeholder="Quel est le probl\xE8me ? Que vous attendiez-vous \xE0 voir ?"></textarea>
-    </div>
-  `;
-  if (expanded && screenshotDataUrl) {
-    return `
-      <div class="${modalClass}">
-        <div class="cf-modal-header">
-          <h2>Envoyer le rapport</h2>
-          ${getCheckflowLogo()}
-        </div>
-        <div class="cf-modal-body">
-          <div class="cf-screenshot-panel">
-            <img src="${screenshotDataUrl}" alt="Capture d'\xE9cran" />
-            <div class="cf-screenshot-tools">
-              <button class="cf-tool-highlight" id="cf-highlight-btn">Surligner</button>
-              <button class="cf-tool-mask" id="cf-mask-btn">Masquer</button>
-            </div>
-          </div>
-          <div class="cf-form-panel">
-            ${formFields}
-            <button class="cf-remove-screenshot" id="cf-remove-screenshot">Supprimer la capture d'\xE9cran</button>
-            <button class="cf-submit-btn" id="cf-submit">Envoyer le rapport</button>
-            <button class="cf-cancel-btn" id="cf-cancel">Annuler</button>
-          </div>
-        </div>
-        <div class="cf-footer">Powered by <a href="https://checkflow.space" target="_blank" rel="noopener">Checkflow</a></div>
-      </div>
-    `;
-  }
-  return `
-    <div class="${modalClass}">
-      <div class="cf-modal-header">
-        <h2>Envoyer le rapport</h2>
-        ${getCheckflowLogo()}
-      </div>
-      <div class="cf-form-panel">
-        ${formFields}
-        <button class="cf-screenshot-action" id="cf-screenshot-btn">Ajouter une capture d'\xE9cran</button>
-        <button class="cf-submit-btn" id="cf-submit">Envoyer le rapport</button>
-        <button class="cf-cancel-btn" id="cf-cancel">Annuler</button>
-      </div>
-      <div class="cf-footer">Powered by <a href="https://checkflow.space" target="_blank" rel="noopener">Checkflow</a></div>
-    </div>
-  `;
-}
-
 // src/index.ts
 var SDK_VERSION = "1.1.0";
 var DEFAULT_ENDPOINT = "https://api.checkflow.space/api/v1";
@@ -705,7 +211,7 @@ function init(cfg) {
       },
       {
         onScreenshot: () => captureScreenshot(),
-        onHighlight: () => startHighlighting()
+        user: config.user
       }
     );
   }
@@ -735,12 +241,22 @@ async function sendFeedback(data) {
   if (data.annotations && data.annotations.length > 0) {
     payload.annotations = data.annotations;
   }
-  if (data.reporter_name) {
+  if (config.user?.name) {
+    payload.reporter_name = config.user.name;
+  } else if (data.reporter_name) {
     payload.reporter_name = data.reporter_name;
   }
-  if (data.reporter_email) {
+  if (config.user?.email) {
+    payload.reporter_email = config.user.email;
+  } else if (data.reporter_email) {
     payload.reporter_email = data.reporter_email;
   }
+  if (config.user?.id) {
+    payload.user_id = config.user.id;
+  }
+  if (config.user?.avatar) {
+    payload.user_avatar = config.user.avatar;
+  }
   try {
     const res = await fetch(`${config.endpoint}/sdk/feedback`, {
       method: "POST",
@@ -777,10 +293,44 @@ function showWidget() {
     },
     {
       onScreenshot: () => captureScreenshot(),
-      onHighlight: () => startHighlighting()
+      user: config.user
     }
   );
 }
+function setUser(user) {
+  if (config) {
+    config.user = user;
+  }
+}
+function clearUser() {
+  if (config) {
+    config.user = void 0;
+  }
+}
+function openFeedbackModal() {
+  if (!config) return;
+  import("./widget-LD24NDDL.mjs").then(({ openFeedbackModal: openModal }) => {
+    openModal(
+      config.widget,
+      (data) => {
+        sendFeedback({
+          title: data.title,
+          description: data.description,
+          type: data.type,
+          priority: data.priority,
+          screenshot_data: data.screenshot,
+          annotations: data.annotations,
+          reporter_name: data.reporter_name,
+          reporter_email: data.reporter_email
+        });
+      },
+      {
+        onScreenshot: () => captureScreenshot(),
+        user: config.user
+      }
+    );
+  });
+}
 function hideWidget() {
   unmountWidget();
 }
@@ -793,10 +343,12 @@ function destroy() {
 }
 export {
   captureScreenshot,
+  clearUser,
   destroy,
   hideWidget,
   init,
+  openFeedbackModal,
   sendFeedback,
-  showWidget,
-  startHighlighting
+  setUser,
+  showWidget
 };

package/dist/react.d.mts

@@ -1,10 +1,27 @@
-import { a as FeedbackResponse, H as HighlightAnnotation, C as CheckflowConfig } from './highlighter-Dx2zURb6.mjs';
+import { H as HighlightAnnotation } from './highlighter-D0FpwCSU.mjs';
+import { B as ButtonConfig, U as UserProfile, a as FeedbackResponse, C as CheckflowConfig } from './types-fCeePy5c.mjs';
 
 /**
  * Initialize Checkflow in a React/Next.js app.
  * Call this in your root layout or _app file.
+ *
+ * @param config - SDK configuration including apiKey, user profile, and widget options
  */
 declare function useCheckflowInit(config: CheckflowConfig): void;
+/**
+ * Update the user profile after initialization.
+ * Useful when user logs in/out.
+ */
+declare function setUser(user: UserProfile | undefined): Promise<void>;
+/**
+ * Clear the user profile.
+ */
+declare function clearUser(): Promise<void>;
+/**
+ * Open the feedback modal programmatically.
+ * Use this when you want to trigger the modal from a custom button.
+ */
+declare function openFeedbackModal(): Promise<void>;
 /**
  * Hook to send feedback programmatically from React components.
  */
@@ -19,10 +36,39 @@ declare function useCheckflowFeedback(): {
     highlight: () => Promise<HighlightAnnotation[]>;
     show: () => Promise<void>;
     hide: () => Promise<void>;
+    openModal: typeof openFeedbackModal;
+    setUser: typeof setUser;
+    clearUser: typeof clearUser;
 };
 /**
  * Cleanup function for React useEffect.
  */
 declare function destroyCheckflow(): void;
+/**
+ * Props for the FeedbackButton component.
+ * All button styling can be customized via className, style, or button config.
+ */
+interface FeedbackButtonProps {
+    /** Button text content */
+    children?: string;
+    /** Custom CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: Record<string, string | number>;
+    /** Button configuration for SDK styling */
+    buttonConfig?: ButtonConfig;
+    /** Click handler (called before opening modal) */
+    onClick?: () => void;
+}
+/**
+ * Get the onClick handler for a feedback button.
+ * Use this to create your own custom button that opens the feedback modal.
+ *
+ * @example
+ * ```tsx
+ * <button onClick={getFeedbackButtonHandler()}>Report Bug</button>
+ * ```
+ */
+declare function getFeedbackButtonHandler(onClick?: () => void): () => void;
 
-export { destroyCheckflow, useCheckflowFeedback, useCheckflowInit };
+export { type FeedbackButtonProps, clearUser, destroyCheckflow, getFeedbackButtonHandler, openFeedbackModal, setUser, useCheckflowFeedback, useCheckflowInit };