@shohojdhara/atomix 0.1.16 → 0.1.18

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

@@ -18,17 +18,19 @@ export default {
     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'] 
-      } 
+    ratingColor: {
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'light', 'dark'],
+      },
     },
-    onSubmit: { action: 'submitted' }
-  }
+    onSubmit: { action: 'submitted' },
+  },
 } as Meta<typeof ProductReview>;
 
-const Template: StoryFn<ProductReviewProps> = (args: ProductReviewProps) => <ProductReview {...args} />;
+const Template: StoryFn<ProductReviewProps> = (args: ProductReviewProps) => (
+  <ProductReview {...args} />
+);
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/ProductReview/ProductReview.tsx

@@ -8,37 +8,37 @@ 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
    */
@@ -63,11 +63,11 @@ export const ProductReview: React.FC<ProductReviewProps> = ({
   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) {
@@ -75,27 +75,27 @@ export const ProductReview: React.FC<ProductReviewProps> = ({
       }
     };
   }, [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" 
+          <Button
+            variant="secondary"
             label="Write another review"
             onClick={() => {
               setSubmitted(false);
@@ -107,29 +107,25 @@ export const ProductReview: React.FC<ProductReviewProps> = ({
       </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" 
-            />
+            <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} 
+            <Rating
+              value={rating}
+              onChange={setRating}
               allowHalf={allowHalf}
               maxValue={maxRating}
               size="lg"
@@ -140,7 +136,7 @@ export const ProductReview: React.FC<ProductReviewProps> = ({
             </span>
           </div>
         </div>
-        
+
         <div className="c-product-review__comment-container">
           <label htmlFor="review-comment" className="c-product-review__label">
             Your Review
@@ -149,15 +145,15 @@ export const ProductReview: React.FC<ProductReviewProps> = ({
             id="review-comment"
             className="c-product-review__textarea"
             value={comment}
-            onChange={(e) => setComment(e.target.value)}
+            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" 
+          <Button
+            variant="primary"
             label="Submit Review"
             disabled={rating === 0}
             onClick={() => handleSubmit(new Event('click') as unknown as React.FormEvent)}
@@ -170,4 +166,4 @@ export const ProductReview: React.FC<ProductReviewProps> = ({
 
 ProductReview.displayName = 'ProductReview';
 
-export default ProductReview;
+export default ProductReview;

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

@@ -9,7 +9,7 @@ export default class ProductReview {
   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
@@ -25,18 +25,18 @@ export default class ProductReview {
       allowHalf: true,
       ratingColor: 'warning',
       onSubmit: null,
-      ...options
+      ...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
    */
@@ -44,11 +44,11 @@ export default class ProductReview {
     if (this.formElement) {
       this.formElement.addEventListener('submit', this.handleSubmit.bind(this));
     }
-    
+
     // Add any additional initialization logic here
     this.setupAccessibility();
   }
-  
+
   /**
    * Set up accessibility features
    */
@@ -57,39 +57,39 @@ export default class ProductReview {
     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
    */
@@ -97,25 +97,25 @@ export default class ProductReview {
     // 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
    */
@@ -123,7 +123,7 @@ export default class ProductReview {
     if (this.formElement) {
       this.formElement.removeEventListener('submit', this.handleSubmit.bind(this));
     }
-    
+
     // Clean up any other event listeners
   }
 }

package/src/components/Progress/Progress.tsx

@@ -3,41 +3,43 @@ 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
-  });
+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>
-  );
-});
+    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 type { ProgressProps };
 
 export default Progress;

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

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

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

@@ -8,10 +8,10 @@ import { PROGRESS } from '../../../lib/constants/components';
 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());
 }
@@ -25,12 +25,15 @@ 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'))
+    .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}`);
 }
@@ -43,9 +46,10 @@ export function setProgressVariant(element: HTMLElement, variant: string): void
 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));
-  
+  [PROGRESS.CLASSES.SM, PROGRESS.CLASSES.MD, PROGRESS.CLASSES.LG].forEach(className =>
+    classList.remove(className)
+  );
+
   // Add new size class
   classList.add(`${PROGRESS.CLASSES.BASE}--${size}`);
 }
@@ -55,41 +59,43 @@ export function setProgressSize(element: HTMLElement, size: string): void {
  * @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 {
+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
+    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;
 }