mtrl 0.0.0

package/src/core/config.js

@@ -0,0 +1,140 @@
+// src/core/config.js
+
+/**
+ * Library prefix used for all components
+ */
+export const PREFIX = 'mtrl'
+
+export const getComponentClass = (type) => `${PREFIX}-${type}`
+export const getModifierClass = (baseClass, modifier) => `${baseClass}--${modifier}`
+export const getElementClass = (baseClass, element) => `${baseClass}-${element}`
+
+/**
+ * Component type identifiers
+ * @enum {string}
+ */
+export const COMPONENTS = {
+  BUTTON: 'button',
+  TEXTFIELD: 'textfield',
+  CONTAINER: 'container',
+  SNACKBAR: 'snackbar',
+  SWITCH: 'switch'
+}
+
+/**
+ * Theme configuration
+ * @typedef {Object} ThemeConfig
+ * @property {string} name - Theme name
+ * @property {Object} variables - Theme CSS variables
+ * @property {Object} variants - Theme variants
+ */
+
+/**
+ * Creates a component configuration object
+ * @param {string} type - Component type from COMPONENT_TYPES
+ * @returns {Object} Component configuration interface
+ */
+export const createComponentConfig = (type) => {
+  const baseClass = `${PREFIX}-${type}`
+
+  // Create the base config object
+  const config = {
+    prefix: PREFIX,
+    type,
+    baseClass,
+
+    // Class name generators
+    getClass: () => baseClass,
+    getModifierClass: (modifier) => `${baseClass}--${modifier}`,
+    getElementClass: (element) => `${baseClass}-${element}`,
+
+    // Theme support
+    withTheme: (theme) => ({
+      ...config,
+      theme,
+      getThemeClass: (variant) => `${baseClass}--theme-${theme}-${variant}`
+    }),
+
+    // Variant support
+    withVariants: (...variants) => ({
+      ...config,
+      variants,
+      hasVariant: (variant) => variants.includes(variant),
+      getVariantClass: (variant) =>
+        variants.includes(variant) ? `${baseClass}--${variant}` : null
+    }),
+
+    // State support
+    withStates: (...states) => ({
+      ...config,
+      states,
+      getStateClass: (state) =>
+        states.includes(state) ? `${baseClass}--state-${state}` : null
+    })
+  }
+
+  return config
+}
+
+/**
+ * Common component states
+ * @enum {string}
+ */
+export const STATES = {
+  DISABLED: 'disabled',
+  FOCUSED: 'focused',
+  ACTIVE: 'active',
+  LOADING: 'loading',
+  ERROR: 'error'
+}
+
+/**
+ * CSS class generation utilities
+ */
+export const classNames = {
+  /**
+   * Creates a BEM-style class name
+   * @param {string} block - Block name
+   * @param {string} [element] - Element name
+   * @param {string} [modifier] - Modifier name
+   * @returns {string} BEM class name
+   */
+  bem: (block, element, modifier) => {
+    let className = block
+    if (element) className += `-${element}`
+    if (modifier) className += `--${modifier}`
+    return className
+  },
+
+  /**
+   * Joins class names, filtering out falsy values
+   * @param {...string} classes - Class names to join
+   * @returns {string} Joined class names
+   */
+  join: (...classes) => classes.filter(Boolean).join(' ')
+}
+
+/**
+ * Creates a themed component configuration
+ * @param {string} type - Component type
+ * @param {ThemeConfig} theme - Theme configuration
+ */
+export const createThemedComponent = (type, theme) => {
+  const config = createComponentConfig(type)
+
+  return {
+    ...config,
+    theme,
+
+    // Theme-specific class generators
+    getThemeClass: (variant) =>
+      `${config.getClass()}--theme-${theme.name}${variant ? `-${variant}` : ''}`,
+
+    // Theme CSS variables
+    getCssVariables: () =>
+      Object.entries(theme.variables).reduce((acc, [key, value]) => ({
+        ...acc,
+        [`--${PREFIX}-${type}-${key}`]: value
+      }), {})
+  }
+}

package/src/core/dom/attributes.js

