juxscript 1.0.0

package/lib/components/app.ts

@@ -0,0 +1,124 @@
+import { ErrorHandler } from './error-handler.js';
+
+/**
+ * App - Configure application-level settings
+ * Manages document metadata, theme, and global configuration
+ */
+export class App {
+  private _title: string = '';
+  private _theme: 'light' | 'dark' | 'auto' = 'auto';
+  private _favicon: string = '';
+  private _meta: Map<string, string> = new Map();
+
+  title(title: string): this {
+    this._title = title;
+    this.applyTitle();
+    return this;
+  }
+
+  theme(theme: 'light' | 'dark' | 'auto'): this {
+    this._theme = theme;
+    this.applyTheme();
+    return this;
+  }
+
+  favicon(url: string): this {
+    this._favicon = url;
+    this.applyFavicon();
+    return this;
+  }
+
+  meta(name: string, content: string): this {
+    this._meta.set(name, content);
+    this.applyMeta(name, content);
+    return this;
+  }
+
+  private applyTitle(): void {
+    if (typeof document === 'undefined') return;
+    
+    try {
+      document.title = this._title;
+    } catch (error: any) {
+      ErrorHandler.captureError({
+        component: 'App',
+        method: 'applyTitle',
+        message: error.message,
+        stack: error.stack,
+        timestamp: new Date(),
+        context: { title: this._title }
+      });
+    }
+  }
+
+  private applyTheme(): void {
+    if (typeof document === 'undefined') return;
+    
+    try {
+      document.body.setAttribute('data-theme', this._theme);
+      
+      // Add theme class for styling
+      document.body.classList.remove('theme-light', 'theme-dark', 'theme-auto');
+      document.body.classList.add(`theme-${this._theme}`);
+    } catch (error: any) {
+      ErrorHandler.captureError({
+        component: 'App',
+        method: 'applyTheme',
+        message: error.message,
+        stack: error.stack,
+        timestamp: new Date(),
+        context: { theme: this._theme }
+      });
+    }
+  }
+
+  private applyFavicon(): void {
+    if (typeof document === 'undefined') return;
+    
+    try {
+      let link = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+      
+      if (!link) {
+        link = document.createElement('link');
+        link.rel = 'icon';
+        document.head.appendChild(link);
+      }
+      
+      link.href = this._favicon;
+    } catch (error: any) {
+      ErrorHandler.captureError({
+        component: 'App',
+        method: 'applyFavicon',
+        message: error.message,
+        stack: error.stack,
+        timestamp: new Date(),
+        context: { favicon: this._favicon }
+      });
+    }
+  }
+
+  private applyMeta(name: string, content: string): void {
+    if (typeof document === 'undefined') return;
+    
+    try {
+      let meta = document.querySelector<HTMLMetaElement>(`meta[name="${name}"]`);
+      
+      if (!meta) {
+        meta = document.createElement('meta');
+        meta.name = name;
+        document.head.appendChild(meta);
+      }
+      
+      meta.content = content;
+    } catch (error: any) {
+      ErrorHandler.captureError({
+        component: 'App',
+        method: 'applyMeta',
+        message: error.message,
+        stack: error.stack,
+        timestamp: new Date(),
+        context: { name, content }
+      });
+    }
+  }
+}

package/lib/components/button.ts

