mtrl 0.0.0

package/src/core/compose/features/input.js

@@ -0,0 +1,92 @@
+// src/core/compose/features/input.js
+
+/**
+ * Creates an input element and adds it to a component
+ * Handles both input creation and event emission for state changes
+ *
+ * @param {Object} config - Input configuration
+ * @param {string} [config.name] - Input name attribute
+ * @param {boolean} [config.checked] - Initial checked state
+ * @param {boolean} [config.required] - Whether input is required
+ * @param {boolean} [config.disabled] - Whether input is disabled
+ * @param {string} [config.value='on'] - Input value attribute
+ * @param {string} [config.label] - Accessibility label text
+ * @param {string} [config.ariaLabel] - Alternative accessibility label
+ *
+ * @returns {Function} Component transformer that adds input functionality
+ */
+export const withInput = (config = {}) => (component) => {
+  const input = document.createElement('input')
+  const name = component.componentName
+  input.type = 'checkbox'
+  input.className = `${component.getClass(name)}-input`
+
+  // Ensure input can receive focus
+  input.style.position = 'absolute'
+  input.style.opacity = '0'
+  input.style.cursor = 'pointer'
+  // Don't use display: none or visibility: hidden as they prevent focus
+
+  // The input itself should be focusable, not the wrapper
+  component.element.setAttribute('role', 'presentation')
+  input.setAttribute('role', name)
+
+  const attributes = {
+    name: config.name,
+    checked: config.checked,
+    required: config.required,
+    disabled: config.disabled,
+    value: config.value || 'on',
+    'aria-label': config.label || config.ariaLabel
+  }
+
+  Object.entries(attributes).forEach(([key, value]) => {
+    if (value !== null && value !== undefined) {
+      input.setAttribute(key, value)
+    }
+  })
+
+  // Bridge native checkbox events to our event system
+  input.addEventListener('change', (event) => {
+    component.emit('change', {
+      checked: input.checked,
+      value: input.value,
+      nativeEvent: event
+    })
+  })
+
+  // Add keyboard handling
+  input.addEventListener('keydown', (event) => {
+    if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault()
+      if (!input.disabled) {
+        input.checked = !input.checked
+        input.dispatchEvent(new Event('change', { bubbles: true }))
+      }
+    }
+  })
+
+  component.element.appendChild(input)
+
+  return {
+    ...component,
+    input,
+
+    /**
+     * Gets the current input value
+     * @returns {string} Current value
+     */
+    getValue: () => input.value,
+
+    /**
+     * Sets the input value and emits a value event
+     * @param {string} value - New value to set
+     * @returns {Object} Component instance
+     */
+    setValue (value) {
+      input.value = value
+      component.emit('value', { value })
+      return this
+    }
+  }
+}

package/src/core/compose/features/lifecycle.js

@@ -0,0 +1,69 @@
+// src/core/compose/features/withLifecycle.js
+import { createEmitter } from '../../state/emitter'
+
+export const withLifecycle = () => (component) => {
+  if (!component.element) return component
+
+  let mounted = false
+  const emitter = createEmitter()
+
+  return {
+    ...component,
+    lifecycle: {
+      // Mount/Unmount state management
+      onMount: (handler) => emitter.on('mount', handler),
+      onUnmount: (handler) => emitter.on('unmount', handler),
+
+      mount: () => {
+        if (!mounted) {
+          mounted = true
+          emitter.emit('mount')
+        }
+      },
+
+      unmount: () => {
+        if (mounted) {
+          mounted = false
+          emitter.emit('unmount')
+          emitter.clear()
+        }
+      },
+
+      isMounted: () => mounted,
+
+      // Cleanup and destruction
+      destroy () {
+        // First trigger unmount
+        if (mounted) {
+          this.unmount()
+        }
+
+        // Clean up all event listeners
+        if (component.events) {
+          component.events.destroy()
+        }
+
+        // Clean up text element
+        if (component.text) {
+          const textElement = component.text.getElement()
+          if (textElement) {
+            textElement.remove()
+          }
+        }
+
+        // Clean up icon element
+        if (component.icon) {
+          const iconElement = component.icon.getElement()
+          if (iconElement) {
+            iconElement.remove()
+          }
+        }
+
+        // Remove the main element
+        if (component.element) {
+          component.element.remove()
+        }
+      }
+    }
+  }
+}

