juxscript 1.0.131 → 1.1.0

package/lib/components/hero.ts

@@ -0,0 +1,224 @@
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions - Hero is display-only, but CTA button can trigger actions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['ctaClick'] as const;  // ✅ When CTA button is clicked
+
+export interface HeroOptions {
+  title?: string;
+  subtitle?: string;
+  content?: string;          // ✅ ADD: Generates jux-hero-body div
+  cta?: string;              // ✅ KEEP: Generates jux-hero-cta anchor
+  ctaLink?: string;
+  backgroundImage?: string;
+  backgroundOverlay?: boolean; // ✅ ADD: Generates jux-hero-overlay div
+  variant?: 'default' | 'centered' | 'split';
+  centered?: boolean;        // ✅ ADD: Affects container class
+  style?: string;
+  class?: string;
+}
+
+type HeroState = {
+  title: string;
+  subtitle: string;
+  content: string;           // ✅ ADD: For jux-hero-body
+  cta: string;
+  ctaLink: string;
+  backgroundImage: string;
+  backgroundOverlay: boolean; // ✅ ADD: For overlay div
+  variant: string;
+  centered: boolean;         // ✅ ADD: For layout variant
+  style: string;
+  class: string;
+};
+
+export class Hero extends BaseComponent<HeroState> {
+  constructor(id: string, options: HeroOptions = {}) {
+    super(id, {
+      title: options.title ?? '',
+      subtitle: options.subtitle ?? '',
+      content: options.content ?? '',           // ✅ ADD
+      cta: options.cta ?? '',
+      ctaLink: options.ctaLink ?? '#',
+      backgroundImage: options.backgroundImage ?? '',
+      backgroundOverlay: options.backgroundOverlay ?? false, // ✅ ADD
+      variant: options.variant ?? 'default',
+      centered: options.centered ?? false,     // ✅ ADD
+      style: options.style ?? '',
+      class: options.class ?? ''
+    });
+  }
+
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
+  }
+
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * 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 {     // ✅ ADD: Fluent method for content
+    this.state.content = value;
+    return this;
+  }
+
+  cta(value: string): this {
+    this.state.cta = value;
+    return this;
+  }
+
+  ctaLink(value: string): this {
+    this.state.ctaLink = value;
+    return this;
+  }
+
+  backgroundImage(value: string): this {
+    this.state.backgroundImage = value;
+    return this;
+  }
+
+  backgroundOverlay(value: boolean): this { // ✅ ADD: Fluent method for overlay
+    this.state.backgroundOverlay = value;
+    return this;
+  }
+
+  variant(value: string): this {
+    this.state.variant = value;
+    return this;
+  }
+
+  centered(value: boolean): this {   // ✅ ADD: Fluent method for centered
+    this.state.centered = value;
+    return this;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
+
+  render(targetId?: string): this {
+    const container = this._setupContainer(targetId);
+
+    const { title, subtitle, content, backgroundImage, backgroundOverlay, centered, style, class: className } = this.state;
+
+    const hero = document.createElement('section');
+    hero.className = 'jux-hero';
+    hero.id = this._id;
+    if (centered) hero.classList.add('jux-hero-centered');
+    if (className) hero.className += ` ${className}`;
+    if (style) hero.setAttribute('style', style);
+
+    if (backgroundImage) {
+      hero.style.backgroundImage = `url(${backgroundImage})`;
+      if (backgroundOverlay) {
+        const overlay = document.createElement('div');
+        overlay.className = 'jux-hero-overlay';
+        hero.appendChild(overlay);
+      }
+    }
+
+    const contentContainer = document.createElement('div');
+    contentContainer.className = 'jux-hero-content';
+
+    if (title) {
+      const titleEl = document.createElement('h1');
+      titleEl.className = 'jux-hero-title';
+      titleEl.id = `${this._id}-title`;
+      titleEl.textContent = title;
+      contentContainer.appendChild(titleEl);
+    }
+
+    if (subtitle) {
+      const subtitleEl = document.createElement('p');
+      subtitleEl.className = 'jux-hero-subtitle';
+      subtitleEl.id = `${this._id}-subtitle`;
+      subtitleEl.textContent = subtitle;
+      contentContainer.appendChild(subtitleEl);
+    }
+
+    if (content) {
+      const contentEl = document.createElement('div');
+      contentEl.className = 'jux-hero-body';
+      contentEl.innerHTML = content;
+      contentContainer.appendChild(contentEl);
+    }
+
+    if (this.state.cta) {
+      const ctaButton = document.createElement('a');
+      ctaButton.className = 'jux-hero-cta';
+      ctaButton.href = this.state.ctaLink;
+      ctaButton.textContent = this.state.cta;
+
+      // ✅ Fire callback when CTA is clicked
+      ctaButton.addEventListener('click', (e) => {
+        this._triggerCallback('ctaClick', e);
+      });
+
+      contentContainer.appendChild(ctaButton);
+    }
+
+    hero.appendChild(contentContainer);
+
+    this._wireStandardEvents(hero);
+
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'title') {
+        const transform = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          const titleEl = document.getElementById(`${this._id}-title`);
+          if (titleEl) {
+            titleEl.textContent = transformed;
+          }
+          this.state.title = transformed;
+        });
+      }
+      else if (property === 'subtitle') {
+        const transform = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          const subtitleEl = document.getElementById(`${this._id}-subtitle`);
+          if (subtitleEl) {
+            subtitleEl.textContent = transformed;
+          }
+          this.state.subtitle = transformed;
+        });
+      }
+      else if (property === 'content') {
+        const transform = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          const contentEl = hero.querySelector('.jux-hero-body');
+          if (contentEl) {
+            contentEl.innerHTML = transformed;
+          }
+          this.state.content = transformed;
+        });
+      }
+    });
+
+    container.appendChild(hero);
+    return this;
+  }
+}
+
+export function hero(id: string, options: HeroOptions = {}): Hero {
+  return new Hero(id, options);
+}

