@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/PhotoViewer/PhotoViewerImage.tsx

@@ -42,7 +42,7 @@ export interface PhotoViewerImageProps {
 
 /**
  * PhotoViewerImage component - displays the main image with zoom and pan capabilities
- * 
+ *
  * @param props - PhotoViewerImageProps
  * @returns JSX.Element
  */
@@ -68,7 +68,7 @@ export const PhotoViewerImage: React.FC<PhotoViewerImageProps> = ({
   const internalContainerRef = useRef<HTMLDivElement>(null);
   const effectiveContainerRef = containerRef || internalContainerRef;
   const [isMounted, setIsMounted] = useState(false);
-  
+
   // Track mounting state
   useEffect(() => {
     setIsMounted(true);
@@ -76,43 +76,45 @@ export const PhotoViewerImage: React.FC<PhotoViewerImageProps> = ({
   }, []);
 
   // Add double-click to zoom
-  const handleDoubleClick = (e: React.MouseEvent<HTMLDivElement | HTMLImageElement, MouseEvent>) => {
+  const handleDoubleClick = (
+    e: React.MouseEvent<HTMLDivElement | HTMLImageElement, MouseEvent>
+  ) => {
     if (isMounted && onDoubleClick) onDoubleClick(e);
   };
-  
+
   // Add non-passive event listeners to prevent page scrolling/zooming
   useEffect(() => {
     const container = effectiveContainerRef.current;
     if (!container) return undefined;
-    
+
     const handleWheelEvent = (e: WheelEvent) => {
       // Only call if mounted and handler exists
       if (isMounted && container && onWheel) {
         onWheel(e as unknown as React.WheelEvent<HTMLDivElement>);
       }
     };
-    
+
     const handleTouchStartEvent = (e: TouchEvent) => {
       // Only call if mounted and handler exists
       if (isMounted && container && onTouchStart) {
         onTouchStart(e as unknown as React.TouchEvent<HTMLDivElement>);
       }
     };
-    
+
     const handleTouchMoveEvent = (e: TouchEvent) => {
       // Only call if mounted and handler exists
       if (isMounted && container && onTouchMove) {
         onTouchMove(e as unknown as React.TouchEvent<HTMLDivElement>);
       }
     };
-    
+
     const handleTouchEndEvent = (e: TouchEvent) => {
       // Only call if mounted and handler exists
       if (isMounted && container && onTouchEnd) {
         onTouchEnd(e as unknown as React.TouchEvent<HTMLDivElement>);
       }
     };
-    
+
     // Only add event listeners if mounted
     if (isMounted) {
       container.addEventListener('wheel', handleWheelEvent, { passive: false });
@@ -120,7 +122,7 @@ export const PhotoViewerImage: React.FC<PhotoViewerImageProps> = ({
       container.addEventListener('touchmove', handleTouchMoveEvent, { passive: false });
       container.addEventListener('touchend', handleTouchEndEvent, { passive: false });
     }
-    
+
     // Clean up
     return () => {
       container.removeEventListener('wheel', handleWheelEvent);
@@ -129,7 +131,7 @@ export const PhotoViewerImage: React.FC<PhotoViewerImageProps> = ({
       container.removeEventListener('touchend', handleTouchEndEvent);
     };
   }, [isMounted, onWheel, onTouchStart, onTouchMove, onTouchEnd, effectiveContainerRef]);
-  
+
   return (
     <div
       ref={effectiveContainerRef}
@@ -152,20 +154,20 @@ export const PhotoViewerImage: React.FC<PhotoViewerImageProps> = ({
         className="c-photo-viewer__image"
         style={{
           transform: `scale(${zoomLevel}) translate(${dragPosition.x}px, ${dragPosition.y}px) rotate(${rotationAngle}deg)`,
-          transition: isDragging 
-            ? 'none' 
-            : isTransitioning 
-              ? 'opacity 0.15s ease-out' 
+          transition: isDragging
+            ? 'none'
+            : isTransitioning
+              ? 'opacity 0.15s ease-out'
               : 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
           transformOrigin: 'center center',
           willChange: isDragging ? 'transform' : 'auto',
           touchAction: 'none', // Prevent image-specific touch behaviors
         }}
         draggable={false}
-        onContextMenu={(e) => e.preventDefault()} // Prevent context menu on long press
+        onContextMenu={e => e.preventDefault()} // Prevent context menu on long press
       />
     </div>
   );
 };
 
-export default PhotoViewerImage;
+export default PhotoViewerImage;

package/src/components/PhotoViewer/PhotoViewerInfo.tsx

@@ -18,13 +18,13 @@ export interface PhotoViewerInfoProps {
 
 /**
  * PhotoViewerInfo component - displays image metadata and information
- * 
+ *
  * @param props - PhotoViewerInfoProps
  * @returns JSX.Element
  */
 export const PhotoViewerInfo: React.FC<PhotoViewerInfoProps> = ({ show, image, onClose }) => {
   if (!show || !image) return null;
-  
+
   return (
     <div className="c-photo-viewer__info-panel">
       <Button
@@ -39,13 +39,21 @@ export const PhotoViewerInfo: React.FC<PhotoViewerInfoProps> = ({ show, image, o
       />
       <div className="c-photo-viewer__info-content">
         {image.title && <h3 className="c-photo-viewer__info-title">{image.title}</h3>}
-        {image.description && <p className="c-photo-viewer__info-description">{image.description}</p>}
+        {image.description && (
+          <p className="c-photo-viewer__info-description">{image.description}</p>
+        )}
         {image.date && <p className="c-photo-viewer__info-meta">Date: {image.date}</p>}
         {image.author && <p className="c-photo-viewer__info-meta">By: {image.author}</p>}
         {image.tags && image.tags.length > 0 && (
           <div className="c-photo-viewer__info-tags">
             {image.tags.map((tag: string, index: number) => (
-              <Badge key={index} label={tag} variant="light" size="sm" className="c-photo-viewer__info-tag" />
+              <Badge
+                key={index}
+                label={tag}
+                variant="light"
+                size="sm"
+                className="c-photo-viewer__info-tag"
+              />
             ))}
           </div>
         )}
@@ -54,4 +62,4 @@ export const PhotoViewerInfo: React.FC<PhotoViewerInfoProps> = ({ show, image, o
   );
 };
 
-export default PhotoViewerInfo;
+export default PhotoViewerInfo;

package/src/components/PhotoViewer/PhotoViewerNavigation.tsx

@@ -24,7 +24,7 @@ export interface PhotoViewerNavigationProps {
 
 /**
  * PhotoViewerNavigation component - handles navigation between images
- * 
+ *
  * @param props - PhotoViewerNavigationProps
  * @returns JSX.Element
  */
@@ -40,17 +40,17 @@ export const PhotoViewerNavigation: React.FC<PhotoViewerNavigationProps> = ({
   // Add keyboard navigation
   useEffect(() => {
     if (!enableKeyboardNav) return undefined;
-    
+
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'ArrowLeft') onPrev();
       if (e.key === 'ArrowRight') onNext();
       if (e.key === 'Escape') onClose();
     };
-    
+
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [enableKeyboardNav, onPrev, onNext, onClose]);
-  
+
   return show ? (
     <>
       <Button
@@ -79,4 +79,4 @@ export const PhotoViewerNavigation: React.FC<PhotoViewerNavigationProps> = ({
   ) : null;
 };
 
-export default PhotoViewerNavigation;
+export default PhotoViewerNavigation;

package/src/components/PhotoViewer/PhotoViewerThumbnails.tsx

@@ -16,37 +16,38 @@ export interface PhotoViewerThumbnailsProps {
 
 /**
  * PhotoViewerThumbnails component - displays thumbnail navigation for images
- * 
+ *
  * @param props - PhotoViewerThumbnailsProps
  * @returns JSX.Element
  */
-export const PhotoViewerThumbnails: React.FC<PhotoViewerThumbnailsProps> = ({ 
-  images, 
-  currentIndex, 
-  goToImage 
-}) => images.length > 1 ? (
-  <div className="c-photo-viewer__thumbnails">
-    {images.map((image: ImageType, index: number) => {
-      const thumbnailSrc = image.thumbnail || image.src;
-      return (
-        <Button
-          key={index}
-          variant="light"
-          className={`c-photo-viewer__thumbnail ${index === currentIndex ? 'is-active' : ''}`}
-          onClick={() => goToImage(index)}
-          aria-label={`View image ${index + 1}`}
-          aria-current={index === currentIndex}
-        >
-          <img 
-            loading="lazy"
-            src={thumbnailSrc} 
-            alt={image.alt || `Thumbnail ${index + 1}`} 
-            className="c-photo-viewer__thumbnail-img" 
-          />
-        </Button>
-      );
-    })}
-  </div>
-) : null;
+export const PhotoViewerThumbnails: React.FC<PhotoViewerThumbnailsProps> = ({
+  images,
+  currentIndex,
+  goToImage,
+}) =>
+  images.length > 1 ? (
+    <div className="c-photo-viewer__thumbnails">
+      {images.map((image: ImageType, index: number) => {
+        const thumbnailSrc = image.thumbnail || image.src;
+        return (
+          <Button
+            key={index}
+            variant="light"
+            className={`c-photo-viewer__thumbnail ${index === currentIndex ? 'is-active' : ''}`}
+            onClick={() => goToImage(index)}
+            aria-label={`View image ${index + 1}`}
+            aria-current={index === currentIndex}
+          >
+            <img
+              loading="lazy"
+              src={thumbnailSrc}
+              alt={image.alt || `Thumbnail ${index + 1}`}
+              className="c-photo-viewer__thumbnail-img"
+            />
+          </Button>
+        );
+      })}
+    </div>
+  ) : null;
 
-export default PhotoViewerThumbnails;
+export default PhotoViewerThumbnails;

package/src/components/PhotoViewer/examples/ImageGallery.tsx

@@ -23,7 +23,7 @@ const galleryImages: GalleryImage[] = [
     description: 'Beautiful mountain landscape with a lake view',
     url: 'https://picsum.photos/id/10/800/600',
     width: 800,
-    height: 600
+    height: 600,
   },
   {
     id: 2,
@@ -31,7 +31,7 @@ const galleryImages: GalleryImage[] = [
     description: 'Stunning sunset over the ocean',
     url: 'https://picsum.photos/id/11/800/1000',
     width: 800,
-    height: 1000
+    height: 1000,
   },
   {
     id: 3,
@@ -39,7 +39,7 @@ const galleryImages: GalleryImage[] = [
     description: 'A serene path through a dense forest',
     url: 'https://picsum.photos/id/12/800/500',
     width: 800,
-    height: 500
+    height: 500,
   },
   {
     id: 4,
@@ -47,7 +47,7 @@ const galleryImages: GalleryImage[] = [
     description: 'Urban skyline with modern architecture',
     url: 'https://picsum.photos/id/13/800/800',
     width: 800,
-    height: 800
+    height: 800,
   },
   {
     id: 5,
@@ -55,7 +55,7 @@ const galleryImages: GalleryImage[] = [
     description: 'Colorful abstract painting with geometric shapes',
     url: 'https://picsum.photos/id/14/800/600',
     width: 800,
-    height: 600
+    height: 600,
   },
   {
     id: 6,
@@ -63,7 +63,7 @@ const galleryImages: GalleryImage[] = [
     description: 'Wild animals in their natural habitat',
     url: 'https://picsum.photos/id/15/800/1200',
     width: 800,
-    height: 1200
+    height: 1200,
   },
   {
     id: 7,
@@ -71,7 +71,7 @@ const galleryImages: GalleryImage[] = [
     description: 'Impressive architectural details of a historic building',
     url: 'https://picsum.photos/id/16/800/600',
     width: 800,
-    height: 600
+    height: 600,
   },
   {
     id: 8,
@@ -79,7 +79,7 @@ const galleryImages: GalleryImage[] = [
     description: 'Delicious culinary creation beautifully presented',
     url: 'https://picsum.photos/id/17/800/700',
     width: 800,
-    height: 700
+    height: 700,
   },
   {
     id: 9,
@@ -87,7 +87,7 @@ const galleryImages: GalleryImage[] = [
     description: 'Expressive portrait capturing human emotion',
     url: 'https://picsum.photos/id/18/800/1000',
     width: 800,
-    height: 1000
+    height: 1000,
   },
   {
     id: 10,
@@ -95,7 +95,7 @@ const galleryImages: GalleryImage[] = [
     description: 'Macro photography revealing intricate natural details',
     url: 'https://picsum.photos/id/19/800/600',
     width: 800,
-    height: 600
+    height: 600,
   },
   {
     id: 11,
@@ -103,7 +103,7 @@ const galleryImages: GalleryImage[] = [
     description: 'Iconic landmark from a popular travel destination',
     url: 'https://picsum.photos/id/20/800/900',
     width: 800,
-    height: 900
+    height: 900,
   },
   {
     id: 12,
@@ -111,63 +111,53 @@ const galleryImages: GalleryImage[] = [
     description: 'Clean, minimalist composition with simple elements',
     url: 'https://picsum.photos/id/21/800/600',
     width: 800,
-    height: 600
-  }
+    height: 600,
+  },
 ];
 
 export const ImageGallery: React.FC = () => {
   // State to track which images are selected for the PhotoViewer
   const [selectedImageIndex, setSelectedImageIndex] = useState(0);
   const [showPhotoViewer, setShowPhotoViewer] = useState(false);
-  
+
   // Create enhanced image objects for the PhotoViewer
   const enhancedImages = galleryImages.map(image => ({
     src: image.url,
     alt: image.title,
     title: image.title,
     description: image.description,
-    tags: [`${image.width}x${image.height}`]
+    tags: [`${image.width}x${image.height}`],
   }));
-  
+
   // Handle clicking on a gallery item
   const handleImageClick = (index: number) => {
     setSelectedImageIndex(index);
     setShowPhotoViewer(true);
   };
-  
+
   // Handle closing the PhotoViewer
   const handlePhotoViewerClose = () => {
     setShowPhotoViewer(false);
   };
-  
+
   // Create spy function for image change handler
   const handleImageChange = fn((index: number) => {
     setSelectedImageIndex(index);
   });
-  
+
   return (
     <div className="c-image-gallery">
       <h2 className="c-image-gallery__title">Image Gallery</h2>
       <p className="c-image-gallery__description">
-        Click on any image to view it in the PhotoViewer. Navigate through the gallery using the arrow buttons or thumbnails.
+        Click on any image to view it in the PhotoViewer. Navigate through the gallery using the
+        arrow buttons or thumbnails.
       </p>
-      
+
       {/* MasonryGrid for the image gallery */}
-      <MasonryGrid 
-        xs={1} 
-        sm={2} 
-        md={3} 
-        lg={4} 
-        gap={16}
-        animate={true}
-        imagesLoaded={true}
-      >
+      <MasonryGrid xs={1} sm={2} md={3} lg={4} gap={16} animate={true} imagesLoaded={true}>
         {galleryImages.map((image, index) => (
           <MasonryGridItem key={image.id}>
-            <div 
-              className="c-image-gallery__item"
-              onClick={() => handleImageClick(index)}
-            >
+            <div className="c-image-gallery__item" onClick={() => handleImageClick(index)}>
               <Card
                 image={image.url}
                 imageAlt={image.title}
@@ -179,10 +169,10 @@ export const ImageGallery: React.FC = () => {
           </MasonryGridItem>
         ))}
       </MasonryGrid>
-      
+
       {/* PhotoViewer component */}
       {showPhotoViewer && (
-        <PhotoViewer 
+        <PhotoViewer
           images={enhancedImages}
           startIndex={selectedImageIndex}
           onClose={handlePhotoViewerClose}
@@ -197,4 +187,4 @@ export const ImageGallery: React.FC = () => {
   );
 };
 
-export default ImageGallery;
+export default ImageGallery;

package/src/components/PhotoViewer/examples/SimpleGallery.tsx

@@ -12,46 +12,52 @@ const images = [
 export const SimpleGallery: React.FC = () => {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [showViewer, setShowViewer] = useState(false);
-  
+
   const handleOpen = (index: number) => {
     setSelectedIndex(index);
     setShowViewer(true);
   };
-  
+
   const handleClose = () => {
     setShowViewer(false);
   };
-  
+
   // Create spy functions for event handlers
   const handleImageChange = fn((index: number) => {
     setSelectedIndex(index);
   });
-  
+
   return (
     <div style={{ padding: '20px' }}>
       <h2 style={{ marginBottom: '20px' }}>Simple Gallery Example</h2>
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '16px' }}>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+          gap: '16px',
+        }}
+      >
         {images.map((src, index) => (
-          <div 
+          <div
             key={index}
             onClick={() => handleOpen(index)}
-            style={{ 
+            style={{
               cursor: 'pointer',
               borderRadius: '8px',
               overflow: 'hidden',
               boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
-              transition: 'transform 0.3s ease'
+              transition: 'transform 0.3s ease',
             }}
           >
-            <img 
-              src={src} 
-              alt={`Gallery image ${index + 1}`} 
+            <img
+              src={src}
+              alt={`Gallery image ${index + 1}`}
               style={{ width: '100%', height: 'auto', display: 'block' }}
             />
           </div>
         ))}
       </div>
-      
+
       {showViewer && (
         <PhotoViewer
           images={images}
@@ -68,4 +74,4 @@ export const SimpleGallery: React.FC = () => {
   );
 };
 
-export default SimpleGallery;
+export default SimpleGallery;

package/src/components/PhotoViewer/examples/index.ts

@@ -1,2 +1,2 @@
 export { ImageGallery } from './ImageGallery';
-export type { GalleryImage } from './ImageGallery';
+export type { GalleryImage } from './ImageGallery';

package/src/components/PhotoViewer/index.ts

@@ -11,4 +11,4 @@ export type { PhotoViewerHeaderProps } from './PhotoViewerHeader';
 export type { PhotoViewerNavigationProps } from './PhotoViewerNavigation';
 export type { PhotoViewerImageProps } from './PhotoViewerImage';
 export type { PhotoViewerThumbnailsProps } from './PhotoViewerThumbnails';
-export type { PhotoViewerInfoProps } from './PhotoViewerInfo';
+export type { PhotoViewerInfoProps } from './PhotoViewerInfo';