mtrl 0.3.8 → 0.4.0

package/src/components/list/config.ts

@@ -1,63 +0,0 @@
-// src/components/list/config.ts
-import { 
-  createComponentConfig, 
-  createElementConfig,
-  BaseComponentConfig 
-} from '../../core/config/component-config';
-import { ListConfig, BaseComponent } from './types';
-
-/**
- * Default configuration for the List component
- * 
- * Provides reasonable defaults for creating lists according
- * to Material Design 3 guidelines.
- * 
- * @category Components
- * @internal
- */
-export const defaultConfig: ListConfig = {
-  type: 'default',
-  layout: 'horizontal',
-  items: []
-};
-
-/**
- * Creates the base configuration for List component
- * 
- * Merges user-provided configuration with default values and ensures
- * all required properties have values.
- * 
- * @param {ListConfig} config - User provided configuration
- * @returns {ListConfig} Complete configuration with defaults applied
- * 
- * @category Components
- * @internal
- */
-export const createBaseConfig = (config: ListConfig = {}): ListConfig => 
-  createComponentConfig(defaultConfig, config, 'list') as ListConfig;
-
-/**
- * Generates element configuration for the List component
- * 
- * Transforms the user-friendly ListConfig into the internal format required
- * by the withElement function, setting appropriate attributes for accessibility
- * and proper DOM structure.
- * 
- * @param {ListConfig} config - List configuration
- * @returns {Object} Element configuration object for withElement
- * 
- * @category Components
- * @internal
- */
-export const getElementConfig = (config: ListConfig) => 
-  createElementConfig(config, {
-    tag: 'div',
-    role: config.type === 'default' ? 'list' : 'listbox',
-    attrs: {
-      'aria-multiselectable': config.type === 'multi' ? 'true' : undefined
-    },
-    componentName: 'list',
-    className: config.class
-  });
-
-export default defaultConfig;

package/src/components/list/features.ts

