@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/components/PhotoViewer/PhotoViewerImage.tsx

@@ -1,171 +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,57 +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;

package/src/components/PhotoViewer/PhotoViewerNavigation.tsx

@@ -1,82 +0,0 @@
-import React, { useEffect } from 'react';
-import { Button } from '../Button/Button';
-import { Icon } from '../Icon/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]);
-  
-  return show ? (
-    <>
-      <Button
-        iconOnly
-        size="md"
-        variant="light"
-        rounded
-        onClick={onPrev}
-        disabled={currentIndex === 0}
-        aria-label="Previous image"
-        icon={<Icon name="CaretLeft" size="md" />}
-        className="c-photo-viewer__nav-button c-photo-viewer__nav-button--prev"
-      />
-      <Button
-        iconOnly
-        size="md"
-        variant="light"
-        rounded
-        onClick={onNext}
-        disabled={currentIndex === imagesLength - 1}
-        aria-label="Next image"
-        icon={<Icon name="CaretRight" size="md" />}
-        className="c-photo-viewer__nav-button c-photo-viewer__nav-button--next"
-      />
-    </>
-  ) : null;
-};
-
-export default PhotoViewerNavigation;

package/src/components/PhotoViewer/PhotoViewerThumbnails.tsx

@@ -1,52 +0,0 @@
-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 
-}) => 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;