mtrl 0.1.3 → 0.2.1

package/src/core/utils/validate.ts

@@ -0,0 +1,234 @@
+// src/core/utils/validate.ts
+
+/**
+ * Validation rule interface
+ */
+export interface ValidationRule {
+  /**
+   * Whether field is required
+   */
+  required?: boolean;
+  
+  /**
+   * Expected data type
+   */
+  type?: string;
+  
+  /**
+   * Minimum value for numbers
+   */
+  minimum?: number;
+  
+  /**
+   * Maximum value for numbers
+   */
+  maximum?: number;
+  
+  /**
+   * Regular expression pattern for strings
+   */
+  pattern?: string | RegExp;
+  
+  /**
+   * Allowed values (enum)
+   */
+  enum?: any[];
+  
+  /**
+   * Minimum string length
+   */
+  minLength?: number;
+  
+  /**
+   * Maximum string length
+   */
+  maxLength?: number;
+  
+  /**
+   * Default value
+   */
+  default?: any;
+  
+  /**
+   * Custom validator function
+   */
+  validator?: (value: any) => boolean | string;
+}
+
+/**
+ * Validation schema type
+ */
+export type ValidationSchema = Record<string, ValidationRule>;
+
+/**
+ * Validates configuration object against schema
+ * 
+ * @param config - Configuration to validate
+ * @param schema - Validation schema
+ * @throws Error if validation fails
+ */
+export const validateConfig = (
+  config: Record<string, any>, 
+  schema: ValidationSchema
+): void => {
+  const errors: string[] = [];
+
+  Object.entries(schema).forEach(([key, rule]) => {
+    // Check required fields
+    if (rule.required && config[key] === undefined) {
+      errors.push(`Missing required field: ${key}`);
+    }
+
+    if (config[key] !== undefined) {
+      // Check type if value exists
+      if (rule.type) {
+        const actualType = typeof config[key];
+        if (actualType !== rule.type) {
+          errors.push(`Invalid type for ${key}: expected ${rule.type}, got ${actualType}`);
+        }
+      }
+
+      // Check numbers
+      if (typeof config[key] === 'number') {
+        if (rule.minimum !== undefined && config[key] < rule.minimum) {
+          errors.push(`Value for ${key} is too small: minimum is ${rule.minimum}`);
+        }
+        if (rule.maximum !== undefined && config[key] > rule.maximum) {
+          errors.push(`Value for ${key} is too large: maximum is ${rule.maximum}`);
+        }
+      }
+
+      // Check strings
+      if (typeof config[key] === 'string') {
+        if (rule.minLength !== undefined && config[key].length < rule.minLength) {
+          errors.push(`String for ${key} is too short: minimum length is ${rule.minLength}`);
+        }
+        if (rule.maxLength !== undefined && config[key].length > rule.maxLength) {
+          errors.push(`String for ${key} is too long: maximum length is ${rule.maxLength}`);
+        }
+        if (rule.pattern) {
+          const pattern = rule.pattern instanceof RegExp 
+            ? rule.pattern 
+            : new RegExp(rule.pattern);
+          
+          if (!pattern.test(config[key])) {
+            errors.push(`Invalid format for ${key}: must match pattern ${pattern}`);
+          }
+        }
+      }
+
+      // Check allowed values
+      if (rule.enum) {
+        if (!rule.enum.includes(config[key])) {
+          errors.push(`Invalid value for ${key}. Must be one of: ${rule.enum.join(', ')}`);
+        }
+      }
+
+      // Custom validator
+      if (rule.validator) {
+        const result = rule.validator(config[key]);
+        if (result === false) {
+          errors.push(`Invalid value for ${key}`);
+        } else if (typeof result === 'string') {
+          errors.push(result);
+        }
+      }
+    }
+  });
+
+  if (errors.length > 0) {
+    throw new Error(`Configuration validation failed:\n${errors.join('\n')}`);
+  }
+};
+
+/**
+ * Validates a single value against a rule
+ * 
+ * @param value - Value to validate
+ * @param rule - Validation rule
+ * @returns Validation result (true if valid, error message if invalid)
+ */
+export const validateValue = (
+  value: any, 
+  rule: ValidationRule
+): true | string => {
+  // Check required
+  if (rule.required && value === undefined) {
+    return 'Value is required';
+  }
+
+  if (value !== undefined) {
+    // Check type
+    if (rule.type && typeof value !== rule.type) {
+      return `Expected ${rule.type}, got ${typeof value}`;
+    }
+
+    // Check numbers
+    if (typeof value === 'number') {
+      if (rule.minimum !== undefined && value < rule.minimum) {
+        return `Value is too small: minimum is ${rule.minimum}`;
+      }
+      if (rule.maximum !== undefined && value > rule.maximum) {
+        return `Value is too large: maximum is ${rule.maximum}`;
+      }
+    }
+
+    // Check strings
+    if (typeof value === 'string') {
+      if (rule.minLength !== undefined && value.length < rule.minLength) {
+        return `String is too short: minimum length is ${rule.minLength}`;
+      }
+      if (rule.maxLength !== undefined && value.length > rule.maxLength) {
+        return `String is too long: maximum length is ${rule.maxLength}`;
+      }
+      if (rule.pattern) {
+        const pattern = rule.pattern instanceof RegExp 
+          ? rule.pattern 
+          : new RegExp(rule.pattern);
+        
+        if (!pattern.test(value)) {
+          return `Invalid format: must match pattern ${pattern}`;
+        }
+      }
+    }
+
+    // Check allowed values
+    if (rule.enum && !rule.enum.includes(value)) {
+      return `Invalid value. Must be one of: ${rule.enum.join(', ')}`;
+    }
+
+    // Custom validator
+    if (rule.validator) {
+      const result = rule.validator(value);
+      if (result === false) {
+        return 'Invalid value';
+      } else if (typeof result === 'string') {
+        return result;
+      }
+    }
+  }
+
+  return true;
+};
+
+/**
+ * Applies default values from schema to config
+ * 
+ * @param config - Configuration object
+ * @param schema - Validation schema with defaults
+ * @returns Configuration with defaults applied
+ */
+export const applyDefaults = <T extends Record<string, any>>(
+  config: T, 
+  schema: ValidationSchema
+): T => {
+  const result = { ...config };
+
+  Object.entries(schema).forEach(([key, rule]) => {
+    if (result[key] === undefined && rule.default !== undefined) {
+      result[key] = rule.default;
+    }
+  });
+
+  return result;
+};

