@mks2508/better-logger 0.14.0-alpha.2 → 0.18.2-alpha.2

package/examples/simplified-api.js

@@ -1,124 +0,0 @@
-/**
- * @fileoverview Examples of the new Simplified API for Advanced Logger
- */
-
-import logger, { 
-    preset, 
-    hideTimestamp, 
-    showLocation, 
-    component, 
-    api, 
-    scope,
-    customize,
-    styles 
-} from '../dist/index.js';
-
-console.log('=== Advanced Logger - Simplified API Examples ===\n');
-
-// ===== BASIC USAGE - OUT-OF-THE-BOX =====
-console.log('1. Basic usage (no configuration needed):');
-logger.info('Application started');
-logger.success('Database connected');
-logger.warn('High memory usage detected');
-logger.error('Failed to load configuration');
-
-console.log('\n2. Available presets:');
-console.log('Available presets:', logger.presets());
-
-// ===== PRESET EXAMPLES =====
-console.log('\n3. Using presets:');
-
-console.log('\n   → Cyberpunk preset:');
-preset('cyberpunk');
-logger.info('System online');
-logger.critical('Security breach detected!');
-
-console.log('\n   → Minimal preset:');  
-preset('minimal');
-logger.info('Clean and simple logging');
-logger.success('Task completed successfully');
-
-console.log('\n   → Debug preset:');
-preset('debug');
-logger.debug('Detailed debugging info');
-logger.info('Processing data...');
-
-// Reset to default
-preset('default');
-
-// ===== TOGGLE EXAMPLES =====
-console.log('\n4. Toggle features:');
-
-console.log('\n   → Hide timestamp:');
-hideTimestamp();
-logger.info('No timestamp shown');
-
-console.log('\n   → Show location (with timestamp hidden):');
-showLocation();
-logger.info('Location info visible');
-
-// Reset for next examples
-logger.showTimestamp();
-
-// ===== SCOPED LOGGERS =====
-console.log('\n5. Scoped loggers:');
-
-console.log('\n   → Component logger:');
-const auth = component('UserAuth');
-auth.info('Login attempt');
-auth.success('User authenticated');
-auth.lifecycle('mount', 'Component mounted');
-auth.stateChange('idle', 'loading');
-
-console.log('\n   → API logger with badges:');
-const graphql = api('GraphQL').badges(['SLOW', 'CACHE']);
-graphql.info('Query executed');
-graphql.slow('Complex query', 2500);
-graphql.auth('Invalid token');
-
-console.log('\n   → Custom scoped logger:');
-const payment = scope('Payment').badges(['CRITICAL', 'AUDIT']);
-payment.info('Processing payment');
-payment.success('Payment completed');
-
-// ===== CONTEXT EXAMPLES =====
-console.log('\n6. Context logging:');
-const dbLogger = component('Database');
-
-dbLogger.context('Migration').run(() => {
-    dbLogger.info('Starting migration');
-    dbLogger.success('Tables created');
-    dbLogger.info('Migration completed');
-});
-// Context automatically removed after run()
-
-// ===== SIMPLE CUSTOMIZATION =====
-console.log('\n7. Simple customization:');
-customize({
-    message: { color: '#007bff', size: '15px' },
-    timestamp: { show: true },
-    location: { show: false }
-});
-
-logger.info('Customized message styling');
-logger.success('Custom color and size applied');
-
-// ===== ADVANCED STYLING (For power users) =====
-console.log('\n8. Advanced styling (power users):');
-
-styles()
-    .timestamp().muted().mono().compact()
-    .level().neon().uppercase()
-    .message().large().system()
-    .spacing('compact')
-    .apply();
-
-logger.info('Advanced custom styling applied');
-logger.warn('Neon level badges with large system font');
-
-console.log('\n=== Examples completed! ===');
-
-// Reset to clean state for any other examples
-preset('default');
-logger.showTimestamp();
-logger.showLocation();

package/examples/styling-themes.js

