@bugspotter/sdk 0.2.4-alpha.5 → 0.3.0

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

@@ -9,6 +9,44 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyleManager = void 0;
 class StyleManager {
     constructor(config = {}) {
+        // ============================================================================
+        // SPACING & SIZING CONSTANTS
+        // ============================================================================
+        this.SPACING = {
+            xs: 8,
+            sm: 12,
+            md: 16,
+            lg: 20,
+        };
+        this.BREAKPOINTS = {
+            tablet: 768,
+            mobile: 480,
+        };
+        this.MODAL_SIZES = {
+            desktop: '600px',
+            tablet: '500px',
+            mobilePercent: '98%',
+            headerHeight: '30px',
+        };
+        // ============================================================================
+        // FONT & LAYOUT CONSTANTS
+        // ============================================================================
+        this.FONT_SIZES = {
+            h2: '20px',
+            h2Mobile: '18px',
+            label: '14px',
+            labelMobile: '13px',
+            body: '14px',
+            small: '12px',
+            sr: '13px',
+        };
+        this.BORDER_STYLES = {
+            primary: '1px solid #e0e0e0',
+            light: '1px solid #ddd',
+        };
+        this.SHADOW_STYLES = {
+            modal: '0 4px 6px rgba(0, 0, 0, 0.1)',
+        };
         this.config = {
             primaryColor: config.primaryColor || '#007bff',
             dangerColor: config.dangerColor || '#dc3545',
@@ -22,6 +60,24 @@ class StyleManager {
      */
     generateStyles() {
         return `
+      ${this.generateOverlayStyles()}
+      ${this.generateModalStyles()}
+      ${this.generateHeaderStyles()}
+      ${this.generateBodyStyles()}
+      ${this.generateFormStyles()}
+      ${this.generateButtonStyles()}
+      ${this.generatePIIStyles()}
+      ${this.generateLoadingStyles()}
+      ${this.generateAccessibilityStyles()}
+      ${this.generateTabletResponsiveStyles()}
+      ${this.generateMobileResponsiveStyles()}
+    `;
+    }
+    // ============================================================================
+    // COMPONENT STYLES - OVERLAY & MODAL
+    // ============================================================================
+    generateOverlayStyles() {
+        return `
       .overlay {
         position: fixed;
         top: 0;
@@ -35,20 +91,35 @@ class StyleManager {
         z-index: ${this.config.zIndex};
         font-family: ${this.config.fontFamily};
       }
-      
+    `;
+    }
+    generateModalStyles() {
+        return `
       .modal {
         background: white;
         border-radius: 8px;
         width: 90%;
-        max-width: 600px;
+        max-width: ${this.MODAL_SIZES.desktop};
         max-height: 90vh;
         overflow-y: auto;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        box-shadow: ${this.SHADOW_STYLES.modal};
+        scrollbar-width: none;
+        -ms-overflow-style: none;
       }
       
+      .modal::-webkit-scrollbar {
+        display: none;
+      }
+    `;
+    }
+    // ============================================================================
+    // COMPONENT STYLES - HEADER
+    // ============================================================================
+    generateHeaderStyles() {
+        return `
       .header {
-        padding: 20px;
-        border-bottom: 1px solid #e0e0e0;
+        padding: ${this.SPACING.lg}px;
+        border-bottom: ${this.BORDER_STYLES.primary};
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -56,7 +127,7 @@ class StyleManager {
       
       .header h2 {
         margin: 0;
-        font-size: 20px;
+        font-size: ${this.FONT_SIZES.h2};
         font-weight: 600;
       }
       
@@ -67,8 +138,8 @@ class StyleManager {
         cursor: pointer;
         color: #666;
         padding: 0;
-        width: 30px;
-        height: 30px;
+        width: ${this.MODAL_SIZES.headerHeight};
+        height: ${this.MODAL_SIZES.headerHeight};
         display: flex;
         align-items: center;
         justify-content: center;
@@ -78,29 +149,38 @@ class StyleManager {
       .close:hover {
         background: #f0f0f0;
       }
-      
+    `;
+    }
+    // ============================================================================
+    // COMPONENT STYLES - BODY & FORM
+    // ============================================================================
+    generateBodyStyles() {
+        return `
       .body {
-        padding: 20px;
+        padding: ${this.SPACING.lg}px;
       }
-      
+    `;
+    }
+    generateFormStyles() {
+        return `
       .form-group {
-        margin-bottom: 20px;
+        margin-bottom: ${this.SPACING.lg}px;
       }
       
       .label {
         display: block;
-        margin-bottom: 8px;
+        margin-bottom: ${this.SPACING.xs}px;
         font-weight: 500;
-        font-size: 14px;
+        font-size: ${this.FONT_SIZES.label};
       }
       
       .input,
       .textarea {
         width: 100%;
-        padding: 10px;
-        border: 1px solid #ddd;
+        padding: ${this.SPACING.xs}px;
+        border: ${this.BORDER_STYLES.light};
         border-radius: ${this.config.borderRadius};
-        font-size: 14px;
+        font-size: ${this.FONT_SIZES.body};
         font-family: ${this.config.fontFamily};
         box-sizing: border-box;
       }
@@ -116,40 +196,92 @@ class StyleManager {
         resize: vertical;
       }
       
-      .screenshot-container {
-        margin-top: 10px;
-        position: relative;
+      .checkbox-group {
+        display: flex;
+        align-items: center;
+        gap: ${this.SPACING.xs}px;
+        margin-top: ${this.SPACING.md}px;
       }
       
-      .screenshot {
-        max-width: 100%;
-        border: 1px solid #ddd;
-        border-radius: ${this.config.borderRadius};
+      .checkbox {
+        width: 18px;
+        height: 18px;
+        cursor: pointer;
       }
       
-      .redaction-canvas {
-        position: absolute;
-        top: 0;
-        left: 0;
-        cursor: crosshair;
-        border: 2px solid ${this.config.primaryColor};
+      .checkbox-label {
+        margin: 0;
+        font-size: ${this.FONT_SIZES.body};
+        cursor: pointer;
+        user-select: none;
+      }
+      
+      .error {
+        color: ${this.config.dangerColor};
+        font-size: ${this.FONT_SIZES.small};
+        margin-top: 4px;
+      }
+    `;
+    }
+    // ============================================================================
+    // COMPONENT STYLES - BUTTONS & CONTROLS
+    // ============================================================================
+    generateButtonStyles() {
+        return `
+      .footer {
+        padding: ${this.SPACING.lg}px;
+        border-top: ${this.BORDER_STYLES.primary};
+        display: flex;
+        justify-content: flex-end;
+        gap: ${this.SPACING.xs}px;
+      }
+      
+      .btn {
+        padding: ${this.SPACING.xs}px ${this.SPACING.md}px;
+        border: none;
         border-radius: ${this.config.borderRadius};
+        cursor: pointer;
+        font-size: ${this.FONT_SIZES.body};
+        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;
       }
       
       .redaction-controls {
-        margin-top: 10px;
+        margin-top: ${this.SPACING.xs}px;
         display: flex;
-        gap: 10px;
+        gap: ${this.SPACING.xs}px;
       }
       
       .btn-redact,
       .btn-clear {
-        padding: 8px 16px;
-        border: 1px solid #ddd;
+        padding: ${this.SPACING.xs}px ${this.SPACING.md}px;
+        border: ${this.BORDER_STYLES.light};
         border-radius: ${this.config.borderRadius};
         background: white;
         cursor: pointer;
-        font-size: 14px;
+        font-size: ${this.FONT_SIZES.body};
       }
       
       .btn-redact:hover,
@@ -163,17 +295,43 @@ class StyleManager {
         border-color: ${this.config.primaryColor};
       }
       
+      .screenshot-container {
+        margin-top: ${this.SPACING.xs}px;
+        position: relative;
+      }
+      
+      .screenshot {
+        max-width: 100%;
+        border: ${this.BORDER_STYLES.light};
+        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};
+      }
+    `;
+    }
+    // ============================================================================
+    // COMPONENT STYLES - PII DETECTION
+    // ============================================================================
+    generatePIIStyles() {
+        return `
       .pii-section {
-        margin-top: 20px;
-        padding: 15px;
+        margin-top: ${this.SPACING.lg}px;
+        padding: ${this.SPACING.md}px;
         background: #fff3cd;
         border: 1px solid #ffc107;
         border-radius: ${this.config.borderRadius};
       }
       
       .pii-title {
-        margin: 0 0 10px 0;
-        font-size: 14px;
+        margin: 0 0 ${this.SPACING.xs}px 0;
+        font-size: ${this.FONT_SIZES.body};
         font-weight: 600;
         color: #856404;
       }
@@ -181,7 +339,7 @@ class StyleManager {
       .pii-list {
         margin: 0;
         padding-left: 20px;
-        font-size: 13px;
+        font-size: ${this.FONT_SIZES.sr};
         color: #856404;
       }
       
@@ -192,61 +350,16 @@ class StyleManager {
         background: #ffc107;
         color: #856404;
         border-radius: 12px;
-        font-size: 12px;
+        font-size: ${this.FONT_SIZES.small};
         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;
-      }
-      
+    `;
+    }
+    // ============================================================================
+    // COMPONENT STYLES - LOADING STATE
+    // ============================================================================
+    generateLoadingStyles() {
+        return `
       .btn.loading {
         position: relative;
         padding-left: 2.5rem;
@@ -269,7 +382,13 @@ class StyleManager {
       @keyframes spinner {
         to { transform: rotate(360deg); }
       }
-      
+    `;
+    }
+    // ============================================================================
+    // COMPONENT STYLES - ACCESSIBILITY
+    // ============================================================================
+    generateAccessibilityStyles() {
+        return `
       .sr-only {
         position: absolute;
         width: 1px;
@@ -281,20 +400,110 @@ class StyleManager {
         white-space: nowrap;
         border-width: 0;
       }
-      
-      .btn-secondary {
-        background: #6c757d;
-        color: white;
-      }
-      
-      .btn-secondary:hover {
-        opacity: 0.9;
+    `;
+    }
+    // ============================================================================
+    // RESPONSIVE STYLES - TABLET (≤768px)
+    // ============================================================================
+    generateTabletResponsiveStyles() {
+        return `
+      @media (max-width: ${this.BREAKPOINTS.tablet}px) {
+        .modal {
+          width: 95%;
+          max-width: ${this.MODAL_SIZES.tablet};
+        }
+        
+        .header {
+          padding: ${this.SPACING.md}px;
+        }
+        
+        .body {
+          padding: ${this.SPACING.md}px;
+        }
+        
+        .footer {
+          padding: ${this.SPACING.md}px;
+        }
+        
+        /* Prevent iOS zoom on input focus (requires 16px minimum) */
+        .input,
+        .textarea {
+          padding: ${this.SPACING.xs}px;
+          font-size: 16px;
+        }
+        
+        .textarea {
+          min-height: 80px;
+        }
       }
-      
-      .error {
-        color: ${this.config.dangerColor};
-        font-size: 12px;
-        margin-top: 4px;
+    `;
+    }
+    // ============================================================================
+    // RESPONSIVE STYLES - MOBILE (≤480px)
+    // ============================================================================
+    generateMobileResponsiveStyles() {
+        return `
+      @media (max-width: ${this.BREAKPOINTS.mobile}px) {
+        .modal {
+          width: ${this.MODAL_SIZES.mobilePercent};
+          max-width: 100%;
+          max-height: 95vh;
+        }
+        
+        .header {
+          padding: ${this.SPACING.sm}px;
+        }
+        
+        .header h2 {
+          font-size: ${this.FONT_SIZES.h2Mobile};
+        }
+        
+        .body {
+          padding: ${this.SPACING.sm}px;
+        }
+        
+        .footer {
+          padding: ${this.SPACING.sm}px;
+          flex-direction: column;
+        }
+        
+        .btn {
+          width: 100%;
+          padding: ${this.SPACING.md}px;
+        }
+        
+        .input,
+        .textarea {
+          padding: ${this.SPACING.xs}px;
+        }
+        
+        .textarea {
+          resize: none;
+        }
+        
+        .redaction-controls {
+          flex-direction: column;
+        }
+        
+        .btn-redact,
+        .btn-clear {
+          width: 100%;
+        }
+        
+        .pii-section {
+          padding: ${this.SPACING.sm}px;
+          margin-top: ${this.SPACING.md}px;
+        }
+        
+        .label {
+          font-size: ${this.FONT_SIZES.labelMobile};
+        }
+        
+        .close {
+          width: 28px;
+          height: 28px;
+          font-size: 20px;
+        }
       }
     `;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bugspotter/sdk",
-  "version": "0.2.4-alpha.5",
+  "version": "0.3.0",
   "description": "Professional bug reporting SDK with screenshots, session replay, and automatic error capture for web applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",