@webority-technologies/mobile-ui 0.0.1

package/lib/module/components/ImageGallery/ImageGallery.js

@@ -0,0 +1,576 @@
+"use strict";
+
+/**
+ * ImageGallery — themed gallery built on top of Carousel.
+ *
+ * Base view: a Carousel of cover-fitted images with optional thumbnails strip
+ * and counter pill. Tapping an image opens a fullscreen Lightbox that re-uses
+ * the Carousel for swiping but layers Reanimated 3 pinch-to-zoom + pan gestures
+ * on top so the active image can be inspected at up to 4x magnification.
+ *
+ * USAGE:
+ *
+ * <ImageGallery
+ *   images={[
+ *     { source: { uri: 'https://...' }, caption: 'Sunset' },
+ *     { source: { uri: 'https://...' }, alt: 'Tower at dusk' }
+ *   ]}
+ *   initialIndex={0}
+ * />
+ */
+
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { Dimensions, Image, Pressable, Modal as RNModal, StyleSheet, Text, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { Carousel } from "../Carousel/index.js";
+import { Skeleton } from "../Skeleton/index.js";
+
+// Local shape mirror — see types.ts ImageGalleryTokens for the canonical definition.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MAX_SCALE_FALLBACK = 4;
+const MIN_SCALE_FALLBACK = 1;
+const DOUBLE_TAP_SCALE_FALLBACK = 2;
+const SPRING_CONFIG = {
+  damping: 18,
+  stiffness: 220,
+  mass: 1
+};
+const ImageGallery = ({
+  images,
+  initialIndex = 0,
+  showThumbnails = true,
+  showCounter = true,
+  enableLightbox = true,
+  enablePinchZoom = true,
+  onIndexChange,
+  haptic,
+  loading = false,
+  accessibilityLabel,
+  containerStyle,
+  testID
+}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const [currentIndex, setCurrentIndex] = useState(clamp(initialIndex, 0, Math.max(0, images.length - 1)));
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const handleIndexChange = useCallback(idx => {
+    setCurrentIndex(idx);
+    onIndexChange?.(idx);
+  }, [onIndexChange]);
+  const openLightbox = useCallback(() => {
+    if (!enableLightbox) {
+      return;
+    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    setLightboxOpen(true);
+  }, [enableLightbox, haptic]);
+  const closeLightbox = useCallback(() => {
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    setLightboxOpen(false);
+  }, [haptic]);
+  const renderImage = useCallback((image, idx) => {
+    const a11y = image.alt ?? `Image ${idx + 1} of ${images.length}`;
+    return /*#__PURE__*/_jsx(Pressable, {
+      onPress: openLightbox,
+      accessibilityRole: "image",
+      accessibilityLabel: a11y,
+      accessibilityHint: enableLightbox ? 'Tap to open fullscreen' : undefined,
+      style: styles.imageWrap,
+      children: /*#__PURE__*/_jsx(Image, {
+        source: image.source,
+        style: styles.image,
+        resizeMode: "cover"
+      })
+    });
+  }, [enableLightbox, images.length, openLightbox, styles]);
+  const renderThumbnail = useCallback(image => /*#__PURE__*/_jsx(Image, {
+    source: image.source,
+    style: styles.thumbnailImage,
+    resizeMode: "cover"
+  }), [styles]);
+  const rendered = /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, containerStyle],
+    testID: testID,
+    accessibilityLabel: accessibilityLabel ?? 'Image gallery',
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.carouselWrap,
+      children: [/*#__PURE__*/_jsx(Carousel, {
+        data: images,
+        defaultIndex: initialIndex,
+        onIndexChange: handleIndexChange,
+        renderItem: renderImage,
+        showPagination: false,
+        showThumbnails: showThumbnails,
+        renderThumbnail: renderThumbnail,
+        haptic: haptic
+      }), showCounter && images.length > 0 ? /*#__PURE__*/_jsx(View, {
+        style: styles.counterPill,
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.counterText, {
+            color: theme.colors.text.inverse
+          }],
+          accessibilityLabel: `Image ${currentIndex + 1} of ${images.length}`,
+          children: `${currentIndex + 1} / ${images.length}`
+        })
+      }) : null]
+    }), enableLightbox ? /*#__PURE__*/_jsx(Lightbox, {
+      visible: lightboxOpen,
+      images: images,
+      initialIndex: currentIndex,
+      enablePinchZoom: enablePinchZoom,
+      showCounter: showCounter,
+      onClose: closeLightbox,
+      onIndexChange: handleIndexChange,
+      haptic: haptic
+    }) : null]
+  });
+  if (loading) {
+    return /*#__PURE__*/_jsx(ImageGallerySkeleton, {
+      images: images,
+      showThumbnails: showThumbnails,
+      showCounter: showCounter,
+      containerStyle: containerStyle,
+      testID: testID
+    });
+  }
+  return rendered;
+};
+ImageGallery.displayName = 'ImageGallery';
+
+/**
+ * Placeholder shape for `<ImageGallery>`. Hero image block + optional
+ * counter pill + thumbnail strip. Heights are tuned to match the live
+ * component's defaults so the gallery doesn't reflow when ready.
+ */
+const ImageGallerySkeleton = ({
+  images,
+  showThumbnails = true,
+  showCounter = true,
+  containerStyle,
+  testID
+}) => {
+  const thumbCount = Math.min(images?.length || 4, 6);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      width: '100%'
+    }, containerStyle],
+    testID: testID,
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        position: 'relative'
+      },
+      children: [/*#__PURE__*/_jsx(Skeleton, {
+        width: "100%",
+        height: 280,
+        radius: "lg"
+      }), showCounter ? /*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          top: 12,
+          right: 12
+        },
+        children: /*#__PURE__*/_jsx(Skeleton, {
+          width: 44,
+          height: 22,
+          radius: "full"
+        })
+      }) : null]
+    }), showThumbnails ? /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'row',
+        marginTop: 12
+      },
+      children: Array.from({
+        length: thumbCount
+      }).map((_, i) => /*#__PURE__*/_jsx(Skeleton, {
+        width: 64,
+        height: 64,
+        radius: "md",
+        style: {
+          marginRight: 8
+        }
+      }, `sk-thumb-${i}`))
+    }) : null]
+  });
+};
+ImageGallerySkeleton.displayName = 'ImageGallerySkeleton';
+ImageGallery.Skeleton = ImageGallerySkeleton;
+
+// ───────── Lightbox ─────────
+
+const Lightbox = ({
+  visible,
+  images,
+  initialIndex,
+  enablePinchZoom,
+  showCounter,
+  onClose,
+  onIndexChange,
+  haptic
+}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => buildLightboxStyles(theme), [theme]);
+  const galleryTokens = theme.components.imageGallery;
+  const maxScale = galleryTokens?.maxScale ?? MAX_SCALE_FALLBACK;
+  const minScale = galleryTokens?.minScale ?? MIN_SCALE_FALLBACK;
+  const doubleTapScale = galleryTokens?.doubleTapScale ?? DOUBLE_TAP_SCALE_FALLBACK;
+  const carouselRef = useRef(null);
+  const [activeIndex, setActiveIndex] = useState(initialIndex);
+  const handleSwipe = useCallback(idx => {
+    if (idx !== activeIndex) {
+      const h = resolveHaptic(haptic, 'selection');
+      if (h) {
+        triggerHaptic(h);
+      }
+      setActiveIndex(idx);
+      onIndexChange(idx);
+    }
+  }, [activeIndex, onIndexChange, haptic]);
+  const renderItem = useCallback((image, idx) => /*#__PURE__*/_jsx(ZoomableImage, {
+    image: image,
+    index: idx,
+    total: images.length,
+    active: idx === activeIndex,
+    enabled: enablePinchZoom,
+    maxScale: maxScale,
+    minScale: minScale,
+    doubleTapScale: doubleTapScale,
+    haptic: haptic
+  }), [activeIndex, enablePinchZoom, images.length, maxScale, minScale, doubleTapScale, haptic]);
+  const caption = images[activeIndex]?.caption;
+  return /*#__PURE__*/_jsx(RNModal, {
+    visible: visible,
+    transparent: true,
+    statusBarTranslucent: true,
+    presentationStyle: "overFullScreen",
+    animationType: "fade",
+    onRequestClose: onClose,
+    accessibilityViewIsModal: true,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.backdrop,
+      accessibilityViewIsModal: true,
+      children: [/*#__PURE__*/_jsx(Carousel, {
+        ref: carouselRef,
+        data: images,
+        defaultIndex: initialIndex,
+        onIndexChange: handleSwipe,
+        renderItem: renderItem,
+        showPagination: false
+        // Dormant today (no thumbnail strip in the lightbox) but wired anyway:
+        // enabling thumbnails here later must not resurrect an un-silenceable
+        // haptic.
+        ,
+        haptic: haptic
+      }), showCounter && images.length > 0 ? /*#__PURE__*/_jsx(View, {
+        style: styles.counterPill,
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.counterText, {
+            color: theme.colors.text.inverse
+          }],
+          accessibilityLabel: `Image ${activeIndex + 1} of ${images.length}`,
+          children: `${activeIndex + 1} / ${images.length}`
+        })
+      }) : null, /*#__PURE__*/_jsx(Pressable, {
+        onPress: onClose,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close gallery",
+        style: styles.closeButton,
+        hitSlop: 12,
+        children: theme.icons?.close ? theme.icons.close({
+          size: 24,
+          color: theme.colors.text.inverse
+        }) : /*#__PURE__*/_jsx(Text, {
+          style: {
+            fontSize: 24,
+            color: theme.colors.text.inverse
+          },
+          children: "\xD7"
+        })
+      }), caption ? /*#__PURE__*/_jsx(Animated.View, {
+        style: styles.captionWrap,
+        entering: undefined,
+        accessibilityElementsHidden: false,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.captionText,
+          numberOfLines: 3,
+          children: caption
+        })
+      }) : null]
+    })
+  });
+};
+
+// ───────── ZoomableImage ─────────
+
+const ZoomableImage = ({
+  image,
+  index,
+  total,
+  active,
+  enabled,
+  maxScale,
+  minScale,
+  doubleTapScale,
+  haptic
+}) => {
+  const screen = Dimensions.get('window');
+  const scale = useSharedValue(1);
+  const savedScale = useSharedValue(1);
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+  const savedTranslateX = useSharedValue(0);
+  const savedTranslateY = useSharedValue(0);
+  const resetTransform = useCallback(() => {
+    scale.value = withSpring(1, SPRING_CONFIG);
+    savedScale.value = 1;
+    translateX.value = withSpring(0, SPRING_CONFIG);
+    translateY.value = withSpring(0, SPRING_CONFIG);
+    savedTranslateX.value = 0;
+    savedTranslateY.value = 0;
+  }, [scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY]);
+
+  // When the slide leaves the active position, smoothly snap back to baseline.
+  React.useEffect(() => {
+    if (!active) {
+      scale.value = withTiming(1, {
+        duration: 150
+      });
+      translateX.value = withTiming(0, {
+        duration: 150
+      });
+      translateY.value = withTiming(0, {
+        duration: 150
+      });
+      savedScale.value = 1;
+      savedTranslateX.value = 0;
+      savedTranslateY.value = 0;
+    }
+  }, [active, scale, translateX, translateY, savedScale, savedTranslateX, savedTranslateY]);
+  const triggerImpact = useCallback(() => {
+    if (haptic !== false) {
+      triggerHaptic('impactLight');
+    }
+  }, [haptic]);
+  const pinch = useMemo(() => Gesture.Pinch().enabled(enabled).onStart(() => {
+    'worklet';
+
+    savedScale.value = scale.value;
+  }).onUpdate(e => {
+    'worklet';
+
+    const next = savedScale.value * e.scale;
+    // Clamp minScale..maxScale on the UI thread so pinch feels rubbery at limits.
+    if (next < minScale) {
+      scale.value = minScale + (next - minScale) * 0.3;
+    } else if (next > maxScale) {
+      scale.value = maxScale + (next - maxScale) * 0.2;
+    } else {
+      scale.value = next;
+    }
+  }).onEnd(() => {
+    'worklet';
+
+    if (scale.value < minScale) {
+      scale.value = withSpring(minScale, SPRING_CONFIG);
+      translateX.value = withSpring(0, SPRING_CONFIG);
+      translateY.value = withSpring(0, SPRING_CONFIG);
+      savedScale.value = minScale;
+      savedTranslateX.value = 0;
+      savedTranslateY.value = 0;
+      return;
+    }
+    if (scale.value > maxScale) {
+      scale.value = withSpring(maxScale, SPRING_CONFIG);
+      savedScale.value = maxScale;
+      return;
+    }
+    savedScale.value = scale.value;
+  }), [enabled, scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY, minScale, maxScale]);
+
+  // Pan only engages when zoomed in — otherwise the parent Carousel owns horizontal swipe.
+  const pan = useMemo(() => Gesture.Pan().minPointers(1).maxPointers(1).onStart(() => {
+    'worklet';
+
+    savedTranslateX.value = translateX.value;
+    savedTranslateY.value = translateY.value;
+  }).onUpdate(e => {
+    'worklet';
+
+    if (scale.value <= 1) {
+      return;
+    }
+    translateX.value = savedTranslateX.value + e.translationX;
+    translateY.value = savedTranslateY.value + e.translationY;
+  }).onEnd(() => {
+    'worklet';
+
+    savedTranslateX.value = translateX.value;
+    savedTranslateY.value = translateY.value;
+  }), [scale, translateX, translateY, savedTranslateX, savedTranslateY]);
+  const doubleTap = useMemo(() => Gesture.Tap().numberOfTaps(2).onEnd(() => {
+    'worklet';
+
+    runOnJS(triggerImpact)();
+    if (scale.value > 1) {
+      scale.value = withSpring(1, SPRING_CONFIG);
+      translateX.value = withSpring(0, SPRING_CONFIG);
+      translateY.value = withSpring(0, SPRING_CONFIG);
+      savedScale.value = 1;
+      savedTranslateX.value = 0;
+      savedTranslateY.value = 0;
+    } else {
+      scale.value = withSpring(doubleTapScale, SPRING_CONFIG);
+      savedScale.value = doubleTapScale;
+    }
+  }), [scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY, triggerImpact, doubleTapScale]);
+
+  // Race the gestures so they coordinate cleanly: a tap won't be misread as a tiny pan,
+  // and pan won't fire when the user actually starts a pinch.
+  const composed = useMemo(() => Gesture.Race(pinch, pan, doubleTap), [pinch, pan, doubleTap]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: translateX.value
+    }, {
+      translateY: translateY.value
+    }, {
+      scale: scale.value
+    }]
+  }));
+
+  // Reset when the user navigates away from this slide.
+  React.useEffect(() => {
+    if (!active) {
+      resetTransform();
+    }
+  }, [active, resetTransform]);
+  const a11y = image.alt ?? `Image ${index + 1} of ${total}`;
+  return /*#__PURE__*/_jsx(GestureDetector, {
+    gesture: composed,
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [lightboxImageStyles.container, {
+        width: screen.width
+      }],
+      children: /*#__PURE__*/_jsx(Animated.Image, {
+        source: image.source,
+        resizeMode: "contain",
+        style: [lightboxImageStyles.image, animatedStyle],
+        accessibilityLabel: a11y,
+        accessible: true
+      })
+    })
+  });
+};
+
+// ───────── Helpers / Styles ─────────
+
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const buildStyles = theme => StyleSheet.create({
+  container: {
+    width: '100%'
+  },
+  carouselWrap: {
+    width: '100%',
+    position: 'relative'
+  },
+  imageWrap: {
+    width: '100%',
+    aspectRatio: 16 / 9,
+    backgroundColor: theme.colors.background.secondary,
+    overflow: 'hidden',
+    borderRadius: theme.radius.md
+  },
+  image: {
+    width: '100%',
+    height: '100%'
+  },
+  thumbnailImage: {
+    width: '100%',
+    height: '100%'
+  },
+  counterPill: {
+    position: 'absolute',
+    top: 12,
+    alignSelf: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: theme.radius.full,
+    backgroundColor: 'rgba(0,0,0,0.55)'
+  },
+  counterText: {
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.semibold
+  }
+});
+const buildLightboxStyles = theme => StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: '#000',
+    justifyContent: 'center'
+  },
+  counterPill: {
+    position: 'absolute',
+    top: 48,
+    alignSelf: 'center',
+    paddingHorizontal: 14,
+    paddingVertical: 6,
+    borderRadius: theme.radius.full,
+    backgroundColor: 'rgba(0,0,0,0.6)'
+  },
+  counterText: {
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.semibold
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 44,
+    right: 16,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,0.5)'
+  },
+  captionWrap: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 32,
+    paddingHorizontal: 24
+  },
+  captionText: {
+    color: '#FFFFFF',
+    fontSize: 14,
+    lineHeight: 20,
+    textAlign: 'center'
+  }
+});
+const lightboxImageStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  image: {
+    width: '100%',
+    height: '100%'
+  }
+});
+export { ImageGallery };
+export default ImageGallery;
+//# sourceMappingURL=ImageGallery.js.map

package/lib/module/components/ImageGallery/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default, ImageGallery } from "./ImageGallery.js";
+//# sourceMappingURL=index.js.map