mtrl 0.1.3 → 0.2.1

package/src/components/progress/api.ts

@@ -0,0 +1,179 @@
+// src/components/progress/api.ts
+
+import { ProgressComponent } from './types';
+import { PROGRESS_EVENTS } from './constants';
+
+interface ApiOptions {
+  value: {
+    getValue: () => number;
+    setValue: (value: number) => void;
+    getMax: () => number;
+  };
+  buffer: {
+    getBuffer: () => number;
+    setBuffer: (value: number) => void;
+  };
+  disabled: {
+    enable: () => void;
+    disable: () => void;
+    isDisabled: () => boolean;
+  };
+  label: {
+    show: () => void;
+    hide: () => void;
+    format: (formatter: (value: number, max: number) => string) => void;
+    setContent: (content: string) => void;
+  };
+  state: {
+    setIndeterminate: (indeterminate: boolean) => void;
+    isIndeterminate: () => boolean;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+}
+
+interface ComponentWithElements {
+  element: HTMLElement;
+  trackElement: HTMLElement;
+  indicatorElement: HTMLElement;
+  labelElement?: HTMLElement;
+  getClass: (name: string) => string;
+  emit: (event: string, data?: any) => void;
+}
+
+/**
+ * Enhances a progress component with API methods
+ * @param {ApiOptions} options - API configuration options
+ * @returns {Function} Higher-order function that adds API methods to component
+ * @internal This is an internal utility for the Progress component
+ */
+export const withAPI = (options: ApiOptions) => 
+  (component: ComponentWithElements): ProgressComponent => ({
+    ...component as any,
+    
+    setValue(value: number) {
+      options.value.setValue(value);
+      
+      // Update the visual indicator
+      if (!options.state.isIndeterminate()) {
+        const percent = (value / options.value.getMax()) * 100;
+        
+        if (component.getClass('progress').includes('linear')) {
+          component.indicatorElement.style.width = `${percent}%`;
+        } else {
+          // Circular progress calculation
+          const circumference = 2 * Math.PI * 45; // r=45 is the SVG circle radius
+          const strokeDasharray = circumference;
+          const strokeDashoffset = circumference * (1 - percent / 100);
+          
+          if (component.indicatorElement instanceof SVGElement) {
+            component.indicatorElement.style.strokeDasharray = `${strokeDasharray}`;
+            component.indicatorElement.style.strokeDashoffset = `${strokeDashoffset}`;
+          }
+        }
+      }
+      
+      // Update label if present
+      if (component.labelElement) {
+        const formatter = (v: number, max: number) => `${Math.round((v / max) * 100)}%`;
+        component.labelElement.textContent = formatter(value, options.value.getMax());
+      }
+      
+      component.emit(PROGRESS_EVENTS.VALUE_CHANGE, { value });
+      return this;
+    },
+    
+    getValue() {
+      return options.value.getValue();
+    },
+    
+    setBuffer(value: number) {
+      options.buffer.setBuffer(value);
+      
+      if (component.getClass('progress').includes('linear')) {
+        const bufferElement = component.element.querySelector(`.${component.getClass('progress')}-buffer`);
+        if (bufferElement) {
+          const percent = (value / options.value.getMax()) * 100;
+          (bufferElement as HTMLElement).style.width = `${percent}%`;
+        }
+      }
+      
+      return this;
+    },
+    
+    getBuffer() {
+      return options.buffer.getBuffer();
+    },
+    
+    enable() {
+      options.disabled.enable();
+      component.element.removeAttribute('aria-disabled');
+      return this;
+    },
+    
+    disable() {
+      options.disabled.disable();
+      component.element.setAttribute('aria-disabled', 'true');
+      return this;
+    },
+    
+    isDisabled() {
+      return options.disabled.isDisabled();
+    },
+    
+    showLabel() {
+      options.label.show();
+      return this;
+    },
+    
+    hideLabel() {
+      options.label.hide();
+      return this;
+    },
+    
+    setLabelFormatter(formatter: (value: number, max: number) => string) {
+      options.label.format(formatter);
+      
+      // Update the current label with the new formatter
+      if (component.labelElement) {
+        const value = this.getValue();
+        const max = options.value.getMax();
+        component.labelElement.textContent = formatter(value, max);
+      }
+      
+      return this;
+    },
+    
+    setIndeterminate(indeterminate: boolean) {
+      const wasIndeterminate = options.state.isIndeterminate();
+      options.state.setIndeterminate(indeterminate);
+      
+      // Toggle the indeterminate class
+      const indeterminateClass = `${component.getClass('progress')}--indeterminate`;
+      
+      if (indeterminate) {
+        component.element.classList.add(indeterminateClass);
+        component.element.setAttribute('aria-valuenow', '');
+      } else {
+        component.element.classList.remove(indeterminateClass);
+        const value = this.getValue();
+        component.element.setAttribute('aria-valuenow', value.toString());
+        this.setValue(value); // Update the visual state
+      }
+      
+      if (wasIndeterminate !== indeterminate) {
+        component.emit(PROGRESS_EVENTS.STATE_CHANGE, { indeterminate });
+      }
+      
+      return this;
+    },
+    
+    isIndeterminate() {
+      return options.state.isIndeterminate();
+    },
+    
+    destroy() {
+      options.lifecycle.destroy();
+    }
+  });

package/src/components/progress/config.ts

@@ -0,0 +1,124 @@
+// src/components/progress/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig,
+  BaseComponentConfig 
+} from '../../core/config/component-config';
+import { ProgressConfig } from './types';
+import { PROGRESS_VARIANTS, PROGRESS_SIZES } from './constants';
+
+/**
+ * Default configuration for the Progress component
+ */
+export const defaultConfig: ProgressConfig = {
+  variant: PROGRESS_VARIANTS.LINEAR,
+  size: PROGRESS_SIZES.MEDIUM,
+  value: 0,
+  max: 100,
+  buffer: 0,
+  showLabel: false
+  // Don't set disabled: false as default - it should be undefined by default
+};
+
+/**
+ * Creates the base configuration for Progress component
+ * @param {ProgressConfig} config - User provided configuration
+ * @returns {ProgressConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: ProgressConfig = {}): ProgressConfig => 
+  createComponentConfig(defaultConfig, config, 'progress') as ProgressConfig;
+
+/**
+ * Generates element configuration for the Progress component
+ * @param {ProgressConfig} config - Progress configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: ProgressConfig) => {
+  const isIndeterminate = config.indeterminate === true;
+  
+  // Create the attributes object
+  const attrs: Record<string, any> = {
+    role: 'progressbar',
+    'aria-valuemin': '0',
+    'aria-valuemax': (config.max || 100).toString()
+  };
+  
+  // Only add aria-valuenow if not indeterminate
+  if (!isIndeterminate && config.value !== undefined) {
+    attrs['aria-valuenow'] = config.value.toString();
+  }
+  
+  // Only add disabled attribute if it's explicitly true
+  if (config.disabled === true) {
+    attrs['aria-disabled'] = 'true';
+  }
+  
+  const isCircular = config.variant === PROGRESS_VARIANTS.CIRCULAR;
+  
+  return createElementConfig(config, {
+    tag: 'div',
+    attrs,
+    className: config.class
+  });
+};
+
+/**
+ * Creates API configuration for the Progress component
+ * @param {Object} comp - Component with state management features
+ * @param {Object} state - State object containing component state
+ * @returns {Object} API configuration object
+ */
+export const getApiConfig = (comp, state) => ({
+  value: {
+    getValue: () => state.value,
+    setValue: (value: number) => { 
+      state.value = Math.max(0, Math.min(state.max, value)); 
+    },
+    getMax: () => state.max
+  },
+  buffer: {
+    getBuffer: () => state.buffer,
+    setBuffer: (value: number) => { 
+      state.buffer = Math.max(0, Math.min(state.max, value)); 
+    }
+  },
+  disabled: {
+    enable: () => comp.disabled.enable(),
+    disable: () => comp.disabled.disable(),
+    isDisabled: () => comp.disabled.isDisabled()
+  },
+  label: {
+    show: () => {
+      if (!state.labelElement) {
+        const labelElement = document.createElement('div');
+        labelElement.className = `${comp.getClass('progress')}-label`;
+        labelElement.textContent = state.labelFormatter(state.value, state.max);
+        comp.element.appendChild(labelElement);
+        state.labelElement = labelElement;
+        comp.labelElement = labelElement;
+      }
+    },
+    hide: () => {
+      if (state.labelElement) {
+        state.labelElement.remove();
+        state.labelElement = undefined;
+        comp.labelElement = undefined;
+      }
+    },
+    format: (formatter) => { state.labelFormatter = formatter; },
+    setContent: (content) => {
+      if (state.labelElement) {
+        state.labelElement.textContent = content;
+      }
+    }
+  },
+  state: {
+    setIndeterminate: (indeterminate: boolean) => { state.indeterminate = indeterminate; },
+    isIndeterminate: () => state.indeterminate
+  },
+  lifecycle: {
+    destroy: () => comp.lifecycle.destroy()
+  }
+});
+
+export default defaultConfig;

