@dmsi/wedgekit-react 0.0.369 → 0.0.371

package/src/components/ProductImagePreview/MobileImageCarousel.tsx

@@ -0,0 +1,226 @@
+import { useRef, useEffect, useState, useCallback } from "react";
+import type { ProductPreviewImage } from "./index";
+
+export type MobileImageCarouselProps = {
+  images: ProductPreviewImage[];
+  currentIndex: number;
+  width?: number;
+  height?: number;
+  onChangeIndex: (index: number) => void;
+  className?: string;
+};
+
+export function MobileImageCarousel({
+  images,
+  currentIndex,
+  width = 483,
+  height = 483,
+  onChangeIndex,
+  className = "",
+}: MobileImageCarouselProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [startX, setStartX] = useState(0);
+  const [currentTranslate, setCurrentTranslate] = useState(0);
+  const [prevTranslate, setPrevTranslate] = useState(0);
+  const [containerWidth, setContainerWidth] = useState(width);
+
+  const imageSize = Math.min(containerWidth * 0.6, height * 0.6);
+  const gap = 16;
+
+  // Calculate translate position to center current image in the reel
+  const getTranslateX = useCallback(
+    (index: number) => {
+      const containerCenter = containerWidth / 2;
+      const imageCenter = imageSize / 2;
+      const totalOffset = index * (imageSize + gap);
+      return containerCenter - imageCenter - totalOffset;
+    },
+    [containerWidth, imageSize, gap],
+  );
+
+  useEffect(() => {
+    const translateX = getTranslateX(currentIndex);
+    setCurrentTranslate(translateX);
+    setPrevTranslate(translateX);
+  }, [currentIndex, getTranslateX]);
+
+  // Update container width based on actual DOM element
+  useEffect(() => {
+    const updateContainerWidth = () => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        setContainerWidth(rect.width);
+      }
+    };
+
+    updateContainerWidth();
+
+    const resizeObserver = new ResizeObserver(updateContainerWidth);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => resizeObserver.disconnect();
+  }, []);
+
+  // Handle touch/mouse events for swiping
+  const handleStart = useCallback((clientX: number) => {
+    setIsDragging(true);
+    setStartX(clientX);
+  }, []);
+
+  const handleMove = useCallback(
+    (clientX: number) => {
+      if (!isDragging) return;
+
+      const currentPosition = clientX;
+      const diff = currentPosition - startX;
+      setCurrentTranslate(prevTranslate + diff);
+    },
+    [isDragging, startX, prevTranslate],
+  );
+
+  const handleEnd = useCallback(() => {
+    if (!isDragging) return;
+
+    setIsDragging(false);
+
+    // Determine swipe direction and snap to nearest image
+    const moved = currentTranslate - prevTranslate;
+    const threshold = imageSize / 3;
+
+    let newIndex = currentIndex;
+
+    if (moved > threshold && currentIndex > 0) {
+      newIndex = currentIndex - 1;
+    } else if (moved < -threshold && currentIndex < images.length - 1) {
+      newIndex = currentIndex + 1;
+    }
+
+    if (newIndex !== currentIndex) {
+      onChangeIndex(newIndex);
+    } else {
+      setCurrentTranslate(prevTranslate);
+    }
+  }, [
+    isDragging,
+    currentTranslate,
+    prevTranslate,
+    currentIndex,
+    imageSize,
+    images.length,
+    onChangeIndex,
+  ]);
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    handleStart(e.clientX);
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    e.preventDefault();
+    handleMove(e.clientX);
+  };
+
+  const handleMouseUp = () => {
+    handleEnd();
+  };
+
+  const handleMouseLeave = () => {
+    handleEnd();
+  };
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    handleStart(e.touches[0].clientX);
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    handleMove(e.touches[0].clientX);
+  };
+
+  const handleTouchEnd = () => {
+    handleEnd();
+  };
+
+  const handleImageClick = useCallback(
+    (index: number) => {
+      if (!isDragging && index !== currentIndex) {
+        onChangeIndex(index);
+      }
+    },
+    [isDragging, currentIndex, onChangeIndex],
+  );
+
+  if (!images.length) return null;
+
+  return (
+    <div className={`md:hidden w-full ${className}`}>
+      <div
+        ref={containerRef}
+        className="relative overflow-hidden cursor-grab active:cursor-grabbing select-none w-full"
+        style={{
+          height: imageSize,
+        }}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseLeave}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+      >
+        <div
+          className="flex items-center"
+          style={{
+            transform: `translateX(${currentTranslate}px)`,
+            transition: isDragging ? "none" : "transform 0.3s ease-out",
+            gap: `${gap}px`,
+          }}
+        >
+          {images.map((image, index) => {
+            const isActive = index === currentIndex;
+            const distance = Math.abs(index - currentIndex);
+
+            // Only render visible images for performance
+            const shouldRender = distance <= 2;
+
+            return (
+              <div
+                key={image.src + index}
+                className="flex-shrink-0 transition-opacity duration-300"
+                style={{
+                  width: imageSize,
+                  height: imageSize,
+                  opacity: isActive ? 1 : Math.max(0.3, 1 - distance * 0.3),
+                }}
+                onClick={() => handleImageClick(index)}
+              >
+                {shouldRender ? (
+                  <img
+                    src={image.src}
+                    alt={image.alt || `Product image ${index + 1}`}
+                    className="w-full h-full object-cover"
+                    draggable={false}
+                    loading={distance <= 1 ? "eager" : "lazy"}
+                    style={{
+                      aspectRatio: "1 / 1",
+                    }}
+                  />
+                ) : (
+                  <div
+                    className="w-full h-full bg-neutral-100 rounded-md border border-gray-200"
+                    style={{
+                      aspectRatio: "1 / 1",
+                    }}
+                    aria-hidden="true"
+                  />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ProductImagePreview/ProductPrimaryImage.tsx

@@ -0,0 +1,218 @@
+import { useRef, useState, useCallback, useMemo, useEffect } from "react";
+import type { CSSProperties } from "react";
+import { Spinner } from "../Spinner";
+import type { ProductPreviewImage } from "./index";
+import { ImagePlaceholder } from "../ImagePlaceholder";
+
+export type ProductPrimaryImageProps = {
+  image?: ProductPreviewImage;
+  width: number;
+  height: number;
+  zoomEnabled?: boolean;
+  zoomLensSize?: number;
+  scrollToZoomEnabled?: boolean;
+  className?: string;
+  isPlaceholder?: boolean;
+  onZoomPositionChange?: (
+    data: {
+      x: number;
+      y: number;
+      w: number;
+      h: number;
+      lensSize: number;
+    } | null,
+    active: boolean,
+  ) => void;
+  onScrollZoom?: (delta: number) => void;
+};
+
+/** Primary product image with optional zoom lens that tracks cursor movement */
+export function ProductPrimaryImage({
+  image,
+  width,
+  height,
+  zoomEnabled = false,
+  zoomLensSize = 140,
+  scrollToZoomEnabled = false,
+  className = "",
+  isPlaceholder = false,
+  onZoomPositionChange,
+  onScrollZoom,
+}: ProductPrimaryImageProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const lastPointRef = useRef<{ x: number; y: number } | null>(null);
+  const rafRef = useRef<number | null>(null);
+  const [active, setActive] = useState(false);
+  const [, forceRerender] = useState(0);
+  const [imageLoading, setImageLoading] = useState(true);
+  const [imageError, setImageError] = useState(false);
+
+  // Memoize image src to prevent unnecessary re-requests
+  const imageSrc = useMemo(() => image?.src, [image?.src]);
+
+  const schedule = () => {
+    if (rafRef.current != null) return;
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = null;
+      forceRerender((n) => n + 1);
+    });
+  };
+
+  const handlePointerEnter = useCallback(() => {
+    if (!zoomEnabled) return;
+    setActive(true);
+    const el = containerRef.current;
+    if (el) {
+      const r = el.getBoundingClientRect();
+      const pt = lastPointRef.current;
+      onZoomPositionChange?.(
+        pt ? { ...pt, w: r.width, h: r.height, lensSize: zoomLensSize } : null,
+        true,
+      );
+    }
+  }, [zoomEnabled, onZoomPositionChange, zoomLensSize]);
+
+  const handlePointerLeave = useCallback(() => {
+    if (!zoomEnabled) return;
+    setActive(false);
+    lastPointRef.current = null;
+    onZoomPositionChange?.(null, false);
+  }, [zoomEnabled, onZoomPositionChange]);
+
+  const handlePointerMove = useCallback<
+    React.PointerEventHandler<HTMLDivElement>
+  >(
+    (e) => {
+      if (!zoomEnabled || !active) return;
+
+      // Ignore touch events to prevent zoom on mobile
+      if (e.pointerType === "touch") return;
+
+      const el = containerRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const rawX = (e.clientX - rect.left) / rect.width;
+      const rawY = (e.clientY - rect.top) / rect.height;
+      const size = zoomLensSize ?? 140;
+      // Constrain lens position within image boundaries
+      const left = Math.max(
+        0,
+        Math.min(rect.width - size, rawX * rect.width - size / 2),
+      );
+      const top = Math.max(
+        0,
+        Math.min(rect.height - size, rawY * rect.height - size / 2),
+      );
+      // Convert pixel position back to normalized coordinates
+      const centerXNorm = (left + size / 2) / rect.width;
+      const centerYNorm = (top + size / 2) / rect.height;
+      lastPointRef.current = {
+        x: centerXNorm,
+        y: centerYNorm,
+      };
+      schedule();
+      onZoomPositionChange?.(
+        lastPointRef.current
+          ? {
+              ...lastPointRef.current,
+              w: rect.width,
+              h: rect.height,
+              lensSize: zoomLensSize,
+            }
+          : null,
+        true,
+      );
+    },
+    [zoomEnabled, active, onZoomPositionChange, zoomLensSize],
+  );
+
+  // Set up non-passive wheel event listener to properly prevent default
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !scrollToZoomEnabled) return;
+
+    const handleNativeWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (!zoomEnabled || !active) return;
+
+      // Calculate zoom delta based on wheel direction
+      const delta = e.deltaY > 0 ? -0.2 : 0.2; // Zoom out on scroll down, zoom in on scroll up
+      onScrollZoom?.(delta);
+    };
+
+    container.addEventListener("wheel", handleNativeWheel, { passive: false });
+
+    return () => {
+      container.removeEventListener("wheel", handleNativeWheel);
+    };
+  }, [scrollToZoomEnabled, zoomEnabled, active, onScrollZoom]);
+
+  if (!image && !isPlaceholder) return null;
+
+  const pt = lastPointRef.current;
+  let lensStyle: CSSProperties | undefined;
+  if (pt && active && zoomEnabled) {
+    const size = zoomLensSize;
+    const leftRaw = pt.x * width - size / 2;
+    const topRaw = pt.y * height - size / 2;
+    // Position lens overlay with boundary constraints
+    lensStyle = {
+      width: size,
+      height: size,
+      left: Math.max(0, Math.min(width - size, leftRaw)),
+      top: Math.max(0, Math.min(height - size, topRaw)),
+    };
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={[
+        "relative overflow-hidden bg-white rounded flex items-center justify-center select-none",
+        zoomEnabled ? "cursor-crosshair" : "",
+        className,
+      ].join(" ")}
+      style={{ maxWidth: width, maxHeight: height, aspectRatio: "1 / 1" }}
+      onPointerEnter={handlePointerEnter}
+      onPointerLeave={handlePointerLeave}
+      onPointerMove={handlePointerMove}
+    >
+      {imageLoading && !imageError && !isPlaceholder && (
+        <div className="absolute inset-0 flex items-center justify-center bg-neutral-50">
+          <Spinner size="small" />
+        </div>
+      )}
+      {isPlaceholder ? (
+        <ImagePlaceholder width={width} height={height} />
+      ) : (
+        <img
+          key={imageSrc}
+          src={imageSrc}
+          alt={image?.alt || "Product image"}
+          className="object-cover w-full h-full select-none"
+          draggable={false}
+          loading="lazy"
+          onLoad={() => setImageLoading(false)}
+          onError={() => {
+            setImageLoading(false);
+            setImageError(true);
+          }}
+        />
+      )}
+      {zoomEnabled && active && lensStyle && (
+        <div
+          aria-hidden
+          className="absolute pointer-events-none border border-white/70 shadow-[0_0_0_1px_rgba(0,0,0,0.15)] rounded-md bg-white/10 backdrop-blur-[1px]"
+          style={lensStyle}
+        />
+      )}
+      {/* {scrollToZoomEnabled && zoomEnabled && active && (
+        <div className="absolute top-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded pointer-events-none">
+          Scroll to zoom
+        </div>
+      )} */}
+    </div>
+  );
+}

