mtrl 0.1.2 → 0.2.0

package/src/core/compose/features/textinput.ts

@@ -0,0 +1,225 @@
+// src/core/compose/features/textinput.ts
+
+import { BaseComponent, ElementComponent } from '../component';
+
+/**
+ * Configuration for text input feature
+ */
+export interface TextInputConfig {
+  /**
+   * Input type (text, password, etc.)
+   */
+  type?: string;
+  
+  /**
+   * Whether to use textarea instead of input
+   */
+  multiline?: boolean;
+  
+  /**
+   * Input name attribute
+   */
+  name?: string;
+  
+  /**
+   * Whether input is required
+   */
+  required?: boolean;
+  
+  /**
+   * Whether input is disabled
+   */
+  disabled?: boolean;
+  
+  /**
+   * Maximum allowed length
+   */
+  maxLength?: number;
+  
+  /**
+   * Input validation pattern
+   */
+  pattern?: string;
+  
+  /**
+   * Autocomplete setting
+   */
+  autocomplete?: string;
+  
+  /**
+   * Initial input value
+   */
+  value?: string;
+  
+  [key: string]: any;
+}
+
+/**
+ * Component with text input capabilities
+ */
+export interface TextInputComponent extends ElementComponent {
+  /**
+   * Input element
+   */
+  input: HTMLInputElement | HTMLTextAreaElement;
+  
+  /**
+   * Sets the input value
+   * @param value - Value to set
+   * @returns Component instance for chaining
+   */
+  setValue: (value: string) => TextInputComponent;
+  
+  /**
+   * Gets the current input value
+   * @returns Current value
+   */
+  getValue: () => string;
+  
+  /**
+   * Sets an attribute on the input
+   * @param name - Attribute name
+   * @param value - Attribute value
+   * @returns Component instance for chaining
+   */
+  setAttribute: (name: string, value: string) => TextInputComponent;
+  
+  /**
+   * Gets an attribute from the input
+   * @param name - Attribute name
+   * @returns Attribute value
+   */
+  getAttribute: (name: string) => string | null;
+  
+  /**
+   * Removes an attribute from the input
+   * @param name - Attribute name
+   * @returns Component instance for chaining
+   */
+  removeAttribute: (name: string) => TextInputComponent;
+  
+  /**
+   * Event emission method if available
+   */
+  emit?: (event: string, data: any) => TextInputComponent;
+}
+
+/**
+ * Enhances a component with text input functionality
+ * 
+ * @param config - Text input configuration
+ * @returns Function that enhances a component with text input capabilities
+ */
+export const withTextInput = <T extends TextInputConfig>(config: T = {} as T) => 
+  <C extends ElementComponent>(component: C): C & TextInputComponent => {
+    const input = document.createElement(config.multiline ? 'textarea' : 'input') as 
+      HTMLInputElement | HTMLTextAreaElement;
+    
+    input.className = `${component.getClass('textfield')}-input`;
+
+    // Set input attributes
+    const attributes: Record<string, string | number | boolean | undefined> = {
+      type: config.multiline ? undefined : (config.type || 'text'),
+      name: config.name,
+      required: config.required,
+      disabled: config.disabled,
+      maxLength: config.maxLength,
+      pattern: config.pattern,
+      autocomplete: config.autocomplete,
+      value: config.value || ''
+    };
+
+    Object.entries(attributes).forEach(([key, value]) => {
+      if (value !== null && value !== undefined) {
+        if (typeof value === 'boolean') {
+          if (value) {
+            input.setAttribute(key, '');
+          }
+        } else {
+          input.setAttribute(key, String(value));
+        }
+      }
+    });
+
+    // Handle input state changes
+    const updateInputState = (): boolean => {
+      const isEmpty = !input.value;
+      component.element.classList.toggle(`${component.getClass('textfield')}--empty`, isEmpty);
+      return isEmpty;
+    };
+
+    // Detect autofill using input events instead of animation
+    // This is more compatible with our testing environment
+    const handleAutofill = (): void => {
+      // Check for webkit autofill background
+      const isAutofilled =
+        input.matches(':-webkit-autofill') ||
+        // For Firefox and other browsers
+        (window.getComputedStyle(input).backgroundColor === 'rgb(250, 255, 189)' ||
+         window.getComputedStyle(input).backgroundColor === 'rgb(232, 240, 254)');
+
+      if (isAutofilled) {
+        component.element.classList.remove(`${component.getClass('textfield')}--empty`);
+        component.emit?.('input', { value: input.value, isEmpty: false, isAutofilled: true });
+      }
+    };
+
+    // Event listeners
+    input.addEventListener('focus', () => {
+      component.element.classList.add(`${component.getClass('textfield')}--focused`);
+      component.emit?.('focus', { isEmpty: updateInputState() });
+      // Also check for autofill on focus
+      setTimeout(handleAutofill, 100);
+    });
+
+    input.addEventListener('blur', () => {
+      component.element.classList.remove(`${component.getClass('textfield')}--focused`);
+      component.emit?.('blur', { isEmpty: updateInputState() });
+    });
+
+    input.addEventListener('input', () => {
+      component.emit?.('input', {
+        value: input.value,
+        isEmpty: updateInputState(),
+        isAutofilled: false
+      });
+    });
+
+    // Initial state
+    updateInputState();
+
+    component.element.appendChild(input);
+
+    // Cleanup
+    if ('lifecycle' in component && component.lifecycle?.destroy) {
+      const originalDestroy = component.lifecycle.destroy;
+      component.lifecycle.destroy = () => {
+        input.remove();
+        originalDestroy.call(component.lifecycle);
+      };
+    }
+
+    return {
+      ...component,
+      input,
+      setValue(value: string) {
+        input.value = value || '';
+        updateInputState();
+        return this;
+      },
+      getValue() {
+        return input.value;
+      },
+      setAttribute(name: string, value: string) {
+        input.setAttribute(name, value);
+        return this;
+      },
+      getAttribute(name: string) {
+        return input.getAttribute(name);
+      },
+      removeAttribute(name: string) {
+        input.removeAttribute(name);
+        return this;
+      }
+    };
+  };

