@bugspotter/sdk 0.1.0-alpha.1

package/dist/widget/components/style-manager.js

@@ -0,0 +1,296 @@
+"use strict";
+/**
+ * StyleManager
+ *
+ * Responsibility: Generate and manage CSS styles for the bug report modal
+ * Follows SRP: Only handles style generation and theming
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyleManager = void 0;
+class StyleManager {
+    constructor(config = {}) {
+        this.config = {
+            primaryColor: config.primaryColor || '#007bff',
+            dangerColor: config.dangerColor || '#dc3545',
+            borderRadius: config.borderRadius || '4px',
+            fontFamily: config.fontFamily || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+            zIndex: config.zIndex || 999999,
+        };
+    }
+    /**
+     * Generate complete CSS stylesheet for the modal
+     */
+    generateStyles() {
+        return `
+      .overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: ${this.config.zIndex};
+        font-family: ${this.config.fontFamily};
+      }
+      
+      .modal {
+        background: white;
+        border-radius: 8px;
+        width: 90%;
+        max-width: 600px;
+        max-height: 90vh;
+        overflow-y: auto;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      }
+      
+      .header {
+        padding: 20px;
+        border-bottom: 1px solid #e0e0e0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      
+      .header h2 {
+        margin: 0;
+        font-size: 20px;
+        font-weight: 600;
+      }
+      
+      .close {
+        background: none;
+        border: none;
+        font-size: 24px;
+        cursor: pointer;
+        color: #666;
+        padding: 0;
+        width: 30px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: ${this.config.borderRadius};
+      }
+      
+      .close:hover {
+        background: #f0f0f0;
+      }
+      
+      .body {
+        padding: 20px;
+      }
+      
+      .form-group {
+        margin-bottom: 20px;
+      }
+      
+      .label {
+        display: block;
+        margin-bottom: 8px;
+        font-weight: 500;
+        font-size: 14px;
+      }
+      
+      .input,
+      .textarea {
+        width: 100%;
+        padding: 10px;
+        border: 1px solid #ddd;
+        border-radius: ${this.config.borderRadius};
+        font-size: 14px;
+        font-family: ${this.config.fontFamily};
+        box-sizing: border-box;
+      }
+      
+      .input:focus,
+      .textarea:focus {
+        outline: none;
+        border-color: ${this.config.primaryColor};
+      }
+      
+      .textarea {
+        min-height: 100px;
+        resize: vertical;
+      }
+      
+      .screenshot-container {
+        margin-top: 10px;
+        position: relative;
+      }
+      
+      .screenshot {
+        max-width: 100%;
+        border: 1px solid #ddd;
+        border-radius: ${this.config.borderRadius};
+      }
+      
+      .redaction-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        cursor: crosshair;
+        border: 2px solid ${this.config.primaryColor};
+        border-radius: ${this.config.borderRadius};
+      }
+      
+      .redaction-controls {
+        margin-top: 10px;
+        display: flex;
+        gap: 10px;
+      }
+      
+      .btn-redact,
+      .btn-clear {
+        padding: 8px 16px;
+        border: 1px solid #ddd;
+        border-radius: ${this.config.borderRadius};
+        background: white;
+        cursor: pointer;
+        font-size: 14px;
+      }
+      
+      .btn-redact:hover,
+      .btn-clear:hover {
+        background: #f5f5f5;
+      }
+      
+      .btn-redact.active {
+        background: ${this.config.primaryColor};
+        color: white;
+        border-color: ${this.config.primaryColor};
+      }
+      
+      .pii-section {
+        margin-top: 20px;
+        padding: 15px;
+        background: #fff3cd;
+        border: 1px solid #ffc107;
+        border-radius: ${this.config.borderRadius};
+      }
+      
+      .pii-title {
+        margin: 0 0 10px 0;
+        font-size: 14px;
+        font-weight: 600;
+        color: #856404;
+      }
+      
+      .pii-list {
+        margin: 0;
+        padding-left: 20px;
+        font-size: 13px;
+        color: #856404;
+      }
+      
+      .pii-badge {
+        display: inline-block;
+        padding: 2px 8px;
+        margin: 2px;
+        background: #ffc107;
+        color: #856404;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 500;
+      }
+      
+      .checkbox-group {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-top: 15px;
+      }
+      
+      .checkbox {
+        width: 18px;
+        height: 18px;
+        cursor: pointer;
+      }
+      
+      .checkbox-label {
+        margin: 0;
+        font-size: 14px;
+        cursor: pointer;
+        user-select: none;
+      }
+      
+      .footer {
+        padding: 20px;
+        border-top: 1px solid #e0e0e0;
+        display: flex;
+        justify-content: flex-end;
+        gap: 10px;
+      }
+      
+      .btn {
+        padding: 10px 20px;
+        border: none;
+        border-radius: ${this.config.borderRadius};
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: 500;
+      }
+      
+      .btn-primary {
+        background: ${this.config.primaryColor};
+        color: white;
+      }
+      
+      .btn-primary:hover {
+        opacity: 0.9;
+      }
+      
+      .btn-primary:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      
+      .btn-secondary {
+        background: #6c757d;
+        color: white;
+      }
+      
+      .btn-secondary:hover {
+        opacity: 0.9;
+      }
+      
+      .error {
+        color: ${this.config.dangerColor};
+        font-size: 12px;
+        margin-top: 4px;
+      }
+    `;
+    }
+    /**
+     * Inject styles into document head
+     */
+    injectStyles() {
+        const styleElement = document.createElement('style');
+        styleElement.textContent = this.generateStyles();
+        document.head.appendChild(styleElement);
+        return styleElement;
+    }
+    /**
+     * Remove injected styles
+     */
+    removeStyles(styleElement) {
+        if (styleElement && styleElement.parentNode) {
+            styleElement.parentNode.removeChild(styleElement);
+        }
+    }
+    /**
+     * Update configuration and regenerate styles
+     */
+    updateConfig(config) {
+        this.config = Object.assign(Object.assign({}, this.config), config);
+    }
+    /**
+     * Get current configuration
+     */
+    getConfig() {
+        return Object.assign({}, this.config);
+    }
+}
+exports.StyleManager = StyleManager;

