@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/components/PhotoViewer/PhotoViewer.tsx

@@ -0,0 +1,246 @@
+import React, { useMemo, useEffect } from 'react';
+import { PhotoViewerProps, ImageType } from '../../lib/types/components';
+import { usePhotoViewer } from '../../lib/composables/usePhotoViewer';
+import { PhotoViewerHeader } from './PhotoViewerHeader';
+import { PhotoViewerNavigation } from './PhotoViewerNavigation';
+import { PhotoViewerImage } from './PhotoViewerImage';
+import { PhotoViewerThumbnails } from './PhotoViewerThumbnails';
+import { PhotoViewerInfo } from './PhotoViewerInfo';
+
+/**
+ * PhotoViewer component - A comprehensive image viewer with zoom, pan, navigation, and metadata display
+ *
+ * Features:
+ * - Image navigation with keyboard support
+ * - Zoom and pan functionality
+ * - Touch gestures for mobile devices
+ * - Fullscreen mode
+ * - Image rotation
+ * - Download and share capabilities
+ * - Thumbnail navigation
+ * - Image metadata display
+ * - Responsive design
+ *
+ * @param props - PhotoViewerProps
+ * @returns JSX.Element
+ */
+export const PhotoViewer: React.FC<PhotoViewerProps> = ({
+  images,
+  startIndex = 0,
+  className = '',
+  disabled = false,
+  enableKeyboardNavigation = true,
+  enableGestures = true,
+  enableFullscreen = true,
+  thumbnailPosition = 'bottom',
+  onImageChange,
+  onClose,
+}) => {
+  // Use the external composable hook with enhanced features
+  const {
+    currentIndex,
+    zoomLevel,
+    imagePosition: dragPosition,
+    isDragging,
+    isFullscreen,
+    rotationAngle,
+    showInfo,
+    imageRef,
+    containerRef,
+    isTransitioning,
+    setZoomLevel,
+    setImagePosition: setDragPosition,
+    setIsDragging,
+    setIsFullscreen,
+    setRotationAngle,
+    setShowInfo,
+    closeModal,
+    goToPrevious,
+    goToNext,
+    setCurrentIndex: goToImage,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    handleWheel,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
+    handleDoubleClick,
+    resetImageState,
+  } = usePhotoViewer({
+    images,
+    startIndex,
+    enableGestures,
+    onImageChange,
+    onClose: onClose || (() => {}),
+  });
+
+  // Process images to handle both string arrays and object arrays, ensuring ImageType structure
+  const processedImages: ImageType[] = useMemo(() => {
+    return images.map(img => (typeof img === 'string' ? { src: img } : img));
+  }, [images]);
+
+  // Current image object
+  const currentImage: ImageType | undefined = processedImages[currentIndex];
+
+  // Handle fullscreen toggle with bounds update
+  const handleToggleFullscreen = () => {
+    if (!enableFullscreen) return;
+
+    if (!isFullscreen) {
+      const element = document.documentElement;
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      }
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      }
+    }
+    setIsFullscreen(!isFullscreen);
+  };
+
+  // Handle image rotation with bounds update
+  const handleRotate = () => {
+    setRotationAngle((angle: number) => (angle + 90) % 360);
+  };
+
+  // Handle image download
+  const handleDownload = () => {
+    if (!currentImage?.src) return;
+
+    const link = document.createElement('a');
+    link.href = currentImage.src;
+    link.download = currentImage.title || `image-${currentIndex + 1}`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  // Handle image sharing
+  const handleShare = async () => {
+    if (!navigator.share || !currentImage?.src) return;
+
+    try {
+      await navigator.share({
+        title: currentImage.title || 'Shared Image',
+        text: currentImage.description || 'Check out this image',
+        url: currentImage.src,
+      });
+    } catch (error) {
+      console.error('Error sharing:', error);
+    }
+  };
+
+  // Memoize class names
+  const photoViewerClasses = useMemo(
+    () =>
+      [
+        'c-photo-viewer',
+        `c-photo-viewer--thumbnails-${thumbnailPosition}`,
+        isDragging ? 'c-photo-viewer--dragging' : '',
+        isFullscreen ? 'c-photo-viewer--fullscreen' : '',
+        showInfo ? 'c-photo-viewer--info-open' : '',
+        disabled ? 'is-disabled' : '',
+        className,
+      ]
+        .filter(Boolean)
+        .join(' '),
+    [isDragging, isFullscreen, showInfo, disabled, thumbnailPosition, className]
+  );
+
+  // Listen for fullscreen changes
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return () => document.removeEventListener('fullscreenchange', handleFullscreenChange);
+  }, [setIsFullscreen]);
+
+  // Add/remove is-open-photoviewer class on body
+  useEffect(() => {
+    document.body.classList.add('is-open-photoviewer');
+
+    return () => {
+      document.body.classList.remove('is-open-photoviewer');
+    };
+  }, []);
+
+  // Early return for empty images array
+  if (!images.length) return null;
+
+  return (
+    <div className={photoViewerClasses} role="dialog" aria-modal="true" aria-label="Photo viewer">
+      <div className="c-photo-viewer__backdrop" onClick={closeModal} />
+      <div className="c-photo-viewer__container">
+        <PhotoViewerHeader
+          currentIndex={currentIndex}
+          imagesLength={images.length}
+          onZoomOut={() => setZoomLevel((z: number) => Math.max(z - 0.25, 0.1))}
+          onResetZoom={() => {
+            resetImageState();
+          }}
+          onZoomIn={() => setZoomLevel((z: number) => Math.min(z + 0.25, 5))}
+          onToggleFullscreen={handleToggleFullscreen}
+          onClose={onClose || closeModal}
+          isFullscreen={isFullscreen}
+          zoomLevel={zoomLevel}
+          onRotate={handleRotate}
+          onDownload={handleDownload}
+          onShare={handleShare}
+          showInfo={showInfo}
+          onToggleInfo={() => setShowInfo(!showInfo)}
+          currentImage={currentImage}
+        />
+        <div className="c-photo-viewer__content">
+          <PhotoViewerNavigation
+            show={images.length > 1}
+            onPrev={goToPrevious}
+            onNext={goToNext}
+            currentIndex={currentIndex}
+            imagesLength={images.length}
+            enableKeyboardNav={enableKeyboardNavigation}
+            onClose={onClose || closeModal}
+          />
+          {currentImage?.src && (
+            <PhotoViewerImage
+              imageRef={imageRef}
+              containerRef={containerRef}
+              src={currentImage.src}
+              alt={currentImage?.alt || `Image ${currentIndex + 1}`}
+              zoomLevel={zoomLevel}
+              dragPosition={dragPosition}
+              isDragging={isDragging}
+              rotationAngle={rotationAngle}
+              isTransitioning={isTransitioning}
+              onMouseDown={handleMouseDown}
+              onMouseMove={handleMouseMove}
+              onMouseUp={handleMouseUp}
+              onWheel={handleWheel}
+              onTouchStart={handleTouchStart}
+              onTouchMove={handleTouchMove}
+              onTouchEnd={handleTouchEnd}
+              onDoubleClick={handleDoubleClick}
+            />
+          )}
+        </div>
+        {thumbnailPosition !== 'none' && (
+          <PhotoViewerThumbnails
+            images={processedImages}
+            currentIndex={currentIndex}
+            goToImage={goToImage}
+          />
+        )}
+        <PhotoViewerInfo show={showInfo} image={currentImage} onClose={() => setShowInfo(false)} />
+      </div>
+    </div>
+  );
+};
+
+export type { PhotoViewerProps };
+
+PhotoViewer.displayName = 'PhotoViewer';
+
+export default PhotoViewer;