package/lib/components/icon.ts

@@ -0,0 +1,178 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon, renderEmoji } from './icons.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
+
+export interface IconOptions {
+    value?: string;
+    size?: string;
+    color?: string;
+    useEmoji?: boolean;
+    iconCollection?: string;
+    style?: string;
+    class?: string;
+}
+
+type IconState = {
+    value: string;
+    size: string;
+    color: string;
+    useEmoji: boolean;
+    iconCollection: string;
+    style: string;
+    class: string;
+};
+
+export class Icon extends BaseComponent<IconState> {
+    constructor(id: string, options: IconOptions = {}) {
+        super(id, {
+            value: options.value ?? '',
+            size: options.size ?? '24px',
+            color: options.color ?? '',
+            useEmoji: options.useEmoji ?? false,
+            iconCollection: options.iconCollection ?? '',
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    // ✅ Inherited from BaseComponent
+
+    value(value: string): this {
+        this.state.value = value;
+        return this;
+    }
+
+    size(value: string): this {
+        this.state.size = value;
+        return this;
+    }
+
+    color(value: string): this {
+        this.state.color = value;
+        return this;
+    }
+
+    useEmoji(value: boolean): this {
+        this.state.useEmoji = value;
+        return this;
+    }
+
+    iconCollection(value: string): this {
+        this.state.iconCollection = value;
+        return this;
+    }
+
+    style(value: string): this {
+        this.state.style = value;
+        return this;
+    }
+
+    class(value: string): this {
+        this.state.class = value;
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        const { value, size, color, useEmoji, iconCollection, style, class: className } = this.state;
+
+        const wrapper = document.createElement('span');
+        wrapper.className = 'jux-icon';
+        wrapper.id = this._id;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
+
+        const iconElement = useEmoji ? renderEmoji(value) : renderIcon(value, iconCollection);
+        iconElement.style.width = size;
+        iconElement.style.height = size;
+        if (color) iconElement.style.color = color;
+
+        wrapper.appendChild(iconElement);
+
+        this._wireStandardEvents(wrapper);
+
+        // Wire sync bindings
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'value') {
+                const transform = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    this.state.value = transformed;
+
+                    wrapper.innerHTML = '';
+                    const newIcon = this.state.useEmoji ? renderEmoji(transformed) : renderIcon(transformed, this.state.iconCollection);
+                    newIcon.style.width = this.state.size;
+                    newIcon.style.height = this.state.size;
+                    if (this.state.color) newIcon.style.color = this.state.color;
+                    wrapper.appendChild(newIcon);
+
+                    requestAnimationFrame(() => {
+                        if ((window as any).Iconify) {
+                            (window as any).Iconify.scan();
+                        }
+                    });
+                });
+            }
+            else if (property === 'size') {
+                const transform = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    const icon = wrapper.querySelector('img, svg, span');
+                    if (icon instanceof HTMLElement) {
+                        icon.style.width = transformed;
+                        icon.style.height = transformed;
+                    }
+                    this.state.size = transformed;
+                });
+            }
+            else if (property === 'color') {
+                const transform = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    const icon = wrapper.querySelector('img, svg, span');
+                    if (icon instanceof HTMLElement) {
+                        icon.style.color = transformed;
+                    }
+                    this.state.color = transformed;
+                });
+            }
+        });
+
+        container.appendChild(wrapper);
+
+        requestAnimationFrame(() => {
+            if ((window as any).lucide) {
+                (window as any).lucide.createIcons();
+            }
+        });
+
+        return this;
+    }
+}
+
+export function icon(id: string, options: IconOptions): Icon {
+    return new Icon(id, options);
+}