mtrl 0.1.3 → 0.2.0

package/src/components/card/{features.js → features.ts}

@@ -1,24 +1,35 @@
-// src/components/card/features.js
-import { PREFIX } from '../../core/config'
-import { createElement } from '../../core/dom/create'
+// src/components/card/features.ts
+import { PREFIX } from '../../core/config';
+import { createElement } from '../../core/dom/create';
+import { BaseComponent, CardComponent, LoadingFeature, ExpandableFeature, SwipeableFeature } from './types';
+
+interface LoadingConfig {
+  initialState?: boolean;
+}
+
+interface ExpandableConfig {
+  initialExpanded?: boolean;
+  expandableContent?: HTMLElement;
+}
+
+interface SwipeableConfig {
+  onSwipeLeft?: (component: CardComponent) => void;
+  onSwipeRight?: (component: CardComponent) => void;
+  threshold?: number;
+}
 
 /**
  * Higher-order function to add loading state to a card
- * @param {Object} config - Loading state configuration
- * @param {boolean} [config.initialState=false] - Initial loading state
+ * @param {LoadingConfig} config - Loading state configuration
  * @returns {Function} Card component enhancer
  */
-export const withLoading = (config = {}) => (component) => {
-  const initialState = config.initialState || false
-  let loadingElement = null
-  let isLoading = initialState
+export const withLoading = (config: LoadingConfig = {}) => (component: BaseComponent): BaseComponent & { loading: LoadingFeature } => {
+  const initialState = config.initialState || false;
+  let loadingElement: HTMLElement | null = null;
+  let isLoading = initialState;
 
-  if (initialState) {
-    setLoading(true)
-  }
-
-  function setLoading (loading) {
-    isLoading = loading
+  function setLoading(loading: boolean): void {
+    isLoading = loading;
 
     if (loading && !loadingElement) {
       // Create and add loading overlay
@@ -26,45 +37,47 @@ export const withLoading = (config = {}) => (component) => {
         tag: 'div',
         className: `${PREFIX}-card-loading-overlay`,
         container: component.element
-      })
+      });
 
       // Add spinner
       createElement({
         tag: 'div',
         className: `${PREFIX}-card-loading-spinner`,
         container: loadingElement
-      })
+      });
 
-      component.element.classList.add(`${PREFIX}-card--state-loading`)
+      component.element.classList.add(`${PREFIX}-card--state-loading`);
     } else if (!loading && loadingElement) {
       // Remove loading overlay
-      loadingElement.remove()
-      loadingElement = null
-      component.element.classList.remove(`${PREFIX}-card--state-loading`)
+      loadingElement.remove();
+      loadingElement = null;
+      component.element.classList.remove(`${PREFIX}-card--state-loading`);
     }
   }
 
+  if (initialState) {
+    setLoading(true);
+  }
+
   return {
     ...component,
     loading: {
       isLoading: () => isLoading,
       setLoading
     }
-  }
-}
+  };
+};
 
 /**
  * Higher-order function to add expandable behavior to a card
- * @param {Object} config - Expandable configuration
- * @param {boolean} [config.initialExpanded=false] - Whether card is initially expanded
- * @param {HTMLElement} [config.expandableContent] - Content to show when expanded
+ * @param {ExpandableConfig} config - Expandable configuration
  * @returns {Function} Card component enhancer
  */
-export const withExpandable = (config = {}) => (component) => {
-  const initialExpanded = config.initialExpanded || false
-  let isExpanded = initialExpanded
-  const expandableContent = config.expandableContent
-  let expandButton = null
+export const withExpandable = (config: ExpandableConfig = {}) => (component: BaseComponent): BaseComponent & { expandable: ExpandableFeature } => {
+  const initialExpanded = config.initialExpanded || false;
+  let isExpanded = initialExpanded;
+  const expandableContent = config.expandableContent;
+  let expandButton: HTMLButtonElement;
 
   // Create expand/collapse button
   expandButton = createElement({
@@ -74,61 +87,61 @@ export const withExpandable = (config = {}) => (component) => {
       'aria-expanded': isExpanded ? 'true' : 'false',
       'aria-label': isExpanded ? 'Collapse' : 'Expand'
     }
-  })
+  }) as HTMLButtonElement;
 
   // Add to card as action if not already present
