@shohojdhara/atomix 0.1.26 → 0.1.28

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

@@ -1,184 +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,109 +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,286 +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,39 +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;
-  }
-}