package/src/core/compose/features/textlabel.ts

@@ -0,0 +1,92 @@
+// src/core/compose/features/textlabel.ts
+
+import { BaseComponent, ElementComponent } from '../component';
+
+/**
+ * Configuration for text label feature
+ */
+export interface TextLabelConfig {
+  /**
+   * Label text
+   */
+  label?: string;
+  
+  /**
+   * CSS class prefix
+   */
+  prefix?: string;
+  
+  /**
+   * Component name for class generation
+   */
+  componentName?: string;
+  
+  [key: string]: any;
+}
+
+/**
+ * Label manager interface
+ */
+export interface LabelManager {
+  /**
+   * Sets the label text
+   * @param text - Text to set
+   * @returns LabelManager instance for chaining
+   */
+  setText: (text: string) => LabelManager;
+  
+  /**
+   * Gets the current label text
+   * @returns Current text
+   */
+  getText: () => string;
+  
+  /**
+   * Gets the label element
+   * @returns Label element
+   */
+  getElement: () => HTMLElement;
+}
+
+/**
+ * Component with label capabilities
+ */
+export interface LabelComponent extends BaseComponent {
+  label: LabelManager;
+}
+
+/**
+ * Adds a text label to a component
+ * 
+ * @param config - Configuration object containing label information
+ * @returns Function that enhances a component with a label
+ */
+export const withTextLabel = <T extends TextLabelConfig>(config: T = {} as T) => 
+  <C extends ElementComponent>(component: C): C & LabelComponent => {
+    if (!config.label) return component as C & LabelComponent;
+
+    const labelElement = document.createElement('label');
+    labelElement.className = `${config.prefix}-${config.componentName}-label`;
+    labelElement.textContent = config.label;
+
+    // Insert label after input for proper z-index stacking
+    component.element.appendChild(labelElement);
+
+    const label: LabelManager = {
+      setText(text: string) {
+        labelElement.textContent = text;
+        return this;
+      },
+      getText() {
+        return labelElement.textContent || '';
+      },
+      getElement() {
+        return labelElement;
+      }
+    };
+
+    return {
+      ...component,
+      label
+    };
+  };

package/src/core/compose/features/track.ts

