mtrl 0.1.2 → 0.2.0

package/src/components/switch/config.ts

@@ -0,0 +1,74 @@
+// src/components/switch/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig,
+  BaseComponentConfig 
+} from '../../core/config/component-config';
+import { SwitchConfig, BaseComponent, ApiOptions } from './types';
+import { SWITCH_LABEL_POSITION } from './constants';
+
+/**
+ * Default configuration for the Switch component
+ */
+export const defaultConfig: SwitchConfig = {
+  labelPosition: SWITCH_LABEL_POSITION.END
+};
+
+/**
+ * Creates the base configuration for Switch component
+ * @param {SwitchConfig} config - User provided configuration
+ * @returns {SwitchConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: SwitchConfig = {}): SwitchConfig => 
+  createComponentConfig(defaultConfig, config, 'switch') as SwitchConfig;
+
+/**
+ * Generates element configuration for the Switch component
+ * @param {SwitchConfig} config - Switch configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: SwitchConfig) => 
+  createElementConfig(config, {
+    tag: 'div',
+    componentName: 'switch',
+    className: config.class,
+    interactive: true
+  });
+
+/**
+ * Applies label position class to the component
+ * @param {SwitchConfig} config - Component configuration
+ */
+export const withLabelPosition = (config: SwitchConfig) => (component: BaseComponent): BaseComponent => {
+  if (!config.label) return component;
+
+  const position = config.labelPosition || SWITCH_LABEL_POSITION.END;
+  const positionClass = `${config.prefix}-switch--label-${position}`;
+
+  component.element.classList.add(positionClass);
+
+  return component;
+};
+
+/**
+ * Creates API configuration for the Switch component
+ * @param {BaseComponent} comp - Component with disabled, lifecycle, and checkable features
+ * @returns {ApiOptions} API configuration object
+ */
+export const getApiConfig = (comp: BaseComponent): ApiOptions => ({
+  disabled: {
+    enable: comp.disabled?.enable,
+    disable: comp.disabled?.disable
+  },
+  lifecycle: {
+    destroy: comp.lifecycle?.destroy
+  },
+  checkable: {
+    check: comp.checkable?.check,
+    uncheck: comp.checkable?.uncheck,
+    toggle: comp.checkable?.toggle,
+    isChecked: comp.checkable?.isChecked
+  }
+});
+
+export default defaultConfig;

package/src/components/switch/index.ts

@@ -0,0 +1,4 @@
+// src/components/switch/index.ts
+export { default } from './switch'
+export { SWITCH_LABEL_POSITION } from './constants'
+export { SwitchConfig, SwitchComponent } from './types'

package/src/components/switch/switch.ts

@@ -0,0 +1,52 @@
+// src/components/switch/switch.ts
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import {
+  withEvents,
+  withTextLabel,
+  withDisabled,
+  withLifecycle,
+  withInput,
+  withTrack,
+  withCheckable
+} from '../../core/compose/features';
+import { withAPI } from './api';
+import { SwitchConfig, SwitchComponent, BaseComponent } from './types';
+import { 
+  createBaseConfig, 
+  getElementConfig, 
+  withLabelPosition,
+  getApiConfig
+} from './config';
+
+/**
+ * Creates a new Switch component
+ * @param {SwitchConfig} config - Switch configuration
+ * @returns {SwitchComponent} Switch component instance
+ */
+const createSwitch = (config: SwitchConfig = {}): SwitchComponent => {
+  const baseConfig = createBaseConfig(config);
+
+  try {
+    const switchComponent = pipe(
+      createBase,
+      withEvents(), // Move events first to ensure system is available
+      withElement(getElementConfig(baseConfig)),
+      withInput(baseConfig),
+      withTrack(baseConfig),
+      withTextLabel(baseConfig),
+      withLabelPosition(baseConfig),
+      withCheckable(baseConfig),
+      withDisabled(baseConfig),
+      withLifecycle(),
+      comp => withAPI(getApiConfig(comp))(comp)
+    )(baseConfig);
+
+    return switchComponent as SwitchComponent;
+  } catch (error) {
+    console.error('Switch creation error:', error instanceof Error ? error.message : String(error));
+    throw new Error(`Failed to create switch: ${error instanceof Error ? error.message : String(error)}`);
+  }
+};
+
+export default createSwitch;

