mtrl 0.1.3 → 0.2.0

package/src/components/checkbox/api.ts

@@ -0,0 +1,82 @@
+// src/components/checkbox/api.ts
+import { BaseComponent, CheckboxComponent, ApiOptions } from './types';
+
+/**
+ * Enhances checkbox 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, checkable }: ApiOptions) => 
+  (component: BaseComponent): CheckboxComponent => ({
+    ...component as any,
+    element: component.element,
+    input: component.input as HTMLInputElement,
+
+    // Value management
+    getValue: component.getValue || (() => ''),
+    setValue(value: string): CheckboxComponent {
+      component.setValue?.(value);
+      return this;
+    },
+
+    // State management
+    check(): CheckboxComponent {
+      checkable.check();
+      return this;
+    },
+    
+    uncheck(): CheckboxComponent {
+      checkable.uncheck();
+      return this;
+    },
+    
+    toggle(): CheckboxComponent {
+      checkable.toggle();
+      return this;
+    },
+    
+    isChecked(): boolean {
+      return checkable.isChecked();
+    },
+    
+    setIndeterminate(state: boolean): CheckboxComponent {
+      component.setIndeterminate?.(state);
+      return this;
+    },
+
+    // Label management
+    setLabel(text: string): CheckboxComponent {
+      component.text?.setText(text);
+      return this;
+    },
+    
+    getLabel(): string {
+      return component.text?.getText() || '';
+    },
+
+    // Event handling
+    on(event: string, handler: Function): CheckboxComponent {
+      component.on?.(event, handler);
+      return this;
+    },
+    
+    off(event: string, handler: Function): CheckboxComponent {
+      component.off?.(event, handler);
+      return this;
+    },
+
+    // State management
+    enable(): CheckboxComponent {
+      disabled.enable();
+      return this;
+    },
+    
+    disable(): CheckboxComponent {
+      disabled.disable();
+      return this;
+    },
+    
+    destroy(): void {
+      lifecycle.destroy();
+    }
+  });

package/src/components/checkbox/checkbox.ts

@@ -0,0 +1,75 @@
+// src/components/checkbox/checkbox.ts
+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 { CheckboxConfig, CheckboxComponent, BaseComponent } from './types';
+import { 
+  createBaseConfig, 
+  getElementConfig, 
+  withCheckIcon,
+  withLabelPosition,
+  getApiConfig
+} from './config';
+
+/**
+ * Enhances a component with checkable features and indeterminate state
+ * @param {BaseComponent} component - The component to enhance
+ * @param {CheckboxConfig} config - Configuration options
+ * @returns {BaseComponent} The enhanced component
+ */
+const enhanceWithCheckable = (component: BaseComponent, config: CheckboxConfig): BaseComponent => {
+  const enhanced = withCheckable(config)(component);
+
+  // Add indeterminate state handling
+  if (config.indeterminate) {
+    enhanced.input.indeterminate = true;
+  }
+
+  enhanced.setIndeterminate = (state: boolean) => {
+    enhanced.input.indeterminate = state;
+    enhanced.element.classList.toggle(`${config.prefix}-checkbox--indeterminate`, state);
+    return enhanced;
+  };
+
+  return enhanced;
+};
+
+/**
+ * Creates a new Checkbox component
+ * @param {CheckboxConfig} config - Checkbox configuration
+ * @returns {CheckboxComponent} Checkbox component instance
+ */
+const createCheckbox = (config: CheckboxConfig = {}): CheckboxComponent => {
+  const baseConfig = createBaseConfig(config);
+
+  try {
+    const checkbox = pipe(
+      createBase,
+      withEvents(),
+      withElement(getElementConfig(baseConfig)),
+      withInput(baseConfig),
+      withCheckIcon(baseConfig),
+      withTextLabel(baseConfig),
+      withLabelPosition(baseConfig),
+      component => enhanceWithCheckable(component, baseConfig),
+      withDisabled(baseConfig),
+      withLifecycle(),
+      comp => withAPI(getApiConfig(comp))(comp)
+    )(baseConfig);
+
+    return checkbox as CheckboxComponent;
+  } catch (error) {
+    console.error('Checkbox creation error:', error instanceof Error ? error.message : String(error));
+    throw new Error(`Failed to create checkbox: ${error instanceof Error ? error.message : String(error)}`);
+  }
+};
+
+export default createCheckbox;

package/src/components/checkbox/config.ts

