juxscript 1.0.2 → 1.0.4

package/lib/components/app.ts

@@ -1,124 +1,258 @@
 import { ErrorHandler } from './error-handler.js';
 
+/**
+ * App component options
+ */
+export interface AppOptions {
+  title?: string;
+  theme?: 'light' | 'dark' | 'auto';
+  favicon?: string;
+  meta?: Record<string, string>;
+  stylesheets?: string[];
+  scripts?: string[];
+  layout?: {
+    header?: boolean | string;
+    subheader?: boolean | string;
+    sidebar?: boolean | string;
+    main?: boolean | string;
+    aside?: boolean | string;
+    footer?: boolean | string;
+  };
+}
+
+/**
+ * App component state
+ */
+type AppState = {
+  title: string;
+  theme: string;
+  favicon: string;
+  meta: Map<string, string>;
+  stylesheets: string[];
+  scripts: string[];
+  layout: {
+    header: boolean | string;
+    subheader: boolean | string;
+    sidebar: boolean | string;
+    main: boolean | string;
+    aside: boolean | string;
+    footer: boolean | string;
+  };
+};
+
 /**
  * App - Configure application-level settings
  * Manages document metadata, theme, and global configuration
+ * 
+ * Usage:
+ *   jux.app('myApp').setup({
+ *     title: 'My App',
+ *     theme: 'dark',
+ *     favicon: '/favicon.ico',
+ *     stylesheets: [
+ *       '/lib/layouts/notion.css',
+ *       '/lib/presets/light.css'
+ *     ],
+ *     layout: {
+ *       header: true,
+ *       sidebar: true,
+ *       main: true,
+ *       footer: true
+ *     }
+ *   });
+ *   
+ *   // Or fluent
+ *   jux.app('myApp')
+ *     .title('My App')
+ *     .theme('dark')
+ *     .addStylesheet('/presets/main.css')
+ *     .render();
  */
 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();
+  state: AppState;
+  _componentId: string;
+  id: string;
+
+  constructor(id: string, options?: AppOptions) {
+    this._componentId = id;
+    this.id = id;
+
+    const opts = options || {};
+
+    this.state = {
+      title: opts.title ?? '',
+      theme: opts.theme ?? 'auto',
+      favicon: opts.favicon ?? '',
+      meta: new Map(Object.entries(opts.meta || {})),
+      stylesheets: opts.stylesheets || [],
+      scripts: opts.scripts || [],
+      layout: {
+        header: opts.layout?.header ?? false,
+        subheader: opts.layout?.subheader ?? false,
+        sidebar: opts.layout?.sidebar ?? false,
+        main: opts.layout?.main ?? true,
+        aside: opts.layout?.aside ?? false,
+        footer: opts.layout?.footer ?? false
+      }
+    };
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  title(value: string): this {
+    this.state.title = value;
     return this;
   }
 
-  theme(theme: 'light' | 'dark' | 'auto'): this {
-    this._theme = theme;
-    this.applyTheme();
+  theme(value: 'light' | 'dark' | 'auto'): this {
+    this.state.theme = value;
     return this;
   }
 
-  favicon(url: string): this {
-    this._favicon = url;
-    this.applyFavicon();
+  favicon(value: string): this {
+    this.state.favicon = value;
     return this;
   }
 
   meta(name: string, content: string): this {
-    this._meta.set(name, content);
-    this.applyMeta(name, content);
+    this.state.meta.set(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 }
-      });
+  addStylesheet(url: string): this {
+    if (!this.state.stylesheets.includes(url)) {
+      this.state.stylesheets.push(url);
     }
+    return this;
   }
 
-  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 }
-      });
+  addScript(url: string): this {
+    if (!this.state.scripts.includes(url)) {
+      this.state.scripts.push(url);
     }
+    return this;
   }
 
-  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 }
+  /**
+   * Setup app with comprehensive configuration
+   */
+  setup(options: AppOptions): this {
+    if (options.title) this.state.title = options.title;
+    if (options.theme) this.state.theme = options.theme;
+    if (options.favicon) this.state.favicon = options.favicon;
+
+    if (options.meta) {
+      Object.entries(options.meta).forEach(([name, content]) => {
+        this.state.meta.set(name, content);
       });
     }
+
+    if (options.stylesheets) {
+      options.stylesheets.forEach(url => this.addStylesheet(url));
+    }
+
+    if (options.scripts) {
+      options.scripts.forEach(url => this.addScript(url));
+    }
+
+    if (options.layout) {
+      this.state.layout = { ...this.state.layout, ...options.layout };
+    }
+
+    return this;
   }
 
