mtrl 0.0.0 → 0.0.2

package/src/styles/abstract/_mixins.scss

@@ -1,9 +1,31 @@
 // src/styles/abstract/_mixins.scss
 @use 'sass:map';
 @use 'sass:list';
+@use 'sass:math';
 @use 'variables' as v;
 @use 'functions' as f;
 
+// Common icons map
+$icons: (
+  'chevron_right': 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="9 18 15 12 9 6"%3E%3C/polyline%3E%3C/svg%3E',
+  'chevron_down': 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E',
+  'check': 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="20 6 9 17 4 12"%3E%3C/polyline%3E%3C/svg%3E'
+);
+
+@mixin icon($name, $size: 24px) {
+  $icon-url: map.get($icons, $name);
+  @if $icon-url {
+    content: '';
+    display: inline-block;
+    width: $size;
+    height: $size;
+    background-image: url($icon-url);
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+}
+
 // Typography
 @mixin typography($scale) {
   $styles: f.get-typography($scale);
@@ -253,6 +275,59 @@
   }
 }
 
+
+// Scrollbar mixin for consistent styling across components
+@mixin scrollbar(
+  $width: 8px,
+  $track-color: rgba(0, 0, 0, 0.05),
+  $thumb-color: rgba(0, 0, 0, 0.2)
+) {
+  &::-webkit-scrollbar {
+    width: $width;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: $track-color;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: $thumb-color;
+    border-radius: math.div($width, 2);
+  }
+  
+  // Firefox scrollbar (future compatibility)
+  scrollbar-width: thin;
+  scrollbar-color: $thumb-color $track-color;
+}
+
+
+// Flexbox layout mixins
+@mixin flex-row($align: center, $justify: flex-start, $gap: 0) {
+  display: flex;
+  flex-direction: row;
+  align-items: $align;
+  justify-content: $justify;
+  @if $gap > 0 {
+    gap: $gap;
+  }
+}
+
+@mixin flex-column($align: flex-start, $justify: flex-start, $gap: 0) {
+  display: flex;
+  flex-direction: column;
+  align-items: $align;
+  justify-content: $justify;
+  @if $gap > 0 {
+    gap: $gap;
+  }
+}
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 // Print
 @mixin print {
   @media print {

package/src/styles/abstract/_variables.scss

@@ -151,6 +151,7 @@ $z-index: (
   'dialog': 700,
   'dropdown': 600,
   'tooltip': 500,
+  'menu': 700,
   'sticky': 100,
   'fixed': 50,
   'default': 1,

package/test/components/button.test.js

@@ -0,0 +1,158 @@
+// test/components/button.test.js
+import { describe, test, expect, mock } from 'bun:test'
+import createButton from '../../src/components/button/button'
+
+describe('Button Component', () => {
+  test('should create a button element', () => {
+    const button = createButton()
+    expect(button.element).toBeDefined()
+    expect(button.element.tagName).toBe('BUTTON')
+    expect(button.element.className).toContain('mtrl-button')
+  })
+
+  test('should add text content', () => {
+    const buttonText = 'Click Me'
+    const button = createButton({
+      text: buttonText
+    })
+
+    const textElement = button.element.querySelector('.mtrl-button-text')
+    expect(textElement).toBeDefined()
+    expect(textElement.textContent).toBe(buttonText)
+  })
+
+  test('should apply variant class', () => {
+    const variant = 'filled'
+    const button = createButton({
+      variant
+    })
+
+    expect(button.element.className).toContain(`mtrl-button--${variant}`)
+  })
+
+  test('should handle click events', () => {
+    const button = createButton()
+    const handleClick = mock(() => {})
+
+    button.on('click', handleClick)
+
+    // Simulate click event
+    const event = new Event('click')
+    button.element.dispatchEvent(event)
+
+    expect(handleClick).toHaveBeenCalled()
+  })
+
+  test('should support disabled state', () => {
+    const button = createButton()
+
+    // Initially not disabled
+    expect(button.element.hasAttribute('disabled')).toBe(false)
+
+    // Disable the button
+    button.disable()
+    expect(button.element.hasAttribute('disabled')).toBe(true)
+
+    // Check that the disabled property is also set
+    expect(button.element.disabled).toBe(true)
+
+    // Enable the button
+    button.enable()
+    expect(button.element.hasAttribute('disabled')).toBe(false)
+    expect(button.element.disabled).toBe(false)
+  })
+
+  test('should add icon content', () => {
+    const iconSvg = '<svg><path d="M10 10"></path></svg>'
+    const button = createButton({
+      icon: iconSvg
+    })
+
+    const iconElement = button.element.querySelector('.mtrl-button-icon')
+    expect(iconElement).toBeDefined()
+    expect(iconElement.innerHTML).toBe(iconSvg)
+  })
+
+  test('should position icon correctly', () => {
+    const iconSvg = '<svg><path d="M10 10"></path></svg>'
+
+    // Test end position
+    const endButton = createButton({
+      text: 'End Icon',
+      icon: iconSvg,
+      iconPosition: 'end'
+    })
+
+    const textElement = endButton.element.querySelector('.mtrl-button-text')
+    const iconElement = endButton.element.querySelector('.mtrl-button-icon')
+
+    // In the DOM, for end position, the text should come before the icon
+    const children = Array.from(endButton.element.childNodes)
+    const textIndex = children.indexOf(textElement)
+    const iconIndex = children.indexOf(iconElement)
+
+    expect(textIndex).toBeLessThan(iconIndex)
+
+    // Test start position
+    const startButton = createButton({
+      text: 'Start Icon',
+      icon: iconSvg,
+      iconPosition: 'start'
+    })
+
+    const startTextElement = startButton.element.querySelector('.mtrl-button-text')
+    const startIconElement = startButton.element.querySelector('.mtrl-button-icon')
+
+    const startChildren = Array.from(startButton.element.childNodes)
+    const startTextIndex = startChildren.indexOf(startTextElement)
+    const startIconIndex = startChildren.indexOf(startIconElement)
+
+    expect(startIconIndex).toBeLessThan(startTextIndex)
+  })
+
+  test('should support different sizes', () => {
+    const sizes = ['small', 'medium', 'large']
+
+    sizes.forEach(size => {
+      const button = createButton({
+        size
+      })
+
+      expect(button.element.className).toContain(`mtrl-button--${size}`)
+    })
+  })
+
+  test('should allow updating text', () => {
+    const button = createButton({
+      text: 'Initial'
+    })
+
+    const newText = 'Updated Text'
+    button.setText(newText)
+
+    const textElement = button.element.querySelector('.mtrl-button-text')
+    expect(textElement.textContent).toBe(newText)
+  })
+
+  test('should allow updating icon', () => {
+    const button = createButton()
+
+    const iconSvg = '<svg><path d="M10 10"></path></svg>'
+    button.setIcon(iconSvg)
+
+    const iconElement = button.element.querySelector('.mtrl-button-icon')
+    expect(iconElement).toBeDefined()
+    expect(iconElement.innerHTML).toBe(iconSvg)
+  })
+
+  test('should properly clean up resources', () => {
+    const button = createButton()
+    const parentElement = document.createElement('div')
+    parentElement.appendChild(button.element)
+
+    // Destroy should remove the element and clean up resources
+    button.destroy()
+
+    expect(parentElement.children.length).toBe(0)
+  })
+})

package/test/core/emitter.test.js

@@ -0,0 +1,141 @@
+// test/core/state/emitter.test.js
+import { describe, test, expect, mock } from 'bun:test'
+import { createEmitter } from '../../src/core/state/emitter'
+
+describe('Event Emitter', () => {
+  test('should create an emitter with expected methods', () => {
+    const emitter = createEmitter()
+    expect(emitter).toBeDefined()
+    expect(emitter.on).toBeInstanceOf(Function)
+    expect(emitter.off).toBeInstanceOf(Function)
+    expect(emitter.emit).toBeInstanceOf(Function)
+    expect(emitter.clear).toBeInstanceOf(Function)
+  })
+
+  test('should register event handlers with on()', () => {
+    const emitter = createEmitter()
+    const handler = mock(() => {})
+
+    const unsubscribe = emitter.on('test', handler)
+
+    expect(unsubscribe).toBeInstanceOf(Function)
+  })
+
+  test('should invoke handlers when event is emitted', () => {
+    const emitter = createEmitter()
+    const handler1 = mock(() => {})
+    const handler2 = mock(() => {})
+    const eventData = { foo: 'bar' }
+
+    emitter.on('test', handler1)
+    emitter.on('test', handler2)
+
+    emitter.emit('test', eventData)
+
+    expect(handler1).toHaveBeenCalledTimes(1)
+    expect(handler1).toHaveBeenCalledWith(eventData)
+
+    expect(handler2).toHaveBeenCalledTimes(1)
+    expect(handler2).toHaveBeenCalledWith(eventData)
+  })
+
+  test('should remove handlers with off()', () => {
+    const emitter = createEmitter()
+    const handler = mock(() => {})
+
+    emitter.on('test', handler)
+    emitter.off('test', handler)
+
+    emitter.emit('test')
+
+    expect(handler).not.toHaveBeenCalled()
+  })
+
+  test('should remove specific handlers while keeping others', () => {
+    const emitter = createEmitter()
+    const handler1 = mock(() => {})
+    const handler2 = mock(() => {})
+
+    emitter.on('test', handler1)
+    emitter.on('test', handler2)
+
+    emitter.off('test', handler1)
+
+    emitter.emit('test')
+
+    expect(handler1).not.toHaveBeenCalled()
+    expect(handler2).toHaveBeenCalledTimes(1)
+  })
+
+  test('should unsubscribe handlers using the returned function', () => {
+    const emitter = createEmitter()
+    const handler = mock(() => {})
+
+    const unsubscribe = emitter.on('test', handler)
+    unsubscribe()
+
+    emitter.emit('test')
+
+    expect(handler).not.toHaveBeenCalled()
+  })
+
+  test('should support multiple event types', () => {
+    const emitter = createEmitter()
+    const handler1 = mock(() => {})
+    const handler2 = mock(() => {})
+
+    emitter.on('event1', handler1)
+    emitter.on('event2', handler2)
+
+    emitter.emit('event1')
+
+    expect(handler1).toHaveBeenCalledTimes(1)
+    expect(handler2).not.toHaveBeenCalled()
+
+    emitter.emit('event2')
+
+    expect(handler1).toHaveBeenCalledTimes(1)
+    expect(handler2).toHaveBeenCalledTimes(1)
+  })
+
+  test('should clear all event handlers', () => {
+    const emitter = createEmitter()
+    const handler1 = mock(() => {})
+    const handler2 = mock(() => {})
+
+    emitter.on('event1', handler1)
+    emitter.on('event2', handler2)
+
+    emitter.clear()
+
+    emitter.emit('event1')
+    emitter.emit('event2')
+
+    expect(handler1).not.toHaveBeenCalled()
+    expect(handler2).not.toHaveBeenCalled()
+  })
+
+  test('should pass multiple arguments to handlers', () => {
+    const emitter = createEmitter()
+    const handler = mock(() => {})
+
+    emitter.on('test', handler)
+
+    const arg1 = { id: 1 }
+    const arg2 = 'string'
+    const arg3 = [1, 2, 3]
+
+    emitter.emit('test', arg1, arg2, arg3)
+
+    expect(handler).toHaveBeenCalledWith(arg1, arg2, arg3)
+  })
+
+  test('should do nothing when emitting event with no handlers', () => {
+    const emitter = createEmitter()
+
+    // This should not throw
+    expect(() => {
+      emitter.emit('nonexistent')
+    }).not.toThrow()
+  })
+})

package/test/core/ripple.test.js

@@ -0,0 +1,165 @@
+// test/core/build/ripple.test.js
+import { describe, test, expect, mock, spyOn } from 'bun:test'
+import { createRipple } from '../../src/core/build/ripple'
+import '../setup'
+
+describe('Ripple Effect', () => {
+  test('should create a ripple controller', () => {
+    const ripple = createRipple()
+    expect(ripple).toBeDefined()
+    expect(ripple.mount).toBeInstanceOf(Function)
+    expect(ripple.unmount).toBeInstanceOf(Function)
+  })
+
+  test('should mount ripple effect to an element', () => {
+    const ripple = createRipple()
+    const element = document.createElement('div')
+
+    // Element should start with static position
+    element.style.position = 'static'
+
+    ripple.mount(element)
+
+    // Position should now be relative for proper ripple positioning
+    expect(element.style.position).toBe('relative')
+    expect(element.style.overflow).toBe('hidden')
+
+    // Should have added mousedown event listener
+    expect(element.__handlers).toBeDefined()
+    expect(element.__handlers.mousedown).toBeDefined()
+  })
+
+  test('should not fail when mounting to a null element', () => {
+    const ripple = createRipple()
+    expect(() => ripple.mount(null)).not.toThrow()
+  })
+
+  test('should create ripple element on mousedown', () => {
+    const ripple = createRipple()
+    const element = document.createElement('div')
+
+    // Spy on appendChild to verify ripple element creation
+    const appendChildSpy = spyOn(element, 'appendChild')
+
+    ripple.mount(element)
+
+    // Simulate mousedown event
+    const mouseEvent = {
+      type: 'mousedown',
+      offsetX: 10,
+      offsetY: 20,
+      target: element
+    }
+    element.__handlers.mousedown[0](mouseEvent)
+
+    // Should have created and appended a ripple element
+    expect(appendChildSpy).toHaveBeenCalled()
+    expect(appendChildSpy.mock.calls[0][0].className).toBe('ripple')
+  })
+
+  test('should add document cleanup event listeners', () => {
+    const ripple = createRipple()
+    const element = document.createElement('div')
+
+    // Mock document event listeners
+    const docAddEventListener = mock(() => {})
+    const originalDocAddEventListener = document.addEventListener
+    document.addEventListener = docAddEventListener
+
+    ripple.mount(element)
+
+    // Simulate mousedown event
+    const mouseEvent = {
+      type: 'mousedown',
+      offsetX: 10,
+      offsetY: 20,
+      target: element
+    }
+    element.__handlers.mousedown[0](mouseEvent)
+
+    // Should have added mouseup and mouseleave event listeners to document
+    expect(docAddEventListener).toHaveBeenCalledTimes(2)
+    expect(docAddEventListener.mock.calls[0][0]).toBe('mouseup')
+    expect(docAddEventListener.mock.calls[1][0]).toBe('mouseleave')
+
+    // Restore original
+    document.addEventListener = originalDocAddEventListener
+  })
+
+  test('should remove ripple elements on unmount', () => {
+    const ripple = createRipple()
+    const element = document.createElement('div')
+
+    // Add a few ripple elements
+    const ripple1 = document.createElement('div')
+    ripple1.className = 'ripple'
+    const ripple2 = document.createElement('div')
+    ripple2.className = 'ripple'
+
+    element.appendChild(ripple1)
+    element.appendChild(ripple2)
+
+    // Mock the querySelectorAll and forEach methods
+    element.querySelectorAll = (selector) => {
+      if (selector === '.ripple') {
+        return [ripple1, ripple2]
+      }
+      return []
+    }
+
+    const removeSpy1 = spyOn(ripple1, 'remove')
+    const removeSpy2 = spyOn(ripple2, 'remove')
+
+    ripple.unmount(element)
+
+    // Should have removed both ripple elements
+    expect(removeSpy1).toHaveBeenCalled()
+    expect(removeSpy2).toHaveBeenCalled()
+  })
+
+  // test('should handle custom config options', () => {
+  //   const customConfig = {
+  //     duration: 500,
+  //     timing: 'ease-out',
+  //     opacity: ['0.8', '0.2']
+  //   }
+
+  //   const ripple = createRipple(customConfig)
+  //   const element = document.createElement('div')
+
+  //   // Spy on appendChild to capture the ripple element
+  //   let capturedRipple
+  //   const originalAppendChild = element.appendChild
+  //   element.appendChild = (child) => {
+  //     capturedRipple = child
+  //     return originalAppendChild.call(element, child)
+  //   }
+
+  //   ripple.mount(element)
+
+  //   // Simulate mousedown event
+  //   const mouseEvent = {
+  //     type: 'mousedown',
+  //     offsetX: 10,
+  //     offsetY: 20,
+  //     target: element
+  //   }
+  //   element.__handlers.mousedown[0](mouseEvent)
+
+  //   // Verify custom config was applied
+  //   expect(capturedRipple.style.transition).toContain(`${customConfig.duration}ms`)
+  //   expect(capturedRipple.style.transition).toContain(customConfig.timing)
+  //   expect(capturedRipple.style.opacity).toBe(customConfig.opacity[0])
+
+  //   // Force reflow simulation
+  //   capturedRipple.offsetHeight
+
+  //   // Check end opacity is applied after animation
+  //   expect(capturedRipple.style.opacity).toBe(customConfig.opacity[1])
+  // })
+
+  test('should not fail when unmounting a null element', () => {
+    const ripple = createRipple()
+    expect(() => ripple.unmount(null)).not.toThrow()
+  })
+})