package/src/components/ProductImagePreview/Thumbnail.tsx

@@ -0,0 +1,49 @@
+import { ImagePlaceholder } from "../ImagePlaceholder";
+
+export type ThumbnailProps = {
+  width?: number;
+  height?: number;
+  src: string;
+  alt?: string;
+  isActive?: boolean;
+  isPlaceholder?: boolean;
+  onClick?: () => void;
+};
+
+export function Thumbnail({
+  width,
+  height,
+  src,
+  alt,
+  isActive,
+  onClick,
+  isPlaceholder = false,
+}: ThumbnailProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={[
+        "cursor-pointer relative overflow-hidden rounded aspect-square w-full", // base radius, square when no explicit size
+        "focus:outline-none",
+        isActive &&
+          !isPlaceholder &&
+          "ring-[3px] ring-offset-1 ring-border-action-normal ring-offset-white opacity-70",
+      ].join(" ")}
+      style={{ maxWidth: width, maxHeight: height, aspectRatio: "1 / 1" }}
+      aria-pressed={isActive && !isPlaceholder ? "true" : "false"}
+    >
+      {isPlaceholder ? (
+        <ImagePlaceholder width={115} height={115} />
+      ) : (
+        <img
+          src={src}
+          alt={alt}
+          className="object-cover w-full h-full select-none"
+          draggable={false}
+          loading="lazy"
+        />
+      )}
+    </button>
+  );
+}