@@ -0,0 +1,136 @@
+import { Reactive, getOrCreateContainer } from './reactivity.js';
+
+
+/**
+ * Button component options
+ */
+export interface ButtonOptions {
+  label?: string;
+  variant?: 'primary' | 'secondary' | 'danger' | 'success' | string;
+  disabled?: boolean;
+  onClick?: (e: Event) => void;
+}
+
+/**
+ * Button component state
+ */
+type ButtonState = {
+  label: string;
+  variant: string;
+  disabled: boolean;
+  onClick: ((e: Event) => void) | null;
+};
+
+/**
+ * Button component
+ * 
+ * Usage:
+ *   const btn = jux.button('myButton', { label: 'Click Me', onClick: () => console.log('clicked') });
+ *   btn.render();
+ */
+export class Button extends Reactive {
+  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;
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  label(value: string): this {
+    this.state.label = value;
+    return this;
+  }
+
+  variant(value: string): this {
+    this.state.variant = value;
+    return this;
+  }
+
+  disabled(value: boolean): this {
+    this.state.disabled = value;
+    return this;
+  }
+
+  onClick(callback: (e: Event) => void): this {
+    this.state.onClick = callback;
+    return this;
+  }
+
+  /* -------------------------
+   * Render
+   * ------------------------- */
+
+  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;
+    }
+    
+    this.container = container;
+    const { label, variant, disabled, onClick } = this.state;
+    
+    // Create button element
+    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);
+    }
+    
+    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)
+    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)');
+    }
+    
+    // Render to the component's ID as a selector
+    return this.render(`#${juxComponent._componentId}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function button(componentId: string, options: ButtonOptions = {}): Button {
+  return new Button(componentId, options);
+}

package/lib/components/card.ts

@@ -0,0 +1,205 @@
+import { Reactive, getOrCreateContainer } from './reactivity.js';
+
+/**
+ * Action configuration for card actions
+ */
+export interface CardAction {
+  label: string;
+  onClick: () => void;
+  variant?: 'primary' | 'secondary' | 'danger';
+}
+
+/**
+ * Card component options
+ */
+export interface CardOptions {
+  title?: string;
+  subtitle?: string;
+  content?: string;
+  image?: string;
+  actions?: CardAction[];
+  variant?: 'default' | 'elevated' | 'outlined';
+}
+
+/**
+ * Card component state
+ */
+type CardState = {
+  title: string;
+  subtitle: string;
+  content: string;
+  image: string;
+  actions: CardAction[];
+  variant: string;
+};
+
+/**
+ * Card component
+ * 
+ * Usage:
+ *   const card = jux.card('myCard', {
+ *     title: 'Card Title',
+ *     content: 'Card content here'
+ *   });
+ *   card.render();
+ */
+export class Card extends Reactive {
+  state!: CardState;
+  container: HTMLElement | null = null;
+  
+  constructor(componentId: string, options: CardOptions = {}) {
+    super();
+    this._setComponentId(componentId);
+    
+    this.state = this._createReactiveState({
+      title: options.title ?? '',
+      subtitle: options.subtitle ?? '',
+      content: options.content ?? '',
+      image: options.image ?? '',
+      actions: options.actions ?? [],
+      variant: options.variant ?? 'default'
+    }) as CardState;
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  title(value: string): this {
+    this.state.title = value;
+    return this;
+  }
+
+  subtitle(value: string): this {
+    this.state.subtitle = value;
+    return this;
+  }
+
+  content(value: string): this {
+    this.state.content = value;
+    return this;
+  }
+
+  image(value: string): this {
+    this.state.image = value;
+    return this;
+  }
+
+  actions(value: CardAction[]): this {
+    this.state.actions = value;
+    return this;
+  }
+
+  variant(value: string): this {
+    this.state.variant = 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(`Card: Target element "${targetId}" not found`);
+      }
+      container = target;
+    } else {
+      container = getOrCreateContainer(this._componentId) as HTMLElement;
+    }
+    
+    this.container = container;
+    const { title, subtitle, content, image, actions, variant } = this.state;
+    
+    // Create card element
+    const card = document.createElement('div');
+    card.className = `jux-card jux-card-${variant}`;
+    card.id = this._componentId;
+    
+    // Image
+    if (image) {
+      const img = document.createElement('img');
+      img.className = 'jux-card-image';
+      img.src = image;
+      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');
+      titleEl.className = 'jux-card-title';
+      titleEl.textContent = title;
+      cardBody.appendChild(titleEl);
+    }
+    
+    // Subtitle
+    if (subtitle) {
+      const subtitleEl = document.createElement('p');
+      subtitleEl.className = 'jux-card-subtitle';
+      subtitleEl.textContent = subtitle;
+      cardBody.appendChild(subtitleEl);
+    }
+    
+    // Content
+    if (content) {
+      const contentEl = document.createElement('p');
+      contentEl.className = 'jux-card-content';
+      contentEl.textContent = content;
+      cardBody.appendChild(contentEl);
+    }
+    
+    card.appendChild(cardBody);
+    
+    // Actions
+    if (actions.length > 0) {
+      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);
+      });
+      
+      card.appendChild(actionsEl);
+    }
+    
+    container.appendChild(card);
+    return this;
+  }
+
+  /**
+   * Render to another Jux component's container
+   */
+  renderTo(juxComponent: any): this {
+    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)');
+    }
+    
+    return this.render(`#${juxComponent._componentId}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function card(componentId: string, options: CardOptions = {}): Card {
+  return new Card(componentId, options);
+}

package/lib/components/chart.ts

@@ -0,0 +1,125 @@
+import { Reactive, getOrCreateContainer } from './reactivity.js';
+
+/**
+ * Chart component options
+ */
+export interface ChartOptions {
+  type?: 'bar' | 'line' | 'pie' | 'doughnut';
+  data?: any;
+  options?: any;
+}
+
+/**
+ * Chart component state
+ */
+type ChartState = {
+  type: string;
+  data: any;
+  options: any;
+};
+
+/**
+ * Chart component - placeholder for chart integration
+ *
+ * Usage:
+ *   const chart = jux.chart('myChart', {
+ *     type: 'bar',
+ *     data: {
+ *       labels: ['A', 'B', 'C'],
+ *       datasets: [{ data: [10, 20, 30] }]
+ *     }
+ *   });
+ *   chart.render();
+ */
+export class Chart extends Reactive {
+  state!: ChartState;
+  container: HTMLElement | null = null;
+
+  constructor(componentId: string, options: ChartOptions = {}) {
+    super();
+    this._setComponentId(componentId);
+
+    this.state = this._createReactiveState({
+      type: options.type ?? 'bar',
+      data: options.data ?? {},
+      options: options.options ?? {}
+    }) as ChartState;
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  type(value: string): this {
+    this.state.type = value;
+    return this;
+  }
+
+  data(value: any): this {
+    this.state.data = value;
+    return this;
+  }
+
+  options(value: any): this {
+    this.state.options = 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(`Chart: Target element "${targetId}" not found`);
+      }
+      container = target;
+    } else {
+      container = getOrCreateContainer(this._componentId) as HTMLElement;
+    }
+
+    this.container = container;
+    const { type, data } = this.state;
+
+    const canvas = document.createElement('canvas');
+    canvas.id = this._componentId;
+    canvas.className = 'jux-chart';
+
+    // Placeholder rendering (would integrate with Chart.js or similar)
+    const placeholder = document.createElement('div');
+    placeholder.className = 'jux-chart-placeholder';
+    placeholder.textContent = `Chart (${type}) - Integration pending`;
+    placeholder.style.cssText = 'padding: 2rem; border: 2px dashed var(--border-color); text-align: center;';
+
+    container.appendChild(placeholder);
+    container.appendChild(canvas);
+
+    return this;
+  }
+
+  /**
+   * Render to another Jux component's container
+   */
+  renderTo(juxComponent: any): this {
+    if (!juxComponent || typeof juxComponent !== 'object') {
+      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)');
+    }
+
+    return this.render(`#${juxComponent._componentId}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function chart(componentId: string, options: ChartOptions = {}): Chart {
+  return new Chart(componentId, options);
+}