mtrl 0.1.2 → 0.2.0

package/src/core/compose/component.js

@@ -1,225 +0,0 @@
-// src/core/compose/component.js
-/**
- * @module core/compose/component
- * @description Core utilities for component composition and creation with built-in mobile support
- */
-
-import { createElement } from '../dom/create'
-import {
-  normalizeEvent,
-  hasTouchSupport,
-  TOUCH_CONFIG,
-  PASSIVE_EVENTS
-} from '../utils/mobile'
-
-/**
- * Creates helper functions for managing CSS class names with a prefix
- * @param {string} prefix - Prefix to apply to class names
- * @returns {Object} Class name utilities
- * @property {Function} getClass - Gets a class name with prefix
- * @property {Function} getModifierClass - Gets a modifier class with prefix
- * @property {Function} getElementClass - Gets an element class with prefix
- * @example
- * const { getClass } = withPrefix('mtrl');
- * getClass('button'); // Returns 'mtrl-button'
- */
-const withPrefix = prefix => ({
-  /**
-   * Gets a prefixed class name
-   * @param {string} name - Base class name
-   * @returns {string} Prefixed class name
-   */
-  getClass: (name) => `${prefix}-${name}`,
-  /**
-   * Gets a prefixed modifier class name
-   * @param {string} base - Base class name
-   * @param {string} modifier - Modifier name
-   * @returns {string} Prefixed modifier class
-   */
-  getModifierClass: (base, modifier) => `${base}--${modifier}`,
-  /**
-   * Gets a prefixed element class name
-   * @param {string} base - Base class name
-   * @param {string} element - Element name
-   * @returns {string} Prefixed element class
-   */
-  getElementClass: (base, element) => `${base}-${element}`
-})
-
-/**
- * Creates a base component with configuration and prefix utilities.
- * This forms the foundation for all components in the system.
- *
- * @param {Object} config - Component configuration
- * @param {string} [config.prefix='mtrl'] - CSS class prefix
- * @param {string} [config.componentName] - Component name for class generation
- * @returns {Object} Base component with prefix utilities
- */
-export const createBase = (config = {}) => ({
-  config,
-  componentName: config.componentName,
-  ...withPrefix(config.prefix || 'mtrl'),
-
-  /**
-   * Manages the touch interaction state for the component.
-   * This helps track touch gestures and interactions.
-   */
-  touchState: {
-    startTime: 0,
-    startPosition: { x: 0, y: 0 },
-    isTouching: false,
-    activeTarget: null
-  },
-
-  /**
-   * Updates the component's touch state based on user interactions.
-   * Tracks touch position and timing for gesture recognition.
-   */
-  updateTouchState (event, status) {
-    const normalized = normalizeEvent(event)
-
-    if (status === 'start') {
-      this.touchState = {
-        startTime: Date.now(),
-        startPosition: {
-          x: normalized.clientX,
-          y: normalized.clientY
-        },
-        isTouching: true,
-        activeTarget: normalized.target
-      }
-    } else if (status === 'end') {
-      this.touchState.isTouching = false
-      this.touchState.activeTarget = null
-    }
-  }
-})
-
-/**
- * Higher-order function that adds a DOM element to a component
- * @param {Object} options - Element creation options
- * @param {string} [options.tag='div'] - HTML tag name
- * @param {string} [options.componentName] - Component name for class generation
- * @param {Object} [options.attrs] - HTML attributes
- * @param {string|string[]} [options.className] - Additional CSS classes
- * @param {Object} [options.forwardEvents] - Native events to forward to component events
- * @returns {Function} Component enhancer
- * @example
- * pipe(
- *   createBase,
- *   withElement({
- *     tag: 'button',
- *     componentName: 'button',
- *     attrs: { type: 'button' },
- *     forwardEvents: {
- *       click: component => !component.element.disabled
- *     }
- *   })
- * )({ prefix: 'app' })
- */
-export const withElement = (options = {}) => (base) => {
-  /**
-   * Handles the start of a touch interaction.
-   * Initializes touch tracking and provides visual feedback.
-   */
-  const handleTouchStart = (event) => {
-    base.updateTouchState(event, 'start')
-    element.classList.add(`${base.getClass('touch-active')}`)
-
-    if (options.forwardEvents?.touchstart) {
-      base.emit?.('touchstart', normalizeEvent(event))
-    }
-  }
-
-  /**
-   * Handles the end of a touch interaction.
-   * Detects taps and cleans up touch state.
-   */
-  const handleTouchEnd = (event) => {
-    if (!base.touchState.isTouching) return
-
-    const touchDuration = Date.now() - base.touchState.startTime
-    element.classList.remove(`${base.getClass('touch-active')}`)
-    base.updateTouchState(event, 'end')
-
-    // Emit tap event for short touches
-    if (touchDuration < TOUCH_CONFIG.TAP_THRESHOLD) {
-      base.emit?.('tap', normalizeEvent(event))
-    }
-
-    if (options.forwardEvents?.touchend) {
-      base.emit?.('touchend', normalizeEvent(event))
-    }
-  }
-
-  /**
-   * Handles touch movement.
-   * Detects swipes and other gesture-based interactions.
-   */
-  const handleTouchMove = (event) => {
-    if (!base.touchState.isTouching) return
-
-    const normalized = normalizeEvent(event)
-    const deltaX = normalized.clientX - base.touchState.startPosition.x
-    const deltaY = normalized.clientY - base.touchState.startPosition.y
-
-    // Detect and emit swipe gestures
-    if (Math.abs(deltaX) > TOUCH_CONFIG.SWIPE_THRESHOLD) {
-      base.emit?.('swipe', {
-        direction: deltaX > 0 ? 'right' : 'left',
-        deltaX,
-        deltaY
-      })
-    }
-
-    if (options.forwardEvents?.touchmove) {
-      base.emit?.('touchmove', { ...normalized, deltaX, deltaY })
-    }
-  }
-
-  // Create the element with appropriate classes
-  const element = createElement({
-    ...options,
-    className: [
-      base.getClass(options.componentName || base.componentName || 'component'),
-      hasTouchSupport() && options.interactive ? base.getClass('interactive') : null,
-      options.className
-    ].filter(Boolean),
-    context: base
-  })
-
-  // Add event listeners only if touch is supported and the component is interactive
-  if (hasTouchSupport() && options.interactive) {
-    element.addEventListener('touchstart', handleTouchStart, PASSIVE_EVENTS)
-    element.addEventListener('touchend', handleTouchEnd)
-    element.addEventListener('touchmove', handleTouchMove, PASSIVE_EVENTS)
-  }
-
-  return {
-    ...base,
-    element,
-
-    /**
-     * Adds CSS classes to the element
-     * @param {...string} classes - CSS classes to add
-     * @returns {Object} Component instance for chaining
-     */
-    addClass (...classes) {
-      element.classList.add(...classes.filter(Boolean))
-      return this
-    },
-
-    /**
-     * Removes the element and cleans up event listeners.
-     * Ensures proper resource cleanup when the component is destroyed.
-     */
-    destroy () {
-      if (hasTouchSupport() && options.interactive) {
-        element.removeEventListener('touchstart', handleTouchStart)
-        element.removeEventListener('touchend', handleTouchEnd)
-        element.removeEventListener('touchmove', handleTouchMove)
-      }
-      element.remove()
-    }
-  }
-}

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

