mtrl 0.3.8 → 0.4.0

package/src/components/snackbar/api.ts

@@ -1,162 +0,0 @@
-// src/components/snackbar/api.ts
-import { BaseComponent, SnackbarComponent, ApiOptions, QueuedSnackbar } from './types';
-
-/**
- * Enhances snackbar component with API methods
- * @param {ApiOptions} options - API configuration
- * @returns {Function} Higher-order function that adds API methods to component
- */
-export const withAPI = ({ lifecycle, queue }: ApiOptions) => 
-  (component: BaseComponent): SnackbarComponent => {
-    if (!queue) {
-      throw new Error('Snackbar queue is required');
-    }
-
-    let isVisible = false;
-
-    const enhancedComponent: SnackbarComponent = {
-      element: component.element,
-      actionButton: component.actionButton,
-      timer: component.timer,
-      position: component.position,
-
-      /**
-       * Shows the snackbar with animation
-       * @returns {SnackbarComponent} Component instance for chaining
-       */
-      show(): SnackbarComponent {
-        if (isVisible) return this;
-        isVisible = true;
-
-        queue.add({
-          ...this,
-          _show: (): SnackbarComponent => {
-            document.body.appendChild(component.element);
-
-            // Force reflow for animation
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const _ = component.element.offsetHeight;
-
-            component.element.classList.add(`${component.getClass?.('snackbar')}--visible`);
-
-            if (component.timer) {
-              component.timer.start();
-            }
-
-            return this;
-          }
-        } as QueuedSnackbar);
-
-        return this;
-      },
-
-      /**
-       * Hides the snackbar with animation and cleanup
-       * @returns {SnackbarComponent} Component instance for chaining
-       */
-      hide(): SnackbarComponent {
-        if (!isVisible) return this;
-        isVisible = false;
-
-        if (component.timer) {
-          component.timer.stop();
-        }
-
-        const handleTransitionEnd = (event: TransitionEvent): void => {
-          if (event.propertyName !== 'opacity') return;
-
-          component.element.removeEventListener('transitionend', handleTransitionEnd);
-          if (component.element.parentNode) {
-            component.element.remove();
-          }
-        };
-
-        component.element.addEventListener('transitionend', handleTransitionEnd);
-        component.element.classList.remove(`${component.getClass?.('snackbar')}--visible`);
-
-        return this;
-      },
-
-      /**
-       * Sets the snackbar message
-       * @param {string} text - New message text
-       * @returns {SnackbarComponent} Component instance for chaining
-       */
-      setMessage(text: string): SnackbarComponent {
-        component.text?.setText(text);
-        return this;
-      },
-
-      /**
-       * Gets the snackbar message
-       * @returns {string} Current message text
-       */
-      getMessage(): string {
-        return component.text?.getText() || '';
-      },
-
-      /**
-       * Adds event listener
-       * @param {string} event - Event name
-       * @param {Function} handler - Event handler
-       * @returns {SnackbarComponent} Component instance for chaining
-       */
-      on(event: string, handler: Function): SnackbarComponent {
-        component.on?.(event, handler);
-        return this;
-      },
-
-      /**
-       * Removes event listener
-       * @param {string} event - Event name
-       * @param {Function} handler - Event handler
-       * @returns {SnackbarComponent} Component instance for chaining
-       */
-      off(event: string, handler: Function): SnackbarComponent {
-        component.off?.(event, handler);
-        return this;
-      },
-
-      /**
-       * Destroys the snackbar component and cleans up resources
-       */
-      destroy(): void {
-        if (isVisible && component.element.parentNode) {
-          component.element.remove();
-        }
-        if (component.timer) {
-          component.timer.stop();
-        }
-        lifecycle.destroy();
-      }
-    };
-
-    // Set up action button handler
-    if (component.actionButton) {
-      component.actionButton.addEventListener('click', () => {
-        component.emit?.('action');
-        component.emit?.('dismiss'); // Emit dismiss to handle queue cleanup
-      });
-    }
-
-    // Set up dismiss handler
-    if (component.on) {
-      // Store the handler reference so it can be properly removed
-      const dismissHandler = (): void => {
-        if (isVisible) {
-          enhancedComponent.hide();
-        }
-      };
-
-      component.on('dismiss', dismissHandler);
-
-      // Add cleanup to lifecycle
-      const originalDestroy = lifecycle.destroy;
-      lifecycle.destroy = () => {
-        component.off?.('dismiss', dismissHandler);
-        originalDestroy?.call(lifecycle);
-      };
-    }
-
-    return enhancedComponent;
-  };

