@shohojdhara/atomix 0.1.30 → 0.2.1

package/src/components/PhotoViewer/PhotoViewerHeader.tsx

@@ -0,0 +1,184 @@
+import React from 'react';
+import { ImageType } from '../../lib/types/components';
+import { Badge } from '../Badge';
+import { Button } from '../Button';
+import { Icon } from '../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">
+    <div className="c-photo-viewer__header-left">
+      <Badge label={`${currentIndex + 1} / ${imagesLength}`} variant="primary" size="sm" />
+      {currentImage?.title && <h3 className="c-photo-viewer__image-title">{currentImage.title}</h3>}
+    </div>
+
+    <div className="c-photo-viewer__actions">
+      <Button
+        iconOnly
+        size="sm"
+        variant="ghost"
+        rounded
+        onClick={onZoomOut}
+        disabled={zoomLevel <= 0.1}
+        aria-label="Zoom out"
+        className="c-photo-viewer__action-button"
+        icon={<Icon name="Minus" size="sm" />}
+      />
+
+      <Button
+        iconOnly
+        size="sm"
+        variant="ghost"
+        rounded
+        onClick={onResetZoom}
+        disabled={zoomLevel === 1}
+        aria-label="Reset zoom"
+        className="c-photo-viewer__action-button"
+        icon={<Icon name="MagnifyingGlass" size="sm" />}
+      />
+
+      <Button
+        iconOnly
+        size="sm"
+        variant="ghost"
+        rounded
+        onClick={onZoomIn}
+        disabled={zoomLevel >= 5}
+        aria-label="Zoom in"
+        className="c-photo-viewer__action-button"
+        icon={<Icon name="Plus" size="sm" />}
+      />
+
+      <div className="c-photo-viewer__divider" />
+
+      <Button
+        iconOnly
+        size="sm"
+        variant="ghost"
+        rounded
+        onClick={onRotate}
+        aria-label="Rotate image"
+        className="c-photo-viewer__action-button"
+        icon={<Icon name="ArrowsClockwise" size="sm" />}
+      />
+
+      <Button
+        iconOnly
+        size="sm"
+        variant="ghost"
+        rounded
+        onClick={onDownload}
+        aria-label="Download image"
+        className="c-photo-viewer__action-button"
+        icon={<Icon name="Download" size="sm" />}
+      />
+
+      {'share' in navigator && typeof navigator.share === 'function' && (
+        <Button
+          iconOnly
+          size="sm"
+          variant="ghost"
+          rounded
+          onClick={onShare}
+          aria-label="Share image"
+          className="c-photo-viewer__action-button"
+          icon={<Icon name="Share" size="sm" />}
+        />
+      )}
+
+      <Button
+        iconOnly
+        size="sm"
+        variant="ghost"
+        rounded
+        onClick={onToggleInfo}
+        aria-label="Toggle info panel"
+        className={`c-photo-viewer__action-button ${showInfo ? 'is-active' : ''}`}
+        icon={<Icon name="Info" size="sm" />}
+      />
+
+      <div className="c-photo-viewer__divider" />
+
+      <Button
+        iconOnly
+        size="sm"
+        variant="ghost"
+        rounded
+        onClick={onToggleFullscreen}
+        aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
+        className="c-photo-viewer__action-button"
+        icon={<Icon name={isFullscreen ? 'ArrowsIn' : 'ArrowsOut'} size="sm" />}
+      />
+
+      <Button
+        iconOnly
+        size="sm"
+        variant="ghost"
+        rounded
+        onClick={onClose}
+        aria-label="Close viewer"
+        className="c-photo-viewer__action-button c-photo-viewer__close-button"
+        icon={<Icon name="X" size="sm" />}
+      />
+    </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 | null>;
+  /** Ref to the container element */
+  containerRef?: React.RefObject<HTMLDivElement | null>;
+  /** 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,91 @@
+import React from 'react';
+import { ImageType } from '../../lib/types/components';
+import { Badge } from '../Badge';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+
+/**
+ * Props for the PhotoViewerInfo component
+ */
+export interface PhotoViewerInfoProps {
+  /** Whether to show the info panel */
+  show: boolean;
+  /** Image data to display */
+  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">
+      <div className="c-photo-viewer__info-header">
+        <h4 className="c-photo-viewer__info-panel-title">Image Details</h4>
+        <Button
+          iconOnly
+          size="sm"
+          variant="ghost"
+          rounded
+          onClick={onClose}
+          aria-label="Close info panel"
+          className="c-photo-viewer__info-close"
+          icon={<Icon name="X" size="sm" />}
+        />
+      </div>
+
+      <div className="c-photo-viewer__info-content">
+        {image.title && (
+          <div className="c-photo-viewer__info-section">
+            <h5 className="c-photo-viewer__info-title">{image.title}</h5>
+          </div>
+        )}
+
+        {image.description && (
+          <div className="c-photo-viewer__info-section">
+            <p className="c-photo-viewer__info-description">{image.description}</p>
+          </div>
+        )}
+
+        {(image.date || image.author) && (
+          <div className="c-photo-viewer__info-section">
+            <div className="c-photo-viewer__info-meta">
+              {image.date && (
+                <div className="c-photo-viewer__info-meta-item">
+                  <Icon name="Calendar" size={14} />
+                  <span>{image.date}</span>
+                </div>
+              )}
+              {image.author && (
+                <div className="c-photo-viewer__info-meta-item">
+                  <Icon name="User" size={14} />
+                  <span>{image.author}</span>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {image.tags && image.tags.length > 0 && (
+          <div className="c-photo-viewer__info-section">
+            <h6 className="c-photo-viewer__info-section-title">Tags</h6>
+            <div className="c-photo-viewer__info-tags">
+              {image.tags.map((tag: string, index: number) => (
+                <Badge key={index} label={tag} variant="secondary" size="sm" />
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PhotoViewerInfo;

package/src/components/PhotoViewer/PhotoViewerNavigation.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect } from 'react';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+
+/**
+ * Props for the PhotoViewerNavigation component
+ */
+export interface PhotoViewerNavigationProps {
+  /** Whether to show navigation buttons */
+  show: boolean;
+  /** Callback to go to previous image */
+  onPrev: () => void;
+  /** Callback to go to next image */
+  onNext: () => void;
+  /** Current image index */
+  currentIndex: number;
+  /** Total number of images */
+  imagesLength: number;
+  /** Whether keyboard navigation is enabled */
+  enableKeyboardNav: boolean;
+  /** Callback to close the viewer */
+  onClose: () => void;
+}
+
+/**
+ * PhotoViewerNavigation component - handles navigation between images
+ *
+ * @param props - PhotoViewerNavigationProps
+ * @returns JSX.Element
+ */
+export const PhotoViewerNavigation: React.FC<PhotoViewerNavigationProps> = ({
+  show,
+  onPrev,
+  onNext,
+  currentIndex,
+  imagesLength,
+  enableKeyboardNav,
+  onClose,
+}) => {
+  // 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]);
+
+  if (!show) return null;
+
+  return (
+    <>
+      <Button
+        iconOnly
+        size="md"
+        variant="ghost"
+        rounded
+        onClick={onPrev}
+        disabled={currentIndex === 0}
+        aria-label="Previous image"
+        className="c-photo-viewer__nav-button c-photo-viewer__nav-button--prev"
+        icon={<Icon name="CaretLeft" size="md" />}
+      />
+
+      <Button
+        iconOnly
+        size="md"
+        variant="ghost"
+        rounded
+        onClick={onNext}
+        disabled={currentIndex === imagesLength - 1}
+        aria-label="Next image"
+        className="c-photo-viewer__nav-button c-photo-viewer__nav-button--next"
+        icon={<Icon name="CaretRight" size="md" />}
+      />
+    </>
+  );
+};
+
+export default PhotoViewerNavigation;

package/src/components/PhotoViewer/PhotoViewerThumbnails.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { ImageType } from '../../lib/types/components';
+import { Button } from '../Button/Button';
+
+/**
+ * Props for the PhotoViewerThumbnails component
+ */
+export interface PhotoViewerThumbnailsProps {
+  /** Array of images to display thumbnails for */
+  images: ImageType[];
+  /** Current active image index */
+  currentIndex: number;
+  /** Callback to navigate to a specific image */
+  goToImage: (index: number) => void;
+}
+
+/**
+ * PhotoViewerThumbnails component - displays thumbnail navigation for images
+ *
+ * @param props - PhotoViewerThumbnailsProps
+ * @returns JSX.Element
+ */
+export const PhotoViewerThumbnails: React.FC<PhotoViewerThumbnailsProps> = ({
+  images,
+  currentIndex,
+  goToImage,
+}) => {
+  if (images.length <= 1) return null;
+
+  return (
+    <div className="c-photo-viewer__thumbnails">
+      <div className="c-photo-viewer__thumbnails-container">
+        {images.map((image: ImageType, index: number) => {
+          const thumbnailSrc = image.thumbnail || image.src;
+          const isActive = index === currentIndex;
+
+          return (
+            <Button
+              key={index}
+              variant="ghost"
+              className={`c-photo-viewer__thumbnail ${isActive ? 'is-active' : ''}`}
+              onClick={() => goToImage(index)}
+              aria-label={`View image ${index + 1}${image.title ? `: ${image.title}` : ''}`}
+              aria-current={isActive}
+            >
+              <div className="c-photo-viewer__thumbnail-wrapper">
+                <img
+                  loading="lazy"
+                  src={thumbnailSrc}
+                  alt={image.alt || `Thumbnail ${index + 1}`}
+                  className="c-photo-viewer__thumbnail-img"
+                />
+                {isActive && <div className="c-photo-viewer__thumbnail-indicator" />}
+              </div>
+            </Button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default PhotoViewerThumbnails;