@shohojdhara/atomix 0.1.16 → 0.1.17

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

@@ -1,178 +0,0 @@
-import { PROGRESS } from '../../../lib/constants/components';
-
-interface ProgressOptions {
-  /**
-   * Progress value from 0 to 100
-   */
-  value?: number;
-  
-  /**
-   * Optional color variant
-   */
-  variant?: string;
-  
-  /**
-   * Optional size
-   */
-  size?: 'sm' | 'md' | 'lg';
-  
-  /**
-   * Optional aria-label for accessibility
-   */
-  ariaLabel?: string;
-}
-
-/**
- * Progress component class for vanilla JS implementation
- */
-export class Progress {
-  private $element: HTMLElement;
-  private options: ProgressOptions;
-  
-  /**
-   * Create a new Progress instance
-   * @param element - Element selector or DOM element
-   * @param options - Configuration options
-   */
-  constructor(element: string | HTMLElement, options: ProgressOptions = {}) {
-    this.$element = typeof element === 'string' 
-      ? document.querySelector(element) as HTMLElement 
-      : element;
-      
-    if (!this.$element) {
-      throw new Error('Progress: Element not found');
-    }
-    
-    this.options = {
-      value: 0,
-      variant: 'primary',
-      size: 'md',
-      ariaLabel: PROGRESS.DEFAULTS.ARIA_LABEL,
-      ...options
-    };
-    
-    this._initialize();
-  }
-  
-  /**
-   * Initialize the progress component
-   */
-  private _initialize(): void {
-    // Set initial value
-    this.setValue(this.options.value || 0);
-    
-    // Set variant and size
-    if (this.options.variant) {
-      this._setVariant(this.options.variant);
-    }
-    
-    if (this.options.size) {
-      this._setSize(this.options.size);
-    }
-    
-    // Set ARIA attributes
-    this.$element.setAttribute('role', 'progressbar');
-    this.$element.setAttribute(PROGRESS.ATTRIBUTES.ARIA_VALUEMIN, '0');
-    this.$element.setAttribute(PROGRESS.ATTRIBUTES.ARIA_VALUEMAX, '100');
-    this.$element.setAttribute(PROGRESS.ATTRIBUTES.ARIA_LABEL, this.options.ariaLabel || PROGRESS.DEFAULTS.ARIA_LABEL);
-    
-    // Ensure the bar element exists
-    if (!this.$element.querySelector(PROGRESS.SELECTORS.BAR)) {
-      const bar = document.createElement('div');
-      bar.className = PROGRESS.CLASSES.BAR;
-      this.$element.appendChild(bar);
-    }
-  }
-  
-  /**
-   * Set the progress value
-   * @param value - Progress value (0-100)
-   */
-  public setValue(value: number): void {
-    // Clamp value between 0 and 100
-    const progressValue = Math.min(Math.max(value, 0), 100);
-    
-    // Update the CSS variable
-    this.$element.style.setProperty(PROGRESS.CSS_VARS.PERCENTAGE, `${progressValue}%`);
-    
-    // Update ARIA attribute
-    this.$element.setAttribute(PROGRESS.ATTRIBUTES.ARIA_VALUENOW, progressValue.toString());
-  }
-  
-  /**
-   * Set the progress variant
-   * @param variant - Color variant
-   */
-  private _setVariant(variant: string): void {
-    // Remove existing variant classes
-    const classList = this.$element.classList;
-    Array.from(classList)
-      .filter(className => className.startsWith(`${PROGRESS.CLASSES.BASE}--`) && 
-                          !className.includes('--sm') && 
-                          !className.includes('--md') && 
-                          !className.includes('--lg'))
-      .forEach(className => classList.remove(className));
-    
-    // Add new variant class
-    classList.add(`${PROGRESS.CLASSES.BASE}--${variant}`);
-  }
-  
-  /**
-   * Set the progress size
-   * @param size - Size variant
-   */
-  private _setSize(size: string): void {
-    // Remove existing size classes
-    const classList = this.$element.classList;
-    [PROGRESS.CLASSES.SM, PROGRESS.CLASSES.MD, PROGRESS.CLASSES.LG]
-      .forEach(className => classList.remove(className));
-    
-    // Add new size class
-    classList.add(`${PROGRESS.CLASSES.BASE}--${size}`);
-  }
-  
-  /**
-   * Update progress options
-   * @param options - New options
-   */
-  public update(options: Partial<ProgressOptions>): void {
-    this.options = { ...this.options, ...options };
-    
-    if (options.value !== undefined) {
-      this.setValue(options.value);
-    }
-    
-    if (options.variant) {
-      this._setVariant(options.variant);
-    }
-    
-    if (options.size) {
-      this._setSize(options.size);
-    }
-    
-    if (options.ariaLabel) {
-      this.$element.setAttribute(PROGRESS.ATTRIBUTES.ARIA_LABEL, options.ariaLabel);
-    }
-  }
-  
-  /**
-   * Destroy the progress instance
-   */
-  public destroy(): void {
-    // No event listeners to remove for this component
-  }
-  
-  /**
-   * Initialize all progress elements on the page
-   */
-  public static initializeAll(): Progress[] {
-    const elements = document.querySelectorAll(PROGRESS.SELECTORS.PROGRESS);
-    return Array.from(elements).map(element => {
-      const value = Number(element.getAttribute('data-value') || 0);
-      const variant = element.getAttribute('data-variant') || 'primary';
-      const size = element.getAttribute('data-size') as 'sm' | 'md' | 'lg' || 'md';
-      
-      return new Progress(element as HTMLElement, { value, variant, size });
-    });
-  }
-}

