juxscript 1.0.18 → 1.0.20

package/lib/components/doughnutchart.ts

@@ -1,5 +1,22 @@
 import { getOrCreateContainer } from './helpers.js';
 import { State } from '../reactivity/state.js';
+import {
+    ChartDataPoint,
+    DoughnutChartOptions as DoughnutChartOptionsBase,
+    DoughnutChartState as DoughnutChartStateBase,
+    ChartTheme,
+    ChartStyleMode,
+    LegendOrientation,
+    ChartPropertyMapping,
+    ChartStateObject
+} from './chart-types.js';
+import {
+    lightenColor,
+    getThemeConfig,
+    createLegend,
+    createDataTable,
+    applyThemeStyles
+} from './chart-utils.js';
 import {
     googleTheme,
     seriesaTheme,
@@ -658,7 +675,7 @@ export class DoughnutChart {
             path.setAttribute('stroke-dasharray', '8,4');
         } else if (styleMode === 'glow') {
             path.setAttribute('fill', color);
-            
+
             const filterId = `glow-slice-${this._id}-${index}`;
             const defs = svg.querySelector('defs') || document.createElementNS('http://www.w3.org/2000/svg', 'defs');
             if (!svg.querySelector('defs')) {
@@ -701,24 +718,24 @@ export class DoughnutChart {
         if (showDataLabels) {
             const middleAngle = startAngle + (sliceAngle / 2);
             const middleRad = (middleAngle * Math.PI) / 180;
-            
+
             // Line start (from outer edge)
             const lineStartRadius = radius + 5;
             const lineStartX = centerX + lineStartRadius * Math.cos(middleRad);
             const lineStartY = centerY + lineStartRadius * Math.sin(middleRad);
-            
+
             // Bubble position (along the line)
             const bubbleRadius = radius + 45;
             const bubbleX = centerX + bubbleRadius * Math.cos(middleRad);
             const bubbleY = centerY + bubbleRadius * Math.sin(middleRad);
-            
+
             // Label position (beyond the bubble)
             const labelDistance = radius + 80;
             const externalLabelX = centerX + labelDistance * Math.cos(middleRad);
             const externalLabelY = centerY + labelDistance * Math.sin(middleRad);
 
             const lineGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-            
+
             if (animate) {
                 lineGroup.classList.add('jux-label-animated');
                 lineGroup.style.animationDelay = `${index * 150 + animationDuration + 100}ms`;
@@ -800,7 +817,7 @@ export class DoughnutChart {
             const externalLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
             externalLabel.setAttribute('x', externalLabelX.toString());
             externalLabel.setAttribute('y', externalLabelY.toString());
-            
+
             // Anchor based on which side of the circle
             const anchor = middleAngle > -90 && middleAngle < 90 ? 'start' : 'end';
             externalLabel.setAttribute('text-anchor', anchor);
@@ -818,12 +835,12 @@ export class DoughnutChart {
         // Add hover effect
         path.style.cursor = 'pointer';
         path.style.transition = 'transform 0.2s, opacity 0.2s';
-        
+
         path.addEventListener('mouseenter', () => {
             path.style.transform = 'scale(1.05)';
             path.style.opacity = '0.9';
         });
-        
+
         path.addEventListener('mouseleave', () => {
             path.style.transform = 'scale(1)';
             path.style.opacity = '1';
@@ -843,6 +860,103 @@ export class DoughnutChart {
         // Not used for doughnut chart
     }
 
+    /* -------------------------
+     * 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 '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;
+            }
+        });
+
+        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 doughnut chart, ignored
+            chartTheme: 'theme',
+            chartStyleMode: 'styleMode',
+            borderRadius: 'borderRadius',
+            chartTitle: 'title',
+            chartWidth: 'width',
+            chartHeight: 'height',
+            showLegend: 'showLegend',
+            showDataTable: 'showDataTable',
+            showDataLabels: 'showDataLabels',
+            animate: 'animate',
+            animationDuration: 'animationDuration',
+            legendOrientation: 'legendOrientation',
+            // Note: Doughnut charts don't use these, but we handle them gracefully
+            showTicksX: null,
+            showTicksY: null,
+            chartOrientation: null,
+            chartDirection: null
+        };
+
+        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];
+
+            // Skip null mappings (properties not applicable to this chart type)
+            if (methodOrFunction === null || !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;
+    }
+
     /* -------------------------
      * Legend and Data Table
      * ------------------------- */
@@ -968,59 +1082,13 @@ export class DoughnutChart {
     }
 
     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-doughnutchart-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-doughnutchart-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-doughnutchart.theme-${themeName} {
-${variablesCSS}
-}
-`;
+        applyThemeStyles(themeName as ChartTheme, 'jux-doughnutchart', this._getBaseStyles());
     }
 
     private _applyThemeToWrapper(wrapper: HTMLElement): void {
@@ -1131,7 +1199,7 @@ ${variablesCSS}
 .jux-doughnutchart-svg {
   font-family: inherit;
 }
-`;      
+`;
     }
 
     render(targetId?: string | HTMLElement): this {

package/lib/components/dropdown.ts

@@ -1,77 +1,75 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
+import { renderIcon } from './icons.js';
 
-/**
- * Dropdown menu item
- */
-export interface DropdownItem {
+export interface DropdownOption {
     label: string;
-    value?: string;
-    icon?: string;
-    click?: () => void;
+    value: string;
     disabled?: boolean;
-    divider?: boolean;
 }
 
-/**
- * Dropdown component options
- */
 export interface DropdownOptions {
-    items?: DropdownItem[];
-    trigger?: string;
-    position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+    options?: DropdownOption[];
+    value?: string;
+    placeholder?: string;
+    label?: string;
+    disabled?: boolean;
     style?: string;
     class?: string;
 }
 
-/**
- * Dropdown component state
- */
+export interface DropdownItem {
+    label: string;
+    value?: string;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+
 type DropdownState = {
-    items: DropdownItem[];
-    trigger: string;
-    position: string;
+    options: DropdownOption[];
+    value: string;
+    placeholder: string;
+    label: string;
+    disabled: boolean;
     style: string;
     class: string;
     isOpen: boolean;
+    items: any[];
+    trigger: string;
+    position: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
 };
 
-/**
- * Dropdown Menu component - Context menus, action menus
- * 
- * Usage:
- *   jux.dropdown('actions', {
- *     trigger: 'Actions ▾',
- *     position: 'bottom-right',
- *     items: [
- *       { label: 'Edit', icon: '✏️', click: () => console.log('Edit') },
- *       { label: 'Delete', icon: '🗑️', click: () => console.log('Delete') },
- *       { divider: true },
- *       { label: 'Archive', click: () => console.log('Archive') }
- *     ]
- *   }).render('#toolbar');
- * 
- *   // Control programmatically
- *   const dd = jux.dropdown('my-dropdown').render();
- *   dd.open();
- *   dd.close();
- */
 export class Dropdown {
     state: DropdownState;
     container: HTMLElement | null = null;
     _id: string;
     id: string;
 
+    // CRITICAL: Store bind/sync instructions for deferred wiring
+    private _bindings: Array<{ event: string, handler: Function }> = [];
+    private _syncBindings: Array<{
+        property: string,
+        stateObj: State<any>,
+        toState?: Function,
+        toComponent?: Function
+    }> = [];
+
     constructor(id: string, options: DropdownOptions = {}) {
         this._id = id;
         this.id = id;
 
         this.state = {
-            items: options.items ?? [],
-            trigger: options.trigger ?? 'Menu',
-            position: options.position ?? 'bottom-left',
+            options: options.options ?? [],
+            value: options.value ?? '',
+            placeholder: options.placeholder ?? 'Select...',
+            label: options.label ?? '',
+            disabled: options.disabled ?? false,
             style: options.style ?? '',
             class: options.class ?? '',
-            isOpen: false
+            isOpen: false,
+            items: [],
+            trigger: '',
+            position: 'bottom-left'
         };
     }
 
@@ -109,6 +107,19 @@ export class Dropdown {
         return this;
     }
 
+    bind(event: string, handler: Function): this {
+        this._bindings.push({ event, handler });
+        return this;
+    }
+
+    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+        if (!stateObj || typeof stateObj.subscribe !== 'function') {
+            throw new Error(`Dropdown.sync: Expected a State object for property "${property}"`);
+        }
+        this._syncBindings.push({ property, stateObj, toState, toComponent });
+        return this;
+    }
+
     /* -------------------------
      * Methods
      * ------------------------- */
@@ -142,47 +153,37 @@ export class Dropdown {
      * ------------------------- */
 
     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(`Dropdown: Target element "${targetId}" not found`);
+                throw new Error(`Dropdown: Target "${targetId}" not found`);
             }
             container = target;
         } else {
             container = getOrCreateContainer(this._id);
         }
-
         this.container = container;
-        const { items, trigger, position, style, class: className } = this.state;
 
-        // Wrapper
+        // === 2. PREPARE: Destructure state and check sync flags ===
+        const { label, items, style, class: className } = this.state;
+        const hasItemsSync = this._syncBindings.some(b => b.property === 'items');
+
+        // === 3. BUILD: Create DOM elements ===
         const wrapper = document.createElement('div');
         wrapper.className = 'jux-dropdown';
         wrapper.id = this._id;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
 
-        if (className) {
-            wrapper.className += ` ${className}`;
-        }
+        const button = document.createElement('button');
+        button.className = 'jux-dropdown-button';
+        button.textContent = label;
 
-        if (style) {
-            wrapper.setAttribute('style', style);
-        }
-
-        // Trigger button
-        const triggerBtn = document.createElement('button');
-        triggerBtn.className = 'jux-dropdown-trigger';
-        triggerBtn.textContent = trigger;
-        triggerBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.toggle();
-        });
-
-        // Menu
         const menu = document.createElement('div');
-        menu.className = `jux-dropdown-menu jux-dropdown-menu-${position}`;
-        menu.id = `${this._id}-menu`;
+        menu.className = 'jux-dropdown-menu';
+        menu.style.display = 'none';
 
         items.forEach(item => {
             if (item.divider) {
@@ -190,41 +191,127 @@ export class Dropdown {
                 divider.className = 'jux-dropdown-divider';
                 menu.appendChild(divider);
             } else {
-                const menuItem = document.createElement('button');
+                const menuItem = document.createElement('a');
                 menuItem.className = 'jux-dropdown-item';
-                menuItem.disabled = item.disabled ?? false;
+
+                if (item.href) {
+                    menuItem.href = item.href;
+                }
 
                 if (item.icon) {
                     const icon = document.createElement('span');
-                    icon.className = 'jux-dropdown-item-icon';
-                    icon.textContent = item.icon;
+                    icon.className = 'jux-dropdown-icon';
+                    icon.appendChild(renderIcon(item.icon));
                     menuItem.appendChild(icon);
                 }
 
-                const label = document.createElement('span');
-                label.className = 'jux-dropdown-item-label';
-                label.textContent = item.label;
-                menuItem.appendChild(label);
+                const text = document.createElement('span');
+                text.textContent = item.label;
+                menuItem.appendChild(text);
 
-                menuItem.addEventListener('click', () => {
-                    if (item.click) {
-                        item.click();
-                    }
-                    this.close();
-                });
+                if (item.click) {
+                    menuItem.addEventListener('click', (e) => {
+                        e.preventDefault();
+                        item.click!();
+                        menu.style.display = 'none';
+                    });
+                }
 
                 menu.appendChild(menuItem);
             }
         });
 
-        wrapper.appendChild(triggerBtn);
+        wrapper.appendChild(button);
         wrapper.appendChild(menu);
-        container.appendChild(wrapper);
+
+        // Toggle functionality
+        button.addEventListener('click', () => {
+            menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
+        });
 
         // Close on outside click
         document.addEventListener('click', (e) => {
             if (!wrapper.contains(e.target as Node)) {
-                this.close();
+                menu.style.display = 'none';
+            }
+        });
+
+        // === 4. WIRE: Attach event listeners and sync bindings ===
+
+        // Wire custom bindings from .bind() calls
+        this._bindings.forEach(({ event, handler }) => {
+            wrapper.addEventListener(event, handler as EventListener);
+        });
+
+        // Wire sync bindings from .sync() calls
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'items') {
+                const transformToComponent = toComponent || ((v: any) => v);
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    this.state.items = transformed;
+
+                    // Re-render menu items
+                    menu.innerHTML = '';
+                    transformed.forEach((item: any) => {
+                        if (item.divider) {
+                            const divider = document.createElement('div');
+                            divider.className = 'jux-dropdown-divider';
+                            menu.appendChild(divider);
+                        } else {
+                            const menuItem = document.createElement('a');
+                            menuItem.className = 'jux-dropdown-item';
+
+                            if (item.href) menuItem.href = item.href;
+
+                            if (item.icon) {
+                                const icon = document.createElement('span');
+                                icon.className = 'jux-dropdown-icon';
+                                icon.appendChild(renderIcon(item.icon));
+                                menuItem.appendChild(icon);
+                            }
+
+                            const text = document.createElement('span');
+                            text.textContent = item.label;
+                            menuItem.appendChild(text);
+
+                            if (item.click) {
+                                menuItem.addEventListener('click', (e) => {
+                                    e.preventDefault();
+                                    item.click!();
+                                    menu.style.display = 'none';
+                                });
+                            }
+
+                            menu.appendChild(menuItem);
+                        }
+                    });
+
+                    requestAnimationFrame(() => {
+                        if ((window as any).lucide) {
+                            (window as any).lucide.createIcons();
+                        }
+                    });
+                });
+            }
+            else if (property === 'label') {
+                const transformToComponent = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    button.textContent = transformed;
+                    this.state.label = transformed;
+                });
+            }
+        });
+
+        // === 5. RENDER: Append to DOM and finalize ===
+        container.appendChild(wrapper);
+
+        requestAnimationFrame(() => {
+            if ((window as any).lucide) {
+                (window as any).lucide.createIcons();
             }
         });