package/src/components/switch/types.ts

@@ -0,0 +1,142 @@
+// src/components/switch/types.ts
+import { SWITCH_LABEL_POSITION } from './constants';
+
+/**
+ * Configuration interface for the Switch component
+ */
+export interface SwitchConfig {
+  /** Input name attribute */
+  name?: string;
+  
+  /** Initial checked state */
+  checked?: boolean;
+  
+  /** Whether input is required */
+  required?: boolean;
+  
+  /** Whether switch is disabled */
+  disabled?: boolean;
+  
+  /** Input value attribute */
+  value?: string;
+  
+  /** Label text */
+  label?: string;
+  
+  /** Label position (start/end) */
+  labelPosition?: keyof typeof SWITCH_LABEL_POSITION | string;
+  
+  /** Additional CSS classes */
+  class?: string;
+  
+  /** ARIA label for accessibility */
+  ariaLabel?: string;
+  
+  /** Prefix for class names */
+  prefix?: string;
+  
+  /** Component name */
+  componentName?: string;
+  
+  /** Icon HTML content */
+  icon?: string;
+}
+
+/**
+ * Switch component interface
+ */
+export interface SwitchComponent {
+  /** The root element of the switch */
+  element: HTMLElement;
+  
+  /** The input element */
+  input: HTMLInputElement;
+  
+  /** Gets the switch's value */
+  getValue: () => string;
+  
+  /** Sets the switch's value */
+  setValue: (value: string) => SwitchComponent;
+  
+  /** Checks/activates the switch */
+  check: () => SwitchComponent;
+  
+  /** Unchecks/deactivates the switch */
+  uncheck: () => SwitchComponent;
+  
+  /** Toggles the switch's checked state */
+  toggle: () => SwitchComponent;
+  
+  /** Returns whether the switch is checked */
+  isChecked: () => boolean;
+  
+  /** Sets the switch's label text */
+  setLabel: (text: string) => SwitchComponent;
+  
+  /** Gets the switch's label text */
+  getLabel: () => string;
+  
+  /** Adds event listener */
+  on: (event: string, handler: Function) => SwitchComponent;
+  
+  /** Removes event listener */
+  off: (event: string, handler: Function) => SwitchComponent;
+  
+  /** Enables the switch */
+  enable: () => SwitchComponent;
+  
+  /** Disables the switch */
+  disable: () => SwitchComponent;
+  
+  /** Destroys the switch component and cleans up resources */
+  destroy: () => void;
+}
+
+/**
+ * API options interface
+ */
+export interface ApiOptions {
+  disabled: {
+    enable: () => any;
+    disable: () => any;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+  checkable: {
+    check: () => any;
+    uncheck: () => any;
+    toggle: () => any;
+    isChecked: () => boolean;
+  };
+}
+
+/**
+ * Base component interface
+ */
+export interface BaseComponent {
+  element: HTMLElement;
+  input?: HTMLInputElement;
+  getValue?: () => string;
+  setValue?: (value: string) => any;
+  text?: {
+    setText: (content: string) => any;
+    getText: () => string;
+  };
+  on?: (event: string, handler: Function) => any;
+  off?: (event: string, handler: Function) => any;
+  disabled?: {
+    enable: () => any;
+    disable: () => any;
+  };
+  lifecycle?: {
+    destroy: () => void;
+  };
+  checkable?: {
+    check: () => any;
+    uncheck: () => any;
+    toggle: () => any;
+    isChecked: () => boolean;
+  };
+  [key: string]: any;
+}

package/src/components/textfield/api.ts

@@ -0,0 +1,72 @@
+// src/components/textfield/api.ts
+import { BaseComponent, TextfieldComponent, ApiOptions } from './types';
+
+/**
+ * Enhances textfield component with API methods
+ * @param {ApiOptions} options - API configuration
+ * @returns {Function} Higher-order function that adds API methods to component
+ */
+export const withAPI = ({ disabled, lifecycle }: ApiOptions) => 
+  (component: BaseComponent): TextfieldComponent => ({
+    ...component as any,
+    element: component.element,
+    input: component.input as HTMLInputElement | HTMLTextAreaElement,
+
+    // Value management
+    getValue: component.getValue || (() => ''),
+    setValue(value: string): TextfieldComponent {
+      component.setValue?.(value);
+      return this;
+    },
+
+    // Attributes API
+    setAttribute(name: string, value: string): TextfieldComponent {
+      component.setAttribute?.(name, value);
+      return this;
+    },
+    
+    getAttribute(name: string): string | null {
+      return component.getAttribute?.(name) || null;
+    },
+    
+    removeAttribute(name: string): TextfieldComponent {
+      component.removeAttribute?.(name);
+      return this;
+    },
+
+    // Label management
+    setLabel(text: string): TextfieldComponent {
+      component.label?.setText(text);
+      return this;
+    },
+    
+    getLabel(): string {
+      return component.label?.getText() || '';
+    },
+
+    // Event handling
+    on(event: string, handler: Function): TextfieldComponent {
+      component.on?.(event, handler);
+      return this;
+    },
+    
+    off(event: string, handler: Function): TextfieldComponent {
+      component.off?.(event, handler);
+      return this;
+    },
+
+    // State management
+    enable(): TextfieldComponent {
+      disabled.enable();
+      return this;
+    },
+    
+    disable(): TextfieldComponent {
+      disabled.disable();
+      return this;
+    },
+    
+    destroy(): void {
+      lifecycle.destroy();
+    }
+  });

package/src/components/textfield/config.ts

@@ -0,0 +1,54 @@
+// src/components/textfield/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig,
+  BaseComponentConfig 
+} from '../../core/config/component-config';
+import { TextfieldConfig, BaseComponent, ApiOptions } from './types';
+import { TEXTFIELD_VARIANTS, TEXTFIELD_TYPES, TEXTFIELD_SIZES } from './constants';
+
+/**
+ * Default configuration for the Textfield component
+ */
+export const defaultConfig: TextfieldConfig = {
+  type: TEXTFIELD_TYPES.TEXT,
+  variant: TEXTFIELD_VARIANTS.FILLED,
+  size: TEXTFIELD_SIZES.MEDIUM
+};
+
+/**
+ * Creates the base configuration for Textfield component
+ * @param {TextfieldConfig} config - User provided configuration
+ * @returns {TextfieldConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: TextfieldConfig = {}): TextfieldConfig => 
+  createComponentConfig(defaultConfig, config, 'textfield') as TextfieldConfig;
+
+/**
+ * Generates element configuration for the Textfield component
+ * @param {TextfieldConfig} config - Textfield configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: TextfieldConfig) => 
+  createElementConfig(config, {
+    tag: 'div',
+    componentName: 'textfield',
+    className: config.class
+  });
+
+/**
+ * Creates API configuration for the Textfield component
+ * @param {BaseComponent} comp - Component with disabled and lifecycle features
+ * @returns {ApiOptions} API configuration object
+ */
+export const getApiConfig = (comp: BaseComponent): ApiOptions => ({
+  disabled: {
+    enable: comp.disabled?.enable,
+    disable: comp.disabled?.disable
+  },
+  lifecycle: {
+    destroy: comp.lifecycle?.destroy
+  }
+});
+
+export default defaultConfig;

