juxscript 1.0.19 → 1.0.21

package/lib/components/theme-toggle.ts

@@ -1,18 +1,17 @@
-import { getOrCreateContainer } from './helpers.js';
+import { BaseComponent } from './base/BaseComponent.js';
 import { ErrorHandler } from './error-handler.js';
+import { renderIcon } from './icons.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['themeChange'] as const;
 
-/**
- * Theme configuration
- */
 export interface Theme {
     id: string;
     label: string;
     icon?: string;
 }
 
-/**
- * ThemeToggle component options
- */
 export interface ThemeToggleOptions {
     themes?: Theme[];
     defaultTheme?: string;
@@ -23,9 +22,6 @@ export interface ThemeToggleOptions {
     class?: string;
 }
 
-/**
- * ThemeToggle component state
- */
 type ThemeToggleState = {
     themes: Theme[];
     currentTheme: string;
@@ -36,71 +32,48 @@ type ThemeToggleState = {
     class: string;
 };
 
-/**
- * ThemeToggle component - Manage and switch between themes
- * 
- * Usage:
- *   // Simple light/dark toggle
- *   jux.themeToggle('myToggle').render('#appheader-actions');
- *   
- *   // Custom themes
- *   jux.themeToggle('myToggle', {
- *     themes: [
- *       { id: 'light', label: 'Light', icon: '☀️' },
- *       { id: 'dark', label: 'Dark', icon: '🌙' },
- *       { id: 'auto', label: 'Auto', icon: '🌓' }
- *     ],
- *     variant: 'dropdown'
- *   }).render('#appheader-actions');
- */
-export class ThemeToggle {
-    state: ThemeToggleState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-
+export class ThemeToggle extends BaseComponent<ThemeToggleState> {
     constructor(id: string, options: ThemeToggleOptions = {}) {
-        this._id = id;
-        this.id = id;
-
         const defaultThemes: Theme[] = [
             { id: 'light', label: 'Light', icon: '☀️' },
             { id: 'dark', label: 'Dark', icon: '🌙' }
         ];
 
-        this.state = {
+        super(id, {
             themes: options.themes ?? defaultThemes,
-            currentTheme: options.defaultTheme ?? this.detectTheme(options.storageKey),
+            currentTheme: options.defaultTheme ?? ThemeToggle.detectTheme(options.storageKey),
             storageKey: options.storageKey ?? 'jux-theme',
             showLabel: options.showLabel ?? false,
             variant: options.variant ?? 'button',
             style: options.style ?? '',
             class: options.class ?? ''
-        };
+        });
 
         // Apply theme on initialization
         this.applyTheme(this.state.currentTheme);
     }
 
-    /* -------------------------
-     * Theme Detection & Management
-     * ------------------------- */
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * STATIC METHODS
+     * ═════════════════════════════════════════════════════════════════ */
 
-    /**
-     * Detect theme from localStorage or system preference
-     */
-    private detectTheme(storageKey = 'jux-theme'): string {
+    private static detectTheme(storageKey = 'jux-theme'): string {
         if (typeof window === 'undefined') return 'light';
 
-        // Check localStorage first
         const stored = localStorage.getItem(storageKey);
         if (stored) return stored;
 
-        // Check current document attribute
         const current = document.body.getAttribute('data-theme');
         if (current) return current;
 
-        // Check system preference
         if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
             return 'dark';
         }
@@ -108,58 +81,27 @@ export class ThemeToggle {
         return 'light';
     }
 
-    /**
-     * Apply theme to document
-     */
-    private applyTheme(themeId: string): void {
-        if (typeof document === 'undefined') return;
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
 
-        try {
-            // Update data-theme attribute on body
-            document.body.setAttribute('data-theme', themeId);
-
-            // Also update on html element for broader CSS support
-            document.documentElement.setAttribute('data-theme', themeId);
+    // ✅ Inherited from BaseComponent
 
-            // Store in localStorage
-            localStorage.setItem(this.state.storageKey, themeId);
-
-            // Dispatch custom event for other components to listen
-            window.dispatchEvent(new CustomEvent('themechange', {
-                detail: { theme: themeId }
-            }));
-
-            console.log(`🎨 Theme applied: ${themeId}`);
-        } catch (error: any) {
-            ErrorHandler.captureError({
-                component: 'ThemeToggle',
-                method: 'applyTheme',
-                message: `Failed to apply theme: ${error.message}`,
-                stack: error.stack,
-                timestamp: new Date(),
-                context: { themeId }
-            });
-        }
+    themes(value: Theme[]): this {
+        this.state.themes = value;
+        return this;
     }
 
-    /**
-     * Cycle to next theme
-     */
-    private cycleTheme(): void {
-        const currentIndex = this.state.themes.findIndex(t => t.id === this.state.currentTheme);
-        const nextIndex = (currentIndex + 1) % this.state.themes.length;
-        const nextTheme = this.state.themes[nextIndex];
-
-        this.setTheme(nextTheme.id);
+    variant(value: 'button' | 'dropdown' | 'cycle'): this {
+        this.state.variant = value;
+        return this;
     }
 
-    /* -------------------------
-     * Public API
-     * ------------------------- */
+    showLabel(value: boolean): this {
+        this.state.showLabel = value;
+        return this;
+    }
 
-    /**
-     * Set current theme
-     */
     setTheme(themeId: string): this {
         const theme = this.state.themes.find(t => t.id === themeId);
 
@@ -175,16 +117,10 @@ export class ThemeToggle {
         return this;
     }
 
-    /**
-     * Get current theme
-     */
     getTheme(): string {
         return this.state.currentTheme;
     }
 
-    /**
-     * Add a theme
-     */
     addTheme(theme: Theme): this {
         if (!this.state.themes.find(t => t.id === theme.id)) {
             this.state.themes.push(theme);
@@ -192,38 +128,45 @@ export class ThemeToggle {
         return this;
     }
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
+    /* ═════════════════════════════════════════════════════════════════
+     * PRIVATE METHODS
+     * ═════════════════════════════════════════════════════════════════ */
 
-    themes(value: Theme[]): this {
-        this.state.themes = value;
-        return this;
-    }
+    private applyTheme(themeId: string): void {
+        if (typeof document === 'undefined') return;
 
-    variant(value: 'button' | 'dropdown' | 'cycle'): this {
-        this.state.variant = value;
-        return this;
-    }
+        try {
+            document.body.setAttribute('data-theme', themeId);
+            document.documentElement.setAttribute('data-theme', themeId);
+            localStorage.setItem(this.state.storageKey, themeId);
 
-    showLabel(value: boolean): this {
-        this.state.showLabel = value;
-        return this;
-    }
+            window.dispatchEvent(new CustomEvent('themechange', {
+                detail: { theme: themeId }
+            }));
 
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
+            // 🎯 Fire the themeChange callback event
+            this._triggerCallback('themeChange', themeId);
 
-    class(value: string): this {
-        this.state.class = value;
-        return this;
+            console.log(`🎨 Theme applied: ${themeId}`);
+        } catch (error: any) {
+            ErrorHandler.captureError({
+                component: 'ThemeToggle',
+                method: 'applyTheme',
+                message: `Failed to apply theme: ${error.message}`,
+                stack: error.stack,
+                timestamp: new Date(),
+                context: { themeId }
+            });
+        }
     }
 
-    /* -------------------------
-     * DOM Update
-     * ------------------------- */
+    private cycleTheme(): void {
+        const currentIndex = this.state.themes.findIndex(t => t.id === this.state.currentTheme);
+        const nextIndex = (currentIndex + 1) % this.state.themes.length;
+        const nextTheme = this.state.themes[nextIndex];
+
+        this.setTheme(nextTheme.id);
+    }
 
     private _updateDOM(): void {
         if (!this.container) return;
@@ -234,17 +177,27 @@ export class ThemeToggle {
         const currentTheme = this.state.themes.find(t => t.id === this.state.currentTheme);
         if (!currentTheme) return;
 
-        // Update button variant
         if (this.state.variant === 'button' || this.state.variant === 'cycle') {
             const button = toggle.querySelector('button');
-            if (button) {
-                button.innerHTML = this.state.showLabel
-                    ? `${currentTheme.icon || ''} ${currentTheme.label}`.trim()
-                    : currentTheme.icon || currentTheme.label;
+            if (button && currentTheme.icon) {
+                button.innerHTML = '';
+                const iconElement = renderIcon(currentTheme.icon);
+                button.appendChild(iconElement);
+
+                if (this.state.showLabel) {
+                    const labelSpan = document.createElement('span');
+                    labelSpan.textContent = ` ${currentTheme.label}`;
+                    button.appendChild(labelSpan);
+                }
+
+                requestAnimationFrame(() => {
+                    if ((window as any).lucide) {
+                        (window as any).lucide.createIcons();
+                    }
+                });
             }
         }
 
-        // Update dropdown variant
         if (this.state.variant === 'dropdown') {
             const select = toggle.querySelector('select') as HTMLSelectElement;
             if (select) {
@@ -253,24 +206,13 @@ export class ThemeToggle {
         }
     }
 
-    /* -------------------------
-     * Render
-     * ------------------------- */
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
 
     render(targetId?: string): this {
-        let container: HTMLElement;
-
-        if (targetId) {
-            const target = document.querySelector(targetId);
-            if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`ThemeToggle: Target element "${targetId}" not found`);
-            }
-            container = target;
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
+        const container = this._setupContainer(targetId);
 
-        this.container = container;
         const { themes, currentTheme, showLabel, variant, style, class: className } = this.state;
 
         const wrapper = document.createElement('div');
@@ -287,17 +229,24 @@ export class ThemeToggle {
 
         const theme = themes.find(t => t.id === currentTheme);
 
-        // Render based on variant
         if (variant === 'button' || variant === 'cycle') {
-            // Single button that cycles through themes
             const button = document.createElement('button');
             button.className = 'jux-theme-toggle-button';
             button.type = 'button';
             button.setAttribute('aria-label', 'Toggle theme');
 
-            button.innerHTML = showLabel
-                ? `${theme?.icon || ''} ${theme?.label || currentTheme}`.trim()
-                : theme?.icon || theme?.label || currentTheme;
+            if (theme?.icon) {
+                const iconElement = renderIcon(theme.icon);
+                button.appendChild(iconElement);
+            }
+
+            if (showLabel) {
+                const labelSpan = document.createElement('span');
+                labelSpan.textContent = ` ${theme?.label || currentTheme}`;
+                button.appendChild(labelSpan);
+            } else if (!theme?.icon) {
+                button.textContent = theme?.label || currentTheme;
+            }
 
             button.addEventListener('click', () => {
                 this.cycleTheme();
@@ -306,7 +255,6 @@ export class ThemeToggle {
             wrapper.appendChild(button);
 
         } else if (variant === 'dropdown') {
-            // Dropdown select with all themes
             const select = document.createElement('select');
             select.className = 'jux-theme-toggle-select';
             select.setAttribute('aria-label', 'Select theme');
@@ -333,29 +281,20 @@ export class ThemeToggle {
             wrapper.appendChild(select);
         }
 
-        container.appendChild(wrapper);
-        return this;
-    }
+        this._wireStandardEvents(wrapper);
 
-    /**
-     * Render to another Jux component's container
-     */
-    renderTo(juxComponent: any): this {
-        if (!juxComponent || typeof juxComponent !== 'object') {
-            throw new Error('ThemeToggle.renderTo: Invalid component - not an object');
-        }
+        container.appendChild(wrapper);
 
-        if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-            throw new Error('ThemeToggle.renderTo: Invalid component - missing _id (not a Jux component)');
-        }
+        requestAnimationFrame(() => {
+            if ((window as any).lucide) {
+                (window as any).lucide.createIcons();
+            }
+        });
 
-        return this.render(`#${juxComponent._id}`);
+        return this;
     }
 }
 
-/**
- * Factory helper
- */
 export function themeToggle(id: string, options: ThemeToggleOptions = {}): ThemeToggle {
     return new ThemeToggle(id, options);
 }