@@ -0,0 +1,90 @@
+// src/components/checkbox/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig,
+  BaseComponentConfig 
+} from '../../core/config/component-config';
+import { CheckboxConfig, BaseComponent, ApiOptions } from './types';
+import { CHECKBOX_VARIANTS, CHECKBOX_LABEL_POSITION } from './constants';
+
+/**
+ * Default configuration for the Checkbox component
+ */
+export const defaultConfig: CheckboxConfig = {
+  variant: CHECKBOX_VARIANTS.FILLED,
+  labelPosition: CHECKBOX_LABEL_POSITION.END
+};
+
+/**
+ * Creates the base configuration for Checkbox component
+ * @param {CheckboxConfig} config - User provided configuration
+ * @returns {CheckboxConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: CheckboxConfig = {}): CheckboxConfig => 
+  createComponentConfig(defaultConfig, config, 'checkbox') as CheckboxConfig;
+
+/**
+ * Generates element configuration for the Checkbox component
+ * @param {CheckboxConfig} config - Checkbox configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: CheckboxConfig) => 
+  createElementConfig(config, {
+    tag: 'div',
+    componentName: 'checkbox',
+    className: config.class,
+    interactive: true
+  });
+
+/**
+ * Adds check icon to checkbox
+ * @param {CheckboxConfig} config - Component configuration
+ */
+export const withCheckIcon = (config: CheckboxConfig) => (component: BaseComponent): BaseComponent => {
+  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;
+};
+
+/**
+ * Applies label position class to the component
+ * @param {CheckboxConfig} config - Component configuration
+ */
+export const withLabelPosition = (config: CheckboxConfig) => (component: BaseComponent): BaseComponent => {
+  const position = config.labelPosition || CHECKBOX_LABEL_POSITION.END;
+  const positionClass = `${config.prefix}-checkbox--label-${position}`;
+
+  component.element.classList.add(positionClass);
+
+  return component;
+};
+
+/**
+ * Creates API configuration for the Checkbox 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/checkbox/index.ts

@@ -0,0 +1,4 @@
+// src/components/checkbox/index.ts
+export { default } from './checkbox';
+export { CHECKBOX_VARIANTS, CHECKBOX_LABEL_POSITION } from './constants';
+export { CheckboxConfig, CheckboxComponent } from './types';

package/src/components/checkbox/types.ts

@@ -0,0 +1,146 @@
+// src/components/checkbox/types.ts
+import { CHECKBOX_VARIANTS, CHECKBOX_LABEL_POSITION } from './constants';
+
+/**
+ * Configuration interface for the Checkbox component
+ */
+export interface CheckboxConfig {
+  /** Input name attribute */
+  name?: string;
+  
+  /** Initial checked state */
+  checked?: boolean;
+  
+  /** Initial indeterminate state */
+  indeterminate?: boolean;
+  
+  /** Whether input is required */
+  required?: boolean;
+  
+  /** Whether checkbox is disabled */
+  disabled?: boolean;
+  
+  /** Input value attribute */
+  value?: string;
+  
+  /** Label text */
+  label?: string;
+  
+  /** Label position (start/end) */
+  labelPosition?: keyof typeof CHECKBOX_LABEL_POSITION | string;
+  
+  /** Visual variant */
+  variant?: keyof typeof CHECKBOX_VARIANTS | string;
+  
+  /** Additional CSS classes */
+  class?: string;
+  
+  /** Prefix for class names */
+  prefix?: string;
+  
+  /** Component name */
+  componentName?: string;
+}
+
+/**
+ * Checkbox component interface
+ */
+export interface CheckboxComponent {
+  /** The root element of the checkbox */
+  element: HTMLElement;
+  
+  /** The input element */
+  input: HTMLInputElement;
+  
+  /** Gets the checkbox's value */
+  getValue: () => string;
+  
+  /** Sets the checkbox's value */
+  setValue: (value: string) => CheckboxComponent;
+  
+  /** Checks the checkbox */
+  check: () => CheckboxComponent;
+  
+  /** Unchecks the checkbox */
+  uncheck: () => CheckboxComponent;
+  
+  /** Toggles the checkbox's checked state */
+  toggle: () => CheckboxComponent;
+  
+  /** Returns whether the checkbox is checked */
+  isChecked: () => boolean;
+  
+  /** Sets the checkbox's indeterminate state */
+  setIndeterminate: (state: boolean) => CheckboxComponent;
+  
+  /** Sets the checkbox's label text */
+  setLabel: (text: string) => CheckboxComponent;
+  
+  /** Gets the checkbox's label text */
+  getLabel: () => string;
+  
+  /** Adds event listener */
+  on: (event: string, handler: Function) => CheckboxComponent;
+  
+  /** Removes event listener */
+  off: (event: string, handler: Function) => CheckboxComponent;
+  
+  /** Enables the checkbox */
+  enable: () => CheckboxComponent;
+  
+  /** Disables the checkbox */
+  disable: () => CheckboxComponent;
+  
+  /** Destroys the checkbox 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;
+  setIndeterminate?: (state: boolean) => 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;
+}