mtrl 0.2.7 → 0.2.9

package/src/components/slider/features/handlers.ts

@@ -7,20 +7,23 @@ import { SliderConfig, SliderEvent } from '../types';
  * 
  * @param config Slider configuration
  * @param state Slider state object
- * @param uiHelpers UI helper methods
+ * @param uiRenderer UI renderer interface from controller
  * @param eventHelpers Event helper methods
  * @returns Event handlers for all slider interactions
  */
-export const createHandlers = (config: SliderConfig, state, uiHelpers, eventHelpers) => {
+export const createHandlers = (config: SliderConfig, state, uiRenderer, eventHelpers) => {
   // Get required elements from structure (with fallbacks)
+  const components = state.component?.components || {};
+  
+  // Extract needed components
   const {
     container = null,
-    track = null, 
-    handle = null, 
+    handle = null,
+    track = null,
     valueBubble = null, 
     secondHandle = null, 
     secondValueBubble = null
-  } = state.component?.structure || {};
+  } = components;
   
   // Get required helper methods (with fallbacks)
   const {
@@ -28,8 +31,8 @@ export const createHandlers = (config: SliderConfig, state, uiHelpers, eventHelp
     roundToStep = value => value,
     clamp = (value, min, max) => value,
     showValueBubble = () => {},
-    updateUi = () => {}
-  } = uiHelpers;
+    render = () => {}
+  } = uiRenderer;
   
   const { triggerEvent = () => ({ defaultPrevented: false }) } = eventHelpers;
   
@@ -127,7 +130,7 @@ export const createHandlers = (config: SliderConfig, state, uiHelpers, eventHelp
     document.addEventListener('touchmove', handleMouseMove, { passive: false });
     document.addEventListener('touchend', handleMouseUp);
     
-    updateUi();
+    render();
     triggerEvent(SLIDER_EVENTS.START, e);
   };
   
@@ -169,7 +172,7 @@ export const createHandlers = (config: SliderConfig, state, uiHelpers, eventHelp
       }
       
       // Update UI and trigger events
-      updateUi();
+      render();
       triggerEvent(SLIDER_EVENTS.INPUT, e);
       triggerEvent(SLIDER_EVENTS.CHANGE, e);
     } catch (error) {
@@ -244,7 +247,7 @@ export const createHandlers = (config: SliderConfig, state, uiHelpers, eventHelp
         state.value = newValue;
       }
       
-      updateUi();
+      render();
       triggerEvent(SLIDER_EVENTS.INPUT, e);
     } catch (error) {
       console.warn('Error during slider drag:', error);
@@ -274,7 +277,7 @@ export const createHandlers = (config: SliderConfig, state, uiHelpers, eventHelp
     
     // Reset active handle and update UI
     state.activeHandle = null;
-    updateUi();
+    render();
     
     // Trigger events
     triggerEvent(SLIDER_EVENTS.CHANGE, e);
@@ -355,7 +358,7 @@ export const createHandlers = (config: SliderConfig, state, uiHelpers, eventHelp
     }
     
     // Update UI and trigger events
-    updateUi();
+    render();
     triggerEvent(SLIDER_EVENTS.INPUT, e);
     triggerEvent(SLIDER_EVENTS.CHANGE, e);
   };
@@ -406,7 +409,7 @@ export const createHandlers = (config: SliderConfig, state, uiHelpers, eventHelp
    * Set up all event listeners
    */
   const setupEventListeners = () => {
-    if (!state.component || !state.component.structure) {
+    if (!state.component || !state.component.components) {
       console.warn('Cannot set up event listeners: missing component structure');
       return;
     }
@@ -436,7 +439,7 @@ export const createHandlers = (config: SliderConfig, state, uiHelpers, eventHelp
    * Clean up all event listeners
    */
   const cleanupEventListeners = () => {
-    if (!state.component || !state.component.structure) return;
+    if (!state.component || !state.component.components) return;
     
     // Clean up container listeners
     if (container) {
@@ -492,4 +495,4 @@ export const createHandlers = (config: SliderConfig, state, uiHelpers, eventHelp
     hideAllBubbles,
     clearKeyboardFocus
   };
-};
+}

package/src/components/slider/features/index.ts

@@ -1,4 +1,5 @@
 // src/components/slider/features/index.ts
-export { withStructure } from './structure';
+// Export slider-specific features
+export { withRange } from './range';
 export { withStates } from './states';
-export { withSlider } from './slider';
+export { withController } from './controller';

package/src/components/slider/features/range.ts

@@ -0,0 +1,104 @@
+// src/components/slider/features/range.ts
+import { SliderConfig } from '../types';
+import { createElement } from '../../../core/dom/create';
+
+/**
+ * Enhances structure definition with range slider elements
+ * 
+ * @param config Slider configuration
+ * @returns Component enhancer that adds range slider to structure
+ */
+export const withRange = (config: SliderConfig) => component => {
+  // If not a range slider or missing structure definition, return unmodified
+  if (!config.range || !config.secondValue || !component.structureDefinition) {
+    return component;
+  }
+  
+  try {
+    // Calculate values for second handle
+    const min = config.min || 0;
+    const max = config.max || 100;
+    const secondValue = config.secondValue;
+    const secondValuePercent = ((secondValue - min) / (max - min)) * 100;
+    const formatter = config.valueFormatter || (val => val.toString());
+    const isDisabled = config.disabled === true;
+    const getClass = component.getClass;
+    
+    // Clone the structure definition (deep copy)
+    const structureDefinition = JSON.parse(JSON.stringify(component.structureDefinition));
+    
+    // Add range class to root element
+    const rootClasses = structureDefinition.element.options.className || [];
+    if (Array.isArray(rootClasses)) {
+      rootClasses.push(getClass('slider--range'));
+    } else {
+      structureDefinition.element.options.className = `${rootClasses} ${getClass('slider--range')}`.trim();
+    }
+    
+    // Add start track segment to track children
+    const trackChildren = structureDefinition.element.children.container.children.track.children;
+    trackChildren.startTrack = {
+      name: 'startTrack',
+      creator: createElement,
+      options: {
+        tag: 'div',
+        className: getClass('slider-start-track'),
+        style: {
+          width: '0%'
+        }
+      }
+    };
+    
+    // Add second handle to container children
+    const containerChildren = structureDefinition.element.children.container.children;
+    containerChildren.secondHandle = {
+      name: 'secondHandle',
+      creator: createElement,
+      options: {
+        tag: 'div',
+        className: getClass('slider-handle'),
+        attrs: {
+          role: 'slider',
+          'aria-valuemin': String(min),
+          'aria-valuemax': String(max),
+          'aria-valuenow': String(secondValue),
+          'aria-orientation': 'horizontal',
+          tabindex: isDisabled ? '-1' : '0',
+          'aria-disabled': isDisabled ? 'true' : 'false',
+          'data-value': String(secondValue),
+          'data-handle-index': '1'
+        },
+        style: {
+          left: `${secondValuePercent}%`
+        }
+      }
+    };
+    
+    // Add second value bubble to container children
+    containerChildren.secondValueBubble = {
+      name: 'secondValueBubble',
+      creator: createElement,
+      options: {
+        tag: 'div',
+        className: getClass('slider-value'),
+        attrs: {
+          'aria-hidden': 'true',
+          'data-handle-index': '1'
+        },
+        text: formatter(secondValue),
+        style: {
+          left: `${secondValuePercent}%`
+        }
+      }
+    };
+    
+    // Return component with updated structure definition
+    return {
+      ...component,
+      structureDefinition
+    };
+  } catch (error) {
+    console.warn('Error enhancing structure with range functionality:', error);
+    return component;
+  }
+};

package/src/components/slider/slider.ts

@@ -1,42 +1,62 @@
 // src/components/slider/slider.ts
 import { pipe } from '../../core/compose/pipe';
-import { createBase, withElement } from '../../core/compose/component';
-import { withEvents, withLifecycle, withTextLabel, withIcon } from '../../core/compose/features';
-import { withStructure, withSlider } from './features';
-import { withStates } from './features/states';
+import { createBase } from '../../core/compose/component';
+import { withEvents, withLifecycle } from '../../core/compose/features';
+import { withStructure, withIcon, withLabel, withDom  } from '../../core/composition/features';
+import { 
+  withRange,
+  withStates,
+  withController
+} from './features';
 import { withAPI } from './api';
 import { SliderConfig, SliderComponent } from './types';
-import { createBaseConfig, getElementConfig, getApiConfig } from './config';
-
+import { createBaseConfig, getApiConfig } from './config';
 /**
  * Creates a new Slider component
+ * 
+ * Slider follows a clear architectural pattern:
+ * 1. Structure definition - Describes the DOM structure declaratively
+ * 2. Feature enhancement - Adds specific capabilities (range, icons, labels)
+ * 3. DOM creation - Turns the structure into actual DOM elements
+ * 4. State management - Handles visual states and appearance
+ * 5. Controller - Manages behavior, events, and UI rendering
+ * 6. Lifecycle - Handles component lifecycle events
+ * 7. Public API - Exposes a clean, consistent API
+ *
  * @param {SliderConfig} config - Slider configuration object
  * @returns {SliderComponent} Slider component instance
  */
 const createSlider = (config: SliderConfig = {}): SliderComponent => {
+  // Process configuration with defaults
   const baseConfig = createBaseConfig(config);
 
   try {
-    // Create the component with all required features
+    // Create the component by composing features in a specific order
     const component = pipe(
+      // Base component with event system
       createBase,
       withEvents(),
-      withElement(getElementConfig(baseConfig)),
-      withIcon(baseConfig),
-      withTextLabel(baseConfig),
       withStructure(baseConfig),
+      withIcon(baseConfig),
+      withLabel(baseConfig),
+      withRange(baseConfig),
+      
+      // Now create the actual DOM elements from the complete structure
+      withDom(),
+      
+      // Add state management and behavior
       withStates(baseConfig),
-      withSlider(baseConfig),
+      withController(baseConfig),
       withLifecycle()
     )(baseConfig);
     
-    // Generate the API configuration
+    // Generate the API configuration based on the enhanced component
     const apiOptions = getApiConfig(component);
     
-    // Apply the API layer
+    // Apply the public API layer
     const slider = withAPI(apiOptions)(component);
 
-    // Register event handlers from config
+    // Register event handlers from config for convenience
     if (baseConfig.on && typeof slider.on === 'function') {
       Object.entries(baseConfig.on).forEach(([event, handler]) => {
         if (typeof handler === 'function') {

package/src/components/slider/structure.ts

@@ -0,0 +1,152 @@
+// src/components/slider/structure.ts
+import { SliderConfig } from './types';
+
+/**
+ * Creates the base slider structure definition
+ * 
+ * @param component Component for class name generation
+ * @param config Slider configuration
+ * @returns Structure definition object
+ */
+export function createSliderDefinition(component, config: SliderConfig) {
+  // Get prefixed class names
+  const getClass = (className) => component.getClass(className);
+
+  // Set default values
+  const min = config.min || 0;
+  const max = config.max || 100;
+  const value = config.value !== undefined ? config.value : min;
+  const isDisabled = config.disabled === true;
+  const formatter = config.valueFormatter || (val => val.toString());
+  
+  // Calculate initial position
+  const valuePercent = ((value - min) / (max - min)) * 100;
+  
+  // Return base structure definition formatted for createStructure
+  return {
+    element: {
+      options: {
+        tag: 'div',
+        className: [getClass('slider'), config.class].filter(Boolean),
+        attrs: {
+          tabindex: '-1',
+          role: 'none',
+          'aria-disabled': isDisabled ? 'true' : 'false'
+        }
+      },
+      children: {
+        // Container with all slider elements
+        container: {
+          options: {
+            tag: 'div',
+            className: getClass('slider-container')
+          },
+          children: {
+            // Track with segments
+            track: {
+              options: {
+                tag: 'div',
+                className: getClass('slider-track')
+              },
+              children: {
+                activeTrack: {
+                  options: {
+                    tag: 'div',
+                    className: getClass('slider-active-track'),
+                    style: {
+                      width: `${valuePercent}%`
+                    }
+                  }
+                },
+                startTrack: {
+                  options: {
+                    tag: 'div',
+                    className: getClass('slider-start-track'),
+                    style: {
+                      display: 'none', // Initially hidden for single slider
+                      width: '0%'
+                    }
+                  }
+                },
+                remainingTrack: {
+                  options: {
+                    tag: 'div',
+                    className: getClass('slider-remaining-track'),
+                    style: {
+                      width: `${100 - valuePercent}%`
+                    }
+                  }
+                }
+              }
+            },
+            
+            // Ticks container
+            ticksContainer: {
+              options: {
+                tag: 'div',
+                className: getClass('slider-ticks-container')
+              }
+            },
+            
+            // Dots for ends
+            startDot: {
+              options: {
+                tag: 'div',
+                className: [
+                  getClass('slider-dot'),
+                  getClass('slider-dot--start')
+                ]
+              }
+            },
+            endDot: {
+              options: {
+                tag: 'div',
+                className: [
+                  getClass('slider-dot'),
+                  getClass('slider-dot--end')
+                ]
+              }
+            },
+            
+            // Main handle
+            handle: {
+              options: {
+                tag: 'div',
+                className: getClass('slider-handle'),
+                attrs: {
+                  role: 'slider',
+                  'aria-valuemin': String(min),
+                  'aria-valuemax': String(max),
+                  'aria-valuenow': String(value),
+                  'aria-orientation': 'horizontal',
+                  tabindex: isDisabled ? '-1' : '0',
+                  'aria-disabled': isDisabled ? 'true' : 'false',
+                  'data-value': String(value),
+                  'data-handle-index': '0'
+                },
+                style: {
+                  left: `${valuePercent}%`
+                }
+              }
+            }, 
+            // Main value bubble
+            valueBubble: {
+              options: {
+                tag: 'div',
+                className: getClass('slider-value'),
+                attrs: {
+                  'aria-hidden': 'true',
+                  'data-handle-index': '0'
+                },
+                text: formatter(value),
+                style: {
+                  left: `${valuePercent}%`
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+}

package/src/components/slider/types.ts

@@ -1,6 +1,24 @@
 // src/components/slider/types.ts
-import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS } from './constants';
 
+/**
+ * Available slider color variants
+ */
+export type SliderColor = 'primary' | 'secondary' | 'tertiary' | 'error';
+
+/**
+ * Available slider size variants
+ */
+export type SliderSize = 'small' | 'medium' | 'large';
+
+/**
+ * Available slider event types
+ */
+export type SliderEventType = 'change' | 'input' | 'focus' | 'blur' | 'start' | 'end';
+
+/**
+ * Configuration options for the slider component
+ * @interface SliderConfig
+ */
 export interface SliderConfig {
   /** Minimum value of the slider */
   min?: number;
@@ -21,10 +39,10 @@ export interface SliderConfig {
   disabled?: boolean;
   
   /** Color variant of the slider */
-  color?: keyof typeof SLIDER_COLORS | typeof SLIDER_COLORS[keyof typeof SLIDER_COLORS];
+  color?: SliderColor;
   
   /** Size variant of the slider */
-  size?: keyof typeof SLIDER_SIZES | typeof SLIDER_SIZES[keyof typeof SLIDER_SIZES];
+  size?: SliderSize;
   
   /** Whether to show tick marks */
   ticks?: boolean;
@@ -58,10 +76,14 @@ export interface SliderConfig {
   
   /** Event handlers for slider events */
   on?: {
-    [key in keyof typeof SLIDER_EVENTS | typeof SLIDER_EVENTS[keyof typeof SLIDER_EVENTS]]?: (event: SliderEvent) => void;
+    [key in SliderEventType]?: (event: SliderEvent) => void;
   };
 }
 
+/**
+ * Slider event data
+ * @interface SliderEvent
+ */
 export interface SliderEvent {
   /** The slider component that triggered the event */
   slider: any;
@@ -82,6 +104,10 @@ export interface SliderEvent {
   defaultPrevented: boolean;
 }
 
+/**
+ * Slider component public API interface
+ * @interface SliderComponent
+ */
 export interface SliderComponent {
   /** The root element of the slider */
   element: HTMLElement;
@@ -126,13 +152,13 @@ export interface SliderComponent {
   isDisabled: () => boolean;
   
   /** Sets slider color */
-  setColor: (color: keyof typeof SLIDER_COLORS | typeof SLIDER_COLORS[keyof typeof SLIDER_COLORS]) => SliderComponent;
+  setColor: (color: SliderColor) => SliderComponent;
   
   /** Gets slider color */
   getColor: () => string;
   
   /** Sets slider size */
-  setSize: (size: keyof typeof SLIDER_SIZES | typeof SLIDER_SIZES[keyof typeof SLIDER_SIZES]) => SliderComponent;
+  setSize: (size: SliderSize) => SliderComponent;
   
   /** Gets slider size */
   getSize: () => string;
@@ -156,10 +182,10 @@ export interface SliderComponent {
   getIcon: () => string;
   
   /** Adds event listener */
-  on: (event: keyof typeof SLIDER_EVENTS | typeof SLIDER_EVENTS[keyof typeof SLIDER_EVENTS], handler: (event: SliderEvent) => void) => SliderComponent;
+  on: (event: SliderEventType, handler: (event: SliderEvent) => void) => SliderComponent;
   
   /** Removes event listener */
-  off: (event: keyof typeof SLIDER_EVENTS | typeof SLIDER_EVENTS[keyof typeof SLIDER_EVENTS], handler: (event: SliderEvent) => void) => SliderComponent;
+  off: (event: SliderEventType, handler: (event: SliderEvent) => void) => SliderComponent;
   
   /** Destroys the slider component and cleans up resources */
   destroy: () => void;

package/src/components/snackbar/config.ts

@@ -5,14 +5,13 @@ import {
   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,
+  variant: 'basic',
+  position: 'center',
   duration: 4000
 };
 

package/src/components/snackbar/constants.ts

@@ -17,38 +17,6 @@ export const SNACKBAR_POSITIONS = {
   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
  */

package/src/components/snackbar/index.ts

@@ -1,4 +1,3 @@
 // 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

@@ -1,7 +1,15 @@
 // src/components/snackbar/position.ts
-import { SNACKBAR_POSITIONS } from './constants';
 import { BaseComponent } from './types';
 
+/**
+ * Snackbar display positions
+ */
+const SNACKBAR_POSITIONS = {
+  CENTER: 'center',
+  START: 'start',
+  END: 'end'
+}
+
 /**
  * Position configuration for the withPosition function
  */