@bugspotter/sdk 0.1.0-alpha.1

package/dist/widget/button.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingButton = void 0;
+const DEFAULT_BUTTON_OPTIONS = {
+    position: 'bottom-right',
+    icon: '🐛',
+    backgroundColor: '#ef4444',
+    size: 60,
+    offset: { x: 20, y: 20 },
+    zIndex: 999999,
+};
+const BUTTON_STYLES = {
+    transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+    boxShadow: {
+        default: '0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)',
+        hover: '0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1)',
+    },
+    transform: {
+        default: 'scale(1)',
+        hover: 'scale(1.1)',
+        active: 'scale(0.95)',
+    },
+};
+class FloatingButton {
+    constructor(options = {}) {
+        var _a, _b, _c, _d, _e, _f;
+        this.eventHandlers = new Map();
+        this.handleMouseEnter = () => {
+            this.button.style.transform = BUTTON_STYLES.transform.hover;
+            this.button.style.boxShadow = BUTTON_STYLES.boxShadow.hover;
+        };
+        this.handleMouseLeave = () => {
+            this.button.style.transform = BUTTON_STYLES.transform.default;
+            this.button.style.boxShadow = BUTTON_STYLES.boxShadow.default;
+        };
+        this.handleMouseDown = () => {
+            this.button.style.transform = BUTTON_STYLES.transform.active;
+        };
+        this.handleMouseUp = () => {
+            this.button.style.transform = BUTTON_STYLES.transform.hover;
+        };
+        this.options = {
+            position: (_a = options.position) !== null && _a !== void 0 ? _a : DEFAULT_BUTTON_OPTIONS.position,
+            icon: (_b = options.icon) !== null && _b !== void 0 ? _b : DEFAULT_BUTTON_OPTIONS.icon,
+            backgroundColor: (_c = options.backgroundColor) !== null && _c !== void 0 ? _c : DEFAULT_BUTTON_OPTIONS.backgroundColor,
+            size: (_d = options.size) !== null && _d !== void 0 ? _d : DEFAULT_BUTTON_OPTIONS.size,
+            offset: (_e = options.offset) !== null && _e !== void 0 ? _e : DEFAULT_BUTTON_OPTIONS.offset,
+            zIndex: (_f = options.zIndex) !== null && _f !== void 0 ? _f : DEFAULT_BUTTON_OPTIONS.zIndex,
+        };
+        this.button = this.createButton();
+        // Ensure DOM is ready before appending
+        if (document.body) {
+            document.body.appendChild(this.button);
+        }
+        else {
+            document.addEventListener('DOMContentLoaded', () => {
+                document.body.appendChild(this.button);
+            });
+        }
+    }
+    createButton() {
+        const btn = document.createElement('button');
+        btn.textContent = this.options.icon;
+        btn.setAttribute('aria-label', 'Report Bug');
+        btn.setAttribute('data-bugspotter-exclude', 'true');
+        btn.style.cssText = this.getButtonStyles();
+        this.addHoverEffects(btn);
+        return btn;
+    }
+    getButtonStyles() {
+        const { position, size, offset, backgroundColor, zIndex } = this.options;
+        const positionStyles = this.getPositionStyles(position, offset);
+        return `
+      position: fixed;
+      ${positionStyles}
+      width: ${size}px;
+      height: ${size}px;
+      border-radius: 50%;
+      background: ${backgroundColor};
+      color: white;
+      border: none;
+      cursor: pointer;
+      font-size: ${size * 0.5}px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: ${BUTTON_STYLES.boxShadow.default};
+      transition: ${BUTTON_STYLES.transition};
+      z-index: ${zIndex};
+    `;
+    }
+    getPositionStyles(position, offset) {
+        switch (position) {
+            case 'bottom-right':
+                return `bottom: ${offset.y}px; right: ${offset.x}px;`;
+            case 'bottom-left':
+                return `bottom: ${offset.y}px; left: ${offset.x}px;`;
+            case 'top-right':
+                return `top: ${offset.y}px; right: ${offset.x}px;`;
+            case 'top-left':
+                return `top: ${offset.y}px; left: ${offset.x}px;`;
+            default:
+                return `bottom: ${offset.y}px; right: ${offset.x}px;`;
+        }
+    }
+    addHoverEffects(btn) {
+        const handlers = {
+            mouseenter: this.handleMouseEnter,
+            mouseleave: this.handleMouseLeave,
+            mousedown: this.handleMouseDown,
+            mouseup: this.handleMouseUp,
+        };
+        Object.entries(handlers).forEach(([event, handler]) => {
+            btn.addEventListener(event, handler);
+            this.eventHandlers.set(event, handler);
+        });
+    }
+    onClick(handler) {
+        this.button.addEventListener('click', handler);
+    }
+    show() {
+        this.button.style.display = 'flex';
+    }
+    hide() {
+        this.button.style.display = 'none';
+    }
+    setIcon(icon) {
+        this.button.textContent = icon;
+    }
+    setBackgroundColor(color) {
+        this.button.style.backgroundColor = color;
+    }
+    destroy() {
+        // Remove all event listeners
+        this.eventHandlers.forEach((handler, event) => {
+            this.button.removeEventListener(event, handler);
+        });
+        this.eventHandlers.clear();
+        // Remove button from DOM
+        this.button.remove();
+    }
+}
+exports.FloatingButton = FloatingButton;