package/src/components/ProductImagePreview/ZoomWindow.tsx

@@ -0,0 +1,136 @@
+import type { CSSProperties } from "react";
+import { useMemo } from "react";
+import { Surface } from "../Surface";
+import type { ProductPreviewImage } from "./index";
+
+export type ZoomWindowProps = {
+  image?: ProductPreviewImage;
+  width: number;
+  height: number;
+  pointer: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    lensSize: number;
+  } | null;
+  active: boolean;
+  zoomFactor?: number;
+  className?: string;
+  scaleFactor?: number;
+  primaryImagePosition?: DOMRect | null;
+  offset?: number;
+};
+
+/** Floating zoom window that follows the lens cursor and shows magnified image content */
+export function ZoomWindow({
+  image,
+  width,
+  height,
+  pointer,
+  active,
+  zoomFactor = 2,
+  scaleFactor = 2,
+  primaryImagePosition,
+  offset = 10,
+  className = "",
+}: ZoomWindowProps) {
+  // Memoize image src to prevent unnecessary re-requests
+  const imageSrc = useMemo(() => image?.src, [image?.src]);
+
+  if (!image || !active || !pointer) return null;
+
+  const zoomWindowSize = pointer.lensSize * scaleFactor;
+
+  // Calculate image scaling and positioning for zoom effect
+  const baseW = pointer.w || width;
+  const baseH = pointer.h || height;
+  const scaledW = baseW * zoomFactor;
+  const scaledH = baseH * zoomFactor;
+  const centerX = pointer.x * baseW * zoomFactor;
+  const centerY = pointer.y * baseH * zoomFactor;
+  const imageOffsetX = zoomWindowSize / 2 - centerX;
+  const imageOffsetY = zoomWindowSize / 2 - centerY;
+
+  // Calculate lens position and smart window positioning
+  const calculatePosition = (): CSSProperties => {
+    if (!primaryImagePosition) {
+      return {
+        position: "fixed",
+        zIndex: 999,
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+      };
+    }
+
+    const lensLeft =
+      primaryImagePosition.left +
+      pointer.x * primaryImagePosition.width -
+      pointer.lensSize / 2;
+    const lensTop =
+      primaryImagePosition.top +
+      pointer.y * primaryImagePosition.height -
+      pointer.lensSize / 2;
+
+    let left = lensLeft + pointer.lensSize + offset;
+    let top = lensTop;
+
+    const { innerWidth, innerHeight } = window;
+
+    // Smart positioning: adjust if exceeds viewport bounds
+    if (left + zoomWindowSize > innerWidth) {
+      left = lensLeft - zoomWindowSize - offset;
+    }
+
+    if (top + zoomWindowSize > innerHeight) {
+      top = lensTop + pointer.lensSize - zoomWindowSize;
+    }
+
+    if (top < 0) {
+      top = lensTop;
+    }
+
+    if (left < 0) {
+      left = lensLeft + pointer.lensSize + offset;
+    }
+
+    return {
+      position: "fixed",
+      zIndex: 999,
+      left,
+      top,
+    };
+  };
+  return (
+    <Surface
+      elevation={16}
+      className={className}
+      style={{
+        width: zoomWindowSize,
+        height: zoomWindowSize,
+        position: "fixed",
+        zIndex: 999,
+        overflow: "hidden",
+        pointerEvents: "none",
+        userSelect: "none",
+        ...calculatePosition(),
+      }}
+      aria-hidden
+    >
+      <img
+        key={imageSrc}
+        src={imageSrc}
+        alt=""
+        className="pointer-events-none select-none max-w-none object-cover"
+        style={{
+          width: scaledW,
+          height: scaledH,
+          transform: `translate(${imageOffsetX}px, ${imageOffsetY}px)`,
+        }}
+        draggable={false}
+        loading="lazy"
+      />
+    </Surface>
+  );
+}