package/src/components/PhotoViewer/PhotoViewerHeader.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+import { ImageType } from '../../lib/types/components';
+import { Button } from '../Button/Button';
+import { Badge } from '../Badge/Badge';
+import { Icon } from '../Icon/Icon';
+
+/**
+ * Props for the PhotoViewerHeader component
+ */
+export interface PhotoViewerHeaderProps {
+  /** Current image index */
+  currentIndex: number;
+  /** Total number of images */
+  imagesLength: number;
+  /** Callback to zoom out */
+  onZoomOut: () => void;
+  /** Callback to reset zoom */
+  onResetZoom: () => void;
+  /** Callback to zoom in */
+  onZoomIn: () => void;
+  /** Callback to toggle fullscreen */
+  onToggleFullscreen: () => void;
+  /** Callback to close the viewer */
+  onClose: () => void;
+  /** Whether fullscreen is active */
+  isFullscreen: boolean;
+  /** Current zoom level */
+  zoomLevel: number;
+  /** Callback to rotate image */
+  onRotate: () => void;
+  /** Callback to download image */
+  onDownload: () => void;
+  /** Callback to share image */
+  onShare: () => void;
+  /** Whether info panel is shown */
+  showInfo: boolean;
+  /** Callback to toggle info panel */
+  onToggleInfo: () => void;
+  /** Current image object */
+  currentImage?: ImageType;
+}
+
+/**
+ * PhotoViewerHeader component - displays controls and counter for the photo viewer
+ *
+ * @param props - PhotoViewerHeaderProps
+ * @returns JSX.Element
+ */
+export const PhotoViewerHeader: React.FC<PhotoViewerHeaderProps> = ({
+  currentIndex,
+  imagesLength,
+  onZoomOut,
+  onResetZoom,
+  onZoomIn,
+  onToggleFullscreen,
+  onClose,
+  isFullscreen,
+  zoomLevel,
+  onRotate,
+  onDownload,
+  onShare,
+  showInfo,
+  onToggleInfo,
+  currentImage,
+}) => (
+  <div className="c-photo-viewer__header">
+    <Badge
+      label={`${currentIndex + 1} / ${imagesLength}`}
+      variant="light"
+      size="sm"
+      className="c-photo-viewer__counter-badge"
+    />
+    <div className="c-photo-viewer__actions">
+      <Button
+        iconOnly
+        size="sm"
+        variant="light"
+        rounded
+        onClick={onZoomOut}
+        disabled={zoomLevel <= 0.1}
+        aria-label="Zoom out"
+        icon={<Icon name="Minus" size="sm" />}
+        className="c-photo-viewer__action-button"
+      />
+      <Button
+        iconOnly
+        size="sm"
+        variant="light"
+        rounded
+        onClick={onResetZoom}
+        disabled={zoomLevel === 1}
+        aria-label="Reset zoom"
+        icon={<Icon name="MagnifyingGlass" size="sm" />}
+        className="c-photo-viewer__action-button"
+      />
+      <Button
+        iconOnly
+        size="sm"
+        variant="light"
+        rounded
+        onClick={onZoomIn}
+        disabled={zoomLevel >= 5}
+        aria-label="Zoom in"
+        icon={<Icon name="Plus" size="sm" />}
+        className="c-photo-viewer__action-button"
+      />
+      <Button
+        iconOnly
+        size="sm"
+        variant="light"
+        rounded
+        onClick={onRotate}
+        aria-label="Rotate image"
+        icon={<Icon name="ArrowsClockwise" size="sm" />}
+        className="c-photo-viewer__action-button"
+      />
+      {currentImage?.src && (
+        <Button
+          iconOnly
+          size="sm"
+          variant="light"
+          rounded
+          onClick={onDownload}
+          aria-label="Download image"
+          icon={<Icon name="DownloadSimple" size="sm" />}
+          className="c-photo-viewer__action-button"
+        />
+      )}
+      {currentImage?.src && typeof navigator !== 'undefined' && 'share' in navigator && (
+        <Button
+          iconOnly
+          size="sm"
+          variant="light"
+          rounded
+          onClick={onShare}
+          aria-label="Share image"
+          icon={<Icon name="ShareNetwork" size="sm" />}
+          className="c-photo-viewer__action-button"
+        />
+      )}
+      <Button
+        iconOnly
+        size="sm"
+        variant="light"
+        rounded
+        onClick={onToggleInfo}
+        aria-label={showInfo ? 'Hide info' : 'Show info'}
+        icon={<Icon name="Info" size="sm" />}
+        className="c-photo-viewer__action-button"
+      />
+      <Button
+        iconOnly
+        size="sm"
+        variant="light"
+        rounded
+        onClick={onToggleFullscreen}
+        aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
+        icon={
+          isFullscreen ? <Icon name="ArrowsIn" size="sm" /> : <Icon name="ArrowsOut" size="sm" />
+        }
+        className="c-photo-viewer__action-button"
+      />
+      <Button
+        iconOnly
+        size="sm"
+        variant="light"
+        rounded
+        onClick={onClose}
+        aria-label="Close photo viewer"
+        icon={<Icon name="X" size="sm" />}
+        className="c-photo-viewer__action-button c-photo-viewer__close"
+      />
+    </div>
+  </div>
+);
+
+export default PhotoViewerHeader;