package/dist/widget/components/dom-element-cache.d.ts

@@ -0,0 +1,62 @@
+/**
+ * DOMElementCache
+ *
+ * Responsibility: Cache DOM element references to avoid repeated querySelector calls
+ * Follows SRP: Only handles element reference management
+ * Improves Performance: Single querySelector per element
+ */
+export interface ModalElements {
+    overlay: HTMLElement;
+    modal: HTMLElement;
+    closeButton: HTMLElement;
+    form: HTMLFormElement;
+    titleInput: HTMLInputElement;
+    titleError: HTMLElement;
+    descriptionTextarea: HTMLTextAreaElement;
+    descriptionError: HTMLElement;
+    screenshotImg?: HTMLImageElement;
+    redactionCanvas?: HTMLCanvasElement;
+    redactButton?: HTMLButtonElement;
+    clearButton?: HTMLButtonElement;
+    piiSection: HTMLElement;
+    piiContent: HTMLElement;
+    piiConfirmCheckbox: HTMLInputElement;
+    cancelButton: HTMLButtonElement;
+    submitButton: HTMLButtonElement;
+}
+export declare class DOMElementCache {
+    private elements;
+    private container;
+    /**
+     * Initialize cache from a container element or shadow root
+     */
+    initialize(container: HTMLElement | ShadowRoot): ModalElements;
+    /**
+     * Get cached elements (throws if not initialized)
+     */
+    get(): ModalElements;
+    /**
+     * Check if cache is initialized
+     */
+    isInitialized(): boolean;
+    /**
+     * Clear the cache
+     */
+    clear(): void;
+    /**
+     * Get a required element (throws if not found)
+     */
+    private getRequiredElement;
+    /**
+     * Get an optional element (returns undefined if not found)
+     */
+    private getOptionalElement;
+    /**
+     * Refresh a specific element in the cache
+     */
+    refreshElement(key: keyof ModalElements, selector: string): void;
+    /**
+     * Get container element
+     */
+    getContainer(): HTMLElement | ShadowRoot | null;
+}

package/dist/widget/components/dom-element-cache.js