@@ -1,114 +0,0 @@
-// src/core/compose/features/checkable.js
-
-/**
- * Adds checked state management to a component with an input
- * Manages visual state and event emission for checked changes
- *
- * @param {Object} config - Checkable configuration
- * @param {boolean} [config.checked] - Initial checked state
- *
- * @returns {Function} Component transformer that adds checkable functionality
- *
- * @example
- * const component = pipe(
- *   createBase,
- *   withEvents(),
- *   withInput(config),
- *   withCheckable({ checked: true })
- * )(config);
- *
- * // Use the checkable API
- * component.checkable.toggle();
- * component.checkable.check();
- * component.checkable.uncheck();
- *
- * // Listen for changes
- * component.on('change', ({ checked }) => {
- *   console.log('State changed:', checked);
- * });
- */
-export const withCheckable = (config = {}) => (component) => {
-  if (!component.input) return component
-
-  /**
-   * Updates component classes to reflect checked state
-   * @private
-   */
-  const updateStateClasses = () => {
-    component.element.classList.toggle(
-      `${component.getClass('switch')}--checked`,
-      component.input.checked
-    )
-  }
-
-  // Set initial state
-  if (config.checked) {
-    component.input.checked = true
-    updateStateClasses()
-  }
-
-  // Update classes whenever checked state changes
-  component.on('change', updateStateClasses)
-
-  return {
-    ...component,
-    checkable: {
-      /**
-       * Sets the checked state to true
-       * Emits change event if state changes
-       * @returns {Object} Checkable interface
-       */
-      check () {
-        if (!component.input.checked) {
-          component.input.checked = true
-          updateStateClasses()
-          component.emit('change', {
-            checked: true,
-            value: component.input.value
-          })
-        }
-        return this
-      },
-
-      /**
-       * Sets the checked state to false
-       * Emits change event if state changes
-       * @returns {Object} Checkable interface
-       */
-      uncheck () {
-        if (component.input.checked) {
-          component.input.checked = false
-          updateStateClasses()
-          component.emit('change', {
-            checked: false,
-            value: component.input.value
-          })
-        }
-        return this
-      },
-
-      /**
-       * Toggles the current checked state
-       * Always emits change event
-       * @returns {Object} Checkable interface
-       */
-      toggle () {
-        component.input.checked = !component.input.checked
-        updateStateClasses()
-        component.emit('change', {
-          checked: component.input.checked,
-          value: component.input.value
-        })
-        return this
-      },
-
-      /**
-       * Gets the current checked state
-       * @returns {boolean} Whether component is checked
-       */
-      isChecked () {
-        return component.input.checked
-      }
-    }
-  }
-}

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

