@uxbertlabs/reportly 1.0.18 → 1.0.20

package/README.md

@@ -32,16 +32,49 @@ Open `demo.html` in your browser to see it in action!
 
 ## Installation
 
-### Method 1: Script Tag (Recommended)
+### Method 1: React/TypeScript (Recommended)
 
-```html
-<!-- Via local file -->
-<script src="dist/reportly.min.js"></script>
+```bash
+npm install @uxbertlabs/reportly
+```
 
-<!-- Or via CDN -->
-<script src="https://cdn.jsdelivr.net/npm/@uxbertlabs/reportly@1.0.2/dist/reportly.min.js"></script>
+Then in your React app:
+
+```tsx
+import Reportly from '@uxbertlabs/reportly';
+
+function App() {
+  return (
+    <div>
+      {/* Your app content */}
+      <Reportly
+        config={{
+          ui: {
+            position: "bottom-right",
+            theme: "light",
+          },
+        }}
+      />
+    </div>
+  );
+}
+```
+
+**Important:** The CSS is automatically imported when you import the component. If you need to import styles separately, use:
+
+```tsx
+import '@uxbertlabs/reportly/styles';
+```
+
+### Method 2: Script Tag (Vanilla JS)
+
+```html
+<!-- Via CDN -->
+<script src="https://cdn.jsdelivr.net/npm/@uxbertlabs/reportly/dist/reportly.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uxbertlabs/reportly/dist/index.css">
 
 <script>