@@ -0,0 +1,105 @@
+"use strict";
+/**
+ * DOMElementCache
+ *
+ * Responsibility: Cache DOM element references to avoid repeated querySelector calls
+ * Follows SRP: Only handles element reference management
+ * Improves Performance: Single querySelector per element
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DOMElementCache = void 0;
+class DOMElementCache {
+    constructor() {
+        this.elements = null;
+        this.container = null;
+    }
+    /**
+     * Initialize cache from a container element or shadow root
+     */
+    initialize(container) {
+        this.container = container;
+        const overlay = this.getRequiredElement('.overlay', container);
+        const modal = this.getRequiredElement('.modal', overlay);
+        const form = this.getRequiredElement('.form', modal);
+        this.elements = {
+            overlay,
+            modal,
+            closeButton: this.getRequiredElement('.close', modal),
+            form,
+            titleInput: this.getRequiredElement('#title', form),
+            titleError: this.getRequiredElement('#title-error', form),
+            descriptionTextarea: this.getRequiredElement('#description', form),
+            descriptionError: this.getRequiredElement('#description-error', form),
+            screenshotImg: this.getOptionalElement('#screenshot', modal),
+            redactionCanvas: this.getOptionalElement('#redaction-canvas', modal),
+            redactButton: this.getOptionalElement('#btn-redact', modal),
+            clearButton: this.getOptionalElement('#btn-clear', modal),
+            piiSection: this.getRequiredElement('#pii-section', modal),
+            piiContent: this.getRequiredElement('#pii-content', modal),
+            piiConfirmCheckbox: this.getRequiredElement('#pii-confirm', modal),
+            cancelButton: this.getRequiredElement('#btn-cancel', modal),
+            submitButton: this.getRequiredElement('#btn-submit', modal),
+        };
+        return this.elements;
+    }
+    /**
+     * Get cached elements (throws if not initialized)
+     */
+    get() {
+        if (!this.elements) {
+            throw new Error('DOMElementCache not initialized. Call initialize() first.');
+        }
+        return this.elements;
+    }
+    /**
+     * Check if cache is initialized
+     */
+    isInitialized() {
+        return this.elements !== null;
+    }
+    /**
+     * Clear the cache
+     */
+    clear() {
+        this.elements = null;
+        this.container = null;
+    }
+    /**
+     * Get a required element (throws if not found)
+     */
+    getRequiredElement(selector, parent) {
+        const searchParent = parent || this.container || document;
+        const element = searchParent.querySelector(selector);
+        if (!element) {
+            throw new Error(`Required element not found: ${selector}`);
+        }
+        return element;
+    }
+    /**
+     * Get an optional element (returns undefined if not found)
+     */
+    getOptionalElement(selector, parent) {
+        const searchParent = parent || this.container || document;
+        const element = searchParent.querySelector(selector);
+        return element || undefined;
+    }
+    /**
+     * Refresh a specific element in the cache
+     */
+    refreshElement(key, selector) {
+        if (!this.elements || !this.container) {
+            throw new Error('DOMElementCache not initialized');
+        }
+        const element = this.container.querySelector(selector);
+        if (element) {
+            this.elements[key] = element;
+        }
+    }
+    /**
+     * Get container element
+     */
+    getContainer() {
+        return this.container;
+    }
+}
+exports.DOMElementCache = DOMElementCache;

package/dist/widget/components/form-validator.d.ts

@@ -0,0 +1,66 @@
+/**
+ * FormValidator
+ *
+ * Responsibility: Validate form input and manage error states
+ * Follows SRP: Only handles validation logic (pure functions)
+ */
+export interface ValidationResult {
+    isValid: boolean;
+    errors: ValidationErrors;
+}
+export interface ValidationErrors {
+    title?: string;
+    description?: string;
+    piiConfirmation?: string;
+}
+export interface FormData {
+    title: string;
+    description: string;
+    piiDetected: boolean;
+    piiConfirmed: boolean;
+}
+export declare class FormValidator {
+    private minTitleLength;
+    private maxTitleLength;
+    private minDescriptionLength;
+    private maxDescriptionLength;
+    constructor(config?: {
+        minTitleLength?: number;
+        maxTitleLength?: number;
+        minDescriptionLength?: number;
+        maxDescriptionLength?: number;
+    });
+    /**
+     * Validate complete form data
+     */
+    validate(data: FormData): ValidationResult;
+    /**
+     * Validate title field
+     */
+    validateTitle(title: string): string | null;
+    /**
+     * Validate description field
+     */
+    validateDescription(description: string): string | null;
+    /**
+     * Validate single field by name
+     */
+    validateField(fieldName: keyof FormData, value: unknown, formData?: Partial<FormData>): string | null;
+    /**
+     * Check if a string is empty or whitespace only
+     */
+    isEmpty(value: string): boolean;
+    /**
+     * Sanitize input (trim whitespace)
+     */
+    sanitizeInput(value: string): string;
+    /**
+     * Get validation configuration
+     */
+    getConfig(): {
+        minTitleLength: number;
+        maxTitleLength: number;
+        minDescriptionLength: number;
+        maxDescriptionLength: number;
+    };
+}

package/dist/widget/components/form-validator.js