package/src/components/textfield/{constants.js → constants.ts}

@@ -1,16 +1,25 @@
-// src/components/textfield/constants.js
+// src/components/textfield/constants.ts
 
+/**
+ * Textfield visual variants
+ */
 export const TEXTFIELD_VARIANTS = {
   FILLED: 'filled',
   OUTLINED: 'outlined'
-}
+} as const;
 
+/**
+ * Textfield size variants
+ */
 export const TEXTFIELD_SIZES = {
   SMALL: 'small',
   MEDIUM: 'medium',
   LARGE: 'large'
-}
+} as const;
 
+/**
+ * Textfield input types
+ */
 export const TEXTFIELD_TYPES = {
   TEXT: 'text',
   PASSWORD: 'password',
@@ -20,8 +29,11 @@ export const TEXTFIELD_TYPES = {
   URL: 'url',
   SEARCH: 'search',
   MULTILINE: 'multiline'
-}
+} as const;
 
+/**
+ * Validation schema for textfield configuration
+ */
 export const TEXTFIELD_SCHEMA = {
   type: {
     type: 'string',
@@ -78,4 +90,25 @@ export const TEXTFIELD_SCHEMA = {
     type: 'string',
     required: false
   }
-}
+} as const;
+
+/**
+ * Textfield state classes
+ */
+export const TEXTFIELD_STATES = {
+  FOCUSED: 'focused',
+  FILLED: 'filled',
+  DISABLED: 'disabled',
+  INVALID: 'invalid'
+} as const;
+
+/**
+ * Textfield element classes
+ */
+export const TEXTFIELD_CLASSES = {
+  ROOT: 'textfield',
+  INPUT: 'textfield-input',
+  LABEL: 'textfield-label',
+  HELPER: 'textfield-helper',
+  COUNTER: 'textfield-counter'
+} as const;

