@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/module/components/Carousel/Carousel.js

@@ -0,0 +1,581 @@
+"use strict";
+
+/**
+ * Carousel — generic horizontal carousel with pagination, auto-play, and looping.
+ *
+ * Backed by a virtualized FlatList for memory efficiency. Pagination is driven
+ * by `Animated.event` with `useNativeDriver` so the indicator tracks the scroll
+ * gesture frame-perfectly without round-tripping to JS.
+ *
+ * USAGE:
+ *
+ * const ref = useRef<CarouselRef>(null);
+ * <Carousel
+ *   data={items}
+ *   renderItem={(item) => <Card {...item} />}
+ *   autoPlay
+ *   loop
+ * />
+ *
+ * ref.current?.scrollTo(2);
+ * ref.current?.next();
+ * ref.current?.prev();
+ */
+
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Animated, Dimensions, FlatList, Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { createAnimatedValue, useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { smoothCorners } from "../../utils/corners.js";
+import { Skeleton } from "../Skeleton/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// We intentionally use a generic forwardRef wrapper — the inner component is
+// untyped at the generic level (forwardRef can't preserve generics in TS yet),
+// so we cast via a typed factory below.
+const CarouselInner = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    data,
+    renderItem,
+    keyExtractor,
+    index: controlledIndex,
+    defaultIndex = 0,
+    onIndexChange,
+    autoPlay = false,
+    autoPlayInterval = 4000,
+    loop = false,
+    showPagination = true,
+    paginationStyle = 'dots',
+    itemWidth = 'screen',
+    spacing = 0,
+    containerStyle,
+    accessibilityLabel,
+    testID,
+    showThumbnails = false,
+    haptic,
+    renderThumbnail,
+    loading = false
+  } = props;
+  const theme = useTheme();
+  const isControlled = typeof controlledIndex === 'number';
+  const isLooping = loop || autoPlay;
+  const [containerWidth, setContainerWidth] = useState(() => Dimensions.get('window').width);
+  const resolvedItemWidth = itemWidth === 'screen' ? containerWidth : itemWidth;
+  const slideStride = resolvedItemWidth + spacing;
+  const flatListRef = useRef(null);
+  const scrollX = useRef(createAnimatedValue(0)).current;
+  const initialIndex = clamp(isControlled ? controlledIndex : defaultIndex, 0, Math.max(0, data.length - 1));
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+
+  // Refs for auto-play & idle resume.
+  const autoPlayTimerRef = useRef(null);
+  const resumeTimerRef = useRef(null);
+  const isUserDraggingRef = useRef(false);
+  const currentIndexRef = useRef(currentIndex);
+  currentIndexRef.current = currentIndex;
+  const setIndexJS = useCallback(next => {
+    const safe = clamp(next, 0, Math.max(0, data.length - 1));
+    setCurrentIndex(prev => {
+      if (prev === safe) {
+        return prev;
+      }
+      onIndexChange?.(safe);
+      return safe;
+    });
+  }, [data.length, onIndexChange]);
+  const scrollTo = useCallback((target, animated = true) => {
+    if (data.length === 0) {
+      return;
+    }
+    const safe = clamp(target, 0, data.length - 1);
+    flatListRef.current?.scrollToOffset({
+      offset: safe * slideStride,
+      animated
+    });
+    setIndexJS(safe);
+  }, [data.length, slideStride, setIndexJS]);
+  const next = useCallback(() => {
+    if (data.length === 0) {
+      return;
+    }
+    const target = currentIndexRef.current + 1;
+    if (target >= data.length) {
+      if (isLooping) {
+        scrollTo(0, false);
+      }
+      return;
+    }
+    scrollTo(target, true);
+  }, [data.length, isLooping, scrollTo]);
+  const prev = useCallback(() => {
+    if (data.length === 0) {
+      return;
+    }
+    const target = currentIndexRef.current - 1;
+    if (target < 0) {
+      if (isLooping) {
+        scrollTo(data.length - 1, false);
+      }
+      return;
+    }
+    scrollTo(target, true);
+  }, [data.length, isLooping, scrollTo]);
+  useImperativeHandle(ref, () => ({
+    scrollTo,
+    next,
+    prev
+  }), [scrollTo, next, prev]);
+
+  // Drive controlled `index` prop.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: controlled-prop driver: adding `currentIndex` would scroll back to the controlled index while the user is mid-swipe
+  useEffect(() => {
+    if (!isControlled) {
+      return;
+    }
+    if (controlledIndex === currentIndex) {
+      return;
+    }
+    scrollTo(controlledIndex, true);
+  }, [controlledIndex]);
+
+  // ─── Auto-play ───
+  const clearAutoPlay = useCallback(() => {
+    if (autoPlayTimerRef.current) {
+      clearInterval(autoPlayTimerRef.current);
+      autoPlayTimerRef.current = null;
+    }
+  }, []);
+  const startAutoPlay = useCallback(() => {
+    if (!autoPlay || data.length <= 1) {
+      return;
+    }
+    clearAutoPlay();
+    autoPlayTimerRef.current = setInterval(() => {
+      if (isUserDraggingRef.current) {
+        return;
+      }
+      const cur = currentIndexRef.current;
+      const target = cur + 1;
+      if (target >= data.length) {
+        scrollTo(0, false);
+      } else {
+        scrollTo(target, true);
+      }
+    }, autoPlayInterval);
+  }, [autoPlay, autoPlayInterval, data.length, scrollTo, clearAutoPlay]);
+  useEffect(() => {
+    startAutoPlay();
+    return () => {
+      clearAutoPlay();
+      if (resumeTimerRef.current) {
+        clearTimeout(resumeTimerRef.current);
+      }
+    };
+  }, [startAutoPlay, clearAutoPlay]);
+
+  // ─── Scroll handlers ───
+  const onScroll = useMemo(() => Animated.event([{
+    nativeEvent: {
+      contentOffset: {
+        x: scrollX
+      }
+    }
+  }], {
+    useNativeDriver: false
+  } // pagination width interpolation needs JS driver
+  ), [scrollX]);
+  const onMomentumScrollEnd = useCallback(e => {
+    if (slideStride <= 0) {
+      return;
+    }
+    const offsetX = e.nativeEvent.contentOffset.x;
+    const idx = Math.round(offsetX / slideStride);
+    setIndexJS(idx);
+  }, [slideStride, setIndexJS]);
+  const onScrollBeginDrag = useCallback(() => {
+    isUserDraggingRef.current = true;
+    clearAutoPlay();
+    if (resumeTimerRef.current) {
+      clearTimeout(resumeTimerRef.current);
+      resumeTimerRef.current = null;
+    }
+  }, [clearAutoPlay]);
+  const onScrollEndDrag = useCallback(() => {
+    isUserDraggingRef.current = false;
+    if (!autoPlay) {
+      return;
+    }
+    if (resumeTimerRef.current) {
+      clearTimeout(resumeTimerRef.current);
+    }
+    resumeTimerRef.current = setTimeout(() => {
+      startAutoPlay();
+    }, 1000);
+  }, [autoPlay, startAutoPlay]);
+
+  // ─── A11y ───
+  const onAccessibilityAction = useCallback(event => {
+    switch (event.nativeEvent.actionName) {
+      case 'increment':
+        next();
+        break;
+      case 'decrement':
+        prev();
+        break;
+    }
+  }, [next, prev]);
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const flatListRenderItem = useCallback(({
+    item,
+    index: i
+  }) => /*#__PURE__*/_jsx(View, {
+    style: {
+      width: resolvedItemWidth,
+      marginRight: i === data.length - 1 ? 0 : spacing
+    },
+    accessibilityElementsHidden: i !== currentIndex,
+    importantForAccessibility: i === currentIndex ? 'yes' : 'no-hide-descendants',
+    children: renderItem(item, i)
+  }), [renderItem, resolvedItemWidth, spacing, data.length, currentIndex]);
+  const defaultKeyExtractor = useCallback((_, i) => String(i), []);
+  const getItemLayout = useCallback((_data, i) => ({
+    length: slideStride,
+    offset: slideStride * i,
+    index: i
+  }), [slideStride]);
+  if (loading) {
+    return /*#__PURE__*/_jsx(CarouselSkeleton, {
+      ...props,
+      containerWidth: containerWidth
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, containerStyle],
+    onLayout: e => setContainerWidth(e.nativeEvent.layout.width),
+    accessibilityRole: 'adjustable',
+    accessibilityLabel: accessibilityLabel ?? 'Carousel',
+    accessibilityValue: {
+      min: 0,
+      max: Math.max(0, data.length - 1),
+      now: currentIndex,
+      text: `Slide ${currentIndex + 1} of ${data.length}`
+    },
+    accessibilityActions: [{
+      name: 'increment'
+    }, {
+      name: 'decrement'
+    }],
+    onAccessibilityAction: onAccessibilityAction,
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(FlatList, {
+      ref: flatListRef,
+      data: data,
+      keyExtractor: keyExtractor ?? defaultKeyExtractor,
+      renderItem: flatListRenderItem,
+      horizontal: true,
+      pagingEnabled: itemWidth === 'screen' && spacing === 0,
+      snapToInterval: slideStride,
+      snapToAlignment: "start",
+      decelerationRate: "fast",
+      showsHorizontalScrollIndicator: false,
+      onScroll: onScroll,
+      scrollEventThrottle: 16,
+      onMomentumScrollEnd: onMomentumScrollEnd,
+      onScrollBeginDrag: onScrollBeginDrag,
+      onScrollEndDrag: onScrollEndDrag,
+      getItemLayout: getItemLayout,
+      initialScrollIndex: initialIndex,
+      bounces: false
+    }), showPagination && data.length > 1 ? /*#__PURE__*/_jsx(Pagination, {
+      count: data.length,
+      currentIndex: currentIndex,
+      scrollX: scrollX,
+      slideStride: slideStride,
+      variant: paginationStyle,
+      theme: theme
+    }) : null, showThumbnails && data.length > 0 ? /*#__PURE__*/_jsx(ThumbnailStrip, {
+      data: data,
+      currentIndex: currentIndex,
+      renderThumbnail: renderThumbnail,
+      onSelect: idx => {
+        const h = resolveHaptic(haptic, 'selection');
+        if (h) {
+          triggerHaptic(h);
+        }
+        scrollTo(idx, true);
+      },
+      theme: theme
+    }) : null]
+  });
+});
+CarouselInner.displayName = 'Carousel';
+
+/**
+ * Placeholder shape for `<Carousel>`. Renders one full-width slide skeleton
+ * plus pagination dots underneath, so the visual footprint matches the
+ * loaded state. `containerWidth` is forwarded from the live component when
+ * known; otherwise falls back to a 320 default.
+ */
+const CarouselSkeleton = ({
+  itemWidth = 'screen',
+  showPagination = true,
+  paginationStyle = 'dots',
+  containerStyle,
+  containerWidth
+}) => {
+  const slideWidth = itemWidth === 'screen' ? containerWidth || 320 : itemWidth;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [carouselSkeletonStyles.container, containerStyle],
+    children: [/*#__PURE__*/_jsx(Skeleton, {
+      width: slideWidth,
+      height: 160,
+      radius: "md"
+    }), showPagination ? /*#__PURE__*/_jsx(View, {
+      style: [carouselSkeletonStyles.paginationRow, {
+        marginTop: 12
+      }],
+      children: Array.from({
+        length: 3
+      }).map((_, i) => paginationStyle === 'numbers' ? /*#__PURE__*/_jsx(Skeleton, {
+        width: 24,
+        height: 16,
+        radius: "sm",
+        style: {
+          marginHorizontal: 4
+        }
+      }, `sk-pg-${i}`) : paginationStyle === 'bars' ? /*#__PURE__*/_jsx(Skeleton, {
+        width: 20,
+        height: 4,
+        radius: 2,
+        style: {
+          marginHorizontal: 3
+        }
+      }, `sk-pg-${i}`) : /*#__PURE__*/_jsx(Skeleton, {
+        shape: "circle",
+        width: 8,
+        height: 8,
+        style: {
+          marginHorizontal: 4
+        }
+      }, `sk-pg-${i}`))
+    }) : null]
+  });
+};
+CarouselSkeleton.displayName = 'CarouselSkeleton';
+const carouselSkeletonStyles = StyleSheet.create({
+  container: {
+    alignItems: 'center'
+  },
+  paginationRow: {
+    flexDirection: 'row',
+    justifyContent: 'center'
+  }
+});
+
+// Public typed factory — preserves the generic signature.
+const Carousel = CarouselInner;
+Carousel.Skeleton = CarouselSkeleton;
+
+// ───────── Pagination ─────────
+
+const Pagination = ({
+  count,
+  currentIndex,
+  scrollX,
+  slideStride,
+  variant,
+  theme
+}) => {
+  if (variant === 'numbers') {
+    return /*#__PURE__*/_jsx(View, {
+      style: paginationStyles.numbersWrap,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [paginationStyles.numbersText, {
+          color: theme.colors.text.secondary,
+          fontSize: theme.typography.fontSize.sm,
+          fontWeight: theme.typography.fontWeight.medium
+        }],
+        accessibilityLabel: `Slide ${currentIndex + 1} of ${count}`,
+        children: `${currentIndex + 1} / ${count}`
+      })
+    });
+  }
+  const items = Array.from({
+    length: count
+  }, (_, i) => i);
+  const isBars = variant === 'bars';
+  const baseSize = isBars ? 24 : 6;
+  const expandedSize = isBars ? 36 : 16;
+  const height = isBars ? 3 : 6;
+  return /*#__PURE__*/_jsx(View, {
+    style: paginationStyles.dotRow,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    children: items.map(i => {
+      const inputRange = [(i - 1) * slideStride, i * slideStride, (i + 1) * slideStride];
+      const widthAnim = scrollX.interpolate({
+        inputRange,
+        outputRange: [baseSize, expandedSize, baseSize],
+        extrapolate: 'clamp'
+      });
+      const opacityAnim = scrollX.interpolate({
+        inputRange,
+        outputRange: [0.5, 1, 0.5],
+        extrapolate: 'clamp'
+      });
+      return /*#__PURE__*/_jsx(Animated.View, {
+        style: [{
+          width: widthAnim,
+          height,
+          marginHorizontal: 4,
+          borderRadius: height / 2,
+          ...smoothCorners,
+          backgroundColor: i === currentIndex ? theme.colors.primary : theme.colors.border.primary,
+          opacity: opacityAnim
+        }]
+      }, i);
+    })
+  });
+};
+
+// ───────── Thumbnail Strip ─────────
+
+const ThumbnailStrip = ({
+  data,
+  currentIndex,
+  renderThumbnail,
+  onSelect,
+  theme
+}) => {
+  return /*#__PURE__*/_jsx(ScrollView, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    contentContainerStyle: thumbStyles.row,
+    accessibilityRole: "tablist",
+    children: data.map((item, i) => /*#__PURE__*/_jsx(ThumbnailItem, {
+      item: item,
+      index: i,
+      isActive: i === currentIndex,
+      renderThumbnail: renderThumbnail,
+      onPress: () => onSelect(i),
+      theme: theme
+    }, i))
+  });
+};
+const ThumbnailItem = ({
+  item,
+  index,
+  isActive,
+  renderThumbnail,
+  onPress,
+  theme
+}) => {
+  const scale = useRef(createAnimatedValue(isActive ? 1.1 : 1)).current;
+  useEffect(() => {
+    const anim = Animated.spring(scale, {
+      toValue: isActive ? 1.1 : 1,
+      useNativeDriver: true,
+      friction: 6,
+      tension: 80
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [isActive, scale]);
+  const content = useMemo(() => {
+    if (renderThumbnail) {
+      return renderThumbnail(item, index);
+    }
+    if (item && typeof item === 'object' && 'uri' in item && typeof item.uri === 'string') {
+      return /*#__PURE__*/_jsx(Image, {
+        source: {
+          uri: item.uri
+        },
+        style: thumbStyles.image,
+        resizeMode: "cover"
+      });
+    }
+    return /*#__PURE__*/_jsx(View, {
+      style: [thumbStyles.placeholder, {
+        backgroundColor: theme.colors.background.secondary
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: {
+          color: theme.colors.text.secondary,
+          fontSize: theme.typography.fontSize.xs,
+          fontWeight: theme.typography.fontWeight.semibold
+        },
+        children: index + 1
+      })
+    });
+  }, [item, index, renderThumbnail, theme]);
+  return /*#__PURE__*/_jsx(Pressable, {
+    onPress: onPress,
+    accessibilityRole: "tab",
+    accessibilityState: {
+      selected: isActive
+    },
+    accessibilityLabel: `Go to slide ${index + 1}`,
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [thumbStyles.thumb, {
+        borderColor: isActive ? theme.colors.primary : 'transparent',
+        transform: [{
+          scale
+        }]
+      }],
+      children: content
+    })
+  });
+};
+const thumbStyles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 8
+  },
+  thumb: {
+    width: 40,
+    height: 40,
+    marginHorizontal: 4,
+    borderRadius: 6,
+    ...smoothCorners,
+    borderWidth: 2,
+    overflow: 'hidden'
+  },
+  image: {
+    width: '100%',
+    height: '100%'
+  },
+  placeholder: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+
+// ───────── Helpers ─────────
+
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const buildStyles = _theme => StyleSheet.create({
+  container: {
+    width: '100%'
+  }
+});
+const paginationStyles = StyleSheet.create({
+  dotRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 12
+  },
+  numbersWrap: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 12
+  },
+  numbersText: {
+    textAlign: 'center'
+  }
+});
+export { Carousel };
+export default Carousel;
+//# sourceMappingURL=Carousel.js.map

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

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