package/src/core/compose/features/position.js

@@ -0,0 +1,60 @@
+// src/core/compose/features/position.js
+
+/**
+ * Available position values
+ */
+export const POSITIONS = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  TOP: 'top',
+  BOTTOM: 'bottom',
+  START: 'start',
+  END: 'end',
+  CENTER: 'center'
+}
+
+/**
+ * Adds positioning functionality to a component
+ * @param {Object} config - Component configuration
+ * @param {string} config.position - Position value
+ * @param {string} [config.prefix='mtrl'] - CSS class prefix
+ * @param {string} [config.componentName] - Component name for class generation
+ * @returns {Function} Component transformer
+ */
+export const withPosition = (config) => (component) => {
+  if (!config.position || !component.element) return component
+
+  const position = POSITIONS[config.position.toUpperCase()] || config.position
+  const className = `${config.prefix}-${config.componentName}--${position}`
+
+  component.element.classList.add(className)
+
+  return {
+    ...component,
+    position: {
+      /**
+       * Sets the component's position
+       * @param {string} newPosition - New position value
+       * @returns {Object} Component instance
+       */
+      setPosition (newPosition) {
+        const oldPosition = position
+        const oldClassName = `${config.prefix}-${config.componentName}--${oldPosition}`
+        const newClassName = `${config.prefix}-${config.componentName}--${newPosition}`
+
+        component.element.classList.remove(oldClassName)
+        component.element.classList.add(newClassName)
+
+        return this
+      },
+
+      /**
+       * Gets the current position
+       * @returns {string} Current position
+       */
+      getPosition () {
+        return position
+      }
+    }
+  }
+}

package/src/core/compose/features/ripple.js

@@ -0,0 +1,32 @@
+// src/core/compose/features/with-ripple.js
+
+import { createRipple } from '../../build/ripple'
+
+/**
+ * Higher-order function that adds ripple effect functionality
+ * @param {Object} config - Feature configuration
+ * @param {boolean} [config.ripple] - Enable/disable ripple effect
+ * @param {Object} [config.rippleConfig] - Ripple animation configuration
+ * @returns {Function} Component enhancer
+ */
+export const withRipple = (config = {}) => (component) => {
+  if (!config.ripple) return component
+
+  const rippleInstance = createRipple(config.rippleConfig)
+
+  return {
+    ...component,
+    ripple: rippleInstance,
+    lifecycle: {
+      ...component.lifecycle,
+      mount: () => {
+        component.lifecycle.mount()
+        rippleInstance.mount(component.element)
+      },
+      destroy: () => {
+        rippleInstance.unmount(component.element)
+        component.lifecycle.destroy()
+      }
+    }
+  }
+}

package/src/core/compose/features/size.js

@@ -0,0 +1,9 @@
+// src/core/compose/features/variant.js
+export const withSize = config => component => {
+  if (config.size && component.element) {
+    // Use config.componentName since we know it's there
+    const className = `${config.prefix}-${config.componentName}--${config.size}`
+    component.element.classList.add(className)
+  }
+  return component
+}

package/src/core/compose/features/style.js

@@ -0,0 +1,12 @@
+// src/core/compose/features/style.js
+export const withStyle = (config = {}) => (layout) => {
+  if (config.variant) {
+    layout.element.classList.add(`${layout.getClass('button')}--${config.variant}`)
+  }
+
+  if (config.size) {
+    layout.element.classList.add(`${layout.getClass('button')}--${config.size}`)
+  }
+
+  return layout
+}

package/src/core/compose/features/text.js

@@ -0,0 +1,17 @@
+import { createText } from '../../../core/build/text'
+
+export const withText = (config = {}) => (component) => {
+  const text = createText(component.element, {
+    prefix: config.prefix,
+    type: 'button'
+  })
+
+  if (config.text) {
+    text.setText(config.text)
+  }
+
+  return {
+    ...component,
+    text
+  }
+}

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