@@ -1,207 +0,0 @@
-/**
- * Styling and Themes Example
- * 
- * Demonstrates visual styling capabilities including:
- * - Theme switching and customization
- * - Custom style creation with StyleBuilder
- * - Banner display variations
- * - SVG background integration
- * - Pre-built style presets
- * 
- * Run: node examples/styling-themes.js
- * Note: Best viewed in browser console for full visual effects
- */
-
-import { Logger } from '@mks2508/better-logger';
-import { 
-  setTheme, 
-  showBanner, 
-  createStyle, 
-  stylePresets,
-  logAnimated,
-  logWithSVG 
-} from '@mks2508/better-logger/styling';
-
-console.log('🎨 Better Logger - Styling and Themes Example\n');
-
-const logger = new Logger({ prefix: 'STYLE' });
-
-// Theme demonstration
-console.log('🌈 Testing different themes:');
-
-const themes = ['default', 'dark', 'neon', 'cyberpunk', 'retro'];
-
-for (const theme of themes) {
-  setTheme(theme);
-  logger.info(`Theme changed to: ${theme}`);
-  
-  // Show some logs in this theme
-  logger.success(`${theme} theme is active!`);
-  logger.warn(`Warning message in ${theme} theme`);
-  logger.error(`Error message in ${theme} theme`);
-  
-  console.log(''); // Add spacing
-}
-
-// Banner demonstrations
-console.log('\n🎭 Testing different banner types:');
-
-const bannerTypes = ['simple', 'ascii', 'unicode', 'svg', 'animated'];
-
-bannerTypes.forEach((type, index) => {
-  setTimeout(() => {
-    console.log(`\n--- ${type.toUpperCase()} BANNER ---`);
-    showBanner(type);
-    logger.info(`Showing ${type} banner style`);
-  }, index * 1000);
-});
-
-// Wait for banners, then continue
-setTimeout(() => {
-  console.log('\n✨ Testing custom style creation:');
-
-  // Create custom styles using StyleBuilder
-  const headerStyle = createStyle()
-    .bg('linear-gradient(135deg, #667eea, #764ba2)')
-    .color('white')
-    .padding('12px 24px')
-    .rounded('8px')
-    .bold()
-    .shadow('0 4px 15px rgba(102, 126, 234, 0.3)')
-    .build();
-
-  const alertStyle = createStyle()
-    .bg('linear-gradient(45deg, #ff6b6b, #feca57)')
-    .color('#333')
-    .padding('10px 20px')
-    .border('2px solid #ff5252')
-    .rounded('25px')
-    .bold()
-    .animation('pulse 1s ease-in-out infinite')
-    .build();
-
-  const codeStyle = createStyle()
-    .backgroundColor('#2c3e50')
-    .color('#ecf0f1')
-    .padding('8px 12px')
-    .font('Monaco, Consolas, monospace')
-    .border('1px solid #34495e')
-    .rounded('4px')
-    .build();
-
-  console.log('%cCustom Header Style', headerStyle);
-  console.log('%cCustom Alert Style', alertStyle);
-  console.log('%cCustom Code Style', codeStyle);
-
-  // Using pre-built style presets
-  console.log('\n🎯 Testing style presets:');
-
-  console.log('%c✅ Success Preset', stylePresets.success);
-  console.log('%c❌ Error Preset', stylePresets.error);
-  console.log('%c⚠️ Warning Preset', stylePresets.warning);
-  console.log('%cℹ️ Info Preset', stylePresets.info);
-  console.log('%c🎯 Accent Preset', stylePresets.accent);
-
-  // Advanced styling combinations
-  console.log('\n🔧 Advanced styling combinations:');
-
-  const gradientButton = createStyle()
-    .bg('linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c)')
-    .color('white')
-    .padding('15px 30px')
-    .rounded('50px')
-    .bold()
-    .shadow('0 8px 25px rgba(102, 126, 234, 0.4)')
-    .animation('backgroundMove 3s ease infinite')
-    .css('background-size', '400% 400%')
-    .build();
-
-  console.log('%c🚀 Gradient Button Style', gradientButton);
-
-  const glassMorphism = createStyle()
-    .bg('rgba(255, 255, 255, 0.1)')
-    .color('#333')
-    .padding('20px')
-    .rounded('15px')
-    .border('1px solid rgba(255, 255, 255, 0.2)')
-    .css('backdrop-filter', 'blur(10px)')
-    .shadow('0 8px 32px rgba(0, 0, 0, 0.1)')
-    .build();
-
-  console.log('%c🪟 Glass Morphism Style', glassMorphism);
-
-  // SVG background demonstration (works in browser)
-  if (typeof document !== 'undefined') {
-    console.log('\n🖼️ Testing SVG backgrounds:');
-
-    const brandSVG = `
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80'>
-        <defs>
-          <linearGradient id='brandGrad' x1='0%' y1='0%' x2='100%' y2='0%'>
-            <stop offset='0%' style='stop-color:#667eea'/>
-            <stop offset='100%' style='stop-color:#764ba2'/>
-          </linearGradient>
-        </defs>
-        <rect width='100%' height='100%' fill='url(#brandGrad)' rx='8'/>
-        <text x='200' y='45' text-anchor='middle' fill='white' 
-              font-family='Arial' font-size='18' font-weight='bold'>
-          BETTER LOGGER
-        </text>
-      </svg>
-    `;
-
-    logWithSVG('Custom SVG Background!', brandSVG, {
-      width: 400,
-      height: 80,
-      padding: '40px 200px'
-    });
-
-    // Animated logging (browser only)
-    console.log('\n✨ Testing animated logging:');
-    
-    logAnimated('🌟 This message has animated gradients!', 3);
-    
-    setTimeout(() => {
-      logAnimated('🎉 Animation completed!', 2);
-    }, 3500);
-  }
-
-  // Style combinations for different contexts
-  console.log('\n📱 Context-specific styling:');
-
-  const mobileStyle = createStyle()
-    .bg('#007AFF')
-    .color('white')
-    .padding('8px 16px')
-    .rounded('18px')
-    .fontSize('14px')
-    .build();
-
-  const desktopStyle = createStyle()
-    .bg('linear-gradient(135deg, #74b9ff, #0984e3)')
-    .color('white')
-    .padding('12px 24px')
-    .rounded('8px')
-    .fontSize('16px')
-    .shadow('0 4px 12px rgba(116, 185, 255, 0.3)')
-    .build();
-
-  const terminalStyle = createStyle()
-    .backgroundColor('#1e1e1e')
-    .color('#00ff00')
-    .padding('6px 12px')
-    .font('Fira Code, Monaco, monospace')
-    .border('1px solid #333')
-    .build();
-
-  console.log('%c📱 Mobile Style', mobileStyle);
-  console.log('%c🖥️ Desktop Style', desktopStyle);
-  console.log('%c💻 Terminal Style', terminalStyle);
-
-  console.log('\n✅ Styling and themes examples completed!');
-  
-  // Reset to default theme
-  setTheme('default');
-  logger.info('Theme reset to default');
-
-}, 6000); // Wait for banner demonstrations

