juxscript 1.0.0

package/lib/components/main.ts

@@ -0,0 +1,111 @@
+import { Reactive, getOrCreateContainer } from './reactivity.js';
+
+/**
+ * Main component options
+ */
+export interface MainOptions {
+  content?: string;
+  padding?: string;
+}
+
+/**
+ * Main component state
+ */
+type MainState = {
+  content: string;
+  padding: string;
+};
+
+/**
+ * Main component - represents the main content area
+ *
+ * Usage:
+ *   const main = jux.main('myMain', {
+ *     content: 'Main content here',
+ *     padding: '2rem'
+ *   });
+ *   main.render('#appmain');
+ */
+export class Main extends Reactive {
+  state!: MainState;
+  container: HTMLElement | null = null;
+
+  constructor(componentId: string, options: MainOptions = {}) {
+    super();
+    this._setComponentId(componentId);
+
+    this.state = this._createReactiveState({
+      content: options.content ?? '',
+      padding: options.padding ?? 'var(--space-xl)'
+    }) as MainState;
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  content(value: string): this {
+    this.state.content = value;
+    return this;
+  }
+
+  padding(value: string): this {
+    this.state.padding = 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(`Main: Target element "${targetId}" not found`);
+      }
+      container = target;
+    } else {
+      container = getOrCreateContainer(this._componentId) as HTMLElement;
+    }
+
+    this.container = container;
+    const { content, padding } = this.state;
+
+    const main = document.createElement('main');
+    main.className = 'jux-main';
+    main.id = this._componentId;
+    main.style.padding = padding;
+
+    if (content) {
+      main.innerHTML = content;
+    }
+
+    container.appendChild(main);
+    return this;
+  }
+
+  /**
+   * Render to another Jux component's container
+   */
+  renderTo(juxComponent: any): this {
+    if (!juxComponent || typeof juxComponent !== 'object') {
+      throw new Error('Main.renderTo: Invalid component - not an object');
+    }
+
+    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
+      throw new Error('Main.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    }
+
+    return this.render(`#${juxComponent._componentId}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function main(componentId: string, options: MainOptions = {}): Main {
+  return new Main(componentId, options);
+}

package/lib/components/menu.ts

@@ -0,0 +1,170 @@
+import { Reactive, getOrCreateContainer } from './reactivity.js';
+
+/**
+ * Menu item configuration
+ */
+export interface MenuItem {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+  icon?: string;
+  items?: MenuItem[];
+}
+
+/**
+ * Menu component options
+ */
+export interface MenuOptions {
+  items?: MenuItem[];
+  orientation?: 'vertical' | 'horizontal';
+}
+
+/**
+ * Menu component state
+ */
+type MenuState = {
+  items: MenuItem[];
+  orientation: string;
+};
+
+/**
+ * Menu component
+ *
+ * Usage:
+ *   const menu = jux.menu('myMenu', {
+ *     orientation: 'vertical',
+ *     items: [
+ *       { label: 'Home', href: '/' },
+ *       { label: 'About', href: '/about' }
+ *     ]
+ *   });
+ *   menu.render();
+ */
+export class Menu extends Reactive {
+  state!: MenuState;
+  container: HTMLElement | null = null;
+
+  constructor(componentId: string, options: MenuOptions = {}) {
+    super();
+    this._setComponentId(componentId);
+
+    this.state = this._createReactiveState({
+      items: options.items ?? [],
+      orientation: options.orientation ?? 'vertical'
+    }) as MenuState;
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  items(value: MenuItem[]): this {
+    this.state.items = value;
+    return this;
+  }
+
+  addItem(item: MenuItem): this {
+    this.state.items.push(item);
+    return this;
+  }
+
+  orientation(value: 'vertical' | 'horizontal'): this {
+    this.state.orientation = value;
+    return this;
+  }
+
+  /* -------------------------
+   * Helpers
+   * ------------------------- */
+
+  private _renderMenuItem(item: MenuItem): HTMLElement {
+    const menuItem = document.createElement('div');
+    menuItem.className = 'jux-menu-item';
+
+    if (item.href) {
+      const link = document.createElement('a');
+      link.className = 'jux-menu-link';
+      link.href = item.href;
+      link.textContent = item.label;
+      menuItem.appendChild(link);
+    } else {
+      const button = document.createElement('button');
+      button.className = 'jux-menu-button';
+      button.textContent = item.label;
+      menuItem.appendChild(button);
+
+      // Event binding - onClick
+      if (item.onClick) {
+        button.addEventListener('click', item.onClick);
+      }
+    }
+
+    // Nested items (submenu)
+    if (item.items && item.items.length > 0) {
+      const submenu = document.createElement('div');
+      submenu.className = 'jux-menu-submenu';
+
+      item.items.forEach(subItem => {
+        submenu.appendChild(this._renderMenuItem(subItem));
+      });
+
+      menuItem.appendChild(submenu);
+    }
+
+    return menuItem;
+  }
+
+  /* -------------------------
+   * Render
+   * ------------------------- */
+
+  render(targetId?: string): this {
+    let container: HTMLElement;
+
+    if (targetId) {
+      const target = document.querySelector(targetId);
+      if (!target || !(target instanceof HTMLElement)) {
+        throw new Error(`Menu: Target element "${targetId}" not found`);
+      }
+      container = target;
+    } else {
+      container = getOrCreateContainer(this._componentId) as HTMLElement;
+    }
+
+    this.container = container;
+    const { items, orientation } = this.state;
+
+    const menu = document.createElement('nav');
+    menu.className = `jux-menu jux-menu-${orientation}`;
+    menu.id = this._componentId;
+
+    items.forEach(item => {
+      menu.appendChild(this._renderMenuItem(item));
+    });
+
+    container.appendChild(menu);
+    return this;
+  }
+
+  /**
+   * Render to another Jux component's container
+   */
+  renderTo(juxComponent: any): this {
+    if (!juxComponent || typeof juxComponent !== 'object') {
+      throw new Error('Menu.renderTo: Invalid component - not an object');
+    }
+
+    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
+      throw new Error('Menu.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    }
+
+    return this.render(`#${juxComponent._componentId}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function menu(componentId: string, options: MenuOptions = {}): Menu {
+  return new Menu(componentId, options);
+}

package/lib/components/modal.ts

@@ -0,0 +1,216 @@
+import { Reactive, getOrCreateContainer } from './reactivity.js';
+
+/**
+ * Modal component options
+ */
+export interface ModalOptions {
+  title?: string;
+  content?: string;
+  showCloseButton?: boolean;
+  closeOnBackdropClick?: boolean;
+  size?: 'small' | 'medium' | 'large';
+}
+
+/**
+ * Modal component state
+ */
+type ModalState = {
+  title: string;
+  content: string;
+  showCloseButton: boolean;
+  closeOnBackdropClick: boolean;
+  size: string;
+  isOpen: boolean;
+};
+
+/**
+ * Modal component
+ *
+ * Usage:
+ *   const modal = jux.modal('myModal', {
+ *     title: 'Confirmation',
+ *     content: 'Are you sure?',
+ *     size: 'medium'
+ *   });
+ *   modal.render();
+ *   modal.open();
+ */
+export class Modal extends Reactive {
+  state!: ModalState;
+  container: HTMLElement | null = null;
+
+  constructor(componentId: string, options: ModalOptions = {}) {
+    super();
+    this._setComponentId(componentId);
+
+    this.state = this._createReactiveState({
+      title: options.title ?? '',
+      content: options.content ?? '',
+      showCloseButton: options.showCloseButton ?? true,
+      closeOnBackdropClick: options.closeOnBackdropClick ?? true,
+      size: options.size ?? 'medium',
+      isOpen: false
+    }) as ModalState;
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  title(value: string): this {
+    this.state.title = value;
+    return this;
+  }
+
+  content(value: string): this {
+    this.state.content = value;
+    return this;
+  }
+
+  showCloseButton(value: boolean): this {
+    this.state.showCloseButton = value;
+    return this;
+  }
+
+  closeOnBackdropClick(value: boolean): this {
+    this.state.closeOnBackdropClick = value;
+    return this;
+  }
+
+  size(value: 'small' | 'medium' | 'large'): this {
+    this.state.size = value;
+    return this;
+  }
+
+  open(): this {
+    this.state.isOpen = true;
+    if (this.container) {
+      const modalEl = this.container.querySelector('.jux-modal');
+      if (modalEl) {
+        modalEl.classList.add('jux-modal-open');
+      }
+    }
+    this.emit('open');
+    return this;
+  }
+
+  close(): this {
+    this.state.isOpen = false;
+    if (this.container) {
+      const modalEl = this.container.querySelector('.jux-modal');
+      if (modalEl) {
+        modalEl.classList.remove('jux-modal-open');
+      }
+    }
+    this.emit('close');
+    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(`Modal: Target element "${targetId}" not found`);
+      }
+      container = target;
+    } else {
+      container = getOrCreateContainer(this._componentId) as HTMLElement;
+    }
+
+    this.container = container;
+    const { title, content, showCloseButton, closeOnBackdropClick, size, isOpen } = this.state;
+
+    // Modal backdrop
+    const modal = document.createElement('div');
+    modal.className = `jux-modal jux-modal-${size}`;
+    modal.id = this._componentId;
+
+    if (isOpen) {
+      modal.classList.add('jux-modal-open');
+    }
+
+    // Modal dialog
+    const dialog = document.createElement('div');
+    dialog.className = 'jux-modal-dialog';
+
+    // Modal header
+    if (title || showCloseButton) {
+      const header = document.createElement('div');
+      header.className = 'jux-modal-header';
+
+      if (title) {
+        const titleEl = document.createElement('h3');
+        titleEl.className = 'jux-modal-title';
+        titleEl.textContent = title;
+        header.appendChild(titleEl);
+      }
+
+      if (showCloseButton) {
+        const closeBtn = document.createElement('button');
+        closeBtn.className = 'jux-modal-close';
+        closeBtn.innerHTML = '×';
+        header.appendChild(closeBtn);
+
+        // Event binding - close button
+        closeBtn.addEventListener('click', () => this.close());
+      }
+
+      dialog.appendChild(header);
+    }
+
+    // Modal body
+    const body = document.createElement('div');
+    body.className = 'jux-modal-body';
+    body.innerHTML = content;
+    dialog.appendChild(body);
+
+    modal.appendChild(dialog);
+    container.appendChild(modal);
+
+    // Event binding - backdrop click
+    if (closeOnBackdropClick) {
+      modal.addEventListener('click', (e) => {
+        if (e.target === modal) {
+          this.close();
+        }
+      });
+    }
+
+    // Event binding - escape key
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && this.state.isOpen) {
+        this.close();
+      }
+    });
+
+    return this;
+  }
+
+  /**
+   * Render to another Jux component's container
+   */
+  renderTo(juxComponent: any): this {
+    if (!juxComponent || typeof juxComponent !== 'object') {
+      throw new Error('Modal.renderTo: Invalid component - not an object');
+    }
+
+    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
+      throw new Error('Modal.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    }
+
+    return this.render(`#${juxComponent._componentId}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function modal(componentId: string, options: ModalOptions = {}): Modal {
+  return new Modal(componentId, options);
+}

package/lib/components/nav.ts

@@ -0,0 +1,136 @@
+import { Reactive, getOrCreateContainer } from './reactivity.js';
+
+/**
+ * Nav item configuration
+ */
+export interface NavItem {
+  label: string;
+  href: string;
+  active?: boolean;
+}
+
+/**
+ * Nav component options
+ */
+export interface NavOptions {
+  items?: NavItem[];
+  variant?: 'default' | 'pills' | 'tabs';
+}
+
+/**
+ * Nav component state
+ */
+type NavState = {
+  items: NavItem[];
+  variant: string;
+};
+
+/**
+ * Nav component
+ *
+ * Usage:
+ *   const nav = jux.nav('myNav', {
+ *     variant: 'pills',
+ *     items: [
+ *       { label: 'Home', href: '/', active: true },
+ *       { label: 'About', href: '/about' }
+ *     ]
+ *   });
+ *   nav.render();
+ */
+export class Nav extends Reactive {
+  state!: NavState;
+  container: HTMLElement | null = null;
+
+  constructor(componentId: string, options: NavOptions = {}) {
+    super();
+    this._setComponentId(componentId);
+
+    this.state = this._createReactiveState({
+      items: options.items ?? [],
+      variant: options.variant ?? 'default'
+    }) as NavState;
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  items(value: NavItem[]): this {
+    this.state.items = value;
+    return this;
+  }
+
+  addItem(item: NavItem): this {
+    this.state.items.push(item);
+    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(`Nav: Target element "${targetId}" not found`);
+      }
+      container = target;
+    } else {
+      container = getOrCreateContainer(this._componentId) as HTMLElement;
+    }
+
+    this.container = container;
+    const { items, variant } = this.state;
+
+    const nav = document.createElement('nav');
+    nav.className = `jux-nav jux-nav-${variant}`;
+    nav.id = this._componentId;
+
+    items.forEach(item => {
+      const link = document.createElement('a');
+      link.className = 'jux-nav-item';
+      link.href = item.href;
+      link.textContent = item.label;
+
+      if (item.active) {
+        link.classList.add('jux-nav-item-active');
+      }
+
+      nav.appendChild(link);
+    });
+
+    container.appendChild(nav);
+    return this;
+  }
+
+  /**
+   * Render to another Jux component's container
+   */
+  renderTo(juxComponent: any): this {
+    if (!juxComponent || typeof juxComponent !== 'object') {
+      throw new Error('Nav.renderTo: Invalid component - not an object');
+    }
+
+    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
+      throw new Error('Nav.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    }
+
+    return this.render(`#${juxComponent._componentId}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function nav(componentId: string, options: NavOptions = {}): Nav {
+  return new Nav(componentId, options);
+}