mtrl-addons 0.1.2 → 0.2.1

package/src/components/list/list.ts

@@ -1,234 +0,0 @@
-/**
- * mtrl-addons List Component
- *
- * Next-generation list component built on the collection system.
- * Uses mtrl's compose system with addons-specific features.
- * Follows mtrl patterns for component architecture.
- */
-
-import type {
-  ListConfig,
-  ListComponent,
-  ListItem,
-  ListPerformanceMetrics,
-} from "./types";
-
-// Import mtrl compose system
-import { pipe } from "mtrl/src/core/compose/pipe";
-import { createBase, withElement } from "mtrl/src/core/compose/component";
-import { withEvents, withLifecycle } from "mtrl/src/core/compose/features";
-
-// Import list-specific utilities
-import { createBaseConfig, getElementConfig, getApiConfig } from "./config";
-import { LIST_CLASSES } from "./constants";
-import { withListManager } from "./features/list-manager";
-import { withAPI } from "./api";
-
-/**
- * Creates list-specific configuration from user config
- */
-function createListConfig<T extends ListItem = ListItem>(
-  config: ListConfig<T>
-) {
-  return {
-    ...config,
-    componentName: "list",
-    prefix: "mtrl",
-    className: config.className || "addons-list",
-    ariaLabel: config.ariaLabel || "List",
-    interactive: true, // Enable touch support
-  };
-}
-
-/**
- * Default list item template
- */
-function getDefaultListTemplate() {
-  return {
-    tag: "div",
-    className: "mtrl-list-item",
-    attributes: { "data-id": "{{id}}", role: "listitem" },
-    children: [
-      {
-        tag: "div",
-        className: "mtrl-list-item__content",
-        textContent: "{{name || id}}",
-      },
-    ],
-  };
-}
-
-/**
- * Creates a new List component using the 3-layer architecture
- *
- * The List component provides high-performance virtual scrolling with:
- * - Collection (Data Layer): Pure data management with API integration
- * - List Manager (Performance Layer): Virtual scrolling, element recycling
- * - List Component (Presentation Layer): mtrl integration and user interface
- *
- * This component supports both static data and API-driven dynamic data with
- * infinite scrolling, intelligent caching, and optimal DOM performance.
- *
- * @param {ListConfig<T>} config - List configuration options
- * @returns {ListComponent<T>} A fully configured list component instance
- *
- * @throws {Error} If list creation fails due to invalid configuration
- *
- * @example
- * ```typescript
- * // Create a simple static list
- * const simpleList = createList({
- *   items: ['Apple', 'Banana', 'Cherry'],
- *   container: '#my-list'
- * });
- *
- * // Create an API-driven list with virtual scrolling
- * const apiList = createList({
- *   collection: {
- *     baseUrl: 'https://api.example.com',
- *     endpoint: '/items',
- *     pageSize: 50
- *   },
- *   scroll: {
- *     virtual: true,
- *     itemSize: 60,
- *     overscan: 5
- *   },
- *   selection: {
- *     enabled: true,
- *     mode: 'multiple'
- *   },
- *   template: (item, index) => `
- *     <div class="item">
- *       <h3>${item.title}</h3>
- *       <p>${item.description}</p>
- *     </div>
- *   `,
- *   on: {
- *     onItemClick: (item, index) => {
- *       console.log('Clicked:', item);
- *     },
- *     onLoadMore: async (direction) => {
- *       console.log('Load more:', direction);
- *     }
- *   }
- * });
- *
- * // Add to DOM
- * document.querySelector('#app').appendChild(apiList.element);
- *
- * // Use API methods
- * await apiList.loadData();
- * apiList.selectItems([0, 1, 2]);
- * await apiList.scrollToIndex(100);
- * ```
- *
- * @category Components
- * @module components/list
- */
-export const createList = <T = any>(
-  config: ListConfig<T> = {}
-): ListComponent<T> => {
-  try {
-    // Validate and create base configuration
-    const baseConfig = createBaseConfig(config as any);
-
-    console.log(`📋 Creating List component with simplified architecture:
-    - List Manager (with built-in Collection): ${
-      baseConfig.items && baseConfig.items.length > 0 ? "Static" : "API"
-    } data source
-    - Virtual scrolling: true, Element recycling: true
-    - Template: ${!!baseConfig.template}, Selection: ${!!baseConfig.selection
-      ?.enabled}`);
-
-    // Create the List component through functional composition
-    const component = pipe(
-      // 1. Foundation layer
-      createBase, // Base component with event system
-      withEvents(), // Event handling capabilities
-      withElement(getElementConfig(baseConfig)), // DOM element creation
-
-      // 2. Core integration layer
-      withListManager<T>(baseConfig as any), // Simplified List Manager with built-in Collection
-
-      // 3. Component lifecycle
-      withLifecycle(), // Lifecycle management
-
-      // 4. Public API layer
-      (comp) => withAPI({ component: comp as any, config: baseConfig })(comp) // Clean public API
-    )(baseConfig);
-
-    // Set up initial event handlers from config
-    if (baseConfig.on && typeof component.on === "function") {
-      // Data events
-      if (baseConfig.on.onLoadMore) {
-        component.on("load:more", ({ direction }: { direction: string }) => {
-          baseConfig.on!.onLoadMore!(direction as any);
-        });
-      }
-
-      // Scroll events
-      if (baseConfig.on.onScroll) {
-        component.on(
-          "scroll:change",
-          ({
-            scrollTop,
-            direction,
-          }: {
-            scrollTop: number;
-            direction: string;
-          }) => {
-            baseConfig.on!.onScroll!(scrollTop, direction as any);
-          }
-        );
-      }
-
-      // Viewport events
-      if (baseConfig.on.onViewportChange) {
-        component.on(
-          "viewport:change",
-          ({ visibleRange }: { visibleRange: any }) => {
-            baseConfig.on!.onViewportChange!(visibleRange);
-          }
-        );
-      }
-
-      // Selection events
-      if (baseConfig.on.onSelectionChange) {
-        component.on(
-          "selection:change",
-          ({
-            selectedItems,
-            selectedIndices,
-          }: {
-            selectedItems: T[];
-            selectedIndices: number[];
-          }) => {
-            baseConfig.on!.onSelectionChange!(
-              selectedItems as any,
-              selectedIndices
-            );
-          }
-        );
-      }
-
-      // Item events are handled in orchestration layer
-    }
-
-    // Initialize component
-    if (component.lifecycle?.init) {
-      component.lifecycle.init();
-    }
-
-    console.log("✅ List component created successfully");
-    return component as ListComponent<T>;
-  } catch (error) {
-    console.error("❌ List creation error:", error);
-    throw new Error(`Failed to create list: ${(error as Error).message}`);
-  }
-};
-
-/**
- * Export the main component creation function
- */
-export default createList;