@@ -0,0 +1,33 @@
+// src/core/dom/attributes.js
+/**
+ * @module core/dom
+ * @description DOM manipulation utilities
+ */
+
+/**
+ * Sets multiple attributes on an element
+ * @memberof module:core/dom
+ * @function setAttributes
+ * @param {HTMLElement} element - Target element
+ * @param {Object} attrs - Attributes to set
+ * @returns {HTMLElement} Modified element
+ */
+export const setAttributes = (element, attrs = {}) => {
+  Object.entries(attrs).forEach(([key, value]) => {
+    if (value != null) element.setAttribute(key, value)
+  })
+  return element
+}
+
+/**
+ * Removes multiple attributes from an element
+ * @memberof module:core/dom
+ * @function removeAttributes
+ * @param {HTMLElement} element - Target element
+ * @param {string[]} attrs - Attributes to remove
+ * @returns {HTMLElement} Modified element
+ */
+export const removeAttributes = (element, attrs = []) => {
+  attrs.forEach(attr => element.removeAttribute(attr))
+  return element
+}

package/src/core/dom/classes.js

@@ -0,0 +1,70 @@
+// src/core/dom/classes.js
+/**
+ * @module core/dom
+ * @description DOM manipulation utilities
+ */
+
+import { normalizeClasses } from '../utils'
+/**
+ * Adds multiple classes to an element
+ * @memberof module:core/dom
+ * @function addClass
+ * @param {HTMLElement} element - Target element
+ * @param {...string} classes - Classes to add
+ * @returns {HTMLElement} Modified element
+ */
+
+/**
+ * Adds multiple classes to an element
+ * @param {HTMLElement} element - Target element
+ * @param {...string} classes - Classes to add
+ * @returns {HTMLElement} Modified element
+ */
+export const addClass = (element, ...classes) => {
+  const normalizedClasses = normalizeClasses(...classes)
+  if (normalizedClasses.length) {
+    element.classList.add(...normalizedClasses)
+  }
+  return element
+}
+
+/**
+ * Removes multiple classes from an element
+ * @memberof module:core/dom
+ * @function removeClass
+ * @param {HTMLElement} element - Target element
+ * @param {...string} classes - Classes to remove
+ * @returns {HTMLElement} Modified element
+ */
+export const removeClass = (element, ...classes) => {
+  const normalizedClasses = normalizeClasses(...classes)
+  if (normalizedClasses.length) {
+    element.classList.remove(...normalizedClasses)
+  }
+  return element
+}
+
+/**
+ * Toggles multiple classes on an element
+ * @param {HTMLElement} element - Target element
+ * @param {...string} classes - Classes to toggle
+ * @returns {HTMLElement} Modified element
+ */
+export const toggleClass = (element, ...classes) => {
+  const normalizedClasses = normalizeClasses(...classes)
+  normalizedClasses.forEach(cls => {
+    element.classList.toggle(cls)
+  })
+  return element
+}
+
+/**
+ * Checks if an element has all specified classes
+ * @param {HTMLElement} element - Target element
+ * @param {...string} classes - Classes to check
+ * @returns {boolean} True if element has all specified classes
+ */
+export const hasClass = (element, ...classes) => {
+  const normalizedClasses = normalizeClasses(...classes)
+  return normalizedClasses.every(cls => element.classList.contains(cls))
+}

package/src/core/dom/create.js

