@nuraly/runtime 0.1.0

package/components/ui/nuraly-ui/src/components/button/controllers/keyboard.controller.ts

@@ -0,0 +1,89 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { KeyboardController } from '../interfaces/index.js';
+import { BaseButtonController } from './base.controller.js';
+
+/**
+ * Keyboard controller manages keyboard interaction capabilities for button components
+ * Handles Enter and Space key activation following ARIA best practices
+ */
+export class ButtonKeyboardController extends BaseButtonController implements KeyboardController {
+
+  /**
+   * Handle keyboard activation (Enter/Space keys)
+   * @param event - The keyboard event
+   */
+  handleKeyboardActivation(event: KeyboardEvent): void {
+    try {
+      if (this.host.disabled) return;
+      
+      const isActivationKey = this.isActivationKey(event);
+      
+      if (isActivationKey) {
+        event.preventDefault();
+        
+        // Trigger click event for consistency
+        this.host.click();
+        
+        // Dispatch custom keyboard activation event
+        this.dispatchEvent(
+          new CustomEvent('keyboard-activation', {
+            detail: {
+              key: event.key,
+              timestamp: Date.now(),
+              target: this.host
+            },
+            bubbles: true,
+            composed: true,
+          })
+        );
+      }
+    } catch (error) {
+      this.handleError(error as Error, 'handleKeyboardActivation');
+    }
+  }
+
+  /**
+   * Handle keydown events with proper disabled state checking
+   * @param event - The keyboard event
+   */
+  handleKeydown(event: KeyboardEvent): void {
+    try {
+      if (this.host.disabled) {
+        // Allow readonly navigation keys even when disabled
+        const isNavigationKey = this.isReadonlyKeyAllowed(event);
+        
+        if (!isNavigationKey) {
+          event.preventDefault();
+          return;
+        }
+      }
+      
+      this.handleKeyboardActivation(event);
+    } catch (error) {
+      this.handleError(error as Error, 'handleKeydown');
+    }
+  }
+
+  /**
+   * Check if the key is an activation key (Enter or Space)
+   */
+  private isActivationKey(event: KeyboardEvent): boolean {
+    return event.key === 'Enter' || event.key === ' ';
+  }
+
+  /**
+   * Check if the key is allowed when component is disabled
+   */
+  private isReadonlyKeyAllowed(event: KeyboardEvent): boolean {
+    const allowedKeys = [
+      'Tab', 'Shift', 'Escape', 'ArrowUp', 'ArrowDown', 
+      'ArrowLeft', 'ArrowRight', 'Home', 'End'
+    ];
+    return allowedKeys.includes(event.key);
+  }
+}

package/components/ui/nuraly-ui/src/components/button/controllers/link.controller.ts

@@ -0,0 +1,86 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { LinkController } from '../interfaces/index.js';
+import { BaseButtonController } from './base.controller.js';
+import { ButtonType } from '../button.types.js';
+
+/**
+ * Link controller manages link behavior for button components
+ * Handles the distinction between button and anchor elements
+ */
+export class ButtonLinkController extends BaseButtonController implements LinkController {
+
+  /**
+   * Check if the button should render as a link
+   */
+  isLinkType(): boolean {
+    return this.host.type === ButtonType.Link && !!this.host.href;
+  }
+  
+  /**
+   * Get the appropriate element tag based on button type
+   */
+  getElementTag(): string {
+    return this.isLinkType() ? 'a' : 'button';
+  }
+  
+  /**
+   * Get link-specific attributes for anchor elements
+   */
+  getLinkAttributes(): Record<string, any> {
+    try {
+      const attributes: Record<string, any> = {};
+      
+      if (this.isLinkType()) {
+        attributes.href = this.host.href;
+        
+        if (this.host.target) {
+          attributes.target = this.host.target;
+          
+          // Add security attributes for external links
+          if (this.host.target === '_blank') {
+            attributes.rel = 'noopener noreferrer';
+          }
+        }
+        
+        attributes.role = 'link';
+      } else {
+        attributes.role = 'button';
+      }
+      
+      return attributes;
+    } catch (error) {
+      this.handleError(error as Error, 'getLinkAttributes');
+      return { role: 'button' };
+    }
+  }
+  
+  /**
+   * Handle link navigation with proper event dispatching
+   */
+  handleLinkNavigation(event: Event): void {
+    try {
+      if (this.isLinkType()) {
+        // Dispatch custom navigation event
+        this.dispatchEvent(
+          new CustomEvent('link-navigation', {
+            detail: {
+              href: this.host.href,
+              target: this.host.target,
+              timestamp: Date.now(),
+              originalEvent: event
+            },
+            bubbles: true,
+            composed: true,
+          })
+        );
+      }
+    } catch (error) {
+      this.handleError(error as Error, 'handleLinkNavigation');
+    }
+  }
+}

