mtrl 0.3.8 → 0.4.0

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

@@ -1,333 +0,0 @@
-// src/core/collection/list-manager.ts
-
-import { createRouteAdapter, RouteAdapter, QueryDefinition } from './adapters/route';
-
-/**
- * List item interface
- */
-export interface ListItem {
-  id: string;
-  [key: string]: any;
-}
-
-/**
- * List with items setter
- */
-export interface List {
-  setItems: (items: any[]) => void;
-}
-
-/**
- * Metadata for pagination
- */
-export interface PaginationMeta {
-  cursor: string | null;
-  hasNext: boolean;
-}
-
-/**
- * Response format from loadItems
- */
-export interface LoadItemsResponse<T = any> {
-  items: T[];
-  meta: PaginationMeta;
-}
-
-/**
- * Load status callback data
- */
-export interface LoadStatus<T = any> {
-  loading: boolean;
-  hasNext?: boolean;
-  hasPrev?: boolean;
-  items?: T[];
-}
-
-/**
- * Page loader configuration
- */
-export interface PageLoaderConfig<T = any> {
-  onLoad?: (status: LoadStatus<T>) => void;
-  pageSize?: number;
-}
-
-/**
- * Page loader interface
- */
-export interface PageLoader<T = any> {
-  /**
-   * Load a specific page by cursor
-   * @param cursor - Cursor pointing to the page
-   * @param addToHistory - Whether to add current cursor to history
-   * @returns Page status
-   */
-  load: (cursor?: string | null, addToHistory?: boolean) => Promise<{
-    hasNext: boolean;
-    hasPrev: boolean;
-  } | undefined>;
-
-  /**
-   * Load next page
-   * @returns Page status
-   */
-  loadNext: () => Promise<{
-    hasNext: boolean;
-    hasPrev: boolean;
-  } | undefined>;
-
-  /**
-   * Load previous page
-   * @returns Page status
-   */
-  loadPrev: () => Promise<{
-    hasNext: boolean;
-    hasPrev: boolean;
-  } | undefined>;
-
-  /**
-   * Current loading state
-   */
-  readonly loading: boolean;
-
-  /**
-   * Current cursor
-   */
-  readonly cursor: string | null;
-}
-
-/**
- * List manager config
- */
-export interface ListManagerConfig<T = any> {
-  /**
-   * Transform function to convert API items to app format
-   */
-  transform?: (item: any) => T;
-  
-  /**
-   * Base URL for API requests
-   */
-  baseUrl?: string;
-}
-
-/**
- * List manager interface
- */
-export interface ListManager<T = any> {
-  /**
-   * Load items with optional parameters
-   * @param params - Query parameters
-   * @returns Loaded items with pagination metadata
-   */
-  loadItems: (params?: Record<string, any>) => Promise<LoadItemsResponse<T>>;
-  
-  /**
-   * Create a page loader for the specified list
-   * @param list - List to manage
-   * @param config - Page loader configuration
-   * @returns Page loader
-   */
-  createPageLoader: (list: List, config?: PageLoaderConfig<T>) => PageLoader<T>;
-}
-
-/**
- * Creates a list manager for a specific collection
- * @param collection - Collection name
- * @param config - Configuration options
- * @returns List manager methods
- */
-export const createListManager = <T = any>(
-  collection: string, 
-  config: ListManagerConfig<T> = {}
-): ListManager<T> => {
-  const {
-    transform = (item: any) => item as T,
-    baseUrl = 'http://localhost:4000/api'
-  } = config;
-
-  // Initialize route adapter
-  const adapter: RouteAdapter = createRouteAdapter({
-    base: baseUrl,
-    endpoints: {
-      list: `/${collection}`
-    },
-    headers: {
-      'Content-Type': 'application/json'
-    }
-  });
-
-  /**
-   * Load items with cursor pagination
-   * @param params - Query parameters
-   * @returns Loaded items with pagination metadata
-   */
-  const loadItems = async (params: Record<string, any> = {}): Promise<LoadItemsResponse<T>> => {
-    try {
-      const response = await adapter.read(params as QueryDefinition);
-
-      return {
-        items: response.items.map(transform),
-        meta: response.meta as PaginationMeta
-      };
-    } catch (error) {
-      console.error(`Error loading ${collection}:`, error);
-      return {
-        items: [],
-        meta: {
-          cursor: null,
-          hasNext: false
-        }
-      };
-    }
-  };
-
-  /**
-   * Create a page loader for the specified list
-   * @param list - List to manage
-   * @param config - Page loader configuration
-   * @returns Page loader
-   */
-  const createPageLoader = (
-    list: List, 
-    { onLoad, pageSize = 20 }: PageLoaderConfig<T> = {}
-  ): PageLoader<T> => {
-    let currentCursor: string | null = null;
-    let loading = false;
-    const pageHistory: Array<string | null> = [];
-
-    /**
-     * Load a specific page by cursor
-     * @param cursor - Cursor pointing to the page
-     * @param addToHistory - Whether to add current cursor to history
-     * @returns Page status
-     */
-    const load = async (
-      cursor: string | null = null, 
-      addToHistory = true
-    ): Promise<{ hasNext: boolean; hasPrev: boolean } | undefined> => {
-      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;
-
-      const status = {
-        loading: false,
-        hasNext: meta.hasNext,
-        hasPrev: pageHistory.length > 0,
-        items
-      };
-      
-      onLoad?.(status);
-
-      return {
-        hasNext: meta.hasNext,
-        hasPrev: pageHistory.length > 0
-      };
-    };
-
-    /**
-     * Load next page
-     * @returns Page status
-     */
-    const loadNext = (): Promise<{ hasNext: boolean; hasPrev: boolean } | undefined> => 
-      load(currentCursor);
-
-    /**
-     * Load previous page
-     * @returns Page status
-     */
-    const loadPrev = (): Promise<{ hasNext: boolean; hasPrev: boolean } | undefined> => {
-      const previousCursor = pageHistory.pop();
-      return load(previousCursor, false);
-    };
-
-    return {
-      load,
-      loadNext,
-      loadPrev,
-      get loading(): boolean { return loading; },
-      get cursor(): string | null { return currentCursor; }
-    };
-  };
-
-  return {
-    loadItems,
-    createPageLoader
-  };
-};
-
-/**
- * Transform functions for common collections
- */
-export const transforms = {
-  /**
-   * Transform track data
-   * @param track - Raw track data
-   * @returns Formatted track data
-   */
-  track: (track: any): ListItem => ({
-    id: track._id,
-    headline: track.title || 'Untitled',
-    supportingText: track.artist || 'Unknown Artist',
-    meta: track.year?.toString() || ''
-  }),
-
-  /**
-   * Transform playlist data
-   * @param playlist - Raw playlist data
-   * @returns Formatted playlist data
-   */
-  playlist: (playlist: any): ListItem => ({
-    id: playlist._id,
-    headline: playlist.name || 'Untitled Playlist',
-    supportingText: `${playlist.tracks?.length || 0} tracks`,
-    meta: playlist.creator || ''
-  }),
-
-  /**
-   * Transform country data
-   * @param country - Raw country data
-   * @returns Formatted country data
-   */
-  country: (country: any): ListItem => ({
-    id: country._id,
-    headline: country.name || country.code,
-    supportingText: country.continent || '',
-    meta: country.code || ''
-  })
-};
-
-/**
- * Usage example:
- *
- * const trackManager = createListManager<TrackItem>('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.ts

@@ -1,43 +0,0 @@
-// src/core/compose/base.ts
-
-/**
- * Configuration for component creation
- */
-export interface ComponentConfig {
-  [key: string]: any;
-}
-
-/**
- * Basic component interface
- */
-export interface Component {
-  /**
-   * Component element
-   */
-  element: HTMLElement | null;
-  
-  /**
-   * Component configuration
-   */
-  config: ComponentConfig;
-  
-  /**
-   * Setup method
-   * @returns Component for chaining
-   */
-  setup: () => Component;
-}
-
-/**
- * Creates a basic component with minimal structure
- * 
- * @param config - Component configuration
- * @returns Basic component structure
- */
-export const createComponent = (config: ComponentConfig = {}): Component => ({
-  element: null,
-  config,
-  setup() {
-    return this;
-  }
-});

