juxscript 1.0.20 → 1.0.21

package/lib/components/sidebar.ts

@@ -1,5 +1,8 @@
-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 = ['toggle'] as const;
 
 export interface SidebarOptions {
   position?: 'left' | 'right';
@@ -19,33 +22,40 @@ type SidebarState = {
   class: string;
 };
 
-export class Sidebar {
-  state: SidebarState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
-
-  private _bindings: Array<{ event: string, handler: Function }> = [];
-  private _syncBindings: Array<{ property: string, stateObj: State<any>, transform?: Function }> = [];
+export class Sidebar extends BaseComponent<SidebarState> {
+  private _sidebar: HTMLElement | null = null;
 
   constructor(id: string, options: SidebarOptions = {}) {
-    this._id = id;
-    this.id = id;
-
-    this.state = {
+    super(id, {
       position: options.position ?? 'left',
-      width: options.width ?? null,
+      width: options.width ?? '',
       collapsible: options.collapsible ?? true,
       collapsed: options.collapsed ?? false,
       style: options.style ?? '',
       class: options.class ?? ''
-    };
+    });
+  }
+
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
 
+  // ✅ Inherited from BaseComponent:
+  // - style(), class()
+  // - bind(), sync(), renderTo()
+  // - addClass(), removeClass(), toggleClass()
+  // - visible(), show(), hide()
+  // - attr(), attrs(), removeAttr()
+  // - disabled(), enable(), disable()
+  // - loading(), focus(), blur(), remove()
 
   width(value: string): this {
     this.state.width = value;
@@ -68,59 +78,29 @@ export class Sidebar {
     return this;
   }
 
-  style(value: string): this {
-    this.state.style = value;
-    return this;
-  }
-
-  class(value: string): this {
-    this.state.class = value;
-    return this;
-  }
-
-  bind(event: string, handler: Function): this {
-    this._bindings.push({ event, handler });
-    return this;
-  }
-
-  sync(property: string, stateObj: State<any>, transform?: Function): this {
-    if (!stateObj || typeof stateObj.subscribe !== 'function') {
-      throw new Error(`Sidebar.sync: Expected a State object for property "${property}"`);
-    }
-    this._syncBindings.push({ property, stateObj, transform });
-    return this;
-  }
-
   toggle(): void {
     this.state.collapsed = !this.state.collapsed;
     this._updateCollapsedState();
+    // 🎯 Fire the toggle callback event
+    this._triggerCallback('toggle', this.state.collapsed);
   }
 
   private _updateCollapsedState(): void {
-    const sidebar = document.getElementById(this._id);
-    if (sidebar) {
-      sidebar.classList.toggle('jux-sidebar-collapsed', this.state.collapsed);
+    if (this._sidebar) {
+      this._sidebar.classList.toggle('jux-sidebar-collapsed', this.state.collapsed);
     }
   }
 
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
+
   render(targetId?: string): this {
-    // === 1. SETUP: Get container ===
-    let container: HTMLElement;
-    if (targetId) {
-      const target = document.querySelector(targetId);
-      if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`Sidebar: Target element "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
-    this.container = container;
+    const container = this._setupContainer(targetId);
 
-    // === 2. PREPARE: Destructure state ===
     const { position, width, collapsible, collapsed, style, class: className } = this.state;
 
-    // === 3. BUILD: Create DOM elements ===
+    // Build sidebar element
     const sidebar = document.createElement('aside');
     sidebar.className = `jux-sidebar jux-sidebar-${position}`;
     sidebar.id = this._id;
@@ -144,14 +124,12 @@ export class Sidebar {
       toggleBtn.addEventListener('click', () => {
         this.toggle();
 
-        // Update button icon and title
         const isCollapsed = this.state.collapsed;
         toggleBtn.innerHTML = isCollapsed
           ? (position === 'left' ? '▶' : '◀')
           : (position === 'left' ? '◀' : '▶');
         toggleBtn.setAttribute('title', isCollapsed ? 'Expand sidebar' : 'Collapse sidebar');
 
-        // Animate width change
         if (width) {
           sidebar.style.width = isCollapsed ? '60px' : width;
         }
@@ -160,26 +138,25 @@ export class Sidebar {
       sidebar.appendChild(toggleBtn);
     }
 
-    // === 4. WIRE: Add event listeners ===
+    // Wire events using inherited method
+    this._wireStandardEvents(sidebar);
 
-    this._bindings.forEach(({ event, handler }) => {
-      sidebar.addEventListener(event, handler as EventListener);
-    });
-
-    this._syncBindings.forEach(({ property, stateObj, transform }) => {
-      stateObj.subscribe((val: any) => {
-        const transformed = transform ? transform(val) : val;
+    // Wire sync bindings for 'collapsed' property
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'collapsed') {
+        const transform = toComponent || ((v: any) => v);
 
-        if (property === 'collapsed') {
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
           const isCollapsed = Boolean(transformed);
           this.state.collapsed = isCollapsed;
           this._updateCollapsedState();
-        }
-      });
+        });
+      }
     });
 
-    // === 5. RENDER: Append to DOM ===
     container.appendChild(sidebar);
+    this._sidebar = sidebar;
     this._injectDefaultStyles();
 
     return this;
@@ -192,75 +169,67 @@ export class Sidebar {
     const style = document.createElement('style');
     style.id = styleId;
     style.textContent = `
-            .jux-sidebar {
-                position: relative;
-                height: 100vh;
-                background: #f9fafb;
-                border-right: 1px solid #e5e7eb;
-                transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                overflow: hidden;
-            }
-
-            .jux-sidebar-right {
-                border-right: none;
-                border-left: 1px solid #e5e7eb;
-            }
-
-            .jux-sidebar-toggle {
-                position: absolute;
-                bottom: 20px;
-                right: 20px;
-                width: 32px;
-                height: 32px;
-                border: none;
-                background: #3b82f6;
-                color: white;
-                border-radius: 6px;
-                cursor: pointer;
-                font-size: 14px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-                z-index: 100;
-                box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
-            }
-
-            .jux-sidebar-toggle:hover {
-                background: #2563eb;
-                transform: scale(1.05);
-                box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
-            }
-
-            .jux-sidebar-toggle:active {
-                transform: scale(0.95);
-            }
-
-            .jux-sidebar-collapsed {
-                width: 60px !important;
-            }
-
-            /* Smooth fade for content */
-            .jux-sidebar-collapsed > *:not(.jux-sidebar-toggle) {
-                opacity: 0;
-                pointer-events: none;
-                transition: opacity 0.2s ease-out;
-            }
-
-            .jux-sidebar > *:not(.jux-sidebar-toggle) {
-                opacity: 1;
-                pointer-events: auto;
-                transition: opacity 0.3s ease-in 0.1s;
-            }
-        `;
-    document.head.appendChild(style);
-  }
+      .jux-sidebar {
+        position: relative;
+        height: 100vh;
+        background: #f9fafb;
+        border-right: 1px solid #e5e7eb;
+        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        overflow: hidden;
+      }
 
-  renderTo(juxComponent: any): this {
-    if (!juxComponent?._id) {
-      throw new Error('Sidebar.renderTo: Invalid component');
-    }
-    return this.render(`#${juxComponent._id}`);
+      .jux-sidebar-right {
+        border-right: none;
+        border-left: 1px solid #e5e7eb;
+      }
+
+      .jux-sidebar-toggle {
+        position: absolute;
+        bottom: 20px;
+        right: 20px;
+        width: 32px;
+        height: 32px;
+        border: none;
+        background: #3b82f6;
+        color: white;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        z-index: 100;
+        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+      }
+
+      .jux-sidebar-toggle:hover {
+        background: #2563eb;
+        transform: scale(1.05);
+        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+      }
+
+      .jux-sidebar-toggle:active {
+        transform: scale(0.95);
+      }
+
+      .jux-sidebar-collapsed {
+        width: 60px !important;
+      }
+
+      .jux-sidebar-collapsed > *:not(.jux-sidebar-toggle) {
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s ease-out;
+      }
+
+      .jux-sidebar > *:not(.jux-sidebar-toggle) {
+        opacity: 1;
+        pointer-events: auto;
+        transition: opacity 0.3s ease-in 0.1s;
+      }
+    `;
+    document.head.appendChild(style);
   }
 }
 

package/lib/components/style.ts

@@ -6,101 +6,38 @@ import { ErrorHandler } from './error-handler.js';
  * Auto-renders when created or modified
  */
 export class Style {
-  private _content: string = '';
-  private _element: HTMLStyleElement | null = null;
+  private _id: string;
+  private css: string;
 
-  constructor(content: string = '') {
-    this._content = content;
-
-    // Auto-render if content provided
-    if (content) {
-      this.render();
-    }
-  }
-
-  /**
-   * Set inline CSS content
-   */
-  content(css: string): this {
-    this._content = css;
-    this.render();
-    return this;
+  constructor(css: string, id?: string) {
+    // ID only for deduplication, auto-generate if not provided
+    this._id = id || `jux-style-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    this.css = css;
   }
 
-  /**
-   * Append CSS to existing content
-   */
-  append(css: string): this {
-    this._content += '\n' + css;
-    this.render();
-    return this;
-  }
-
-  /**
-   * Prepend CSS to existing content
-   */
-  prepend(css: string): this {
-    this._content = css + '\n' + this._content;
-    this.render();
-    return this;
-  }
-
-  /**
-   * Render the inline style element
-   */
   render(): this {
-    if (typeof document === 'undefined') {
+    // Check if style with this ID already exists
+    if (document.getElementById(this._id)) {
       return this;
     }
 
-    try {
-      // Remove existing element if it exists
-      this.remove();
-
-      // Create <style> element for inline CSS
-      const style = document.createElement('style');
-      style.textContent = this._content;
-      document.head.appendChild(style);
-      this._element = style;
-
-      console.log('✓ Inline styles rendered');
-    } catch (error: any) {
-      ErrorHandler.captureError({
-        component: 'Style',
-        method: 'render',
-        message: error.message,
-        stack: error.stack,
-        timestamp: new Date(),
-        context: {
-          type: 'inline',
-          error: 'runtime_exception'
-        }
-      });
-    }
+    const style = document.createElement('style');
+    style.id = this._id;
+    style.textContent = this.css;
+    document.head.appendChild(style);
 
     return this;
   }
 
-  /**
-   * Remove the style from the document
-   */
-  remove(): this {
-    if (this._element && this._element.parentNode) {
-      this._element.parentNode.removeChild(this._element);
-      this._element = null;
+  remove(): void {
+    const existing = document.getElementById(this._id);
+    if (existing) {
+      existing.remove();
     }
-    return this;
   }
 }
 
-/**
- * Factory function
- * 
- * Usage:
- *   jux.style('body { margin: 0; }');
- *   jux.style().content('.highlight { color: red; }');
- *   jux.style('h1 { font-size: 2rem; }').append('h2 { font-size: 1.5rem; }');
- */
-export function style(content: string = ''): Style {
-  return new Style(content);
+// ✅ ID is optional
+export function style(css: string, id?: string): Style {
+  return new Style(css, id);
 }