mtrl 0.0.0

package/src/core/collection/list-manager.js

@@ -0,0 +1,157 @@
+// src/core/collection/list-manager.js
+
+import { createRouteAdapter } from './adapters/route'
+
+/**
+ * Creates a list manager for a specific collection
+ * @param {string} collection - Collection name
+ * @param {Object} config - Configuration options
+ * @param {Function} config.transform - Transform function for items
+ * @param {string} config.baseUrl - Base API URL
+ * @returns {Object} List manager methods
+ */
+export const createListManager = (collection, config = {}) => {
+  const {
+    transform = (item) => item,
+    baseUrl = 'http://localhost:4000/api'
+  } = config
+
+  // Initialize route adapter
+  const adapter = createRouteAdapter({
+    base: baseUrl,
+    endpoints: {
+      list: `/${collection}`
+    },
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+
+  // Load items with cursor pagination
+  const loadItems = async (params = {}) => {
+    try {
+      const response = await adapter.read(params)
+
+      return {
+        items: response.items.map(transform),
+        meta: response.meta
+      }
+    } catch (error) {
+      console.error(`Error loading ${collection}:`, error)
+      return {
+        items: [],
+        meta: {
+          cursor: null,
+          hasNext: false
+        }
+      }
+    }
+  }
+
+  // Utility to create a cursor-based page loader
+  const createPageLoader = (list, { onLoad, pageSize = 20 } = {}) => {
+    let currentCursor = null
+    let loading = false
+    const pageHistory = []
+
+    const load = async (cursor = null, addToHistory = true) => {
+      if (loading) return
+
+      loading = true
+      onLoad?.({ loading: true })
+
+      const { items, meta } = await loadItems({
+        limit: pageSize,
+        cursor
+      })
+
+      if (addToHistory && cursor) {
+        pageHistory.push(currentCursor)
+      }
+      currentCursor = meta.cursor
+
+      list.setItems(items)
+      loading = false
+
+      onLoad?.({
+        loading: false,
+        hasNext: meta.hasNext,
+        hasPrev: pageHistory.length > 0,
+        items
+      })
+
+      return {
+        hasNext: meta.hasNext,
+        hasPrev: pageHistory.length > 0
+      }
+    }
+
+    const loadNext = () => load(currentCursor)
+
+    const loadPrev = () => {
+      const previousCursor = pageHistory.pop()
+      return load(previousCursor, false)
+    }
+
+    return {
+      load,
+      loadNext,
+      loadPrev,
+      get loading () { return loading },
+      get cursor () { return currentCursor }
+    }
+  }
+
+  return {
+    loadItems,
+    createPageLoader
+  }
+}
+
+/**
+ * Transform functions for common collections
+ */
+export const transforms = {
+  track: (track) => ({
+    id: track._id,
+    headline: track.title || 'Untitled',
+    supportingText: track.artist || 'Unknown Artist',
+    meta: track.year?.toString() || ''
+  }),
+
+  playlist: (playlist) => ({
+    id: playlist._id,
+    headline: playlist.name || 'Untitled Playlist',
+    supportingText: `${playlist.tracks?.length || 0} tracks`,
+    meta: playlist.creator || ''
+  }),
+
+  country: (country) => ({
+    id: country._id,
+    headline: country.name || country.code,
+    supportingText: country.continent || '',
+    meta: country.code || ''
+  })
+}
+
+/**
+ * Usage example:
+ *
+ * const trackManager = createListManager('track', {
+ *   transform: transforms.track
+ * })
+ *
+ * const loader = trackManager.createPageLoader(list, {
+ *   onLoad: ({ loading, hasNext, items }) => {
+ *     updateNavigation({ loading, hasNext })
+ *     logEvent(`Loaded ${items.length} tracks`)
+ *   }
+ * })
+ *
+ * // Initial load
+ * await loader.load()
+ *
+ * // Navigation
+ * nextButton.onclick = () => loader.loadNext()
+ * prevButton.onclick = () => loader.loadPrev()
+ */

package/src/core/compose/base.js

@@ -0,0 +1,8 @@
+// src/core/compose/base.js
+export const createComponent = (config = {}) => ({
+  element: null,
+  config,
+  setup () {
+    return this
+  }
+})

package/src/core/compose/component.js

@@ -0,0 +1,225 @@
+// 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

@@ -0,0 +1,114 @@
+// 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

@@ -0,0 +1,25 @@
+// src/core/compose/features/disabled.js
+
+export const withDisabled = (config) => (component) => {
+  if (!component.element) return component
+
+  return {
+    ...component,
+    disabled: {
+      enable () {
+        console.debug('disabled')
+        component.element.disabled = false
+        const className = `${config.prefix}-${config.componentName}--disable`
+        component.element.classList.remove(className)
+        return this
+      },
+      disable () {
+        console.debug('disabled')
+        component.element.disabled = true
+        const className = `${config.prefix}-${config.componentName}--disable`
+        component.element.classList.add(className)
+        return this
+      }
+    }
+  }
+}

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

@@ -0,0 +1,48 @@
+// 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

@@ -0,0 +1,33 @@
+// 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

@@ -0,0 +1,20 @@
+// 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'