package/src/components/snackbar/config.ts

@@ -1,61 +0,0 @@
-// src/components/snackbar/config.ts
-import { 
-  createComponentConfig, 
-  createElementConfig,
-  BaseComponentConfig 
-} from '../../core/config/component-config';
-import { SnackbarConfig, BaseComponent, ApiOptions } from './types';
-
-/**
- * Default configuration for the Snackbar component
- */
-export const defaultConfig: SnackbarConfig = {
-  variant: 'basic',
-  position: 'center',
-  duration: 4000
-};
-
-/**
- * Creates the base configuration for Snackbar component
- * @param {SnackbarConfig} config - User provided configuration
- * @returns {SnackbarConfig} Complete configuration with defaults applied
- */
-export const createBaseConfig = (config: SnackbarConfig): SnackbarConfig => 
-  createComponentConfig(defaultConfig, config, 'snackbar') as SnackbarConfig;
-
-/**
- * Generates element configuration for the Snackbar component
- * @param {SnackbarConfig} config - Snackbar configuration
- * @returns {Object} Element configuration object for withElement
- */
-export const getElementConfig = (config: SnackbarConfig) => 
-  createElementConfig(config, {
-    tag: 'div',
-    componentName: 'snackbar',
-    className: config.class
-  });
-
-/**
- * Creates text configuration for the Snackbar component
- * @param {SnackbarConfig} config - Snackbar configuration
- * @returns {Object} Text configuration object
- */
-export const getTextConfig = (config: SnackbarConfig) => ({
-  ...config,
-  text: config.message
-});
-
-/**
- * Creates API configuration for the Snackbar component
- * @param {BaseComponent} comp - Component with lifecycle feature
- * @param {SnackbarQueue} queue - Snackbar queue manager
- * @returns {ApiOptions} API configuration object
- */
-export const getApiConfig = (comp: BaseComponent, queue: any): ApiOptions => ({
-  lifecycle: {
-    destroy: comp.lifecycle?.destroy || (() => {})
-  },
-  queue
-});
-
-export default defaultConfig;

package/src/components/snackbar/features.ts

@@ -1,76 +0,0 @@
-// src/components/snackbar/features.ts
-import { BaseComponent, SnackbarConfig, SnackbarTimer } from './types';
-
-/**
- * Adds action button to snackbar
- * @param {SnackbarConfig} config - Component configuration
- * @returns {Function} Higher-order function that adds action button
- */
-export const withActionButton = (config: SnackbarConfig) => 
-  (component: BaseComponent): BaseComponent => {
-    if (!config.action) return component;
-
-    const button = document.createElement('button');
-    button.className = `${config.prefix}-snackbar-action`;
-    button.textContent = config.action;
-
-    component.element.appendChild(button);
-
-    return {
-      ...component,
-      actionButton: button
-    };
-  };
-
-/**
- * Adds auto-dismiss timer functionality
- * @param {SnackbarConfig} config - Component configuration
- * @returns {Function} Higher-order function that adds timer features
- */
-export const withDismissTimer = (config: SnackbarConfig) => 
-  (component: BaseComponent): BaseComponent => {
-    let timeoutId: number | null = null;
-
-    const startTimer = (): void => {
-      // Clear any existing timer
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-        timeoutId = null;
-      }
-
-      // Only start timer if duration is positive and numeric
-      if (typeof config.duration === 'number' && config.duration > 0) {
-        timeoutId = window.setTimeout(() => {
-          if (component.element && component.emit) {
-            component.emit('dismiss');
-          }
-        }, config.duration);
-      }
-    };
-
-    const stopTimer = (): void => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-        timeoutId = null;
-      }
-    };
-
-    // Clean up on destroy
-    const originalDestroy = component.lifecycle?.destroy;
-    if (component.lifecycle) {
-      component.lifecycle.destroy = () => {
-        stopTimer();
-        if (originalDestroy) {
-          originalDestroy.call(component.lifecycle);
-        }
-      };
-    }
-
-    return {
-      ...component,
-      timer: {
-        start: startTimer,
-        stop: stopTimer
-      } as SnackbarTimer
-    };
-  };

