@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/components/ProductReview/ProductReview.stories.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { ProductReview, ProductReviewProps } from './ProductReview';
+
+export default {
+  title: 'Components/ProductReview',
+  component: ProductReview,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Product review form for collecting user ratings and feedback',
+      },
+    },
+  },
+  argTypes: {
+    productName: { control: 'text' },
+    productImage: { control: 'text' },
+    initialRating: { control: { type: 'number', min: 0, max: 5, step: 0.5 } },
+    maxRating: { control: { type: 'number', min: 1, max: 10 } },
+    allowHalf: { control: 'boolean' },
+    ratingColor: {
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'light', 'dark'],
+      },
+    },
+    onSubmit: { action: 'submitted' },
+  },
+} as Meta<typeof ProductReview>;
+
+const Template: StoryFn<ProductReviewProps> = (args: ProductReviewProps) => (
+  <ProductReview {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  productName: 'Wireless Headphones',
+  productImage: 'https://via.placeholder.com/100',
+  initialRating: 0,
+  maxRating: 5,
+  allowHalf: true,
+  ratingColor: 'warning',
+  onSubmit: (rating: number, comment: string) => {
+    console.log('Rating:', rating);
+    console.log('Comment:', comment);
+  },
+};
+
+export const WithInitialRating = Template.bind({});
+WithInitialRating.args = {
+  productName: 'Smart Watch',
+  productImage: 'https://via.placeholder.com/100',
+  initialRating: 4,
+  maxRating: 5,
+  allowHalf: true,
+  ratingColor: 'warning',
+  onSubmit: (rating: number, comment: string) => {
+    console.log('Rating:', rating);
+    console.log('Comment:', comment);
+  },
+};
+
+export const WithoutImage = Template.bind({});
+WithoutImage.args = {
+  productName: 'Bluetooth Speaker',
+  initialRating: 0,
+  maxRating: 5,
+  allowHalf: true,
+  ratingColor: 'warning',
+  onSubmit: (rating: number, comment: string) => {
+    console.log('Rating:', rating);
+    console.log('Comment:', comment);
+  },
+};
+
+export const CustomRatingScale = Template.bind({});
+CustomRatingScale.args = {
+  productName: 'Gaming Laptop',
+  productImage: 'https://via.placeholder.com/100',
+  initialRating: 0,
+  maxRating: 10,
+  allowHalf: false,
+  ratingColor: 'primary',
+  onSubmit: (rating: number, comment: string) => {
+    console.log('Rating:', rating);
+    console.log('Comment:', comment);
+  },
+};

package/src/components/ProductReview/ProductReview.tsx

@@ -0,0 +1,169 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Rating } from '../Rating/Rating';
+import { Button } from '../Button/Button';
+import type { ThemeColor } from '../../lib/types/components';
+
+export interface ProductReviewProps {
+  /**
+   * Product name
+   */
+  productName: string;
+
+  /**
+   * Product image URL
+   */
+  productImage?: string;
+
+  /**
+   * Initial rating value (0-5)
+   */
+  initialRating?: number;
+
+  /**
+   * Maximum possible rating value
+   */
+  maxRating?: number;
+
+  /**
+   * Whether to allow half-star ratings
+   */
+  allowHalf?: boolean;
+
+  /**
+   * Color theme for the rating stars
+   */
+  ratingColor?: ThemeColor;
+
+  /**
+   * Callback when review is submitted
+   */
+  onSubmit?: (rating: number, comment: string) => void;
+
+  /**
+   * Additional CSS class
+   */
+  className?: string;
+}
+
+/**
+ * ProductReview component for collecting user ratings and feedback
+ */
+export const ProductReview: React.FC<ProductReviewProps> = ({
+  productName,
+  productImage,
+  initialRating = 0,
+  maxRating = 5,
+  allowHalf = true,
+  ratingColor = 'warning' as ThemeColor,
+  onSubmit,
+  className = '',
+}) => {
+  const [rating, setRating] = useState<number>(initialRating);
+  const [comment, setComment] = useState<string>('');
+  const [submitted, setSubmitted] = useState<boolean>(false);
+  const reviewRef = useRef<HTMLDivElement>(null);
+  const reviewInstance = useRef<any>(null);
+
+  useEffect(() => {
+    // Only run on client-side
+    if (typeof window === 'undefined' || !reviewRef.current) return undefined;
+
+    // Cleanup on unmount
+    return () => {
+      if (reviewInstance.current) {
+        reviewInstance.current.destroy();
+      }
+    };
+  }, [productName, productImage, initialRating, maxRating, allowHalf, ratingColor, onSubmit]);
+
+  const handleSubmit = (e: React.FormEvent): void => {
+    e.preventDefault();
+
+    if (onSubmit) {
+      onSubmit(rating, comment);
+    }
+
+    setSubmitted(true);
+  };
+
+  const containerClasses = ['c-product-review', className].filter(Boolean).join(' ');
+
+  if (submitted) {
+    return (
+      <div className={containerClasses} ref={reviewRef}>
+        <div className="c-product-review__success">
+          <h3>Thank you for your review!</h3>
+          <p>Your feedback helps us improve our products.</p>
+          <Button
+            variant="secondary"
+            label="Write another review"
+            onClick={() => {
+              setSubmitted(false);
+              setRating(0);
+              setComment('');
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={containerClasses} ref={reviewRef}>
+      <div className="c-product-review__header">
+        <h3 className="c-product-review__title">Review {productName}</h3>
+        {productImage && (
+          <div className="c-product-review__image-wrapper">
+            <img src={productImage} alt={productName} className="c-product-review__image" />
+          </div>
+        )}
+      </div>
+
+      <form className="c-product-review__form" onSubmit={handleSubmit}>
+        <div className="c-product-review__rating-container">
+          <label className="c-product-review__label">Your Rating</label>
+          <div className="c-rating-container">
+            <Rating
+              value={rating}
+              onChange={setRating}
+              allowHalf={allowHalf}
+              maxValue={maxRating}
+              size="lg"
+              color={ratingColor}
+            />
+            <span className="c-rating__value">
+              {rating > 0 ? rating.toFixed(1) : 'Select a rating'}
+            </span>
+          </div>
+        </div>
+
+        <div className="c-product-review__comment-container">
+          <label htmlFor="review-comment" className="c-product-review__label">
+            Your Review
+          </label>
+          <textarea
+            id="review-comment"
+            className="c-product-review__textarea"
+            value={comment}
+            onChange={e => setComment(e.target.value)}
+            placeholder="Share your experience with this product..."
+            rows={5}
+          />
+        </div>
+
+        <div className="c-product-review__actions">
+          <Button
+            variant="primary"
+            label="Submit Review"
+            disabled={rating === 0}
+            onClick={() => handleSubmit(new Event('click') as unknown as React.FormEvent)}
+          />
+        </div>
+      </form>
+    </div>
+  );
+};
+
+ProductReview.displayName = 'ProductReview';
+
+export default ProductReview;

package/src/components/ProductReview/index.ts

@@ -0,0 +1,3 @@
+export { ProductReview } from './ProductReview';
+export { default } from './ProductReview';
+export type { ProductReviewProps } from './ProductReview';

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

@@ -0,0 +1,3 @@
+import ProductReview from './componentInteractions';
+
+export default ProductReview;

package/src/components/ProductReview/scripts/componentInteractions.ts

@@ -0,0 +1,129 @@
+/**
+ * Class for handling ProductReview component interactions
+ */
+export default class ProductReview {
+  element: HTMLElement;
+  options: any;
+  ratingElement: HTMLElement | null;
+  textareaElement: HTMLElement | null;
+  submitButton: HTMLElement | null;
+  formElement: HTMLFormElement | null;
+  onSubmit: ((rating: number, comment: string) => void) | null;
+
+  /**
+   * Create a new ProductReview instance
+   * @param element - The product review container element
+   * @param options - Configuration options
+   */
+  constructor(element: HTMLElement, options: any = {}) {
+    this.element = element;
+    this.options = {
+      productName: '',
+      productImage: null,
+      initialRating: 0,
+      maxRating: 5,
+      allowHalf: true,
+      ratingColor: 'warning',
+      onSubmit: null,
+      ...options,
+    };
+
+    this.ratingElement = this.element.querySelector('.c-rating');
+    this.textareaElement = this.element.querySelector('.c-product-review__textarea');
+    this.submitButton = this.element.querySelector('.c-product-review__actions .c-btn');
+    this.formElement = this.element.querySelector('.c-product-review__form') as HTMLFormElement;
+    this.onSubmit = this.options.onSubmit;
+
+    this.init();
+  }
+
+  /**
+   * Initialize the product review component
+   */
+  init() {
+    if (this.formElement) {
+      this.formElement.addEventListener('submit', this.handleSubmit.bind(this));
+    }
+
+    // Add any additional initialization logic here
+    this.setupAccessibility();
+  }
+
+  /**
+   * Set up accessibility features
+   */
+  setupAccessibility() {
+    // Add ARIA attributes for better accessibility
+    if (this.ratingElement) {
+      this.ratingElement.setAttribute('role', 'radiogroup');
+      this.ratingElement.setAttribute('aria-label', 'Rating');
+
+      const stars = this.ratingElement.querySelectorAll('.c-rating__star');
+      stars.forEach((star, index) => {
+        star.setAttribute('role', 'radio');
+        star.setAttribute('aria-label', `${index + 1} star${index === 0 ? '' : 's'}`);
+      });
+    }
+
+    if (this.textareaElement) {
+      this.textareaElement.setAttribute('aria-required', 'false');
+    }
+  }
+
+  /**
+   * Handle form submission
+   * @param e - Submit event
+   */
+  handleSubmit(e: Event) {
+    e.preventDefault();
+
+    if (!this.ratingElement || !this.textareaElement) return;
+
+    const rating = parseFloat(this.ratingElement.getAttribute('data-value') || '0');
+    const comment = (this.textareaElement as HTMLTextAreaElement).value;
+
+    if (this.onSubmit && rating > 0) {
+      this.onSubmit(rating, comment);
+    }
+
+    // Show success state
+    this.showSuccessState();
+  }
+
+  /**
+   * Show the success state after submission
+   */
+  showSuccessState() {
+    // This will be handled by React state in the component
+    // But we could add additional logic here if needed
+  }
+
+  /**
+   * Reset the form
+   */
+  reset() {
+    if (this.ratingElement) {
+      this.ratingElement.setAttribute('data-value', '0');
+
+      const stars = this.ratingElement.querySelectorAll('.c-rating__star');
+      stars.forEach(star => {
+        star.classList.remove('c-rating__star--full', 'c-rating__star--half');
+      });
+    }
+
+    if (this.textareaElement) {
+      (this.textareaElement as HTMLTextAreaElement).value = '';
+    }
+  }
+
+  /**
+   * Clean up event listeners
+   */
+  destroy() {
+    if (this.formElement) {
+      this.formElement.removeEventListener('submit', this.handleSubmit.bind(this));
+    }
+
+    // Clean up any other event listeners
+  }
+}

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

@@ -0,0 +1,3 @@
+import ProductReview from './bundle';
+
+export default ProductReview;

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/Progress/scripts/bundle.ts

@@ -0,0 +1,17 @@
+import { Progress } from './index';
+import {
+  setProgressValue,
+  setProgressVariant,
+  setProgressSize,
+  createProgressElement,
+} from './componentInteractions';
+
+// Export for global use
+export default {
+  Progress,
+  setProgressValue,
+  setProgressVariant,
+  setProgressSize,
+  createProgressElement,
+  initializeAll: Progress.initializeAll,
+};

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

@@ -0,0 +1,101 @@
+import { PROGRESS } from '../../../lib/constants/components';
+
+/**
+ * Set progress value for an element
+ * @param element - Progress element
+ * @param value - Progress value (0-100)
+ */
+export function setProgressValue(element: HTMLElement, value: number): void {
+  // Clamp value between 0 and 100
+  const progressValue = Math.min(Math.max(value, 0), 100);
+
+  // Update the CSS variable
+  element.style.setProperty(PROGRESS.CSS_VARS.PERCENTAGE, `${progressValue}%`);
+
+  // Update ARIA attribute
+  element.setAttribute(PROGRESS.ATTRIBUTES.ARIA_VALUENOW, progressValue.toString());
+}
+
+/**
+ * Set progress variant
+ * @param element - Progress element
+ * @param variant - Color variant
+ */
+export function setProgressVariant(element: HTMLElement, variant: string): void {
+  // Remove existing variant classes
+  const classList = 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 progress size
+ * @param element - Progress element
+ * @param size - Size variant
+ */
+export function setProgressSize(element: HTMLElement, size: string): void {
+  // Remove existing size classes
+  const classList = 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}`);
+}
+
+/**
+ * Create a new progress element
+ * @param options - Progress options
+ * @returns HTMLElement - The created progress element
+ */
+export function createProgressElement(
+  options: {
+    value?: number;
+    variant?: string;
+    size?: 'sm' | 'md' | 'lg';
+    ariaLabel?: string;
+  } = {}
+): HTMLElement {
+  const {
+    value = 0,
+    variant = 'primary',
+    size = 'md',
+    ariaLabel = PROGRESS.DEFAULTS.ARIA_LABEL,
+  } = options;
+
+  // Create progress container
+  const progressElement = document.createElement('div');
+  progressElement.className = PROGRESS.CLASSES.BASE;
+  progressElement.classList.add(`${PROGRESS.CLASSES.BASE}--${variant}`);
+  progressElement.classList.add(`${PROGRESS.CLASSES.BASE}--${size}`);
+
+  // Set ARIA attributes
+  progressElement.setAttribute('role', 'progressbar');
+  progressElement.setAttribute(PROGRESS.ATTRIBUTES.ARIA_VALUEMIN, '0');
+  progressElement.setAttribute(PROGRESS.ATTRIBUTES.ARIA_VALUEMAX, '100');
+  progressElement.setAttribute(PROGRESS.ATTRIBUTES.ARIA_VALUENOW, value.toString());
+  progressElement.setAttribute(PROGRESS.ATTRIBUTES.ARIA_LABEL, ariaLabel);
+
+  // Set progress value
+  progressElement.style.setProperty(PROGRESS.CSS_VARS.PERCENTAGE, `${value}%`);
+
+  // Create progress bar
+  const progressBar = document.createElement('div');
+  progressBar.className = PROGRESS.CLASSES.BAR;
+
+  // Append bar to container
+  progressElement.appendChild(progressBar);
+
+  return progressElement;
+}