-  const actionsContainer = component.element.querySelector(`.${PREFIX}-card-actions`)
+  const actionsContainer = component.element.querySelector(`.${PREFIX}-card-actions`);
   if (actionsContainer) {
-    actionsContainer.appendChild(expandButton)
+    actionsContainer.appendChild(expandButton);
   } else {
     // Create actions container if not present
     const newActionsContainer = createElement({
       tag: 'div',
       className: `${PREFIX}-card-actions`,
       container: component.element
-    })
-    newActionsContainer.appendChild(expandButton)
+    });
+    newActionsContainer.appendChild(expandButton);
   }
 
   // Set initial state
   if (expandableContent) {
-    expandableContent.classList.add(`${PREFIX}-card-expandable-content`)
+    expandableContent.classList.add(`${PREFIX}-card-expandable-content`);
     if (!initialExpanded) {
-      expandableContent.style.display = 'none'
+      expandableContent.style.display = 'none';
     }
-    component.element.appendChild(expandableContent)
-  }
-
-  // Toggle expanded state
-  function toggleExpanded () {
-    setExpanded(!isExpanded)
+    component.element.appendChild(expandableContent);
   }
 
   // Set expanded state
-  function setExpanded (expanded) {
-    isExpanded = expanded
+  function setExpanded(expanded: boolean): void {
+    isExpanded = expanded;
 
     if (expandableContent) {
-      expandableContent.style.display = expanded ? 'block' : 'none'
+      expandableContent.style.display = expanded ? 'block' : 'none';
     }
 
-    expandButton.setAttribute('aria-expanded', expanded ? 'true' : 'false')
-    expandButton.setAttribute('aria-label', expanded ? 'Collapse' : 'Expand')
+    expandButton.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+    expandButton.setAttribute('aria-label', expanded ? 'Collapse' : 'Expand');
 
     if (expanded) {
-      component.element.classList.add(`${PREFIX}-card--expanded`)
+      component.element.classList.add(`${PREFIX}-card--expanded`);
     } else {
-      component.element.classList.remove(`${PREFIX}-card--expanded`)
+      component.element.classList.remove(`${PREFIX}-card--expanded`);
     }
 
-    component.emit('expandedChanged', { expanded })
+    component.emit?.('expandedChanged', { expanded });
+  }
+
+  // Toggle expanded state
+  function toggleExpanded(): void {
+    setExpanded(!isExpanded);
   }
 
   // Add click handler to toggle button
   expandButton.addEventListener('click', (e) => {
-    e.stopPropagation()
-    toggleExpanded()
-  })
+    e.stopPropagation();
+    toggleExpanded();
+  });
 
   return {
     ...component,
@@ -137,82 +150,79 @@ export const withExpandable = (config = {}) => (component) => {
       setExpanded,
       toggleExpanded
     }
-  }
-}
+  };
+};
 
 /**
  * Higher-order function to add swipeable behavior to a card
- * @param {Object} config - Swipeable configuration
- * @param {Function} [config.onSwipeLeft] - Callback when card is swiped left
- * @param {Function} [config.onSwipeRight] - Callback when card is swiped right
- * @param {number} [config.threshold=100] - Swipe distance threshold to trigger action
+ * @param {SwipeableConfig} config - Swipeable configuration
  * @returns {Function} Card component enhancer
  */