package/src/{index.js → index.ts}

@@ -1,12 +1,13 @@
-// src/index.js
+// src/index.ts
 export { createElement } from './core/dom/create'
 export { default as createLayout } from './core/layout'
 export { default as createButton } from './components/button'
 export { default as createCard } from './components/card'
 export { default as createCheckbox } from './components/checkbox'
-export { default as createContainer } from './components/container'
+export { default as createChip } from './components/chip'
 export { default as createMenu } from './components/menu'
 export { default as createNavigation } from './components/navigation'
+export { default as createProgress } from './components/progress'
 export { default as createSnackbar } from './components/snackbar'
 export { default as createSwitch } from './components/switch'
 export { default as createTextfield } from './components/textfield'

package/index.js

@@ -1,11 +0,0 @@
-// index.js
-import {
-  createLayout,
-  createElement,
-  createButton, createCard, createCheckbox, createTextfield, createSwitch, createContainer, createList, createSnackbar, createNavigation, createMenu
-} from './src/index.js'
-
-export {
-  createLayout,
-  createElement, createCard, createButton, createCheckbox, createTextfield, createSwitch, createContainer, createList, createSnackbar, createNavigation, createMenu
-}

package/src/components/button/api.js

@@ -1,54 +0,0 @@
-// src/components/button/api.js
-
-/**
- * Enhances a button component with API methods
- * @param {Object} options - API configuration options
- * @param {Object} options.disabled - Object containing enable/disable methods
- * @param {Object} options.lifecycle - Object containing lifecycle methods
- * @returns {Function} Higher-order function that adds API methods to component
- * @internal This is an internal utility for the Button component
- */
-export const withAPI = ({ disabled, lifecycle }) => (component) => ({
-  ...component,
-  element: component.element,
-  getValue: () => component.element.value,
-  setValue (value) {
-    component.element.value = value
-    return this
-  },
-  enable () {
-    disabled.enable()
-    return this
-  },
-  disable () {
-    disabled.disable()
-    return this
-  },
-  setText (content) {
-    component.text.setText(content)
-    this.updateCircularStyle()
-    return this
-  },
-  getText () {
-    return component.text.getText()
-  },
-  setIcon (icon) {
-    component.icon.setIcon(icon)
-    this.updateCircularStyle()
-    return this
-  },
-  getIcon () {
-    return component.icon.getIcon()
-  },
-  destroy () {
-    lifecycle.destroy()
-  },
-  updateCircularStyle () {
-    const hasText = component.text.getElement()
-    if (!hasText && component.icon.getElement()) {
-      component.element.classList.add(`${component.getClass('button')}--circular`)
-    } else {
-      component.element.classList.remove(`${component.getClass('button')}--circular`)
-    }
-  }
-})

