@uxbertlabs/reportly 1.0.26 → 1.0.28

package/dist/components/IssueModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IssueModal.d.ts","sourceRoot":"","sources":["../../src/components/IssueModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAOrD,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAc,EAAE,EAAE,eAAe,4BA+V7D;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"IssueModal.d.ts","sourceRoot":"","sources":["../../src/components/IssueModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAOrD,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAc,EAAE,EAAE,eAAe,4BA8W7D;AAED,eAAe,UAAU,CAAC"}

package/dist/components/ReportlyProvider.d.ts

@@ -1,13 +1,13 @@
-import React, { ReactNode } from 'react';
-import type { ReportlyConfig, IssueData, CompleteIssue, AnnotationTool } from '../types';
-import type { N8nResponse } from '../features/n8n-integration';
-import AnnotationManager from '../features/annotation';
+import React, { ReactNode } from "react";
+import type { ReportlyConfig, IssueData, CompleteIssue, AnnotationTool } from "../types";
+import type { N8nResponse } from "../features/n8n-integration";
+import AnnotationManager from "../features/annotation";
 export interface ReportlyState {
     isOpen: boolean;
     isAnnotating: boolean;
     isCapturing: boolean;
     screenshot: string | null;
-    captureMode: 'viewport' | 'fullpage';
+    captureMode: "viewport" | "fullpage";
     currentTool: string;
     currentColor: string;
     config: ReportlyConfig;
@@ -20,7 +20,7 @@ interface ReportlyContextType {
     closeModal: () => void;
     startAnnotation: () => void;
     endAnnotation: () => void;
-    captureScreenshot: (mode?: 'viewport' | 'fullpage') => Promise<void>;
+    captureScreenshot: (mode?: "viewport" | "fullpage") => Promise<void>;
     retakeScreenshot: () => Promise<void>;
     setTool: (tool: AnnotationTool) => void;
     setColor: (color: string) => void;

package/dist/components/ReportlyProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReportlyProvider.d.ts","sourceRoot":"","sources":["../../src/components/ReportlyProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAyC,SAAS,EAAwB,MAAM,OAAO,CAAC;AACtG,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAI/D,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,UAAU,GAAG,UAAU,CAAC;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;CACxB;AAmED,UAAU,mBAAmB;IAC3B,KAAK,EAAE,aAAa,CAAC;IACrB,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC5C,oBAAoB,EAAE,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;IAClE,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,iBAAiB,EAAE,CAAC,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrE,gBAAgB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,OAAO,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IAC5C,WAAW,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,OAAO,CAAC,WAAW,CAAC,CAAC;IAC5D,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACxD,gBAAgB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAID,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAClC;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,MAAW,EAAE,EAAE,qBAAqB,qBA0KhF;AAED,wBAAgB,WAAW,IAAI,mBAAmB,CAMjD"}
+{"version":3,"file":"ReportlyProvider.d.ts","sourceRoot":"","sources":["../../src/components/ReportlyProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAyC,SAAS,EAAwB,MAAM,OAAO,CAAC;AACtG,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAI/D,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,UAAU,GAAG,UAAU,CAAC;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;CACxB;AAmED,UAAU,mBAAmB;IAC3B,KAAK,EAAE,aAAa,CAAC;IACrB,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC5C,oBAAoB,EAAE,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;IAClE,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,iBAAiB,EAAE,CAAC,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrE,gBAAgB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,OAAO,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IAC5C,WAAW,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,OAAO,CAAC,WAAW,CAAC,CAAC;IAC5D,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACxD,gBAAgB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAID,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAClC;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,MAAW,EAAE,EAAE,qBAAqB,qBAwLhF;AAED,wBAAgB,WAAW,IAAI,mBAAmB,CAMjD"}

package/dist/index.cjs.js

@@ -9632,13 +9632,13 @@ const initialState = {
   isAnnotating: false,
   isCapturing: false,
   screenshot: null,
-  captureMode: 'viewport',
-  currentTool: 'pen',
-  currentColor: '#ff0000',
+  captureMode: "viewport",
+  currentTool: "pen",
+  currentColor: "#ff0000",
   config: {
     ui: {
-      position: 'bottom-right',
-      theme: 'light'
+      position: "bottom-right",
+      theme: "light"
     },
     features: {
       annotation: true,
@@ -9648,67 +9648,67 @@ const initialState = {
 };
 function reportlyReducer(state, action) {
   switch (action.type) {
-    case 'OPEN_MODAL':
+    case "OPEN_MODAL":
       return {
         ...state,
         isOpen: true
       };
-    case 'CLOSE_MODAL':
+    case "CLOSE_MODAL":
       return {
         ...state,
         isOpen: false,
         isAnnotating: false
       };
-    case 'START_ANNOTATION':
+    case "START_ANNOTATION":
       return {
         ...state,
         isAnnotating: true,
         isOpen: false
       };
-    case 'END_ANNOTATION':
+    case "END_ANNOTATION":
       return {
         ...state,
         isAnnotating: false,
         isOpen: true
       };
-    case 'START_CAPTURE':
+    case "START_CAPTURE":
       return {
         ...state,
         isCapturing: true
       };
-    case 'END_CAPTURE':
+    case "END_CAPTURE":
       return {
         ...state,
         isCapturing: false
       };
-    case 'SET_SCREENSHOT':
+    case "SET_SCREENSHOT":
       return {
         ...state,
         screenshot: action.payload
       };
-    case 'SET_CAPTURE_MODE':
+    case "SET_CAPTURE_MODE":
       return {
         ...state,
         captureMode: action.payload
       };
-    case 'SET_TOOL':
+    case "SET_TOOL":
       return {
         ...state,
         currentTool: action.payload
       };
-    case 'SET_COLOR':
+    case "SET_COLOR":
       return {
         ...state,
         currentColor: action.payload
       };
-    case 'RESET':
+    case "RESET":
       return {
         ...state,
         isOpen: false,
         isAnnotating: false,
         screenshot: null
       };
-    case 'UPDATE_CONFIG':
+    case "UPDATE_CONFIG":
       return {
         ...state,
         config: {
@@ -9740,58 +9740,58 @@ function ReportlyProvider({
   const screenshot = React.useMemo(() => new Screenshot(), []);
   const openModal = React.useCallback(() => {
     dispatch({
-      type: 'OPEN_MODAL'
+      type: "OPEN_MODAL"
     });
   }, []);
   const closeModal = React.useCallback(() => {
     dispatch({
-      type: 'CLOSE_MODAL'
+      type: "CLOSE_MODAL"
     });
   }, []);
   const startAnnotation = React.useCallback(() => {
     dispatch({
-      type: 'START_ANNOTATION'
+      type: "START_ANNOTATION"
     });
   }, []);
   const endAnnotation = React.useCallback(() => {
     dispatch({
-      type: 'END_ANNOTATION'
+      type: "END_ANNOTATION"
     });
   }, []);
-  const captureScreenshot = React.useCallback(async (mode = 'viewport') => {
+  const captureScreenshot = React.useCallback(async (mode = "viewport") => {
     try {
       dispatch({
-        type: 'START_CAPTURE'
+        type: "START_CAPTURE"
       });
       dispatch({
-        type: 'SET_CAPTURE_MODE',
+        type: "SET_CAPTURE_MODE",
         payload: mode
       });
       // Close modal before capturing
       dispatch({
-        type: 'CLOSE_MODAL'
+        type: "CLOSE_MODAL"
       });
       // Wait a bit for the modal to close (for animation)
       await new Promise(resolve => setTimeout(resolve, 100));
       const screenshotData = await screenshot.capture(mode);
       dispatch({
-        type: 'SET_SCREENSHOT',
+        type: "SET_SCREENSHOT",
         payload: screenshotData
       });
       // Reopen modal after capture
       dispatch({
-        type: 'OPEN_MODAL'
+        type: "OPEN_MODAL"
       });
       dispatch({
-        type: 'END_CAPTURE'
+        type: "END_CAPTURE"
       });
     } catch (error) {
-      console.error('Failed to capture screenshot:', error);
+      console.error("Failed to capture screenshot:", error);
       dispatch({
-        type: 'OPEN_MODAL'
+        type: "OPEN_MODAL"
       });
       dispatch({
-        type: 'END_CAPTURE'
+        type: "END_CAPTURE"
       });
       throw error;
     }
@@ -9803,13 +9803,13 @@ function ReportlyProvider({
       }
       await captureScreenshot(state.captureMode);
     } catch (error) {
-      console.error('Failed to retake screenshot:', error);
+      console.error("Failed to retake screenshot:", error);
       throw error;
     }
   }, [annotationManager, captureScreenshot, state.captureMode]);
   const setTool = React.useCallback(tool => {
     dispatch({
-      type: 'SET_TOOL',
+      type: "SET_TOOL",
       payload: tool
     });
     if (annotationManager) {
@@ -9818,7 +9818,7 @@ function ReportlyProvider({
   }, [annotationManager]);
   const setColor = React.useCallback(color => {
     dispatch({
-      type: 'SET_COLOR',
+      type: "SET_COLOR",
       payload: color
     });
     if (annotationManager) {
@@ -9829,19 +9829,19 @@ function ReportlyProvider({
     try {
       const completeIssue = {
         ...issueData,
-        screenshot: state.screenshot || '',
+        screenshot: state.screenshot || "",
         deviceInfo: deviceInfo.get(),
         createdAt: new Date().toISOString()
       };
       exportService.exportToJSON(completeIssue);
       dispatch({
-        type: 'RESET'
+        type: "RESET"
       });
       if (annotationManager) {
         annotationManager.clear();
       }
     } catch (error) {
-      console.error('Failed to submit issue:', error);
+      console.error("Failed to submit issue:", error);
       throw error;
     }
   }, [state.screenshot, deviceInfo, exportService, annotationManager]);
@@ -9849,14 +9849,14 @@ function ReportlyProvider({
     try {
       const completeIssue = {
         ...issueData,
-        screenshot: state.screenshot || '',
+        screenshot: state.screenshot || "",
         deviceInfo: deviceInfo.get(),
         createdAt: new Date().toISOString()
       };
       const response = await exportService.sendToN8n(completeIssue);
       if (response?.success) {
         dispatch({
-          type: 'RESET'
+          type: "RESET"
         });
         if (annotationManager) {
           annotationManager.clear();
@@ -9864,7 +9864,7 @@ function ReportlyProvider({
       }
       return response;
     } catch (error) {
-      console.error('Failed to send to n8n:', error);
+      console.error("Failed to create jira ticket:", error);
       throw error;
     }
   }, [state.screenshot, deviceInfo, exportService, annotationManager]);
@@ -9873,19 +9873,19 @@ function ReportlyProvider({
   }, [exportService]);
   const updateConfig = React.useCallback(newConfig => {
     dispatch({
-      type: 'UPDATE_CONFIG',
+      type: "UPDATE_CONFIG",
       payload: newConfig
     });
   }, []);
   const updateScreenshot = React.useCallback(screenshot => {
     dispatch({
-      type: 'SET_SCREENSHOT',
+      type: "SET_SCREENSHOT",
       payload: screenshot
     });
   }, []);
   const reset = React.useCallback(() => {
     dispatch({
-      type: 'RESET'
+      type: "RESET"
     });
     if (annotationManager) {
       annotationManager.clear();
@@ -9917,7 +9917,7 @@ function ReportlyProvider({
 function useReportly() {
   const context = React.useContext(ReportlyContext);
   if (!context) {
-    throw new Error('useReportly must be used within a ReportlyProvider');
+    throw new Error("useReportly must be used within a ReportlyProvider");
   }
   return context;
 }
@@ -10352,12 +10352,20 @@ function IssueModal({
   const [captureMode, setCaptureMode] = React.useState("viewport");
   const [isSubmitting, setIsSubmitting] = React.useState(false);
   const [isSubmittingN8n, setIsSubmittingN8n] = React.useState(false);
+  const [errors, setErrors] = React.useState({});
   const handleInputChange = React.useCallback((field, value) => {
     setFormData(prev => ({
       ...prev,
       [field]: value
     }));
-  }, []);
+    // Clear error for the field when user starts typing
+    if (field === "title" && errors.title) {
+      setErrors(prev => ({
+        ...prev,
+        title: undefined
+      }));
+    }
+  }, [errors.title]);
   const handleClose = React.useCallback(() => {
     const hasData = state.screenshot !== null || formData.title.trim() !== "" || formData.description.trim() !== "";
     if (hasData) {
@@ -10378,28 +10386,40 @@ function IssueModal({
   }, [state.screenshot, formData.title, formData.description, reset, closeModal]);
   const handleCapture = React.useCallback(async () => {
     try {
+      setErrors({});
       await captureScreenshot(captureMode);
     } catch (error) {
       console.error("Failed to capture screenshot:", error);
-      alert("Failed to capture screenshot. Please try again.");
+      setErrors({
+        general: "Failed to capture screenshot. Please try again."
+      });
     }
   }, [captureScreenshot, captureMode]);
   const handleRetake = React.useCallback(async () => {
     try {
+      setErrors({});
       await retakeScreenshot();
     } catch (error) {
       console.error("Failed to retake screenshot:", error);
-      alert("Failed to retake screenshot. Please try again.");
+      setErrors({
+        general: "Failed to retake screenshot. Please try again."
+      });
     }
   }, [retakeScreenshot]);
   const handleSubmit = React.useCallback(async e => {
     e.preventDefault();
+    // Clear previous errors
+    setErrors({});
+    // Validation
+    const newErrors = {};
     if (!formData.title.trim()) {
-      alert("Please enter an issue title");
-      return;
+      newErrors.title = "Please enter an issue title";
     }
     if (!state.screenshot) {
-      alert("Please capture a screenshot first");
+      newErrors.screenshot = "Please capture a screenshot first";
+    }
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
       return;
     }
     try {
@@ -10413,18 +10433,26 @@ function IssueModal({
       });
     } catch (error) {
       console.error("Failed to submit issue:", error);
-      alert("Failed to submit issue. Please try again.");
+      setErrors({
+        general: "Failed to submit issue. Please try again."
+      });
     } finally {
       setIsSubmitting(false);
     }
   }, [formData, state.screenshot, submitIssue]);
   const handleN8nSubmit = React.useCallback(async () => {
+    // Clear previous errors
+    setErrors({});
+    // Validation
+    const newErrors = {};
     if (!formData.title.trim()) {
-      alert("Please enter an issue title");
-      return;
+      newErrors.title = "Please enter an issue title";
     }
     if (!state.screenshot) {
-      alert("Please capture a screenshot first");
+      newErrors.screenshot = "Please capture a screenshot first";
+    }
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
       return;
     }
     try {
@@ -10437,13 +10465,19 @@ function IssueModal({
           priority: "Medium",
           deviceType: "desktop"
         });
-        alert("Issue sent to n8n successfully!");
+        setErrors({
+          general: "Issue sent to n8n successfully!"
+        });
       } else {
-        alert(`Failed to send to n8n: ${response.message}`);
+        setErrors({
+          general: `Failed to send to n8n: ${response.message}`
+        });
       }
     } catch (error) {
       console.error("Failed to send to n8n:", error);
-      alert("Failed to send to n8n. Please try again.");
+      setErrors({
+        general: "Failed to send to n8n. Please try again."
+      });
     } finally {
       setIsSubmittingN8n(false);
     }
@@ -10495,7 +10529,12 @@ function IssueModal({
     className: "uxbert-capture-title"
   }, "Capture Screenshot"), /*#__PURE__*/React.createElement("p", {
     className: "uxbert-capture-description"
-  }, "Choose what to capture before reporting your issue"), /*#__PURE__*/React.createElement("div", {
+  }, "Choose what to capture before reporting your issue"), errors.general && (/*#__PURE__*/React.createElement("div", {
+    className: "uxbert-error-message",
+    style: {
+      marginBottom: "1rem"
+    }
+  }, errors.general)), /*#__PURE__*/React.createElement("div", {
     className: "uxbert-capture-modes"
   }, /*#__PURE__*/React.createElement("label", {
     className: cn("uxbert-capture-mode-option", captureMode === "viewport" && "active")
@@ -10548,7 +10587,17 @@ function IssueModal({
     src: state.screenshot,
     alt: "Screenshot preview",
     className: "uxbert-screenshot-image"
-  })), /*#__PURE__*/React.createElement("div", {
+  })), errors.screenshot && (/*#__PURE__*/React.createElement("div", {
+    className: "uxbert-error-message",
+    style: {
+      marginTop: "0.5rem"
+    }
+  }, errors.screenshot)), errors.general && (/*#__PURE__*/React.createElement("div", {
+    className: "uxbert-error-message",
+    style: {
+      marginTop: "0.5rem"
+    }
+  }, errors.general)), /*#__PURE__*/React.createElement("div", {
     className: "uxbert-screenshot-actions"
   }, /*#__PURE__*/React.createElement("button", {
     onClick: handleRetake,
@@ -10583,8 +10632,10 @@ function IssueModal({
     onChange: e => handleInputChange("title", e.target.value),
     placeholder: "Brief description of the issue",
     required: true,
-    className: "uxbert-form-input"
-  })), /*#__PURE__*/React.createElement("div", {
+    className: cn("uxbert-form-input", errors.title && "uxbert-form-input-error")
+  }), errors.title && /*#__PURE__*/React.createElement("div", {
+    className: "uxbert-error-message"
+  }, errors.title)), /*#__PURE__*/React.createElement("div", {
     className: "uxbert-form-group"
   }, /*#__PURE__*/React.createElement("label", {
     htmlFor: "issue-description",
@@ -10661,7 +10712,7 @@ function IssueModal({
     style: {
       color: "currentColor"
     }
-  }), "Send to n8n")))))))))));
+  }), "Create Ticket")))))))))));
 }
 
 function AnnotationToolbar({