juxscript 1.0.20 → 1.0.21

package/lib/components/badge.ts

@@ -1,10 +1,13 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
 
 export interface BadgeOptions {
     text?: string;
-    variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
+    pill?: boolean;
     style?: string;
     class?: string;
 }
@@ -12,141 +15,137 @@ export interface BadgeOptions {
 type BadgeState = {
     text: string;
     variant: string;
-    size: string;
+    pill: boolean;
     style: string;
     class: string;
 };
 
-export class Badge {
-    state: BadgeState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-
-    private _bindings: Array<{ event: string, handler: Function }> = [];
-    private _syncBindings: Array<{
-        property: string,
-        stateObj: State<any>,
-        toState?: Function,
-        toComponent?: Function
-    }> = [];
-
+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 ?? 'primary',
-            size: options.size ?? 'md',
+            variant: options.variant ?? 'default',
+            pill: options.pill ?? false,
             style: options.style ?? '',
             class: options.class ?? ''
-        };
+        });
     }
 
-    text(value: string): this {
-        this.state.text = value;
-        return this;
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
     }
 
-    variant(value: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'): this {
-        this.state.variant = value;
-        return this;
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
-    size(value: 'xs' | 'sm' | 'md' | 'lg' | 'xl'): this {
-        this.state.size = value;
-        return this;
-    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
 
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
+    // ✅ Inherited from BaseComponent
 
-    class(value: string): this {
-        this.state.class = value;
+    text(value: string): this {
+        this.state.text = value;
         return this;
     }
 
-    bind(event: string, handler: Function): this {
-        this._bindings.push({ event, handler });
+    variant(value: 'default' | 'success' | 'warning' | 'error' | 'info'): this {
+        this.state.variant = value;
         return this;
     }
 
-    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
-        if (!stateObj || typeof stateObj.subscribe !== 'function') {
-            throw new Error(`Badge.sync: Expected a State object for property "${property}"`);
-        }
-        this._syncBindings.push({ property, stateObj, toState, toComponent });
+    pill(value: boolean): this {
+        this.state.pill = value;
         return this;
     }
 
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
     render(targetId?: string): this {
-        // === 1. SETUP: Get or create container ===
-        let container: HTMLElement;
-        if (targetId) {
-            const target = document.querySelector(targetId);
-            if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`Badge: Target "${targetId}" not found`);
-            }
-            container = target;
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
-        this.container = container;
+        const container = this._setupContainer(targetId);
 
-        // === 2. PREPARE: Destructure state ===
-        const { text, variant, size, style, class: className } = this.state;
+        const { text, variant, pill, style, class: className } = this.state;
 
-        // === 3. BUILD: Create DOM elements ===
         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;
-        badge.textContent = text;
         if (className) badge.className += ` ${className}`;
         if (style) badge.setAttribute('style', style);
+        badge.textContent = text;
 
-        // === 4. WIRE: Attach event listeners and sync bindings ===
-
-        // Wire custom bindings from .bind() calls
-        this._bindings.forEach(({ event, handler }) => {
-            badge.addEventListener(event, handler as EventListener);
-        });
+        this._wireStandardEvents(badge);
 
-        // Wire sync bindings from .sync() calls
+        // Wire sync for text
         this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
             if (property === 'text') {
-                const transformToComponent = toComponent || ((v: any) => String(v));
-
+                const transform = toComponent || ((v: any) => String(v));
                 stateObj.subscribe((val: any) => {
-                    const transformed = transformToComponent(val);
-                    badge.textContent = transformed;
-                    this.state.text = transformed;
-                });
-            }
-            else if (property === 'variant') {
-                const transformToComponent = toComponent || ((v: any) => String(v));
-
-                stateObj.subscribe((val: any) => {
-                    const transformed = transformToComponent(val);
-                    badge.classList.remove(`jux-badge-${this.state.variant}`);
-                    this.state.variant = transformed;
-                    badge.classList.add(`jux-badge-${transformed}`);
+                    badge.textContent = transform(val);
+                    this.state.text = transform(val);
                 });
             }
         });
 
-        // === 5. RENDER: Append to DOM and finalize ===
         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}`);
+    }
+}