package/src/components/button/button.js

@@ -1,81 +0,0 @@
-// src/components/button/button.js
-import { PREFIX } from '../../core/config'
-import { pipe } from '../../core/compose'
-import { createBase, withElement } from '../../core/compose/component'
-import {
-  withEvents,
-  withText,
-  withIcon,
-  withVariant,
-  withSize,
-  withRipple,
-  withDisabled,
-  withLifecycle
-} from '../../core/compose/features'
-import { withAPI } from './api'
-import { BUTTON_VARIANTS } from './constants'
-
-/**
- * Creates a new Button component
- * @param {Object} config - Button configuration object
- * @param {string} [config.variant='filled'] - Button variant (filled, tonal, outlined, elevated, text)
- * @param {string} [config.size] - Button size (small, medium, large)
- * @param {boolean} [config.disabled] - Whether the button is initially disabled
- * @param {string} [config.text] - Initial button text content
- * @param {string} [config.icon] - Initial button icon HTML content
- * @param {string} [config.class] - Additional CSS classes
- * @param {string} [config.value] - Button value attribute
- */
-const createButton = (config = {}) => {
-  const baseConfig = {
-    ...config,
-    variant: config.variant || BUTTON_VARIANTS.FILLED,
-    componentName: 'button',
-    prefix: PREFIX
-  }
-
-  try {
-    const button = pipe(
-      createBase,
-      withEvents(),
-      withElement({
-        tag: 'button',
-        componentName: 'button',
-        attrs: {
-          type: config.type || 'button',
-          disabled: config.disabled,
-          value: config.value
-        },
-        className: config.class,
-        forwardEvents: {
-          click: (component) => !component.element.disabled,
-          focus: true,
-          blur: true
-        }
-      }),
-      withVariant(baseConfig),
-      withSize(baseConfig),
-      withText(baseConfig),
-      withIcon(baseConfig),
-      withDisabled(baseConfig),
-      withRipple(baseConfig),
-      withLifecycle(),
-      comp => withAPI({
-        disabled: {
-          enable: () => comp.disabled.enable(),
-          disable: () => comp.disabled.disable()
-        },
-        lifecycle: {
-          destroy: () => comp.lifecycle.destroy()
-        }
-      })(comp)
-    )(baseConfig)
-
-    return button
-  } catch (error) {
-    console.error('Button creation error:', error)
-    throw new Error(`Failed to create button: ${error.message}`)
-  }
-}
-
-export default createButton

package/src/components/button/config.js

@@ -1,10 +0,0 @@
-// src/components/button/config.js
-
-import { PREFIX } from '../../core/config'
-
-const defaultConfig = {
-  componentName: 'button',
-  prefix: PREFIX
-}
-
-export default defaultConfig

