juxscript 1.0.19 → 1.0.21

package/lib/components/alert.ts

@@ -1,94 +1,72 @@
-import { getOrCreateContainer } from './helpers.js';
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['dismiss'] as const;
 
-/**
- * Alert component options
- */
 export interface AlertOptions {
     message?: string;
-    variant?: 'info' | 'success' | 'warning' | 'error';
-    title?: string;
+    type?: 'info' | 'success' | 'warning' | 'error';
     dismissible?: boolean;
-    onDismiss?: () => void;
     icon?: string;
     style?: string;
     class?: string;
 }
 
-/**
- * Alert component state
- */
 type AlertState = {
     message: string;
-    variant: string;
-    title: string;
+    type: string;
     dismissible: boolean;
     icon: string;
+    visible: boolean;
     style: string;
     class: string;
 };
 
-/**
- * Alert component - Status messages and notifications
- * 
- * Usage:
- *   jux.alert('my-alert', {
- *     variant: 'success',
- *     title: 'Success!',
- *     message: 'Your changes have been saved.',
- *     dismissible: true
- *   }).render('#app');
- * 
- * Variants: info, success, warning, error
- */
-export class Alert {
-    state: AlertState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-    private _onDismiss?: () => void;
+export class Alert extends BaseComponent<AlertState> {
+    private _alert: HTMLElement | null = null;
 
     constructor(id: string, options: AlertOptions = {}) {
-        this._id = id;
-        this.id = id;
-        this._onDismiss = options.onDismiss;
-
-        // Default icons per variant
-        const defaultIcons = {
-            info: 'ℹ️',
-            success: '✅',
-            warning: '⚠️',
-            error: '❌'
-        };
-
-        const variant = options.variant ?? 'info';
-
-        this.state = {
+        super(id, {
             message: options.message ?? '',
-            variant,
-            title: options.title ?? '',
-            dismissible: options.dismissible ?? false,
-            icon: options.icon ?? defaultIcons[variant as keyof typeof defaultIcons],
+            type: options.type ?? 'info',
+            dismissible: options.dismissible ?? true,
+            icon: options.icon ?? '',
+            visible: true,
             style: options.style ?? '',
             class: options.class ?? ''
-        };
+        });
     }
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
 
-    message(value: string): this {
-        this.state.message = value;
-        return this;
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
-    variant(value: 'info' | 'success' | 'warning' | 'error'): this {
-        this.state.variant = value;
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    // ✅ Inherited from BaseComponent:
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - addClass(), removeClass(), toggleClass()
+    // - visible(), show(), hide(), toggleVisibility()
+    // - attr(), attrs(), removeAttr()
+    // - disabled(), enable(), disable()
+    // - loading(), focus(), blur(), remove()
+
+    message(value: string): this {
+        this.state.message = value;
         return this;
     }
 
-    title(value: string): this {
-        this.state.title = value;
+    type(value: 'info' | 'success' | 'warning' | 'error'): this {
+        this.state.type = value;
         return this;
     }
 
@@ -102,139 +80,208 @@ export class Alert {
         return this;
     }
 
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
-
-    class(value: string): this {
-        this.state.class = value;
-        return this;
-    }
-
-    /* -------------------------
-     * Methods
-     * ------------------------- */
-
-    /**
-     * Dismiss/remove the alert
-     */
-    dismiss(): void {
-        const element = document.getElementById(this._id);
-        if (element) {
-            element.style.opacity = '0';
-            element.style.transform = 'translateY(-10px)';
-            setTimeout(() => {
-                element.remove();
-                if (this._onDismiss) {
-                    this._onDismiss();
-                }
-            }, 200);
-        }
-    }
-
-    /**
-     * Auto-dismiss after delay
-     */
-    autoDismiss(delay: number = 5000): this {
-        setTimeout(() => this.dismiss(), delay);
-        return this;
-    }
-
-    /* -------------------------
-     * Render
-     * ------------------------- */
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
 
     render(targetId?: string): this {
-        let container: HTMLElement;
-
-        if (targetId) {
-            const target = document.querySelector(targetId);
-            if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`Alert: Target element "${targetId}" not found`);
-            }
-            container = target;
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
+        const container = this._setupContainer(targetId);
 
-        this.container = container;
-        const { message, variant, title, dismissible, icon, style, class: className } = this.state;
+        const { message, type, dismissible, icon, style, class: className } = this.state;
+        const hasVisibleSync = this._syncBindings.some(b => b.property === 'visible');
 
+        // Build alert element
         const alert = document.createElement('div');
-        alert.className = `jux-alert jux-alert-${variant}`;
+        alert.className = `jux-alert jux-alert-${type}`;
         alert.id = this._id;
-        alert.setAttribute('role', 'alert');
-
-        if (className) {
-            alert.className += ` ${className}`;
-        }
-
-        if (style) {
-            alert.setAttribute('style', style);
-        }
+        if (className) alert.className += ` ${className}`;
+        if (style) alert.setAttribute('style', style);
 
-        // Icon
         if (icon) {
             const iconEl = document.createElement('span');
             iconEl.className = 'jux-alert-icon';
-            iconEl.textContent = icon;
+            iconEl.appendChild(renderIcon(icon));
             alert.appendChild(iconEl);
         }
 
-        // Content
         const content = document.createElement('div');
         content.className = 'jux-alert-content';
+        content.textContent = message;
+        alert.appendChild(content);
 
-        if (title) {
-            const titleEl = document.createElement('div');
-            titleEl.className = 'jux-alert-title';
-            titleEl.textContent = title;
-            content.appendChild(titleEl);
+        if (dismissible) {
+            const closeBtn = document.createElement('button');
+            closeBtn.className = 'jux-alert-close';
+            closeBtn.innerHTML = '×';
+            alert.appendChild(closeBtn);
         }
 
-        if (message) {
-            const messageEl = document.createElement('div');
-            messageEl.className = 'jux-alert-message';
-            messageEl.textContent = message;
-            content.appendChild(messageEl);
+        // Default dismiss behavior (only if NOT using sync)
+        if (!hasVisibleSync && dismissible) {
+            const closeBtn = alert.querySelector('.jux-alert-close');
+            closeBtn?.addEventListener('click', () => {
+                // 🎯 Fire the dismiss callback event
+                this._triggerCallback('dismiss');
+                alert.remove();
+            });
         }
 
-        alert.appendChild(content);
+        // Wire events using inherited method
+        this._wireStandardEvents(alert);
 
-        // Dismiss button
-        if (dismissible) {
-            const dismissBtn = document.createElement('button');
-            dismissBtn.className = 'jux-alert-dismiss';
-            dismissBtn.innerHTML = '×';
-            dismissBtn.setAttribute('aria-label', 'Dismiss alert');
-            dismissBtn.addEventListener('click', () => this.dismiss());
-            alert.appendChild(dismissBtn);
-        }
+        // Wire sync bindings
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'message') {
+                const transform = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    content.textContent = transformed;
+                    this.state.message = transformed;
+                });
+            }
+            else if (property === 'type') {
+                const transform = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    alert.className = `jux-alert jux-alert-${transformed}`;
+                    if (className) alert.className += ` ${className}`;
+                    this.state.type = transformed;
+                });
+            }
+            else if (property === 'visible') {
+                const transformToState = toState || ((v: any) => Boolean(v));
+                const transform = toComponent || ((v: any) => Boolean(v));
+
+                let isUpdating = false;
+
+                // State → Component
+                stateObj.subscribe((val: any) => {
+                    if (isUpdating) return;
+                    const transformed = transform(val);
+                    alert.style.display = transformed ? 'flex' : 'none';
+                });
+
+                // Component → State (close button)
+                if (dismissible) {
+                    const closeBtn = alert.querySelector('.jux-alert-close');
+                    closeBtn?.addEventListener('click', () => {
+                        if (isUpdating) return;
+                        isUpdating = true;
+
+                        alert.style.display = 'none';
+                        stateObj.set(transformToState(false));
+
+                        // 🎯 Fire the dismiss callback event
+                        this._triggerCallback('dismiss');
+
+                        setTimeout(() => { isUpdating = false; }, 0);
+                    });
+                }
+            }
+        });
 
         container.appendChild(alert);