package/src/components/progress/constants.ts

@@ -0,0 +1,43 @@
+// src/components/progress/constants.ts
+
+/**
+ * Progress component variants
+ */
+export const PROGRESS_VARIANTS = {
+  /** Standard linear progress bar */
+  LINEAR: 'linear',
+  
+  /** Circular progress indicator */
+  CIRCULAR: 'circular',
+  
+  /** Progress with known value */
+  DETERMINATE: 'determinate',
+  
+  /** Indeterminate progress animation */
+  INDETERMINATE: 'indeterminate'
+} as const;
+
+/**
+ * Progress component sizes
+ */
+export const PROGRESS_SIZES = {
+  /** Small progress indicator (2px height for linear, 16px diameter for circular) */
+  SMALL: 'small',
+  
+  /** Medium progress indicator (4px height for linear, 24px diameter for circular) */
+  MEDIUM: 'medium',
+  
+  /** Large progress indicator (8px height for linear, 48px diameter for circular) */
+  LARGE: 'large'
+} as const;
+
+/**
+ * Progress component events
+ */
+export const PROGRESS_EVENTS = {
+  /** Fired when value changes */
+  VALUE_CHANGE: 'valueChange',
+  
+  /** Fired when component becomes determinate/indeterminate */
+  STATE_CHANGE: 'stateChange'
+} as const;