package/src/components/button/constants.js

@@ -1,63 +0,0 @@
-// src/components/button/constants.js
-
-import { RIPPLE_SCHEMA } from '../../core/build/constants'
-
-export const BUTTON_VARIANTS = {
-  FILLED: 'filled',
-  TONAL: 'tonal',
-  OUTLINED: 'outlined',
-  ELEVATED: 'elevated',
-  TEXT: 'text'
-}
-
-export const BUTTON_SIZES = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large'
-}
-
-/**
- * Validation schema for button configuration
- */
-export const BUTTON_SCHEMA = {
-  variant: {
-    type: 'string',
-    enum: Object.values(BUTTON_VARIANTS),
-    required: false
-  },
-  size: {
-    type: 'string',
-    enum: Object.values(BUTTON_SIZES),
-    required: false
-  },
-  disabled: {
-    type: 'boolean',
-    required: false
-  },
-  text: {
-    type: 'string',
-    required: false
-  },
-  icon: {
-    type: 'string',
-    required: false
-  },
-  class: {
-    type: 'string',
-    required: false
-  },
-  value: {
-    type: 'string',
-    required: false
-  },
-  ripple: {
-    type: 'boolean',
-    required: false,
-    default: true
-  },
-  rippleConfig: {
-    type: 'object',
-    required: false,
-    properties: RIPPLE_SCHEMA
-  }
-}

package/src/components/button/index.js

@@ -1,2 +0,0 @@
-// src/components/button/index.js
-export { default } from './button.js'

package/src/components/card/card.js

@@ -1,102 +0,0 @@
-// src/components/card/card.js
-import { PREFIX } from '../../core/config'
-import { pipe } from '../../core/compose'
-import { createBase, withElement } from '../../core/compose/component'
-import {
-  withEvents,
-  withVariant,
-  withRipple,
-  withLifecycle
-} from '../../core/compose/features'
-import { withAPI } from './api'
-import { CARD_VARIANTS, CARD_ELEVATIONS } from './constants'
-import defaultConfig from './config'
-
-/**
- * Creates a new Card component following Material Design 3 principles
- * @param {Object} config - Card configuration object
- * @param {string} [config.variant='elevated'] - Card variant (elevated, filled, outlined)
- * @param {boolean} [config.interactive=false] - Whether the card has hover/focus states
- * @param {boolean} [config.fullWidth=false] - Whether the card spans full width of container
- * @param {boolean} [config.clickable=false] - Whether the card is clickable with ripple effect
- * @param {boolean} [config.draggable=false] - Whether the card is draggable
- * @param {string} [config.class] - Additional CSS classes
- * @returns {Object} Card component instance
- */
-const createCard = (config = {}) => {
-  const baseConfig = {
-    ...defaultConfig,
-    ...config,
-    componentName: 'card',
-    prefix: PREFIX
-  }
-
-  try {
-    const card = pipe(
-      createBase,
-      withEvents(),
-      withElement({
-        tag: 'div',
-        componentName: 'card',
-        className: [
-          config.class,
-          config.fullWidth ? `${PREFIX}-card--full-width` : null,
-          config.interactive ? `${PREFIX}-card--interactive` : null
-        ],
-        forwardEvents: {
-          click: (component) => config.clickable,
-          mouseenter: (component) => config.interactive,
-          mouseleave: (component) => config.interactive
-        },
-        interactive: config.interactive || config.clickable
-      }),
-      withVariant(baseConfig),
-      config.clickable ? withRipple(baseConfig) : (c) => c,
-      withLifecycle(),
-      comp => {
-        // Implement hover state elevation changes for interactive cards
-        if (comp.config.interactive) {
-          comp.element.addEventListener('mouseenter', () => {
-            if (comp.config.variant === CARD_VARIANTS.ELEVATED) {
-              comp.element.style.setProperty('--card-elevation', CARD_ELEVATIONS.HOVERED)
-            }
-          })
-
-          comp.element.addEventListener('mouseleave', () => {
-            if (comp.config.variant === CARD_VARIANTS.ELEVATED) {
-              comp.element.style.setProperty('--card-elevation', CARD_ELEVATIONS.RESTING)
-            }
-          })
-        }
-
-        // Set up draggable
-        if (comp.config.draggable) {
-          comp.element.setAttribute('draggable', 'true')
-          comp.element.addEventListener('dragstart', (e) => {
-            comp.element.style.setProperty('--card-elevation', CARD_ELEVATIONS.DRAGGED)
-            comp.emit('dragstart', { event: e })
-          })
-
-          comp.element.addEventListener('dragend', (e) => {
-            comp.element.style.setProperty('--card-elevation', CARD_ELEVATIONS.RESTING)
-            comp.emit('dragend', { event: e })
-          })
-        }
-
-        return comp
-      },
-      comp => withAPI({
-        lifecycle: {
-          destroy: () => comp.lifecycle.destroy()
-        }
-      })(comp)
-    )(baseConfig)
-
-    return card
-  } catch (error) {
-    console.error('Card creation error:', error)
-    throw new Error(`Failed to create card: ${error.message}`)
-  }
-}
-
-export default createCard