package/src/core/compose/component.ts

@@ -1,255 +0,0 @@
-// src/core/compose/component.ts
-/**
- * @module core/compose/component
- * @description Core utilities for component composition and creation with built-in mobile support
- */
-
-import { createElement, CreateElementOptions, removeEventHandlers } from '../dom/create';
-import {
-  normalizeEvent,
-  hasTouchSupport,
-  TOUCH_CONFIG,
-  PASSIVE_EVENTS
-} from '../utils/mobile';
-
-/**
- * Touch state interface to track touch interactions
- */
-export interface TouchState {
-  startTime: number;
-  startPosition: { x: number; y: number };
-  isTouching: boolean;
-  activeTarget: EventTarget | null;
-}
-
-/**
- * Base component interface with prefix utilities
- */
-export interface BaseComponent {
-  config: Record<string, any>;
-  componentName?: string;
-  getClass: (name: string) => string;
-  getModifierClass: (base: string, modifier: string) => string;
-  getElementClass: (base: string, element: string) => string;
-  touchState: TouchState;
-  updateTouchState: (event: Event, status: 'start' | 'end') => void;
-}
-
-/**
- * Element component extends base with element
- */
-export interface ElementComponent extends BaseComponent {
-  element: HTMLElement;
-  addClass: (...classes: string[]) => ElementComponent;
-  destroy: () => void;
-}
-
-/**
- * Options for withElement enhancer
- */
-export interface WithElementOptions {
-  tag?: string;
-  componentName?: string;
-  attrs?: Record<string, any>;
-  className?: string | string[];
-  forwardEvents?: Record<string, boolean | ((component: any, event: Event) => boolean)>;
-  interactive?: boolean;
-}
-
-/**
- * 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
- */
-const withPrefix = (prefix: string) => ({
-  /**
-   * Gets a prefixed class name
-   * @param {string} name - Base class name
-   * @returns {string} Prefixed class name
-   */
-  getClass: (name: string): string => `${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: string, modifier: string): string => `${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: string, element: string): string => `${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
- * @returns {BaseComponent} Base component with prefix utilities
- */
-export const createBase = (config: Record<string, any> = {}): BaseComponent => ({
-  config,
-  componentName: config.componentName,
-  ...withPrefix(config.prefix || 'mtrl'),
-
-  /**
-   * Manages the touch interaction state for the component.
-   */
-  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: Event, status: 'start' | 'end'): void {
-    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 {WithElementOptions} options - Element creation options
- * @returns {Function} Component enhancer
- */
-export const withElement = (options: WithElementOptions = {}) => 
-  <T extends BaseComponent>(component: T): T & ElementComponent => {
-    /**
-     * Handles the start of a touch interaction.
-     */
-    const handleTouchStart = (event: Event): void => {
-      base.updateTouchState(event, 'start');
-      element.classList.add(`${base.getClass('touch-active')}`);
-
-      if (options.forwardEvents?.touchstart && 'emit' in component) {
-        (component as any).emit('touchstart', normalizeEvent(event));
-      }
-    };
-
-    /**
-     * Handles the end of a touch interaction.
-     */
-    const handleTouchEnd = (event: Event): void => {
-      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 && 'emit' in component) {
-        (component as any).emit('tap', normalizeEvent(event));
-      }
-
-      if (options.forwardEvents?.touchend && 'emit' in component) {
-        (component as any).emit('touchend', normalizeEvent(event));
-      }
-    };
-
-    /**
-     * Handles touch movement.
-     */
-    const handleTouchMove = (event: Event): void => {
-      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 && 'emit' in component) {
-        (component as any).emit('swipe', {
-          direction: deltaX > 0 ? 'right' : 'left',
-          deltaX,
-          deltaY
-        });
-      }
-
-      if (options.forwardEvents?.touchmove && 'emit' in component) {
-        (component as any).emit('touchmove', { ...normalized, deltaX, deltaY });
-      }
-    };
-
-    // Get the base component for reference
-    const base = component;
-
-    // Create element options from component options
-    const elementOptions: CreateElementOptions = {
-      tag: options.tag || 'div',
-      className: [
-        base.getClass(options.componentName || base.componentName || 'component'),
-        hasTouchSupport() && options.interactive ? base.getClass('interactive') : null,
-        ...(Array.isArray(options.className) ? options.className : [options.className])
-      ].filter(Boolean),
-      attrs: options.attrs || {},
-      forwardEvents: options.forwardEvents || {},
-      context: component // Pass component as context for events
-    };
-
-    // Create the element with appropriate classes
-    const element = createElement(elementOptions);
-
-    // 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 {
-      ...component,
-      element,
-
-      /**
-       * Adds CSS classes to the element
-       * @param {...string} classes - CSS classes to add
-       * @returns {ElementComponent} Component instance for chaining
-       */
-      addClass(...classes: string[]): ElementComponent {
-        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(): void {
-        if (hasTouchSupport() && options.interactive) {
-          element.removeEventListener('touchstart', handleTouchStart);
-          element.removeEventListener('touchend', handleTouchEnd);
-          element.removeEventListener('touchmove', handleTouchMove);
-        }
-        
-        // Clean up any registered event handlers using our new utility
-        removeEventHandlers(element);
-        
-        element.remove();
-      }
-    };
-  };

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

@@ -1,79 +0,0 @@
-// src/core/compose/features/badge.ts
-
-import { BaseComponent, ElementComponent } from '../component';
-import createBadge from '../../../components/badge';
-import { PREFIX } from '../../config';
-
-/**
- * Configuration for badge feature
- */
-export interface BadgeConfig {
-  /**
-   * Badge content to display
-   */
-  badge?: string | number;
-  
-  /**
-   * Custom badge configuration
-   */
-  badgeConfig?: {
-    variant?: string;
-    color?: string;
-    size?: string;
-    position?: string;
-    max?: number;
-    [key: string]: any;
-  };
-  
-  /**
-   * CSS class prefix
-   */
-  prefix?: string;
-  
-  [key: string]: any;
-}
-
-/**
- * Component with badge capabilities
- */
-export interface BadgeComponent extends BaseComponent {
-  /**
-   * Badge component instance
-   */
-  badge?: any;
-}
-
-/**
- * Adds badge functionality to a component
- * Creates and configures a badge component attached to the main component
- * 
- * @param {BadgeConfig} config - Badge configuration
- * @returns {Function} Component enhancer with badge functionality
- */
-export const withBadge = <T extends BadgeConfig>(config: T) => 
-  <C extends ElementComponent>(component: C): C & BadgeComponent => {
-    // Only create badge if content is provided
-    if (config.badge === undefined) {
-      return component as C & BadgeComponent;
-    }
-    
-    // Create badge configuration
-    const badgeConfig = {
-      content: config.badge,
-      standalone: false,
-      target: component.element,
-      ...config.badgeConfig || {},
-      // Default to top-right position if not specified
-      position: config.badgeConfig?.position || 'top-right',
-      // Set prefix to match parent component
-      prefix: config.prefix || PREFIX
-    };
-    
-    // Create badge component
-    const badge = createBadge(badgeConfig);
-    
-    return {
-      ...component,
-      badge
-    };
-  };