@shohojdhara/atomix 0.1.27 → 0.1.28

package/src/components/PhotoViewer/PhotoViewer.tsx

@@ -1,246 +0,0 @@
-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

@@ -1,177 +0,0 @@
-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

@@ -1,173 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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;