@@ -1,229 +0,0 @@
-// src/components/list/features.ts
-import { 
-  ListConfig, 
-  ListItemConfig, 
-  ListItemData, 
-  BaseComponent,
-  SelectionChangeEvent
-} from './types';
-import { createDivider, createSectionTitle } from './utils';
-import createListItem from './list-item';
-
-/**
- * Enhances component with list content and functionality
- * 
- * Higher-order function that adds list content rendering, selection management,
- * keyboard navigation, and item management capabilities to a component.
- * 
- * @param {ListConfig} config - List configuration
- * @returns {Function} Higher-order function that adds list features to component
- * 
- * @internal This is an internal implementation detail for the List component
- */
-export const withListContent = (config: ListConfig) => 
-  (component: BaseComponent): BaseComponent => {
-    const { element } = component;
-    const prefix = component.prefix || config.prefix || '';
-    const items = new Map<string, ListItemData>();
-    const selectedItems = new Set<string>();
-
-    // Set list type
-    element.setAttribute('data-type', config.type || 'default');
-
-    // Handle keyboard navigation
-    const handleKeyDown = (event: KeyboardEvent): void => {
-      const focusedItem = document.activeElement as HTMLElement;
-      if (!focusedItem?.classList.contains(`${prefix}-list-item`)) return;
-
-      const listItems = Array.from(element.querySelectorAll(`.${prefix}-list-item`)) as HTMLElement[];
-      const currentIndex = listItems.indexOf(focusedItem);
-
-      switch (event.key) {
-        case 'ArrowDown':
-        case 'ArrowRight':
-          event.preventDefault();
-          const nextItem = listItems[currentIndex + 1];
-          if (nextItem) nextItem.focus();
-          break;
-        case 'ArrowUp':
-        case 'ArrowLeft':
-          event.preventDefault();
-          const prevItem = listItems[currentIndex - 1];
-          if (prevItem) prevItem.focus();
-          break;
-        case 'Home':
-          event.preventDefault();
-          listItems[0]?.focus();
-          break;
-        case 'End':
-          event.preventDefault();
-          listItems[listItems.length - 1]?.focus();
-          break;
-        case ' ':
-        case 'Enter':
-          event.preventDefault();
-          handleItemClick(focusedItem);
-          break;
-      }
-    };
-
-    // Handle item selection
-    const handleItemClick = (itemElement: HTMLElement): void => {
-      const id = itemElement.dataset.id;
-      if (!id) return;
-
-      const itemData = items.get(id);
-      if (!itemData || itemData.disabled) return;
-
-      switch (config.type) {
-        case 'single':
-          // Deselect previously selected item
-          selectedItems.forEach(selectedId => {
-            const selected = items.get(selectedId);
-            if (selected) {
-              selected.element.classList.remove(`${prefix}-list-item--selected`);
-              selected.element.setAttribute('aria-selected', 'false');
-            }
-          });
-          selectedItems.clear();
-
-          // Select new item
-          itemElement.classList.add(`${prefix}-list-item--selected`);
-          itemElement.setAttribute('aria-selected', 'true');
-          selectedItems.add(id);
-          break;
-
-        case 'multi':
-          const isSelected = selectedItems.has(id);
-          if (isSelected) {
-            itemElement.classList.remove(`${prefix}-list-item--selected`);
-            itemElement.setAttribute('aria-selected', 'false');
-            selectedItems.delete(id);
-          } else {
-            itemElement.classList.add(`${prefix}-list-item--selected`);
-            itemElement.setAttribute('aria-selected', 'true');
-            selectedItems.add(id);
-          }
-          break;
-      }
-
-      component.emit?.('selectionChange', {
-        selected: Array.from(selectedItems),
-        item: itemData,
-        type: config.type
-      } as SelectionChangeEvent);
-    };
-
-    // Create items from configuration
-    const createItems = (itemsConfig: ListItemConfig[] = [], container: HTMLElement = element): void => {
-      itemsConfig.forEach((itemConfig, index) => {
-        if (itemConfig.divider) {
-          container.appendChild(createDivider(prefix));
-          return;
-        }
-
-        const item = createListItem({
-          ...itemConfig,
-          layout: config.layout || 'horizontal',
-          role: config.type === 'radio' ? 'radio' : 'option'
-        });
-
-        item.element.dataset.id = itemConfig.id;
-        item.element.tabIndex = index === 0 ? 0 : -1;
-        items.set(itemConfig.id, item);
-
-        if (itemConfig.selected) {
-          selectedItems.add(itemConfig.id);
-          item.element.classList.add(`${prefix}-list-item--selected`);
-          item.element.setAttribute('aria-selected', 'true');
-        }
-
-        container.appendChild(item.element);
-      });
-    };
-
-    // Create sections if configured
-    if (config.sections?.length) {
-      config.sections.forEach(section => {
-        const sectionEl = document.createElement('div');
-        sectionEl.className = `${prefix}-list-section`;
-        sectionEl.setAttribute('role', 'group');
-        if (section.title) {
-          sectionEl.appendChild(createSectionTitle(section.title, prefix));
-        }
-        createItems(section.items, sectionEl);
-        element.appendChild(sectionEl);
-      });
-    } else if (config.items) {
-      createItems(config.items);
-    }
-
-    // Add event listeners
-    element.addEventListener('click', (event: MouseEvent) => {
-      const target = event.target as HTMLElement;
-      const item = target.closest(`.${prefix}-list-item`) as HTMLElement;
-      if (item) handleItemClick(item);
-    });
-
-    element.addEventListener('keydown', handleKeyDown);
-
-    // Clean up
-    if (component.lifecycle) {
-      const originalDestroy = component.lifecycle.destroy;
-      component.lifecycle.destroy = () => {
-        items.clear();
-        selectedItems.clear();
-        element.removeEventListener('keydown', handleKeyDown);
-        originalDestroy?.();
-      };
-    }
-
-    return {
-      ...component,
-      items,
-      selectedItems,
-
-      // Public methods
-      getSelected: () => Array.from(selectedItems),
-
-      setSelected: (ids: string[]) => {
-        selectedItems.clear();
-        items.forEach((item, id) => {
-          const isSelected = ids.includes(id);
-          item.element.classList.toggle(`${prefix}-list-item--selected`, isSelected);
-          item.element.setAttribute('aria-selected', isSelected.toString());
-          if (isSelected) selectedItems.add(id);
-        });
-        component.emit?.('selectionChange', {
-          selected: Array.from(selectedItems),
-          type: config.type
-        } as SelectionChangeEvent);
-      },
-
-      addItem: (itemConfig: ListItemConfig) => {
-        if (items.has(itemConfig.id)) return;
-
-        const item = createListItem({
-          ...itemConfig,
-          layout: config.layout || 'horizontal'
-        });
-
-        item.element.dataset.id = itemConfig.id;
-        items.set(itemConfig.id, item);
-        element.appendChild(item.element);
-
-        component.emit?.('itemAdded', { id: itemConfig.id, item });
-      },
-
-      removeItem: (id: string) => {
-        const item = items.get(id);
-        if (!item) return;
-
-        item.element.remove();
-        items.delete(id);
-        selectedItems.delete(id);
-
-        component.emit?.('itemRemoved', { id, item });
-      }
-    };
-  };

