juxscript 1.0.2 → 1.0.4

package/lib/components/button.ts

@@ -1,14 +1,21 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
-
+import { getOrCreateContainer } from './helpers.js';
 
 /**
  * Button component options
  */
 export interface ButtonOptions {
   label?: string;
-  variant?: 'primary' | 'secondary' | 'danger' | 'success' | string;
+  icon?: string;
+  click?: (e: Event) => void;
+  variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'link' | string;
+  size?: 'small' | 'medium' | 'large';
   disabled?: boolean;
-  onClick?: (e: Event) => void;
+  loading?: boolean;
+  iconPosition?: 'left' | 'right';
+  fullWidth?: boolean;
+  type?: 'button' | 'submit' | 'reset';
+  style?: string;
+  class?: string;
 }
 
 /**
@@ -16,55 +23,153 @@ export interface ButtonOptions {
  */
 type ButtonState = {
   label: string;
+  icon: string;
+  click: ((e: Event) => void) | null;
   variant: string;
+  size: string;
   disabled: boolean;
-  onClick: ((e: Event) => void) | null;
+  loading: boolean;
+  iconPosition: string;
+  fullWidth: boolean;
+  type: 'button' | 'submit' | 'reset';
+  style: string;
+  class: string;
 };
 
 /**
  * Button component
  * 
  * Usage:
- *   const btn = jux.button('myButton', { label: 'Click Me', onClick: () => console.log('clicked') });
- *   btn.render();
+ *   jux.button('myButton').label('Click Me').click(() => console.log('hi')).render();
+ *   
+ *   // Or with options
+ *   jux.button('myButton', { label: 'Click Me', click: () => console.log('hi') }).render();
  */
