juxscript 1.0.18 → 1.0.20

package/lib/components/sidebar.ts

@@ -1,57 +1,41 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
 
-/**
- * Sidebar component options
- */
 export interface SidebarOptions {
-  title?: string;
-  width?: string;
   position?: 'left' | 'right';
+  width?: string;
   collapsible?: boolean;
   collapsed?: boolean;
   style?: string;
   class?: string;
 }
 
-/**
- * Sidebar component state
- */
 type SidebarState = {
-  title: string;
-  width: string | null;
-  position: string;
+  position: 'left' | 'right';
+  width: string;
   collapsible: boolean;
   collapsed: boolean;
   style: string;
   class: string;
 };
 
-/**
- * Sidebar component
- * 
- * Usage:
- *   const sidebar = jux.sidebar('mySidebar', {
- *     title: 'Navigation',
- *     width: '250px',
- *     position: 'left'
- *   });
- *   sidebar.render('#appsidebar');
- */
 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 }> = [];
+
   constructor(id: string, options: SidebarOptions = {}) {
     this._id = id;
     this.id = id;
 
     this.state = {
-      title: options.title ?? '',
-      width: options.width ?? null, // No default width - let CSS handle it
       position: options.position ?? 'left',
-      collapsible: options.collapsible ?? false,
+      width: options.width ?? null,
+      collapsible: options.collapsible ?? true,
       collapsed: options.collapsed ?? false,
       style: options.style ?? '',
       class: options.class ?? ''
@@ -62,10 +46,6 @@ export class Sidebar {
    * Fluent API
    * ------------------------- */
 
-  title(value: string): this {
-    this.state.title = value;
-    return this;
-  }
 
   width(value: string): this {
     this.state.width = value;
@@ -84,6 +64,7 @@ export class Sidebar {
 
   collapsed(value: boolean): this {
     this.state.collapsed = value;
+    this._updateCollapsedState();
     return this;
   }
 
@@ -97,49 +78,34 @@ export class Sidebar {
     return this;
   }
 
-  toggle(): this {
-    this.state.collapsed = !this.state.collapsed;
-    this._updateDOM();
+  bind(event: string, handler: Function): this {
+    this._bindings.push({ event, handler });
     return this;
   }
 
-  /* -------------------------
-   * Helpers
-   * ------------------------- */
-
-  private _updateDOM(): void {
-    if (!this.container) return;
-
-    const sidebar = this.container.querySelector(`#${this._id}`);
-    if (!sidebar || !(sidebar instanceof HTMLElement)) return;
-
-    const { width, collapsed } = this.state;
-
-    if (collapsed) {
-      sidebar.classList.add('jux-sidebar-collapsed');
-      if (width) {
-        sidebar.style.width = '0';
-      }
-    } else {
-      sidebar.classList.remove('jux-sidebar-collapsed');
-      if (width) {
-        sidebar.style.width = width;
-      }
+  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;
+  }
 
-    const toggleBtn = sidebar.querySelector('.jux-sidebar-toggle');
-    if (toggleBtn) {
-      toggleBtn.textContent = collapsed ? '>' : '<';
-    }
+  toggle(): void {
+    this.state.collapsed = !this.state.collapsed;
+    this._updateCollapsedState();
   }
 
-  /* -------------------------
-   * Render
-   * ------------------------- */
+  private _updateCollapsedState(): void {
+    const sidebar = document.getElementById(this._id);
+    if (sidebar) {
+      sidebar.classList.toggle('jux-sidebar-collapsed', this.state.collapsed);
+    }
+  }
 
   render(targetId?: string): this {
+    // === 1. SETUP: Get container ===
     let container: HTMLElement;
-
     if (targetId) {
       const target = document.querySelector(targetId);
       if (!target || !(target instanceof HTMLElement)) {
@@ -149,78 +115,155 @@ export class Sidebar {
     } else {
       container = getOrCreateContainer(this._id);
     }
-
     this.container = container;
-    const { title, width, position, collapsible, collapsed, style, class: className } = this.state;
 
+    // === 2. PREPARE: Destructure state ===
+    const { position, width, collapsible, collapsed, style, class: className } = this.state;
+
+    // === 3. BUILD: Create DOM elements ===
     const sidebar = document.createElement('aside');
     sidebar.className = `jux-sidebar jux-sidebar-${position}`;
     sidebar.id = this._id;
-    
-    // Only set width if explicitly provided
-    if (width) {
-      sidebar.style.width = collapsed ? '0' : width;
-    }
-
-    if (className) {
-      sidebar.className += ` ${className}`;
-    }
+    if (className) sidebar.className += ` ${className}`;
+    if (collapsed) sidebar.classList.add('jux-sidebar-collapsed');
 
-    if (style) {
-      sidebar.setAttribute('style', sidebar.getAttribute('style') + '; ' + style);
+    const sidebarStyle = `${width ? `width: ${collapsed ? '60px' : width};` : ''} ${style}`;
+    if (sidebarStyle.trim()) {
+      sidebar.setAttribute('style', sidebarStyle);
     }
 
-    if (collapsed) {
-      sidebar.classList.add('jux-sidebar-collapsed');
-    }
-
-    if (title) {
-      const titleEl = document.createElement('div');
-      titleEl.className = 'jux-sidebar-title';
-      titleEl.textContent = title;
-      sidebar.appendChild(titleEl);
-    }
-
-    const content = document.createElement('div');
-    content.className = 'jux-sidebar-content';
-    sidebar.appendChild(content);
-
-    // Event binding - toggle button
     if (collapsible) {
       const toggleBtn = document.createElement('button');
       toggleBtn.className = 'jux-sidebar-toggle';
-      toggleBtn.textContent = collapsed ? '>' : '<';
+      toggleBtn.innerHTML = collapsed
+        ? (position === 'left' ? '▶' : '◀')
+        : (position === 'left' ? '◀' : '▶');
+      toggleBtn.setAttribute('aria-label', 'Toggle sidebar');
+      toggleBtn.setAttribute('title', collapsed ? 'Expand sidebar' : 'Collapse 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;
+        }
       });
 
       sidebar.appendChild(toggleBtn);
     }
 
+    // === 4. WIRE: Add event listeners ===
+
+    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;
+
+        if (property === 'collapsed') {
+          const isCollapsed = Boolean(transformed);
+          this.state.collapsed = isCollapsed;
+          this._updateCollapsedState();
+        }
+      });
+    });
+
+    // === 5. RENDER: Append to DOM ===
     container.appendChild(sidebar);
+    this._injectDefaultStyles();
+
     return this;
   }
 
-  /**
-   * Render to another Jux component's container
-   */
-  renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Sidebar.renderTo: Invalid component - not an object');
-    }
+  private _injectDefaultStyles(): void {
+    const styleId = 'jux-sidebar-styles';
+    if (document.getElementById(styleId)) return;
+
+    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);
+  }
 
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Sidebar.renderTo: Invalid component - missing _id (not a Jux component)');
+  renderTo(juxComponent: any): this {
+    if (!juxComponent?._id) {
+      throw new Error('Sidebar.renderTo: Invalid component');
     }
-
     return this.render(`#${juxComponent._id}`);
   }
 }
 
-/**
- * Factory helper
- */
 export function sidebar(id: string, options: SidebarOptions = {}): Sidebar {
   return new Sidebar(id, options);
 }