package/src/components/list/index.ts

@@ -1,67 +0,0 @@
-// src/components/list/index.ts
-
-/**
- * @module List
- * 
- * List component following Material Design 3 guidelines.
- * Lists are continuous, vertical indexes of text or images.
- * 
- * Features:
- * - Multiple selection modes (single, multiple, none)
- * - Horizontal and vertical layouts
- * - Support for sections and dividers
- * - Leading and trailing elements (icons, avatars, etc.)
- * - Customizable item content (headline, supporting text, etc.)
- * - Keyboard navigation and accessibility
- * 
- * @example
- * ```typescript
- * // Create a simple list with items
- * const userList = createList({
- *   type: 'single', // Single selection mode
- *   items: [
- *     {
- *       id: 'user1',
- *       headline: 'Jane Smith',
- *       supportingText: 'Software Engineer',
- *       leading: '<svg>...</svg>'
- *     },
- *     {
- *       id: 'user2',
- *       headline: 'John Doe',
- *       supportingText: 'Product Manager',
- *       leading: '<svg>...</svg>'
- *     }
- *   ]
- * });
- * 
- * // Attach to DOM and add selection handler
- * container.appendChild(userList.element);
- * userList.on('selectionChange', (event) => {
- *   console.log('Selected:', event.selected);
- * });
- * ```
- * 
- * @category Components
- */
-
-export { default } from './list';
-export { default as createListItem } from './list-item';
-export {
-  // Types
-  ListConfig,
-  ListComponent,
-  ListItemConfig,
-  ListSectionConfig,
-  ListType,
-  ListLayout,
-  ListItemLayout,
-
-  // Constants
-  LIST_TYPES,
-  LIST_LAYOUTS,
-  LIST_ITEM_LAYOUTS,
-  LIST_CLASSES,
-  LIST_SCHEMA,
-  LIST_ITEM_STATES
-} from './types';

package/src/components/list/list-item.ts

