mtrl 0.3.8 → 0.4.0

package/src/components/badge/api.ts

@@ -1,313 +0,0 @@
-// src/components/badge/api.ts
-import { BadgeComponent, BadgeColor, BadgeVariant, BadgePosition } from './types';
-import { formatBadgeLabel } from './config';
-
-/**
- * API configuration options for badge component
- * @category Components
- * @internal
- */
-interface ApiOptions {
-  visibility: {
-    show: () => void;
-    hide: () => void;
-    toggle: (visible?: boolean) => void;
-    isVisible: () => boolean;
-  };
-  lifecycle: {
-    destroy: () => void;
-  };
-}
-
-/**
- * Component with required elements and methods for API enhancement
- * @category Components
- * @internal
- */
-interface ComponentWithElements {
-  element: HTMLElement;
-  wrapper?: HTMLElement;
-  config: {
-    max?: number;
-    label?: string | number;
-    variant?: string;
-  };
-  getClass: (name: string) => string;
-  addClass: (...classes: string[]) => any;
-  removeClass: (...classes: string[]) => any;
-  on: (event: string, handler: Function) => any;
-  off: (event: string, handler: Function) => any;
-}
-
-// Common variant constants for internal use
-const VARIANT_SMALL = 'small';
-
-// Map of all badge colors for class removal
-const ALL_COLORS = [
-  'error', 'primary', 'secondary', 'tertiary', 'success', 'warning', 'info'
-];
-
-// Map of all badge variants for class removal
-const ALL_VARIANTS = ['small', 'large'];
-
-// Map of all badge positions for class removal
-const ALL_POSITIONS = ['top-right', 'top-left', 'bottom-right', 'bottom-left'];
-
-/**
- * Enhances a badge component with API methods.
- * This follows the higher-order function pattern to add public API methods
- * to the component, making them available to the end user.
- * 
- * @param {ApiOptions} options - API configuration options
- * @returns {Function} Higher-order function that adds API methods to component
- * @category Components
- * @internal This is an internal utility for the Badge component
- */
-export const withAPI = ({ visibility, lifecycle }: ApiOptions) => 
-  (component: ComponentWithElements): BadgeComponent => ({
-    ...component as any,
-    
-    /**
-     * Sets the badge label
-     * @param {string|number} label - Label to display in the badge
-     * @returns {BadgeComponent} Badge component instance for chaining
-     */
-    setLabel(label: string | number) {
-      component.config.label = label;
-      
-      // Small badges (dot variant) don't have text
-      if (component.config.variant === VARIANT_SMALL) {
-        component.element.textContent = '';
-        return this;
-      }
-      
-      // Format the label
-      const formattedLabel = formatBadgeLabel(label, component.config.max);
-      component.element.textContent = formattedLabel;
-      
-      // Add overflow class if label was truncated
-      component.element.classList.remove(`${component.getClass('badge')}--overflow`);
-      if (typeof label === 'number' && 
-          component.config.max !== undefined && 
-          label > component.config.max) {
-        component.element.classList.add(`${component.getClass('badge')}--overflow`);
-      }
-      
-      // Toggle visibility based on whether label is empty
-      if (formattedLabel === '' || formattedLabel === '0') {
-        this.hide();
-      } else {
-        this.show();
-      }
-      
-      return this;
-    },
-    
-    /**
-     * Gets the badge label
-     * @returns {string} Current badge label
-     */
-    getLabel() {
-      return component.element.textContent || '';
-    },
-    
-    /**
-     * Shows the badge
-     * @returns {BadgeComponent} Badge component instance for chaining
-     */
-    show() {
-      visibility.show();
-      return this;
-    },
-    
-    /**
-     * Hides the badge
-     * @returns {BadgeComponent} Badge component instance for chaining
-     */
-    hide() {
-      visibility.hide();
-      return this;
-    },
-    
-    /**
-     * Toggles badge visibility
-     * @param {boolean} [visible] - Optional flag to force visibility state
-     * @returns {BadgeComponent} Badge component instance for chaining
-     */
-    toggle(visible?: boolean) {
-      visibility.toggle(visible);
-      return this;
-    },
-    
-    /**
-     * Checks if the badge is visible
-     * @returns {boolean} True if badge is visible
-     */
-    isVisible() {
-      return visibility.isVisible();
-    },
-    
-    /**
-     * Sets maximum value (after which badge shows max+)
-     * 
-     * @param {number} max - Maximum value to display
-     * @returns {BadgeComponent} Badge component instance for chaining
-     */
-    setMax(max: number) {
-      component.config.max = max;
-      
-      // Apply max formatting if current label exceeds max
-      if (component.config.label !== undefined) {
-        this.setLabel(component.config.label);
-      }
-      
-      return this;
-    },
-    
-    /**
-     * Sets badge color
-     * @param {string} color - Color variant to apply
-     * @returns {BadgeComponent} Badge component instance for chaining
-     */
-    setColor(color: BadgeColor | string) {
-      // Remove existing color classes
-      ALL_COLORS.forEach(colorName => {
-        component.element.classList.remove(`${component.getClass('badge')}--${colorName}`);
-      });
-      
-      // Add new color class
-      component.element.classList.add(`${component.getClass('badge')}--${color}`);
-      return this;
-    },
-    
-    /**
-     * Sets badge variant
-     * @param {string} variant - Variant to apply (small or large)
-     * @returns {BadgeComponent} Badge component instance for chaining
-     */
-    setVariant(variant: BadgeVariant | string) {
-      // Remove existing variant classes
-      ALL_VARIANTS.forEach(variantName => {
-        component.element.classList.remove(`${component.getClass('badge')}--${variantName}`);
-      });
-      
-      // Add new variant class
-      component.element.classList.add(`${component.getClass('badge')}--${variant}`);
-      
-      // Update component config
-      component.config.variant = variant;
-      
-      // Update accessibility attributes
-      if (variant === VARIANT_SMALL) {
-        component.element.textContent = '';
-        component.element.setAttribute('aria-hidden', 'true');
-      } else {
-        component.element.setAttribute('role', 'status');
-        
-        // Restore label for large badges
-        if (component.config.label !== undefined) {
-          this.setLabel(component.config.label);
-        }
-      }
-      
-      return this;
-    },
-    
-    /**
-     * Sets badge position
-     * @param {string} position - Position variant to apply
-     * @returns {BadgeComponent} Badge component instance for chaining
-     */
-    setPosition(position: BadgePosition | string) {
-      // Remove existing position classes
-      ALL_POSITIONS.forEach(posName => {
-        component.element.classList.remove(`${component.getClass('badge')}--${posName}`);
-      });
-      
-      // Add new position class
-      component.element.classList.add(`${component.getClass('badge')}--${position}`);
-      
-      return this;
-    },
-    
-    /**
-     * Attaches badge to a target element
-     * @param {HTMLElement} target - Element to attach badge to
-     * @returns {BadgeComponent} Badge component instance for chaining
-     */
-    attachTo(target: HTMLElement) {
-      // If we already have a wrapper, remove the badge from it
-      if (component.wrapper && component.wrapper.contains(component.element)) {
-        component.wrapper.removeChild(component.element);
-      }
-      
-      // Create a new wrapper to hold the target and badge
-      const wrapper = document.createElement('div');
-      wrapper.classList.add(component.getClass('badge-wrapper'));
-      wrapper.style.position = 'relative';
-      
-      // Replace the target with the wrapper
-      const parent = target.parentNode;
-      if (parent) {
-        parent.replaceChild(wrapper, target);
-        wrapper.appendChild(target);
-        wrapper.appendChild(component.element);
-        
-        // Make sure the badge is positioned
-        component.element.classList.add(`${component.getClass('badge')}--positioned`);
-        
-        // Save the wrapper reference
-        component.wrapper = wrapper;
-      }
-      
-      return this;
-    },
-    
-    /**
-     * Makes badge standalone (removes from wrapper)
-     * @returns {BadgeComponent} Badge component instance for chaining
-     */
-    detach() {
-      if (component.wrapper && component.wrapper.contains(component.element)) {
-        // Remove the badge from the wrapper
-        component.wrapper.removeChild(component.element);
-        
-        // Remove the positioned class
-        component.element.classList.remove(`${component.getClass('badge')}--positioned`);
-        
-        // Add the badge to the document body or another container
-        document.body.appendChild(component.element);
-        
-        // Clear the wrapper reference
-        component.wrapper = undefined;
-      }
-      
-      return this;
-    },
-    
-    /**
-     * Destroys the badge component and cleans up resources
-     */
-    destroy() {
-      lifecycle.destroy();
-      
-      // If badge is in a wrapper, restore the original DOM structure
-      if (component.wrapper) {
-        const target = component.wrapper.firstChild as HTMLElement;
-        const parent = component.wrapper.parentNode;
-        
-        if (parent && target) {
-          parent.replaceChild(target, component.wrapper);
-        }
-      }
-    },
-    
-    // Forward basic component methods for API consistency
-    getClass: component.getClass,
-    addClass: component.addClass,
-    removeClass: component.removeClass,
-    on: component.on,
-    off: component.off,
-    element: component.element,
-    wrapper: component.wrapper
-  });

