juxscript 1.0.2 → 1.0.4

package/lib/components/theme-toggle.ts

@@ -0,0 +1,361 @@
+import { getOrCreateContainer } from './helpers.js';
+import { ErrorHandler } from './error-handler.js';
+
+/**
+ * Theme configuration
+ */
+export interface Theme {
+    id: string;
+    label: string;
+    icon?: string;
+}
+
+/**
+ * ThemeToggle component options
+ */
+export interface ThemeToggleOptions {
+    themes?: Theme[];
+    defaultTheme?: string;
+    storageKey?: string;
+    showLabel?: boolean;
+    variant?: 'button' | 'dropdown' | 'cycle';
+    style?: string;
+    class?: string;
+}
+
+/**
+ * ThemeToggle component state
+ */
+type ThemeToggleState = {
+    themes: Theme[];
+    currentTheme: string;
+    storageKey: string;
+    showLabel: boolean;
+    variant: string;
+    style: string;
+    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;
+
+    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 = {
+            themes: options.themes ?? defaultThemes,
+            currentTheme: options.defaultTheme ?? this.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
+     * ------------------------- */
+
+    /**
+     * Detect theme from localStorage or system preference
+     */
+    private 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';
+        }
+
+        return 'light';
+    }
+
+    /**
+     * Apply theme to document
+     */
+    private applyTheme(themeId: string): void {
+        if (typeof document === 'undefined') return;
+
+        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);
+
+            // 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 }
+            });
+        }
+    }
+
+    /**
+     * 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);
+    }
+
+    /* -------------------------
+     * Public API
+     * ------------------------- */
+
+    /**
+     * Set current theme
+     */
+    setTheme(themeId: string): this {
+        const theme = this.state.themes.find(t => t.id === themeId);
+
+        if (!theme) {
+            console.warn(`Theme "${themeId}" not found in available themes`);
+            return this;
+        }
+
+        this.state.currentTheme = themeId;
+        this.applyTheme(themeId);
+        this._updateDOM();
+
+        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);
+        }
+        return this;
+    }
+
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
+    themes(value: Theme[]): this {
+        this.state.themes = value;
+        return this;
+    }
+
+    variant(value: 'button' | 'dropdown' | 'cycle'): this {
+        this.state.variant = value;
+        return this;
+    }
+
+    showLabel(value: boolean): this {
+        this.state.showLabel = value;
+        return this;
+    }
+
+    style(value: string): this {
+        this.state.style = value;
+        return this;
+    }
+
+    class(value: string): this {
+        this.state.class = value;
+        return this;
+    }
+
+    /* -------------------------
+     * DOM Update
+     * ------------------------- */
+
+    private _updateDOM(): void {
+        if (!this.container) return;
+
+        const toggle = this.container.querySelector(`#${this._id}`);
+        if (!toggle) return;
+
+        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;
+            }
+        }
+
+        // Update dropdown variant
+        if (this.state.variant === 'dropdown') {
+            const select = toggle.querySelector('select') as HTMLSelectElement;
+            if (select) {
+                select.value = this.state.currentTheme;
+            }
+        }
+    }
+
+    /* -------------------------
+     * 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);
+        }
+
+        this.container = container;
+        const { themes, currentTheme, showLabel, variant, style, class: className } = this.state;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = `jux-theme-toggle jux-theme-toggle-${variant}`;
+        wrapper.id = this._id;
+
+        if (className) {
+            wrapper.className += ` ${className}`;
+        }
+
+        if (style) {
+            wrapper.setAttribute('style', style);
+        }
+
+        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;
+
+            button.addEventListener('click', () => {
+                this.cycleTheme();
+            });
+
+            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');
+
+            themes.forEach(t => {
+                const option = document.createElement('option');
+                option.value = t.id;
+                option.textContent = showLabel
+                    ? `${t.icon || ''} ${t.label}`.trim()
+                    : t.icon || t.label;
+
+                if (t.id === currentTheme) {
+                    option.selected = true;
+                }
+
+                select.appendChild(option);
+            });
+
+            select.addEventListener('change', (e) => {
+                const target = e.target as HTMLSelectElement;
+                this.setTheme(target.value);
+            });
+
+            wrapper.appendChild(select);
+        }
+
+        container.appendChild(wrapper);
+        return this;
+    }
+
+    /**
+     * 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');
+        }
+
+        if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+            throw new Error('ThemeToggle.renderTo: Invalid component - missing _id (not a Jux component)');
+        }
+
+        return this.render(`#${juxComponent._id}`);
+    }
+}
+
+/**
+ * Factory helper
+ */
+export function themeToggle(id: string, options: ThemeToggleOptions = {}): ThemeToggle {
+    return new ThemeToggle(id, options);
+}