@@ -0,0 +1,133 @@
+// src/core/dom/create.js
+/**
+ * @module core/dom
+ * @description DOM manipulation utilities
+ */
+
+import { setAttributes } from './attributes'
+import { normalizeClasses } from '../utils'
+
+/**
+ * Creates a DOM element with the specified options
+ * @memberof module:core/dom
+ * @param {Object} options - Element creation options
+ * @param {string} [options.tag='div'] - HTML tag name
+ * @param {HTMLElement} [options.container] - Container to append element to
+ * @param {string} [options.html] - Inner HTML content
+ * @param {string} [options.text] - Text content
+ * @param {string} [options.id] - Element ID
+ * @param {Object} [options.data] - Dataset attributes
+ * @param {string|string[]} [options.className] - CSS classes
+ * @param {Object} [options.attrs] - HTML attributes
+ * @param {Object} [options.forwardEvents] - Events to forward when component has emit method
+ * @param {Function} [options.onCreate] - Callback after element creation
+ * @returns {HTMLElement} Created element
+ */
+export const createElement = (options = {}) => {
+  const {
+    tag = 'div',
+    container = null,
+    html = '',
+    text = '',
+    id = '',
+    data = {},
+    className,
+    attrs = {},
+    forwardEvents = {},
+    onCreate,
+    context,
+    ...rest
+  } = options
+
+  const element = document.createElement(tag)
+
+  // Handle content
+  if (html) element.innerHTML = html
+  if (text) element.textContent = text
+  if (id) element.id = id
+
+  // Handle classes
+  if (className) {
+    const normalizedClasses = normalizeClasses(className)
+    if (normalizedClasses.length) {
+      element.classList.add(...normalizedClasses)
+    }
+  }
+
+  // Handle data attributes
+  Object.entries(data).forEach(([key, value]) => {
+    element.dataset[key] = value
+  })
+
+  // Handle all other attributes
+  const allAttrs = { ...attrs, ...rest }
+  Object.entries(allAttrs).forEach(([key, value]) => {
+    if (value != null) element.setAttribute(key, value)
+  })
+
+  // Handle event forwarding if context has emit method
+  if (context?.emit && forwardEvents) {
+    Object.entries(forwardEvents).forEach(([nativeEvent, eventConfig]) => {
+      const shouldForward = typeof eventConfig === 'function'
+        ? eventConfig
+        : () => true
+
+      element.addEventListener(nativeEvent, (event) => {
+        if (shouldForward({ ...context, element }, event)) {
+          context.emit(nativeEvent, { event })
+        }
+      })
+    })
+  }
+
+  // Append to container if provided
+  if (container) {
+    container.appendChild(element)
+  }
+
+  if (typeof onCreate === 'function') {
+    log.info('onCreate', element, context)
+    onCreate(element, context)
+  }
+
+  return element
+}
+
+/**
+ * Higher-order function to add attributes to an element
+ * @param {Object} attrs - Attributes to add
+ * @returns {Function} Element transformer
+ */
+export const withAttributes = (attrs) => (element) => {
+  setAttributes(element, attrs)
+  return element
+}
+
+/**
+ * Higher-order function to add classes to an element
+ * @memberof module:core/dom
+ * @param {...string} classes - Classes to add
+ * @returns {Function} Element transformer
+ */
+export const withClasses = (...classes) => (element) => {
+  const normalizedClasses = normalizeClasses(...classes)
+  if (normalizedClasses.length) {
+    element.classList.add(...normalizedClasses)
+  }
+  return element
+}
+
+/**
+ * Higher-order function to add content to an element
+ * @memberof module:core/dom
+ * @param {Node|string} content - Content to add
+ * @returns {Function} Element transformer
+ */
+export const withContent = (content) => (element) => {
+  if (content instanceof Node) {
+    element.appendChild(content)
+  } else {
+    element.textContent = content
+  }
+  return element
+}

package/src/core/dom/events.js