@@ -1,163 +0,0 @@
-// src/components/list/list-item.ts
-import { PREFIX } from '../../core/config';
-import { pipe } from '../../core/compose';
-import { createBase, withElement } from '../../core/compose/component';
-import { withEvents, withDisabled } from '../../core/compose/features';
-import { ListItemConfig } from './types';
-import { createElement, getListClass } from './utils';
-
-/**
- * Creates list item content based on configuration
- * 
- * Higher-order function that enhances a component with list item content structure
- * according to Material Design 3 guidelines. Handles the creation and arrangement of
- * item elements like headline text, supporting text, leading/trailing components, etc.
- * 
- * @param {ListItemConfig} config - List item configuration
- * @returns {Function} Function that enhances a component with list item content
- * 
- * @internal
- */
-const withItemContent = (config: ListItemConfig) => (component: any): any => {
-  const { element } = component;
-  const prefix = config.prefix || PREFIX;
-  const isVertical = config.layout === 'vertical';
-
-  // Create content container
-  const content = createElement('div', `${prefix}-${getListClass('ITEM_CONTENT')}`);
-
-  // Add leading content (icon/avatar)
-  if (config.leading) {
-    const leading = createElement('div', `${prefix}-${getListClass('ITEM_LEADING')}`);
-    if (typeof config.leading === 'string') {
-      leading.innerHTML = config.leading;
-    } else {
-      leading.appendChild(config.leading);
-    }
-    element.appendChild(leading);
-  }
-
-  // Text wrapper for proper alignment
-  const textWrapper = createElement('div', `${prefix}-${getListClass('ITEM_TEXT')}`);
-
-  // Add overline text (vertical only)
-  if (isVertical && config.overline) {
-    const overline = createElement('div', `${prefix}-${getListClass('ITEM_OVERLINE')}`, config.overline);
-    textWrapper.appendChild(overline);
-  }
-
-  // Add headline (primary text)
-  if (config.headline) {
-    const headline = createElement('div', `${prefix}-${getListClass('ITEM_HEADLINE')}`, config.headline);
-    textWrapper.appendChild(headline);
-  }
-
-  // Add supporting text (secondary text)
-  if (config.supportingText) {
-    const supporting = createElement('div', `${prefix}-${getListClass('ITEM_SUPPORTING')}`, config.supportingText);
-    textWrapper.appendChild(supporting);
-  }
-
-  content.appendChild(textWrapper);
-
-  // Add meta information (vertical only)
-  if (isVertical && config.meta) {
-    const meta = createElement('div', `${prefix}-${getListClass('ITEM_META')}`);
-    if (typeof config.meta === 'string') {
-      meta.textContent = config.meta;
-    } else {
-      meta.appendChild(config.meta);
-    }
-    content.appendChild(meta);
-  }
-
-  element.appendChild(content);
-
-  // Add trailing content (icon/meta)
-  if (config.trailing) {
-    const trailing = createElement('div', `${prefix}-${getListClass('ITEM_TRAILING')}`);
-    if (typeof config.trailing === 'string') {
-      trailing.innerHTML = config.trailing;
-    } else {
-      trailing.appendChild(config.trailing);
-    }
-    element.appendChild(trailing);
-  }
-
-  // Handle selected state
-  if (config.selected) {
-    element.setAttribute('aria-selected', 'true');
-    element.classList.add(`${prefix}-${getListClass('ITEM')}--selected`);
-  }
-
-  return component;
-};
-
-/**
- * Creates a list item component
- * 
- * Creates an individual list item with customizable content following Material Design 3
- * list item patterns. List items can have different layouts, content structures, and 
- * visual states (selected, disabled, etc.).
- * 
- * @param {ListItemConfig} config - List item configuration
- * @returns {Object} List item component instance
- * 
- * @category Components
- * 
- * @example
- * ```typescript
- * // Create a standard list item
- * const listItem = createListItem({
- *   id: 'user1',
- *   headline: 'Alex Johnson',
- *   supportingText: 'Software Engineer',
- *   leading: '<span class="material-icons">person</span>'
- * });
- * 
- * // Create a vertical layout list item with more content
- * const detailedItem = createListItem({
- *   id: 'event1',
- *   layout: 'vertical',
- *   overline: 'UPCOMING EVENT',
- *   headline: 'Team Meeting',
- *   supportingText: 'Discussion of quarterly goals',
- *   meta: 'Tomorrow, 2:00 PM',
- *   leading: '<span class="material-icons">event</span>',
- *   trailing: '<span class="material-icons">more_vert</span>'
- * });
- * 
- * // Create a selected list item
- * const selectedItem = createListItem({
- *   id: 'file1',
- *   headline: 'Project Proposal.pdf',
- *   supportingText: '2.4 MB',
- *   selected: true
- * });
- * ```
- */
-const createListItem = (config: ListItemConfig): any => {
-  const baseConfig = {
-    ...config,
-    componentName: 'list-item',
-    prefix: PREFIX
-  };
-
-  const layoutClass = config.layout === 'vertical' ? 'vertical' : '';
-  const combinedClass = `${layoutClass} ${config.class || ''}`.trim();
-
-  return pipe(
-    createBase,
-    withEvents(),
-    withElement({
-      tag: 'div',
-      role: config.role || 'listitem',
-      componentName: 'list-item',
-      className: combinedClass
-    }),
-    withDisabled(baseConfig),
-    withItemContent(baseConfig)
-  )(baseConfig);
-};
-
-export default createListItem;

