@shohojdhara/atomix 0.1.30 → 0.2.1

package/src/components/Progress/Progress.stories.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Progress } from './Progress';
+import { ProgressProps } from '../../lib/types/components';
+
+export default {
+  title: 'Components/Progress',
+  component: Progress,
+  argTypes: {
+    value: { control: { type: 'range', min: 0, max: 100 } },
+    variant: {
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'success', 'warning', 'error', 'info', 'light', 'dark'],
+      },
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: ['sm', 'md', 'lg'],
+      },
+    },
+  },
+} as Meta<typeof Progress>;
+
+const Template: StoryFn<ProgressProps> = (args: ProgressProps) => <Progress {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  value: 50,
+  variant: 'primary',
+  size: 'md',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  value: 75,
+  variant: 'secondary',
+  size: 'md',
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  value: 100,
+  variant: 'success',
+  size: 'md',
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  value: 25,
+  variant: 'warning',
+  size: 'md',
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  value: 10,
+  variant: 'error',
+  size: 'md',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  value: 60,
+  variant: 'primary',
+  size: 'sm',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  value: 80,
+  variant: 'primary',
+  size: 'lg',
+};

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,45 @@
+import React, { forwardRef } from 'react';
+import { ProgressProps } from '../../lib/types/components';
+import { useProgress } from '../../lib/composables/useProgress';
+import { PROGRESS } from '../../lib/constants/components';
+
+export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
+  (
+    {
+      value,
+      variant = 'primary',
+      size = 'md',
+      className = '',
+      disabled = false,
+      ariaLabel = PROGRESS.DEFAULTS.ARIA_LABEL,
+    },
+    ref
+  ) => {
+    const { progressValue, progressStyle, progressClasses } = useProgress({
+      value,
+      variant,
+      size,
+      className,
+    });
+
+    return (
+      <div
+        ref={ref}
+        className={progressClasses}
+        style={progressStyle}
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={progressValue}
+        aria-label={ariaLabel}
+        aria-disabled={disabled}
+      >
+        <div className={PROGRESS.CLASSES.BAR}></div>
+      </div>
+    );
+  }
+);
+
+export type { ProgressProps };
+
+export default Progress;

package/src/components/Progress/index.ts

@@ -0,0 +1 @@
+export { Progress } from './Progress';

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

@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { fn } from '@storybook/test';
+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'],
+      },
+    },
+  },
+  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;