package/src/components/textfield/index.ts

@@ -0,0 +1,4 @@
+// src/components/textfield/index.ts
+export { default } from './textfield'
+export { TEXTFIELD_VARIANTS, TEXTFIELD_SIZES, TEXTFIELD_TYPES } from './constants'
+export { TextfieldConfig, TextfieldComponent } from './types'

package/src/components/textfield/textfield.ts

@@ -0,0 +1,50 @@
+// src/components/textfield/textfield.ts
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import {
+  withEvents,
+  withDisabled,
+  withLifecycle,
+  withVariant,
+  withSize,
+  withTextInput,
+  withTextLabel
+} from '../../core/compose/features';
+import { withAPI } from './api';
+import { TextfieldConfig, TextfieldComponent } from './types';
+import { 
+  createBaseConfig, 
+  getElementConfig,
+  getApiConfig
+} from './config';
+
+/**
+ * Creates a new Textfield component
+ * @param {TextfieldConfig} config - Textfield configuration
+ * @returns {TextfieldComponent} Textfield component instance
+ */
+const createTextfield = (config: TextfieldConfig = {}): TextfieldComponent => {
+  const baseConfig = createBaseConfig(config);
+
+  try {
+    const textfield = pipe(
+      createBase,
+      withEvents(),
+      withElement(getElementConfig(baseConfig)),
+      withVariant(baseConfig),
+      withSize(baseConfig),
+      withTextInput(baseConfig),
+      withTextLabel(baseConfig),
+      withDisabled(baseConfig),
+      withLifecycle(),
+      comp => withAPI(getApiConfig(comp))(comp)
+    )(baseConfig);
+
+    return textfield as TextfieldComponent;
+  } catch (error) {
+    console.error('Textfield creation error:', error instanceof Error ? error.message : String(error));
+    throw new Error(`Failed to create textfield: ${error instanceof Error ? error.message : String(error)}`);
+  }
+};
+
+export default createTextfield;

package/src/components/textfield/types.ts