package/src/components/Rating/Rating.stories.tsx

@@ -1,122 +0,0 @@
-import React, { useState } from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import { Rating } from './Rating';
-import type { RatingProps } from '../../lib/types/components';
-
-export default {
-  title: 'Components/Rating',
-  component: Rating,
-  argTypes: {
-    value: { control: { type: 'number', min: 0, max: 5, step: 0.5 } },
-    maxValue: { control: { type: 'number', min: 1, max: 10 } },
-    allowHalf: { control: 'boolean' },
-    readOnly: { control: 'boolean' },
-    size: {
-      control: { type: 'select', options: ['sm', 'md', 'lg'] },
-    },
-    color: {
-      control: {
-        type: 'select',
-        options: [
-          'primary',
-          'secondary',
-          'success',
-          'info',
-          'warning',
-          'error',
-          'light',
-          'dark',
-        ],
-      },
-    },
-    onChange: { action: 'onChange' },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: 'Rating component for displaying and collecting star ratings',
-      },
-    },
-  },
-} as Meta;
-
-const Template: StoryFn<RatingProps> = (args: RatingProps) => <Rating {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  value: 3,
-  maxValue: 5,
-  allowHalf: false,
-  readOnly: false,
-  size: 'md',
-};
-
-export const ReadOnly = Template.bind({});
-ReadOnly.args = {
-  value: 4,
-  maxValue: 5,
-  allowHalf: false,
-  readOnly: true,
-  size: 'md',
-};
-
-export const HalfStars = Template.bind({});
-HalfStars.args = {
-  value: 3.5,
-  maxValue: 5,
-  allowHalf: true,
-  readOnly: true,
-  size: 'md',
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  value: 4,
-  maxValue: 5,
-  allowHalf: false,
-  readOnly: true,
-  size: 'sm',
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  value: 4,
-  maxValue: 5,
-  allowHalf: false,
-  readOnly: true,
-  size: 'lg',
-};
-
-export const CustomColor = Template.bind({});
-CustomColor.args = {
-  value: 4,
-  maxValue: 5,
-  allowHalf: false,
-  readOnly: true,
-  size: 'md',
-  color: 'warning',
-};
-
-export const Interactive: StoryFn<RatingProps> = () => {
-  const [rating, setRating] = useState(3);
-  
-  return (
-    <div>
-      <p>Selected rating: {rating}</p>
-      <Rating 
-        value={rating} 
-        onChange={setRating} 
-        allowHalf={true}
-      />
-    </div>
-  );
-};
-
-export const CustomMaxValue = Template.bind({});
-CustomMaxValue.args = {
-  value: 7,
-  maxValue: 10,
-  allowHalf: false,
-  readOnly: true,
-  size: 'md',
-};