package/src/components/snackbar/index.ts

@@ -1,9 +0,0 @@
-// src/components/snackbar/index.ts
-export { default } from './snackbar'
-export { 
-  SnackbarConfig, 
-  SnackbarComponent,
-  SNACKBAR_VARIANTS,
-  SNACKBAR_POSITIONS,
-  SNACKBAR_STATES
-} from './types'

package/src/components/snackbar/position.ts

@@ -1,79 +0,0 @@
-// src/components/snackbar/position.ts
-import { BaseComponent } from './types';
-
-/**
- * Snackbar display positions
- */
-const SNACKBAR_POSITIONS = {
-  CENTER: 'center',
-  START: 'start',
-  END: 'end'
-}
-
-/**
- * Position configuration for the withPosition function
- */
-interface PositionConfig {
-  prefix: string;
-  position?: string;
-}
-
-/**
- * Adds position handling to snackbar
- * @param {PositionConfig} config - Position configuration
- * @returns {Function} Higher-order function that adds position features
- */
-export const withPosition = (config: PositionConfig) => 
-  (component: BaseComponent): BaseComponent => {
-    const position = config.position || SNACKBAR_POSITIONS.CENTER;
-    const positionClass = `${config.prefix}-snackbar--${position}`;
-
-    // Add position class
-    component.element.classList.add(positionClass);
-
-    // Method to update position
-    const setPosition = (newPosition: string): void => {
-      // Remove current position class
-      component.element.classList.remove(positionClass);
-
-      // Add new position class
-      const newPositionClass = `${config.prefix}-snackbar--${newPosition}`;
-      component.element.classList.add(newPositionClass);
-
-      // Update visible state transform for center position
-      if (component.element.classList.contains(`${config.prefix}-snackbar--visible`)) {
-        if (newPosition === SNACKBAR_POSITIONS.CENTER) {
-          component.element.style.transform = 'translateX(-50%) scale(1)';
-        } else {
-          component.element.style.transform = 'scale(1)';
-        }
-      }
-    };
-
-    return {
-      ...component,
-      position: {
-        /**
-         * Get current position
-         * @returns {string} Current position
-         */
-        getPosition: (): string => position,
-
-        /**
-         * Set new position
-         * @param {string} newPosition - New position to set
-         * @returns {BaseComponent} Component instance
-         */
-        setPosition: (newPosition: string): BaseComponent => {
-          if (Object.values(SNACKBAR_POSITIONS).includes(newPosition)) {
-            setPosition(newPosition);
-            return component;
-          } else {
-            console.warn(`Invalid position: ${newPosition}. Using default: ${SNACKBAR_POSITIONS.CENTER}`);
-            setPosition(SNACKBAR_POSITIONS.CENTER);
-            return component;
-          }
-        }
-      }
-    };
-  };

package/src/components/snackbar/queue.ts

