juxscript 1.0.19 → 1.0.21

package/lib/components/card.ts

@@ -1,219 +1,173 @@
-import { getOrCreateContainer } from './helpers.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
 
-/**
- * Card component options
- */
 export interface CardOptions {
   title?: string;
-  subtitle?: string;
   content?: string;
-  image?: string;
-  variant?: 'default' | 'elevated' | 'outlined';
+  footer?: string;
+  variant?: string;
+  hoverable?: boolean;
+  icon?: string;
   style?: string;
   class?: string;
 }
 
-/**
- * Card component state
- */
 type CardState = {
   title: string;
-  subtitle: string;
   content: string;
-  image: string;
+  footer: string;
   variant: string;
+  hoverable: boolean;
+  icon: string;
   style: string;
   class: string;
-  hasActions: boolean;
 };
 
-/**
- * Card component
- * 
- * Usage:
- *   const card = jux.card('myCard', {
- *     title: 'Card Title',
- *     content: 'Card content here'
- *   });
- *   card.render();
- * 
- *   // Add actions (any components)
- *   jux.button('view-btn').label('View').render('#myCard-actions');
- *   jux.button('delete-btn').label('Delete').render('#myCard-actions');
- */
-export class Card {
-  state: CardState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
-
+export class Card extends BaseComponent<CardState> {
   constructor(id: string, options: CardOptions = {}) {
-    this._id = id;
-    this.id = id;
-
-    this.state = {
+    super(id, {
       title: options.title ?? '',
-      subtitle: options.subtitle ?? '',
       content: options.content ?? '',
-      image: options.image ?? '',
+      footer: options.footer ?? '',
       variant: options.variant ?? 'default',
+      hoverable: options.hoverable ?? false,
+      icon: options.icon ?? '',
       style: options.style ?? '',
-      class: options.class ?? '',
-      hasActions: false
-    };
+      class: options.class ?? ''
+    });
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
-
-  title(value: string): this {
-    this.state.title = value;
-    return this;
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
   }
 
-  subtitle(value: string): this {
-    this.state.subtitle = value;
-    return this;
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
   }
 
-  content(value: string): this {
-    this.state.content = value;
-    return this;
-  }
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
 
-  image(value: string): this {
-    this.state.image = value;
-    return this;
-  }
+  // ✅ Inherited from BaseComponent
 
-  variant(value: string): this {
-    this.state.variant = value;
+  title(value: string): this {
+    this.state.title = value;
     return this;
   }
 
-  style(value: string): this {
-    this.state.style = value;
+  content(value: string): this {
+    this.state.content = value;
     return this;
   }
 
-  class(value: string): this {
-    this.state.class = value;
+  footer(value: string): this {
+    this.state.footer = value;
     return this;
   }
 
-  /**
-   * Enable actions region
-   * Creates an empty actions container that components can render into
-   */
-  withActions(): this {
-    this.state.hasActions = true;
+  icon(value: string): this {
+    this.state.icon = value;
     return this;
   }
 
-  /* -------------------------
-   * Render
-   * ------------------------- */
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
 
   render(targetId?: string): this {
-    let container: HTMLElement;
-
-    if (targetId) {
-      const target = document.querySelector(targetId);
-      if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`Card: Target element "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
+    const container = this._setupContainer(targetId);
 
-    this.container = container;
-    const { title, subtitle, content, image, variant, style, class: className, hasActions } = this.state;
+    const { title, content, footer, variant, hoverable, icon, style, class: className } = this.state;
 
-    // Create card element
     const card = document.createElement('div');
     card.className = `jux-card jux-card-${variant}`;
     card.id = this._id;
+    if (hoverable) card.classList.add('jux-card-hoverable');
+    if (className) card.className += ` ${className}`;
+    if (style) card.setAttribute('style', style);
+
+    if (title || icon) {
+      const header = document.createElement('div');
+      header.className = 'jux-card-header';
+
+      if (icon) {
+        const iconEl = document.createElement('span');
+        iconEl.className = 'jux-card-icon';
+        iconEl.appendChild(renderIcon(icon));
+        header.appendChild(iconEl);
+      }
 
-    if (className) {
-      card.className += ` ${className}`;
-    }
-
-    if (style) {
-      card.setAttribute('style', style);
-    }
-
-    // Image
-    if (image) {
-      const img = document.createElement('img');
-      img.className = 'jux-card-image';
-      img.src = image;
-      img.alt = title || 'Card image';
-      card.appendChild(img);
-    }
-
-    // Content wrapper
-    const cardBody = document.createElement('div');
-    cardBody.className = 'jux-card-body';
+      if (title) {
+        const titleEl = document.createElement('span');
+        titleEl.className = 'jux-card-title';
+        titleEl.textContent = title;
+        header.appendChild(titleEl);
+      }
 
-    // Title
-    if (title) {
-      const titleEl = document.createElement('h3');
-      titleEl.className = 'jux-card-title';
-      titleEl.textContent = title;
-      cardBody.appendChild(titleEl);
+      card.appendChild(header);
     }
 
-    // Subtitle
-    if (subtitle) {
-      const subtitleEl = document.createElement('p');
-      subtitleEl.className = 'jux-card-subtitle';
-      subtitleEl.textContent = subtitle;
-      cardBody.appendChild(subtitleEl);
-    }
+    const body = document.createElement('div');
+    body.className = 'jux-card-body';
+    body.innerHTML = content;
+    card.appendChild(body);
 
-    // Content
-    if (content) {
-      const contentEl = document.createElement('p');
-      contentEl.className = 'jux-card-content';
-      contentEl.textContent = content;
-      cardBody.appendChild(contentEl);
+    if (footer) {
+      const footerEl = document.createElement('div');
+      footerEl.className = 'jux-card-footer';
+      footerEl.innerHTML = footer;
+      card.appendChild(footerEl);
     }
 
-    card.appendChild(cardBody);
-
-    // Actions region (empty container for user to populate)
-    if (hasActions) {
-      const actionsEl = document.createElement('div');
-      actionsEl.className = 'jux-card-actions';
-      actionsEl.id = `${this._id}-actions`;
-      card.appendChild(actionsEl);
-    }
+    this._wireStandardEvents(card);
+
+    // Wire sync bindings
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'title') {
+        const transform = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          const header = card.querySelector('.jux-card-header');
+          if (header) {
+            header.textContent = transformed;
+          }
+          this.state.title = transformed;
+        });
+      }
+      else if (property === 'content') {
+        const transform = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          body.innerHTML = transformed;
+          this.state.content = transformed;
+        });
+      }
+      else if (property === 'footer') {
+        const transform = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          const footerEl = card.querySelector('.jux-card-footer');
+          if (footerEl) {
+            footerEl.innerHTML = transformed;
+          }
+          this.state.footer = transformed;
+        });
+      }
+    });
 
     container.appendChild(card);
     return this;
   }
-
-  /**
-   * Render to another Jux component's container
-   */
-  renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Card.renderTo: Invalid component - not an object');
-    }
-
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Card.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
-
-    return this.render(`#${juxComponent._id}`);
-  }
 }
 
-/**
- * Factory helper
- */
 export function card(id: string, options: CardOptions = {}): Card {
   return new Card(id, options);
 }

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);
+}