@@ -1,64 +0,0 @@
-// src/core/compose/features/disabled.js
-
-/**
- * Adds disabled state management to a component
- * @param {Object} config - Disabled configuration
- * @returns {Function} Component enhancer
- */
-export const withDisabled = (config = {}) => (component) => {
-  // Get the disabled class based on component name
-  const disabledClass = `${component.getClass(component.componentName)}--disabled`
-
-  // Directly implement disabled functionality
-  const disabled = {
-    enable () {
-      component.element.classList.remove(disabledClass)
-      if (component.input) {
-        component.input.disabled = false
-        component.input.removeAttribute('disabled')
-      } else {
-        component.element.disabled = false
-        component.element.removeAttribute('disabled')
-      }
-      return this
-    },
-
-    disable () {
-      component.element.classList.add(disabledClass)
-      if (component.input) {
-        component.input.disabled = true
-        component.input.setAttribute('disabled', 'true')
-      } else {
-        component.element.disabled = true
-        component.element.setAttribute('disabled', 'true')
-      }
-      return this
-    },
-
-    toggle () {
-      if (this.isDisabled()) {
-        this.enable()
-      } else {
-        this.disable()
-      }
-      return this
-    },
-
-    isDisabled () {
-      return component.input ? component.input.disabled : component.element.disabled
-    }
-  }
-
-  // Initialize disabled state if configured
-  if (config.disabled) {
-    // Use requestAnimationFrame to ensure DOM is ready
-    requestAnimationFrame(() => {
-      disabled.disable()
-    })
-  }
-
-  return {
-    ...component,
-    disabled
-  }
-}

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

@@ -1,48 +0,0 @@
-// src/core/compose/features/withEvents.js
-/**
- * @module core/compose/features
- */
-
-import { createEmitter } from '../../state/emitter'
-
-/**
- * Adds event handling capabilities to a component
- * @memberof module:core/compose/features
- * @function withEvents
- * @param {HTMLElement} [target] - Event target element
- * @returns {Function} Component transformer
- * @example
- * const button = pipe(
- *   createBase({ componentName: 'button' }),
- *   withElement(),
- *   withEvents()
- * )({})
- *
- * button.on('click', () => console.log('clicked'))
- */
-
-/**
- * Adds event handling capabilities to a component
- * Returns event system ready to use immediately
- */
-export const withEvents = () => (component) => {
-  const emitter = createEmitter()
-
-  return {
-    ...component,
-    on (event, handler) {
-      emitter.on(event, handler)
-      return this
-    },
-
-    off (event, handler) {
-      emitter.off(event, handler)
-      return this
-    },
-
-    emit (event, data) {
-      emitter.emit(event, data)
-      return this
-    }
-  }
-}

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

@@ -1,33 +0,0 @@
-// src/core/compose/features/icon.js
-import { createIcon } from '../../../core/build/icon'
-
-const updateCircularStyle = (component, config) => {
-  const hasText = config.text
-  const hasIcon = config.icon
-
-  const circularClass = `${component.getClass('button')}--circular`
-  if (!hasText && hasIcon) {
-    component.element.classList.add(circularClass)
-  } else {
-    component.element.classList.remove(circularClass)
-  }
-}
-
-export const withIcon = (config = {}) => (component) => {
-  const icon = createIcon(component.element, {
-    prefix: config.prefix,
-    type: 'button',
-    position: config.iconPosition
-  })
-
-  if (config.icon) {
-    icon.setIcon(config.icon)
-  }
-
-  updateCircularStyle(component, config)
-
-  return {
-    ...component,
-    icon
-  }
-}

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

@@ -1,20 +0,0 @@
-// src/core/compose/features/index.js
-
-// Core features
-export { withEvents } from './events'
-export { withText } from './text'
-export { withIcon } from './icon'
-export { withVariant } from './variant'
-export { withSize } from './size'
-export { withPosition } from './position'
-export { withInput } from './input'
-export { withTrack } from './track'
-export { withTextInput } from './textinput'
-export { withTextLabel } from './textlabel'
-export { withRipple } from './ripple'
-
-// State management features
-export { withDisabled } from './disabled'
-export { withCheckable } from './checkable'
-
-export { withLifecycle } from './lifecycle'

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

@@ -1,100 +0,0 @@
-// 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) {
-      if (key === 'disabled' && value === true) {
-        input.disabled = true
-        input.setAttribute('disabled', 'true')
-        // Note: We don't add the class here because that's handled by withDisabled
-      } else if (value === true) {
-        input.setAttribute(key, key)
-      } else {
-        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

@@ -1,69 +0,0 @@
-// 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()
-        }
-      }
-    }
-  }
-}