@@ -1,76 +0,0 @@
-// src/components/snackbar/queue.ts
-import { QueuedSnackbar, SnackbarQueue } from './types';
-
-/**
- * Creates a queue manager for snackbars
- * Ensures only one snackbar is visible at a time
- * @returns {SnackbarQueue} Queue manager with add/clear methods
- */
-export const createSnackbarQueue = (): SnackbarQueue => {
-  const queue: QueuedSnackbar[] = [];
-  let isProcessing = false;
-
-  const processQueue = (): void => {
-    if (queue.length === 0) {
-      isProcessing = false;
-      return;
-    }
-
-    isProcessing = true;
-    const snackbar = queue[0];
-
-    const handleDismiss = (): void => {
-      // Remove from queue
-      queue.shift();
-      // Remove listener and cleanup
-      snackbar.off?.('dismiss', handleDismiss);
-      // Reset processing state if queue is empty
-      if (queue.length === 0) {
-        isProcessing = false;
-      } else {
-        // Process next after a small delay
-        setTimeout(processQueue, 200);
-      }
-    };
-
-    // Handle both normal dismiss and action button dismissal
-    snackbar.on?.('dismiss', handleDismiss);
-    snackbar._show();
-  };
-
-  return {
-    /**
-     * Adds a snackbar to the queue
-     * @param {QueuedSnackbar} snackbar - Snackbar instance with _show method
-     */
-    add(snackbar: QueuedSnackbar): void {
-      if (!snackbar._show) {
-        throw new Error('Snackbar must implement _show method');
-      }
-
-      queue.push(snackbar);
-
-      // Only start processing if not already processing
-      if (!isProcessing) {
-        processQueue();
-      }
-    },
-
-    /**
-     * Clears all pending snackbars
-     */
-    clear(): void {
-      // Remove all queued items
-      queue.length = 0;
-      isProcessing = false;
-    },
-
-    /**
-     * Gets current queue length
-     * @returns {number} Number of snackbars in queue
-     */
-    getLength(): number {
-      return queue.length;
-    }
-  };
-};

package/src/components/snackbar/snackbar.ts

@@ -1,60 +0,0 @@
-// src/components/snackbar/snackbar.ts
-import { pipe } from '../../core/compose';
-import { createBase, withElement } from '../../core/compose/component';
-import { withActionButton, withDismissTimer } from './features';
-import { withPosition } from './position';
-import {
-  withEvents,
-  withText,
-  withVariant,
-  withLifecycle
-} from '../../core/compose/features';
-import { withAPI } from './api';
-import { createSnackbarQueue } from './queue';
-import { SnackbarConfig, SnackbarComponent, SnackbarQueue } from './types';
-import {
-  createBaseConfig,
-  getElementConfig,
-  getTextConfig,
-  getApiConfig
-} from './config';
-
-// Create a single queue instance to be shared across all snackbars
-const queue: SnackbarQueue = createSnackbarQueue();
-
-/**
- * Creates a new Snackbar component
- * @param {SnackbarConfig} config - Snackbar configuration
- * @returns {SnackbarComponent} Snackbar component instance
- */
-const createSnackbar = (config: SnackbarConfig): SnackbarComponent => {
-  if (!config.message) {
-    throw new Error('Snackbar message is required');
-  }
-
-  const baseConfig = createBaseConfig(config);
-
-  try {
-    const snackbar = pipe(
-      createBase,
-      withEvents(),
-      withElement(getElementConfig(baseConfig)),
-      withVariant(baseConfig),
-      withPosition(baseConfig),
-      withText(getTextConfig(baseConfig)),
-      withActionButton(baseConfig),
-      withLifecycle(),
-      // First apply timer
-      withDismissTimer(baseConfig),
-      // Then apply API which needs timer
-      comp => withAPI(getApiConfig(comp, queue))(comp)
-    )(baseConfig);
-
-    return snackbar as SnackbarComponent;
-  } catch (error) {
-    console.error('Snackbar creation error:', error instanceof Error ? error.message : String(error));
-    throw new Error(`Failed to create snackbar: ${error instanceof Error ? error.message : String(error)}`);
-  }
-};
-
-export default createSnackbar;

package/src/components/snackbar/types.ts

