juxscript 1.0.20 → 1.0.21

package/lib/components/card.ts

@@ -1,5 +1,9 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+
+// Event definitions - Card is display-only, no interactive events
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['click'] as const;  // ✅ Can be clicked for navigation/selection
 
 export interface CardOptions {
   title?: string;
@@ -7,6 +11,7 @@ export interface CardOptions {
   footer?: string;
   variant?: string;
   hoverable?: boolean;
+  icon?: string;
   style?: string;
   class?: string;
 }
@@ -17,40 +22,39 @@ type CardState = {
   footer: string;
   variant: string;
   hoverable: boolean;
+  icon: string;
   style: string;
   class: string;
 };
 
-export class Card {
-  state: CardState;
-  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
-  }> = [];
-
+export class Card extends BaseComponent<CardState> {
   constructor(id: string, options: CardOptions = {}) {
-    this._id = id;
-    this.id = id;
-
-    this.state = {
+    super(id, {
       title: options.title ?? '',
       content: options.content ?? '',
       footer: options.footer ?? '',
       variant: options.variant ?? 'default',
       hoverable: options.hoverable ?? false,
+      icon: options.icon ?? '',
       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
+
   title(value: string): this {
     this.state.title = value;
     return this;
@@ -66,47 +70,20 @@ export class Card {
     return this;
   }
 
-  style(value: string): this {
-    this.state.style = value;
-    return this;
-  }
-
-  class(value: string): this {
-    this.state.class = value;
+  icon(value: string): this {
+    this.state.icon = value;
     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(`Card.sync: Expected a State object for property "${property}"`);
-    }
-    this._syncBindings.push({ property, stateObj, toState, toComponent });
-    return this;
-  }
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
 
   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(`Card: Target "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
-    this.container = container;
+    const container = this._setupContainer(targetId);
 
-    // === 2. PREPARE: Destructure state ===
-    const { title, content, footer, variant, hoverable, style, class: className } = this.state;
+    const { title, content, footer, variant, hoverable, icon, style, class: className } = this.state;
 
-    // === 3. BUILD: Create DOM elements ===
     const card = document.createElement('div');
     card.className = `jux-card jux-card-${variant}`;
     card.id = this._id;
@@ -114,10 +91,24 @@ export class Card {
     if (className) card.className += ` ${className}`;
     if (style) card.setAttribute('style', style);
 
-    if (title) {
+    if (title || icon) {
       const header = document.createElement('div');
       header.className = 'jux-card-header';
-      header.textContent = title;
+
+      if (icon) {
+        const iconEl = document.createElement('span');
+        iconEl.className = 'jux-card-icon';
+        iconEl.appendChild(renderIcon(icon));
+        header.appendChild(iconEl);
+      }
+
+      if (title) {
+        const titleEl = document.createElement('span');
+        titleEl.className = 'jux-card-title';
+        titleEl.textContent = title;
+        header.appendChild(titleEl);
+      }
+
       card.appendChild(header);
     }
 
@@ -133,20 +124,15 @@ export class Card {
       card.appendChild(footerEl);
     }
 
-    // === 4. WIRE: Attach event listeners and sync bindings ===
-
-    // Wire custom bindings from .bind() calls
-    this._bindings.forEach(({ event, handler }) => {
-      card.addEventListener(event, handler as EventListener);
-    });
+    this._wireStandardEvents(card);
 
-    // Wire sync bindings from .sync() calls
+    // Wire sync bindings
     this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
       if (property === 'title') {
-        const transformToComponent = toComponent || ((v: any) => String(v));
+        const transform = toComponent || ((v: any) => String(v));
 
         stateObj.subscribe((val: any) => {
-          const transformed = transformToComponent(val);
+          const transformed = transform(val);
           const header = card.querySelector('.jux-card-header');
           if (header) {
             header.textContent = transformed;
@@ -155,19 +141,19 @@ export class Card {
         });
       }
       else if (property === 'content') {
-        const transformToComponent = toComponent || ((v: any) => String(v));
+        const transform = toComponent || ((v: any) => String(v));
 
         stateObj.subscribe((val: any) => {
-          const transformed = transformToComponent(val);
+          const transformed = transform(val);
           body.innerHTML = transformed;
           this.state.content = transformed;
         });
       }
       else if (property === 'footer') {
-        const transformToComponent = toComponent || ((v: any) => String(v));
+        const transform = toComponent || ((v: any) => String(v));
 
         stateObj.subscribe((val: any) => {
-          const transformed = transformToComponent(val);
+          const transformed = transform(val);
           const footerEl = card.querySelector('.jux-card-footer');
           if (footerEl) {
             footerEl.innerHTML = transformed;
@@ -177,17 +163,9 @@ export class Card {
       }
     });
 
-    // === 5. RENDER: Append to DOM and finalize ===
     container.appendChild(card);
     return this;
   }
-
-  renderTo(juxComponent: any): this {
-    if (!juxComponent?._id) {
-      throw new Error('Card.renderTo: Invalid component');
-    }
-    return this.render(`#${juxComponent._id}`);
-  }
 }
 
 export function card(id: string, options: CardOptions = {}): Card {

package/lib/components/charts/areachart.ts

@@ -0,0 +1,315 @@
+import { BaseChart, BaseChartState, ChartDataPoint } from './lib/BaseChart.js';
+
+export interface AreaChartOptions {
+    data?: ChartDataPoint[];
+    title?: string;
+    subtitle?: string;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    showTicksX?: boolean;
+    showTicksY?: boolean;
+    showScaleX?: boolean;
+    showScaleY?: boolean;
+    scaleXUnit?: string;
+    scaleYUnit?: string;
+    showLegend?: boolean;
+    legendOrientation?: 'horizontal' | 'vertical';
+    showDataTable?: boolean;
+    showDataLabels?: boolean;
+    animate?: boolean;
+    animationDuration?: number;
+    width?: number;
+    height?: number;
+    colors?: string[];
+    class?: string;
+    style?: string;
+    theme?: 'google' | 'seriesa' | 'hr' | 'figma' | 'notion' | 'chalk' | 'mint';
+    styleMode?: 'default' | 'gradient' | 'outline' | 'dashed' | 'glow' | 'glass';
+    borderRadius?: number;
+}
+
+interface AreaChartState extends BaseChartState {
+    data: ChartDataPoint[];
+}
+
+export class AreaChart extends BaseChart<AreaChartState> {
+    constructor(id: string, options: AreaChartOptions = {}) {
+        const defaultColors = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6'];
+        const randomColor = defaultColors[Math.floor(Math.random() * defaultColors.length)];
+
+        super(id, {
+            data: options.data ?? [],
+            title: options.title ?? '',
+            subtitle: options.subtitle ?? '',
+            xAxisLabel: options.xAxisLabel ?? '',
+            yAxisLabel: options.yAxisLabel ?? '',
+            showTicksX: options.showTicksX ?? true,
+            showTicksY: options.showTicksY ?? true,
+            showScaleX: options.showScaleX ?? true,
+            showScaleY: options.showScaleY ?? true,
+            scaleXUnit: options.scaleXUnit ?? '',
+            scaleYUnit: options.scaleYUnit ?? '',
+            showLegend: options.showLegend ?? false,
+            legendOrientation: options.legendOrientation ?? 'horizontal',
+            showDataTable: options.showDataTable ?? false,
+            showDataLabels: options.showDataLabels ?? true,
+            animate: options.animate ?? true,
+            animationDuration: options.animationDuration ?? 800,
+            width: options.width ?? 600,
+            height: options.height ?? 400,
+            colors: options.colors ?? [randomColor],
+            class: options.class ?? '',
+            style: options.style ?? '',
+            theme: options.theme,
+            styleMode: options.styleMode ?? 'default',
+            borderRadius: options.borderRadius ?? 4
+        });
+    }
+
+    protected _getChartClassName(): string {
+        return 'jux-areachart';
+    }
+
+    protected _createSVG(): SVGSVGElement {
+        const { data, width, height, colors, animate, animationDuration } = this.state;
+
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('width', width.toString());
+        svg.setAttribute('height', height.toString());
+        svg.setAttribute('class', 'jux-areachart-svg');
+
+        if (!data.length) return svg;
+
+        if (animate) this._addAnimationStyles(svg);
+
+        const padding = { top: 40, right: 40, bottom: 60, left: 60 };
+        const chartWidth = width - padding.left - padding.right;
+        const chartHeight = height - padding.top - padding.bottom;
+        const maxValue = Math.max(...data.map(d => d.value));
+
+        this._renderAreaChart(svg, padding, chartWidth, chartHeight, maxValue);
+
+        return svg;
+    }
+
+    protected _getBaseStyles(): string {
+        return `
+.jux-areachart {
+  font-family: var(--chart-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  display: inline-block;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  background: white;
+  padding: 24px;
+}
+.jux-areachart-title {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+.jux-areachart-subtitle {
+  margin: 0 0 1rem 0;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+.jux-areachart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 1rem;
+  justify-content: center;
+}
+.jux-areachart-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.jux-areachart-legend-swatch {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+}
+.jux-areachart-legend-label {
+  font-size: 0.875rem;
+  color: #374151;
+}
+.jux-areachart-table {
+  width: 100%;
+  margin-top: 1rem;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+.jux-areachart-table thead th {
+  text-align: center;
+  padding: 0.5rem;
+  border-bottom: 2px solid #e5e7eb;
+  font-weight: 600;
+}
+.jux-areachart-table tbody td {
+  padding: 0.5rem;
+  border-bottom: 1px solid #f3f4f6;
+  text-align: center;
+}
+.jux-areachart-svg {
+  font-family: inherit;
+}
+`;
+    }
+
+    private _addAnimationStyles(svg: SVGSVGElement): void {
+        const { animationDuration } = this.state;
+        const animationId = `area-grow-${this._id}`;
+        const style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
+
+        style.textContent = `
+            @keyframes ${animationId} {
+                from { opacity: 0; transform: scaleY(0); }
+                to { opacity: 1; transform: scaleY(1); }
+            }
+            .jux-area-animated {
+                transform-origin: bottom;
+                animation: ${animationId} ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+            }
+        `;
+        svg.appendChild(style);
+    }
+
+    private _renderAreaChart(svg: SVGSVGElement, padding: any, chartWidth: number, chartHeight: number, maxValue: number): void {
+        const { data, width, height, colors, showDataLabels, animate, xAxisLabel, yAxisLabel, showTicksX, showTicksY, showScaleX, showScaleY, scaleYUnit } = this.state;
+
+        const yScale = chartHeight / maxValue;
+        const xStep = chartWidth / (data.length - 1 || 1);
+        const color = colors[0];
+
+        // Axes
+        if (showScaleY) {
+            this._renderAxis(svg, padding.left, padding.top, padding.left, height - padding.bottom);
+            if (yAxisLabel && showTicksY) {
+                this._renderAxisLabel(svg, yAxisLabel, 20, padding.top + chartHeight / 2, -90);
+            }
+            if (showTicksY) {
+                this._renderYTicks(svg, maxValue, yScale, padding, width, height, scaleYUnit, chartHeight);
+            }
+        }
+
+        if (showScaleX) {
+            this._renderAxis(svg, padding.left, height - padding.bottom, width - padding.right, height - padding.bottom);
+            if (xAxisLabel && showTicksX) {
+                this._renderAxisLabel(svg, xAxisLabel, padding.left + chartWidth / 2, height - 15, 0);
+            }
+        }
+
+        // Build area path
+        let pathData = `M ${padding.left} ${height - padding.bottom}`;
+        data.forEach((point, i) => {
+            const x = padding.left + (i * xStep);
+            const y = height - padding.bottom - (point.value * yScale);
+            pathData += ` L ${x} ${y}`;
+        });
+        pathData += ` L ${padding.left + ((data.length - 1) * xStep)} ${height - padding.bottom} Z`;
+
+        const areaPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        areaPath.setAttribute('d', pathData);
+        areaPath.setAttribute('fill', color);
+        areaPath.setAttribute('fill-opacity', '0.3');
+        if (animate) areaPath.classList.add('jux-area-animated');
+        svg.appendChild(areaPath);
+
+        // Line path
+        let lineData = '';
+        data.forEach((point, i) => {
+            const x = padding.left + (i * xStep);
+            const y = height - padding.bottom - (point.value * yScale);
+            lineData += (i === 0 ? `M ${x} ${y}` : ` L ${x} ${y}`);
+        });
+
+        const linePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        linePath.setAttribute('d', lineData);
+        linePath.setAttribute('stroke', color);
+        linePath.setAttribute('stroke-width', '3');
+        linePath.setAttribute('fill', 'none');
+        svg.appendChild(linePath);
+
+        // Data points
+        data.forEach((point, i) => {
+            const x = padding.left + (i * xStep);
+            const y = height - padding.bottom - (point.value * yScale);
+
+            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+            circle.setAttribute('cx', x.toString());
+            circle.setAttribute('cy', y.toString());
+            circle.setAttribute('r', '4');
+            circle.setAttribute('fill', color);
+            circle.setAttribute('stroke', 'white');
+            circle.setAttribute('stroke-width', '2');
+            svg.appendChild(circle);
+
+            if (showDataLabels) {
+                const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+                label.setAttribute('x', x.toString());
+                label.setAttribute('y', (y - 10).toString());
+                label.setAttribute('text-anchor', 'middle');
+                label.setAttribute('fill', '#374151');
+                label.setAttribute('font-size', '11');
+                label.setAttribute('font-weight', '600');
+                label.textContent = point.value.toString();
+                svg.appendChild(label);
+            }
+        });
+    }
+
+    private _renderAxis(svg: SVGSVGElement, x1: number, y1: number, x2: number, y2: number): void {
+        const axis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        axis.setAttribute('x1', x1.toString());
+        axis.setAttribute('y1', y1.toString());
+        axis.setAttribute('x2', x2.toString());
+        axis.setAttribute('y2', y2.toString());
+        axis.setAttribute('stroke', '#9ca3af');
+        axis.setAttribute('stroke-width', '2');
+        svg.appendChild(axis);
+    }
+
+    private _renderAxisLabel(svg: SVGSVGElement, text: string, x: number, y: number, rotate: number): void {
+        const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        label.setAttribute('x', x.toString());
+        label.setAttribute('y', y.toString());
+        label.setAttribute('text-anchor', 'middle');
+        if (rotate !== 0) label.setAttribute('transform', `rotate(${rotate}, ${x}, ${y})`);
+        label.setAttribute('fill', '#6b7280');
+        label.setAttribute('font-size', '12');
+        label.setAttribute('font-weight', '500');
+        label.textContent = text;
+        svg.appendChild(label);
+    }
+
+    private _renderYTicks(svg: SVGSVGElement, maxValue: number, yScale: number, padding: any, width: number, height: number, unit: string, chartHeight: number): void {
+        const numTicks = 5;
+        for (let i = 0; i <= numTicks; i++) {
+            const value = (maxValue / numTicks) * i;
+            const y = height - padding.bottom - (value * yScale);
+
+            const gridLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+            gridLine.setAttribute('x1', padding.left.toString());
+            gridLine.setAttribute('y1', y.toString());
+            gridLine.setAttribute('x2', (width - padding.right).toString());
+            gridLine.setAttribute('y2', y.toString());
+            gridLine.setAttribute('stroke', '#e5e7eb');
+            gridLine.setAttribute('stroke-width', '1');
+            gridLine.setAttribute('stroke-dasharray', '4,4');
+            svg.appendChild(gridLine);
+
+            const tickLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+            tickLabel.setAttribute('x', (padding.left - 10).toString());
+            tickLabel.setAttribute('y', (y + 4).toString());
+            tickLabel.setAttribute('text-anchor', 'end');
+            tickLabel.setAttribute('fill', '#6b7280');
+            tickLabel.setAttribute('font-size', '11');
+            tickLabel.textContent = Math.round(value).toString() + (unit || '');
+            svg.appendChild(tickLabel);
+        }
+    }
+}
+
+export function areachart(id: string, options: AreaChartOptions = {}): AreaChart {
+    return new AreaChart(id, options);
+}