@@ -0,0 +1,118 @@
+// src/core/compose/features/textinput.js
+/**
+ * Enhances a component with text input functionality
+ * @param {Object} config - Text input configuration
+ * @param {string} [config.type] - Input type (text, password, etc.)
+ * @param {boolean} [config.multiline] - Whether to use textarea
+ * @returns {Function} Component enhancer
+ */
+export const withTextInput = (config = {}) => (component) => {
+  const input = document.createElement(config.type === 'multiline' ? 'textarea' : 'input')
+  input.className = `${component.getClass('textfield')}-input`
+
+  // Set input attributes
+  const attributes = {
+    type: config.type === 'multiline' ? null : (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) {
+      input.setAttribute(key, value)
+    }
+  })
+
+  // Handle input state changes
+  const updateInputState = () => {
+    const isEmpty = !input.value
+    component.element.classList.toggle(`${component.getClass('textfield')}--empty`, isEmpty)
+    return isEmpty
+  }
+
+  // Detect autocomplete
+  const handleAutocomplete = (event) => {
+    // Chrome/Safari trigger animationstart
+    if (event.animationName === 'onAutoFillStart') {
+      component.element.classList.remove(`${component.getClass('textfield')}--empty`)
+      component.emit('input', { value: input.value, isEmpty: false, isAutofilled: true })
+    }
+  }
+
+  // Add required animation for autocomplete detection
+  const style = document.createElement('style')
+  style.textContent = `
+    @keyframes onAutoFillStart { from {} to {} }
+    .${component.getClass('textfield')}-input:-webkit-autofill {
+      animation-name: onAutoFillStart;
+      animation-duration: 1ms;
+    }
+  `
+  document.head.appendChild(style)
+
+  // Event listeners
+  input.addEventListener('focus', () => {
+    component.element.classList.add(`${component.getClass('textfield')}--focused`)
+    component.emit('focus', { isEmpty: updateInputState() })
+  })
+
+  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
+    })
+  })
+
+  input.addEventListener('animationstart', handleAutocomplete)
+
+  // Initial state
+  updateInputState()
+
+  component.element.appendChild(input)
+
+  // Cleanup
+  if (component.lifecycle) {
+    const originalDestroy = component.lifecycle.destroy
+    component.lifecycle.destroy = () => {
+      input.removeEventListener('animationstart', handleAutocomplete)
+      style.remove()
+      input.remove()
+      originalDestroy.call(component.lifecycle)
+    }
+  }
+
+  return {
+    ...component,
+    input,
+    setValue (value) {
+      input.value = value || ''
+      updateInputState()
+      return this
+    },
+    getValue () {
+      return input.value
+    },
+    setAttribute (name, value) {
+      input.setAttribute(name, value)
+      return this
+    },
+    getAttribute (name) {
+      return input.getAttribute(name)
+    },
+    removeAttribute (name) {
+      input.removeAttribute(name)
+      return this
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+// src/core/compose/features/textlabel.js
+
+export const withTextLabel = (config = {}) => (component) => {
+  if (!config.label) return component
+
+  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)
+
+  return {
+    ...component,
+    label: {
+      setText (text) {
+        labelElement.textContent = text
+        return this
+      },
+      getText () {
+        return labelElement.textContent
+      },
+      getElement () {
+        return labelElement
+      }
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+// src/core/compose/features/track.js
+/**
+ * @module core/compose/features
+ */
+
+/**
+ * Default checkmark icon SVG
+ * @memberof module:core/compose/features
+ * @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
+ * @memberof module:core/compose/features
+ * @function withTrack
+ * @param {Object} config - Track configuration
+ * @param {string} config.prefix - Class prefix
+ * @param {string} config.componentName - Component name
+ * @param {string} [config.icon] - Custom icon HTML or 'none'
+ * @returns {Function} Component transformer
+ */
+export const withTrack = (config) => (component) => {
+  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.js

@@ -0,0 +1,9 @@
+// src/core/compose/features/variant.js
+export const withVariant = config => component => {
+  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.js

@@ -0,0 +1,67 @@
+// src/core/compose/features/withEvents.js
+import { createEventManager } from '../../state/events'
+
+/**
+ * Adds event handling capabilities to a component
+ * @param {HTMLElement} [target] - Optional custom event target
+ * @returns {Function} Component enhancer
+ */
+export const withEvents = (target) => (component) => {
+  const events = createEventManager(target || component.element)
+
+  // Enhanced event methods
+  const enhancedEvents = {
+    /**
+     * Add multiple event listeners at once
+     * @param {Object} listeners - Map of event types to handlers
+     */
+    addListeners (listeners) {
+      Object.entries(listeners).forEach(([event, handler]) => {
+        events.on(event, handler)
+      })
+      return this
+    },
+
+    /**
+     * Remove multiple event listeners at once
+     * @param {Object} listeners - Map of event types to handlers
+     */
+    removeListeners (listeners) {
+      Object.entries(listeners).forEach(([event, handler]) => {
+        events.off(event, handler)
+      })
+      return this
+    },
+
+    /**
+     * One-time event handler
+     * @param {string} event - Event name
+     * @param {Function} handler - Event handler
+     */
+    once (event, handler) {
+      const wrappedHandler = (e) => {
+        handler(e)
+        events.off(event, wrappedHandler)
+      }
+      events.on(event, wrappedHandler)
+      return this
+    }
+  }
+
+  // Add lifecycle integration
+  if (component.lifecycle) {
+    const originalDestroy = component.lifecycle.destroy
+    component.lifecycle.destroy = () => {
+      events.destroy()
+      originalDestroy?.call(component.lifecycle)
+    }
+  }
+
+  return {
+    ...component,
+    events,
+    on: events.on.bind(events),
+    off: events.off.bind(events),
+    ...enhancedEvents
+  }
+}

package/src/core/compose/index.js

@@ -0,0 +1,16 @@
+// src/core/compose/index.js
+/**
+ * @module core/compose
+ * @description Core composition utilities for creating and combining components
+ */
+export { pipe, compose, transform } from './pipe'
+export {
+  withEvents,
+  withIcon,
+  withSize,
+  withPosition,
+  withText,
+  withVariant,
+  withTextInput
+} from './features'
+export { createBase, withElement } from './component' // Add this line

package/src/core/compose/pipe.js

@@ -0,0 +1,69 @@
+// @file src/core/compose/pipe.js
+// @module core/compose
+
+/**
+ * @namespace compose
+ * @description Core composition utilities for creating and combining components
+ */
+
+/**
+ * Performs left-to-right function composition.
+ * Each function takes the return value of the previous function as its input.
+ *
+ * @memberof compose
+ * @function pipe
+ * @param {...Function} fns - Functions to compose
+ * @returns {Function} Composed function that passes its argument through the pipeline
+ *
+ * @example
+ * const addOne = x => x + 1;
+ * const double = x => x * 2;
+ * const addOneThenDouble = pipe(addOne, double);
+ * console.log(addOneThenDouble(3)); // Output: 8
+ */
+export const pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x)
+
+/**
+ * Performs right-to-left function composition.
+ * This is the mathematical composition order: (f ∘ g)(x) = f(g(x))
+ *
+ * @memberof compose
+ * @function compose
+ * @param {...Function} fns - Functions to compose
+ * @returns {Function} Composed function following mathematical composition order
+ *
+ * @example
+ * const addOne = x => x + 1;
+ * const double = x => x * 2;
+ * const doubleTheAddOne = compose(addOne, double);
+ * console.log(doubleTheAddOne(3)); // Output: 7
+ */
+export const compose = (...fns) => (x) => fns.reduceRight((v, f) => f(v), x)
+
+/**
+ * Creates a function that applies transformations to an object with shared context.
+ * Useful for applying multiple transformations while maintaining a shared state.
+ *
+ * @memberof compose
+ * @function transform
+ * @param {...Function} transformers - Functions that transform the object
+ * @returns {Function} Function that applies all transformations with shared context
+ *
+ * @example
+ * const withName = (obj, context) => ({ ...obj, name: context.name });
+ * const withAge = (obj, context) => ({ ...obj, age: context.age });
+ * const createPerson = transform(withName, withAge);
+ *
+ * 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)
+
+/**
+ * @typedef {Object} TransformContext
+ * @property {any} [key] - Any contextual data needed by transformers
+ */