package/src/components/PhotoViewer/PhotoViewerImage.tsx

@@ -0,0 +1,173 @@
+import React, { useRef, useEffect, useState } from 'react';
+
+/**
+ * Props for the PhotoViewerImage component
+ */
+export interface PhotoViewerImageProps {
+  /** Ref to the image element */
+  imageRef: React.RefObject<HTMLImageElement>;
+  /** Ref to the container element */
+  containerRef?: React.RefObject<HTMLDivElement>;
+  /** Image source URL */
+  src: string;
+  /** Image alt text */
+  alt?: string;
+  /** Current zoom level */
+  zoomLevel: number;
+  /** Current drag position */
+  dragPosition: { x: number; y: number };
+  /** Whether image is being dragged */
+  isDragging: boolean;
+  /** Current rotation angle in degrees */
+  rotationAngle: number;
+  /** Whether image is transitioning */
+  isTransitioning?: boolean;
+  /** Mouse down event handler */
+  onMouseDown: (event: React.MouseEvent<HTMLDivElement | HTMLImageElement, MouseEvent>) => void;
+  /** Mouse move event handler */
+  onMouseMove: (event: React.MouseEvent<HTMLDivElement | HTMLImageElement, MouseEvent>) => void;
+  /** Mouse up event handler */
+  onMouseUp: (event: React.MouseEvent<HTMLDivElement | HTMLImageElement, MouseEvent>) => void;
+  /** Wheel event handler for zoom */
+  onWheel: (event: React.WheelEvent<HTMLDivElement>) => void;
+  /** Touch start event handler */
+  onTouchStart: (event: React.TouchEvent<HTMLDivElement | HTMLImageElement>) => void;
+  /** Touch move event handler */
+  onTouchMove: (event: React.TouchEvent<HTMLDivElement | HTMLImageElement>) => void;
+  /** Touch end event handler */
+  onTouchEnd: (event: React.TouchEvent<HTMLDivElement | HTMLImageElement>) => void;
+  /** Double click event handler */
+  onDoubleClick?: (event: React.MouseEvent<HTMLDivElement | HTMLImageElement, MouseEvent>) => void;
+}
+
+/**
+ * PhotoViewerImage component - displays the main image with zoom and pan capabilities
+ *
+ * @param props - PhotoViewerImageProps
+ * @returns JSX.Element
+ */
+export const PhotoViewerImage: React.FC<PhotoViewerImageProps> = ({
+  imageRef,
+  containerRef,
+  src,
+  alt,
+  zoomLevel,
+  dragPosition,
+  isDragging,
+  rotationAngle,
+  isTransitioning = false,
+  onMouseDown,
+  onMouseMove,
+  onMouseUp,
+  onWheel,
+  onTouchStart,
+  onTouchMove,
+  onTouchEnd,
+  onDoubleClick,
+}) => {
+  const internalContainerRef = useRef<HTMLDivElement>(null);
+  const effectiveContainerRef = containerRef || internalContainerRef;
+  const [isMounted, setIsMounted] = useState(false);
+
+  // Track mounting state
+  useEffect(() => {
+    setIsMounted(true);
+    return () => setIsMounted(false);
+  }, []);
+
+  // Add double-click to zoom
+  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 });
+      container.addEventListener('touchstart', handleTouchStartEvent, { passive: false });
+      container.addEventListener('touchmove', handleTouchMoveEvent, { passive: false });
+      container.addEventListener('touchend', handleTouchEndEvent, { passive: false });
+    }
+
+    // Clean up
+    return () => {
+      container.removeEventListener('wheel', handleWheelEvent);
+      container.removeEventListener('touchstart', handleTouchStartEvent);
+      container.removeEventListener('touchmove', handleTouchMoveEvent);
+      container.removeEventListener('touchend', handleTouchEndEvent);
+    };
+  }, [isMounted, onWheel, onTouchStart, onTouchMove, onTouchEnd, effectiveContainerRef]);
+
+  return (
+    <div
+      ref={effectiveContainerRef}
+      className={`c-photo-viewer__image-container ${isTransitioning ? 'is-transitioning' : ''}`}
+      style={{
+        cursor: isDragging ? 'grabbing' : zoomLevel > 1 ? 'grab' : 'default',
+        opacity: isTransitioning ? 0.7 : 1,
+        touchAction: 'none', // Prevent browser touch behaviors
+      }}
+      onMouseDown={onMouseDown}
+      onMouseMove={onMouseMove}
+      onMouseUp={onMouseUp}
+      onMouseLeave={onMouseUp}
+      onDoubleClick={handleDoubleClick}
+    >
+      <img
+        ref={imageRef}
+        src={src}
+        alt={alt}
+        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'
+              : '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
+      />
+    </div>
+  );
+};
+
+export default PhotoViewerImage;

package/src/components/PhotoViewer/PhotoViewerInfo.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { ImageType } from '../../lib/types/components';
+import { Button } from '../Button/Button';
+import { Badge } from '../Badge/Badge';
+import { Icon } from '../Icon/Icon';
+
+/**
+ * Props for the PhotoViewerInfo component
+ */
+export interface PhotoViewerInfoProps {
+  /** Whether to show the info panel */
+  show: boolean;
+  /** Image object to display info for */
+  image?: ImageType;
+  /** Callback to close the info panel */
+  onClose: () => void;
+}
+
+/**
+ * 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
+        iconOnly
+        size="sm"
+        variant="light"
+        rounded
+        onClick={onClose}
+        aria-label="Close info panel"
+        icon={<Icon name="X" size="sm" />}
+        className="c-photo-viewer__info-close"
+      />
+      <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.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"
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PhotoViewerInfo;