package/src/components/Rating/Rating.tsx

@@ -1,267 +0,0 @@
-import React, { useRef, useEffect, useCallback, forwardRef } from 'react';
-import { THEME_COLORS, SIZES, RATING } from '../../lib/constants/components';
-import { useRating } from '../../lib/composables/useRating';
-import type { RatingProps } from '../../lib/types/components';
-import useForkRef from '../../lib/utils/useForkRef';
-
-/**
- * Rating component for displaying and collecting star ratings
- * 
- * @example
- * // Basic usage
- * <Rating value={3} onChange={handleRatingChange} />
- * 
- * @example
- * // Read-only with custom color
- * <Rating value={4.5} readOnly color="warning" />
- * 
- * @example
- * // With half-star support
- * <Rating value={3.5} allowHalf maxValue={5} />
- */
-export const Rating = forwardRef<HTMLDivElement, RatingProps>(({
-  value: valueProp = 0,
-  defaultValue,
-  maxValue = 5,
-  allowHalf = false,
-  readOnly = false,
-  size = 'md',
-  color,
-  onChange,
-  className = '',
-  label,
-  id,
-  useVanillaJS = false,
-  ...restProps
-}, ref) => {
-  const internalRef = useRef<HTMLDivElement>(null);
-  const ratingInstance = useRef<any>(null);
-  
-  // Use the rating hook for React-based implementation
-  const {
-    currentValue,
-    hoverValue,
-    focusedIndex,
-    setHoverValue,
-    setFocused,
-    handleKeyDown
-  } = useRating({
-    value: valueProp !== undefined ? valueProp : defaultValue,
-    maxValue,
-    allowHalf,
-    readOnly,
-    onChange
-  });
-  
-  // Handle mouse enter on star with half-star support
-  const handleMouseEnter = useCallback((e: React.MouseEvent, starValue: number) => {
-    if (readOnly) return;
-    
-    if (allowHalf) {
-      // Get the star element's bounding rectangle
-      const starRect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-      // Calculate the x position within the star
-      const starCenterX = starRect.left + starRect.width / 2;
-      // If mouse is on the left half of the star, use half value
-      const isHalfStar = e.clientX < starCenterX;
-      const adjustedValue = isHalfStar ? starValue - 0.5 : starValue;
-      setHoverValue(Math.max(0.5, adjustedValue)); // Ensure minimum of 0.5
-    } else {
-      setHoverValue(starValue);
-    }
-  }, [readOnly, allowHalf, setHoverValue]);
-  
-  // Handle mouse move on star for half-star precision
-  const handleMouseMove = useCallback((e: React.MouseEvent, starValue: number) => {
-    if (readOnly || !allowHalf) return;
-    
-    // Get the star element's bounding rectangle
-    const starRect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-    // Calculate the x position within the star
-    const starCenterX = starRect.left + starRect.width / 2;
-    // If mouse is on the left half of the star, use half value
-    const isHalfStar = e.clientX < starCenterX;
-    const adjustedValue = isHalfStar ? starValue - 0.5 : starValue;
-    setHoverValue(Math.max(0.5, adjustedValue)); // Ensure minimum of 0.5
-  }, [readOnly, allowHalf, setHoverValue]);
-  
-  // Handle mouse leave from rating component
-  const handleMouseLeave = useCallback(() => {
-    if (readOnly) return;
-    setHoverValue(null);
-  }, [readOnly, setHoverValue]);
-  
-  // Handle click on star with half-star support
-  const handleClick = useCallback((e: React.MouseEvent, starValue: number) => {
-    if (readOnly) return;
-    
-    let newValue = starValue;
-    
-    if (allowHalf) {
-      // Get the star element's bounding rectangle
-      const starRect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-      // Calculate the x position within the star
-      const starCenterX = starRect.left + starRect.width / 2;
-      // If click is on the left half of the star, use half value
-      const isHalfStar = e.clientX < starCenterX;
-      newValue = isHalfStar ? starValue - 0.5 : starValue;
-      newValue = Math.max(0.5, newValue); // Ensure minimum of 0.5
-    }
-    
-    onChange?.(newValue);
-  }, [readOnly, onChange, allowHalf]);
-  
-  // Use vanilla JS implementation if specified
-  useEffect(() => {
-    if (!useVanillaJS || typeof window === 'undefined' || !internalRef.current) return undefined;
-    
-    // Cleanup on unmount
-    return () => {
-      if (ratingInstance.current) {
-        ratingInstance.current.destroy();
-      }
-    };
-  }, [useVanillaJS, valueProp, defaultValue, maxValue, allowHalf, readOnly, size, color, onChange]);
-  
-  // Update vanilla JS implementation when props change
-  useEffect(() => {
-    if (!useVanillaJS || !ratingInstance.current) return undefined;
-    
-    ratingInstance.current.updateOptions({
-      value: valueProp !== undefined ? valueProp : defaultValue,
-      maxValue,
-      allowHalf,
-      readOnly,
-      size,
-      color
-    });
-  }, [useVanillaJS, valueProp, defaultValue, maxValue, allowHalf, readOnly, size, color]);
-  
-  // Determine CSS classes
-  const ratingClasses = [
-    'c-rating',
-    size === 'sm' ? RATING.CLASSES.SMALL : '',
-    size === 'lg' ? RATING.CLASSES.LARGE : '',
-    color ? `c-rating--${color}` : '',
-    className
-  ].filter(Boolean).join(' ');
-  
-  // If using vanilla JS, just render the container
-  if (useVanillaJS) {
-    return (
-      <div 
-        className={ratingClasses}
-        ref={useForkRef(internalRef, ref)}
-        id={id}
-        {...restProps}
-      >
-        {/* Stars will be generated by the vanilla JS implementation */}
-      </div>
-    );
-  }
-  
-  // React-based implementation
-  // Determine the effective value (either hovered or actual)
-  const effectiveValue = hoverValue !== null ? hoverValue : currentValue;
-  
-  // Generate stars
-  const renderStars = () => {
-    const stars = [];
-    const roundedValue = allowHalf ? Math.floor(effectiveValue * 2) / 2 : Math.round(effectiveValue);
-    const componentId = id || `rating-${Math.random().toString(36).substring(2, 9)}`;
-    
-    for (let i = 1; i <= maxValue; i++) {
-      // For half-star support
-      const isFullStar = i <= Math.floor(roundedValue);
-      const isHalfStar = allowHalf && (i - 0.5 === roundedValue);
-      
-      const starClass = [
-        'c-rating__star',
-        isFullStar ? RATING.CLASSES.FULL : '',
-        isHalfStar ? RATING.CLASSES.HALF : '',
-        color ? `c-rating__star--${color}` : '',
-        focusedIndex === i ? 'c-rating__star--focused' : ''
-      ].filter(Boolean).join(' ');
-      
-      const starId = `${componentId}-star-${i}`;
-      
-      stars.push(
-        <div 
-          key={i}
-          id={starId}
-          className={starClass}
-          data-value={i}
-          role={readOnly ? 'presentation' : 'button'}
-          tabIndex={readOnly ? -1 : 0}
-          aria-label={`${i} ${i === 1 ? 'star' : 'stars'}`}
-          aria-checked={i <= roundedValue}
-          aria-setsize={maxValue}
-          aria-posinset={i}
-          onClick={(e) => handleClick(e, i)}
-          onMouseEnter={(e) => handleMouseEnter(e, i)}
-          onMouseMove={(e) => handleMouseMove(e, i)}
-          onFocus={() => setFocused(i)}
-          onBlur={() => setFocused(null)}
-          onKeyDown={(e) => handleKeyDown(e, i)}
-        >
-          <svg 
-            viewBox="0 0 24 24" 
-            xmlns="http://www.w3.org/2000/svg"
-            aria-hidden="true"
-            focusable="false"
-          >
-            {/* Empty star (outline) */}
-            <path 
-              className="c-rating__star-outline"
-              d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-              strokeWidth="1"
-            />
-            
-            {/* Full star */}
-            <path 
-              className="c-rating__star-full"
-              d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-            />
-            
-            {/* Half star with proper clipping */}
-            <path 
-              className="c-rating__star-half"
-              d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-              clipPath={`url(#half-star-clip-${componentId}-${i})`}
-            />
-            
-            {/* Clipping path for half star */}
-            <defs>
-              <clipPath id={`half-star-clip-${componentId}-${i}`}>
-                <rect x="0" y="0" width="12" height="24" />
-              </clipPath>
-            </defs>
-          </svg>
-        </div>
-      );
-    }
-    
-    return stars;
-  };
-  
-  return (
-    <div 
-      className={ratingClasses}
-      ref={useForkRef(internalRef, ref)}
-      id={id}
-      data-readonly={readOnly ? 'true' : 'false'}
-      onMouseLeave={handleMouseLeave}
-      role={readOnly ? 'img' : 'radiogroup'}
-      aria-label={label || `Rating: ${currentValue} out of ${maxValue} stars`}
-      {...restProps}
-    >
-      {renderStars()}
-    </div>
-  );
-});
-
-Rating.displayName = 'Rating';
-
-export type { RatingProps  };
-
-export default Rating;