package/src/components/progress/index.ts

@@ -0,0 +1,5 @@
+// src/components/progress/index.ts
+
+export { default } from './progress';
+export { PROGRESS_VARIANTS, PROGRESS_SIZES, PROGRESS_EVENTS } from './constants';
+export { ProgressConfig, ProgressComponent } from './types';

package/src/components/progress/progress.ts

@@ -0,0 +1,163 @@
+// src/components/progress/progress.ts
+
+import { PREFIX } from '../../core/config';
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import {
+  withEvents,
+  withVariant,
+  withSize,
+  withDisabled,
+  withLifecycle
+} from '../../core/compose/features';
+import { withAPI } from './api';
+import { ProgressConfig, ProgressComponent } from './types';
+import { PROGRESS_VARIANTS, PROGRESS_SIZES, PROGRESS_EVENTS } from './constants';
+import { createBaseConfig, getElementConfig, getApiConfig } from './config';
+
+// Helper functions
+const createLinearProgressDOM = (baseClass: string) => {
+  const track = document.createElement('div');
+  track.className = `${baseClass}-track`;
+  
+  const indicator = document.createElement('div');
+  indicator.className = `${baseClass}-indicator`;
+  
+  const buffer = document.createElement('div');
+  buffer.className = `${baseClass}-buffer`;
+  
+  return { track, indicator, buffer };
+};
+
+const createCircularProgressDOM = (baseClass: string) => {
+  const size = 96; // Default SVG viewBox size
+  const track = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+  track.setAttribute('cx', '48');
+  track.setAttribute('cy', '48');
+  track.setAttribute('r', '45');
+  track.setAttribute('fill', 'none');
+  track.setAttribute('stroke-width', '6');
+  track.className = `${baseClass}-track`;
+  
+  const indicator = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+  indicator.setAttribute('cx', '48');
+  indicator.setAttribute('cy', '48');
+  indicator.setAttribute('r', '45');
+  indicator.setAttribute('fill', 'none');
+  indicator.setAttribute('stroke-width', '6');
+  indicator.className = `${baseClass}-indicator`;
+  
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('viewBox', `0 0 ${size} ${size}`);
+  svg.appendChild(track);
+  svg.appendChild(indicator);
+  
+  return { track, indicator, svg };
+};
+
+/**
+ * Creates a new Progress component
+ * @param {ProgressConfig} config - Progress configuration object
+ * @returns {ProgressComponent} Progress component instance
+ * 
+ * @example
+ * ```ts
+ * // Create a linear determinate progress bar
+ * const progress = createProgress({
+ *   variant: 'linear',
+ *   value: 42,
+ *   showLabel: true
+ * });
+ * 
+ * // Create an indeterminate circular progress
+ * const loader = createProgress({
+ *   variant: 'circular',
+ *   size: 'large',
+ *   indeterminate: true
+ * });
+ * ```
+ */
+const createProgress = (config: ProgressConfig = {}): ProgressComponent => {
+  // Create base configuration
+  const baseConfig = createBaseConfig(config);
+  
+  try {
+    // Create state container
+    const state = {
+      value: baseConfig.value || 0,
+      max: baseConfig.max || 100,
+      buffer: baseConfig.buffer || 0,
+      indeterminate: baseConfig.indeterminate || false,
+      labelFormatter: (v: number, m: number) => `${Math.round((v / m) * 100)}%`,
+      labelElement: undefined as HTMLElement | undefined
+    };
+    
+    let trackElement: HTMLElement;
+    let indicatorElement: HTMLElement;
+    
+    // Create the component with the pipe pattern
+    const component = pipe(
+      createBase,
+      withEvents(),
+      withElement(getElementConfig(baseConfig)),
+      withVariant(baseConfig),
+      withSize(baseConfig),
+      withDisabled(baseConfig),
+      withLifecycle(),
+      // Add DOM structure based on variant
+      (component) => {
+        const baseClass = component.getClass('progress');
+        const isCircular = baseConfig.variant === PROGRESS_VARIANTS.CIRCULAR;
+        
+        if (isCircular) {
+          const { track, indicator, svg } = createCircularProgressDOM(baseClass);
+          component.element.appendChild(svg);
+          trackElement = track;
+          indicatorElement = indicator;
+        } else {
+          const { track, indicator, buffer } = createLinearProgressDOM(baseClass);
+          component.element.appendChild(buffer);
+          component.element.appendChild(track);
+          component.element.appendChild(indicator);
+          trackElement = track;
+          indicatorElement = indicator;
+        }
+        
+        // Add label if requested
+        if (baseConfig.showLabel) {
+          const labelElement = document.createElement('div');
+          labelElement.className = `${baseClass}-label`;
+          labelElement.textContent = state.labelFormatter(state.value, state.max);
+          component.element.appendChild(labelElement);
+          state.labelElement = labelElement;
+        }
+        
+        return {
+          ...component,
+          trackElement,
+          indicatorElement,
+          labelElement: state.labelElement
+        };
+      },
+      // Add API
+      comp => withAPI(getApiConfig(comp, state))(comp)
+    )(baseConfig);
+    
+    // Initialize state based on configuration
+    if (baseConfig.indeterminate) {
+      component.setIndeterminate(true);
+    } else {
+      component.setValue(state.value);
+      if (baseConfig.buffer !== undefined) {
+        component.setBuffer(baseConfig.buffer);
+      }
+    }
+
+    return component;
+  } catch (error) {
+    console.error('Progress creation error:', error);
+    throw new Error(`Failed to create progress: ${(error as Error).message}`);
+  }
+};
+
+export default createProgress;

