@bugspotter/sdk 0.1.0-alpha.1

package/dist/widget/modal.js

@@ -0,0 +1,299 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BugReportModal = void 0;
+const style_manager_1 = require("./components/style-manager");
+const template_manager_1 = require("./components/template-manager");
+const dom_element_cache_1 = require("./components/dom-element-cache");
+const form_validator_1 = require("./components/form-validator");
+const pii_detection_display_1 = require("./components/pii-detection-display");
+const redaction_canvas_1 = require("./components/redaction-canvas");
+const screenshot_processor_1 = require("./components/screenshot-processor");
+const sanitize_1 = require("../utils/sanitize");
+const logger_1 = require("../utils/logger");
+const logger = (0, logger_1.getLogger)();
+/**
+ * BugReportModal
+ *
+ * Refactored to follow SOLID principles
+ * Acts as a lightweight coordinator for specialized components
+ */
+class BugReportModal {
+    constructor(options) {
+        this.redactionCanvas = null;
+        // State
+        this.originalScreenshot = '';
+        this.piiDetections = [];
+        this.options = options;
+        this.container = document.createElement('div');
+        this.shadow = this.container.attachShadow({ mode: 'open' });
+        // Initialize components
+        this.styleManager = new style_manager_1.StyleManager();
+        this.templateManager = new template_manager_1.TemplateManager();
+        this.domCache = new dom_element_cache_1.DOMElementCache();
+        this.validator = new form_validator_1.FormValidator();
+        this.piiDisplay = new pii_detection_display_1.PIIDetectionDisplay();
+        this.screenshotProcessor = new screenshot_processor_1.ScreenshotProcessor();
+        // Bind event handler
+        this.handleEscapeKey = this.onEscapeKey.bind(this);
+    }
+    /**
+     * Show the modal with optional screenshot
+     */
+    show(screenshotDataUrl) {
+        if (screenshotDataUrl) {
+            this.originalScreenshot = screenshotDataUrl;
+        }
+        // Generate and inject HTML (includes inline styles in shadow DOM)
+        this.shadow.innerHTML = `
+      <style>
+        ${this.styleManager.generateStyles()}
+      </style>
+      ${this.templateManager.generateModalHTML(this.originalScreenshot)}
+    `;
+        // Cache DOM elements
+        this.domCache.initialize(this.shadow);
+        // Initialize error display states
+        const elements = this.domCache.get();
+        elements.titleError.style.display = 'none';
+        elements.descriptionError.style.display = 'none';
+        // Setup components
+        this.setupRedactionCanvas();
+        this.attachEventListeners();
+        // Add to DOM
+        document.body.appendChild(this.container);
+        // Focus first input
+        elements.titleInput.focus();
+    }
+    /**
+     * Close and cleanup the modal
+     */
+    close() {
+        // Remove keyboard listener
+        document.removeEventListener('keydown', this.handleEscapeKey);
+        // Cleanup components
+        if (this.redactionCanvas) {
+            this.redactionCanvas.destroy();
+            this.redactionCanvas = null;
+        }
+        // Remove from DOM
+        if (this.container.parentNode) {
+            this.container.parentNode.removeChild(this.container);
+        }
+        // Clear cache
+        this.domCache.clear();
+        // Call onClose callback
+        if (this.options.onClose) {
+            this.options.onClose();
+        }
+    }
+    /**
+     * Destroy the modal (alias for close)
+     */
+    destroy() {
+        this.close();
+    }
+    // Private helper methods
+    setupRedactionCanvas() {
+        const elements = this.domCache.get();
+        if (!elements.redactionCanvas || !elements.screenshotImg) {
+            return;
+        }
+        try {
+            this.redactionCanvas = new redaction_canvas_1.RedactionCanvas(elements.redactionCanvas);
+            this.redactionCanvas.initializeCanvas(elements.screenshotImg);
+        }
+        catch (error) {
+            // Canvas 2D context not available (e.g., in test environment)
+            // Redaction features will be disabled
+            (0, logger_1.getLogger)().warn('Canvas redaction not available:', error);
+            this.redactionCanvas = null;
+        }
+    }
+    attachEventListeners() {
+        const elements = this.domCache.get();
+        // Close button
+        elements.closeButton.addEventListener('click', () => {
+            return this.close();
+        });
+        // Escape key to close
+        document.addEventListener('keydown', this.handleEscapeKey);
+        // Note: Overlay click does NOT close modal (improved UX to prevent accidental data loss)
+        // Form submission
+        elements.form.addEventListener('submit', (e) => {
+            return this.handleSubmit(e);
+        });
+        // Submit button click (manually trigger form submit for test compatibility)
+        elements.submitButton.addEventListener('click', () => {
+            const submitEvent = new Event('submit', { bubbles: true, cancelable: true });
+            elements.form.dispatchEvent(submitEvent);
+        });
+        // Cancel button
+        elements.cancelButton.addEventListener('click', () => {
+            return this.close();
+        });
+        // Real-time validation
+        elements.titleInput.addEventListener('input', () => {
+            return this.validateField('title');
+        });
+        elements.descriptionTextarea.addEventListener('input', () => {
+            this.validateField('description');
+            this.checkForPII();
+        });
+        // Redaction controls
+        if (elements.redactButton && this.redactionCanvas) {
+            elements.redactButton.addEventListener('click', () => {
+                return this.toggleRedactionMode();
+            });
+        }
+        if (elements.clearButton && this.redactionCanvas) {
+            elements.clearButton.addEventListener('click', () => {
+                return this.clearRedactions();
+            });
+        }
+        // PII confirmation
+        elements.piiConfirmCheckbox.addEventListener('change', () => {
+            return this.updateSubmitButton();
+        });
+    }
+    validateField(fieldName) {
+        const elements = this.domCache.get();
+        const value = fieldName === 'title' ? elements.titleInput.value : elements.descriptionTextarea.value;
+        const error = this.validator.validateField(fieldName, value);
+        const errorElement = fieldName === 'title' ? elements.titleError : elements.descriptionError;
+        if (error) {
+            errorElement.textContent = error;
+            errorElement.style.display = 'block';
+        }
+        else {
+            errorElement.textContent = '';
+            errorElement.style.display = 'none';
+        }
+    }
+    checkForPII() {
+        const elements = this.domCache.get();
+        const text = `${elements.titleInput.value} ${elements.descriptionTextarea.value}`;
+        // Create temporary sanitizer to detect PII
+        const sanitizer = (0, sanitize_1.createSanitizer)({ enabled: true });
+        const detections = sanitizer.detectPII(text);
+        // Convert to PIIDetection array
+        this.piiDetections = Array.from(detections.entries()).map(([type, count]) => {
+            return {
+                type,
+                count,
+            };
+        });
+        if (this.piiDetections.length > 0) {
+            elements.piiSection.style.display = 'block';
+            this.piiDisplay.render(this.piiDetections, elements.piiContent);
+        }
+        else {
+            elements.piiSection.style.display = 'none';
+            elements.piiConfirmCheckbox.checked = false;
+        }
+        this.updateSubmitButton();
+    }
+    updateSubmitButton() {
+        const elements = this.domCache.get();
+        const hasPII = this.piiDetections.length > 0;
+        const piiConfirmed = elements.piiConfirmCheckbox.checked;
+        elements.submitButton.disabled = hasPII && !piiConfirmed;
+    }
+    toggleRedactionMode() {
+        const elements = this.domCache.get();
+        if (!this.redactionCanvas || !elements.redactButton) {
+            return;
+        }
+        const isActive = this.redactionCanvas.toggleRedactionMode();
+        if (isActive) {
+            elements.redactButton.classList.add('active');
+            elements.redactButton.textContent = '✓ Redacting...';
+        }
+        else {
+            elements.redactButton.classList.remove('active');
+            elements.redactButton.textContent = '✏️ Redact Area';
+        }
+    }
+    clearRedactions() {
+        if (this.redactionCanvas) {
+            this.redactionCanvas.clearRedactions();
+        }
+    }
+    async handleSubmit(e) {
+        e.preventDefault();
+        const elements = this.domCache.get();
+        const formData = {
+            title: elements.titleInput.value,
+            description: elements.descriptionTextarea.value,
+            piiDetected: this.piiDetections.length > 0,
+            piiConfirmed: elements.piiConfirmCheckbox.checked,
+        };
+        const validation = this.validator.validate(formData);
+        if (!validation.isValid) {
+            // Display errors
+            if (validation.errors.title) {
+                elements.titleError.textContent = validation.errors.title;
+                elements.titleError.style.display = 'block';
+            }
+            else {
+                elements.titleError.textContent = '';
+                elements.titleError.style.display = 'none';
+            }
+            if (validation.errors.description) {
+                elements.descriptionError.textContent = validation.errors.description;
+                elements.descriptionError.style.display = 'block';
+            }
+            else {
+                elements.descriptionError.textContent = '';
+                elements.descriptionError.style.display = 'none';
+            }
+            if (validation.errors.piiConfirmation) {
+                alert(validation.errors.piiConfirmation);
+            }
+            return;
+        }
+        // Clear any previous error messages on successful validation
+        elements.titleError.style.display = 'none';
+        elements.descriptionError.style.display = 'none';
+        // Prepare screenshot with redactions
+        let finalScreenshot = this.originalScreenshot;
+        if (this.redactionCanvas && this.redactionCanvas.getRedactions().length > 0) {
+            try {
+                finalScreenshot = await this.screenshotProcessor.mergeRedactions(this.originalScreenshot, this.redactionCanvas.getCanvas());
+            }
+            catch (mergeError) {
+                logger.error('Failed to merge redactions:', mergeError);
+                finalScreenshot = this.originalScreenshot;
+            }
+        }
+        // Update original screenshot for submission
+        this.originalScreenshot = finalScreenshot;
+        // Submit
+        const bugReportData = {
+            title: formData.title.trim(),
+            description: formData.description.trim(),
+        };
+        try {
+            await this.options.onSubmit(bugReportData);
+            this.close();
+        }
+        catch (error) {
+            (0, logger_1.getLogger)().error('Error submitting bug report:', error);
+            alert('Failed to submit bug report. Please try again.');
+        }
+    }
+    /**
+     * Get the final screenshot (with redactions applied)
+     */
+    getScreenshot() {
+        return this.originalScreenshot;
+    }
+    /**
+     * Handle Escape key press to close modal
+     */
+    onEscapeKey(e) {
+        if (e.key === 'Escape') {
+            this.close();
+        }
+    }
+}
+exports.BugReportModal = BugReportModal;

