mtrl 0.1.2 → 0.2.0

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,11 +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, createCheckbox, createTextfield, createSwitch, createContainer, createList, createSnackbar, createNavigation, createMenu
-} from './src/index.js'
-
-export {
-  createLayout,
-  createElement, 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/checkbox/api.js

@@ -1,45 +0,0 @@
-// src/components/checkbox/api.js
-
-/**
- * Enhances checkbox component with API methods
- * @param {Object} options - API configuration
- * @param {Object} options.disabled - Disabled state handlers
- * @param {Object} options.lifecycle - Lifecycle handlers
- * @param {Object} options.checkable - Checked state handlers
- */
-export const withAPI = ({ disabled, lifecycle, checkable }) => (component) => ({
-  ...component,
-  element: component.element,
-
-  // Value management
-  getValue: component.getValue,
-  setValue (value) {
-    component.setValue(value)
-    return this
-  },
-
-  // State management
-  check: checkable.check,
-  uncheck: checkable.uncheck,
-  toggle: checkable.toggle,
-  isChecked: checkable.isChecked,
-  setIndeterminate: component.setIndeterminate,
-
-  // Label management
-  setLabel (text) {
-    component.text?.setText(text)
-    return this
-  },
-  getLabel () {
-    return component.text?.getText() || ''
-  },
-
-  // Event handling
-  on: component.on,
-  off: component.off,
-
-  // State management
-  enable: disabled.enable,
-  disable: disabled.disable,
-  destroy: lifecycle.destroy
-})

package/src/components/checkbox/checkbox.js

@@ -1,96 +0,0 @@
-// src/components/checkbox/checkbox.js
-
-import { PREFIX } from '../../core/config'
-import { pipe } from '../../core/compose'
-import { createBase, withElement } from '../../core/compose/component'
-import {
-  withEvents,
-  withTextLabel,
-  withDisabled,
-  withLifecycle,
-  withInput,
-  withCheckable
-} from '../../core/compose/features'
-import { withAPI } from './api'
-import { CHECKBOX_VARIANTS } from './constants'
-
-/**
- * Adds check icon to checkbox
- * @param {Object} config - Component configuration
- */
-const withCheckIcon = (config) => (component) => {
-  const icon = document.createElement('span')
-  icon.className = `${config.prefix}-checkbox-icon`
-  icon.innerHTML = `
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
-      <path d="M9.55 14.6L6.35 11.4l-1.9 1.9L9.55 18.4l10.9-10.9-1.9-1.9z"/>
-    </svg>
-  `
-
-  component.element.appendChild(icon)
-  return component
-}
-
-/**
- * Creates a new Checkbox component
- * @param {Object} config - Checkbox configuration
- * @param {string} [config.name] - Input name attribute
- * @param {boolean} [config.checked] - Initial checked state
- * @param {boolean} [config.indeterminate] - Initial indeterminate state
- * @param {boolean} [config.required] - Whether input is required
- * @param {boolean} [config.disabled] - Whether checkbox is disabled
- * @param {string} [config.value] - Input value attribute
- * @param {string} [config.label] - Label text
- * @param {string} [config.labelPosition='end'] - Label position (start/end)
- * @param {string} [config.variant='filled'] - Visual variant
- * @param {string} [config.class] - Additional CSS classes
- */
-const createCheckbox = (config = {}) => {
-  const baseConfig = {
-    ...config,
-    componentName: 'checkbox',
-    prefix: PREFIX,
-    variant: config.variant || CHECKBOX_VARIANTS.FILLED
-  }
-
-  const enhancedWithCheckable = (component) => {
-    const enhanced = withCheckable(baseConfig)(component)
-
-    // Add indeterminate state handling
-    if (config.indeterminate) {
-      enhanced.input.indeterminate = true
-    }
-
-    enhanced.setIndeterminate = (state) => {
-      enhanced.input.indeterminate = state
-      enhanced.element.classList.toggle(`${PREFIX}-checkbox--indeterminate`, state)
-      return enhanced
-    }
-
-    return enhanced
-  }
-
-  return pipe(
-    createBase,
-    withEvents(),
-    withElement({
-      tag: 'div',
-      componentName: 'checkbox',
-      className: config.class,
-      interactive: true
-    }),
-    withInput(baseConfig),
-    withCheckIcon(baseConfig),
-    withTextLabel(baseConfig),
-    enhancedWithCheckable,
-    withDisabled(baseConfig), // Pass the baseConfig to withDisabled
-    withLifecycle(),
-    comp => withAPI({
-      disabled: comp.disabled,
-      lifecycle: comp.lifecycle,
-      checkable: comp.checkable
-    })(comp)
-  )(baseConfig)
-}
-
-export default createCheckbox

package/src/components/checkbox/index.js

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

package/src/components/container/api.js

@@ -1,42 +0,0 @@
-// src/components/container/api.js
-
-/**
- * Enhances container component with API methods
- * @param {Object} options - API configuration
- * @param {Object} options.lifecycle - Lifecycle handlers
- */
-export const withAPI = ({ lifecycle }) => (component) => ({
-  ...component,
-  element: component.element,
-
-  // Attribute management
-  get (prop) {
-    return component.element.getAttribute(prop)
-  },
-  set (prop, value) {
-    value === null
-      ? component.element.removeAttribute(prop)
-      : component.element.setAttribute(prop, value)
-    return this
-  },
-
-  // Content management
-  setContent (content) {
-    if (content instanceof Node) {
-      component.element.appendChild(content)
-    } else {
-      component.element.innerHTML = content
-    }
-    return this
-  },
-  getContent () {
-    return component.element.innerHTML
-  },
-
-  // Event handling
-  on: component.on,
-  off: component.off,
-
-  // Lifecycle
-  destroy: lifecycle.destroy
-})