juxscript 1.0.18 → 1.0.20

package/lib/components/badge.ts

@@ -1,87 +1,64 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
 
-/**
- * Badge component options
- */
 export interface BadgeOptions {
     text?: string;
-    variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
-    size?: 'sm' | 'md' | 'lg';
-    pill?: boolean;
+    variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     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;
 
+    private _bindings: Array<{ event: string, handler: Function }> = [];
+    private _syncBindings: Array<{
+        property: string,
+        stateObj: State<any>,
+        toState?: Function,
+        toComponent?: Function
+    }> = [];
+
     constructor(id: string, options: BadgeOptions = {}) {
         this._id = id;
         this.id = id;
 
         this.state = {
             text: options.text ?? '',
-            variant: options.variant ?? 'default',
+            variant: options.variant ?? 'primary',
             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 {
+    variant(value: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'): this {
         this.state.variant = value;
-        this._updateElement();
         return this;
     }
 
-    size(value: 'sm' | 'md' | 'lg'): this {
+    size(value: 'xs' | 'sm' | 'md' | 'lg' | 'xl'): 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;
@@ -92,61 +69,75 @@ export class Badge {
         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}`;
-            }
-        }
+    bind(event: string, handler: Function): this {
+        this._bindings.push({ event, handler });
+        return this;
     }
 
-    /* -------------------------
-     * Render
-     * ------------------------- */
+    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+        if (!stateObj || typeof stateObj.subscribe !== 'function') {
+            throw new Error(`Badge.sync: Expected a State object for property "${property}"`);
+        }
+        this._syncBindings.push({ property, stateObj, toState, toComponent });
+        return this;
+    }
 
     render(targetId?: string): this {
+        // === 1. SETUP: Get or create container ===
         let container: HTMLElement;
-
         if (targetId) {
             const target = document.querySelector(targetId);
             if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`Badge: Target element "${targetId}" not found`);
+                throw new Error(`Badge: Target "${targetId}" not found`);
             }
             container = target;
         } else {
             container = getOrCreateContainer(this._id);
         }
-
         this.container = container;
-        const { text, variant, size, pill, style, class: className } = this.state;
 
+        // === 2. PREPARE: Destructure state ===
+        const { text, variant, size, style, class: className } = this.state;
+
+        // === 3. BUILD: Create DOM elements ===
         const badge = document.createElement('span');
         badge.className = `jux-badge jux-badge-${variant} jux-badge-${size}`;
         badge.id = this._id;
         badge.textContent = text;
+        if (className) badge.className += ` ${className}`;
+        if (style) badge.setAttribute('style', style);
+
+        // === 4. WIRE: Attach event listeners and sync bindings ===
+
+        // Wire custom bindings from .bind() calls
+        this._bindings.forEach(({ event, handler }) => {
+            badge.addEventListener(event, handler as EventListener);
+        });
+
+        // Wire sync bindings from .sync() calls
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'text') {
+                const transformToComponent = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    badge.textContent = transformed;
+                    this.state.text = transformed;
+                });
+            }
+            else if (property === 'variant') {
+                const transformToComponent = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    badge.classList.remove(`jux-badge-${this.state.variant}`);
+                    this.state.variant = transformed;
+                    badge.classList.add(`jux-badge-${transformed}`);
+                });
+            }
+        });
 
-        if (pill) {
-            badge.classList.add('jux-badge-pill');
-        }
-
-        if (className) {
-            badge.className += ` ${className}`;
-        }
-
-        if (style) {
-            badge.setAttribute('style', style);
-        }
-
+        // === 5. RENDER: Append to DOM and finalize ===
         container.appendChild(badge);
         return this;
     }

package/lib/components/barchart.ts

@@ -1,5 +1,24 @@
 import { getOrCreateContainer } from './helpers.js';
 import { State } from '../reactivity/state.js';
+import {
+    ChartDataPoint,
+    BarAreaChartOptions,
+    BarAreaChartState,
+    ChartTheme,
+    ChartStyleMode,
+    ChartOrientation,
+    ChartDirection,
+    LegendOrientation,
+    ChartPropertyMapping,
+    ChartStateObject
+} from './chart-types.js';
+import {
+    lightenColor,
+    getThemeConfig,
+    createLegend,
+    createDataTable,
+    applyThemeStyles
+} from './chart-utils.js';
 import {
     googleTheme,
     seriesaTheme,
@@ -384,6 +403,105 @@ export class BarChart {
         return this;
     }
 
+    /* -------------------------
+     * Reactivity Support
+     * ------------------------- */
+
+    /**
+     * Sync a single property to a state object
+     */
+    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+        const transform = toComponent || ((v: any) => v);
+
+        stateObj.subscribe((val: any) => {
+            const transformed = transform(val);
+
+            // Map property to correct method
+            switch (property) {
+                case 'data': this.data(transformed); break;
+                case 'title': this.title(transformed); break;
+                case 'subtitle': this.subtitle(transformed); break;
+                case 'width': this.width(transformed); break;
+                case 'height': this.height(transformed); break;
+                case 'theme': this.theme(transformed); break;
+                case 'styleMode': this.styleMode(transformed); break;
+                case 'borderRadius': this.borderRadius(transformed); break;
+                case 'showTicksX': this.showTicksX(transformed); break;
+                case 'showTicksY': this.showTicksY(transformed); break;
+                case 'showLegend': this.showLegend(transformed); break;
+                case 'showDataLabels': this.showDataLabels(transformed); break;
+                case 'showDataTable': this.showDataTable(transformed); break;
+                case 'animate': this.animate(transformed); break;
+                case 'animationDuration': this.animationDuration(transformed); break;
+                case 'legendOrientation': this.legendOrientation(transformed); break;
+                case 'chartOrientation': this.chartOrientation(transformed); break;
+                case 'chartDirection': this.chartDirection(transformed); break;
+            }
+        });
+
+        return this;
+    }
+
+    /**
+     * Sync multiple properties from a state object
+     */
+    syncState(stateObject: ChartStateObject, mapping?: ChartPropertyMapping): this {
+        // Default mapping: camelCase state names to method names
+        const defaultMapping: ChartPropertyMapping = {
+            chartType: 'type',           // Not used in bar chart, ignored
+            chartTheme: 'theme',
+            chartStyleMode: 'styleMode',
+            borderRadius: 'borderRadius',
+            chartTitle: 'title',
+            chartWidth: 'width',
+            chartHeight: 'height',
+            showTicksX: 'showTicksX',
+            showTicksY: 'showTicksY',
+            showLegend: 'showLegend',
+            showDataTable: 'showDataTable',
+            showDataLabels: 'showDataLabels',
+            animate: 'animate',
+            animationDuration: 'animationDuration',
+            legendOrientation: 'legendOrientation',
+            chartOrientation: 'chartOrientation',
+            chartDirection: 'chartDirection'
+        };
+
+        const finalMapping = { ...defaultMapping, ...mapping };
+
+        // Iterate through state object and bind each property
+        Object.entries(stateObject).forEach(([key, stateObj]) => {
+            if (!stateObj || typeof stateObj.subscribe !== 'function') {
+                return;
+            }
+
+            const methodOrFunction = finalMapping[key];
+
+            if (!methodOrFunction) {
+                return;
+            }
+
+            if (typeof methodOrFunction === 'function') {
+                // Custom function mapping
+                stateObj.subscribe(methodOrFunction);
+            } else {
+                // String mapping to method name
+                const methodName = methodOrFunction as keyof this;
+                const method = this[methodName];
+
+                if (typeof method !== 'function') {
+                    return;
+                }
+
+                stateObj.subscribe((val: any) => {
+                    (method as Function).call(this, val);
+                });
+            }
+        });
+
+        return this;
+    }
+
     /* -------------------------
      * Update chart
      * ------------------------- */
@@ -1049,59 +1167,13 @@ export class BarChart {
     }
 
     private _applyTheme(themeName: string): void {
-        const themes: Record<string, any> = {
-            google: googleTheme,
-            seriesa: seriesaTheme,
-            hr: hrTheme,
-            figma: figmaTheme,
-            notion: notionTheme,
-            chalk: chalkTheme,
-            mint: mintTheme
-        };
-
-        const theme = themes[themeName];
+        const theme = getThemeConfig(themeName as ChartTheme);
         if (!theme) return;
 
         // Apply colors
         this.state.colors = theme.colors;
 
-        // Inject base styles (once)
-        const baseStyleId = 'jux-barchart-base-styles';
-        if (!document.getElementById(baseStyleId)) {
-            const style = document.createElement('style');
-            style.id = baseStyleId;
-            style.textContent = this._getBaseStyles();
-            document.head.appendChild(style);
-        }
-
-        // Inject font (once per theme)
-        if (theme.font && !document.querySelector(`link[href="${theme.font}"]`)) {
-            const link = document.createElement('link');
-            link.rel = 'stylesheet';
-            link.href = theme.font;
-            document.head.appendChild(link);
-        }
-
-        // Apply theme-specific styles
-        const styleId = `jux-barchart-theme-${themeName}`;
-        let styleElement = document.getElementById(styleId) as HTMLStyleElement;
-
-        if (!styleElement) {
-            styleElement = document.createElement('style');
-            styleElement.id = styleId;
-            document.head.appendChild(styleElement);
-        }
-
-        // Generate CSS with theme variables
-        const variablesCSS = Object.entries(theme.variables)
-            .map(([key, value]) => `  ${key}: ${value};`)
-            .join('\n');
-
-        styleElement.textContent = `
-.jux-barchart.theme-${themeName} {
-${variablesCSS}
-}
-`;
+        applyThemeStyles(themeName as ChartTheme, 'jux-barchart', this._getBaseStyles());
     }
 
     private _applyThemeToWrapper(wrapper: HTMLElement): void {