mtrl 0.1.3 → 0.2.0

package/src/components/chip/chip.ts

@@ -0,0 +1,82 @@
+// src/components/chip/chip.ts
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import {
+  withEvents,
+  withText,
+  withIcon,
+  withVariant,
+  withSize,
+  withRipple,
+  withDisabled,
+  withLifecycle
+} from '../../core/compose/features';
+import { withAPI } from './api';
+import { ChipConfig, ChipComponent, BaseComponent } from './types';
+import { createBaseConfig, getElementConfig, getApiConfig } from './config';
+
+/**
+ * Creates a new Chip component
+ * @param {ChipConfig} config - Chip configuration object
+ * @returns {ChipComponent} Chip component instance
+ */
+const createChip = (config: ChipConfig = {}): ChipComponent => {
+  const baseConfig = createBaseConfig(config);
+
+  try {
+    const chip = pipe(
+      createBase,
+      withEvents(),
+      withElement(getElementConfig(baseConfig)),
+      withVariant(baseConfig),
+      withSize(baseConfig),
+      withText(baseConfig),
+      withIcon({
+        ...baseConfig,
+        position: 'start',
+        iconContent: config.leadingIcon || config.icon
+      }),
+      withDisabled(baseConfig),
+      withRipple(baseConfig),
+      withLifecycle(),
+      comp => withAPI(getApiConfig(comp))(comp)
+    )(baseConfig);
+
+    // Add trailing icon if provided
+    if (config.trailingIcon) {
+      const trailingIconElement = document.createElement('span');
+      trailingIconElement.className = `${baseConfig.prefix}-chip-trailing-icon`;
+      trailingIconElement.innerHTML = config.trailingIcon;
+      chip.element.appendChild(trailingIconElement);
+
+      // Add event listener for remove/close action if needed
+      if (config.onTrailingIconClick) {
+        trailingIconElement.addEventListener('click', (e) => {
+          e.stopPropagation();
+          config.onTrailingIconClick!(chip as ChipComponent);
+        });
+      }
+    }
+
+    // Initialize selected state if needed
+    if (config.selected) {
+      (chip as ChipComponent).setSelected(true);
+    }
+
+    // Handle selection callback
+    if (config.onSelect) {
+      chip.element.addEventListener('click', () => {
+        if (chip.element.getAttribute('aria-disabled') !== 'true') {
+          config.onSelect!(chip as ChipComponent);
+        }
+      });
+    }
+
+    return chip as ChipComponent;
+  } catch (error) {
+    console.error('Chip creation error:', error instanceof Error ? error.message : String(error));
+    throw new Error(`Failed to create chip: ${error instanceof Error ? error.message : String(error)}`);
+  }
+};
+
+export default createChip;

package/src/components/chip/config.ts

@@ -0,0 +1,92 @@
+// src/components/chip/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig,
+  BaseComponentConfig 
+} from '../../core/config/component-config';
+import { ChipConfig, BaseComponent } from './types';
+import { CHIP_VARIANTS } from './constants';
+
+/**
+ * Default configuration for the Chip component
+ */
+export const defaultConfig: ChipConfig = {
+  variant: CHIP_VARIANTS.FILLED,
+  ripple: true
+};
+
+/**
+ * Creates the base configuration for Chip component
+ * @param {ChipConfig} config - User provided configuration
+ * @returns {ChipConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: ChipConfig = {}): ChipConfig => 
+  createComponentConfig(defaultConfig, config, 'chip') as ChipConfig;
+
+/**
+ * Generates element configuration for the Chip component
+ * @param {ChipConfig} config - Chip configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: ChipConfig) => {
+  // Create the attributes object
+  const attrs: Record<string, any> = {
+    role: 'button',
+    tabindex: '0'
+  };
+  
+  // Only add aria-disabled attribute if needed
+  if (config.disabled === true) {
+    attrs['aria-disabled'] = 'true';
+  }
+  
+  // Add aria-selected if specified
+  if (config.selected === true) {
+    attrs['aria-selected'] = 'true';
+  } else if (config.selected === false) {
+    attrs['aria-selected'] = 'false';
+  }
+
+  // Define additional classes
+  const className = [
+    config.class,
+    config.selected ? `${config.prefix}-chip--selected` : null
+  ];
+  
+  return createElementConfig(config, {
+    tag: 'div',
+    attrs,
+    className,
+    forwardEvents: {
+      click: (component: BaseComponent) => component.element.getAttribute('aria-disabled') !== 'true',
+      keydown: (component: BaseComponent, event: KeyboardEvent) => {
+        // Handle space and enter key for accessibility
+        if (event.key === ' ' || event.key === 'Enter') {
+          event.preventDefault();
+          component.element.click();
+          return true;
+        }
+        return false;
+      },
+      focus: true,
+      blur: true
+    }
+  });
+};
+
+/**
+ * Creates API configuration for the Chip component
+ * @param {BaseComponent} comp - Component with disabled and lifecycle features
+ * @returns {Object} API configuration object
+ */
+export const getApiConfig = (comp: BaseComponent) => ({
+  disabled: {
+    enable: () => comp.disabled?.enable(),
+    disable: () => comp.disabled?.disable()
+  },
+  lifecycle: {
+    destroy: () => comp.lifecycle?.destroy?.()
+  }
+});
+
+export default defaultConfig;