package/components/ui/nuraly-ui/src/components/button/controllers/ripple.controller.ts

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { RippleController } from '../interfaces/index.js';
+import { BaseButtonController } from './base.controller.js';
+
+/**
+ * Ripple controller manages ripple effect functionality for button components
+ */
+export class ButtonRippleController extends BaseButtonController implements RippleController {
+
+  /**
+   * Creates ripple effect on button click with enhanced animation
+   * @param event - The click event
+   */
+  createRipple(event: MouseEvent): void {
+    try {
+      if (!this.host.ripple || this.host.disabled) return;
+
+      const button = event.currentTarget as HTMLElement;
+      const rect = button.getBoundingClientRect();
+      
+      // Make ripple larger for more pronounced effect
+      const size = Math.max(rect.width, rect.height) * 2;
+      const x = event.clientX - rect.left - size / 2;
+      const y = event.clientY - rect.top - size / 2;
+
+      const ripple = document.createElement('span');
+      ripple.className = 'ripple';
+      ripple.style.width = ripple.style.height = size + 'px';
+      ripple.style.left = x + 'px';
+      ripple.style.top = y + 'px';
+
+      // Remove any existing ripples
+      const existingRipples = button.querySelectorAll('.ripple');
+      existingRipples.forEach(r => r.remove());
+
+      button.appendChild(ripple);
+
+      // Remove ripple after animation
+      setTimeout(() => {
+        ripple.remove();
+      }, 600);
+    } catch (error) {
+      this.handleError(error as Error, 'createRipple');
+    }
+  }
+
+  /**
+   * Handle click events with ripple effect and dispatch custom event
+   * @param event - The click event
+   */
+  handleRippleClick(event: MouseEvent): void {
+    try {
+      this.createRipple(event);
+      
+      // Dispatch custom button click event if available
+      this.dispatchEvent(
+        new CustomEvent('button-click', {
+          detail: {
+            disabled: this.host.disabled,
+            timestamp: Date.now(),
+            coordinates: {
+              x: event.clientX,
+              y: event.clientY
+            }
+          },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    } catch (error) {
+      this.handleError(error as Error, 'handleRippleClick');
+    }
+  }
+}

package/components/ui/nuraly-ui/src/components/button/index.ts

@@ -0,0 +1 @@
+export * from './button.component.js';

package/components/ui/nuraly-ui/src/components/button/interfaces/base-controller.interface.ts

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ButtonType } from '../button.types.js';
+
+/**
+ * Base controller interface for button component controllers
+ * All controllers should extend this interface for consistency
+ */
+export interface ButtonBaseController {
+  readonly host: ButtonHost;
+  handleError?(error: Error, context: string): void;
+}
+
+/**
+ * Error handling interface for controllers
+ */
+export interface ErrorHandler {
+  handleError(error: Error, context: string): void;
+}
+
+/**
+ * Host element interface defining the contract between controllers and the button component
+ */
+export interface ButtonHost {
+  disabled: boolean;
+  loading: boolean;
+  type: ButtonType;
+  href: string;
+  target: string;
+  ripple: boolean;
+  requestUpdate(): void;
+  dispatchEvent(event: Event): boolean;
+  click(): void;
+  focus(): void;
+  blur(): void;
+  contains(element: Element): boolean;
+}
+
+/**
+ * Ripple controller interface for managing ripple effects
+ */
+export interface RippleController extends ButtonBaseController {
+  createRipple(event: MouseEvent): void;
+  handleRippleClick(event: MouseEvent): void;
+}
+
+/**
+ * Keyboard controller interface for handling keyboard interactions
+ */
+export interface KeyboardController extends ButtonBaseController {
+  handleKeyboardActivation(event: KeyboardEvent): void;
+  handleKeydown(event: KeyboardEvent): void;
+}
+
+/**
+ * Link controller interface for managing link behavior
+ */
+export interface LinkController extends ButtonBaseController {
+  isLinkType(): boolean;
+  getElementTag(): string;
+  getLinkAttributes(): Record<string, any>;
+  handleLinkNavigation(event: Event): void;
+}

package/components/ui/nuraly-ui/src/components/button/interfaces/index.ts

@@ -0,0 +1 @@
+export * from './base-controller.interface.js';

package/components/ui/nuraly-ui/src/components/button/react.ts

@@ -0,0 +1,11 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrButtonElement } from './button.component.js';
+export const NrButton = createComponent({
+  tagName: 'nr-button',
+  elementClass: NrButtonElement,
+  react: React,
+  events: {
+    click: 'click',
+  },
+});

package/components/ui/nuraly-ui/src/components/button/test/nr-button_test.ts

@@ -0,0 +1,90 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import { NrButtonElement } from '../button.component';
+import { ButtonSize, ButtonType, EMPTY_STRING } from '../button.types.js';
+import '../button.component';
+
+suite('NrButtonElement', () => {
+  test('has default properties', async () => {
+    const el: NrButtonElement = await fixture(html`<nr-button></nr-button>`);
+    const button: HTMLButtonElement = el.shadowRoot!.querySelector('button')!;
+    const icon = el.shadowRoot!.querySelector('nr-icon');
+
+    expect(el.disabled).to.be.false;
+    expect(el.loading).to.be.false;
+    expect(el.size).to.equal(EMPTY_STRING);
+    expect(el.type).to.equal(ButtonType.Default);
+    expect(el.dashed).to.be.false;
+    expect(el.icon).to.equal(EMPTY_STRING);
+    expect(button).to.not.have.class('button-dashed');
+    expect(button).to.not.have.attribute('data-size');
+    expect(button).to.not.have.attribute('data-state');
+    expect(button).to.have.attribute('data-type', ButtonType.Default);
+    expect(button.disabled).to.be.false;
+    expect(icon).to.not.exist;
+  });
+
+  test('has a label', async () => {
+    const buttonLabel = 'Test content';
+    const el: NrButtonElement = await fixture(html`<nr-button>${buttonLabel}</nr-button>`);
+    const slot = el.shadowRoot!.querySelector('slot');
+    const assignedNode = slot!.assignedNodes();
+    expect(assignedNode[0].textContent).to.equal(buttonLabel);
+  });
+  test('fires onClick event when clicked', async () => {
+    const el: NrButtonElement = await fixture(html`<nr-button></nr-button>`);
+    const button = el.shadowRoot!.querySelector('button')!;
+    let eventFired = false;
+    el.addEventListener('click', () => {
+      eventFired = true;
+    });
+    button.click();
+    expect(eventFired).to.be.true;
+  });
+
+  test('has a disabled property on the button element', async () => {
+    const el: NrButtonElement = await fixture(html`<nr-button disabled></nr-button>`);
+    const button = el.shadowRoot!.querySelector('button')!;
+    expect(button.disabled).to.be.true;
+  });
+  test('does not fire onClick event when disabled', async () => {
+    const el: NrButtonElement = await fixture(html`<nr-button disabled></nr-button>`);
+    const button = el.shadowRoot!.querySelector('button')!;
+    let eventFired = false;
+    el.addEventListener('click', () => {
+      eventFired = true;
+    });
+    button.click();
+    expect(eventFired).to.be.false;
+  });
+
+  test('renders the icon', async () => {
+    const iconName = 'sample-icon';
+    const el: NrButtonElement = await fixture(html`<nr-button icon=${iconName}></nr-button>`);
+    const icon = el.shadowRoot!.querySelector('nr-icon');
+    expect(icon).to.exist;
+    expect(icon).to.have.attribute('name', iconName);
+  });
+
+  test('applies the correct classe for dashed', async () => {
+    const el: NrButtonElement = await fixture(html`<nr-button dashed></nr-button>`);
+    const button = el.shadowRoot!.querySelector('button');
+    expect(button).to.have.class('button-dashed');
+  });
+  test('reflects the loading property as data-state on the button element', async () => {
+    const el: NrButtonElement = await fixture(html`<nr-button loading></nr-button>`);
+    const button = el.shadowRoot!.querySelector('button')!;
+    expect(button).to.have.attribute('data-state', 'loading');
+  });
+
+  test('reflects the size property as data-size on the button element', async () => {
+    const el: NrButtonElement = await fixture(html`<nr-button size=${ButtonSize.Large}></nr-button>`);
+    const button = el.shadowRoot!.querySelector('button')!;
+    expect(button).to.have.attribute('data-size', ButtonSize.Large);
+  });
+
+  test('reflects the type property as data-type on the button element', async () => {
+    const el: NrButtonElement = await fixture(html`<nr-button type=${ButtonType.Primary}></nr-button>`);
+    const button = el.shadowRoot!.querySelector('button')!;
+    expect(button).to.have.attribute('data-type', ButtonType.Primary);
+  });
+});