@@ -0,0 +1,84 @@
+// src/core/compose/features/track.ts
+/**
+ * @module core/compose/features
+ */
+
+import { BaseComponent, ElementComponent } from '../component';
+
+/**
+ * Configuration for track feature
+ */
+export interface TrackConfig {
+  /**
+   * CSS class prefix
+   */
+  prefix: string;
+  
+  /**
+   * Component name for class generation
+   */
+  componentName: string;
+  
+  /**
+   * Custom icon HTML or 'none'
+   */
+  icon?: string;
+  
+  [key: string]: any;
+}
+
+/**
+ * Component with track and thumb elements
+ */
+export interface TrackComponent extends BaseComponent {
+  /**
+   * Track element
+   */
+  track: HTMLElement;
+  
+  /**
+   * Thumb element
+   */
+  thumb: HTMLElement;
+}
+
+/**
+ * Default checkmark icon SVG
+ * @private
+ */
+const DEFAULT_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="20 6 9 17 4 12"></polyline>
+</svg>`;
+
+/**
+ * Adds track and thumb elements to a component
+ * 
+ * @param config - Track configuration
+ * @returns Function that enhances a component with track and thumb elements
+ */
+export const withTrack = <T extends TrackConfig>(config: T) => 
+  <C extends ElementComponent>(component: C): C & TrackComponent => {
+    const track = document.createElement('span');
+    track.className = `${config.prefix}-${config.componentName}-track`;
+
+    const thumb = document.createElement('span');
+    thumb.className = `${config.prefix}-${config.componentName}-thumb`;
+    track.appendChild(thumb);
+
+    // Add icon inside thumb if provided or use default
+    if (config.icon !== 'none') {
+      const icon = document.createElement('span');
+      icon.className = `${config.prefix}-${config.componentName}-thumb-icon`;
+      icon.innerHTML = config.icon || DEFAULT_ICON;
+      thumb.appendChild(icon);
+    }
+
+    component.element.appendChild(track);
+
+    return {
+      ...component,
+      track,
+      thumb
+    };
+  };

package/src/core/compose/features/variant.ts

@@ -0,0 +1,29 @@
+// src/core/compose/features/variant.ts
+
+import { BaseComponent, ElementComponent } from '../component';
+
+/**
+ * Configuration for variant feature
+ */
+export interface VariantConfig {
+  variant?: string;
+  prefix?: string;
+  componentName?: string;
+  [key: string]: any;
+}
+
+/**
+ * Adds a variant class to a component
+ * 
+ * @param config - Configuration object containing variant information
+ * @returns Function that enhances a component with the variant class
+ */
+export const withVariant = <T extends VariantConfig>(config: T) => 
+  <C extends ElementComponent>(component: C): C => {
+    if (config.variant && component.element) {
+      // Use config.componentName since we know it's there
+      const className = `${config.prefix}-${config.componentName}--${config.variant}`;
+      component.element.classList.add(className);
+    }
+    return component;
+  };

package/src/core/compose/features/withEvents.ts

@@ -0,0 +1,137 @@
+// src/core/compose/features/withEvents.ts
+
+import { createEventManager } from '../../state/events';
+import { BaseComponent, ElementComponent } from '../component';
+
+/**
+ * Event manager interface
+ */
+export interface EnhancedEventManager {
+  /**
+   * Add an event listener
+   */
+  on: (event: string, handler: Function) => EnhancedEventManager;
+  
+  /**
+   * Remove an event listener
+   */
+  off: (event: string, handler: Function) => EnhancedEventManager;
+  
+  /**
+   * Add multiple event listeners at once
+   */
+  addListeners: (listeners: Record<string, Function>) => EnhancedEventManager;
+  
+  /**
+   * Remove multiple event listeners at once
+   */
+  removeListeners: (listeners: Record<string, Function>) => EnhancedEventManager;
+  
+  /**
+   * One-time event handler
+   */
+  once: (event: string, handler: Function) => EnhancedEventManager;
+  
+  /**
+   * Clean up all event listeners
+   */
+  destroy: () => void;
+}
+
+/**
+ * Component with enhanced event capabilities
+ */
+export interface EnhancedEventComponent extends BaseComponent {
+  events: EnhancedEventManager;
+  on: (event: string, handler: Function) => EnhancedEventComponent;
+  off: (event: string, handler: Function) => EnhancedEventComponent;
+}
+
+/**
+ * Adds enhanced event handling capabilities to a component
+ * 
+ * @param target - Optional custom event target
+ * @returns Function that enhances a component with event capabilities
+ */
+export const withEvents = (target?: HTMLElement) => 
+  <C extends ElementComponent>(component: C): C & EnhancedEventComponent => {
+    const events = createEventManager(target || component.element);
+
+    // Enhanced event methods
+    const enhancedEvents: EnhancedEventManager = {
+      /**
+       * Add multiple event listeners at once
+       * @param listeners - Map of event types to handlers
+       */
+      addListeners(listeners: Record<string, Function>) {
+        Object.entries(listeners).forEach(([event, handler]) => {
+          events.on(event, handler as any);
+        });
+        return this;
+      },
+
+      /**
+       * Remove multiple event listeners at once
+       * @param listeners - Map of event types to handlers
+       */
+      removeListeners(listeners: Record<string, Function>) {
+        Object.entries(listeners).forEach(([event, handler]) => {
+          events.off(event, handler as any);
+        });
+        return this;
+      },
+
+      /**
+       * One-time event handler
+       * @param event - Event name
+       * @param handler - Event handler
+       */
+      once(event: string, handler: Function) {
+        const wrappedHandler = (e: Event) => {
+          handler(e);
+          events.off(event, wrappedHandler as any);
+        };
+        events.on(event, wrappedHandler as any);
+        return this;
+      },
+
+      /**
+       * Add an event listener
+       */
+      on(event: string, handler: Function) {
+        events.on(event, handler as any);
+        return this;
+      },
+
+      /**
+       * Remove an event listener
+       */
+      off(event: string, handler: Function) {
+        events.off(event, handler as any);
+        return this;
+      },
+
+      /**
+       * Clean up all event listeners
+       */
+      destroy() {
+        events.destroy();
+      }
+    };
+
+    // Add lifecycle integration
+    if ('lifecycle' in component && component.lifecycle?.destroy) {
+      const originalDestroy = component.lifecycle.destroy;
+      component.lifecycle.destroy = () => {
+        events.destroy();
+        originalDestroy.call(component.lifecycle);
+      };
+    }
+
+    return {
+      ...component,
+      events: enhancedEvents,
+      on: enhancedEvents.on.bind(enhancedEvents),
+      off: enhancedEvents.off.bind(enhancedEvents)
+    };
+  };

package/src/core/compose/index.ts

@@ -0,0 +1,54 @@
+// src/core/compose/index.ts
+/**
+ * @module core/compose
+ * @description Core composition utilities for creating and combining components
+ */
+
+export { pipe, compose, transform } from './pipe';
+export { createComponent } from './base';
+export { createBase, withElement } from './component';
+export {
+  withEvents,
+  withIcon,
+  withSize,
+  withPosition,
+  withText,
+  withVariant,
+  withDisabled,
+  withLifecycle,
+  withRipple,
+  withInput,
+  withCheckable,
+  withStyle,
+  withTextInput,
+  withTextLabel,
+  withTrack,
+  withEnhancedEvents
+} from './features';
+
+// Component feature interfaces
+export type { Component } from './base';
+export type { 
+  BaseComponent, 
+  ElementComponent, 
+  TouchState,
+  WithElementOptions
+} from './component';
+
+export type {
+  EventComponent,
+  TextComponent,
+  IconComponent,
+  LifecycleComponent,
+  Lifecycle,
+  DisabledComponent,
+  DisabledManager,
+  RippleComponent,
+  InputComponent,
+  CheckableComponent,
+  CheckableManager,
+  TextInputComponent,
+  LabelComponent,
+  TrackComponent,
+  EnhancedEventComponent
+} from './features';

package/src/core/compose/{pipe.js → pipe.ts}

@@ -1,6 +1,4 @@
-// @file src/core/compose/pipe.js
-// @module core/compose
-
+// src/core/compose/pipe.ts
 /**
  * @namespace compose
  * @description Core composition utilities for creating and combining components
@@ -21,7 +19,8 @@
  * const addOneThenDouble = pipe(addOne, double);
  * console.log(addOneThenDouble(3)); // Output: 8
  */
-export const pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x)
+export const pipe = <T>(...fns: Array<(arg: any) => any>) => 
+  (x: T): any => fns.reduce((v, f) => f(v), x);
 
 /**
  * Performs right-to-left function composition.
@@ -38,7 +37,8 @@ export const pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x)
  * const doubleTheAddOne = compose(addOne, double);
  * console.log(doubleTheAddOne(3)); // Output: 7
  */
-export const compose = (...fns) => (x) => fns.reduceRight((v, f) => f(v), x)
+export const compose = <T>(...fns: Array<(arg: any) => any>) => 
+  (x: T): any => fns.reduceRight((v, f) => f(v), x);
 
 /**
  * Creates a function that applies transformations to an object with shared context.
@@ -57,13 +57,18 @@ export const compose = (...fns) => (x) => fns.reduceRight((v, f) => f(v), x)
  * const person = createPerson({}, { name: 'John', age: 30 });
  * // Result: { name: 'John', age: 30 }
  */
-export const transform = (...transformers) => (obj, context = {}) =>
-  transformers.reduce((acc, transformer) => ({
-    ...acc,
-    ...transformer(acc, context)
-  }), obj)
+export const transform = <T, C = Record<string, any>>(
+  ...transformers: Array<(obj: T, context: C) => Partial<T>>
+) => (obj: T, context: C = {} as C): T => 
+  transformers.reduce(
+    (acc, transformer) => ({
+      ...acc,
+      ...transformer(acc, context)
+    }), 
+    obj
+  );
 
 /**
  * @typedef {Object} TransformContext
  * @property {any} [key] - Any contextual data needed by transformers
- */
+ */