mtrl 0.2.2 → 0.2.3

package/src/components/badge/badge.ts

@@ -0,0 +1,52 @@
+// src/components/badge/badge.ts
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import {
+  withEvents,
+  withLifecycle
+} from '../../core/compose/features';
+import { 
+  withVisibility,
+  withVariant,
+  withColor, 
+  withSize,
+  withPosition,
+  withMax,
+  withAttachment
+} from './features';
+import { withAPI } from './api';
+import { BadgeConfig, BadgeComponent } from './types';
+import { createBaseConfig, getElementConfig, getApiConfig } from './config';
+
+/**
+ * Creates a new Badge component
+ * @param {BadgeConfig} config - Badge configuration object
+ * @returns {BadgeComponent} Badge component instance
+ */
+const createBadge = (config: BadgeConfig = {}): BadgeComponent => {
+  const baseConfig = createBaseConfig(config);
+
+  try {
+    const badge = pipe(
+      createBase,
+      withEvents(),
+      withElement(getElementConfig(baseConfig)),
+      withVariant(baseConfig),
+      withColor(baseConfig),
+      withSize(baseConfig),
+      withPosition(baseConfig),
+      withMax(baseConfig),
+      withVisibility(),
+      withAttachment(baseConfig),
+      withLifecycle(),
+      comp => withAPI(getApiConfig(comp))(comp)
+    )(baseConfig);
+
+    return badge;
+  } catch (error) {
+    console.error('Badge creation error:', error);
+    throw new Error(`Failed to create badge: ${(error as Error).message}`);
+  }
+};
+
+export default createBadge;

package/src/components/badge/config.ts

@@ -0,0 +1,68 @@
+// src/components/badge/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig,
+  BaseComponentConfig 
+} from '../../core/config/component-config';
+import { BadgeConfig } from './types';
+import { BADGE_VARIANTS, BADGE_SIZES, BADGE_COLORS, BADGE_POSITIONS } from './constants';
+
+/**
+ * Default configuration for the Badge component
+ */
+export const defaultConfig: BadgeConfig = {
+  variant: BADGE_VARIANTS.STANDARD,
+  size: BADGE_SIZES.MEDIUM,
+  color: BADGE_COLORS.ERROR,
+  position: BADGE_POSITIONS.TOP_RIGHT,
+  content: '',
+  visible: true,
+  standalone: false
+};
+
+/**
+ * Creates the base configuration for Badge component
+ * @param {BadgeConfig} config - User provided configuration
+ * @returns {BadgeConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: BadgeConfig = {}): BadgeConfig => 
+  createComponentConfig(defaultConfig, config, 'badge') as BadgeConfig;
+
+/**
+ * Generates element configuration for the Badge component
+ * @param {BadgeConfig} config - Badge configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: BadgeConfig) => {
+  // Create the attributes object
+  const attrs: Record<string, any> = {};
+  
+  // Convert numeric content to string if needed
+  const content = config.content !== undefined ? String(config.content) : '';
+  
+  return createElementConfig(config, {
+    tag: 'span',
+    attrs,
+    className: config.class,
+    content: config.variant === BADGE_VARIANTS.DOT ? '' : content
+  });
+};
+
+/**
+ * Creates API configuration for the Badge component
+ * @param {Object} comp - Component with visibility and lifecycle features
+ * @returns {Object} API configuration object
+ */
+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()
+  }
+});
+
+export default defaultConfig;

package/src/components/badge/constants.ts

@@ -0,0 +1,30 @@
+// src/components/badge/constants.ts
+
+export const BADGE_VARIANTS = {
+  STANDARD: 'standard',
+  DOT: 'dot',
+  OUTLINED: 'outlined'
+}
+
+export const BADGE_SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+}
+
+export const BADGE_COLORS = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  TERTIARY: 'tertiary',
+  ERROR: 'error',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  INFO: 'info'
+}
+
+export const BADGE_POSITIONS = {
+  TOP_RIGHT: 'top-right',
+  TOP_LEFT: 'top-left',
+  BOTTOM_RIGHT: 'bottom-right',
+  BOTTOM_LEFT: 'bottom-left'
+}

package/src/components/badge/features.ts