package/src/components/progress/types.ts

@@ -0,0 +1,102 @@
+// src/components/progress/types.ts
+import { PROGRESS_VARIANTS, PROGRESS_SIZES } from './constants';
+
+/**
+ * Configuration interface for the Progress component
+ */
+export interface ProgressConfig {
+  /** Progress variant (linear, circular) */
+  variant?: keyof typeof PROGRESS_VARIANTS | string;
+  
+  /** Progress size (small, medium, large) */
+  size?: keyof typeof PROGRESS_SIZES | string;
+  
+  /** Initial progress value (0-100) */
+  value?: number;
+  
+  /** Whether the progress indicator is initially disabled */
+  disabled?: boolean;
+  
+  /** Maximum value (defaults to 100) */
+  max?: number;
+  
+  /** Custom buffer value for linear progress */
+  buffer?: number;
+  
+  /** Additional CSS classes */
+  class?: string;
+  
+  /** Whether to show text label with percentage */
+  showLabel?: boolean;
+  
+  /** Whether progress is indeterminate */
+  indeterminate?: boolean;
+  
+  /** Custom label format function */
+  labelFormatter?: (value: number, max: number) => string;
+}
+
+/**
+ * Progress component interface
+ */
+export interface ProgressComponent {
+  /** The component's root element */
+  element: HTMLElement;
+  
+  /** The track element */
+  trackElement: HTMLElement;
+  
+  /** The indicator element */
+  indicatorElement: HTMLElement;
+  
+  /** The label element (if enabled) */
+  labelElement?: HTMLElement;
+  
+  /** Sets the current progress value */
+  setValue: (value: number) => ProgressComponent;
+  
+  /** Gets the current progress value */
+  getValue: () => number;
+  
+  /** Sets the buffer value (for linear variant) */
+  setBuffer: (value: number) => ProgressComponent;
+  
+  /** Gets the current buffer value */
+  getBuffer: () => number;
+  
+  /** Enables the progress component */
+  enable: () => ProgressComponent;
+  
+  /** Disables the progress component */
+  disable: () => ProgressComponent;
+  
+  /** Checks if the component is disabled */
+  isDisabled: () => boolean;
+  
+  /** Shows the label */
+  showLabel: () => ProgressComponent;
+  
+  /** Hides the label */
+  hideLabel: () => ProgressComponent;
+  
+  /** Sets a custom formatter for the label */
+  setLabelFormatter: (formatter: (value: number, max: number) => string) => ProgressComponent;
+  
+  /** Sets the indeterminate state */
+  setIndeterminate: (indeterminate: boolean) => ProgressComponent;
+  
+  /** Checks if the component is indeterminate */
+  isIndeterminate: () => boolean;
+  
+  /** Adds event listener */
+  on: (event: string, handler: Function) => ProgressComponent;
+  
+  /** Removes event listener */
+  off: (event: string, handler: Function) => ProgressComponent;
+  
+  /** Destroys the component and cleans up resources */
+  destroy: () => void;
+  
+  /** Add CSS classes */
+  addClass: (...classes: string[]) => ProgressComponent;
+}