package/src/core/collection/base-collection.ts

@@ -1,100 +0,0 @@
-/**
- * Base Collection (Minimal Core)
- *
- * Pure data storage with zero features - everything else is plugins
- */
-
-import type { CollectionItem, CollectionConfig, BaseCollection } from "./types";
-import { createCollectionState, type CollectionDataState } from "./state";
-import { createCollectionEventEmitter } from "./events";
-import { COLLECTION_DEFAULTS, DATA_LOGGING } from "./constants";
-
-/**
- * Creates the minimal base collection
- * All features (persistence, validation, etc.) are added via plugins
- */
-export function createBaseCollection<T extends CollectionItem = CollectionItem>(
-  config: CollectionConfig<T> = {}
-): BaseCollection<T> {
-  // Initialize minimal state
-  const stateStore = createCollectionState<T>({
-    items: config.items || [],
-    totalCount: config.items?.length || 0,
-    pageSize: config.pageSize || COLLECTION_DEFAULTS.PAGE_SIZE,
-  });
-
-  // Event system
-  const eventEmitter = createCollectionEventEmitter<T>();
-
-  // Lifecycle tracking
-  let isDestroyed = false;
-
-  /**
-   * Base collection API - minimal data operations only
-   */
-  const baseCollection: BaseCollection<T> = {
-    // Core data access
-    getItems(): T[] {
-      return stateStore.get().items;
-    },
-
-    getItem(id: string): T | undefined {
-      return stateStore.get().items.find((item) => item.id === id);
-    },
-
-    getSize(): number {
-      return stateStore.get().items.length;
-    },
-
-    getTotalCount(): number {
-      return stateStore.get().totalCount;
-    },
-
-    // Basic state
-    isLoading(): boolean {
-      return stateStore.get().loading;
-    },
-
-    getError(): Error | null {
-      return stateStore.get().error;
-    },
-
-    // State management (for plugins)
-    getState(): CollectionDataState<T> {
-      return stateStore.get();
-    },
-
-    setState(newState: Partial<CollectionDataState<T>>): void {
-      stateStore.set(newState);
-    },
-
-    // Event system (for plugins)
-    subscribe(observer: (payload: any) => void) {
-      return eventEmitter.subscribe(observer);
-    },
-
-    emit(event: string, data: any): void {
-      eventEmitter.emit(event as any, data);
-    },
-
-    // Lifecycle
-    destroy(): void {
-      if (isDestroyed) return;
-
-      stateStore.destroy();
-      eventEmitter.destroy();
-      isDestroyed = true;
-
-      console.log(`${DATA_LOGGING.PREFIX} Base collection destroyed`);
-    },
-
-    // Plugin support
-    _config: config,
-    _stateStore: stateStore,
-    _eventEmitter: eventEmitter,
-  };
-
-  console.log(`${DATA_LOGGING.PREFIX} Base collection created`);
-
-  return baseCollection;
-}

package/src/core/collection/collection-composer.ts