package/dist/widget/components/template-manager.d.ts

@@ -0,0 +1,66 @@
+/**
+ * TemplateManager
+ *
+ * Responsibility: Generate HTML templates for modal components
+ * Follows SRP: Only handles HTML structure generation
+ */
+export interface TemplateConfig {
+    title?: string;
+    titlePlaceholder?: string;
+    descriptionPlaceholder?: string;
+    submitButtonText?: string;
+    cancelButtonText?: string;
+    showScreenshot?: boolean;
+}
+export declare class TemplateManager {
+    private config;
+    constructor(config?: TemplateConfig);
+    /**
+     * Generate complete modal HTML structure
+     */
+    generateModalHTML(screenshotDataUrl?: string): string;
+    /**
+     * Generate modal header
+     */
+    private generateHeader;
+    /**
+     * Generate modal body with form
+     */
+    private generateBody;
+    /**
+     * Generate title input field
+     */
+    private generateTitleField;
+    /**
+     * Generate description textarea field
+     */
+    private generateDescriptionField;
+    /**
+     * Generate screenshot section with redaction controls
+     */
+    private generateScreenshotSection;
+    /**
+     * Generate PII detection section (initially hidden)
+     */
+    private generatePIISection;
+    /**
+     * Generate modal footer with action buttons
+     */
+    private generateFooter;
+    /**
+     * Generate PII badge HTML
+     */
+    generatePIIBadge(type: string, count: number): string;
+    /**
+     * Escape HTML to prevent XSS
+     */
+    private escapeHtml;
+    /**
+     * Update configuration
+     */
+    updateConfig(config: Partial<TemplateConfig>): void;
+    /**
+     * Get current configuration
+     */
+    getConfig(): Required<TemplateConfig>;
+}

package/dist/widget/components/template-manager.js

