mtrl 0.1.2 → 0.2.0

package/src/components/snackbar/api.ts

@@ -0,0 +1,162 @@
+// 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

@@ -0,0 +1,62 @@
+// src/components/snackbar/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig,
+  BaseComponentConfig 
+} from '../../core/config/component-config';
+import { SnackbarConfig, BaseComponent, ApiOptions } from './types';
+import { SNACKBAR_VARIANTS, SNACKBAR_POSITIONS } from './constants';
+
+/**
+ * Default configuration for the Snackbar component
+ */
+export const defaultConfig: SnackbarConfig = {
+  variant: SNACKBAR_VARIANTS.BASIC,
+  position: SNACKBAR_POSITIONS.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/{constants.js → constants.ts}

@@ -1,16 +1,25 @@
-// src/components/snackbar/constants.js
+// src/components/snackbar/constants.ts
 
+/**
+ * Snackbar visual variants
+ */
 export const SNACKBAR_VARIANTS = {
   BASIC: 'basic',
   ACTION: 'action' // With action button
-}
+} as const;
 
+/**
+ * Snackbar display positions
+ */
 export const SNACKBAR_POSITIONS = {
   CENTER: 'center',
   START: 'start',
   END: 'end'
-}
+} as const;
 
+/**
+ * Validation schema for snackbar configuration
+ */
 export const SNACKBAR_SCHEMA = {
   variant: {
     type: 'string',
@@ -38,4 +47,12 @@ export const SNACKBAR_SCHEMA = {
     type: 'string',
     required: false
   }
-}
+} as const;
+
+/**
+ * Snackbar state classes
+ */
+export const SNACKBAR_STATES = {
+  VISIBLE: 'visible',
+  HIDDEN: 'hidden'
+} as const;

package/src/components/snackbar/features.ts

@@ -0,0 +1,76 @@
+// 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

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

package/src/components/snackbar/position.ts

@@ -0,0 +1,71 @@
+// src/components/snackbar/position.ts
+import { SNACKBAR_POSITIONS } from './constants';
+import { BaseComponent } from './types';
+
+/**
+ * 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

@@ -0,0 +1,76 @@
+// 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

@@ -0,0 +1,60 @@
+// 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

@@ -0,0 +1,58 @@
+// src/components/snackbar/constants.ts
+
+/**
+ * Snackbar visual variants
+ */
+export const SNACKBAR_VARIANTS = {
+  BASIC: 'basic',
+  ACTION: 'action' // With action button
+} as const;
+
+/**
+ * Snackbar display positions
+ */
+export const SNACKBAR_POSITIONS = {
+  CENTER: 'center',
+  START: 'start',
+  END: 'end'
+} as const;
+
+/**
+ * Validation schema for snackbar configuration
+ */
+export const SNACKBAR_SCHEMA = {
+  variant: {
+    type: 'string',
+    enum: Object.values(SNACKBAR_VARIANTS),
+    required: false
+  },
+  position: {
+    type: 'string',
+    enum: Object.values(SNACKBAR_POSITIONS),
+    required: false
+  },
+  message: {
+    type: 'string',
+    required: true
+  },
+  action: {
+    type: 'string',
+    required: false
+  },
+  duration: {
+    type: 'number',
+    required: false
+  },
+  class: {
+    type: 'string',
+    required: false
+  }
+} as const;
+
+/**
+ * Snackbar state classes
+ */
+export const SNACKBAR_STATES = {
+  VISIBLE: 'visible',
+  HIDDEN: 'hidden'
+} as const;

package/src/components/switch/api.ts

@@ -0,0 +1,77 @@
+// src/components/switch/api.ts
+import { BaseComponent, SwitchComponent, ApiOptions } from './types';
+
+/**
+ * Enhances switch 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, checkable }: ApiOptions) => 
+  (component: BaseComponent): SwitchComponent => ({
+    ...component as any,
+    element: component.element,
+    input: component.input as HTMLInputElement,
+
+    // Value management
+    getValue: component.getValue || (() => ''),
+    setValue(value: string): SwitchComponent {
+      component.setValue?.(value);
+      return this;
+    },
+
+    // State management
+    check(): SwitchComponent {
+      checkable.check();
+      return this;
+    },
+    
+    uncheck(): SwitchComponent {
+      checkable.uncheck();
+      return this;
+    },
+    
+    toggle(): SwitchComponent {
+      checkable.toggle();
+      return this;
+    },
+    
+    isChecked(): boolean {
+      return checkable.isChecked();
+    },
+
+    // Label management
+    setLabel(text: string): SwitchComponent {
+      component.text?.setText(text);
+      return this;
+    },
+    
+    getLabel(): string {
+      return component.text?.getText() || '';
+    },
+
+    // Event handling
+    on(event: string, handler: Function): SwitchComponent {
+      component.on?.(event, handler);
+      return this;
+    },
+    
+    off(event: string, handler: Function): SwitchComponent {
+      component.off?.(event, handler);
+      return this;
+    },
+
+    // State management
+    enable(): SwitchComponent {
+      disabled.enable();
+      return this;
+    },
+    
+    disable(): SwitchComponent {
+      disabled.disable();
+      return this;
+    },
+    
+    destroy(): void {
+      lifecycle.destroy();
+    }
+  });