package/index.html

@@ -1,358 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Advanced Logger Test Page - 2025</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 20px;
-        }
-
-        .container {
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-            border-radius: 20px;
-            padding: 40px;
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-            max-width: 800px;
-            width: 100%;
-        }
-
-        .header {
-            text-align: center;
-            margin-bottom: 40px;
-        }
-
-        .header h1 {
-            font-size: 2.5rem;
-            font-weight: 700;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 10px;
-        }
-
-        .header p {
-            color: #6b7280;
-            font-size: 1.1rem;
-            margin-bottom: 20px;
-        }
-
-        .console-note {
-            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
-            border: 1px solid #f59e0b;
-            border-radius: 12px;
-            padding: 15px;
-            margin-bottom: 30px;
-            text-align: center;
-            color: #92400e;
-            font-weight: 500;
-        }
-
-        .devtools-button {
-            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-            border: none;
-            border-radius: 8px;
-            color: white;
-            padding: 8px 16px;
-            margin-top: 10px;
-            font-size: 12px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            display: inline-block;
-        }
-
-        .devtools-button:hover {
-            background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
-            transform: translateY(-1px);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-        }
-
-        .button-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 15px;
-            margin-bottom: 30px;
-        }
-
-        .log-button {
-            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-            border: 2px solid #e2e8f0;
-            border-radius: 12px;
-            padding: 15px 20px;
-            font-size: 14px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            min-height: 60px;
-        }
-
-        .log-button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-        }
-
-        .log-button.debug {
-            border-color: #667eea;
-            color: #667eea;
-        }
-
-        .log-button.debug:hover {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-        }
-
-        .log-button.info {
-            border-color: #74b9ff;
-            color: #74b9ff;
-        }
-
-        .log-button.info:hover {
-            background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
-            color: white;
-        }
-
-        .log-button.warn {
-            border-color: #fdcb6e;
-            color: #e17055;
-        }
-
-        .log-button.warn:hover {
-            background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
-            color: white;
-        }
-
-        .log-button.error {
-            border-color: #e84393;
-            color: #e84393;
-        }
-
-        .log-button.error:hover {
-            background: linear-gradient(135deg, #e84393 0%, #d63031 100%);
-            color: white;
-        }
-
-        .log-button.success {
-            border-color: #00b894;
-            color: #00b894;
-        }
-
-        .log-button.success:hover {
-            background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
-            color: white;
-        }
-
-        .log-button.critical {
-            border-color: #ff3838;
-            color: #ff3838;
-        }
-
-        .log-button.critical:hover {
-            background: linear-gradient(135deg, #ff3838 0%, #ff1744 100%);
-            color: white;
-        }
-
-        .advanced-section {
-            border-top: 2px solid #e2e8f0;
-            padding-top: 30px;
-            margin-top: 30px;
-        }
-
-        .advanced-section h2 {
-            color: #374151;
-            margin-bottom: 20px;
-            font-size: 1.5rem;
-            text-align: center;
-        }
-
-        .footer {
-            text-align: center;
-            margin-top: 40px;
-            color: #6b7280;
-            font-size: 0.9rem;
-        }
-
-        @media (max-width: 640px) {
-            .container {
-                padding: 20px;
-            }
-
-            .header h1 {
-                font-size: 2rem;
-            }
-
-            .button-grid {
-                grid-template-columns: 1fr;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <header class="header">
-            <h1>🚀 Better Logger Demo</h1>
-            <p>Complete library with styling, SVG, animations, export & CLI features</p>
-            <div class="console-note">
-                📝 Open your browser's Developer Console to see the styled log output
-                <button class="devtools-button" id="devtools-btn" onclick="tryOpenDevTools()">
-                    🔧 Press F12 to Open DevTools
-                </button>
-                <div id="devtools-status" style="margin-top: 8px; font-size: 12px; display: none;">
-                    ✅ DevTools detected! Check the Console tab
-                </div>
-            </div>
-        </header>
-
-        <main>
-            <section class="button-grid">
-                <button class="log-button debug" onclick="testDebug()">
-                    🐞 Debug Log
-                </button>
-                <button class="log-button info" onclick="testInfo()">
-                    ℹ️ Info Log
-                </button>
-                <button class="log-button warn" onclick="testWarn()">
-                    ⚠️ Warning Log
-                </button>
-                <button class="log-button error" onclick="testError()">
-                    ❌ Error Log
-                </button>
-                <button class="log-button success" onclick="testSuccess()">
-                    ✅ Success Log
-                </button>
-                <button class="log-button critical" onclick="testCritical()">
-                    🔥 Critical Log
-                </button>
-            </section>
-
-            <section class="advanced-section">
-                <h2>Visual Features</h2>
-                <div class="button-grid">
-                    <button class="log-button info" onclick="testBanners()">
-                        🎨 Banner System
-                    </button>
-                    <button class="log-button debug" onclick="testThemes()">
-                        🌈 Theme Switching
-                    </button>
-                    <button class="log-button success" onclick="testSVG()">
-                        🖼️ SVG Backgrounds
-                    </button>
-                    <button class="log-button warn" onclick="testAnimations()">
-                        ✨ CSS Animations
-                    </button>
-                    <button class="log-button info" onclick="testCLI()">
-                        💻 CLI Commands
-                    </button>
-                    <button class="log-button critical" onclick="testExports()">
-                        📤 Export Features
-                    </button>
-                </div>
-            </section>
-            
-            <section class="advanced-section">
-                <h2>Core Features</h2>
-                <div class="button-grid">
-                    <button class="log-button info" onclick="testTable()">
-                        📊 Table Display
-                    </button>
-                    <button class="log-button debug" onclick="testGrouping()">
-                        📁 Grouped Logs
-                    </button>
-                    <button class="log-button warn" onclick="testTiming()">
-                        ⏱️ Performance Timer
-                    </button>
-                    <button class="log-button info" onclick="testScopedLogger()">
-                        🎯 Scoped Logger
-                    </button>
-                    <button class="log-button debug" onclick="testTrace()">
-                        🔍 Stack Trace
-                    </button>
-                    <button class="log-button success" onclick="testAllFeatures()">
-                        🌟 Demo All Features
-                    </button>
-                </div>
-            </section>
-        </main>
-
-        <footer class="footer">
-            <p>Better Logger v0.0.1 | Built with TypeScript & Modern Web Standards</p>
-        </footer>
-    </div>
-    <script>
-        let devToolsOpen = false;
-        
-        function detectDevTools() {
-            const threshold = 160;
-            const widthThreshold = window.outerWidth - window.innerWidth > threshold;
-            const heightThreshold = window.outerHeight - window.innerHeight > threshold;
-            
-            return widthThreshold || heightThreshold;
-        }
-        
-        function updateDevToolsStatus() {
-            const isOpen = detectDevTools();
-            const btn = document.getElementById('devtools-btn');
-            const status = document.getElementById('devtools-status');
-            
-            if (isOpen && !devToolsOpen) {
-                devToolsOpen = true;
-                btn.textContent = '✅ DevTools Open - Check Console!';
-                btn.style.background = 'linear-gradient(135deg, #00b894 0%, #00a085 100%)';
-                status.style.display = 'block';
-                
-                // Welcome message when devtools opens
-                console.log('%c🎉 DevTools Detected! Welcome to Advanced Logger Demo', 
-                    'background: linear-gradient(135deg, #00b894 0%, #00a085 100%); color: white; padding: 12px 20px; border-radius: 8px; font-weight: bold; font-size: 14px;');
-            } else if (!isOpen && devToolsOpen) {
-                devToolsOpen = false;
-                btn.textContent = '🔧 Press F12 to Open DevTools';
-                btn.style.background = 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)';
-                status.style.display = 'none';
-            }
-        }
-        
-        function tryOpenDevTools() {
-            if (!devToolsOpen) {
-                // Simulate F12 keypress (doesn't actually open devtools, but is educational)
-                console.log('%c💡 Tip: Press F12 or right-click → Inspect Element to open DevTools!', 
-                    'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 10px 15px; border-radius: 5px; font-weight: bold;');
-                
-                // Show platform-specific shortcuts
-                const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-                const shortcut = isMac ? 'Cmd+Option+I' : 'F12 or Ctrl+Shift+I';
-                
-                alert(`🔧 DevTools Shortcut:\n\n${shortcut}\n\nOnce open, check the Console tab to see styled logs!`);
-            } else {
-                console.log('%c🚀 DevTools already open! Check this console for styled logs!', 
-                    'background: linear-gradient(135deg, #00b894 0%, #00a085 100%); color: white; padding: 10px 15px; border-radius: 5px; font-weight: bold;');
-            }
-        }
-        
-        // Check devtools status every 500ms
-        setInterval(updateDevToolsStatus, 500);
-        
-        // Initial check
-        setTimeout(updateDevToolsStatus, 100);
-    </script>
-    <script type="module" src="./src/main.ts"></script>
-</body>
-</html>