@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/components/PhotoViewer/PhotoViewer.stories.tsx

@@ -1,160 +0,0 @@
-import React from "react";
-import { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-import { PhotoViewer } from "./PhotoViewer";
-import { ImageType } from "../../lib/types/components";
-import { ImageGallery } from "./examples/ImageGallery";
-import { SimpleGallery } from "./examples/SimpleGallery";
-
-const meta: Meta<typeof PhotoViewer> = {
-  title: "Components/PhotoViewer",
-  component: PhotoViewer,
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof PhotoViewer>;
-
-/**
- * Default PhotoViewer with a set of images
- */
-export const Default: Story = {
-  args: {
-    images: [
-      "https://picsum.photos/id/10/800/600",
-      "https://picsum.photos/id/11/800/1000",
-      "https://picsum.photos/id/12/800/500",
-      "https://picsum.photos/id/13/800/800",
-    ],
-    startIndex: 0,
-    onImageChange: fn(),
-  },
-};
-
-/**
- * PhotoViewer starting at the second image
- */
-export const StartAtSecond: Story = {
-  args: {
-    images: [
-      "https://picsum.photos/id/10/800/600",
-      "https://picsum.photos/id/11/800/1000",
-      "https://picsum.photos/id/12/800/500",
-      "https://picsum.photos/id/13/800/800",
-    ],
-    startIndex: 1,
-    onImageChange: fn(),
-  },
-};
-
-/**
- * Disabled PhotoViewer
- */
-export const Disabled: Story = {
-  args: {
-    images: [
-      "https://picsum.photos/id/10/800/600",
-      "https://picsum.photos/id/11/800/1000",
-      "https://picsum.photos/id/12/800/500",
-      "https://picsum.photos/id/13/800/800",
-    ],
-    disabled: true,
-    onImageChange: fn(),
-  },
-};
-
-/**
- * PhotoViewer with custom class
- */
-export const WithCustomClass: Story = {
-  args: {
-    images: [
-      "https://picsum.photos/id/10/800/600",
-      "https://picsum.photos/id/11/800/1000",
-      "https://picsum.photos/id/12/800/500",
-      "https://picsum.photos/id/13/800/800",
-    ],
-    className: "custom-photo-viewer",
-    onImageChange: fn(),
-  },
-};
-
-/**
- * PhotoViewer with enhanced image objects
- */
-export const WithEnhancedImages: Story = {
-  args: {
-    images: [
-      {
-        src: "https://picsum.photos/id/10/800/600",
-        alt: "Mountain Landscape",
-        title: "Mountain Landscape",
-        description: "Beautiful mountain landscape with a lake view",
-        tags: ["nature", "mountains", "landscape"],
-      } as ImageType, // Cast to ImageType
-      {
-        src: "https://picsum.photos/id/11/800/1000",
-        alt: "Beach Sunset",
-        title: "Beach Sunset",
-        description: "Stunning sunset over the ocean",
-        tags: ["beach", "sunset", "ocean"],
-      } as ImageType, // Cast to ImageType
-      {
-        src: "https://picsum.photos/id/12/800/500",
-        alt: "Forest Path",
-        title: "Forest Path",
-        description: "A serene path through a dense forest",
-        tags: ["forest", "nature", "path"],
-      } as ImageType, // Cast to ImageType
-    ],
-    onImageChange: fn(),
-  },
-};
-
-/**
- * PhotoViewer with left thumbnails
- */
-export const LeftThumbnails: Story = {
-  args: {
-    images: [
-      "https://picsum.photos/id/10/800/600",
-      "https://picsum.photos/id/11/800/1000",
-      "https://picsum.photos/id/12/800/500",
-      "https://picsum.photos/id/13/800/800",
-    ],
-    thumbnailPosition: "left",
-    onImageChange: fn(),
-  },
-};
-
-/**
- * Example of an image gallery using MasonryGrid with PhotoViewer integration
- */
-export const ImageGalleryExample: Story = {
-  render: () => <ImageGallery />,
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "This example demonstrates how to integrate the PhotoViewer with a MasonryGrid to create an image gallery with smooth transitions. Click on any image to open the PhotoViewer.",
-      },
-    },
-  },
-};
-
-/**
- * Example of a simple image gallery using the SimpleGallery component
- */
-export const SimpleGalleryExample: Story = {
-  render: () => <SimpleGallery />,
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "This example demonstrates a basic image gallery using the SimpleGallery component, which integrates the PhotoViewer. Click on any image to open the PhotoViewer.",
-      },
-    },
-  },
-};

package/src/components/PhotoViewer/PhotoViewer.tsx

@@ -1,263 +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,183 +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;