juxscript 1.0.19 → 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,13 +1,13 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['click'] as const;  // ✅ Button fires click events
 
-/**
- * Button component options
- */
 export interface ButtonOptions {
   label?: string;
   icon?: string;
-  click?: (e: Event) => void;
   variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'link' | string;
   size?: 'small' | 'medium' | 'large';
   disabled?: boolean;
@@ -19,13 +19,9 @@ export interface ButtonOptions {
   class?: string;
 }
 
-/**
- * Button component state
- */
 type ButtonState = {
   label: string;
   icon: string;
-  click: ((e: Event) => void) | null;
   variant: string;
   size: string;
   disabled: boolean;
@@ -37,28 +33,15 @@ type ButtonState = {
   class: string;
 };
 
-/**
- * Button component
- */
-export class Button {
-  state: ButtonState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
-
-  // Store bind() instructions
-  private _bindings: Array<{ event: string, handler: 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 ?? '',
-      click: opts.click ?? null,
       variant: opts.variant ?? 'primary',
       size: opts.size ?? 'medium',
       disabled: opts.disabled ?? false,
@@ -68,12 +51,22 @@ export class Button {
       type: opts.type ?? 'button',
       style: opts.style ?? '',
       class: opts.class ?? ''
-    };
+    });
+  }
+
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
+  }
+
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent
 
   label(value: string): this {
     this.state.label = value;
@@ -85,20 +78,7 @@ export class Button {
     return this;
   }
 
-  click(callback: (e: Event) => void): this {
-    this.state.click = callback;
-    return this;
-  }
-
-  /**
-   * Bind event handler (stores for wiring in render)
-   */
-  bind(event: string, handler: Function): this {
-    this._bindings.push({ event, handler });
-    return this;
-  }
-
-  variant(value: string): this {
+  variant(value: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'link' | string): this {
     this.state.variant = value;
     return this;
   }
@@ -108,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;
@@ -133,102 +103,73 @@ export class Button {
     return this;
   }
 
-  style(value: string): this {
-    this.state.style = value;
-    return this;
-  }
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
+
+  /**
+   * Override visible() to update the actual button element
+   */
+  visible(value: boolean): this {
+    (this.state as any).visible = value;
+
+    // Update the button element directly, not the container
+    if (this._buttonElement) {
+      this._buttonElement.style.display = value ? '' : 'none';
+    }
 
-  class(value: string): this {
-    this.state.class = value;
     return this;
   }
 
-  /* -------------------------
-   * Render
-   * ------------------------- */
-
   render(targetId?: string): this {
-    let container: HTMLElement;
-
-    if (targetId) {
-      const target = document.querySelector(targetId);
-      if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`Button: Target element "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
-
-    this.container = container;
-    const { label, icon, click, variant, size, disabled, loading, iconPosition, fullWidth, type, style, class: className } = this.state;
+    const container = this._setupContainer(targetId);
+    const { label: text, variant, size, disabled, icon, iconPosition, loading, style, class: className } = this.state;
 
     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.type = type;
     button.disabled = disabled || loading;
 
-    if (fullWidth) {
-      button.classList.add('jux-button-full-width');
-    }
-
-    if (loading) {
-      button.classList.add('jux-button-loading');
-    }
+    if (className) button.className += ` ${className}`;
+    if (style) button.setAttribute('style', style);
 
-    if (className) {
-      button.className += ` ${className}`;
-    }
-
-    if (style) {
-      button.setAttribute('style', style);
-    }
-
-    // Build button content
     if (icon && iconPosition === 'left') {
       const iconEl = document.createElement('span');
-      iconEl.className = 'jux-button-icon jux-button-icon-left';
-      iconEl.textContent = icon;
+      iconEl.className = 'jux-button-icon';
+      iconEl.appendChild(renderIcon(icon));
       button.appendChild(iconEl);
     }
 
-    const labelEl = document.createElement('span');
-    labelEl.className = 'jux-button-label';
-    labelEl.textContent = loading ? 'Loading...' : label;
-    button.appendChild(labelEl);
+    const textEl = document.createElement('span');
+    textEl.textContent = loading ? 'Loading...' : text;
+    button.appendChild(textEl);
 
     if (icon && iconPosition === 'right') {
       const iconEl = document.createElement('span');
-      iconEl.className = 'jux-button-icon jux-button-icon-right';
-      iconEl.textContent = icon;
+      iconEl.className = 'jux-button-icon';
+      iconEl.appendChild(renderIcon(icon));
       button.appendChild(iconEl);
     }
 
-    // Event binding - legacy click handler from state
-    if (click) {
-      button.addEventListener('click', click);
-    }
-
-    // Event binding - bind() method handlers
-    this._bindings.forEach(({ event, handler }) => {
-      button.addEventListener(event, handler as EventListener);
+    button.addEventListener('click', (e) => {
+      if (!disabled && !loading) {
+        this._triggerCallback('click', e);
+      }
     });
 
-    container.appendChild(button);
-    return this;
-  }
+    this._wireStandardEvents(button);
+    this._wireAllSyncs();
 
-  renderTo(juxComponent: this): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Button.renderTo: Invalid component - not an object');
-    }
+    container.appendChild(button);
 
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Button.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;
   }
 }