package/src/components/list/list.ts

@@ -1,108 +0,0 @@
-// src/components/list/list.ts
-import { pipe } from '../../core/compose';
-import { createBase, withElement } from '../../core/compose/component';
-import { withEvents, withDisabled, withLifecycle } from '../../core/compose/features';
-import { withAPI } from './api';
-import { withListContent } from './features';
-import { ListConfig } from './types';
-import { createBaseConfig, getElementConfig } from './config';
-
-/**
- * Creates a List component
- * 
- * Lists display a collection of items in a vertical arrangement. They can be configured
- * with different selection modes, layouts, and content structures following Material
- * Design 3 guidelines.
- * 
- * @param {ListConfig} config - List configuration options
- * @returns {ListComponent} List component instance with methods for managing items and selection
- * 
- * @throws {Error} If list creation fails due to invalid configuration
- * 
- * @category Components
- * 
- * @example
- * ```typescript
- * // Create a simple list with single selection
- * const contactList = createList({
- *   type: 'single',
- *   items: [
- *     {
- *       id: 'contact1',
- *       headline: 'Alex Johnson',
- *       supportingText: 'alex@example.com',
- *       leading: '<span class="material-icons">person</span>',
- *       trailing: '<span class="material-icons">chevron_right</span>'
- *     },
- *     {
- *       id: 'contact2',
- *       headline: 'Sam Taylor',
- *       supportingText: 'sam@example.com',
- *       leading: '<span class="material-icons">person</span>',
- *       trailing: '<span class="material-icons">chevron_right</span>'
- *     }
- *   ]
- * });
- * 
- * // Create a list with sections
- * const categorizedList = createList({
- *   type: 'multi',
- *   sections: [
- *     {
- *       id: 'section1',
- *       title: 'Favorites',
- *       items: [
- *         { id: 'item1', headline: 'Item 1' },
- *         { id: 'item2', headline: 'Item 2' }
- *       ]
- *     },
- *     {
- *       id: 'section2',
- *       title: 'Recent',
- *       items: [
- *         { id: 'item3', headline: 'Item 3' },
- *         { id: 'item4', headline: 'Item 4' }
- *       ]
- *     }
- *   ]
- * });
- * 
- * // Handle selection change
- * contactList.on('selectionChange', (event) => {
- *   console.log('Selected IDs:', event.selected);
- * });
- * 
- * // Programmatically select items
- * contactList.setSelected(['contact2']);
- * 
- * // Add a new item
- * contactList.addItem({
- *   id: 'contact3',
- *   headline: 'Jamie Smith',
- *   supportingText: 'jamie@example.com'
- * });
- * ```
- */
-const createList = (config: ListConfig = {}): any => {
-  const baseConfig = createBaseConfig(config);
-
-  try {
-    return pipe(
-      createBase,
-      withEvents(),
-      withElement(getElementConfig(baseConfig)),
-      withDisabled(baseConfig),
-      withLifecycle(),
-      withListContent(baseConfig),
-      comp => withAPI({
-        disabled: comp.disabled,
-        lifecycle: comp.lifecycle
-      })(comp)
-    )(baseConfig);
-  } catch (error) {
-    console.error('List creation error:', error instanceof Error ? error.message : String(error));
-    throw new Error(`Failed to create list: ${error instanceof Error ? error.message : String(error)}`);
-  }
-};
-
-export default createList;