-  private applyMeta(name: string, content: string): void {
-    if (typeof document === 'undefined') return;
-    
+  /* -------------------------
+   * Render
+   * ------------------------- */
+
+  render(): this {
+    if (typeof document === 'undefined') return this;
+
     try {
-      let meta = document.querySelector<HTMLMetaElement>(`meta[name="${name}"]`);
-      
-      if (!meta) {
-        meta = document.createElement('meta');
-        meta.name = name;
-        document.head.appendChild(meta);
+      const { title, theme, favicon, meta, stylesheets, scripts } = this.state;
+
+      // Apply title
+      if (title) {
+        document.title = title;
+      }
+
+      // Apply theme
+      if (theme) {
+        document.body.setAttribute('data-theme', theme);
+        document.body.classList.remove('theme-light', 'theme-dark', 'theme-auto');
+        document.body.classList.add(`theme-${theme}`);
       }
-      
-      meta.content = content;
+
+      // Apply favicon
+      if (favicon) {
+        let link = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+
+        if (!link) {
+          link = document.createElement('link');
+          link.rel = 'icon';
+          document.head.appendChild(link);
+        }
+
+        link.href = favicon;
+      }
+
+      // Apply meta tags
+      meta.forEach((content, name) => {
+        let metaEl = document.querySelector<HTMLMetaElement>(`meta[name="${name}"]`);
+
+        if (!metaEl) {
+          metaEl = document.createElement('meta');
+          metaEl.name = name;
+          document.head.appendChild(metaEl);
+        }
+
+        metaEl.content = content;
+      });
+
+      // Load stylesheets
+      stylesheets.forEach(url => {
+        if (!document.querySelector(`link[href="${url}"]`)) {
+          const link = document.createElement('link');
+          link.rel = 'stylesheet';
+          link.href = url;
+          document.head.appendChild(link);
+        }
+      });
+
+      // Load scripts
+      scripts.forEach(url => {
+        if (!document.querySelector(`script[src="${url}"]`)) {
+          const script = document.createElement('script');
+          script.src = url;
+          document.head.appendChild(script);
+        }
+      });
+
     } catch (error: any) {
       ErrorHandler.captureError({
         component: 'App',
-        method: 'applyMeta',
+        method: 'render',
         message: error.message,
         stack: error.stack,
         timestamp: new Date(),
-        context: { name, content }
+        context: {
+          title: this.state.title,
+          theme: this.state.theme,
+          error: 'runtime_exception'
+        }
       });
     }
+
+    return this;
   }
+}
+
+/**
+ * Factory helper
+ */
+export function app(id: string, options?: AppOptions): App {
+  return new App(id, options);
 }

package/lib/components/badge.ts

@@ -0,0 +1,164 @@
+import { getOrCreateContainer } from './helpers.js';
+
+/**
+ * Badge component options
+ */
+export interface BadgeOptions {
+    text?: string;
+    variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
+    size?: 'sm' | 'md' | 'lg';
+    pill?: boolean;
+    style?: string;
+    class?: string;
+}
+
+/**
+ * Badge component state
+ */
+type BadgeState = {
+    text: string;
+    variant: string;
+    size: string;
+    pill: boolean;
+    style: string;
+    class: string;
+};
+
+/**
+ * Badge component - Status indicators, counts, labels
+ * 
+ * Usage:
+ *   jux.badge('status', {
+ *     text: 'Active',
+ *     variant: 'success',
+ *     pill: true
+ *   }).render('#card');
+ * 
+ *   jux.badge('count', { text: '5' }).render('#notifications');
+ */
+export class Badge {
+    state: BadgeState;
+    container: HTMLElement | null = null;
+    _id: string;
+    id: string;
+
+    constructor(id: string, options: BadgeOptions = {}) {
+        this._id = id;
+        this.id = id;
+
+        this.state = {
+            text: options.text ?? '',
+            variant: options.variant ?? 'default',
+            size: options.size ?? 'md',
+            pill: options.pill ?? false,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        };
+    }
+
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
+    text(value: string): this {
+        this.state.text = value;
+        this._updateElement();
+        return this;
+    }
+
+    variant(value: 'default' | 'success' | 'warning' | 'error' | 'info'): this {
+        this.state.variant = value;
+        this._updateElement();
+        return this;
+    }
+
+    size(value: 'sm' | 'md' | 'lg'): this {
+        this.state.size = value;
+        return this;
+    }
+
+    pill(value: boolean): this {
+        this.state.pill = value;
+        return this;
+    }
+
+    style(value: string): this {
+        this.state.style = value;
+        return this;
+    }
+
+    class(value: string): this {
+        this.state.class = value;
+        return this;
+    }
+
+    /* -------------------------
+     * Helpers
+     * ------------------------- */
+
+    private _updateElement(): void {
+        const element = document.getElementById(this._id);
+        if (element) {
+            element.textContent = this.state.text;
+            element.className = `jux-badge jux-badge-${this.state.variant} jux-badge-${this.state.size}`;
+            if (this.state.pill) {
+                element.classList.add('jux-badge-pill');
+            }
+            if (this.state.class) {
+                element.className += ` ${this.state.class}`;
+            }
+        }
+    }
+
+    /* -------------------------
+     * Render
+     * ------------------------- */
+
+    render(targetId?: string): this {
+        let container: HTMLElement;
+
+        if (targetId) {
+            const target = document.querySelector(targetId);
+            if (!target || !(target instanceof HTMLElement)) {
+                throw new Error(`Badge: Target element "${targetId}" not found`);
+            }
+            container = target;
+        } else {
+            container = getOrCreateContainer(this._id);
+        }
+
+        this.container = container;
+        const { text, variant, size, pill, style, class: className } = this.state;
+
+        const badge = document.createElement('span');
+        badge.className = `jux-badge jux-badge-${variant} jux-badge-${size}`;
+        badge.id = this._id;
+        badge.textContent = text;
+
+        if (pill) {
+            badge.classList.add('jux-badge-pill');
+        }
+
+        if (className) {
+            badge.className += ` ${className}`;
+        }
+
+        if (style) {
+            badge.setAttribute('style', style);
+        }
+
+        container.appendChild(badge);
+        return this;
+    }
+
+    renderTo(juxComponent: any): this {
+        if (!juxComponent?._id) {
+            throw new Error('Badge.renderTo: Invalid component');
+        }
+        return this.render(`#${juxComponent._id}`);
+    }
+}
+
+export function badge(id: string, options: BadgeOptions = {}): Badge {
+    return new Badge(id, options);
+}