juxscript 1.0.2 → 1.0.4

package/lib/components/container.ts

@@ -1,184 +1,124 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
+import { getOrCreateContainer } from './helpers.js';
 
 /**
  * Container options
  */
 export interface ContainerOptions {
-  direction?: 'horizontal' | 'vertical';
-  layout?: 'flex' | 'grid' | 'responsive';
-  minWidth?: string;
-  gap?: string;
-  justify?: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
-  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
-  wrap?: boolean;
-  children?: any[];
+  class?: string;
+  style?: string;
+  direction?: 'row' | 'column';
+  gap?: string | number;
+  align?: 'start' | 'center' | 'end' | 'stretch';
+  justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
 }
 
 /**
  * Container state
  */
 type ContainerState = {
-  direction: string;
-  layout: string;
-  minWidth: string;
-  gap: string;
-  justify: string;
-  align: string;
-  wrap: boolean;
-  children: any[];
+  class: string;
+  style: string;
+  direction?: 'row' | 'column';
+  gap?: string | number;
+  align?: string;
+  justify?: string;
 };
 
 /**
- * Container component - creates a flex or grid container for organizing child components
+ * Container component - a simple div container for grouping elements
  * 
  * Usage:
- *   const container = jux.container('myContainer', { 
- *     layout: 'flex',
- *     direction: 'vertical',
- *     justify: 'space-between',
- *     align: 'center'
- *   });
- *   container.add(component1);
- *   container.add([component2, component3]);
- *   await container.render();
+ *   // Plain container
+ *   jux.container('wrapper').render('#app');
  * 
- * FLEX Layout Options:
- *   - layout: 'flex' (default)
- *   - direction: 'vertical' | 'horizontal' (default: 'vertical')
- *   - justify: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' (default: 'start')
- *   - align: 'start' | 'end' | 'center' | 'stretch' | 'baseline' (default: 'stretch')
- *   - wrap: boolean (default: false)
- *   - gap: string (default: '16px')
- * 
- * GRID Layout Options:
- *   - layout: 'grid'
- *   - minWidth: string - for auto-fit (default: '250px')
- *   - gap: string (default: '16px')
- *   - align: 'start' | 'end' | 'center' | 'stretch' (default: 'stretch')
- *   - justify: 'start' | 'end' | 'center' | 'stretch' (default: 'stretch')
+ *   // Flex container with layout
+ *   jux.container('toolbar')
+ *     .direction('row')
+ *     .gap(16)
+ *     .render('#app');
  */
