@shohojdhara/atomix 0.1.16 → 0.1.17

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

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

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

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

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

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

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

@@ -1,129 +0,0 @@
-/**
- * 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

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

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

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

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

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

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

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

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