@shohojdhara/atomix 0.1.17 → 0.1.18

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

@@ -0,0 +1,184 @@
+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

@@ -0,0 +1,109 @@
+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

@@ -0,0 +1,286 @@
+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

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

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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,12 @@
+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;
+  }
+}