package/src/components/card/config.js

@@ -1,16 +0,0 @@
-// src/components/card/config.js
-
-import { PREFIX } from '../../core/config'
-import { CARD_VARIANTS } from './constants'
-
-const defaultConfig = {
-  componentName: 'card',
-  prefix: PREFIX,
-  variant: CARD_VARIANTS.ELEVATED,
-  interactive: false,
-  fullWidth: false,
-  clickable: false,
-  draggable: false
-}
-
-export default defaultConfig

package/src/components/card/index.js

@@ -1,7 +0,0 @@
-// src/components/card/index.js
-export { default } from './card.js'
-export { createCardContent } from './content.js'
-export { createCardHeader } from './header.js'
-export { createCardActions } from './actions.js'
-export { createCardMedia } from './media.js'
-export { CARD_VARIANTS, CARD_ELEVATIONS } from './constants.js'

package/src/components/card/media.js

@@ -1,56 +0,0 @@
-// src/components/card/media.js
-import { PREFIX } from '../../core/config'
-import { pipe } from '../../core/compose'
-import { createBase, withElement } from '../../core/compose/component'
-
-/**
- * Creates a card media component
- * @param {Object} config - Media configuration
- * @param {string} [config.src] - Image source URL
- * @param {string} [config.alt] - Image alt text
- * @param {HTMLElement} [config.element] - Custom media element
- * @param {string} [config.aspectRatio='16:9'] - Media aspect ratio
- * @param {boolean} [config.contain=false] - Whether to use object-fit: contain
- * @returns {HTMLElement} Card media element
- */
-export const createCardMedia = (config = {}) => {
-  const baseConfig = {
-    ...config,
-    componentName: 'card-media',
-    prefix: PREFIX
-  }
-
-  try {
-    const media = pipe(
-      createBase,
-      withElement({
-        tag: 'div',
-        componentName: 'card-media',
-        className: [
-          config.class,
-          config.aspectRatio ? `${PREFIX}-card-media--${config.aspectRatio.replace(':', '-')}` : null,
-          config.contain ? `${PREFIX}-card-media--contain` : null
-        ]
-      })
-    )(baseConfig)
-
-    // If custom element is provided, use it
-    if (config.element instanceof HTMLElement) {
-      media.element.appendChild(config.element)
-    }
-
-    // Otherwise create an image if src is provided
-    else if (config.src) {
-      const img = document.createElement('img')
-      img.src = config.src
-      if (config.alt) img.alt = config.alt
-      img.className = `${PREFIX}-card-media-img`
-      media.element.appendChild(img)
-    }
-
-    return media.element
-  } catch (error) {
-    console.error('Card media creation error:', error)
-    throw new Error(`Failed to create card media: ${error.message}`)
-  }
-}