@shohojdhara/atomix 0.1.13 → 0.1.15

package/src/components/PhotoViewer/PhotoViewerImage.tsx

@@ -83,7 +83,7 @@ export const PhotoViewerImage: React.FC<PhotoViewerImageProps> = ({
   // Add non-passive event listeners to prevent page scrolling/zooming
   useEffect(() => {
     const container = effectiveContainerRef.current;
-    if (!container) return;
+    if (!container) return undefined;
     
     const handleWheelEvent = (e: WheelEvent) => {
       // Only call if mounted and handler exists

package/src/components/PhotoViewer/PhotoViewerNavigation.tsx

@@ -39,7 +39,7 @@ export const PhotoViewerNavigation: React.FC<PhotoViewerNavigationProps> = ({
 }) => {
   // Add keyboard navigation
   useEffect(() => {
-    if (!enableKeyboardNav) return;
+    if (!enableKeyboardNav) return undefined;
     
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'ArrowLeft') onPrev();

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

@@ -12,19 +12,12 @@ import {
   updateInstance
 } from './PhotoViewerInteractions';
 
-// Global namespace for PhotoViewer
-declare global {
-  interface Window {
-    Atomix: Record<string, any>;
-  }
-}
-
 if (typeof window !== 'undefined') {
   // Initialize the Atomix global object if it doesn't exist
-  (window as any).Atomix = (window as any).Atomix || {};
+  window.Atomix = window.Atomix || {};
   
   // Add PhotoViewer to the global Atomix object with comprehensive API
-  (window as any).Atomix.PhotoViewer = {
+  window.Atomix.PhotoViewer = {
     // Core class
     create: PhotoViewer,
     

package/src/components/Popover/Popover.tsx

@@ -1,11 +1,11 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef, createContext } from 'react';
 import { createPortal } from 'react-dom';
 import { POPOVER } from '../../lib/constants/components';
 import { usePopover } from '../../lib/composables/usePopover';
 import type { PopoverProps, PopoverTriggerProps } from '../../lib/types/components';
 
 // Context to share popover state between components
-const PopoverContext = React.createContext<{
+export const PopoverContext = createContext<{
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
   triggerRef: React.RefObject<HTMLElement>;
@@ -22,7 +22,7 @@ const PopoverContext = React.createContext<{
 /**
  * Popover component for displaying floating content
  */
- const Popover: React.FC<PopoverProps> = ({
+export const Popover: React.FC<PopoverProps> = ({
   content,
   position = 'top',
   trigger = 'click',
@@ -89,10 +89,10 @@ const PopoverContext = React.createContext<{
 /**
  * PopoverTrigger component to wrap the element that triggers the popover
  */
-export const PopoverTrigger: React.FC<PopoverTriggerProps> = ({
+export const PopoverTrigger: React.FC<PopoverTriggerProps> = forwardRef<HTMLElement, PopoverTriggerProps>(({
   children,
   trigger: triggerProp,
-}) => {
+}, ref) => {
   const { isOpen, setIsOpen, triggerRef, popoverId, triggerType } = React.useContext(PopoverContext);
   
   // Determine which trigger type to use - prop from PopoverTrigger or from context
@@ -115,7 +115,7 @@ export const PopoverTrigger: React.FC<PopoverTriggerProps> = ({
   const child = React.Children.only(children) as React.ReactElement;
   
   const triggerProps: any = {
-    ref: triggerRef,
+    ref: ref || triggerRef,
     'aria-describedby': popoverId,
     'aria-expanded': isOpen,
   };
@@ -128,15 +128,10 @@ export const PopoverTrigger: React.FC<PopoverTriggerProps> = ({
   }
   
   return React.cloneElement(child, triggerProps);
-}; 
+}); 
 
 export type { PopoverProps, PopoverTriggerProps };
 
-// Set display name for debugging
 Popover.displayName = 'Popover';
 
-// Default export (primary)
-export default Popover;
-
-// Named export for compatibility
-export { Popover };
+export default Popover;

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

@@ -309,7 +309,12 @@ const initPopovers = (): void => {
     const delay = parseInt(popover.getAttribute('data-popover-delay') || String(POPOVER.DEFAULTS.DELAY), 10);
     
     // Initialize popover
-    new Popover(popover, { position, trigger, offset, delay });
+    new Popover(popover, { 
+      position: position as PopoverPosition | 'auto',
+      trigger: trigger as 'hover' | 'click',
+      offset, 
+      delay 
+    });
   });
 };
 

package/src/components/ProductReview/ProductReview.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Rating } from '../Rating';
-import { Button } from '../Button';
+import { Rating } from '../Rating/Rating';
+import { Button } from '../Button/Button';
 import type { ThemeColor } from '../../lib/types/components';
 
-interface ProductReviewProps {
+export interface ProductReviewProps {
   /**
    * Product name
    */
@@ -48,7 +48,7 @@ interface ProductReviewProps {
 /**
  * ProductReview component for collecting user ratings and feedback
  */
-const ProductReview: React.FC<ProductReviewProps> = ({
+export const ProductReview: React.FC<ProductReviewProps> = ({
   productName,
   productImage,
   initialRating = 0,
@@ -66,24 +66,7 @@ const ProductReview: React.FC<ProductReviewProps> = ({
   
   useEffect(() => {
     // Only run on client-side
-    if (typeof window === 'undefined' || !reviewRef.current) return;
-
-    // Dynamically import the product review script to avoid server-side rendering issues
-    import('./scripts/bundle').then(({ default: ProductReviewClass }) => {
-      if (reviewRef.current) {
-        reviewInstance.current = new ProductReviewClass(reviewRef.current, {
-          productName,
-          productImage,
-          initialRating,
-          maxRating,
-          allowHalf,
-          ratingColor,
-          onSubmit
-        });
-      }
-    }).catch(err => {
-      console.warn('Failed to load ProductReview script:', err);
-    });
+    if (typeof window === 'undefined' || !reviewRef.current) return undefined;
     
     // Cleanup on unmount
     return () => {
@@ -185,13 +168,6 @@ const ProductReview: React.FC<ProductReviewProps> = ({
   );
 };
 
-export type { ProductReviewProps  };
-
-// Set display name for debugging
 ProductReview.displayName = 'ProductReview';
 
-// Default export (primary)
-export default ProductReview;
-
-// Named export for compatibility
-export { ProductReview };
+export default ProductReview;

package/src/components/Progress/Progress.tsx

@@ -3,7 +3,7 @@ import { ProgressProps } from '../../lib/types/components';
 import { useProgress } from '../../lib/composables/useProgress';
 import { PROGRESS } from '../../lib/constants/components';
 
-const Progress = forwardRef<HTMLDivElement, ProgressProps>((
+export const Progress = forwardRef<HTMLDivElement, ProgressProps>((
   {
     value,
     variant = 'primary',
@@ -40,11 +40,4 @@ const Progress = forwardRef<HTMLDivElement, ProgressProps>((
 
 export type { ProgressProps  };
 
-// Set display name for debugging
-Progress.displayName = 'Progress';
-
-// Default export (primary)
 export default Progress;
-
-// Named export for compatibility
-export { Progress };

package/src/components/Rating/Rating.tsx

@@ -19,7 +19,7 @@ import useForkRef from '../../lib/utils/useForkRef';
  * // With half-star support
  * <Rating value={3.5} allowHalf maxValue={5} />
  */
-const Rating = forwardRef<HTMLDivElement, RatingProps>(({
+export const Rating = forwardRef<HTMLDivElement, RatingProps>(({
   value: valueProp = 0,
   defaultValue,
   maxValue = 5,
@@ -113,22 +113,7 @@ const Rating = forwardRef<HTMLDivElement, RatingProps>(({
   
   // Use vanilla JS implementation if specified
   useEffect(() => {
-    if (!useVanillaJS || typeof window === 'undefined' || !internalRef.current) return;
-
-    // Dynamically import the rating script to avoid server-side rendering issues
-    import('./scripts/bundle').then(({ default: RatingClass }) => {
-      if (internalRef.current) {
-        ratingInstance.current = new RatingClass(internalRef.current, {
-          value: valueProp !== undefined ? valueProp : defaultValue,
-          maxValue,
-          allowHalf,
-          readOnly,
-          size,
-          color,
-          onChange
-        });
-      }
-    });
+    if (!useVanillaJS || typeof window === 'undefined' || !internalRef.current) return undefined;
     
     // Cleanup on unmount
     return () => {
@@ -140,7 +125,7 @@ const Rating = forwardRef<HTMLDivElement, RatingProps>(({
   
   // Update vanilla JS implementation when props change
   useEffect(() => {
-    if (!useVanillaJS || !ratingInstance.current) return;
+    if (!useVanillaJS || !ratingInstance.current) return undefined;
     
     ratingInstance.current.updateOptions({
       value: valueProp !== undefined ? valueProp : defaultValue,
@@ -279,11 +264,4 @@ Rating.displayName = 'Rating';
 
 export type { RatingProps  };
 
-// Set display name for debugging
-Rating.displayName = 'Rating';
-
-// Default export (primary)
 export default Rating;
-
-// Named export for compatibility
-export { Rating };

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

@@ -1,5 +1,5 @@
 import Rating from './index';
-import type { RatingOptions } from './index';
+// RatingOptions is used in other functions in this file
 
 /**
  * Event handlers and utility functions for Rating component
@@ -45,13 +45,13 @@ export function handleKeyboardNavigation(event: KeyboardEvent, container: HTMLEl
     case ' ':
     case 'Enter':
       event.preventDefault();
-      if (currentIndex >= 0) {
+      if (currentIndex >= 0 && stars[currentIndex]) {
         stars[currentIndex].click();
       }
       break;
   }
   
-  if (nextIndex >= 0) {
+  if (nextIndex >= 0 && stars[nextIndex]) {
     stars[nextIndex].focus();
   }
 }

package/src/components/River/River.tsx

@@ -1,11 +1,11 @@
-import React, { useRef, useEffect, ReactNode } from 'react';
+import React, { useRef, useEffect } from 'react';
 import { RIVER } from '../../lib/constants/components';
-import { useRiver, RiverProps, RiverContentColumn } from '../../lib/composables/useRiver';
+import { useRiver, RiverProps } from '../../lib/composables/useRiver';
 
 /**
  * River component for displaying content with image sections
  */
-const River: React.FC<RiverProps> = ({
+export const River: React.FC<RiverProps> = ({
   title,
   text,
   actions,
@@ -45,7 +45,7 @@ const River: React.FC<RiverProps> = ({
   
   useEffect(() => {
     // Only run on client-side
-    if (typeof window === 'undefined' || !riverRef.current) return;
+    if (typeof window === 'undefined' || !riverRef.current) return undefined;
 
     // Dynamically import the river script to avoid server-side rendering issues
     import('./scripts').then(({ default: RiverClass }) => {
@@ -167,11 +167,6 @@ const River: React.FC<RiverProps> = ({
 
 export type { RiverProps  };
 
-// Set display name for debugging
 River.displayName = 'River';
 
-// Default export (primary)
 export default River;
-
-// Named export for compatibility
-export { River };

package/src/components/SectionIntro/SectionIntro.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, ReactNode } from 'react';
 import { SECTION_INTRO } from '../../lib/constants/components';
 
-interface SectionIntroProps {
+export interface SectionIntroProps {
   /**
    * The section title
    */
@@ -72,7 +72,7 @@ interface SectionIntroProps {
 /**
  * SectionIntro component for introducing content sections with titles, descriptions, and optional imagery
  */
-const SectionIntro: React.FC<SectionIntroProps> = ({
+export const SectionIntro: React.FC<SectionIntroProps> = ({
   title,
   label,
   text,
@@ -91,7 +91,7 @@ const SectionIntro: React.FC<SectionIntroProps> = ({
   
   useEffect(() => {
     // Only run on client-side
-    if (typeof window === 'undefined' || !sectionIntroRef.current) return;
+    if (typeof window === 'undefined' || !sectionIntroRef.current) return undefined;
 
     // Dynamically import the section intro script to avoid server-side rendering issues
     import('./scripts').then(({ default: SectionIntroClass }) => {
@@ -198,13 +198,6 @@ const SectionIntro: React.FC<SectionIntroProps> = ({
   );
 };
 
-export type { SectionIntroProps  };
-
-// Set display name for debugging
 SectionIntro.displayName = 'SectionIntro';
 
-// Default export (primary)
 export default SectionIntro;
-
-// Named export for compatibility
-export { SectionIntro };

package/src/components/Spinner/Spinner.tsx

@@ -3,7 +3,7 @@ import { SpinnerProps } from '../../lib/types/components';
 import { useSpinner } from '../../lib/composables/useSpinner';
 import { SPINNER } from '../../lib/constants/components';
 
-const Spinner: React.FC<SpinnerProps> = ({
+export const Spinner: React.FC<SpinnerProps> = ({
   size = 'md',
   variant = 'primary',
   fullscreen = false,
@@ -24,12 +24,8 @@ const Spinner: React.FC<SpinnerProps> = ({
   );
 };
 
-export type { SpinnerProps  };
+export type { SpinnerProps };
 
-// Set display name for debugging
 Spinner.displayName = 'Spinner';
 
-// Default export (primary)
 export default Spinner;
-
-export { Spinner };

package/src/components/Steps/Steps.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState, ReactNode } from 'react';
 import { STEPS } from '../../lib/constants/components';
 
-interface StepItem {
+export interface StepItem {
   /**
    * The number for the step
    */
@@ -18,7 +18,7 @@ interface StepItem {
   content?: React.ReactNode;
 }
 
-interface StepsProps {
+export interface StepsProps {
   /**
    * Array of step items
    */
@@ -48,7 +48,7 @@ interface StepsProps {
 /**
  * Steps component for displaying a sequence of steps
  */
- const Steps: React.FC<StepsProps> = ({
+export const Steps: React.FC<StepsProps> = ({
   items,
   activeIndex = 0,
   vertical = false,
@@ -61,7 +61,7 @@ interface StepsProps {
   
   useEffect(() => {
     // Only run on client-side
-    if (typeof window === 'undefined' || !stepsRef.current) return;
+    if (typeof window === 'undefined' || !stepsRef.current) return undefined;
 
     // Dynamically import the steps script to avoid server-side rendering issues
     import('./scripts').then(({ default: StepsClass }) => {
@@ -149,13 +149,6 @@ interface StepsProps {
   );
 };
 
-export type { StepsProps, StepItem };
-
-// Set display name for debugging
 Steps.displayName = 'Steps';
 
-// Default export (primary)
-export default Steps;
-
-// Named export for compatibility
-export { Steps };
+export default Steps;

package/src/components/Tab/Tab.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState, ReactNode } from 'react';
 import { TAB } from '../../lib/constants/components';
 
-interface TabItemProps {
+export interface TabItemProps {
   /**
    * Label for the tab
    */
@@ -23,7 +23,7 @@ interface TabItemProps {
   className?: string;
 }
 
-interface TabProps {
+export interface TabProps {
   /**
    * Array of tab items
    */
@@ -48,7 +48,7 @@ interface TabProps {
 /**
  * Tab component for switching between different content panels
  */
-const Tab: React.FC<TabProps> = ({
+export const Tab: React.FC<TabProps> = ({
   items,
   activeIndex = TAB.DEFAULTS.ACTIVE_INDEX,
   onTabChange,
@@ -61,7 +61,7 @@ const Tab: React.FC<TabProps> = ({
   // Handle tab instance initialization and cleanup
   useEffect(() => {
     // Only run on client-side
-    if (typeof window === 'undefined' || !tabRef.current) return;
+    if (typeof window === 'undefined' || !tabRef.current) return undefined;
 
     // Dynamically import the tab script to avoid server-side rendering issues
     import('./scripts').then(({ default: TabClass }) => {
@@ -130,12 +130,6 @@ const Tab: React.FC<TabProps> = ({
   );
 }; 
 
-export type { TabProps, TabItemProps };
-
-// Set display name for debugging
 Tab.displayName = 'Tab';
 
-// Default export (primary)
 export default Tab;
-
-export { Tab };

package/src/components/Testimonial/Testimonial.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, ReactNode } from 'react';
 import { TESTIMONIAL } from '../../lib/constants/components';
 
-interface TestimonialAuthor {
+export interface TestimonialAuthor {
   /**
    * The author's name
    */
@@ -23,7 +23,7 @@ interface TestimonialAuthor {
   avatarAlt?: string;
 }
 
-interface TestimonialProps {
+export interface TestimonialProps {
   /**
    * The testimonial quote text or content
    */
@@ -53,7 +53,7 @@ interface TestimonialProps {
 /**
  * Testimonial component for displaying customer quotes and feedback
  */
-const Testimonial: React.FC<TestimonialProps> = ({
+export const Testimonial: React.FC<TestimonialProps> = ({
   quote,
   author,
   size = '',
@@ -65,7 +65,7 @@ const Testimonial: React.FC<TestimonialProps> = ({
   
   useEffect(() => {
     // Only run on client-side
-    if (typeof window === 'undefined' || !testimonialRef.current) return;
+    if (typeof window === 'undefined' || !testimonialRef.current) return undefined;
 
     // Dynamically import the testimonial script to avoid server-side rendering issues
     import('./scripts').then(({ default: TestimonialClass }) => {
@@ -143,13 +143,7 @@ const Testimonial: React.FC<TestimonialProps> = ({
   );
 };
 
-export type { TestimonialProps, TestimonialAuthor };
 
-// Set display name for debugging
 Testimonial.displayName = 'Testimonial';
 
-// Default export (primary)
 export default Testimonial;
-
-// Named export for compatibility
-export { Testimonial };