@@ -0,0 +1,175 @@
+// src/core/state/events.js
+/**
+ * @module core/dom
+ * @description DOM manipulation utilities
+ */
+
+/**
+ * Creates an event manager to handle DOM events with enhanced functionality.
+ * Provides a robust interface for managing event listeners with error handling,
+ * cleanup, and lifecycle management.
+ *
+ * @param {HTMLElement} element - DOM element to attach events to
+ * @returns {Object} Event manager interface with the following methods:
+ *
+ * @property {Function} on - Adds an event listener with options
+ * @property {Function} off - Removes an event listener
+ * @property {Function} pause - Temporarily disables all event listeners
+ * @property {Function} resume - Re-enables all event listeners
+ * @property {Function} destroy - Removes all event listeners and cleans up
+ * @property {Function} getHandlers - Gets all active handlers
+ * @property {Function} hasHandler - Checks if a specific handler exists
+ *
+ * @example
+ * const manager = createEventManager(myElement);
+ *
+ * // Add a listener
+ * manager.on('click', (e) => console.log('clicked'), { capture: true });
+ *
+ * // Remove a listener
+ * manager.off('click', myHandler);
+ *
+ * // Pause all events
+ * manager.pause();
+ *
+ * // Resume all events
+ * manager.resume();
+ *
+ * // Cleanup
+ * manager.destroy();
+ */
+export const createEventManager = (element) => {
+  // Store handlers with their metadata
+  const handlers = new Map()
+
+  /**
+   * Private helper to create a unique handler identifier
+   * @memberof module:core/dom
+   * @private
+   * @param {string} event - Event name
+   * @param {Function} handler - Event handler
+   * @returns {string} Unique identifier
+   */
+  const createHandlerId = (event, handler) =>
+    `${event}_${handler.toString()}`
+
+  /**
+   * Wraps an event handler with error boundary and logging
+   * @memberof module:core/dom
+   * @private
+   * @param {Function} handler - Original event handler
+   * @param {string} event - Event name for error context
+   * @returns {Function} Enhanced handler with error boundary
+   */
+  const enhanceHandler = (handler, event) => (e) => {
+    try {
+      handler(e)
+    } catch (error) {
+      console.error(`Error in ${event} handler:`, error)
+    }
+  }
+
+  /**
+   * Safely removes event listener
+   * @memberof module:core/dom
+   * @param {string} event - Event name
+   * @param {Function} handler - Event handler
+   */
+  const safeRemoveListener = (event, handler) => {
+    try {
+      element.removeEventListener(event, handler)
+    } catch (error) {
+      console.warn(`Failed to remove ${event} listener:`, error)
+    }
+  }
+
+  return {
+    /**
+     * Adds an event listener with options
+     * @memberof module:core/dom
+     * @param {string} event - Event name
+     * @param {Function} handler - Event handler
+     * @param {Object} [options] - addEventListener options
+     */
+    on (event, handler, options = {}) {
+      const enhanced = enhanceHandler(handler, event)
+      const id = createHandlerId(event, handler)
+
+      handlers.set(id, {
+        original: handler,
+        enhanced,
+        event,
+        options
+      })
+
+      element.addEventListener(event, enhanced, options)
+      return this
+    },
+
+    /**
+     * Removes an event listener
+     * @memberof module:core/dom
+     * @param {string} event - Event name
+     * @param {Function} handler - Event handler
+     */
+    off (event, handler) {
+      const id = createHandlerId(event, handler)
+      const stored = handlers.get(id)
+
+      if (stored) {
+        safeRemoveListener(event, stored.enhanced)
+        handlers.delete(id)
+      }
+      return this
+    },
+
+    /**
+     * Temporarily disables all event listeners
+     */
+    pause () {
+      handlers.forEach(({ enhanced, event, options }) => {
+        safeRemoveListener(event, enhanced)
+      })
+      return this
+    },
+
+    /**
+     * Re-enables all event listeners
+     */
+    resume () {
+      handlers.forEach(({ enhanced, event, options }) => {
+        element.addEventListener(event, enhanced, options)
+      })
+      return this
+    },
+
+    /**
+     * Removes all event listeners and cleans up
+     */
+    destroy () {
+      handlers.forEach(({ enhanced, event }) => {
+        safeRemoveListener(event, enhanced)
+      })
+      handlers.clear()
+    },
+
+    /**
+     * Gets all active handlers
+     * @returns {Map} Map of active handlers
+     */
+    getHandlers () {
+      return new Map(handlers)
+    },
+
+    /**
+     * Checks if a specific handler exists
+     * @param {string} event - Event name
+     * @param {Function} handler - Event handler
+     * @returns {boolean} Whether handler exists
+     */
+    hasHandler (event, handler) {
+      const id = createHandlerId(event, handler)
+      return handlers.has(id)
+    }
+  }
+}

package/src/core/dom/index.js

@@ -0,0 +1,5 @@
+// src/core/dom/index.js
+export { createElement } from './create'
+export { setAttributes, removeAttributes } from './attributes'
+export { addClass, removeClass } from './classes'
+// export { attachEvents } from './events'