-export class Container extends Reactive {
-  state!: ContainerState;
+export class Container {
+  state: ContainerState;
   container: HTMLElement | null = null;
-
-  constructor(componentId: string, options: ContainerOptions = {}) {
-    super();
-    this._setComponentId(componentId);
-    
-    this.state = this._createReactiveState({
-      direction: options.direction ?? 'vertical',
-      layout: options.layout ?? 'flex',
-      minWidth: options.minWidth ?? '250px',
-      gap: options.gap ?? '16px',
-      justify: options.justify ?? 'start',
-      align: options.align ?? 'stretch',
-      wrap: options.wrap ?? false,
-      children: Array.isArray(options.children) ? [...options.children] : []
-    }) as ContainerState;
+  _id: string;
+  id: string;
+
+  constructor(id: string, options: ContainerOptions = {}) {
+    this._id = id;
+    this.id = id;
+
+    this.state = {
+      class: options.class ?? '',
+      style: options.style ?? '',
+      direction: options.direction,
+      gap: options.gap,
+      align: options.align,
+      justify: options.justify
+    };
   }
 
   /* -------------------------
    * Fluent API
    * ------------------------- */
 
-  direction(value: 'horizontal' | 'vertical'): this {
-    this.state.direction = value;
+  class(value: string): this {
+    this.state.class = value;
     return this;
   }
 
-  layout(value: 'flex' | 'grid' | 'responsive'): this {
-    this.state.layout = value;
+  style(value: string): this {
+    this.state.style = value;
     return this;
   }
 
-  minWidth(value: string): this {
-    this.state.minWidth = value;
+  /**
+   * Set flex direction (row = horizontal, column = vertical)
+   * Automatically enables flexbox when called
+   */
+  direction(value: 'row' | 'column'): this {
+    this.state.direction = value;
     return this;
   }
 
-  gap(value: string): this {
+  /**
+   * Set gap between children
+   * Automatically enables flexbox when called
+   * @param value - Gap size (number = px, string = any CSS unit)
+   */
+  gap(value: string | number): this {
     this.state.gap = value;
     return this;
   }
 
-  justify(value: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'): this {
-    this.state.justify = value;
-    return this;
-  }
-
-  align(value: 'start' | 'end' | 'center' | 'stretch' | 'baseline'): this {
+  /**
+   * Set alignment of children along cross axis
+   * Automatically enables flexbox when called
+   */
+  align(value: 'start' | 'center' | 'end' | 'stretch'): this {
     this.state.align = value;
     return this;
   }
 
-  wrap(value: boolean): this {
-    this.state.wrap = value;
-    return this;
-  }
-
-  /* -------------------------
-   * Add children
-   * ------------------------- */
-
-  add(component: any | any[]): this {
-    if (Array.isArray(component)) {
-      this.state.children.push(...component);
-    } else {
-      this.state.children.push(component);
-    }
+  /**
+   * Set justification of children along main axis
+   * Automatically enables flexbox when called
+   */
+  justify(value: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'): this {
+    this.state.justify = value;
     return this;
   }
 
-  /* -------------------------
-   * Layout styles
-   * ------------------------- */
-
-  private _applyFlexStyles(containerEl: HTMLElement): void {
-    const { direction, gap, justify, align, wrap } = this.state;
-    containerEl.style.cssText = `
-      display: flex;
-      flex-direction: ${direction === 'horizontal' ? 'row' : 'column'};
-      justify-content: ${justify};
-      align-items: ${align};
-      flex-wrap: ${wrap ? 'wrap' : 'nowrap'};
-      gap: ${gap};
-    `;
-  }
-
-  private _applyGridStyles(containerEl: HTMLElement): void {
-    const { minWidth, gap, direction } = this.state;
-    
-    if (direction === 'horizontal') {
-      // For horizontal grid, use auto-fit columns
-      containerEl.style.cssText = `
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(${minWidth}, 1fr));
-        gap: ${gap};
-      `;
-    } else {
-      // For vertical grid, stack rows
-      containerEl.style.cssText = `
-        display: grid;
-        grid-template-columns: 1fr;
-        grid-auto-rows: auto;
-        gap: ${gap};
-      `;
-    }
-  }
-
   /* -------------------------
    * Render
    * ------------------------- */
 
-  async render(targetId?: string | HTMLElement): Promise<this> {
+  render(targetId?: string | HTMLElement): this {
     let container: HTMLElement;
-    
+
     if (targetId) {
-      // If targetId is an HTMLElement (passed from parent container), use it directly
       if (targetId instanceof HTMLElement) {
         container = targetId;
       } else {
-        // Otherwise query for it
         const target = document.querySelector(targetId);
         if (!target || !(target instanceof HTMLElement)) {
           throw new Error(`Container: Target element "${targetId}" not found`);
@@ -186,97 +126,53 @@ export class Container extends Reactive {
         container = target;
       }
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
-    
+
     this.container = container;
-    const { layout, children } = this.state;
-    
-    container.innerHTML = '';
-    container.className = 'jux-container';
-    container.id = this._componentId;
-    
-    // Apply layout-specific styles
-    if (layout === 'grid') {
-      this._applyGridStyles(container);
-    } else {
-      this._applyFlexStyles(container);
-    }
-    
-    // Render children
-    for (let i = 0; i < children.length; i++) {
-      const child = children[i];
-      if (!child) continue;
-      
-      // Handle string children
-      if (typeof child === 'string') {
-        const textWrapper = document.createElement('div');
-        textWrapper.className = 'jux-container-item';
-        textWrapper.style.cssText = 'padding: 1rem; display: flex; align-items: center; justify-content: center; font-weight: bold;';
-        textWrapper.textContent = child;
-        container.appendChild(textWrapper);
-        continue;
-      }
-      
-      // Get child ID
-      let childId: string | null = null;
-      if ((child as any).id) {
-        childId = (child as any).id;
-      } else if ((child as any)._componentId) {
-        childId = (child as any)._componentId;
-      } else {
-        childId = `${this._componentId}-child-${i}`;
-      }
-      
-      // Create wrapper for child
-      const childWrapper = document.createElement('div');
-      childWrapper.className = 'jux-container-item';
-      childWrapper.id = `${childId}-wrapper`;
-      container.appendChild(childWrapper);
-      
-      // Render child INTO the wrapper (not to its own container)
-      if (typeof (child as any).render === 'function') {
-        try {
-          // Pass the wrapper element directly, not a selector
-          const result = (child as any).render(childWrapper);
-          if (result && typeof (result as any).then === 'function') {
-            await result;
-          }
-        } catch (err) {
-          console.error(`Container: Error rendering child ${i}:`, err);
-          childWrapper.innerHTML = `<div style="color: #ff6b6b; padding: 1rem;">Error: ${(err as Error).message}</div>`;
-        }
-      } else {
-        // If no render method, try to append directly
-        if (child instanceof HTMLElement) {
-          childWrapper.appendChild(child);
-        }
+    const { class: className, style, direction, gap, align, justify } = this.state;
+
+    const div = document.createElement('div');
+    div.id = this._id;
+
+    // Always include jux-container class, append custom classes
+    div.className = className ? `jux-container ${className}` : 'jux-container';
+
+    // Only apply flex styles if any flex properties are set
+    const usesFlexbox = direction || gap !== undefined || align || justify;
+
+    let computedStyle = style;
+
+    if (usesFlexbox) {
+      const flexStyles: string[] = ['display: flex', 'width: max-content'];
+
+      if (direction) flexStyles.push(`flex-direction: ${direction}`);
+
+      if (gap !== undefined) {
+        const gapValue = typeof gap === 'number' ? `${gap}px` : gap;
+        flexStyles.push(`gap: ${gapValue}`);
       }
-    }
-    
-    this.emit('rendered');
-    return this;
-  }
+      // Only set align-items if explicitly specified
+      if (align) flexStyles.push(`align-items: ${align}`);
+      // Only set justify-content if explicitly specified
+      if (justify) flexStyles.push(`justify-content: ${justify}`);
 
-  /**
-   * Render to another Jux component's container
-   */
-  async renderTo(juxComponent: any): Promise<this> {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Container.renderTo: Invalid component - not an object');
+      computedStyle = `${flexStyles.join('; ')}; ${style}`.trim();
     }
-    
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('Container.renderTo: Invalid component - missing _componentId (not a Jux component)');
+
+    if (computedStyle) {
+      div.setAttribute('style', computedStyle);
     }
-    
-    return this.render(`#${juxComponent._componentId}`);
+
+    container.appendChild(div);
+
+    return this;
   }
 }
 
 /**
  * Factory helper
  */
-export function container(componentId: string, options: ContainerOptions = {}): Container {
-  return new Container(componentId, options);
+export function container(id: string, options: ContainerOptions = {}): Container {
+  return new Container(id, options);
 }

package/lib/components/data.ts

@@ -1,8 +1,6 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
-
 /**
  * Data component - SQL query execution
- * Note: No componentId needed - this is a data-only component
+ * Note: No id needed - this is a data-only component
  *
  * Usage:
  *   const posts = jux.data('SELECT * FROM posts WHERE id = ?', [1]);

package/lib/components/datepicker.ts

@@ -0,0 +1,226 @@
+import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
+
+/**
+ * DatePicker component options
+ */
+export interface DatePickerOptions {
+    value?: string;
+    min?: string;
+    max?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    name?: string;
+    onChange?: (value: string) => void;
+    style?: string;
+    class?: string;
+}
+
+/**
+ * DatePicker component state
+ */
+type DatePickerState = {
+    value: string;
+    min: string;
+    max: string;
+    placeholder: string;
+    disabled: boolean;
+    name: string;
+    style: string;
+    class: string;
+};
+
+/**
+ * DatePicker component - Calendar input
+ * 
+ * Usage:
+ *   jux.datepicker('start-date', {
+ *     placeholder: 'Select date',
+ *     value: '2024-01-15',
+ *     onChange: (date) => console.log(date)
+ *   }).render('#form');
+ * 
+ *   // Two-way binding
+ *   const dateState = state('2024-01-15');
+ *   jux.datepicker('date').bind(dateState).render('#form');
+ */
+export class DatePicker {
+    state: DatePickerState;
+    container: HTMLElement | null = null;
+    _id: string;
+    id: string;
+    private _onChange?: (value: string) => void;
+    private _boundState?: State<string>;
+
+    constructor(id: string, options: DatePickerOptions = {}) {
+        this._id = id;
+        this.id = id;
+        this._onChange = options.onChange;
+
+        this.state = {
+            value: options.value ?? '',
+            min: options.min ?? '',
+            max: options.max ?? '',
+            placeholder: options.placeholder ?? 'Select date',
+            disabled: options.disabled ?? false,
+            name: options.name ?? id,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        };
+    }
+
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
+    value(value: string): this {
+        this.state.value = value;
+        this._updateElement();
+        return this;
+    }
+
+    min(value: string): this {
+        this.state.min = value;
+        return this;
+    }
+
+    max(value: string): this {
+        this.state.max = value;
+        return this;
+    }
+
+    placeholder(value: string): this {
+        this.state.placeholder = value;
+        return this;
+    }
+
+    disabled(value: boolean): this {
+        this.state.disabled = value;
+        this._updateElement();
+        return this;
+    }
+
+    name(value: string): this {
+        this.state.name = value;
+        return this;
+    }
+
+    style(value: string): this {
+        this.state.style = value;
+        return this;
+    }
+
+    class(value: string): this {
+        this.state.class = value;
+        return this;
+    }
+
+    onChange(handler: (value: string) => void): this {
+        this._onChange = handler;
+        return this;
+    }
+
+    /**
+     * Two-way binding to state
+     */
+    bind(stateObj: State<string>): this {
+        this._boundState = stateObj;
+
+        stateObj.subscribe((val) => {
+            this.state.value = val;
+            this._updateElement();
+        });
+
+        this.onChange((value) => stateObj.set(value));
+
+        return this;
+    }
+
+    /* -------------------------
+     * Helpers
+     * ------------------------- */
+
+    private _updateElement(): void {
+        const input = document.getElementById(`${this._id}-input`) as HTMLInputElement;
+        if (input) {
+            input.value = this.state.value;
+            input.disabled = this.state.disabled;
+        }
+    }
+
+    getValue(): string {
+        return this.state.value;
+    }
+
+    getDate(): Date | null {
+        return this.state.value ? new Date(this.state.value) : null;
+    }
+
+    /* -------------------------
+     * Render
+     * ------------------------- */
+
+    render(targetId?: string): this {
+        let container: HTMLElement;
+
+        if (targetId) {
+            const target = document.querySelector(targetId);
+            if (!target || !(target instanceof HTMLElement)) {
+                throw new Error(`DatePicker: Target element "${targetId}" not found`);
+            }
+            container = target;
+        } else {
+            container = getOrCreateContainer(this._id);
+        }
+
+        this.container = container;
+        const { value, min, max, placeholder, disabled, name, style, class: className } = this.state;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-datepicker';
+        wrapper.id = this._id;
+
+        if (className) {
+            wrapper.className += ` ${className}`;
+        }
+
+        if (style) {
+            wrapper.setAttribute('style', style);
+        }
+
+        const input = document.createElement('input');
+        input.type = 'date';
+        input.className = 'jux-datepicker-input';
+        input.id = `${this._id}-input`;
+        input.name = name;
+        input.value = value;
+        input.disabled = disabled;
+
+        if (min) input.min = min;
+        if (max) input.max = max;
+        if (placeholder) input.setAttribute('placeholder', placeholder);
+
+        input.addEventListener('change', (e) => {
+            const target = e.target as HTMLInputElement;
+            this.state.value = target.value;
+            if (this._onChange) {
+                this._onChange(target.value);
+            }
+        });
+
+        wrapper.appendChild(input);
+        container.appendChild(wrapper);
+        return this;
+    }
+
+    renderTo(juxComponent: any): this {
+        if (!juxComponent?._id) {
+            throw new Error('DatePicker.renderTo: Invalid component');
+        }
+        return this.render(`#${juxComponent._id}`);
+    }
+}
+
+export function datepicker(id: string, options: DatePickerOptions = {}): DatePicker {
+    return new DatePicker(id, options);
+}