juxscript 1.0.19 → 1.0.21

package/lib/components/badge.ts

@@ -1,79 +1,57 @@
-import { getOrCreateContainer } from './helpers.js';
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
 
-/**
- * Badge component options
- */
 export interface BadgeOptions {
     text?: string;
     variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
-    size?: 'sm' | 'md' | 'lg';
     pill?: boolean;
     style?: string;
     class?: string;
 }
 
-/**
- * Badge component state
- */
 type BadgeState = {
     text: string;
     variant: string;
-    size: string;
     pill: boolean;
     style: string;
     class: string;
 };
 
-/**
- * Badge component - Status indicators, counts, labels
- * 
- * Usage:
- *   jux.badge('status', {
- *     text: 'Active',
- *     variant: 'success',
- *     pill: true
- *   }).render('#card');
- * 
- *   jux.badge('count', { text: '5' }).render('#notifications');
- */
-export class Badge {
-    state: BadgeState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-
+export class Badge extends BaseComponent<BadgeState> {
     constructor(id: string, options: BadgeOptions = {}) {
-        this._id = id;
-        this.id = id;
-
-        this.state = {
+        super(id, {
             text: options.text ?? '',
             variant: options.variant ?? 'default',
-            size: options.size ?? 'md',
             pill: options.pill ?? false,
             style: options.style ?? '',
             class: options.class ?? ''
-        };
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    // ✅ Inherited from BaseComponent
 
     text(value: string): this {
         this.state.text = value;
-        this._updateElement();
         return this;
     }
 
     variant(value: 'default' | 'success' | 'warning' | 'error' | 'info'): this {
         this.state.variant = value;
-        this._updateElement();
-        return this;
-    }
-
-    size(value: 'sm' | 'md' | 'lg'): this {
-        this.state.size = value;
         return this;
     }
 
@@ -82,80 +60,92 @@ export class Badge {
         return this;
     }
 
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
-
-    class(value: string): this {
-        this.state.class = value;
-        return this;
-    }
-
-    /* -------------------------
-     * Helpers
-     * ------------------------- */
-
-    private _updateElement(): void {
-        const element = document.getElementById(this._id);
-        if (element) {
-            element.textContent = this.state.text;
-            element.className = `jux-badge jux-badge-${this.state.variant} jux-badge-${this.state.size}`;
-            if (this.state.pill) {
-                element.classList.add('jux-badge-pill');
-            }
-            if (this.state.class) {
-                element.className += ` ${this.state.class}`;
-            }
-        }
-    }
-
-    /* -------------------------
-     * Render
-     * ------------------------- */
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
 
     render(targetId?: string): this {
-        let container: HTMLElement;
-
-        if (targetId) {
-            const target = document.querySelector(targetId);
-            if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`Badge: Target element "${targetId}" not found`);
-            }
-            container = target;
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
+        const container = this._setupContainer(targetId);
 
-        this.container = container;
-        const { text, variant, size, pill, style, class: className } = this.state;
+        const { text, variant, pill, style, class: className } = this.state;
 
         const badge = document.createElement('span');
-        badge.className = `jux-badge jux-badge-${variant} jux-badge-${size}`;
+        badge.className = `jux-badge jux-badge-${variant}`;
+        if (pill) badge.classList.add('jux-badge-pill');
         badge.id = this._id;
+        if (className) badge.className += ` ${className}`;
+        if (style) badge.setAttribute('style', style);
         badge.textContent = text;
 
-        if (pill) {
-            badge.classList.add('jux-badge-pill');
-        }
+        this._wireStandardEvents(badge);
 
-        if (className) {
-            badge.className += ` ${className}`;
-        }
-
-        if (style) {
-            badge.setAttribute('style', style);
-        }
+        // Wire sync for text
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'text') {
+                const transform = toComponent || ((v: any) => String(v));
+                stateObj.subscribe((val: any) => {
+                    badge.textContent = transform(val);
+                    this.state.text = transform(val);
+                });
+            }
+        });
 
         container.appendChild(badge);
+        this._injectBadgeStyles();
+
         return this;
     }
 
-    renderTo(juxComponent: any): this {
-        if (!juxComponent?._id) {
-            throw new Error('Badge.renderTo: Invalid component');
-        }
-        return this.render(`#${juxComponent._id}`);
+    private _injectBadgeStyles(): void {
+        const styleId = 'jux-badge-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      .jux-badge {
+        display: inline-block;
+        padding: 0.25rem 0.75rem;
+        font-size: 0.75rem;
+        font-weight: 600;
+        line-height: 1;
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: baseline;
+        border-radius: 0.25rem;
+        transition: all 0.2s;
+      }
+
+      .jux-badge-pill {
+        border-radius: 10rem;
+      }
+
+      .jux-badge-default {
+        color: #374151;
+        background-color: #e5e7eb;
+      }
+
+      .jux-badge-success {
+        color: #065f46;
+        background-color: #d1fae5;
+      }
+
+      .jux-badge-warning {
+        color: #92400e;
+        background-color: #fef3c7;
+      }
+
+      .jux-badge-error {
+        color: #991b1b;
+        background-color: #fee2e2;
+      }
+
+      .jux-badge-info {
+        color: #1e40af;
+        background-color: #dbeafe;
+      }
+    `;
+        document.head.appendChild(style);
     }
 }
 

package/lib/components/base/BaseComponent.ts

@@ -0,0 +1,397 @@
+import { State } from '../../reactivity/state.js';
+import { getOrCreateContainer } from '../helpers.js';
+
+/**
+ * Abstract base class for all JUX components
+ * Provides common storage, event routing, and lifecycle methods
+ * 
+ * Children must provide:
+ * - TRIGGER_EVENTS constant (readonly string[])
+ * - CALLBACK_EVENTS constant (readonly string[])
+ * - render() implementation
+ */
+export abstract class BaseComponent<TState extends Record<string, any>> {
+    // Common properties (all components have these)
+    state: TState;
+    container: HTMLElement | null = null;
+    _id: string;
+    id: string;
+
+    // Event & sync storage (populated by bind() and sync())
+    protected _bindings: Array<{ event: string, handler: Function }> = [];
+    protected _syncBindings: Array<{
+        property: string,
+        stateObj: State<any>,
+        toState?: Function,
+        toComponent?: Function
+    }> = [];
+    protected _triggerHandlers: Map<string, Function> = new Map();
+    protected _callbackHandlers: Map<string, Function> = new Map();
+
+    constructor(id: string, initialState: TState) {
+        this._id = id;
+        this.id = id;
+        this.state = initialState;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * ABSTRACT METHODS (Child must implement)
+     * ═════════════════════════════════════════════════════════════════ */
+
+    protected abstract getTriggerEvents(): readonly string[];
+    protected abstract getCallbackEvents(): readonly string[];
+    abstract render(targetId?: string): this;
+
+    /* ═════════════════════════════════════════════════════════════════
+     * COMMON FLUENT API (Inherited by all components)
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Set component style
+     */
+    style(value: string): this {
+        (this.state as any).style = value;
+        return this;
+    }
+
+    /**
+     * Set component class
+     */
+    class(value: string): this {
+        (this.state as any).class = value;
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * CSS CLASS MANAGEMENT
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Add a CSS class to the component
+     */
+    addClass(value: string): this {
+        const current = (this.state as any).class || '';
+        const classes = current.split(' ').filter((c: string) => c);
+        if (!classes.includes(value)) {
+            classes.push(value);
+            (this.state as any).class = classes.join(' ');
+            if (this.container) this.container.classList.add(value);
+        }
+        return this;
+    }
+
+    /**
+     * Remove a CSS class from the component
+     */
+    removeClass(value: string): this {
+        const current = (this.state as any).class || '';
+        const classes = current.split(' ').filter((c: string) => c && c !== value);
+        (this.state as any).class = classes.join(' ');
+        if (this.container) this.container.classList.remove(value);
+        return this;
+    }
+
+    /**
+     * Toggle a CSS class on the component
+     */
+    toggleClass(value: string): this {
+        const current = (this.state as any).class || '';
+        const hasClass = current.split(' ').includes(value);
+        return hasClass ? this.removeClass(value) : this.addClass(value);
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * VISIBILITY CONTROL
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Set component visibility
+     */
+    visible(value: boolean): this {
+        (this.state as any).visible = value;
+        if (this.container) {
+            this.container.style.display = value ? '' : 'none';
+        }
+        return this;
+    }
+
+    /**
+     * Show the component
+     */
+    show(): this {
+        return this.visible(true);
+    }
+
+    /**
+     * Hide the component
+     */
+    hide(): this {
+        return this.visible(false);
+    }
+
+    /**
+     * Toggle component visibility
+     */
+    toggleVisibility(): this {
+        const isVisible = (this.state as any).visible ?? true;
+        return this.visible(!isVisible);
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * ATTRIBUTE MANAGEMENT
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Set a single HTML attribute
+     */
+    attr(name: string, value: string): this {
+        const attrs = (this.state as any).attributes || {};
+        (this.state as any).attributes = { ...attrs, [name]: value };
+        if (this.container) this.container.setAttribute(name, value);
+        return this;
+    }
+
+    /**
+     * Set multiple HTML attributes
+     */
+    attrs(attributes: Record<string, string>): this {
+        Object.entries(attributes).forEach(([name, value]) => {
+            this.attr(name, value);
+        });
+        return this;
+    }
+
+    /**
+     * Remove an HTML attribute
+     */
+    removeAttr(name: string): this {
+        const attrs = (this.state as any).attributes || {};
+        delete attrs[name];
+        if (this.container) this.container.removeAttribute(name);
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * DISABLED STATE
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Set disabled state for interactive elements
+     */
+    disabled(value: boolean): this {
+        (this.state as any).disabled = value;
+        if (this.container) {
+            const inputs = this.container.querySelectorAll('input, button, select, textarea');
+            inputs.forEach(el => {
+                (el as HTMLInputElement).disabled = value;
+            });
+            this.container.setAttribute('aria-disabled', String(value));
+        }
+        return this;
+    }
+
+    /**
+     * Enable the component
+     */
+    enable(): this {
+        return this.disabled(false);
+    }
+
+    /**
+     * Disable the component
+     */
+    disable(): this {
+        return this.disabled(true);
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * LOADING STATE
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Set loading state
+     */
+    loading(value: boolean): this {
+        (this.state as any).loading = value;
+        if (this.container) {
+            if (value) {
+                this.container.classList.add('jux-loading');
+                this.container.setAttribute('aria-busy', 'true');
+            } else {
+                this.container.classList.remove('jux-loading');
+                this.container.removeAttribute('aria-busy');
+            }
+        }
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FOCUS MANAGEMENT
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Focus the first focusable element in the component
+     */
+    focus(): this {
+        if (this.container) {
+            const focusable = this.container.querySelector('input, button, select, textarea, [tabindex]');
+            if (focusable) (focusable as HTMLElement).focus();
+        }
+        return this;
+    }
+
+    /**
+     * Blur the currently focused element in the component
+     */
+    blur(): this {
+        if (this.container) {
+            const focused = this.container.querySelector(':focus');
+            if (focused) (focused as HTMLElement).blur();
+        }
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * DOM MANIPULATION
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Remove the component from the DOM
+     */
+    remove(): this {
+        if (this.container) {
+            this.container.remove();
+            this.container = null;
+        }
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * EVENT BINDING (Shared logic)
+     * ═════════════════════════════════════════════════════════════════ */
+
+    bind(event: string, handler: Function): this {
+        if (this._isTriggerEvent(event)) {
+            this._triggerHandlers.set(event, handler);
+        } else if (this._isCallbackEvent(event)) {
+            this._callbackHandlers.set(event, handler);
+        } else {
+            this._bindings.push({ event, handler });
+        }
+        return this;
+    }
+
+    /**
+     * Sync a component property with a State object
+     * @param property - The property to sync
+     * @param stateObj - The State object to sync with
+     * @param toStateOrTransform - Either toState function OR a simple transform function
+     * @param toComponent - Optional toComponent function (if toState was provided)
+     */
+    sync(property: string, stateObj: State<any>, toStateOrTransform?: Function, toComponent?: Function): this {
+        if (!stateObj || typeof stateObj.subscribe !== 'function') {
+            throw new Error(`${this.constructor.name}.sync: Expected a State object for property "${property}"`);
+        }
+
+        // If only 3 args provided, treat the function as toComponent (the common case)
+        const actualToState = (toComponent !== undefined) ? toStateOrTransform : undefined;
+        const actualToComponent = (toComponent !== undefined) ? toComponent : toStateOrTransform;
+
+        this._syncBindings.push({
+            property,
+            stateObj,
+            toState: actualToState,
+            toComponent: actualToComponent
+        });
+        return this;
+    }
+
+    protected _isTriggerEvent(event: string): boolean {
+        return this.getTriggerEvents().includes(event);
+    }
+
+    protected _isCallbackEvent(event: string): boolean {
+        return this.getCallbackEvents().includes(event);
+    }
+
+    protected _triggerCallback(eventName: string, ...args: any[]): void {
+
+        if (this._callbackHandlers.has(eventName)) {
+            const handler = this._callbackHandlers.get(eventName)!;
+            handler(...args);
+        } else {
+            console.warn(`🔍 No handler found for "${eventName}"`);
+        }
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * COMMON RENDER HELPERS
+     * ═════════════════════════════════════════════════════════════════ */
+
+    protected _setupContainer(targetId?: string): HTMLElement {
+        let container: HTMLElement;
+        if (targetId) {
+            // Strip leading # if present
+            const id = targetId.startsWith('#') ? targetId.slice(1) : targetId;
+            const target = document.getElementById(id);
+            if (target) {
+                container = target;
+            } else {
+                // Gracefully create the container instead of throwing
+                console.warn(`[Jux] Target "${targetId}" not found, creating it with graceful fallback`);
+                container = getOrCreateContainer(id);
+            }
+        } else {
+            container = getOrCreateContainer(this._id);
+        }
+
+        // Add universal component class for DOM inspection
+        // container.classList.add('jux-component');
+
+        this.container = container;
+        return container;
+    }
+
+    protected _wireStandardEvents(element: HTMLElement): void {
+        this._bindings.forEach(({ event, handler }) => {
+            element.addEventListener(event, handler as EventListener);
+        });
+    }
+
+    /**
+     * Automatically wire ALL sync bindings by calling the corresponding method
+     * if it exists on the component
+     */
+    protected _wireAllSyncs(): void {
+        this._syncBindings.forEach(({ property, stateObj, toComponent }) => {
+            const transform = toComponent || ((v: any) => v);
+
+            // Check if component has a method matching the property name
+            const method = (this as any)[property];
+
+            if (typeof method === 'function') {
+                // Set initial value
+                const initialValue = transform(stateObj.value);
+                method.call(this, initialValue);
+
+                // Subscribe to changes
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    method.call(this, transformed);
+                });
+            } else {
+                console.warn(
+                    `[Jux] ${this.constructor.name}.sync('${property}'): ` +
+                    `No method .${property}() found. Property will not be synced.`
+                );
+            }
+        });
+    }
+
+    renderTo(juxComponent: any): this {
+        if (!juxComponent?._id) {
+            throw new Error(`${this.constructor.name}.renderTo: Invalid component`);
+        }
+        return this.render(`#${juxComponent._id}`);
+    }
+}