package/src/components/badge/config.ts

@@ -1,153 +0,0 @@
-// src/components/badge/config.ts
-import { 
-  createComponentConfig, 
-  createElementConfig
-} from '../../core/config/component-config';
-import { BadgeConfig } from './types';
-
-/**
- * Maximum character count for badge labels
- * @category Components
- * @internal
- */
-export const BADGE_MAX_CHARACTERS = 4;
-
-/**
- * Default configuration for the Badge component
- * These values will be used when not explicitly specified by the user.
- * 
- * @category Components
- */
-export const defaultConfig: BadgeConfig = {
-  /** Default to large badge (with text capability) */
-  variant: 'large',
-  /** Default to error (red) color */
-  color: 'error',
-  /** Default to top-right corner positioning */
-  position: 'top-right',
-  /** Default to empty label */
-  label: '',
-  /** Default to visible */
-  visible: true
-};
-
-/**
- * Creates the base configuration for Badge component by merging user-provided
- * config with default values.
- * 
- * @param {BadgeConfig} config - User provided configuration
- * @returns {BadgeConfig} Complete configuration with defaults applied
- * @category Components
- * @internal
- */
-export const createBaseConfig = (config: BadgeConfig = {}): BadgeConfig => 
-  createComponentConfig(defaultConfig, config, 'badge') as BadgeConfig;
-
-/**
- * Generates element configuration for the Badge component.
- * This function creates the necessary attributes and configuration
- * for the DOM element creation process.
- * 
- * @param {BadgeConfig} config - Badge configuration
- * @returns {Object} Element configuration object for withElement
- * @category Components
- * @internal
- */
-export const getElementConfig = (config: BadgeConfig) => {
-  // Create the attributes object
-  const attrs: Record<string, any> = {};
-  
-  // For large badges, set appropriate ARIA attributes for screen readers
-  if (config.variant !== 'small') {
-    attrs.role = 'status';
-  }
-  
-  // Format the label if needed - small badges have no text
-  const formattedLabel = config.variant === 'small' 
-    ? '' 
-    : formatBadgeLabel(config.label || '', config.max);
-  
-  return createElementConfig(config, {
-    tag: 'span',
-    attrs,
-    className: config.class,
-    text: formattedLabel // Use the formatted label
-  });
-};
-
-/**
- * Creates API configuration for the Badge component.
- * This connects the core component features (like visibility)
- * to the public API methods exposed to users.
- * 
- * @param {Object} comp - Component with visibility and lifecycle features
- * @returns {Object} API configuration object
- * @category Components
- * @internal
- */
-export const getApiConfig = (comp) => ({
-  visibility: {
-    show: () => comp.visibility.show(),
-    hide: () => comp.visibility.hide(),
-    toggle: (visible?: boolean) => comp.visibility.toggle(visible),
-    isVisible: () => comp.visibility.isVisible()
-  },
-  lifecycle: {
-    destroy: () => comp.lifecycle.destroy()
-  }
-});
-
-/**
- * Format a badge label following Material Design 3 guidelines:
- * - Max 4 characters including "+" for overflow
- * - Add "+" for numeric values exceeding max
- * 
- * @param {string|number} label - Original label
- * @param {number} max - Maximum value before using "+"
- * @returns {string} Formatted label that fits within badge constraints
- * @category Components
- * @internal
- * 
- * @example
- * formatBadgeLabel(5) // "5"
- * formatBadgeLabel(1250, 999) // "999+"
- * formatBadgeLabel("New") // "New"
- * formatBadgeLabel("VeryLong") // "Very" (truncated)
- */
-export const formatBadgeLabel = (label: string | number, max?: number): string => {
-  // Handle empty or undefined labels
-  if (label === undefined || label === null || label === '') {
-    return '';
-  }
-  
-  let formattedLabel = String(label);
-  
-  const numericLabel = Number(label);
-
-  // Apply max value formatting for numbers
-  if (max !== undefined && !isNaN(numericLabel) && numericLabel > max) {
-    formattedLabel = `${max}+`;
-  }
-  
-  // Ensure label doesn't exceed max characters
-  if (formattedLabel.length > BADGE_MAX_CHARACTERS) {
-    // Try to preserve as much information as possible
-    // For large numbers, use abbreviated format with "+"
-    const numericValue = Number(label);
-    if (!isNaN(numericValue)) {
-      if (numericValue >= 1000) {
-        formattedLabel = '999+';
-      } else {
-        // For numbers under 1000 but still too long, truncate
-        formattedLabel = formattedLabel.substring(0, BADGE_MAX_CHARACTERS - 1) + '+';
-      }
-    } else {
-      // For non-numeric values, simply truncate
-      formattedLabel = formattedLabel.substring(0, BADGE_MAX_CHARACTERS);
-    }
-  }
-  
-  return formattedLabel;
-};
-
-export default defaultConfig;