package/src/components/chip/constants.ts

@@ -0,0 +1,38 @@
+// src/components/chip/constants.ts
+
+/**
+ * Available variants for the Chip component
+ * @enum {string}
+ */
+export const CHIP_VARIANTS = {
+  /** Standard filled chip with solid background */
+  FILLED: 'filled',
+
+  /** Outlined chip with transparent background and border */
+  OUTLINED: 'outlined',
+
+  /** Elevated chip with shadow */
+  ELEVATED: 'elevated',
+
+  /** Assist chip for suggesting actions */
+  ASSIST: 'assist',
+
+  /** Filter chip for filtering content */
+  FILTER: 'filter',
+
+  /** Input chip for representing user input */
+  INPUT: 'input',
+
+  /** Suggestion chip for presenting options */
+  SUGGESTION: 'suggestion'
+} as const;
+
+/**
+ * Available sizes for the Chip component
+ * @enum {string}
+ */
+export const CHIP_SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+} as const;

package/src/components/chip/index.ts

@@ -0,0 +1,4 @@
+// src/components/chip/index.ts
+export { default } from './chip'
+export { CHIP_VARIANTS, CHIP_SIZES } from './constants'
+export { ChipConfig, ChipComponent } from './types'

package/src/components/chip/types.ts

@@ -0,0 +1,172 @@
+// src/components/chip/types.ts
+import { CHIP_VARIANTS, CHIP_SIZES } from './constants';
+
+/**
+ * Configuration interface for the Chip component
+ */
+export interface ChipConfig {
+  /** Chip variant (filled, outlined, elevated, assist, filter, input, suggestion) */
+  variant?: keyof typeof CHIP_VARIANTS | string;
+  
+  /** Chip size (small, medium, large) */
+  size?: keyof typeof CHIP_SIZES | string;
+  
+  /** Whether the chip is initially disabled */
+  disabled?: boolean;
+  
+  /** Whether the chip is initially selected */
+  selected?: boolean;
+  
+  /** Initial chip text content */
+  text?: string;
+  
+  /** Initial chip icon HTML content */
+  icon?: string;
+  
+  /** Optional leading icon HTML content */
+  leadingIcon?: string;
+  
+  /** Optional trailing icon HTML content */
+  trailingIcon?: string;
+  
+  /** Additional CSS classes */
+  class?: string;
+  
+  /** Chip value attribute */
+  value?: string;
+  
+  /** Whether to enable ripple effect */
+  ripple?: boolean;
+  
+  /** Ripple effect configuration */
+  rippleConfig?: {
+    duration?: number;
+    timing?: string;
+    opacity?: [string, string];
+  };
+  
+  /** Function called when the trailing icon is clicked */
+  onTrailingIconClick?: (chip: ChipComponent) => void;
+  
+  /** Function called when the chip is selected */
+  onSelect?: (chip: ChipComponent) => void;
+}
+
+/**
+ * Icon API interface
+ */
+export interface IconAPI {
+  setIcon: (html: string) => IconAPI;
+  getIcon: () => string;
+  getElement: () => HTMLElement | null;
+}
+
+/**
+ * Text API interface
+ */
+export interface TextAPI {
+  setText: (content: string) => TextAPI;
+  getText: () => string;
+  getElement: () => HTMLElement | null;
+}
+
+/**
+ * Chip component interface
+ */
+export interface ChipComponent {
+  element: HTMLElement;
+  text: TextAPI;
+  icon: IconAPI;
+  disabled: {
+    enable: () => void;
+    disable: () => void;
+    isDisabled: () => boolean;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+  
+  /** Gets the class with the specified name */
+  getClass: (name: string) => string;
+  
+  /** Gets the chip's value */
+  getValue: () => string | null;
+  
+  /** Sets the chip's value */
+  setValue: (value: string) => ChipComponent;
+  
+  /** Enables the chip */
+  enable: () => ChipComponent;
+  
+  /** Disables the chip */
+  disable: () => ChipComponent;
+  
+  /** Sets the chip's text content */
+  setText: (content: string) => ChipComponent;
+  
+  /** Gets the chip's text content */
+  getText: () => string;
+  
+  /** Sets the chip's icon */
+  setIcon: (icon: string) => ChipComponent;
+  
+  /** Gets the chip's icon */
+  getIcon: () => string;
+  
+  /** Sets the chip's trailing icon */
+  setTrailingIcon: (icon: string) => ChipComponent;
+  
+  /** Checks if the chip is selected */
+  isSelected: () => boolean;
+  
+  /** Sets the chip's selected state */
+  setSelected: (selected: boolean) => ChipComponent;
+  
+  /** Toggles the chip's selected state */
+  toggleSelected: () => ChipComponent;
+  
+  /** Destroys the chip component and cleans up resources */
+  destroy: () => void;
+  
+  /** Adds event listener */
+  on: (event: string, handler: Function) => ChipComponent;
+  
+  /** Removes event listener */
+  off: (event: string, handler: Function) => ChipComponent;
+  
+  /** Add CSS classes */
+  addClass: (...classes: string[]) => ChipComponent;
+}
+
+/**
+ * API options interface
+ */
+export interface ApiOptions {
+  disabled: {
+    enable: () => void;
+    disable: () => void;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+}
+
+/**
+ * Base component interface
+ */
+export interface BaseComponent {
+  element: HTMLElement;
+  getClass: (name?: string) => string;
+  config: any;
+  text?: TextAPI;
+  icon?: IconAPI;
+  disabled?: {
+    enable: () => void;
+    disable: () => void;
+    isDisabled: () => boolean;
+  };
+  lifecycle?: {
+    destroy: () => void;
+  };
+  [key: string]: any;
+}

package/src/components/list/api.ts

@@ -0,0 +1,72 @@
+// src/components/list/api.ts
+import { BaseComponent, ListComponent, ListItemConfig } from './types';
+
+/**
+ * API options interface
+ */
+interface ApiOptions {
+  disabled: {
+    enable: () => any;
+    disable: () => any;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+}
+
+/**
+ * Enhances list component with API methods
+ * @param {ApiOptions} options - API configuration
+ * @returns {Function} Higher-order function that adds API methods to component
+ */
+export const withAPI = ({ disabled, lifecycle }: ApiOptions) => 
+  (component: BaseComponent): ListComponent => ({
+    ...component as any,
+    element: component.element,
+    items: component.items as Map<string, any>,
+    selectedItems: component.selectedItems as Set<string>,
+
+    // Selection management
+    getSelected(): string[] {
+      return component.getSelected?.() || [];
+    },
+    
+    setSelected(ids: string[]): void {
+      component.setSelected?.(ids);
+    },
+
+    // Item management
+    addItem(itemConfig: ListItemConfig): void {
+      component.addItem?.(itemConfig);
+    },
+    
+    removeItem(id: string): void {
+      component.removeItem?.(id);
+    },
+
+    // Event handling
+    on(event: string, handler: Function): ListComponent {
+      component.on?.(event, handler);
+      return this;
+    },
+    
+    off(event: string, handler: Function): ListComponent {
+      component.off?.(event, handler);
+      return this;
+    },
+
+    // State management
+    enable(): ListComponent {
+      disabled.enable();
+      return this;
+    },
+    
+    disable(): ListComponent {
+      disabled.disable();
+      return this;
+    },
+    
+    destroy(): void {
+      lifecycle.destroy();
+    }
+  });

package/src/components/list/config.ts

@@ -0,0 +1,43 @@
+// src/components/list/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig,
+  BaseComponentConfig 
+} from '../../core/config/component-config';
+import { ListConfig, BaseComponent } from './types';
+import { LIST_TYPES, LIST_LAYOUTS } from './constants';
+
+/**
+ * Default configuration for the List component
+ */
+export const defaultConfig: ListConfig = {
+  type: LIST_TYPES.DEFAULT,
+  layout: LIST_LAYOUTS.HORIZONTAL,
+  items: []
+};
+
+/**
+ * Creates the base configuration for List component
+ * @param {ListConfig} config - User provided configuration
+ * @returns {ListConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: ListConfig = {}): ListConfig => 
+  createComponentConfig(defaultConfig, config, 'list') as ListConfig;
+
+/**
+ * Generates element configuration for the List component
+ * @param {ListConfig} config - List configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: ListConfig) => 
+  createElementConfig(config, {
+    tag: 'div',
+    role: config.type === LIST_TYPES.DEFAULT ? 'list' : 'listbox',
+    attrs: {
+      'aria-multiselectable': config.type === LIST_TYPES.MULTI_SELECT ? 'true' : undefined
+    },
+    componentName: 'list',
+    className: config.class
+  });
+
+export default defaultConfig;

package/src/components/list/{constants.js → constants.ts}

@@ -1,4 +1,4 @@
-// src/components/list/constants.js
+// src/components/list/constants.ts
 
 /**
  * List types/variants
@@ -8,7 +8,7 @@ export const LIST_TYPES = {
   SINGLE_SELECT: 'single', // Single selection list
   MULTI_SELECT: 'multi', // Multiple selection list
   RADIO: 'radio' // Radio button list
-}
+} as const;
 
 /**
  * List layout variants
@@ -16,7 +16,15 @@ export const LIST_TYPES = {
 export const LIST_LAYOUTS = {
   HORIZONTAL: 'horizontal', // Default horizontal layout
   VERTICAL: 'vertical' // Items with more content stacked vertically
-}
+} as const;
+
+/**
+ * List item layouts
+ */
+export const LIST_ITEM_LAYOUTS = {
+  HORIZONTAL: 'horizontal', // Default horizontal layout
+  VERTICAL: 'vertical' // Stacked layout with vertical alignment
+} as const;
 
 /**
  * List element class names
@@ -27,11 +35,20 @@ export const LIST_CLASSES = {
   GROUP_TITLE: 'list-group-title',
   DIVIDER: 'list-divider',
   SECTION: 'list-section',
-  SECTION_TITLE: 'list-section-title'
-}
+  SECTION_TITLE: 'list-section-title',
+  ITEM: 'list-item',
+  ITEM_CONTENT: 'list-item-content',
+  ITEM_LEADING: 'list-item-leading',
+  ITEM_TEXT: 'list-item-text',
+  ITEM_OVERLINE: 'list-item-overline',
+  ITEM_HEADLINE: 'list-item-headline',
+  ITEM_SUPPORTING: 'list-item-supporting',
+  ITEM_META: 'list-item-meta',
+  ITEM_TRAILING: 'list-item-trailing'
+} as const;
 
 /**
- * List configuration schema
+ * List validation schema
  */
 export const LIST_SCHEMA = {
   type: 'object',
@@ -86,4 +103,14 @@ export const LIST_SCHEMA = {
       optional: true
     }
   }
-}
+} as const;
+
+/**
+ * List item states
+ */
+export const LIST_ITEM_STATES = {
+  SELECTED: 'selected',
+  DISABLED: 'disabled',
+  FOCUSED: 'focused',
+  HOVERED: 'hovered'
+} as const;