package/src/components/Rating/index.ts

@@ -1,6 +0,0 @@
-import Rating, { RatingProps } from './Rating';
-
-export { Rating };
-export type { RatingProps };
-
-export default Rating;

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

@@ -1,34 +0,0 @@
-import Rating from './index';
-import { initFromDataAttributes, getInstance, disposeAll, enhanceWithKeyboardNavigation } from './ratingInteractions';
-
-if (typeof window !== 'undefined') {
-  // Initialize the Atomix global object if it doesn't exist
-  (window as any).Atomix = (window as any).Atomix || {};
-  
-  // Add Rating to the global Atomix object
-  (window as any).Atomix.Rating = {
-    create: Rating,
-    init: initFromDataAttributes,
-    get: getInstance,
-    disposeAll: disposeAll,
-    enhanceKeyboardNavigation: enhanceWithKeyboardNavigation
-  };
-  
-  // Auto-initialize ratings when DOM is ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-      initFromDataAttributes();
-    });
-  } else {
-    initFromDataAttributes();
-  }
-}
-
-// Export everything for module bundling
-export { 
-  Rating as default,
-  initFromDataAttributes,
-  getInstance,
-  disposeAll,
-  enhanceWithKeyboardNavigation
-};

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

@@ -1,12 +0,0 @@
-declare module './scripts' {
-  export default class Rating {
-    constructor(element: HTMLElement, options?: any);
-    init(): void;
-    handleMouseMove(e: MouseEvent): void;
-    handleMouseLeave(): void;
-    handleClick(e: MouseEvent): void;
-    setValue(value: number): void;
-    updateStarsDisplay(value: number, isHover?: boolean): void;
-    destroy(): void;
-  }
-}