@zezosoft/zezo-ott-react-native-ui-kit 0.1.0 → 1.0.0

package/src/components/Content/Card/Styles/TopTen.tsx

@@ -0,0 +1,342 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Wed 25 Jun 2025 at 11:59 PM
+ **/
+
+import React, { memo, useCallback, useMemo, useRef } from 'react';
+import {
+  View,
+  FlatList,
+  TouchableOpacity,
+  StyleSheet,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+  type AccessibilityProps,
+  type ListRenderItem
+} from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import { useTheme } from '../../../../theme';
+import NavigateToMore from '../components/NavigateToMore';
+import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
+import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
+import type { AppTheme, ITheme } from '../../../../theme/themes';
+import FastImage from 'react-native-fast-image';
+import LinearGradient from 'react-native-linear-gradient';
+import { Text } from '../../../Text';
+import CardPoster from '../components/CardPoster';
+
+const DEFAULT_ITEM_WIDTH = moderateScale(120);
+const DEFAULT_ITEM_HEIGHT = moderateScale(180);
+const DEFAULT_BORDER_RADIUS = moderateScale(8);
+const DEFAULT_SKELETON_COUNT = 5;
+
+type TopTenCardProps = {
+  title: string;
+  section_id: string;
+  type: IGetSectionData['type'];
+  data: ISectionContent | null;
+  moreFetchData?: MoreFetchData<IContentData>;
+  onPressItem?: (item: IContentData) => void;
+  onPressMore?: (params: {
+    section_id: IGetSectionData['_id'];
+    name: IGetSectionData['name'];
+    type: IGetSectionData['type'];
+  }) => void;
+  itemWidth?: number;
+  itemHeight?: number;
+  borderRadius?: number;
+  skeletonCount?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  itemStyle?: StyleProp<ViewStyle>;
+  isLoading?: boolean;
+  theme?: AppTheme;
+} & AccessibilityProps;
+
+const TopTenCard: React.FC<TopTenCardProps> = ({
+  title,
+  section_id,
+  data: initialData,
+  moreFetchData,
+  onPressMore,
+  type,
+  onPressItem,
+  itemWidth = DEFAULT_ITEM_WIDTH,
+  itemHeight = DEFAULT_ITEM_HEIGHT,
+  borderRadius = DEFAULT_BORDER_RADIUS,
+  skeletonCount = DEFAULT_SKELETON_COUNT,
+  containerStyle,
+  titleStyle,
+  itemStyle,
+  isLoading = false,
+  theme,
+  accessibilityLabel,
+  accessibilityHint
+}) => {
+  const flatListRef = useRef<FlatList<IContentData>>(null);
+  const onEndReachedDuringMomentum = useRef(false);
+  const { theme: appliedTheme } = useTheme(theme);
+  const styles = useMemo(
+    () => getStyles(appliedTheme, itemWidth, itemHeight, borderRadius),
+    [appliedTheme, itemWidth, itemHeight, borderRadius]
+  );
+
+  const {
+    data,
+    pagination: paginated,
+    loading: isPaginating,
+    loadMoreData
+  } = usePaginatedSection(section_id, moreFetchData, initialData?.data || [], isLoading);
+
+  const listData = useMemo(() => (Array.isArray(data) ? data : []), [data]);
+
+  const handleEndReached = useCallback(() => {
+    if (!onEndReachedDuringMomentum.current && paginated?.hasNextPage && paginated?.nextPage) {
+      onEndReachedDuringMomentum.current = true;
+      loadMoreData(paginated.nextPage);
+    }
+  }, [loadMoreData, paginated?.hasNextPage, paginated?.nextPage]);
+  const handleItemPress = useCallback(
+    (item: IContentData) => {
+      onPressItem?.(item);
+    },
+    [onPressItem]
+  );
+  const renderItem = useCallback(
+    ({ item, index }: { item: IContentData; index: number }) => {
+      const lastIndex = listData.length - 1;
+      const isLastItem = index === lastIndex && lastIndex >= 9;
+
+      return (
+        <TouchableOpacity
+          style={[styles.item, index === 0 && styles.firstItem, itemStyle]}
+          onPress={() => handleItemPress(item)}
+          activeOpacity={0.8}
+        >
+          <LinearGradient colors={['rgba(0,0,0,0)', 'rgba(0,0,0,0.8)']} style={styles.imageOverlay}>
+            <CardPoster
+              posterUri={item.poster}
+              isLoading={isLoading}
+              borderRadius={borderRadius}
+              posterWrapperStyle={[styles.image, isLastItem && styles.lastImage]}
+              resizeMode={FastImage.resizeMode.cover}
+              theme={appliedTheme}
+            />
+            <View style={styles.numberContainer}>
+              <LinearGradient
+                colors={appliedTheme.colors.backgroundLayoutGradient}
+                start={{ x: 1, y: 0.5 }}
+                end={{ x: 0.5, y: 1 }}
+                style={styles.rankNumberBox}
+              >
+                <Text style={styles.rankNumberText}>{index + 1}</Text>
+              </LinearGradient>
+            </View>
+          </LinearGradient>
+        </TouchableOpacity>
+      );
+    },
+    [
+      listData.length,
+      styles.item,
+      styles.firstItem,
+      styles.imageOverlay,
+      styles.image,
+      styles.lastImage,
+      styles.numberContainer,
+      styles.rankNumberBox,
+      styles.rankNumberText,
+      itemStyle,
+      isLoading,
+      borderRadius,
+      appliedTheme,
+      handleItemPress
+    ]
+  );
+
+  const renderSkeletonItem: ListRenderItem<null> = useCallback(
+    ({ index }) => (
+      <SkeletonPlaceholder
+        key={`skeleton-${index}`}
+        highlightColor={appliedTheme.colors.skeletonHighlightColor}
+        backgroundColor={appliedTheme.colors.skeletonBaseColor}
+      >
+        <SkeletonPlaceholder.Item
+          width={itemWidth}
+          height={itemHeight}
+          borderRadius={borderRadius}
+          marginRight={moderateScale(12)}
+          marginLeft={index === 0 ? moderateScale(12) : 0}
+        />
+      </SkeletonPlaceholder>
+    ),
+    [appliedTheme, itemWidth, itemHeight, borderRadius]
+  );
+  if (!initialData) {
+    return null;
+  }
+  if (!isLoading && (!listData || listData.length === 0)) return null;
+
+  if (isLoading) {
+    return (
+      <View style={[styles.root, containerStyle]} testID={`movie-card-skeleton-${section_id}`}>
+        <SkeletonPlaceholder
+          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          backgroundColor={appliedTheme.colors.skeletonBaseColor}
+        >
+          <SkeletonPlaceholder.Item
+            width={moderateScale(100)}
+            height={verticalScale(14)}
+            borderRadius={moderateScale(4)}
+            marginLeft={moderateScale(12)}
+            marginBottom={verticalScale(6)}
+          />
+        </SkeletonPlaceholder>
+        <FlatList
+          data={Array.from({ length: skeletonCount }, () => null)}
+          horizontal
+          keyExtractor={(_, index) => `skeleton-${index}`}
+          renderItem={renderSkeletonItem}
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.listContent}
+        />
+      </View>
+    );
+  }
+  return (
+    <View
+      style={[styles.root, containerStyle]}
+      accessibilityLabel={accessibilityLabel || `Top Ten Section: ${title}`}
+      accessibilityHint={accessibilityHint || 'Scroll to view top content'}
+    >
+      <NavigateToMore
+        title={title}
+        onPress={() =>
+          onPressMore?.({
+            section_id,
+            name: title,
+            type
+          })
+        }
+        titleStyle={[styles.title, titleStyle]}
+        containerStyle={styles.navigateToMoreContainer}
+        showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+      />
+      <FlatList
+        ref={flatListRef}
+        data={listData}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        keyExtractor={(item, index) => `${item._id ?? item.name}-${index}`}
+        renderItem={renderItem}
+        contentContainerStyle={styles.listContent}
+        initialNumToRender={5}
+        maxToRenderPerBatch={10}
+        windowSize={5}
+        onEndReachedThreshold={0.5}
+        onMomentumScrollBegin={() => {
+          onEndReachedDuringMomentum.current = false;
+        }}
+        onEndReached={handleEndReached}
+        ListFooterComponent={
+          isPaginating ? (
+            <SkeletonPlaceholder
+              highlightColor={appliedTheme.colors.skeletonHighlightColor}
+              backgroundColor={appliedTheme.colors.skeletonBaseColor}
+              speed={800}
+            >
+              <View style={[styles.item, styles.skeletonItem]}>
+                <SkeletonPlaceholder.Item width={itemWidth} height={itemHeight} borderRadius={borderRadius} />
+                <View style={styles.numberContainer}>
+                  <SkeletonPlaceholder.Item width={scale(40)} height={scale(40)} borderTopRightRadius={scale(30)} />
+                </View>
+              </View>
+            </SkeletonPlaceholder>
+          ) : null
+        }
+      />
+    </View>
+  );
+};
+
+const getStyles = (theme: ITheme, width: number, height: number, radius: number) =>
+  StyleSheet.create({
+    root: {
+      marginVertical: verticalScale(6)
+    },
+    item: {
+      width,
+      height,
+      marginRight: moderateScale(12),
+      overflow: 'hidden',
+      borderColor: theme.colors.outlineDisabled,
+      borderWidth: scale(0.5),
+      aspectRatio: 2 / 3,
+      borderRadius: radius,
+      position: 'relative'
+    },
+    firstItem: {
+      marginLeft: moderateScale(12)
+    },
+    imageOverlay: {
+      width: '100%',
+      height: '100%',
+      justifyContent: 'flex-end',
+      alignItems: 'flex-start'
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+      borderRadius: radius
+    },
+    lastImage: {
+      marginLeft: scale(50)
+    },
+    rankNumberBox: {
+      width: scale(40),
+      height: scale(40),
+      borderTopRightRadius: scale(30),
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    rankNumberText: {
+      fontSize: scale(28),
+      fontWeight: '900',
+      color: theme.colors.textPrimary,
+      textShadowColor: 'rgba(0, 0, 0, 0.6)',
+      textShadowOffset: { width: 1, height: 1 },
+      textShadowRadius: 3,
+      marginTop: scale(5),
+      marginRight: scale(5),
+      letterSpacing: 0.5
+    },
+    numberContainer: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      zIndex: 10
+    },
+    navigateToMoreContainer: {
+      paddingHorizontal: moderateScale(16),
+      marginBottom: verticalScale(8)
+    },
+    listContent: {
+      paddingRight: moderateScale(20)
+    },
+    title: {
+      fontSize: moderateScale(14),
+      fontWeight: '600',
+      color: theme.colors.textPrimary
+    },
+    skeletonItem: {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.1,
+      shadowRadius: 2,
+      elevation: 1
+    }
+  });
+
+export default memo(TopTenCard);

