mtrl 0.1.2 → 0.2.0

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;
+}

package/src/components/chip/_styles.scss

@@ -0,0 +1,372 @@
+// src/components/chip/_styles.scss
+@use '../../styles/abstract/base' as base;
+@use '../../styles/abstract/variables' as v;
+@use '../../styles/abstract/functions' as f;
+@use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/theme' as t;
+
+$component: '#{base.$prefix}-chip';
+
+.#{$component} {
+  // Base styles
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 0 12px;
+  border: none;
+  border-radius: 8px;
+  background-color: transparent;
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  appearance: none;
+  overflow: hidden;
+  transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, 
+              border-color 0.15s ease, opacity 0.15s ease;
+  
+  // Typography
+  @include m.typography('label-large');
+  
+  // Focus styles
+  &:focus {
+    outline: none;
+  }
+  
+  &:focus-visible {
+    outline: 2px solid t.color('outline');
+    outline-offset: 2px;
+  }
+  
+  // Disabled state
+  &[aria-disabled="true"] {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+  
+  // Leading icon styles
+  &-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    margin-right: 8px;
+    
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+  
+  // Trailing icon styles
+  &-trailing-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    margin-left: 8px;
+    
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+    
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+  
+  // Text content
+  &-text {
+    // Text truncation for long chip labels
+    @include m.truncate;
+    max-width: 150px;
+  }
+  
+  // Ripple container
+  .ripple {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    pointer-events: none;
+    background-color: currentColor;
+    opacity: 0.12;
+  }
+  
+  // === VARIANTS ===
+  
+  // Filled chip (default)
+  &--filled {
+    background-color: t.color('surface-container-highest');
+    color: t.color('on-surface');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-surface'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-surface'), 'pressed');
+    }
+    
+    &.#{$component}--selected {
+      background-color: t.color('secondary-container');
+      color: t.color('on-secondary-container');
+      
+      &:hover {
+        @include m.state-layer(t.color('on-secondary-container'), 'hover');
+      }
+      
+      &:active {
+        @include m.state-layer(t.color('on-secondary-container'), 'pressed');
+      }
+    }
+  }
+  
+  // Outlined chip
+  &--outlined {
+    border: 1px solid t.color('outline');
+    color: t.color('on-surface');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-surface'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-surface'), 'pressed');
+    }
+    
+    &.#{$component}--selected {
+      border-color: t.color('secondary');
+      background-color: t.color('secondary-container');
+      color: t.color('on-secondary-container');
+      
+      &:hover {
+        @include m.state-layer(t.color('on-secondary-container'), 'hover');
+      }
+      
+      &:active {
+        @include m.state-layer(t.color('on-secondary-container'), 'pressed');
+      }
+    }
+  }
+  
+  // Elevated chip
+  &--elevated {
+    background-color: t.color('surface-container-low');
+    color: t.color('on-surface');
+    @include m.elevation(1);
+    
+    &:hover {
+      @include m.state-layer(t.color('on-surface'), 'hover');
+      @include m.elevation(2);
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-surface'), 'pressed');
+      @include m.elevation(1);
+    }
+    
+    &.#{$component}--selected {
+      background-color: t.color('secondary-container');
+      color: t.color('on-secondary-container');
+      
+      &:hover {
+        @include m.state-layer(t.color('on-secondary-container'), 'hover');
+      }
+      
+      &:active {
+        @include m.state-layer(t.color('on-secondary-container'), 'pressed');
+      }
+    }
+    
+    &[aria-disabled="true"] {
+      @include m.elevation(0);
+      box-shadow: none;
+    }
+  }
+  
+  // Assist chip
+  &--assist {
+    background-color: t.color('surface-container');
+    color: t.color('on-surface');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-surface'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-surface'), 'pressed');
+    }
+    
+    .#{$component}-icon {
+      color: t.color('primary');
+    }
+  }
+  
+  // Filter chip
+  &--filter {
+    background-color: t.color('surface-container-highest');
+    color: t.color('on-surface');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-surface'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-surface'), 'pressed');
+    }
+    
+    &.#{$component}--selected {
+      background-color: t.color('secondary-container');
+      color: t.color('on-secondary-container');
+      
+      &:hover {
+        @include m.state-layer(t.color('on-secondary-container'), 'hover');
+      }
+      
+      &:active {
+        @include m.state-layer(t.color('on-secondary-container'), 'pressed');
+      }
+      
+      // Checkmark icon for selected filter chips
+      .#{$component}-icon {
+        color: t.color('on-secondary-container');
+      }
+    }
+  }
+  
+  // Input chip
+  &--input {
+    background-color: t.color('surface-container-highest');
+    color: t.color('on-surface');
+    padding-right: 8px; // Less padding on the right to accommodate the trailing icon
+    
+    &:hover {
+      @include m.state-layer(t.color('on-surface'), 'hover');
+    }
+    
+    .#{$component}-trailing-icon {
+      color: t.color('on-surface-variant');
+      
+      &:hover {
+        color: t.color('on-surface');
+      }
+    }
+  }
+  
+  // Suggestion chip
+  &--suggestion {
+    background-color: t.color('surface-container');
+    color: t.color('on-surface');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-surface'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-surface'), 'pressed');
+    }
+  }
+  
+  // === SIZES ===
+  
+  &--small {
+    height: 24px;
+    padding: 0 8px;
+    font-size: 12px;
+    
+    .#{$component}-icon,
+    .#{$component}-trailing-icon {
+      width: 16px;
+      height: 16px;
+      
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+    }
+    
+    .#{$component}-icon {
+      margin-right: 4px;
+    }
+    
+    .#{$component}-trailing-icon {
+      margin-left: 4px;
+    }
+  }
+  
+  &--large {
+    height: 40px;
+    padding: 0 16px;
+    font-size: 15px;
+    border-radius: 12px;
+    
+    .#{$component}-icon,
+    .#{$component}-trailing-icon {
+      width: 20px;
+      height: 20px;
+      
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+    
+    .#{$component}-icon {
+      margin-right: 10px;
+    }
+    
+    .#{$component}-trailing-icon {
+      margin-left: 10px;
+    }
+  }
+  
+  // === SPECIAL CASES ===
+  
+  // For chips with only icons (no text)
+  &--icon-only {
+    padding: 0;
+    width: 32px;
+    
+    &.#{$component}--small {
+      width: 24px;
+    }
+    
+    &.#{$component}--large {
+      width: 40px;
+    }
+    
+    .#{$component}-icon {
+      margin-right: 0;
+    }
+  }
+}
+
+// === CHIP SET STYLES ===
+
+.#{$component}-set {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  
+  &--scrollable {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none; // Firefox
+    
+    &::-webkit-scrollbar {
+      display: none; // Chrome, Safari, Edge
+    }
+  }
+  
+  &--vertical {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}