-export const withSwipeable = (config = {}) => (component) => {
-  const threshold = config.threshold || 100
-  let startX = 0
-  let currentX = 0
-
-  function handleTouchStart (e) {
-    startX = e.touches[0].clientX
-    component.element.style.transition = 'none'
+export const withSwipeable = (config: SwipeableConfig = {}) => (component: BaseComponent): BaseComponent & { swipeable: SwipeableFeature } => {
+  const threshold = config.threshold || 100;
+  let startX = 0;
+  let currentX = 0;
+
+  function handleTouchStart(e: TouchEvent): void {
+    startX = e.touches[0].clientX;
+    component.element.style.transition = 'none';
   }
 
-  function handleTouchMove (e) {
-    if (!startX) return
+  function handleTouchMove(e: TouchEvent): void {
+    if (!startX) return;
 
-    currentX = e.touches[0].clientX
-    const diffX = currentX - startX
+    currentX = e.touches[0].clientX;
+    const diffX = currentX - startX;
 
     // Apply transform to move card
-    component.element.style.transform = `translateX(${diffX}px)`
+    component.element.style.transform = `translateX(${diffX}px)`;
   }
 
-  function handleTouchEnd () {
-    if (!startX) return
+  function handleTouchEnd(): void {
+    if (!startX) return;
 
-    component.element.style.transition = 'transform 0.3s ease'
-    const diffX = currentX - startX
+    component.element.style.transition = 'transform 0.3s ease';
+    const diffX = currentX - startX;
 
     if (Math.abs(diffX) >= threshold) {
       // Swipe threshold reached
       if (diffX > 0 && config.onSwipeRight) {
         // Swipe right
-        component.element.style.transform = 'translateX(100%)'
-        config.onSwipeRight(component)
+        component.element.style.transform = 'translateX(100%)';
+        config.onSwipeRight(component as CardComponent);
       } else if (diffX < 0 && config.onSwipeLeft) {
         // Swipe left
-        component.element.style.transform = 'translateX(-100%)'
-        config.onSwipeLeft(component)
+        component.element.style.transform = 'translateX(-100%)';
+        config.onSwipeLeft(component as CardComponent);
       } else {
         // Reset if no handler
-        component.element.style.transform = 'translateX(0)'
+        component.element.style.transform = 'translateX(0)';
       }
     } else {
       // Reset if below threshold
-      component.element.style.transform = 'translateX(0)'
+      component.element.style.transform = 'translateX(0)';
     }
 
-    startX = 0
-    currentX = 0
+    startX = 0;
+    currentX = 0;
   }
 
   // Add event listeners
-  component.element.addEventListener('touchstart', handleTouchStart)
-  component.element.addEventListener('touchmove', handleTouchMove)
-  component.element.addEventListener('touchend', handleTouchEnd)
+  component.element.addEventListener('touchstart', handleTouchStart as EventListener);
+  component.element.addEventListener('touchmove', handleTouchMove as EventListener);
+  component.element.addEventListener('touchend', handleTouchEnd);
 
   // Add swipeable class
-  component.element.classList.add(`${PREFIX}-card--swipeable`)
+  component.element.classList.add(`${PREFIX}-card--swipeable`);
 
   // Return enhanced component
   return {
     ...component,
     swipeable: {
       reset: () => {
-        component.element.style.transition = 'transform 0.3s ease'
-        component.element.style.transform = 'translateX(0)'
+        component.element.style.transition = 'transform 0.3s ease';
+        component.element.style.transform = 'translateX(0)';
       }
     }
-  }
-}
+  };
+};

package/src/components/card/{header.js → header.ts}

@@ -1,25 +1,21 @@
-// src/components/card/header.js
-import { PREFIX } from '../../core/config'
-import { pipe } from '../../core/compose'
-import { createBase, withElement } from '../../core/compose/component'
-import { withText } from '../../core/compose/features'
-import { createElement } from '../../core/dom/create'
+// src/components/card/header.ts
+import { PREFIX } from '../../core/config';
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import { createElement } from '../../core/dom/create';
+import { CardHeaderConfig } from './types';
 
 /**
  * Creates a card header component
- * @param {Object} config - Header configuration
- * @param {string} [config.title] - Title text
- * @param {string} [config.subtitle] - Subtitle text
- * @param {HTMLElement|string} [config.avatar] - Avatar element or HTML string
- * @param {HTMLElement|string} [config.action] - Action element or HTML string
+ * @param {CardHeaderConfig} config - Header configuration
  * @returns {HTMLElement} Card header element
  */
-export const createCardHeader = (config = {}) => {
+export const createCardHeader = (config: CardHeaderConfig = {}): HTMLElement => {
   const baseConfig = {
     ...config,
     componentName: 'card-header',
     prefix: PREFIX
-  }
+  };
 
   try {
     const header = pipe(
@@ -29,14 +25,14 @@ export const createCardHeader = (config = {}) => {
         componentName: 'card-header',
         className: config.class
       })
-    )(baseConfig)
+    )(baseConfig);
 
     // Create text container
     const textContainer = createElement({
       tag: 'div',
       className: `${PREFIX}-card-header-text`,
       container: header.element
-    })
+    });
 
     // Add title if provided
     if (config.title) {
@@ -45,7 +41,7 @@ export const createCardHeader = (config = {}) => {
         className: `${PREFIX}-card-header-title`,
         text: config.title,
         container: textContainer
-      })
+      });
     }
 
     // Add subtitle if provided