package/src/components/Content/Card/Styles/Two.tsx

@@ -0,0 +1,288 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Thu 26 Jun 2025 at 10:00 AM
+ */
+
+import React, { memo, useCallback, useMemo, useRef } from 'react';
+import {
+  View,
+  FlatList,
+  TouchableOpacity,
+  StyleSheet,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+  type AccessibilityProps,
+  type ListRenderItem,
+  type ListRenderItemInfo
+} from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import FastImage from 'react-native-fast-image';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+
+import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
+import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
+import type { AppTheme, ITheme } from '../../../../theme/themes';
+import { useTheme } from '../../../../theme';
+import NavigateToMore from '../components/NavigateToMore';
+import CardPoster from '../components/CardPoster';
+
+// Defaults
+const DEFAULT_WIDTH = moderateScale(172);
+const DEFAULT_BORDER_RADIUS = moderateScale(5);
+const DEFAULT_SKELETON_COUNT = 3;
+
+type MovieCardTwoProps = {
+  title: string;
+  section_id: string;
+  type: IGetSectionData['type'];
+  data: ISectionContent | null;
+  moreFetchData?: MoreFetchData<IContentData>;
+  onPressItem?: (item: IContentData) => void;
+  onPressMore?: (params: {
+    section_id: IGetSectionData['_id'];
+    name: IGetSectionData['name'];
+    type: IGetSectionData['type'];
+  }) => void;
+  renderItemImage?: (params: { item: IContentData; index: number }) => React.ReactNode;
+  itemWidth?: number;
+  borderRadius?: number;
+  skeletonCount?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  itemStyle?: StyleProp<ViewStyle>;
+  isLoading?: boolean;
+  theme?: AppTheme;
+} & AccessibilityProps;
+
+const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
+  title,
+  section_id,
+  data: initialData,
+  moreFetchData,
+  onPressMore,
+  onPressItem,
+  type,
+  renderItemImage,
+  itemWidth = DEFAULT_WIDTH,
+  borderRadius = DEFAULT_BORDER_RADIUS,
+  skeletonCount = DEFAULT_SKELETON_COUNT,
+  containerStyle,
+  titleStyle,
+  itemStyle,
+  isLoading = false,
+  theme,
+  accessibilityLabel,
+  accessibilityHint
+}) => {
+  const flatListRef = useRef<FlatList<IContentData>>(null);
+
+  const onEndReachedCalledDuringMomentum = useRef(false);
+  const { theme: appliedTheme } = useTheme(theme);
+
+  const styles = useMemo(
+    () => getStyles(appliedTheme, itemWidth, borderRadius),
+    [appliedTheme, itemWidth, borderRadius]
+  );
+
+  const {
+    data,
+    pagination: paginated,
+    loading: isPaginating,
+    loadMoreData
+  } = usePaginatedSection(section_id, moreFetchData, initialData?.data || [], isLoading);
+  const handleItemPress = useCallback(
+    (item: IContentData) => {
+      onPressItem?.(item);
+    },
+    [onPressItem]
+  );
+  const handlePressMore = useCallback(() => {
+    onPressMore?.({
+      section_id,
+      name: title,
+      type
+    });
+  }, [onPressMore, section_id, title, type]);
+  const handleEndReached = useCallback(() => {
+    if (!onEndReachedCalledDuringMomentum.current && paginated?.hasNextPage && paginated?.nextPage) {
+      onEndReachedCalledDuringMomentum.current = true;
+      loadMoreData(paginated.nextPage);
+    }
+  }, [loadMoreData, paginated?.hasNextPage, paginated?.nextPage]);
+  const renderItem = useCallback(
+    ({ item, index }: ListRenderItemInfo<IContentData>) => {
+      return (
+        <TouchableOpacity
+          key={index}
+          style={[styles.item, index === 0 && styles.firstItem, itemStyle]}
+          onPress={() => handleItemPress(item)}
+          activeOpacity={0.85}
+          testID={`movie-card-two-item-${index}`}
+          accessibilityLabel={`Card Two: ${item.name || 'item'} ${index + 1}`}
+          accessibilityHint="Press to view movie details"
+        >
+          {renderItemImage ? (
+            renderItemImage({ item, index })
+          ) : (
+            <CardPoster
+              posterUri={item.poster}
+              theme={appliedTheme}
+              borderRadius={borderRadius}
+              posterWrapperStyle={styles.image}
+              resizeMode={FastImage.resizeMode.cover}
+              isLoading={isPaginating}
+            />
+          )}
+        </TouchableOpacity>
+      );
+    },
+    [
+      renderItemImage,
+      styles.item,
+      styles.firstItem,
+      styles.image,
+      itemStyle,
+      appliedTheme,
+      borderRadius,
+      isPaginating,
+      handleItemPress
+    ]
+  );
+  const renderSkeletonItem: ListRenderItem<null> = useCallback(
+    ({ index }) => (
+      <SkeletonPlaceholder
+        key={`skeleton-${index}`}
+        highlightColor={appliedTheme.colors.skeletonHighlightColor}
+        backgroundColor={appliedTheme.colors.skeletonBaseColor}
+      >
+        <SkeletonPlaceholder.Item
+          width={itemWidth}
+          height={itemWidth / 0.67}
+          borderRadius={borderRadius}
+          marginRight={moderateScale(12)}
+          marginLeft={index === 0 ? moderateScale(12) : 0}
+        />
+      </SkeletonPlaceholder>
+    ),
+    [appliedTheme, itemWidth, borderRadius]
+  );
+  if (!initialData) {
+    return null;
+  }
+  const listData = data ?? [];
+
+  if (!isLoading && listData.length === 0) {
+    return null;
+  }
+
+  if (isLoading) {
+    return (
+      <View style={[styles.root, containerStyle]}>
+        <SkeletonPlaceholder
+          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          backgroundColor={appliedTheme.colors.skeletonBaseColor}
+        >
+          <SkeletonPlaceholder.Item
+            width={moderateScale(100)}
+            height={verticalScale(14)}
+            borderRadius={moderateScale(4)}
+            marginLeft={moderateScale(12)}
+            marginBottom={verticalScale(6)}
+          />
+        </SkeletonPlaceholder>
+        <FlatList
+          data={Array.from({ length: skeletonCount }, () => null)}
+          horizontal
+          keyExtractor={(_, index) => `skeleton-${index}`}
+          renderItem={renderSkeletonItem}
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.listContent}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[styles.root, containerStyle]}
+      testID={`movie-card-two-${section_id}`}
+      accessibilityLabel={accessibilityLabel || `CardTwo section: ${title}`}
+      accessibilityHint={accessibilityHint || 'Scroll to view content'}
+    >
+      <NavigateToMore
+        title={title}
+        onPress={handlePressMore}
+        containerStyle={styles.navigateToMoreContainer}
+        titleStyle={[styles.title, { color: appliedTheme.colors.textPrimary }, titleStyle]}
+        showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+      />
+      <FlatList
+        ref={flatListRef}
+        data={listData}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        keyExtractor={(item, index) => `${item._id ?? item.name}-${index}`}
+        renderItem={renderItem}
+        contentContainerStyle={styles.listContent}
+        onEndReached={handleEndReached}
+        onEndReachedThreshold={0.5}
+        onMomentumScrollBegin={() => {
+          onEndReachedCalledDuringMomentum.current = false;
+        }}
+        ListFooterComponent={
+          isPaginating ? (
+            <SkeletonPlaceholder
+              highlightColor={appliedTheme.colors.skeletonHighlightColor}
+              backgroundColor={appliedTheme.colors.skeletonBaseColor}
+            >
+              <SkeletonPlaceholder.Item
+                width={itemWidth}
+                height={itemWidth / 0.67}
+                borderRadius={borderRadius}
+                marginRight={moderateScale(12)}
+              />
+            </SkeletonPlaceholder>
+          ) : null
+        }
+      />
+    </View>
+  );
+};
+
+const getStyles = (theme: ITheme, width: number, radius: number) =>
+  StyleSheet.create({
+    root: {
+      marginVertical: verticalScale(6)
+    },
+    item: {
+      width: width,
+      height: width / 0.67,
+      marginRight: moderateScale(12),
+      borderRadius: radius,
+      overflow: 'hidden',
+      backgroundColor: theme.colors.background ?? '#2c2c2c'
+    },
+    firstItem: {
+      marginLeft: moderateScale(12)
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+      borderRadius: radius,
+      backgroundColor: theme.colors.background ?? '#222'
+    },
+    navigateToMoreContainer: {
+      paddingHorizontal: moderateScale(12),
+      marginBottom: verticalScale(8)
+    },
+    title: {
+      fontSize: moderateScale(14),
+      fontWeight: '600'
+    },
+    listContent: {
+      paddingRight: moderateScale(15)
+    }
+  });
+
+export default memo(MovieCardTwo);