@@ -1,178 +0,0 @@
-/**
- * Collection Composer (Following Blueprint Architecture)
- *
- * Uses mtrl's pipe composition pattern to build full Collection from plugins
- */
-
-import type { CollectionItem, CollectionConfig, Collection } from "./types";
-import { createBaseCollection } from "./base-collection";
-import { withLoading } from "./features/api/loading";
-import { withDataOperations } from "./features/operations/data-operations";
-
-// TODO: Import from mtrl core when available
-// For now, implement simple pipe function
-function pipe<T>(...fns: Function[]): (value: T) => any {
-  return (value: T) => fns.reduce((acc, fn) => fn(acc), value);
-}
-
-/**
- * Creates a full Collection following the blueprint architecture
- *
- * Uses functional composition to build features from plugins
- */
-export function createCollection<T extends CollectionItem = CollectionItem>(
-  config: CollectionConfig<T> = {}
-): Collection<T> {
-  // Create full collection using composition pattern
-  let collection = createBaseCollection<T>(config);
-
-  // Apply plugins sequentially
-  collection = withDataOperations<T>()(collection);
-  collection = withLoading<T>({
-    pageSize: config.pageSize,
-    sequential: true,
-  })(collection);
-
-  // TODO: Add more plugins as they're created
-  // collection = withValidation<T>(config.validation)(collection);
-  // collection = withCaching<T>(config.cache)(collection);
-  // collection = withPersistence<T>(config.persistence)(collection);
-
-  // The collection now has all the features from plugins
-  // but still needs some additional methods to match the full Collection interface
-
-  /**
-   * Data queries (could be moved to a plugin later)
-   */
-  const filter = (predicate: (item: T) => boolean): T[] => {
-    return collection.getItems().filter(predicate);
-  };
-
-  const sort = (compareFn: (a: T, b: T) => number): T[] => {
-    const items = [...collection.getItems()];
-    return items.sort(compareFn);
-  };
-
-  const search = (query: string, fields: string[] = ["id"]): T[] => {
-    if (query.length < 2) {
-      return collection.getItems();
-    }
-
-    const searchQuery = query.toLowerCase();
-    return collection.getItems().filter((item) => {
-      return fields.some((field) => {
-        const fieldValue = (item as any)[field];
-        return (
-          fieldValue &&
-          fieldValue.toString().toLowerCase().includes(searchQuery)
-        );
-      });
-    });
-  };
-
-  const aggregate = (operations: any[]): any => {
-    const items = collection.getItems();
-    const results: Record<string, any> = {};
-
-    operations.forEach((op) => {
-      const alias = op.alias || `${op.operation}_${op.field}`;
-
-      switch (op.operation) {
-        case "count":
-          results[alias] = items.length;
-          break;
-        case "sum":
-          results[alias] = items.reduce(
-            (sum, item) => sum + ((item as any)[op.field] || 0),
-            0
-          );
-          break;
-        case "avg":
-          const sum = items.reduce(
-            (sum, item) => sum + ((item as any)[op.field] || 0),
-            0
-          );
-          results[alias] = items.length > 0 ? sum / items.length : 0;
-          break;
-        case "min":
-          results[alias] = Math.min(
-            ...items.map((item) => (item as any)[op.field] || 0)
-          );
-          break;
-        case "max":
-          results[alias] = Math.max(
-            ...items.map((item) => (item as any)[op.field] || 0)
-          );
-          break;
-        case "distinct":
-          results[alias] = [
-            ...new Set(items.map((item) => (item as any)[op.field])),
-          ];
-          break;
-      }
-    });
-
-    return results;
-  };
-
-  /**
-   * Persistence methods (stubs for now - would be added via plugins)
-   */
-  const save = async (): Promise<void> => {
-    console.warn("Save method requires persistence plugin");
-  };
-
-  const load = async (): Promise<void> => {
-    console.warn("Load method requires persistence plugin");
-  };
-
-  const clearCache = async (): Promise<void> => {
-    collection.setState({
-      items: [],
-      filteredItems: [],
-      totalCount: 0,
-    });
-  };
-
-  const sync = async (): Promise<void> => {
-    console.warn("Sync method requires sync plugin");
-  };
-
-  const prefetch = async (pages: number[]): Promise<void> => {
-    console.warn("Prefetch method requires prefetch plugin");
-  };
-
-  /**
-   * Plugin system (stub for now)
-   */
-  const use = (plugin: any): Collection<T> => {
-    console.warn("Plugin system not yet implemented");
-    return fullCollection;
-  };
-
-  // Create the full collection object
-  const fullCollection: Collection<T> = Object.assign(collection, {
-    // Data queries
-    filter,
-    sort,
-    search,
-    aggregate,
-
-    // Data persistence (stubs)
-    save,
-    load,
-    clearCache,
-    sync,
-    prefetch,
-
-    // Plugin system
-    use,
-  });
-
-  return fullCollection;
-}
-
-/**
- * Export for backward compatibility and convenience
- */
-export { createCollection as createDataCollection };