@@ -0,0 +1,139 @@
+// src/components/textfield/types.ts
+import { TEXTFIELD_VARIANTS, TEXTFIELD_SIZES, TEXTFIELD_TYPES } from './constants';
+
+/**
+ * Configuration interface for the Textfield component
+ */
+export interface TextfieldConfig {
+  /** Input type (text, password, email, etc.) */
+  type?: keyof typeof TEXTFIELD_TYPES | string;
+  
+  /** Visual variant (filled, outlined) */
+  variant?: keyof typeof TEXTFIELD_VARIANTS | string;
+  
+  /** Size variant (small, medium, large) */
+  size?: keyof typeof TEXTFIELD_SIZES | string;
+  
+  /** Input name attribute */
+  name?: string;
+  
+  /** Label text */
+  label?: string;
+  
+  /** Placeholder text */
+  placeholder?: string;
+  
+  /** Initial value */
+  value?: string;
+  
+  /** Whether input is required */
+  required?: boolean;
+  
+  /** Whether textfield is disabled */
+  disabled?: boolean;
+  
+  /** Maximum input length */
+  maxLength?: number;
+  
+  /** Input pattern for validation */
+  pattern?: string;
+  
+  /** Autocomplete attribute */
+  autocomplete?: string;
+  
+  /** Additional CSS classes */
+  class?: string;
+  
+  /** Prefix for class names */
+  prefix?: string;
+  
+  /** Component name */
+  componentName?: string;
+}
+
+/**
+ * Textfield component interface
+ */
+export interface TextfieldComponent {
+  /** The root element of the textfield */
+  element: HTMLElement;
+  
+  /** The input element */
+  input: HTMLInputElement | HTMLTextAreaElement;
+  
+  /** Gets the textfield's value */
+  getValue: () => string;
+  
+  /** Sets the textfield's value */
+  setValue: (value: string) => TextfieldComponent;
+  
+  /** Sets an attribute on the input element */
+  setAttribute: (name: string, value: string) => TextfieldComponent;
+  
+  /** Gets an attribute from the input element */
+  getAttribute: (name: string) => string | null;
+  
+  /** Removes an attribute from the input element */
+  removeAttribute: (name: string) => TextfieldComponent;
+  
+  /** Sets the textfield's label text */
+  setLabel: (text: string) => TextfieldComponent;
+  
+  /** Gets the textfield's label text */
+  getLabel: () => string;
+  
+  /** Adds event listener */
+  on: (event: string, handler: Function) => TextfieldComponent;
+  
+  /** Removes event listener */
+  off: (event: string, handler: Function) => TextfieldComponent;
+  
+  /** Enables the textfield */
+  enable: () => TextfieldComponent;
+  
+  /** Disables the textfield */
+  disable: () => TextfieldComponent;
+  
+  /** Destroys the textfield component and cleans up resources */
+  destroy: () => void;
+}
+
+/**
+ * API options interface
+ */
+export interface ApiOptions {
+  disabled: {
+    enable: () => any;
+    disable: () => any;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+}
+
+/**
+ * Base component interface
+ */
+export interface BaseComponent {
+  element: HTMLElement;
+  input?: HTMLInputElement | HTMLTextAreaElement;
+  getValue?: () => string;
+  setValue?: (value: string) => any;
+  setAttribute?: (name: string, value: string) => any;
+  getAttribute?: (name: string) => string | null;
+  removeAttribute?: (name: string) => any;
+  label?: {
+    setText: (content: string) => any;
+    getText: () => string;
+  };
+  on?: (event: string, handler: Function) => any;
+  off?: (event: string, handler: Function) => any;
+  disabled?: {
+    enable: () => any;
+    disable: () => any;
+  };
+  lifecycle?: {
+    destroy: () => void;
+  };
+  [key: string]: any;
+}

package/src/core/compose/base.ts

@@ -0,0 +1,43 @@
+// src/core/compose/base.ts
+
+/**
+ * Configuration for component creation
+ */
+export interface ComponentConfig {
+  [key: string]: any;
+}
+
+/**
+ * Basic component interface
+ */
+export interface Component {
+  /**
+   * Component element
+   */
+  element: HTMLElement | null;
+  
+  /**
+   * Component configuration
+   */
+  config: ComponentConfig;
+  
+  /**
+   * Setup method
+   * @returns Component for chaining
+   */
+  setup: () => Component;
+}
+
+/**
+ * Creates a basic component with minimal structure
+ * 
+ * @param config - Component configuration
+ * @returns Basic component structure
+ */
+export const createComponent = (config: ComponentConfig = {}): Component => ({
+  element: null,
+  config,
+  setup() {
+    return this;
+  }
+});