@@ -55,7 +51,7 @@ export const createCardHeader = (config = {}) => {
         className: `${PREFIX}-card-header-subtitle`,
         text: config.subtitle,
         container: textContainer
-      })
+      });
     }
 
     // Add avatar if provided
@@ -66,9 +62,9 @@ export const createCardHeader = (config = {}) => {
           className: `${PREFIX}-card-header-avatar`,
           html: config.avatar
         })
-        : config.avatar
+        : config.avatar;
 
-      header.element.insertBefore(avatarElement, header.element.firstChild)
+      header.element.insertBefore(avatarElement, header.element.firstChild);
     }
 
     // Add action if provided
@@ -79,14 +75,14 @@ export const createCardHeader = (config = {}) => {
           className: `${PREFIX}-card-header-action`,
           html: config.action
         })
-        : config.action
+        : config.action;
 
-      header.element.appendChild(actionElement)
+      header.element.appendChild(actionElement);
     }
 
-    return header.element
+    return header.element;
   } catch (error) {
-    console.error('Card header creation error:', error)
-    throw new Error(`Failed to create card header: ${error.message}`)
+    console.error('Card header creation error:', error instanceof Error ? error.message : String(error));
+    throw new Error(`Failed to create card header: ${error instanceof Error ? error.message : String(error)}`);
   }
-}
+};

package/src/components/card/index.ts

@@ -0,0 +1,19 @@
+// src/components/card/index.ts
+export { default } from './card'
+export { createCardContent } from './content'
+export { createCardHeader } from './header'
+export { createCardActions } from './actions'
+export { createCardMedia } from './media'
+export {
+  CardVariant,
+  CardElevation,
+  CardSchema,
+  CardHeaderConfig,
+  CardContentConfig,
+  CardActionsConfig,
+  CardMediaConfig,
+  CardComponent
+} from './types'
+
+// Export constants for backward compatibility
+export { CARD_VARIANTS, CARD_ELEVATIONS, CARD_SCHEMA } from './constants'

package/src/components/card/media.ts

@@ -0,0 +1,52 @@
+// src/components/card/media.ts
+import { PREFIX } from '../../core/config';
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import { CardMediaConfig } from './types';
+
+/**
+ * Creates a card media component
+ * @param {CardMediaConfig} config - Media configuration
+ * @returns {HTMLElement} Card media element
+ */
+export const createCardMedia = (config: CardMediaConfig = {}): HTMLElement => {
+  const baseConfig = {
+    ...config,
+    componentName: 'card-media',
+    prefix: PREFIX
+  };
+
+  try {
+    const media = pipe(
+      createBase,
+      withElement({
+        tag: 'div',
+        componentName: 'card-media',
+        className: [
+          config.class,
+          config.aspectRatio ? `${PREFIX}-card-media--${config.aspectRatio.replace(':', '-')}` : null,
+          config.contain ? `${PREFIX}-card-media--contain` : null
+        ]
+      })
+    )(baseConfig);
+
+    // If custom element is provided, use it
+    if (config.element instanceof HTMLElement) {
+      media.element.appendChild(config.element);
+    }
+
+    // Otherwise create an image if src is provided
+    else if (config.src) {
+      const img = document.createElement('img');
+      img.src = config.src;
+      if (config.alt) img.alt = config.alt;
+      img.className = `${PREFIX}-card-media-img`;
+      media.element.appendChild(img);
+    }
+
+    return media.element;
+  } catch (error) {
+    console.error('Card media creation error:', error instanceof Error ? error.message : String(error));
+    throw new Error(`Failed to create card media: ${error instanceof Error ? error.message : String(error)}`);
+  }
+};

package/src/components/card/types.ts