package/docs/CDN.md

@@ -0,0 +1,213 @@
+# Using BugSpotter SDK via CDN
+
+The BugSpotter SDK is available via CDN for easy integration without npm installation.
+
+## 🚀 Quick Start
+
+Add the SDK to your HTML file:
+
+```html
+<script src="https://cdn.bugspotter.io/sdk/bugspotter-latest.min.js"></script>
+<script>
+  const bugSpotter = window.BugSpotter.init({
+    apiKey: 'bgs_your_api_key',
+    endpoint: 'https://api.bugspotter.io',
+  });
+</script>
+```
+
+## 📦 CDN URLs
+
+### Production (Versioned)
+
+**Recommended for production use** - immutable, cached for 1 year:
+
+```html
+<!-- Specific version (replace X.Y.Z with actual version) -->
+<script src="https://cdn.bugspotter.io/sdk/bugspotter-X.Y.Z.min.js"></script>
+```
+
+**Example:**
+
+```html
+<script src="https://cdn.bugspotter.io/sdk/bugspotter-0.1.0.min.js"></script>
+```
+
+### Development (Latest)
+
+**For development/testing only** - auto-updates to latest version:
+
+```html
+<script src="https://cdn.bugspotter.io/sdk/bugspotter-latest.min.js"></script>
+```
+
+⚠️ **Warning:** The `latest` version updates automatically. Use versioned URLs in production to prevent breaking changes.
+
+## 🔒 Subresource Integrity (SRI)
+
+For enhanced security, use SRI hashes to verify file integrity:
+
+```html
+<script
+  src="https://cdn.bugspotter.io/sdk/bugspotter-0.1.0.min.js"
+  integrity="sha384-..."
+  crossorigin="anonymous"
+></script>
+```
+
+To generate SRI hash for a specific version:
+
+```bash
+curl https://cdn.bugspotter.io/sdk/bugspotter-0.1.0.min.js | openssl dgst -sha384 -binary | openssl base64 -A
+```
+
+## 📝 Complete Example
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>BugSpotter Example</title>
+  </head>
+  <body>
+    <h1>My Application</h1>
+    <button id="trigger-error">Trigger Test Error</button>
+
+    <!-- Load BugSpotter SDK -->
+    <script src="https://cdn.bugspotter.io/sdk/bugspotter-0.1.0.min.js"></script>
+
+    <script>
+      // Initialize BugSpotter
+      const bugSpotter = window.BugSpotter.init({
+        apiKey: 'bgs_your_api_key',
+        endpoint: 'https://api.bugspotter.io',
+        sessionReplay: true,
+        captureConsole: true,
+        captureNetwork: true,
+      });
+
+      // Test error reporting
+      document.getElementById('trigger-error').addEventListener('click', () => {
+        try {
+          throw new Error('Test error from CDN example');
+        } catch (error) {
+          console.error('Caught error:', error);
+        }
+      });
+    </script>
+  </body>
+</html>
+```
+
+## 🌐 Alternative CDN Options
+
+If our primary CDN is unavailable, you can also use:
+
+### unpkg
+
+```html
+<!-- Auto-resolves to browser field (recommended) -->
+<script src="https://unpkg.com/@bugspotter/sdk@latest"></script>
+
+<!-- Or explicit path with specific version -->
+<script src="https://unpkg.com/@bugspotter/sdk@0.1.0/dist/bugspotter.min.js"></script>
+```
+
+### jsDelivr
+
+```html
+<!-- Auto-resolves to browser field (recommended) -->
+<script src="https://cdn.jsdelivr.net/npm/@bugspotter/sdk@latest"></script>
+
+<!-- Or explicit path with specific version -->
+<script src="https://cdn.jsdelivr.net/npm/@bugspotter/sdk@0.1.0/dist/bugspotter.min.js"></script>
+```
+
+## 🆚 CDN vs npm
+
+| Feature             | CDN                     | npm                             |
+| ------------------- | ----------------------- | ------------------------------- |
+| **Setup**           | Add `<script>` tag      | `npm install @bugspotter/sdk`   |
+| **Bundle Size**     | ~99KB (gzipped: ~35KB)  | Tree-shakable, optimized        |
+| **Updates**         | Change version in URL   | `npm update`                    |
+| **TypeScript**      | No types                | Full TypeScript support         |
+| **Best For**        | Quick prototypes, demos | Production apps, React/Vue/etc. |
+| **Browser Support** | ES2017+ (95% coverage)  | Configurable via bundler        |
+
+## 📊 Version History
+
+Check available versions:
+
+- [npm package page](https://www.npmjs.com/package/@bugspotter/sdk?activeTab=versions)
+- [GitHub releases](https://github.com/apexbridge-tech/bugspotter/releases)
+
+## ⚙️ Configuration
+
+All configuration options from npm package work with CDN:
+
+```javascript
+window.BugSpotter.init({
+  apiKey: 'bgs_your_api_key',
+  endpoint: 'https://api.bugspotter.io',
+
+  // Session replay
+  sessionReplay: true,
+
+  // Data capture
+  captureConsole: true,
+  captureNetwork: true,
+  captureScreenshot: true,
+
+  // Privacy
+  sanitizePII: true,
+
+  // Performance
+  sampleRate: 1.0, // 100% of sessions
+
+  // Custom data
+  metadata: {
+    environment: 'production',
+    version: '1.0.0',
+  },
+});
+```
+
+See [Configuration Guide](./README.md#configuration) for all options.
+
+## 🔧 Troubleshooting
+
+### Script Not Loading
+
+1. **Check browser console** for CORS or loading errors
+2. **Verify URL** - ensure version exists
+3. **Try alternative CDN** (unpkg or jsDelivr)
+
+### Global Not Found
+
+If `window.BugSpotter` is undefined:
+
+1. **Script loaded?** Check Network tab in DevTools
+2. **Correct order?** SDK must load before initialization
+3. **No conflicts?** Another script may override `window.BugSpotter`
+
+### Old Version Cached
+
+If updates aren't showing:
+
+1. **Hard refresh:** Ctrl+Shift+R (Cmd+Shift+R on Mac)
+2. **Use versioned URL** in production (not `latest`)
+3. **Check cache headers** in Network tab
+
+## 📚 Next Steps
+
+- [Full SDK Documentation](./README.md)
+- [Framework Integration](./FRAMEWORK_INTEGRATION.md)
+- [Session Replay Guide](./SESSION_REPLAY.md)
+- [API Reference](../../README.md#api-reference)
+
+## 🆘 Support
+
+- **Issues:** [GitHub Issues](https://github.com/apexbridge-tech/bugspotter/issues)
+- **Discussions:** [GitHub Discussions](https://github.com/apexbridge-tech/bugspotter/discussions)
+- **Security:** security@bugspotter.io