@@ -0,0 +1,115 @@
+"use strict";
+/**
+ * FormValidator
+ *
+ * Responsibility: Validate form input and manage error states
+ * Follows SRP: Only handles validation logic (pure functions)
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormValidator = void 0;
+class FormValidator {
+    constructor(config = {}) {
+        this.minTitleLength = config.minTitleLength || 3;
+        this.maxTitleLength = config.maxTitleLength || 200;
+        this.minDescriptionLength = config.minDescriptionLength || 10;
+        this.maxDescriptionLength = config.maxDescriptionLength || 5000;
+    }
+    /**
+     * Validate complete form data
+     */
+    validate(data) {
+        const errors = {};
+        // Validate title
+        const titleError = this.validateTitle(data.title);
+        if (titleError) {
+            errors.title = titleError;
+        }
+        // Validate description
+        const descriptionError = this.validateDescription(data.description);
+        if (descriptionError) {
+            errors.description = descriptionError;
+        }
+        // Validate PII confirmation if PII detected
+        if (data.piiDetected && !data.piiConfirmed) {
+            errors.piiConfirmation = 'Please confirm you have reviewed sensitive information';
+        }
+        return {
+            isValid: Object.keys(errors).length === 0,
+            errors,
+        };
+    }
+    /**
+     * Validate title field
+     */
+    validateTitle(title) {
+        const trimmed = title.trim();
+        if (!trimmed) {
+            return 'Title is required';
+        }
+        if (trimmed.length < this.minTitleLength) {
+            return `Title must be at least ${this.minTitleLength} characters`;
+        }
+        if (trimmed.length > this.maxTitleLength) {
+            return `Title must not exceed ${this.maxTitleLength} characters`;
+        }
+        return null;
+    }
+    /**
+     * Validate description field
+     */
+    validateDescription(description) {
+        const trimmed = description.trim();
+        if (!trimmed) {
+            return 'Description is required';
+        }
+        if (trimmed.length < this.minDescriptionLength) {
+            return `Description must be at least ${this.minDescriptionLength} characters`;
+        }
+        if (trimmed.length > this.maxDescriptionLength) {
+            return `Description must not exceed ${this.maxDescriptionLength} characters`;
+        }
+        return null;
+    }
+    /**
+     * Validate single field by name
+     */
+    validateField(fieldName, value, formData) {
+        switch (fieldName) {
+            case 'title':
+                return this.validateTitle(value);
+            case 'description':
+                return this.validateDescription(value);
+            case 'piiConfirmed':
+                if ((formData === null || formData === void 0 ? void 0 : formData.piiDetected) && !value) {
+                    return 'Please confirm you have reviewed sensitive information';
+                }
+                return null;
+            default:
+                return null;
+        }
+    }
+    /**
+     * Check if a string is empty or whitespace only
+     */
+    isEmpty(value) {
+        return !value || value.trim().length === 0;
+    }
+    /**
+     * Sanitize input (trim whitespace)
+     */
+    sanitizeInput(value) {
+        return value.trim();
+    }
+    /**
+     * Get validation configuration
+     */
+    getConfig() {
+        return {
+            minTitleLength: this.minTitleLength,
+            maxTitleLength: this.maxTitleLength,
+            minDescriptionLength: this.minDescriptionLength,
+            maxDescriptionLength: this.maxDescriptionLength,
+        };
+    }
+}
+exports.FormValidator = FormValidator;

package/dist/widget/components/pii-detection-display.d.ts

@@ -0,0 +1,64 @@
+/**
+ * PIIDetectionDisplay
+ *
+ * Responsibility: Render PII detection UI and manage PII-related display logic
+ * Follows SRP: Only handles PII visualization
+ */
+import type { PIIDetection } from '../modal';
+export interface PIIDisplayConfig {
+    showExamples?: boolean;
+    groupByType?: boolean;
+    maxExamplesPerType?: number;
+}
+export declare class PIIDetectionDisplay {
+    private config;
+    constructor(config?: PIIDisplayConfig);
+    /**
+     * Render PII detection information into a container
+     */
+    render(piiDetections: PIIDetection[], container: HTMLElement): void;
+    /**
+     * Render PII grouped by type with badges
+     */
+    private renderGroupedPII;
+    /**
+     * Render PII as a simple list
+     */
+    private renderListPII;
+    /**
+     * Create a PII type badge
+     */
+    private createBadge;
+    /**
+     * Group PII detections by type
+     */
+    private groupByType;
+    /**
+     * Get summary statistics about PII detections
+     */
+    getSummary(piiDetections: PIIDetection[]): {
+        totalCount: number;
+        typeCount: number;
+        types: string[];
+    };
+    /**
+     * Check if PII detections contain a specific type
+     */
+    hasType(piiDetections: PIIDetection[], type: string): boolean;
+    /**
+     * Filter PII detections by type
+     */
+    filterByType(piiDetections: PIIDetection[], type: string): PIIDetection[];
+    /**
+     * Escape HTML to prevent XSS
+     */
+    private escapeHtml;
+    /**
+     * Update configuration
+     */
+    updateConfig(config: Partial<PIIDisplayConfig>): void;
+    /**
+     * Get current configuration
+     */
+    getConfig(): Required<PIIDisplayConfig>;
+}