@@ -1,159 +0,0 @@
-// src/components/snackbar/types.ts
-
-/**
- * Available snackbar variants
- */
-export type SnackbarVariant = 'basic' | 'action';
-
-/**
- * Snackbar visual variants
- */
-export const SNACKBAR_VARIANTS = {
-  BASIC: 'basic',
-  ACTION: 'action' // With action button
-} as const;
-
-/**
- * Available snackbar positions
- */
-export type SnackbarPosition = 'center' | 'start' | 'end';
-
-/**
- * Snackbar display positions
- */
-export const SNACKBAR_POSITIONS = {
-  CENTER: 'center',
-  START: 'start',
-  END: 'end'
-} as const;
-
-/**
- * Snackbar visibility states
- */
-export type SnackbarState = 'visible' | 'hidden';
-
-/**
- * Snackbar state classes
- */
-export const SNACKBAR_STATES = {
-  VISIBLE: 'visible',
-  HIDDEN: 'hidden'
-} as const;
-
-/**
- * Available snackbar event types
- */
-export type SnackbarEventType = 'open' | 'close' | 'action';
-
-/**
- * Snackbar event data
- * @interface SnackbarEvent
- */
-export interface SnackbarEvent {
-  /** The snackbar component that triggered the event */
-  snackbar: SnackbarComponent;
-  
-  /** Original DOM event if available */
-  originalEvent: Event | null;
-  
-  /** Function to prevent default behavior */
-  preventDefault: () => void;
-  
-  /** Whether default behavior was prevented */
-  defaultPrevented: boolean;
-}
-
-/**
- * Configuration options for the snackbar component
- * @interface SnackbarConfig
- */
-export interface SnackbarConfig {
-  /** Visual variant of the snackbar */
-  variant?: SnackbarVariant;
-  
-  /** Position of the snackbar on screen */
-  position?: SnackbarPosition;
-  
-  /** Text message to display */
-  message: string;
-  
-  /** Action button text (for 'action' variant) */
-  action?: string;
-  
-  /** Duration in milliseconds to show the snackbar (0 for indefinite) */
-  duration?: number;
-  
-  /** Action button callback function */
-  onAction?: (event: SnackbarEvent) => void;
-  
-  /** Callback function when the snackbar opens */
-  onOpen?: (event: SnackbarEvent) => void;
-  
-  /** Callback function when the snackbar closes */
-  onClose?: (event: SnackbarEvent) => void;
-  
-  /** Additional CSS classes */
-  class?: string;
-  
-  /** Component prefix for CSS classes */
-  prefix?: string;
-  
-  /** Component name for CSS classes */
-  componentName?: string;
-  
-  /** Event handlers for snackbar events */
-  on?: {
-    [key in SnackbarEventType]?: (event: SnackbarEvent) => void;
-  };
-}
-
-/**
- * Snackbar component public API interface
- * @interface SnackbarComponent
- */
-export interface SnackbarComponent {
-  /** The root element of the snackbar */
-  element: HTMLElement;
-  
-  /** Current state of the snackbar */
-  state: SnackbarState;
-  
-  /** Displays the snackbar */
-  show: () => SnackbarComponent;
-  
-  /** Hides the snackbar */
-  hide: () => SnackbarComponent;
-  
-  /** Sets the message text */
-  setMessage: (message: string) => SnackbarComponent;
-  
-  /** Gets the message text */
-  getMessage: () => string;
-  
-  /** Sets the action button text */
-  setAction: (text: string) => SnackbarComponent;
-  
-  /** Gets the action button text */
-  getAction: () => string;
-  
-  /** Sets the display duration */
-  setDuration: (duration: number) => SnackbarComponent;
-  
-  /** Gets the display duration */
-  getDuration: () => number;
-  
-  /** Sets the snackbar position */
-  setPosition: (position: SnackbarPosition) => SnackbarComponent;
-  
-  /** Gets the snackbar position */
-  getPosition: () => SnackbarPosition;
-  
-  /** Adds event listener */
-  on: (event: SnackbarEventType, handler: (event: SnackbarEvent) => void) => SnackbarComponent;
-  
-  /** Removes event listener */
-  off: (event: SnackbarEventType, handler: (event: SnackbarEvent) => void) => SnackbarComponent;
-  
-  /** Destroys the snackbar component and cleans up resources */
-  destroy: () => void;
-}