@@ -0,0 +1,185 @@
+// src/components/badge/features.ts
+import { BADGE_VARIANTS, BADGE_SIZES, BADGE_COLORS, BADGE_POSITIONS } from './constants';
+import { BadgeConfig } from './types';
+
+/**
+ * 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 || BADGE_VARIANTS.STANDARD;
+  
+  // Apply variant class if not standard variant
+  if (variant !== BADGE_VARIANTS.STANDARD) {
+    component.element.classList.add(`${component.getClass('badge')}--${variant}`);
+    
+    // Clear content if dot variant
+    if (variant === BADGE_VARIANTS.DOT) {
+      component.element.textContent = '';
+    }
+  }
+  
+  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 || BADGE_COLORS.ERROR;
+  
+  // Apply color class
+  component.element.classList.add(`${component.getClass('badge')}--${color}`);
+  
+  return component;
+};
+
+/**
+ * Higher-order function that adds size features to a badge component
+ * @param {BadgeConfig} config - Badge configuration
+ * @returns {Function} Component enhancer with size features
+ */
+export const withSize = (config: BadgeConfig) => component => {
+  // Get size from config with fallback to default
+  const size = config.size || BADGE_SIZES.MEDIUM;
+  
+  // Apply size class if not medium (default)
+  if (size !== BADGE_SIZES.MEDIUM) {
+    component.element.classList.add(`${component.getClass('badge')}--${size}`);
+  }
+  
+  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 => {
+  // Skip for standalone badges
+  if (config.standalone) {
+    return component;
+  }
+  
+  // Get position from config with fallback to default
+  const position = config.position || BADGE_POSITIONS.TOP_RIGHT;
+  
+  // Apply position class and positioned class
+  component.element.classList.add(`${component.getClass('badge')}--${position}`);
+  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
+  if (config.max === undefined) {
+    return component;
+  }
+  
+  // Store max value in config for later use
+  component.config.max = config.max;
+  
+  // Apply max formatting if needed
+  if (typeof config.content === 'number' && config.content > config.max) {
+    component.element.textContent = String(config.max);
+    component.element.classList.add(`${component.getClass('badge')}--max`);
+  }
+  
+  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 for standalone badges or if no target is provided
+  if (config.standalone || !config.target) {
+    return component;
+  }
+  
+  // Create wrapper to hold the target and badge
+  const wrapper = document.createElement('div');
+  wrapper.classList.add(component.getClass('badge-wrapper'));
+  
+  // 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;
+};

package/src/components/badge/index.ts

@@ -0,0 +1,4 @@
+// src/components/badge/index.ts
+export { default } from './badge';
+export { BADGE_VARIANTS, BADGE_SIZES, BADGE_COLORS, BADGE_POSITIONS } from './constants';
+export { BadgeConfig, BadgeComponent } from './types';

package/src/components/badge/types.ts

@@ -0,0 +1,105 @@
+// src/components/badge/types.ts
+import { BADGE_VARIANTS, BADGE_SIZES, BADGE_COLORS, BADGE_POSITIONS } from './constants';
+
+/**
+ * Configuration interface for the Badge component
+ */
+export interface BadgeConfig {
+  /** Badge variant (standard, dot, outlined) */
+  variant?: keyof typeof BADGE_VARIANTS | BADGE_VARIANTS;
+  
+  /** Badge size (small, medium, large) */
+  size?: keyof typeof BADGE_SIZES | BADGE_SIZES;
+  
+  /** Badge color (primary, secondary, tertiary, error, success, warning, info) */
+  color?: keyof typeof BADGE_COLORS | BADGE_COLORS;
+  
+  /** Badge position relative to its container (top-right, top-left, bottom-right, bottom-left) */
+  position?: keyof typeof BADGE_POSITIONS | BADGE_POSITIONS;
+  
+  /** Text content inside the badge */
+  content?: string | number;
+  
+  /** Maximum value to display (shows "{max}+" if content exceeds max) */
+  max?: number;
+  
+  /** Whether the badge should be visible */
+  visible?: boolean;
+  
+  /** Whether the badge should be standalone (not attached to another element) */
+  standalone?: boolean;
+  
+  /** Target element to which badge will be attached */
+  target?: HTMLElement;
+  
+  /** Additional CSS classes */
+  class?: string;
+}
+
+/**
+ * Badge component interface
+ */
+export interface BadgeComponent {
+  /** Badge element */
+  element: HTMLElement;
+  
+  /** Badge wrapper element (if badge is attached to target) */
+  wrapper?: HTMLElement;
+  
+  /** Sets badge text content */
+  setContent: (content: string | number) => BadgeComponent;
+  
+  /** Gets badge text content */
+  getContent: () => string;
+  
+  /** Shows the badge */
+  show: () => BadgeComponent;
+  
+  /** Hides the badge */
+  hide: () => BadgeComponent;
+  
+  /** Toggles badge visibility */
+  toggle: (visible?: boolean) => BadgeComponent;
+  
+  /** Checks if the badge is visible */
+  isVisible: () => boolean;
+  
+  /** Sets maximum value (after which badge shows max+) */
+  setMax: (max: number) => BadgeComponent;
+  
+  /** Sets badge color */
+  setColor: (color: keyof typeof BADGE_COLORS | BADGE_COLORS) => BadgeComponent;
+  
+  /** Sets badge variant */
+  setVariant: (variant: keyof typeof BADGE_VARIANTS | BADGE_VARIANTS) => BadgeComponent;
+  
+  /** Sets badge size */
+  setSize: (size: keyof typeof BADGE_SIZES | BADGE_SIZES) => BadgeComponent;
+  
+  /** Sets badge position */
+  setPosition: (position: keyof typeof BADGE_POSITIONS | BADGE_POSITIONS) => BadgeComponent;
+  
+  /** Attaches badge to a target element */
+  attachTo: (target: HTMLElement) => BadgeComponent;
+  
+  /** Makes badge standalone (removes from wrapper) */
+  detach: () => BadgeComponent;
+  
+  /** Destroys the badge component and cleans up resources */
+  destroy: () => void;
+  
+  /** Gets the class with the specified name */
+  getClass: (name: string) => string;
+  
+  /** Add CSS classes */
+  addClass: (...classes: string[]) => BadgeComponent;
+  
+  /** Remove CSS classes */
+  removeClass: (...classes: string[]) => BadgeComponent;
+  
+  /** Add event listener */
+  on: (event: string, handler: Function) => BadgeComponent;
+  
+  /** Remove event listener */
+  off: (event: string, handler: Function) => BadgeComponent;
+}