@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/Rating/scripts/index.ts

@@ -3,15 +3,9 @@ import type { RatingProps, Size, ThemeColor } from '../../../lib/types/component
 /**
  * Rating component class for vanilla JavaScript implementation
  */
-export type RatingOptions = Pick<RatingProps, 
-  'value' | 
-  'defaultValue' | 
-  'maxValue' | 
-  'allowHalf' | 
-  'readOnly' | 
-  'size' | 
-  'color' | 
-  'onChange'
+export type RatingOptions = Pick<
+  RatingProps,
+  'value' | 'defaultValue' | 'maxValue' | 'allowHalf' | 'readOnly' | 'size' | 'color' | 'onChange'
 >;
 
 // Define default options
@@ -35,33 +29,34 @@ export default class Rating {
   private _boundHandleMouseLeave: (event: MouseEvent) => void;
   private _boundHandleClick: (event: MouseEvent) => void;
   private _boundHandleKeyDown: (event: KeyboardEvent) => void;
-  
+
   /**
    * Create a new Rating instance
    * @param element - The element to attach the rating to
    * @param options - Configuration options
    */
   constructor(element: string | HTMLElement, options: RatingOptions = {}) {
-    this.element = typeof element === 'string' ? document.querySelector(element) as HTMLElement : element;
+    this.element =
+      typeof element === 'string' ? (document.querySelector(element) as HTMLElement) : element;
     if (!this.element) {
       throw new Error('Rating: Element not found');
     }
-    
+
     this.options = { ...DEFAULTS, ...options };
     this._currentValue = this.options.value || 0;
-    
+
     // Bind event handlers to this instance
     this._boundHandleMouseEnter = this._handleMouseEnter.bind(this);
     this._boundHandleMouseLeave = this._handleMouseLeave.bind(this);
     this._boundHandleClick = this._handleClick.bind(this);
     this._boundHandleKeyDown = this._handleKeyDown.bind(this);
-    
+
     // Store reference to instance on element
     (this.element as any)._rating = this;
-    
+
     this._init();
   }
-  
+
   /**
    * Initialize the component
    */
@@ -70,111 +65,116 @@ export default class Rating {
     this.element.setAttribute('data-max-value', String(this.options.maxValue));
     this.element.setAttribute('data-allow-half', String(this.options.allowHalf));
     this.element.setAttribute('data-readonly', String(this.options.readOnly));
-    
+
     // Set ARIA attributes
     if (this.options.readOnly) {
       this.element.setAttribute('role', 'img');
-      this.element.setAttribute('aria-label', `Rating: ${this._currentValue} out of ${this.options.maxValue} stars`);
+      this.element.setAttribute(
+        'aria-label',
+        `Rating: ${this._currentValue} out of ${this.options.maxValue} stars`
+      );
     } else {
       this.element.setAttribute('role', 'radiogroup');
     }
-    
+
     // Add CSS classes
     if (this.options.size && this.options.size !== 'md') {
       this.element.classList.add(`c-rating--${this.options.size}`);
     }
-    
+
     if (this.options.color) {
       this.element.classList.add(`c-rating--${this.options.color}`);
     }
-    
+
     // Get all stars
     this.stars = this.element.querySelectorAll('.c-rating__star');
-    
+
     // Set initial state
     this._updateStars();
-    
+
     // Bind events if not read-only
     if (!this.options.readOnly) {
       this._bindEvents();
     }
-    
+
     // Dispatch init event
-    this.element.dispatchEvent(new CustomEvent('rating:init', {
-      bubbles: true,
-      detail: { instance: this }
-    }));
+    this.element.dispatchEvent(
+      new CustomEvent('rating:init', {
+        bubbles: true,
+        detail: { instance: this },
+      })
+    );
   }
-  
+
   /**
    * Bind event listeners
    */
   private _bindEvents(): void {
     if (!this.stars) return;
-    
+
     // Add event listeners to each star
-    this.stars.forEach((star) => {
+    this.stars.forEach(star => {
       star.addEventListener('mouseenter', this._boundHandleMouseEnter);
       star.addEventListener('click', this._boundHandleClick);
       star.addEventListener('keydown', this._boundHandleKeyDown);
-      
+
       // Make stars focusable
       star.setAttribute('tabindex', '0');
       star.setAttribute('role', 'button');
     });
-    
+
     // Add mouseleave to the container
     this.element.addEventListener('mouseleave', this._boundHandleMouseLeave);
   }
-  
+
   /**
    * Handle mouse enter on a star
    */
   private _handleMouseEnter(event: MouseEvent): void {
     if (this.options.readOnly) return;
-    
+
     const target = event.currentTarget as HTMLElement;
     const value = Number(target.getAttribute('data-value'));
-    
+
     this._highlightStars(value);
   }
-  
+
   /**
    * Handle mouse leave from rating component
    */
   private _handleMouseLeave(): void {
     if (this.options.readOnly) return;
-    
+
     this._updateStars();
   }
-  
+
   /**
    * Handle click on a star
    */
   private _handleClick(event: MouseEvent): void {
     if (this.options.readOnly) return;
-    
+
     const target = event.currentTarget as HTMLElement;
     const value = Number(target.getAttribute('data-value'));
-    
+
     this.setValue(value);
-    
+
     if (this.options.onChange) {
       this.options.onChange(value);
     }
   }
-  
+
   /**
    * Handle keyboard navigation
    */
   private _handleKeyDown(event: KeyboardEvent): void {
     if (this.options.readOnly) return;
-    
+
     const target = event.currentTarget as HTMLElement;
     const index = Number(target.getAttribute('data-value'));
     const step = this.options.allowHalf ? 0.5 : 1;
     let newValue = this._currentValue;
-    
+
     switch (event.key) {
       case 'ArrowRight':
       case 'ArrowUp':
@@ -202,80 +202,83 @@ export default class Rating {
       default:
         return;
     }
-    
+
     if (newValue !== this._currentValue) {
       this.setValue(newValue);
-      
+
       if (this.options.onChange) {
         this.options.onChange(newValue);
       }
     }
   }
-  
+
   /**
    * Update star appearance based on current value
    */
   private _updateStars(): void {
     if (!this.stars) return;
-    
-    const roundedValue = this.options.allowHalf 
-      ? Math.floor(this._currentValue * 2) / 2 
+
+    const roundedValue = this.options.allowHalf
+      ? Math.floor(this._currentValue * 2) / 2
       : Math.round(this._currentValue);
-    
-    this.stars.forEach((star) => {
+
+    this.stars.forEach(star => {
       const starValue = Number(star.getAttribute('data-value'));
       const isFullStar = starValue <= Math.floor(roundedValue);
-      const isHalfStar = this.options.allowHalf && (starValue - 0.5 === roundedValue);
-      
+      const isHalfStar = this.options.allowHalf && starValue - 0.5 === roundedValue;
+
       // Remove existing classes
       star.classList.remove('c-rating__star--full', 'c-rating__star--half');
-      
+
       // Add appropriate classes
       if (isFullStar) {
         star.classList.add('c-rating__star--full');
       } else if (isHalfStar) {
         star.classList.add('c-rating__star--half');
       }
-      
+
       // Update ARIA attributes
       star.setAttribute('aria-checked', isFullStar || isHalfStar ? 'true' : 'false');
     });
-    
+
     // Update container ARIA label if read-only
     if (this.options.readOnly) {
-      this.element.setAttribute('aria-label', `Rating: ${roundedValue} out of ${this.options.maxValue} stars`);
+      this.element.setAttribute(
+        'aria-label',
+        `Rating: ${roundedValue} out of ${this.options.maxValue} stars`
+      );
     }
-    
+
     // Update data attribute
     this.element.setAttribute('data-value', String(roundedValue));
   }
-  
+
   /**
    * Temporarily highlight stars up to a value
    */
   private _highlightStars(value: number): void {
     if (!this.stars) return;
-    
-    this.stars.forEach((star) => {
+
+    this.stars.forEach(star => {
       const starValue = Number(star.getAttribute('data-value'));
-      
+
       // Remove existing classes
       star.classList.remove('c-rating__star--full', 'c-rating__star--half');
-      
+
       // Add full class if star value is less than or equal to hovered value
       if (starValue <= value) {
         star.classList.add('c-rating__star--full');
       }
     });
   }
-  
+
   /**
    * Get current rating value
    */
   public getValue(): number {
     return this._currentValue;
   }
-  
+
   /**
    * Set the rating value
    * @param value - The new rating value
@@ -283,20 +286,22 @@ export default class Rating {
   public setValue(value: number): void {
     // Clamp value between 0 and maxValue
     const clampedValue = Math.max(0, Math.min(value, this.options.maxValue || 5));
-    
+
     // Update current value
     this._currentValue = clampedValue;
-    
+
     // Update visual state
     this._updateStars();
-    
+
     // Dispatch change event
-    this.element.dispatchEvent(new CustomEvent('rating:change', {
-      bubbles: true,
-      detail: { value: clampedValue }
-    }));
+    this.element.dispatchEvent(
+      new CustomEvent('rating:change', {
+        bubbles: true,
+        detail: { value: clampedValue },
+      })
+    );
   }
-  
+
   /**
    * Update component options
    * @param options Partial options to update
@@ -304,27 +309,27 @@ export default class Rating {
   public updateOptions(options: Partial<RatingOptions>): void {
     // Update options
     this.options = { ...this.options, ...options };
-    
+
     // Re-initialize component with new options
     this._init();
   }
-  
+
   /**
    * Destroy the rating component and remove event listeners
    */
   public destroy(): void {
     if (this.stars) {
       // Remove event listeners from stars
-      this.stars.forEach((star) => {
+      this.stars.forEach(star => {
         star.removeEventListener('mouseenter', this._boundHandleMouseEnter);
         star.removeEventListener('click', this._boundHandleClick);
         star.removeEventListener('keydown', this._boundHandleKeyDown);
       });
     }
-    
+
     // Remove event listener from container
     this.element.removeEventListener('mouseleave', this._boundHandleMouseLeave);
-    
+
     // Remove reference from element
     delete (this.element as any)._rating;
   }

package/src/components/Rating/scripts/ratingInteractions.ts

@@ -12,36 +12,36 @@ import Rating from './index';
  */
 export function handleKeyboardNavigation(event: KeyboardEvent, container: HTMLElement): void {
   if (!container) return;
-  
+
   const stars = container.querySelectorAll<HTMLElement>('.c-rating__star');
   if (!stars.length) return;
-  
+
   const currentIndex = Array.from(stars).findIndex(item => item === document.activeElement);
   let nextIndex = -1;
-  
+
   switch (event.key) {
     case 'ArrowRight':
     case 'ArrowUp':
       event.preventDefault();
       nextIndex = currentIndex < stars.length - 1 ? currentIndex + 1 : 0;
       break;
-      
+
     case 'ArrowLeft':
     case 'ArrowDown':
       event.preventDefault();
       nextIndex = currentIndex > 0 ? currentIndex - 1 : stars.length - 1;
       break;
-      
+
     case 'Home':
       event.preventDefault();
       nextIndex = 0;
       break;
-      
+
     case 'End':
       event.preventDefault();
       nextIndex = stars.length - 1;
       break;
-      
+
     case ' ':
     case 'Enter':
       event.preventDefault();
@@ -50,7 +50,7 @@ export function handleKeyboardNavigation(event: KeyboardEvent, container: HTMLEl
       }
       break;
   }
-  
+
   if (nextIndex >= 0 && stars[nextIndex]) {
     stars[nextIndex].focus();
   }
@@ -63,11 +63,11 @@ export function handleKeyboardNavigation(event: KeyboardEvent, container: HTMLEl
 export function enhanceWithKeyboardNavigation(rating: Rating): void {
   const element = rating.element;
   if (!element) return;
-  
+
   element.addEventListener('keydown', (e: KeyboardEvent) => {
     handleKeyboardNavigation(e, element);
   });
-  
+
   // Make stars focusable
   const stars = element.querySelectorAll<HTMLElement>('.c-rating__star');
   stars.forEach(star => {
@@ -75,7 +75,10 @@ export function enhanceWithKeyboardNavigation(rating: Rating): void {
       star.setAttribute('tabindex', '0');
     }
     star.setAttribute('role', 'button');
-    star.setAttribute('aria-label', `Rate ${Array.from(stars).indexOf(star) + 1} out of ${stars.length}`);
+    star.setAttribute(
+      'aria-label',
+      `Rate ${Array.from(stars).indexOf(star) + 1} out of ${stars.length}`
+    );
   });
 }
 
@@ -84,50 +87,50 @@ export function enhanceWithKeyboardNavigation(rating: Rating): void {
  */
 export function initFromDataAttributes(): Rating[] {
   const instances: Rating[] = [];
-  
+
   document.querySelectorAll('[data-rating]').forEach(element => {
     const el = element as HTMLElement;
-    
+
     // Parse options from data attributes
     const options: Record<string, any> = {};
-    
+
     // Value
     if (el.dataset.value) {
       options.value = parseFloat(el.dataset.value);
     }
-    
+
     // Max value
     if (el.dataset.maxValue) {
       options.maxValue = parseFloat(el.dataset.maxValue);
     }
-    
+
     // Allow half
     if (el.dataset.allowHalf !== undefined) {
       options.allowHalf = el.dataset.allowHalf === 'true';
     }
-    
+
     // Read only
     if (el.dataset.readOnly !== undefined) {
       options.readOnly = el.dataset.readOnly === 'true';
     }
-    
+
     // Size
     if (el.dataset.size) {
       options.size = el.dataset.size;
     }
-    
+
     // Color
     if (el.dataset.color) {
       options.color = el.dataset.color;
     }
-    
+
     const instance = new Rating(el, options);
     instances.push(instance);
-    
+
     // Enhance with keyboard navigation
     enhanceWithKeyboardNavigation(instance);
   });
-  
+
   return instances;
 }
 
@@ -137,9 +140,9 @@ export function initFromDataAttributes(): Rating[] {
  */
 export function getInstance(element: string | HTMLElement): Rating | null {
   const el = typeof element === 'string' ? document.querySelector(element) : element;
-  
+
   if (!el) return null;
-  
+
   // Use a stored reference if exists
   return (el as any)._rating || null;
 }