@@ -0,0 +1,198 @@
+"use strict";
+/**
+ * TemplateManager
+ *
+ * Responsibility: Generate HTML templates for modal components
+ * Follows SRP: Only handles HTML structure generation
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TemplateManager = void 0;
+class TemplateManager {
+    constructor(config = {}) {
+        this.config = {
+            title: config.title || 'Report a Bug',
+            titlePlaceholder: config.titlePlaceholder || 'Brief description of the issue',
+            descriptionPlaceholder: config.descriptionPlaceholder || 'Detailed description of what happened...',
+            submitButtonText: config.submitButtonText || 'Submit Bug Report',
+            cancelButtonText: config.cancelButtonText || 'Cancel',
+            showScreenshot: config.showScreenshot !== false,
+        };
+    }
+    /**
+     * Generate complete modal HTML structure
+     */
+    generateModalHTML(screenshotDataUrl) {
+        return `
+      <div class="overlay">
+        <div class="modal">
+          ${this.generateHeader()}
+          ${this.generateBody(screenshotDataUrl)}
+          ${this.generateFooter()}
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Generate modal header
+     */
+    generateHeader() {
+        return `
+      <div class="header">
+        <h2>${this.escapeHtml(this.config.title)}</h2>
+        <button class="close" aria-label="Close">&times;</button>
+      </div>
+    `;
+    }
+    /**
+     * Generate modal body with form
+     */
+    generateBody(screenshotDataUrl) {
+        return `
+      <div class="body">
+        <form class="form">
+          ${this.generateTitleField()}
+          ${this.generateDescriptionField()}
+          ${this.config.showScreenshot && screenshotDataUrl ? this.generateScreenshotSection(screenshotDataUrl) : ''}
+          ${this.generatePIISection()}
+        </form>
+      </div>
+    `;
+    }
+    /**
+     * Generate title input field
+     */
+    generateTitleField() {
+        return `
+      <div class="form-group">
+        <label class="label" for="title">Title *</label>
+        <input
+          type="text"
+          id="title"
+          class="input"
+          placeholder="${this.escapeHtml(this.config.titlePlaceholder)}"
+          required
+        />
+        <div class="error" id="title-error"></div>
+      </div>
+    `;
+    }
+    /**
+     * Generate description textarea field
+     */
+    generateDescriptionField() {
+        return `
+      <div class="form-group">
+        <label class="label" for="description">Description *</label>
+        <textarea
+          id="description"
+          class="textarea"
+          placeholder="${this.escapeHtml(this.config.descriptionPlaceholder)}"
+          required
+        ></textarea>
+        <div class="error" id="description-error"></div>
+      </div>
+    `;
+    }
+    /**
+     * Generate screenshot section with redaction controls
+     */
+    generateScreenshotSection(screenshotDataUrl) {
+        return `
+      <div class="form-group">
+        <label class="label">Screenshot</label>
+        <div class="screenshot-container">
+          <img 
+            src="${screenshotDataUrl}" 
+            alt="Bug screenshot" 
+            class="screenshot"
+            id="screenshot"
+          />
+          <canvas 
+            class="redaction-canvas" 
+            id="redaction-canvas"
+            style="display: none;"
+          ></canvas>
+        </div>
+        <div class="redaction-controls">
+          <button 
+            type="button" 
+            class="btn-redact" 
+            id="btn-redact"
+          >
+            ✏️ Redact Area
+          </button>
+          <button 
+            type="button" 
+            class="btn-clear" 
+            id="btn-clear"
+          >
+            🗑️ Clear Redactions
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Generate PII detection section (initially hidden)
+     */
+    generatePIISection() {
+        return `
+      <div class="pii-section" id="pii-section" style="display: none;">
+        <h3 class="pii-title">⚠️ Potential PII Detected</h3>
+        <div id="pii-content"></div>
+        <div class="checkbox-group">
+          <input 
+            type="checkbox" 
+            id="pii-confirm" 
+            class="checkbox"
+          />
+          <label for="pii-confirm" class="checkbox-label">
+            I have reviewed and redacted sensitive information
+          </label>
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Generate modal footer with action buttons
+     */
+    generateFooter() {
+        return `
+      <div class="footer">
+        <button type="button" class="btn btn-secondary" id="btn-cancel">
+          ${this.escapeHtml(this.config.cancelButtonText)}
+        </button>
+        <button type="submit" class="btn btn-primary submit" id="btn-submit">
+          ${this.escapeHtml(this.config.submitButtonText)}
+        </button>
+      </div>
+    `;
+    }
+    /**
+     * Generate PII badge HTML
+     */
+    generatePIIBadge(type, count) {
+        return `<span class="bugspotter-pii-badge">${this.escapeHtml(type)}: ${count}</span>`;
+    }
+    /**
+     * Escape HTML to prevent XSS
+     */
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    /**
+     * Update configuration
+     */
+    updateConfig(config) {
+        this.config = Object.assign(Object.assign({}, this.config), config);
+    }
+    /**
+     * Get current configuration
+     */
+    getConfig() {
+        return Object.assign({}, this.config);
+    }
+}
+exports.TemplateManager = TemplateManager;

package/dist/widget/modal.d.ts

@@ -0,0 +1,62 @@
+export interface BugReportData {
+    title: string;
+    description: string;
+}
+export interface PIIDetection {
+    type: string;
+    count: number;
+}
+export interface BugReportModalOptions {
+    onSubmit: (data: BugReportData) => void | Promise<void>;
+    onClose?: () => void;
+}
+/**
+ * BugReportModal
+ *
+ * Refactored to follow SOLID principles
+ * Acts as a lightweight coordinator for specialized components
+ */
+export declare class BugReportModal {
+    private container;
+    private shadow;
+    private options;
+    private styleManager;
+    private templateManager;
+    private domCache;
+    private validator;
+    private piiDisplay;
+    private redactionCanvas;
+    private screenshotProcessor;
+    private originalScreenshot;
+    private piiDetections;
+    private handleEscapeKey;
+    constructor(options: BugReportModalOptions);
+    /**
+     * Show the modal with optional screenshot
+     */
+    show(screenshotDataUrl?: string): void;
+    /**
+     * Close and cleanup the modal
+     */
+    close(): void;
+    /**
+     * Destroy the modal (alias for close)
+     */
+    destroy(): void;
+    private setupRedactionCanvas;
+    private attachEventListeners;
+    private validateField;
+    private checkForPII;
+    private updateSubmitButton;
+    private toggleRedactionMode;
+    private clearRedactions;
+    private handleSubmit;
+    /**
+     * Get the final screenshot (with redactions applied)
+     */
+    getScreenshot(): string;
+    /**
+     * Handle Escape key press to close modal
+     */
+    private onEscapeKey;
+}