+  // For vanilla JS, use window.Reportly if available
   Reportly.init({
     ui: {
       position: "bottom-right",
@@ -51,14 +84,6 @@ Open `demo.html` in your browser to see it in action!
 </script>
 ```
 
-### Method 2: ES Module
-
-```javascript
-import Reportly from "./dist/reportly.js";
-
-Reportly.init();
-```
-
 ## Configuration
 
 ```javascript

package/dist/components/AnnotationToolbar.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface AnnotationToolbarProps {
+    className?: string;
+    onUndo?: () => void;
+    onClear?: () => void;
+    onDone?: () => void;
+    onExit?: () => void;
+}
+export declare function AnnotationToolbar({ className, onUndo, onClear, onDone, onExit }: AnnotationToolbarProps): React.JSX.Element | null;
+export default AnnotationToolbar;
+//# sourceMappingURL=AnnotationToolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationToolbar.d.ts","sourceRoot":"","sources":["../../src/components/AnnotationToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,SAAc,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,sBAAsB,4BA0J5G;AAED,eAAe,iBAAiB,CAAC"}

package/dist/components/FloatingButton.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface FloatingButtonProps {
+    className?: string;
+}
+export declare function FloatingButton({ className }: FloatingButtonProps): React.JSX.Element | null;
+export default FloatingButton;
+//# sourceMappingURL=FloatingButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingButton.d.ts","sourceRoot":"","sources":["../../src/components/FloatingButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAc,EAAE,EAAE,mBAAmB,4BAmCrE;AAED,eAAe,cAAc,CAAC"}

package/dist/components/IssueModal.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface IssueModalProps {
+    className?: string;
+}
+export declare function IssueModal({ className }: IssueModalProps): React.JSX.Element | null;
+export default IssueModal;
+//# sourceMappingURL=IssueModal.d.ts.map

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

@@ -0,0 +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,4BAkX7D;AAED,eAAe,UAAU,CAAC"}

package/dist/components/Logo.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const Logo: () => React.JSX.Element;
+export default Logo;
+//# sourceMappingURL=Logo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../src/components/Logo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,IAAI,yBAgBT,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/Reportly.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ReportlyConfig } from '../types';
+interface ReportlyProps {
+    config?: Partial<ReportlyConfig>;
+}
+export declare function Reportly({ config }: ReportlyProps): React.JSX.Element;
+export default Reportly;
+//# sourceMappingURL=Reportly.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Reportly.d.ts","sourceRoot":"","sources":["../../src/components/Reportly.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,UAAU,aAAa;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAClC;AAkFD,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,EAAE,aAAa,qBAMjD;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/ReportlyProvider.d.ts

@@ -0,0 +1,41 @@
+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';
+    currentTool: string;
+    currentColor: string;
+    config: ReportlyConfig;
+}
+interface ReportlyContextType {
+    state: ReportlyState;
+    annotationManager: AnnotationManager | null;
+    setAnnotationManager: (manager: AnnotationManager | null) => void;
+    openModal: () => void;
+    closeModal: () => void;
+    startAnnotation: () => void;
+    endAnnotation: () => void;
+    captureScreenshot: (mode?: 'viewport' | 'fullpage') => Promise<void>;
+    retakeScreenshot: () => Promise<void>;
+    setTool: (tool: AnnotationTool) => void;
+    setColor: (color: string) => void;
+    submitIssue: (issueData: IssueData) => void;
+    submitToN8n: (issueData: IssueData) => Promise<N8nResponse>;
+    exportToJSON: (issue: CompleteIssue) => void;
+    updateConfig: (config: Partial<ReportlyConfig>) => void;
+    updateScreenshot: (screenshot: string) => void;
+    reset: () => void;
+}
+interface ReportlyProviderProps {
+    children: ReactNode;
+    config?: Partial<ReportlyConfig>;
+}
+export declare function ReportlyProvider({ children, config }: ReportlyProviderProps): React.JSX.Element;
+export declare function useReportly(): ReportlyContextType;
+export {};
+//# sourceMappingURL=ReportlyProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReportlyProvider.d.ts","sourceRoot":"","sources":["../../src/components/ReportlyProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAyC,SAAS,EAAe,MAAM,OAAO,CAAC;AAC7F,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"}

package/dist/features/annotation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"annotation.d.ts","sourceRoot":"","sources":["../../src/features/annotation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,UAAU,CAAC;AAElE,cAAM,iBAAiB;IACrB,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,GAAG,CAAkC;IAC7C,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,WAAW,CAAiB;IACpC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,SAAS,CAA0B;IAC3C,OAAO,CAAC,qBAAqB,CAA6E;;IAiB1G,YAAY,IAAI,iBAAiB;IA2BjC,OAAO,CAAC,gBAAgB;IA8BxB,IAAI,CAAC,IAAI,GAAE,UAAU,GAAG,UAAuB,GAAG,IAAI;IAsBtD,IAAI,IAAI,IAAI;IAUZ,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAInC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7B,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,eAAe;IAwBvB,OAAO,CAAC,aAAa;IA0CrB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,QAAQ;IAehB,OAAO,CAAC,SAAS;IA8BjB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,eAAe;IA+DvB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,QAAQ;IAuBhB,OAAO,CAAC,MAAM;IAmBd,IAAI,IAAI,IAAI;IAOZ,KAAK,IAAI,IAAI;IAKP,yBAAyB,CAAC,cAAc,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IA0BxE,OAAO,IAAI,IAAI;CAOhB;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"annotation.d.ts","sourceRoot":"","sources":["../../src/features/annotation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,UAAU,CAAC;AAElE,cAAM,iBAAiB;IACrB,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,GAAG,CAAkC;IAC7C,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,WAAW,CAAiB;IACpC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,SAAS,CAA0B;IAC3C,OAAO,CAAC,qBAAqB,CAA6E;;IAiB1G,YAAY,IAAI,iBAAiB;IAkCjC,OAAO,CAAC,gBAAgB;IA8BxB,IAAI,CAAC,IAAI,GAAE,UAAU,GAAG,UAAuB,GAAG,IAAI;IAgCtD,IAAI,IAAI,IAAI;IAUZ,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAInC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7B,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,eAAe;IAwBvB,OAAO,CAAC,aAAa;IA0CrB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,QAAQ;IAehB,OAAO,CAAC,SAAS;IA8BjB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,eAAe;IA+DvB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,QAAQ;IAuBhB,OAAO,CAAC,MAAM;IAmBd,IAAI,IAAI,IAAI;IAOZ,KAAK,IAAI,IAAI;IAKP,yBAAyB,CAAC,cAAc,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IA0BxE,OAAO,IAAI,IAAI;CAOhB;AAED,eAAe,iBAAiB,CAAC"}

package/dist/features/n8n-integration.d.ts

@@ -1,4 +1,4 @@
-import type { CompleteIssue } from '../types';
+import type { CompleteIssue } from "../types";
 export interface N8nConfig {
     webhookUrl: string;
     enabled: boolean;
@@ -27,10 +27,14 @@ declare class N8nIntegration {
      */
     sendToN8n(issueData: CompleteIssue): Promise<N8nResponse>;
     /**
-     * Prepare payload for n8n webhook
-     * This formats the data in a structure that's easy to work with in n8n
+     * Convert base64 data URL to Blob
      */
-    private preparePayload;
+    private base64ToBlob;
+    /**
+     * Prepare FormData payload for n8n webhook
+     * This sends the screenshot as a binary file instead of base64 JSON
+     */
+    private prepareFormData;
     /**
      * Test connection to n8n webhook
      */

package/dist/features/n8n-integration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"n8n-integration.d.ts","sourceRoot":"","sources":["../../src/features/n8n-integration.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,WAAW,SAAS;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,cAAM,cAAc;IAClB,OAAO,CAAC,MAAM,CAAmB;gBAErB,MAAM,CAAC,EAAE,SAAS;IAI9B;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI;IAIlC;;OAEG;IACH,SAAS,IAAI,OAAO;IAIpB;;OAEG;IACG,SAAS,CAAC,SAAS,EAAE,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC;IA4F/D;;;OAGG;IACH,OAAO,CAAC,cAAc;IAyCtB;;OAEG;IACG,cAAc,IAAI,OAAO,CAAC,WAAW,CAAC;IAiC5C;;OAEG;IACH,SAAS,IAAI,SAAS,GAAG,IAAI;IAI7B;;OAEG;IACH,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAWhC;;OAEG;IACH,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;CAKnC;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"n8n-integration.d.ts","sourceRoot":"","sources":["../../src/features/n8n-integration.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,WAAW,SAAS;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,cAAM,cAAc;IAClB,OAAO,CAAC,MAAM,CAAmB;gBAErB,MAAM,CAAC,EAAE,SAAS;IAI9B;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI;IAIlC;;OAEG;IACH,SAAS,IAAI,OAAO;IAIpB;;OAEG;IACG,SAAS,CAAC,SAAS,EAAE,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC;IA0F/D;;OAEG;IACH,OAAO,CAAC,YAAY;IAsBpB;;;OAGG;YACW,eAAe;IAkC7B;;OAEG;IACG,cAAc,IAAI,OAAO,CAAC,WAAW,CAAC;IAiC5C;;OAEG;IACH,SAAS,IAAI,SAAS,GAAG,IAAI;IAI7B;;OAEG;IACH,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAWhC;;OAEG;IACH,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;CAKnC;AAED,eAAe,cAAc,CAAC"}