package/src/components/badge/features.ts

@@ -1,194 +0,0 @@
-// src/components/badge/features.ts
-import { BadgeConfig } from './types';
-import { formatBadgeLabel } from './config';
-
-// Common badge variants
-const VARIANT_SMALL = 'small';
-const VARIANT_LARGE = 'large';
-
-// Common badge colors
-const COLOR_ERROR = 'error';
-
-// Common badge positions
-const POSITION_TOP_RIGHT = 'top-right';
-
-/**
- * Higher-order function that adds visibility control features to a component
- * @returns {Function} Component enhancer with visibility features
- */
-export const withVisibility = () => component => {
-  // Get config values
-  const visible = component.config.visible !== false; // Default to true if not specified
-  
-  // Initialize visibility state based on config
-  if (!visible) {
-    component.element.classList.add(`${component.getClass('badge')}--invisible`);
-  }
-  
-  return {
-    ...component,
-    visibility: {
-      /**
-       * Shows the badge
-       */
-      show() {
-        component.element.classList.remove(`${component.getClass('badge')}--invisible`);
-      },
-      
-      /**
-       * Hides the badge
-       */
-      hide() {
-        component.element.classList.add(`${component.getClass('badge')}--invisible`);
-      },
-      
-      /**
-       * Toggles badge visibility
-       * @param {boolean} [visible] - Optional flag to force visibility state
-       */
-      toggle(visible?: boolean) {
-        if (visible === undefined) {
-          component.element.classList.toggle(`${component.getClass('badge')}--invisible`);
-        } else if (visible) {
-          this.show();
-        } else {
-          this.hide();
-        }
-      },
-      
-      /**
-       * Checks if the badge is visible
-       * @returns {boolean} True if badge is visible
-       */
-      isVisible() {
-        return !component.element.classList.contains(`${component.getClass('badge')}--invisible`);
-      }
-    }
-  };
-};
-
-/**
- * Higher-order function that adds variant features to a badge component
- * @param {BadgeConfig} config - Badge configuration
- * @returns {Function} Component enhancer with variant features
- */
-export const withVariant = (config: BadgeConfig) => component => {
-  // Get variant from config with fallback to default
-  const variant = config.variant || VARIANT_LARGE;
-  
-  // Apply variant class
-  component.element.classList.add(`${component.getClass('badge')}--${variant}`);
-  
-  // Small badges (dot variant) don't have text
-  if (variant === VARIANT_SMALL) {
-    component.element.textContent = '';
-    component.element.setAttribute('aria-hidden', 'true');
-  } else {
-    // Add accessibility for large badges
-    component.element.setAttribute('role', 'status');
-    
-    // Set the label if available and variant is large
-    if (config.label !== undefined && config.label !== '') {
-      // Format the label according to max value
-      const formattedLabel = formatBadgeLabel(config.label, config.max);
-      component.element.textContent = formattedLabel;
-    }
-  }
-  
-  return component;
-};
-
-/**
- * Higher-order function that adds color features to a badge component
- * @param {BadgeConfig} config - Badge configuration
- * @returns {Function} Component enhancer with color features
- */
-export const withColor = (config: BadgeConfig) => component => {
-  // Get color from config with fallback to default
-  const color = config.color || COLOR_ERROR;
-  
-  // Apply color class
-  component.element.classList.add(`${component.getClass('badge')}--${color}`);
-  
-  return component;
-};
-
-/**
- * Higher-order function that adds positioning features to a badge component
- * @param {BadgeConfig} config - Badge configuration
- * @returns {Function} Component enhancer with positioning features
- */
-export const withPosition = (config: BadgeConfig) => component => {
-  // Get position from config with fallback to default
-  const position = config.position || POSITION_TOP_RIGHT;
-  
-  // Apply position class
-  component.element.classList.add(`${component.getClass('badge')}--${position}`);
-  
-  // If there's a target, add positioned class
-  if (config.target) {
-    component.element.classList.add(`${component.getClass('badge')}--positioned`);
-  }
-  
-  return component;
-};
-
-/**
- * Higher-order function that adds max value features to a badge component
- * @param {BadgeConfig} config - Badge configuration
- * @returns {Function} Component enhancer with max value features
- */
-export const withMax = (config: BadgeConfig) => component => {
-  // Skip if no max is defined or for small badges
-  if (config.max === undefined || config.variant === VARIANT_SMALL) {
-    return component;
-  }
-  
-  // Store max value in config for later use
-  component.config.max = config.max;
-  
-  // Apply max formatting if needed
-  if (config.label !== undefined && config.label !== '') {
-    const formattedLabel = formatBadgeLabel(config.label, config.max);
-    component.element.textContent = formattedLabel;
-    
-    // Add overflow class if label was truncated
-    if (typeof config.label === 'number' && config.label > config.max) {
-      component.element.classList.add(`${component.getClass('badge')}--overflow`);
-    }
-  }
-  
-  return component;
-};
-
-/**
- * Higher-order function that attaches badge to a target element
- * @param {BadgeConfig} config - Badge configuration
- * @returns {Function} Component enhancer with attachment features
- */
-export const withAttachment = (config: BadgeConfig) => component => {
-  // Skip if no target is provided
-  if (!config.target) {
-    return component;
-  }
-  
-  // Create wrapper to hold the target and badge
-  const wrapper = document.createElement('div');
-  wrapper.classList.add(component.getClass('badge-wrapper'));
-  
-  // Make sure positioning context is correct
-  wrapper.style.position = 'relative';
-  
-  // Replace the target with the wrapper
-  const parent = config.target.parentNode;
-  if (parent) {
-    parent.replaceChild(wrapper, config.target);
-    wrapper.appendChild(config.target);
-    wrapper.appendChild(component.element);
-    
-    // Save the wrapper reference
-    component.wrapper = wrapper;
-  }
-  
-  return component;
-};