-        return this;
-    }
+        this._alert = alert;
 
-    /**
-     * Render to another Jux component's container
-     */
-    renderTo(juxComponent: any): this {
-        if (!juxComponent || typeof juxComponent !== 'object') {
-            throw new Error('Alert.renderTo: Invalid component - not an object');
-        }
+        this._injectAlertStyles();
 
-        if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-            throw new Error('Alert.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;
+    }
+
+    private _injectAlertStyles(): void {
+        const styleId = 'jux-alert-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+            .jux-alert {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                padding: 16px;
+                border-radius: 8px;
+                margin-bottom: 12px;
+                position: relative;
+                animation: slideIn 0.3s ease-out;
+            }
+            
+            @keyframes slideIn {
+                from {
+                    opacity: 0;
+                    transform: translateX(-20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateX(0);
+                }
+            }
+            
+            .jux-alert-info {
+                background: #dbeafe;
+                border-left: 4px solid #3b82f6;
+                color: #1e40af;
+            }
+            
+            .jux-alert-success {
+                background: #d1fae5;
+                border-left: 4px solid #10b981;
+                color: #065f46;
+            }
+            
+            .jux-alert-warning {
+                background: #fef3c7;
+                border-left: 4px solid #f59e0b;
+                color: #92400e;
+            }
+            
+            .jux-alert-error {
+                background: #fee2e2;
+                border-left: 4px solid #ef4444;
+                color: #991b1b;
+            }
+            
+            .jux-alert-icon {
+                flex-shrink: 0;
+            }
+            
+            .jux-alert-content {
+                flex: 1;
+                font-size: 14px;
+            }
+            
+            .jux-alert-close {
+                flex-shrink: 0;
+                background: transparent;
+                border: none;
+                font-size: 24px;
+                cursor: pointer;
+                opacity: 0.6;
+                transition: opacity 0.2s;
+                padding: 0;
+                width: 24px;
+                height: 24px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+            
+            .jux-alert-close:hover {
+                opacity: 1;
+            }
+        `;
+        document.head.appendChild(style);
     }
 }
 
-/**
- * Factory helper
- */
 export function alert(id: string, options: AlertOptions = {}): Alert {
     return new Alert(id, options);
 }