@snowcone-app/ui 0.1.43 → 0.2.0

package/src/composed/zoom/EnhancedImageViewer.tsx

@@ -0,0 +1,505 @@
+"use client";
+
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useLayoutEffect,
+  useCallback,
+  type ComponentType,
+} from "react";
+import { createPortal } from "react-dom";
+import {
+  TransformWrapper as OriginalTransformWrapper,
+  TransformComponent as OriginalTransformComponent,
+} from "react-zoom-pan-pinch";
+import type {
+  ReactZoomPanPinchContentRef,
+  ReactZoomPanPinchProps,
+} from "react-zoom-pan-pinch";
+import { X } from "lucide-react";
+import type { ZoomImage } from "./types";
+
+// Cast to fix React 19 type compatibility with react-zoom-pan-pinch
+const TransformWrapper = OriginalTransformWrapper as ComponentType<
+  Omit<ReactZoomPanPinchProps, "ref"> & {
+    ref?: React.Ref<ReactZoomPanPinchContentRef>;
+  }
+>;
+const TransformComponent = OriginalTransformComponent as ComponentType<{
+  children?: React.ReactNode;
+  wrapperStyle?: React.CSSProperties;
+}>;
+
+interface EnhancedImageViewerProps {
+  imageUrl: string;
+  alt: string;
+  onClose: () => void;
+  images: ZoomImage[];
+  onIndexChange?: (index: number) => void;
+  currentIndex?: number; // Add explicit current index prop
+}
+
+// Enhanced Image Viewer Component with react-zoom-pan-pinch (On.com style)
+export const EnhancedImageViewer = ({
+  imageUrl,
+  alt,
+  onClose,
+  images,
+  onIndexChange,
+  currentIndex: propCurrentIndex,
+}: EnhancedImageViewerProps) => {
+  const [isMounted, setIsMounted] = useState(false);
+  const [isClient, setIsClient] = useState(false);
+  const [scale, setScale] = useState({ initial: 1, min: 1, max: 8 });
+  const [cropDimensions, setCropDimensions] = useState({ width: 0, height: 0 });
+  const [currentZoomScale, setCurrentZoomScale] = useState(1);
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  // Swipe detection refs
+  const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(
+    null
+  );
+  const isSwipingRef = useRef(false);
+
+  // Calculate scale with crop matching viewport aspect ratio
+  const calculateScale = useCallback(() => {
+    const viewport = {
+      width: window.innerWidth,
+      height: window.innerHeight,
+    };
+
+    // Crop to viewport aspect ratio - image will fill screen exactly
+    setCropDimensions({ width: viewport.width, height: viewport.height });
+
+    // Since crop matches viewport, initial scale is 1 (no scaling needed)
+    setScale({
+      initial: 1,
+      min: 1,
+      max: 8,
+    });
+  }, []);
+
+  const handleImageLoad = useCallback(() => {
+    calculateScale();
+  }, [calculateScale]);
+
+  // Mark as client-side and calculate initial scale
+  useLayoutEffect(() => {
+    setIsClient(true);
+    setIsMounted(true);
+    document.body.style.overflow = "hidden";
+
+    // Calculate scale and crop dimensions
+    calculateScale();
+
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [calculateScale]);
+
+  useEffect(() => {
+    calculateScale();
+  }, [calculateScale]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      calculateScale();
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [calculateScale]);
+
+  // Keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+        // Find current index
+        let currentIndex =
+          propCurrentIndex !== undefined ? propCurrentIndex : -1;
+        if (currentIndex === -1) {
+          currentIndex = images.findIndex((img) => img.src === imageUrl);
+        }
+        if (currentIndex === -1) currentIndex = 0;
+
+        // Navigate to next/previous
+        if (e.key === "ArrowLeft" && currentIndex > 0) {
+          const prevImage = images[currentIndex - 1];
+          if (prevImage?.src) {
+            onIndexChange?.(currentIndex - 1);
+          }
+        } else if (e.key === "ArrowRight" && currentIndex < images.length - 1) {
+          const nextImage = images[currentIndex + 1];
+          if (nextImage?.src) {
+            onIndexChange?.(currentIndex + 1);
+          }
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose, imageUrl, images, onIndexChange, propCurrentIndex]);
+
+  // Swipe navigation - only when at initial zoom (not zoomed in)
+  const handleSwipeNavigation = useCallback(
+    (direction: "left" | "right") => {
+      let currentIndex = propCurrentIndex !== undefined ? propCurrentIndex : -1;
+      if (currentIndex === -1) {
+        currentIndex = images.findIndex((img) => img.src === imageUrl);
+      }
+      if (currentIndex === -1) currentIndex = 0;
+
+      if (direction === "left" && currentIndex < images.length - 1) {
+        // Swipe left = next image
+        const nextImage = images[currentIndex + 1];
+        if (nextImage?.src || nextImage?.isRealMockup) {
+          onIndexChange?.(currentIndex + 1);
+        }
+      } else if (direction === "right" && currentIndex > 0) {
+        // Swipe right = previous image
+        const prevImage = images[currentIndex - 1];
+        if (prevImage?.src || prevImage?.isRealMockup) {
+          onIndexChange?.(currentIndex - 1);
+        }
+      }
+    },
+    [propCurrentIndex, images, imageUrl, onIndexChange]
+  );
+
+  // Touch handlers for swipe detection
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent) => {
+      // Only track swipe when at initial zoom level
+      const isAtInitialZoom = Math.abs(currentZoomScale - scale.initial) < 0.1;
+      if (!isAtInitialZoom) return;
+
+      const touch = e.touches[0];
+      touchStartRef.current = {
+        x: touch.clientX,
+        y: touch.clientY,
+        time: Date.now(),
+      };
+      isSwipingRef.current = false;
+    },
+    [currentZoomScale, scale.initial]
+  );
+
+  const handleTouchEnd = useCallback(
+    (e: React.TouchEvent) => {
+      if (!touchStartRef.current) return;
+
+      const touch = e.changedTouches[0];
+      const deltaX = touch.clientX - touchStartRef.current.x;
+      const deltaY = touch.clientY - touchStartRef.current.y;
+      const elapsed = Date.now() - touchStartRef.current.time;
+
+      // Swipe detection: horizontal movement > 50px, more horizontal than vertical, < 300ms
+      const minSwipeDistance = 50;
+      const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY) * 1.5;
+      const isFastEnough = elapsed < 300;
+      const isLongEnough = Math.abs(deltaX) > minSwipeDistance;
+
+      if (isHorizontalSwipe && isFastEnough && isLongEnough) {
+        if (deltaX < 0) {
+          handleSwipeNavigation("left");
+        } else {
+          handleSwipeNavigation("right");
+        }
+      }
+
+      touchStartRef.current = null;
+    },
+    [handleSwipeNavigation]
+  );
+
+  if (!isMounted || !isClient) {
+    return createPortal(
+      <div
+        className="fixed inset-0 bg-black flex items-center justify-center"
+        style={{ zIndex: 999999 }}
+      >
+        <div
+          style={{
+            color: "white",
+            fontSize: "18px",
+          }}
+        >
+          Loading...
+        </div>
+      </div>,
+      document.body
+    );
+  }
+
+  return createPortal(
+    <div
+      className="fixed inset-0 bg-black flex items-center justify-center"
+      style={{ zIndex: 999999 }}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Image viewer"
+    >
+{/* Close button — bottom right for reachability */}
+      <button
+        onClick={(e) => { e.stopPropagation(); onClose(); }}
+        aria-label="Close"
+        style={{
+          position: "fixed",
+          bottom: 12,
+          right: 24,
+          zIndex: 9999999,
+          width: 56,
+          height: 56,
+          borderRadius: "50%",
+          background: "white",
+          color: "black",
+          border: "none",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: "pointer",
+          touchAction: "manipulation",
+          marginBottom: "env(safe-area-inset-bottom, 0px)",
+        }}
+      >
+        <X className="w-7 h-7" strokeWidth={2.5} />
+      </button>
+
+      {/* Pinch-to-zoom with contain mode (image fully visible initially) */}
+      <TransformWrapper
+        key={`${scale.initial}-${scale.min}-${scale.max}`}
+        initialScale={scale.initial}
+        minScale={scale.min}
+        maxScale={scale.max}
+        limitToBounds={true}
+        centerOnInit={true}
+        doubleClick={{
+          excluded: [],
+          step: 0.7,
+        }}
+        panning={{
+          activationKeys: [],
+          excluded: [],
+          // Disable panning at initial zoom level (nothing to pan to)
+          disabled: Math.abs(currentZoomScale - scale.initial) < 0.1,
+        }}
+        pinch={{
+          excluded: [],
+          step: 5,
+        }}
+        wheel={{
+          activationKeys: [],
+          excluded: [],
+          smoothStep: 0.001,
+          step: 0.2,
+        }}
+        onInit={(ref) => {
+          setCurrentZoomScale(ref.state.scale);
+        }}
+        onTransformed={(ref) => {
+          setCurrentZoomScale(ref.state.scale);
+        }}
+      >
+        {({ zoomIn, zoomOut, resetTransform }) => (
+          <div
+            style={{
+              width: "100vw",
+              height: "100vh",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+            onTouchStart={handleTouchStart}
+            onTouchEnd={handleTouchEnd}
+          >
+            <TransformComponent
+              wrapperStyle={{
+                width: "100%",
+                height: "100%",
+              }}
+            >
+              {/* Crop container matching viewport aspect ratio */}
+              <div
+                style={{
+                  width: cropDimensions.width || "100vw",
+                  height: cropDimensions.height || "100vh",
+                  overflow: "hidden",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <img
+                  ref={imgRef}
+                  src={imageUrl}
+                  alt={alt}
+                  crossOrigin="anonymous"
+                  key={`${imageUrl}-${propCurrentIndex}`}
+                  onLoad={handleImageLoad}
+                  style={{
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover", // Crop 16:9 to fit 4:3 container
+                  }}
+                />
+              </div>
+            </TransformComponent>
+
+            {/* Navigation controls - buttons centered, counter bottom-left */}
+            <div className="fixed bottom-5 left-0 right-0 z-50">
+              {/* Centered prev/next buttons */}
+              <div className="flex justify-center gap-2">
+                {(() => {
+                  // Use the explicit currentIndex prop if provided, otherwise try to find it
+                  let currentIndex =
+                    propCurrentIndex !== undefined ? propCurrentIndex : -1;
+
+                  // If no prop provided, find current index by matching imageUrl with img.src
+                  if (currentIndex === -1) {
+                    currentIndex = images.findIndex(
+                      (img) => img.src === imageUrl
+                    );
+                  }
+
+                  // If not found by src match, try to find by isRealMockup and placement for real mockups
+                  if (currentIndex === -1) {
+                    currentIndex = images.findIndex(
+                      (img) => img.isRealMockup && img.src === imageUrl
+                    );
+                  }
+
+                  // If still not found, find by exact object match
+                  if (currentIndex === -1) {
+                    currentIndex = images.findIndex(
+                      (img) =>
+                        img.src === imageUrl ||
+                        (img.isRealMockup && !img.src && imageUrl === "") ||
+                        (img.src === "" && imageUrl === "")
+                    );
+                  }
+
+                  // Fallback: assume we're at index 0 if we can't find the image
+                  if (currentIndex === -1) {
+                    currentIndex = 0;
+                  }
+
+                  const isFirst = currentIndex === 0;
+                  const isLast = currentIndex === images.length - 1;
+
+                  // Find next/previous available images (skip images without src unless they're real mockups with generated URLs)
+                  const findNextAvailableIndex = (
+                    fromIndex: number,
+                    direction: 1 | -1
+                  ): number => {
+                    for (
+                      let i = fromIndex + direction;
+                      direction > 0 ? i < images.length : i >= 0;
+                      i += direction
+                    ) {
+                      const img = images[i];
+                      if (img.src || img.isRealMockup) {
+                        return i;
+                      }
+                    }
+                    return -1;
+                  };
+
+                  const nextIndex = findNextAvailableIndex(currentIndex, 1);
+                  const prevIndex = findNextAvailableIndex(currentIndex, -1);
+
+                  return (
+                    <>
+                      <button
+                        onClick={() => {
+                          if (prevIndex !== -1) {
+                            onIndexChange?.(prevIndex);
+                          } else {
+                          }
+                        }}
+                        disabled={prevIndex === -1}
+                        className={`w-10 h-10 rounded-full shadow-lg flex items-center justify-center transition-all duration-200 ${
+                          prevIndex === -1
+                            ? "bg-white/40 text-black opacity-50 cursor-not-allowed"
+                            : "bg-white/90 hover:bg-white text-black"
+                        }`}
+                        style={{ touchAction: "manipulation" }}
+                        aria-label="Previous image"
+                      >
+                        <svg
+                          className="w-4 h-4"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                          aria-hidden="true"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M15 19l-7-7 7-7"
+                          />
+                        </svg>
+                      </button>
+                      <button
+                        onClick={() => {
+                          if (nextIndex !== -1) {
+                            onIndexChange?.(nextIndex);
+                          } else {
+                          }
+                        }}
+                        disabled={nextIndex === -1}
+                        className={`w-10 h-10 rounded-full shadow-lg flex items-center justify-center transition-all duration-200 ${
+                          nextIndex === -1
+                            ? "bg-white/40 text-black opacity-50 cursor-not-allowed"
+                            : "bg-white/90 hover:bg-white text-black"
+                        }`}
+                        style={{ touchAction: "manipulation" }}
+                        aria-label="Next image"
+                      >
+                        <svg
+                          className="w-4 h-4"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                          aria-hidden="true"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M9 5l7 7-7 7"
+                          />
+                        </svg>
+                      </button>
+                    </>
+                  );
+                })()}
+              </div>
+              {/* Bottom-left counter */}
+              <div style={{ position: "fixed", bottom: 20, left: 24, zIndex: 10, marginBottom: "env(safe-area-inset-bottom, 0px)" }} className="h-10 px-3 rounded-full bg-white/90 text-black text-sm font-medium flex items-center justify-center shadow-lg">
+                {(() => {
+                  const total = Math.max(images.length, 1);
+                  const current = propCurrentIndex !== undefined
+                    ? Math.min(propCurrentIndex + 1, total)
+                    : 1;
+                  return `${current} / ${total}`;
+                })()}
+              </div>
+            </div>
+          </div>
+        )}
+      </TransformWrapper>
+
+      {/* Background overlay - click to close */}
+      <div
+        className="absolute inset-0 bg-black"
+        onClick={(e) => { e.stopPropagation(); onClose(); }}
+        style={{ zIndex: -1 }}
+      />
+    </div>,
+    document.body
+  );
+};

package/src/composed/zoom/ResponsiveZoom.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { ZoomOverlay } from './ZoomOverlay';
+import { EnhancedImageViewer } from './EnhancedImageViewer';
+import type { ZoomImage } from './types';
+
+interface ResponsiveZoomProps {
+  imageIndex: number;
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  images?: ZoomImage[];
+  imageUrl?: string;
+  alt?: string;
+}
+
+/**
+ * ResponsiveZoom - Adaptive zoom component that provides the best experience for each device type
+ *
+ * - Desktop (non-touch): Inline 2x zoom with custom cursor (ZoomOverlay)
+ * - Touch devices (phones & tablets): Full-screen pinch-to-zoom viewer (EnhancedImageViewer)
+ *
+ * @example
+ * <ResponsiveZoom imageIndex={0}>
+ *   <ProductImage className="w-full" />
+ * </ResponsiveZoom>
+ */
+export function ResponsiveZoom({
+  imageIndex,
+  children,
+  className,
+  style,
+  images = [],
+  imageUrl,
+  alt = "Product image",
+}: ResponsiveZoomProps) {
+  const [isTouchDevice, setIsTouchDevice] = useState(false);
+  const [showEnhancedViewer, setShowEnhancedViewer] = useState(false);
+  const [viewerIndex, setViewerIndex] = useState(0);
+  const [currentImageUrl, setCurrentImageUrl] = useState(imageUrl || '');
+
+  // Device detection
+  useEffect(() => {
+    const checkDeviceType = () => {
+      const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+      setIsTouchDevice(hasTouch);
+    };
+
+    checkDeviceType();
+    window.addEventListener("resize", checkDeviceType);
+    return () => window.removeEventListener("resize", checkDeviceType);
+  }, []);
+
+  const handleImageClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    // On touch devices, open enhanced viewer
+    if (isTouchDevice) {
+      // Try to get the image from the click target first
+      let imgElement = e.currentTarget.querySelector('img') as HTMLImageElement;
+
+      // Fallback: try to find by alt text
+      if (!imgElement || !imgElement.src) {
+        imgElement = document.querySelector(`img[alt*="${alt}"]`) as HTMLImageElement;
+      }
+
+      // Fallback: get any img within the clicked element
+      if (!imgElement || !imgElement.src) {
+        imgElement = e.currentTarget.querySelector('img') as HTMLImageElement;
+      }
+
+      if (imgElement?.src) {
+        setCurrentImageUrl(imgElement.src);
+        setViewerIndex(imageIndex);
+        setShowEnhancedViewer(true);
+      } else {
+        console.warn('[ResponsiveZoom] Could not find image element with src');
+      }
+    }
+  };
+
+  return (
+    <>
+      {/* For touch devices: clickable wrapper that opens enhanced viewer */}
+      {isTouchDevice ? (
+        <div
+          className={className}
+          style={{ ...style, cursor: 'pointer' }}
+          onClick={handleImageClick}
+          role="button"
+          aria-label="View image in full screen"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              handleImageClick(e as any);
+            }
+          }}
+        >
+          {children}
+        </div>
+      ) : (
+        <ZoomOverlay
+          imageIndex={imageIndex}
+          isTouchDevice={false}
+          isLargeTouchDevice={false}
+          className={className}
+          style={style}
+        >
+          {children}
+        </ZoomOverlay>
+      )}
+
+      {/* Show enhanced viewer on ALL touch devices when clicked */}
+      {showEnhancedViewer && isTouchDevice && currentImageUrl && (
+        <EnhancedImageViewer
+          imageUrl={currentImageUrl}
+          alt={alt}
+          images={images.length > 0 ? images : [{ src: currentImageUrl, alt }]}
+          currentIndex={viewerIndex}
+          onClose={() => setShowEnhancedViewer(false)}
+          onIndexChange={(index) => {
+            setViewerIndex(index);
+            if (images.length > 0) {
+              const img = images[index];
+              if (img?.src) {
+                setCurrentImageUrl(img.src);
+              }
+            }
+          }}
+        />
+      )}
+    </>
+  );
+}