@@ -0,0 +1,174 @@
+// src/components/card/types.ts
+
+/**
+ * Card variant types following Material Design 3
+ */
+export enum CardVariant {
+  ELEVATED = 'elevated',
+  FILLED = 'filled',
+  OUTLINED = 'outlined'
+}
+
+/**
+ * Card elevation levels
+ */
+export enum CardElevation {
+  RESTING = 1,
+  HOVERED = 2,
+  DRAGGED = 4
+}
+
+/**
+ * Interface for card configuration
+ */
+export interface CardSchema {
+  variant?: CardVariant;
+  interactive?: boolean;
+  fullWidth?: boolean;
+  clickable?: boolean;
+  draggable?: boolean;
+  class?: string;
+  headerConfig?: CardHeaderConfig;
+  contentConfig?: CardContentConfig;
+  actionsConfig?: CardActionsConfig;
+  mediaConfig?: CardMediaConfig;
+}
+
+/**
+ * Interface for card header configuration
+ */
+export interface CardHeaderConfig {
+  title?: string;
+  subtitle?: string;
+  avatar?: HTMLElement | string;
+  action?: HTMLElement | string;
+  class?: string;
+}
+
+/**
+ * Interface for card content configuration
+ */
+export interface CardContentConfig {
+  text?: string;
+  html?: string;
+  children?: HTMLElement[];
+  padding?: boolean;
+  class?: string;
+}
+
+/**
+ * Interface for card actions configuration
+ */
+export interface CardActionsConfig {
+  actions?: HTMLElement[];
+  fullBleed?: boolean;
+  vertical?: boolean;
+  align?: 'start' | 'center' | 'end' | 'space-between';
+  class?: string;
+}
+
+/**
+ * Interface for card media configuration
+ */
+export interface CardMediaConfig {
+  src?: string;
+  alt?: string;
+  element?: HTMLElement;
+  aspectRatio?: '16:9' | '4:3' | '1:1' | string;
+  contain?: boolean;
+  class?: string;
+}
+
+/**
+ * Base component interface
+ */
+export interface BaseComponent {
+  element: HTMLElement;
+  getClass: (name?: string) => string;
+  getModifierClass: (base: string, modifier: string) => string;
+  getElementClass: (base: string, element: string) => string;
+  addClass: (...classes: string[]) => BaseComponent;
+  emit?: (event: string, data?: any) => void;
+  config: CardComponentConfig;
+  touchState?: TouchState;
+  updateTouchState?: (event: TouchEvent | MouseEvent, status: 'start' | 'end') => void;
+  lifecycle?: ComponentLifecycle;
+}
+
+/**
+ * Touch state interface
+ */
+export interface TouchState {
+  startTime: number;
+  startPosition: { x: number; y: number };
+  isTouching: boolean;
+  activeTarget: EventTarget | null;
+}
+
+/**
+ * Component lifecycle interface
+ */
+export interface ComponentLifecycle {
+  mount?: () => void;
+  update?: () => void;
+  destroy: () => void;
+}
+
+/**
+ * Card component configuration
+ */
+export interface CardComponentConfig extends CardSchema {
+  componentName: string;
+  prefix: string;
+}
+
+/**
+ * Card component interface
+ */
+export interface CardComponent extends BaseComponent {
+  // Card-specific methods
+  addContent: (contentElement: HTMLElement) => CardComponent;
+  setHeader: (headerElement: HTMLElement) => CardComponent;
+  addMedia: (mediaElement: HTMLElement, position?: 'top' | 'bottom') => CardComponent;
+  setActions: (actionsElement: HTMLElement) => CardComponent;
+  makeDraggable: (dragStartCallback?: (event: DragEvent) => void) => CardComponent;
+  destroy: () => void;
+  
+  // Optional feature interfaces
+  loading?: LoadingFeature;
+  expandable?: ExpandableFeature;
+  swipeable?: SwipeableFeature;
+}
+
+/**
+ * Loading feature interface
+ */
+export interface LoadingFeature {
+  isLoading: () => boolean;
+  setLoading: (loading: boolean) => void;
+}
+
+/**
+ * Expandable feature interface
+ */
+export interface ExpandableFeature {
+  isExpanded: () => boolean;
+  setExpanded: (expanded: boolean) => void;
+  toggleExpanded: () => void;
+}
+
+/**
+ * Swipeable feature interface
+ */
+export interface SwipeableFeature {
+  reset: () => void;
+}
+
+/**
+ * API options interface
+ */
+export interface ApiOptions {
+  lifecycle: {
+    destroy: () => void;
+  };
+}