-export class Button extends Reactive {
-  state!: ButtonState;
+export class Button {
+  state: ButtonState;
   container: HTMLElement | null = null;
-  
-  constructor(componentId: string, options: ButtonOptions = {}) {
-    super();
-    this._setComponentId(componentId);
-    
-    this.state = this._createReactiveState({
-      label: options.label ?? 'Button',
-      variant: options.variant ?? 'primary',
-      disabled: options.disabled ?? false,
-      onClick: options.onClick ?? null
-    }) as ButtonState;
+  _id: string;
+  id: string;
+
+  constructor(id: string, options?: ButtonOptions) {
+    this._id = id;
+    this.id = id;
+
+    const opts = options || {};
+
+    this.state = {
+      label: opts.label ?? 'Button',
+      icon: opts.icon ?? '',
+      click: opts.click ?? null,
+      variant: opts.variant ?? 'primary',
+      size: opts.size ?? 'medium',
+      disabled: opts.disabled ?? false,
+      loading: opts.loading ?? false,
+      iconPosition: opts.iconPosition ?? 'left',
+      fullWidth: opts.fullWidth ?? false,
+      type: opts.type ?? 'button',
+      style: opts.style ?? '',
+      class: opts.class ?? ''
+    };
   }
 
   /* -------------------------
    * Fluent API
    * ------------------------- */
 
+  /**
+   * Set button label text
+   */
   label(value: string): this {
     this.state.label = value;
     return this;
   }
 
+  /**
+   * Set button icon (emoji or text)
+   */
+  icon(value: string): this {
+    this.state.icon = value;
+    return this;
+  }
+
+  /**
+   * Set click handler
+   */
+  click(callback: (e: Event) => void): this {
+    this.state.click = callback;
+    return this;
+  }
+
+  /**
+   * Set button variant/style
+   */
   variant(value: string): this {
     this.state.variant = value;
     return this;
   }
 
+  /**
+   * Set button size
+   */
+  size(value: 'small' | 'medium' | 'large'): this {
+    this.state.size = value;
+    return this;
+  }
+
+  /**
+   * Set disabled state
+   */
   disabled(value: boolean): this {
     this.state.disabled = value;
     return this;
   }
 
-  onClick(callback: (e: Event) => void): this {
-    this.state.onClick = callback;
+  /**
+   * Set loading state
+   */
+  loading(value: boolean): this {
+    this.state.loading = value;
+    return this;
+  }
+
+  /**
+   * Set icon position (left or right)
+   */
+  iconPosition(value: 'left' | 'right'): this {
+    this.state.iconPosition = value;
+    return this;
+  }
+
+  /**
+   * Set full width
+   */
+  fullWidth(value: boolean): this {
+    this.state.fullWidth = value;
+    return this;
+  }
+
+  /**
+   * Set button type attribute
+   */
+  type(value: 'button' | 'submit' | 'reset'): this {
+    this.state.type = value;
+    return this;
+  }
+
+  /**
+   * Set inline style
+   */
+  style(value: string): this {
+    this.state.style = value;
+    return this;
+  }
+
+  /**
+   * Set additional CSS classes
+   */
+  class(value: string): this {
+    this.state.class = value;
     return this;
   }
 
@@ -72,65 +177,95 @@ export class Button extends Reactive {
    * Render
    * ------------------------- */
 
+  /**
+   * Render button to target element
+   */
   render(targetId?: string): this {
     let container: HTMLElement;
-    
+
     if (targetId) {
-      // Use provided targetId - must exist
       const target = document.querySelector(targetId);
       if (!target || !(target instanceof HTMLElement)) {
         throw new Error(`Button: Target element "${targetId}" not found`);
       }
       container = target;
     } else {
-      // Create or get container with component ID
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
-    
+
     this.container = container;
-    const { label, variant, disabled, onClick } = this.state;
-    
-    // Create button element
+    const { label, icon, click, variant, size, disabled, loading, iconPosition, fullWidth, type, style, class: className } = this.state;
+
     const button = document.createElement('button');
-    button.className = `jux-button jux-button-${variant}`;
-    button.id = this._componentId;
-    button.textContent = label;
-    button.disabled = disabled;
-    
-    // Attach click handler if provided
-    if (onClick) {
-      button.addEventListener('click', onClick);
+    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);
+    }
+
+    // Build button content
+    if (icon && iconPosition === 'left') {
+      const iconEl = document.createElement('span');
+      iconEl.className = 'jux-button-icon jux-button-icon-left';
+      iconEl.textContent = icon;
+      button.appendChild(iconEl);
     }
-    
+
+    const labelEl = document.createElement('span');
+    labelEl.className = 'jux-button-label';
+    labelEl.textContent = loading ? 'Loading...' : label;
+    button.appendChild(labelEl);
+
+    if (icon && iconPosition === 'right') {
+      const iconEl = document.createElement('span');
+      iconEl.className = 'jux-button-icon jux-button-icon-right';
+      iconEl.textContent = icon;
+      button.appendChild(iconEl);
+    }
+
+    // Event binding - click handler
+    if (click) {
+      button.addEventListener('click', click);
+    }
+
     container.appendChild(button);
     return this;
   }
 
   /**
    * Render to another Jux component's container
-   * 
-   * Usage:
-   *   const container = jux.node('myContainer');
-   *   const btn = jux.button('myBtn').renderTo(container);
    */
-  renderTo(juxComponent: any): this {
-    // Verify it's a Jux component (has _componentId from Reactive base)
+  renderTo(juxComponent: this): this {
     if (!juxComponent || typeof juxComponent !== 'object') {
       throw new Error('Button.renderTo: Invalid component - not an object');
     }
-    
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('Button.renderTo: Invalid component - missing _componentId (not a Jux component)');
+
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('Button.renderTo: Invalid component - missing _id (not a Jux component)');
     }
-    
-    // Render to the component's ID as a selector
-    return this.render(`#${juxComponent._componentId}`);
+
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
 /**
  * Factory helper
  */
-export function button(componentId: string, options: ButtonOptions = {}): Button {
-  return new Button(componentId, options);
+export function button(id: string, options?: ButtonOptions): Button {
+  return new Button(id, options);
 }

package/lib/components/card.ts

@@ -1,13 +1,4 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
-
-/**
- * Action configuration for card actions
- */
-export interface CardAction {
-  label: string;
-  onClick: () => void;
-  variant?: 'primary' | 'secondary' | 'danger';
-}
+import { getOrCreateContainer } from './helpers.js';
 
 /**
  * Card component options
@@ -17,8 +8,9 @@ export interface CardOptions {
   subtitle?: string;
   content?: string;
   image?: string;
-  actions?: CardAction[];
   variant?: 'default' | 'elevated' | 'outlined';
+  style?: string;
+  class?: string;
 }
 
 /**
@@ -29,8 +21,10 @@ type CardState = {
   subtitle: string;
   content: string;
   image: string;
-  actions: CardAction[];
   variant: string;
+  style: string;
+  class: string;
+  hasActions: boolean;
 };
 
 /**
@@ -42,23 +36,31 @@ type CardState = {
  *     content: 'Card content here'
  *   });
  *   card.render();
+ * 
+ *   // Add actions (any components)
+ *   jux.button('view-btn').label('View').render('#myCard-actions');
+ *   jux.button('delete-btn').label('Delete').render('#myCard-actions');
  */
-export class Card extends Reactive {
-  state!: CardState;
+export class Card {
+  state: CardState;
   container: HTMLElement | null = null;
-  
-  constructor(componentId: string, options: CardOptions = {}) {
-    super();
-    this._setComponentId(componentId);
-    
-    this.state = this._createReactiveState({
+  _id: string;
+  id: string;
+
+  constructor(id: string, options: CardOptions = {}) {
+    this._id = id;
+    this.id = id;
+
+    this.state = {
       title: options.title ?? '',
       subtitle: options.subtitle ?? '',
       content: options.content ?? '',
       image: options.image ?? '',
-      actions: options.actions ?? [],
-      variant: options.variant ?? 'default'
-    }) as CardState;
+      variant: options.variant ?? 'default',
+      style: options.style ?? '',
+      class: options.class ?? '',
+      hasActions: false
+    };
   }
 
   /* -------------------------
@@ -85,13 +87,27 @@ export class Card extends Reactive {
     return this;
   }
 
-  actions(value: CardAction[]): this {
-    this.state.actions = value;
+  variant(value: string): this {
+    this.state.variant = value;
+    return this;
+  }
+
+  style(value: string): this {
+    this.state.style = value;
     return this;
   }
 
-  variant(value: string): this {
-    this.state.variant = value;
+  class(value: string): this {
+    this.state.class = value;
+    return this;
+  }
+
+  /**
+   * Enable actions region
+   * Creates an empty actions container that components can render into
+   */
+  withActions(): this {
+    this.state.hasActions = true;
     return this;
   }
 
@@ -101,7 +117,7 @@ export class Card extends Reactive {
 
   render(targetId?: string): this {
     let container: HTMLElement;
-    
+
     if (targetId) {
       const target = document.querySelector(targetId);
       if (!target || !(target instanceof HTMLElement)) {
@@ -109,17 +125,25 @@ export class Card extends Reactive {
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
-    
+
     this.container = container;
-    const { title, subtitle, content, image, actions, variant } = this.state;
-    
+    const { title, subtitle, content, image, variant, style, class: className, hasActions } = this.state;
+
     // Create card element
     const card = document.createElement('div');
     card.className = `jux-card jux-card-${variant}`;
-    card.id = this._componentId;
-    
+    card.id = this._id;
+
+    if (className) {
+      card.className += ` ${className}`;
+    }
+
+    if (style) {
+      card.setAttribute('style', style);
+    }
+
     // Image
     if (image) {
       const img = document.createElement('img');
@@ -128,11 +152,11 @@ export class Card extends Reactive {
       img.alt = title || 'Card image';
       card.appendChild(img);
     }
-    
+
     // Content wrapper
     const cardBody = document.createElement('div');
     cardBody.className = 'jux-card-body';
-    
+
     // Title
     if (title) {
       const titleEl = document.createElement('h3');
@@ -140,7 +164,7 @@ export class Card extends Reactive {
       titleEl.textContent = title;
       cardBody.appendChild(titleEl);
     }
-    
+
     // Subtitle
     if (subtitle) {
       const subtitleEl = document.createElement('p');
@@ -148,7 +172,7 @@ export class Card extends Reactive {
       subtitleEl.textContent = subtitle;
       cardBody.appendChild(subtitleEl);
     }
-    
+
     // Content
     if (content) {
       const contentEl = document.createElement('p');
@@ -156,27 +180,17 @@ export class Card extends Reactive {
       contentEl.textContent = content;
       cardBody.appendChild(contentEl);
     }
-    
+
     card.appendChild(cardBody);
-    
-    // Actions
-    if (actions.length > 0) {
+
+    // Actions region (empty container for user to populate)
+    if (hasActions) {
       const actionsEl = document.createElement('div');
       actionsEl.className = 'jux-card-actions';
-      
-      actions.forEach(action => {
-        const btn = document.createElement('button');
-        btn.className = `jux-button jux-button-${action.variant || 'primary'}`;
-        btn.textContent = action.label;
-        actionsEl.appendChild(btn);
-        
-        // Event binding
-        btn.addEventListener('click', action.onClick);
-      });
-      
+      actionsEl.id = `${this._id}-actions`;
       card.appendChild(actionsEl);
     }
-    
+
     container.appendChild(card);
     return this;
   }
@@ -188,18 +202,18 @@ export class Card extends Reactive {
     if (!juxComponent || typeof juxComponent !== 'object') {
       throw new Error('Card.renderTo: Invalid component - not an object');
     }
-    
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('Card.renderTo: Invalid component - missing _componentId (not a Jux component)');
+
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('Card.renderTo: Invalid component - missing _id (not a Jux component)');
     }
-    
-    return this.render(`#${juxComponent._componentId}`);
+
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
 /**
  * Factory helper
  */
-export function card(componentId: string, options: CardOptions = {}): Card {
-  return new Card(componentId, options);
+export function card(id: string, options: CardOptions = {}): Card {
+  return new Card(id, options);
 }

package/lib/components/chart.ts

@@ -1,4 +1,4 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
+import { getOrCreateContainer } from './helpers.js';
 
 /**
  * Chart component options
@@ -31,19 +31,21 @@ type ChartState = {
  *   });
  *   chart.render();
  */
-export class Chart extends Reactive {
-  state!: ChartState;
+export class Chart {
+  state: ChartState;
   container: HTMLElement | null = null;
+  _id: string;
+  id: string;
 
-  constructor(componentId: string, options: ChartOptions = {}) {
-    super();
-    this._setComponentId(componentId);
+  constructor(id: string, options: ChartOptions = {}) {
+    this._id = id;
+    this.id = id;
 
-    this.state = this._createReactiveState({
+    this.state = {
       type: options.type ?? 'bar',
       data: options.data ?? {},
       options: options.options ?? {}
-    }) as ChartState;
+    };
   }
 
   /* -------------------------
@@ -79,14 +81,14 @@ export class Chart extends Reactive {
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
 
     this.container = container;
     const { type, data } = this.state;
 
     const canvas = document.createElement('canvas');
-    canvas.id = this._componentId;
+    canvas.id = this._id;
     canvas.className = 'jux-chart';
 
     // Placeholder rendering (would integrate with Chart.js or similar)
@@ -109,17 +111,17 @@ export class Chart extends Reactive {
       throw new Error('Chart.renderTo: Invalid component - not an object');
     }
 
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('Chart.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('Chart.renderTo: Invalid component - missing _id (not a Jux component)');
     }
 
-    return this.render(`#${juxComponent._componentId}`);
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
 /**
  * Factory helper
  */
-export function chart(componentId: string, options: ChartOptions = {}): Chart {
-  return new Chart(componentId, options);
+export function chart(id: string, options: ChartOptions = {}): Chart {
+  return new Chart(id, options);
 }