package/src/core/dom/utils.js

@@ -0,0 +1,22 @@
+/**
+ * Normalizes class names input by handling various formats:
+ * - String with space-separated classes
+ * - Array of strings
+ * - Mixed array of strings and space-separated classes
+ * @param {...(string|string[])} classes - Classes to normalize
+ * @returns {string[]} Array of unique, non-empty class names
+ */
+export const normalizeClasses = (...classes) => {
+  return [...new Set(
+    classes
+      .flat()
+      .reduce((acc, cls) => {
+        if (typeof cls === 'string') {
+          // Split space-separated classes and add them individually
+          acc.push(...cls.split(/\s+/))
+        }
+        return acc
+      }, [])
+      .filter(Boolean) // Remove empty strings
+  )]
+}

package/src/core/index.js

@@ -0,0 +1,23 @@
+// src/core/index.js
+/**
+ * @module core
+ * @description Core utilities and building blocks for the component system
+ */
+// Build
+export { createText } from './build/text'
+export { createIcon } from './build/icon'
+
+// Classes management
+export { addClass, removeClass } from './dom/classes'
+
+// State Management
+export { createDisabled } from './state/disabled'
+export { createEventManager } from './state/events'
+export { createLifecycle } from './state/lifecycle'
+export { createEmitter } from './state/emitter'
+
+// Composition Utilities
+export { pipe, compose, transform } from './compose'
+
+// General Utilities
+export { classNames } from './utils'

package/src/core/layout/index.js

@@ -0,0 +1,93 @@
+import { isObject } from '../utils'
+
+const createComponent = (Component, options = {}) => {
+  // Check if Component is a class (has prototype) or function
+  const isClass = Component.prototype && Component.prototype.constructor === Component
+
+  if (isClass) {
+    return new Component(options)
+  }
+
+  return Component(options)
+}
+
+/**
+ * Recursively creates components based on a provided schema.
+ *
+ * @param {Array} schema - An array of components or sub-schemas.
+ * @param {HTMLElement} container - The container for the current level of components.
+ * @param {Object} [structure={}] - An accumulator object for components, keyed by name.
+ * @param {number} [level=0] - The current level of recursion.
+ * @returns {Object} The structure containing all created components.
+ */
+const createLayout = (schema, container, structure = {}, level = 0, components = []) => {
+  level++
+  let component
+  const object = {}
+  const fragment = document.createDocumentFragment()
+
+  if (!Array.isArray(schema)) {
+    console.error('Schema is not an array!', container, level, schema)
+  }
+
+  for (let i = 0; i < schema.length; i++) {
+    let name
+    let options = {}
+
+    if (schema[i] instanceof Object && typeof schema[i] === 'function') {
+      if (isObject(schema[i + 1])) {
+        options = schema[i + 1]
+      } else if (isObject(schema[i + 2])) {
+        options = schema[i + 2]
+      }
+
+      if (typeof schema[i + 1] === 'string') {
+        name = schema[i + 1]
+        if (!schema[i].isElement && !schema[i].isComponent) {
+          options.name = name
+        }
+      }
+
+      component = createComponent(schema[i], options)
+
+      const element = component.element || component
+      if (level === 1) structure.element = element
+
+      if (name) {
+        structure[name] = component
+        components.push([name, component])
+      }
+
+      if (component) {
+        if (component.insert) component.insert(fragment)
+        else fragment.appendChild(element)
+
+        if (container) {
+          // console.log('container', container)
+          component._container = container
+          if (component.onInserted) component.onInserted(container)
+        }
+      }
+    } else if (Array.isArray(schema[i])) {
+      if (!component) component = container
+      createLayout(schema[i], component, structure, level, components)
+    }
+  }
+
+  if (container && fragment.hasChildNodes()) {
+    const wrapper = container.element || container
+    wrapper.appendChild(fragment)
+  }
+
+  function get (name) {
+    return structure[name] || null
+  }
+
+  object.component = structure
+  object.components = components
+  object.get = get
+
+  return object
+}
+
+export default createLayout