package/dist/widget/components/pii-detection-display.js

@@ -0,0 +1,142 @@
+"use strict";
+/**
+ * PIIDetectionDisplay
+ *
+ * Responsibility: Render PII detection UI and manage PII-related display logic
+ * Follows SRP: Only handles PII visualization
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PIIDetectionDisplay = void 0;
+class PIIDetectionDisplay {
+    constructor(config = {}) {
+        this.config = {
+            showExamples: config.showExamples !== false,
+            groupByType: config.groupByType !== false,
+            maxExamplesPerType: config.maxExamplesPerType || 3,
+        };
+    }
+    /**
+     * Render PII detection information into a container
+     */
+    render(piiDetections, container) {
+        if (!piiDetections || piiDetections.length === 0) {
+            container.innerHTML = '';
+            return;
+        }
+        if (this.config.groupByType) {
+            container.innerHTML = this.renderGroupedPII(piiDetections);
+        }
+        else {
+            container.innerHTML = this.renderListPII(piiDetections);
+        }
+    }
+    /**
+     * Render PII grouped by type with badges
+     */
+    renderGroupedPII(piiDetections) {
+        const grouped = this.groupByType(piiDetections);
+        const badges = [];
+        for (const [type, items] of Object.entries(grouped)) {
+            const totalCount = items.reduce((sum, item) => {
+                return sum + item.count;
+            }, 0);
+            badges.push(this.createBadge(type, totalCount));
+        }
+        let html = `<div class="bugspotter-pii-badges">${badges.join('')}</div>`;
+        if (this.config.showExamples) {
+            html += '<div class="bugspotter-pii-details">';
+            html +=
+                '<p style="margin: 10px 0 5px 0; font-size: 13px; color: #856404;">Detected types:</p>';
+            html += '<ul class="bugspotter-pii-list">';
+            for (const [type, items] of Object.entries(grouped)) {
+                const totalCount = items.reduce((sum, item) => {
+                    return sum + item.count;
+                }, 0);
+                html += `<li><strong>${this.escapeHtml(type)}:</strong> ${totalCount} occurrence${totalCount !== 1 ? 's' : ''}</li>`;
+            }
+            html += '</ul></div>';
+        }
+        return html;
+    }
+    /**
+     * Render PII as a simple list
+     */
+    renderListPII(piiDetections) {
+        let html = '<ul class="bugspotter-pii-list">';
+        for (const detection of piiDetections) {
+            html += `<li>${this.escapeHtml(detection.type)}: ${detection.count} occurrence${detection.count !== 1 ? 's' : ''}</li>`;
+        }
+        html += '</ul>';
+        return html;
+    }
+    /**
+     * Create a PII type badge
+     */
+    createBadge(type, count) {
+        return `<span class="bugspotter-pii-badge">${this.escapeHtml(type)}: ${count}</span>`;
+    }
+    /**
+     * Group PII detections by type
+     */
+    groupByType(piiDetections) {
+        const grouped = {};
+        for (const detection of piiDetections) {
+            if (!grouped[detection.type]) {
+                grouped[detection.type] = [];
+            }
+            grouped[detection.type].push(detection);
+        }
+        return grouped;
+    }
+    /**
+     * Get summary statistics about PII detections
+     */
+    getSummary(piiDetections) {
+        const types = new Set();
+        for (const detection of piiDetections) {
+            types.add(detection.type);
+        }
+        return {
+            totalCount: piiDetections.length,
+            typeCount: types.size,
+            types: Array.from(types),
+        };
+    }
+    /**
+     * Check if PII detections contain a specific type
+     */
+    hasType(piiDetections, type) {
+        return piiDetections.some((d) => {
+            return d.type === type;
+        });
+    }
+    /**
+     * Filter PII detections by type
+     */
+    filterByType(piiDetections, type) {
+        return piiDetections.filter((d) => {
+            return d.type === type;
+        });
+    }
+    /**
+     * 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.PIIDetectionDisplay = PIIDetectionDisplay;