juxscript 1.0.20 → 1.0.21

package/lib/components/base/FormInput.ts

@@ -0,0 +1,322 @@
+import { BaseComponent } from './BaseComponent.js';
+
+/**
+ * Base state interface for all form inputs
+ */
+export interface FormInputState extends Record<string, any> {
+    label: string;
+    required: boolean;
+    disabled: boolean;
+    name: string;
+    style: string;
+    class: string;
+    errorMessage?: string;
+}
+
+/**
+ * Abstract base class for all form input components
+ * Extends BaseComponent with form-specific functionality
+ */
+export abstract class FormInput<TState extends FormInputState> extends BaseComponent<TState> {
+    protected _inputElement: HTMLElement | null = null;
+    protected _labelElement: HTMLLabelElement | null = null;
+    protected _errorElement: HTMLElement | null = null;
+    protected _onValidate?: (value: any) => boolean | string;
+    protected _hasBeenValidated: boolean = false;  // NEW: Track if user has submitted/validated
+
+    /* ═════════════════════════════════════════════════════════════════
+     * ABSTRACT METHODS (Child must implement)
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Get the current value of the input
+     */
+    abstract getValue(): any;
+
+    /**
+     * Set the value of the input
+     */
+    abstract setValue(value: any): this;
+
+    /**
+     * Build the actual input element (input, select, textarea, etc.)
+     */
+    protected abstract _buildInputElement(): HTMLElement;
+
+    /**
+     * Validate the current value
+     */
+    protected abstract _validateValue(value: any): boolean | string;
+
+    /* ═════════════════════════════════════════════════════════════════
+     * COMMON FORM INPUT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    label(value: string): this {
+        this.state.label = value;
+        if (this._labelElement) {
+            this._labelElement.textContent = value;
+        }
+        return this;
+    }
+
+    required(value: boolean): this {
+        this.state.required = value;
+        return this;
+    }
+
+    name(value: string): this {
+        this.state.name = value;
+        return this;
+    }
+
+    onValidate(handler: (value: any) => boolean | string): this {
+        this._onValidate = handler;
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * VALIDATION
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Validate the current value and show/hide errors
+     */
+    validate(): boolean {
+        this._hasBeenValidated = true;  // Mark as validated
+        const value = this.getValue();
+        const result = this._validateValue(value);
+
+        if (result === true) {
+            this._clearError();
+            return true;
+        } else {
+            this._showError(result as string);
+            return false;
+        }
+    }
+
+    /**
+     * Check if current value is valid without showing errors
+     */
+    isValid(): boolean {
+        const value = this.getValue();
+        return this._validateValue(value) === true;
+    }
+
+    /**
+     * Show error message
+     */
+    protected _showError(message: string): void {
+        if (this._errorElement) {
+            this._errorElement.textContent = message;
+            this._errorElement.style.display = 'block';
+        }
+
+        if (this._inputElement) {
+            this._inputElement.classList.add('jux-input-invalid');
+        }
+
+        this.state.errorMessage = message;
+    }
+
+    /**
+     * Clear error message
+     */
+    protected _clearError(): void {
+        if (this._errorElement) {
+            this._errorElement.textContent = '';
+            this._errorElement.style.display = 'none';
+        }
+
+        if (this._inputElement) {
+            this._inputElement.classList.remove('jux-input-invalid');
+        }
+
+        this.state.errorMessage = undefined;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * COMMON RENDER HELPERS
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Build label element
+     */
+    protected _renderLabel(): HTMLLabelElement {
+        const { label, required } = this.state;
+
+        const labelEl = document.createElement('label');
+        labelEl.className = 'jux-input-label';
+        labelEl.htmlFor = `${this._id}-input`;
+        labelEl.textContent = label;
+
+        if (required) {
+            const requiredSpan = document.createElement('span');
+            requiredSpan.className = 'jux-input-required';
+            requiredSpan.textContent = ' *';
+            labelEl.appendChild(requiredSpan);
+        }
+
+        this._labelElement = labelEl;
+        return labelEl;
+    }
+
+    /**
+     * Build error element
+     */
+    protected _renderError(): HTMLElement {
+        const errorEl = document.createElement('div');
+        errorEl.className = 'jux-input-error';
+        errorEl.id = `${this._id}-error`;
+        errorEl.style.display = 'none';
+
+        this._errorElement = errorEl;
+        return errorEl;
+    }
+
+    /**
+     * Wire up two-way sync for value property
+     */
+    protected _wireFormSync(inputElement: HTMLElement, eventName: string = 'input'): void {
+        const valueSync = this._syncBindings.find(b => b.property === 'value');
+
+        if (valueSync) {
+            const { stateObj, toState, toComponent } = valueSync;
+
+            // Default transforms
+            const transformToState = toState || ((v: any) => v);
+            const transformToComponent = toComponent || ((v: any) => v);
+
+            let isUpdating = false;
+
+            // State → Component
+            stateObj.subscribe((val: any) => {
+                if (isUpdating) return;
+                const transformed = transformToComponent(val);
+                this.setValue(transformed);
+            });
+
+            // Component → State
+            inputElement.addEventListener(eventName, () => {
+                if (isUpdating) return;
+                isUpdating = true;
+
+                const value = this.getValue();
+                const transformed = transformToState(value);
+                this._clearError();
+
+                stateObj.set(transformed);
+
+                setTimeout(() => { isUpdating = false; }, 0);
+            });
+        } else {
+            // Default behavior without sync
+            inputElement.addEventListener(eventName, () => {
+                this._clearError();
+            });
+        }
+
+        // Only validate on blur IF the field has been validated before (e.g., after submit)
+        inputElement.addEventListener('blur', () => {
+            if (this._hasBeenValidated) {
+                this.validate();
+            }
+        });
+    }
+
+    /**
+     * Inject default form input styles
+     */
+    protected _injectFormStyles(): void {
+        const styleId = 'jux-form-input-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+            .jux-input {
+                margin-bottom: 16px;
+            }
+
+            .jux-input-container {
+                position: relative;
+            }
+
+            .jux-input-with-icon .jux-input-element {
+                padding-left: 40px;
+            }
+
+            .jux-input-icon {
+                position: absolute;
+                left: 12px;
+                top: 50%;
+                transform: translateY(-50%);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #6b7280;
+                pointer-events: none;
+            }
+
+            .jux-input-icon svg {
+                width: 18px;
+                height: 18px;
+            }
+
+            .jux-input-label {
+                display: block;
+                margin-bottom: 6px;
+                font-weight: 500;
+                color: #374151;
+            }
+
+            .jux-input-required {
+                color: #ef4444;
+            }
+
+            .jux-input-element {
+                width: 100%;
+                padding: 8px 12px;
+                border: 1px solid #d1d5db;
+                border-radius: 6px;
+                font-size: 14px;
+                transition: border-color 0.2s;
+                box-sizing: border-box;
+            }
+
+            .jux-input-element:focus {
+                outline: none;
+                border-color: #3b82f6;
+                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+            }
+
+            .jux-input-element:disabled {
+                background-color: #f3f4f6;
+                cursor: not-allowed;
+            }
+
+            .jux-input-element.jux-input-invalid {
+                border-color: #ef4444;
+            }
+
+            .jux-input-element.jux-input-invalid:focus {
+                box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+            }
+
+            .jux-input-error {
+                color: #ef4444;
+                font-size: 12px;
+                margin-top: 4px;
+            }
+
+            .jux-input-counter {
+                text-align: right;
+                font-size: 12px;
+                color: #6b7280;
+                margin-top: 4px;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+}

package/lib/components/button.ts

@@ -1,10 +1,10 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
+import { BaseComponent } from './base/BaseComponent.js';
 import { renderIcon } from './icons.js';
 
-/**
- * Button component options
- */
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['click'] as const;  // ✅ Button fires click events
+
 export interface ButtonOptions {
   label?: string;
   icon?: string;
@@ -19,9 +19,6 @@ export interface ButtonOptions {
   class?: string;
 }
 
-/**
- * Button component state
- */
 type ButtonState = {
   label: string;
   icon: string;
@@ -36,31 +33,13 @@ type ButtonState = {
   class: string;
 };
 
-/**
- * Button component
- */
-export class Button {
-  state: ButtonState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
-
-  // CRITICAL: Store bind/sync instructions for deferred wiring
-  private _bindings: Array<{ event: string, handler: Function }> = [];
-  private _syncBindings: Array<{
-    property: string,
-    stateObj: State<any>,
-    toState?: Function,
-    toComponent?: Function
-  }> = [];
+export class Button extends BaseComponent<ButtonState> {
+  private _buttonElement: HTMLButtonElement | null = null; // ✅ Store button reference
 
   constructor(id: string, options?: ButtonOptions) {
-    this._id = id;
-    this.id = id;
-
     const opts = options || {};
 
-    this.state = {
+    super(id, {
       label: opts.label ?? 'Button',
       icon: opts.icon ?? '',
       variant: opts.variant ?? 'primary',
@@ -72,12 +51,22 @@ export class Button {
       type: opts.type ?? 'button',
       style: opts.style ?? '',
       class: opts.class ?? ''
-    };
+    });
+  }
+
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent
 
   label(value: string): this {
     this.state.label = value;
@@ -99,16 +88,6 @@ export class Button {
     return this;
   }
 
-  disabled(value: boolean): this {
-    this.state.disabled = value;
-    return this;
-  }
-
-  loading(value: boolean): this {
-    this.state.loading = value;
-    return this;
-  }
-
   iconPosition(value: 'left' | 'right'): this {
     this.state.iconPosition = value;
     return this;
@@ -124,62 +103,30 @@ export class Button {
     return this;
   }
 
-  style(value: string): this {
-    this.state.style = value;
-    return this;
-  }
-
-  class(value: string): this {
-    this.state.class = value;
-    return this;
-  }
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
 
   /**
-   * Bind DOM events (click, hover, etc.)
-   * Stores handlers for wiring in render()
+   * Override visible() to update the actual button element
    */
-  bind(event: string, handler: Function): this {
-    this._bindings.push({ event, handler });
-    return this;
-  }
+  visible(value: boolean): this {
+    (this.state as any).visible = value;
 
-  /**
-   * Two-way state synchronization
-   * Stores sync instructions for wiring in render()
-   */
-  sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
-    if (!stateObj || typeof stateObj.subscribe !== 'function') {
-      throw new Error(`Button.sync: Expected a State object for property "${property}"`);
+    // Update the button element directly, not the container
+    if (this._buttonElement) {
+      this._buttonElement.style.display = value ? '' : 'none';
     }
-    this._syncBindings.push({ property, stateObj, toState, toComponent });
+
     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(`Button: Target "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
-    this.container = container;
-
-    // === 2. PREPARE: Destructure state ===
+    const container = this._setupContainer(targetId);
     const { label: text, variant, size, disabled, icon, iconPosition, loading, style, class: className } = this.state;
-    const hasTextSync = this._syncBindings.some(b => b.property === 'text');
-    const hasDisabledSync = this._syncBindings.some(b => b.property === 'disabled');
 
-    // === 3. BUILD: Create DOM elements ===
     const button = document.createElement('button');
+    this._buttonElement = button; // ✅ Store reference
     button.className = `jux-button jux-button-${variant} jux-button-${size}`;
     button.id = this._id;
     button.disabled = disabled || loading;
@@ -205,46 +152,15 @@ export class Button {
       button.appendChild(iconEl);
     }
 
-    // === 4. WIRE: Attach event listeners and sync bindings ===
-
-    // Wire custom bindings from .bind() calls
-    this._bindings.forEach(({ event, handler }) => {
-      button.addEventListener(event, handler as EventListener);
-    });
-
-    // Wire sync bindings from .sync() calls
-    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-      if (property === 'text') {
-        const transformToComponent = toComponent || ((v: any) => String(v));
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transformToComponent(val);
-          textEl.textContent = this.state.loading ? 'Loading...' : transformed;
-          this.state.label = transformed;
-        });
-      }
-      else if (property === 'disabled') {
-        const transformToComponent = toComponent || ((v: any) => Boolean(v));
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transformToComponent(val);
-          button.disabled = transformed || this.state.loading;
-          this.state.disabled = transformed;
-        });
-      }
-      else if (property === 'loading') {
-        const transformToComponent = toComponent || ((v: any) => Boolean(v));
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transformToComponent(val);
-          button.disabled = this.state.disabled || transformed;
-          textEl.textContent = transformed ? 'Loading...' : this.state.label;
-          this.state.loading = transformed;
-        });
+    button.addEventListener('click', (e) => {
+      if (!disabled && !loading) {
+        this._triggerCallback('click', e);
       }
     });
 
-    // === 5. RENDER: Append to DOM and finalize ===
+    this._wireStandardEvents(button);
+    this._wireAllSyncs();
+
     container.appendChild(button);
 
     requestAnimationFrame(() => {
@@ -255,13 +171,6 @@ export class Button {
 
     return this;
   }
-
-  renderTo(juxComponent: any): this {
-    if (!juxComponent?._id) {
-      throw new Error('Button.renderTo: Invalid component');
-    }
-    return this.render(`#${juxComponent._id}`);
-  }
 }
 
 export function button(id: string, options?: ButtonOptions): Button {