@zezosoft/zezo-ott-react-native-ui-kit 1.3.4 → 1.3.6

package/src/components/Search/components/RecentSearchesSection.tsx

@@ -0,0 +1,181 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { memo } from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { RotateCcw } from 'lucide-react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { scale } from 'react-native-size-matters';
+import { Text } from '../../Text';
+import type { ITheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+type Props = {
+  recentSearches: string[];
+  isLoading: boolean;
+  onPressItem: (text: string) => void;
+  onClearAll: () => void;
+  theme: ITheme;
+};
+
+const RecentSearchesSection: React.FC<Props> = ({
+  recentSearches,
+  isLoading,
+  onPressItem,
+  onClearAll,
+  theme,
+}) => {
+  const {
+    colors: { textPrimary, skeletonBaseColor, skeletonHighlightColor, border },
+  } = theme;
+
+  const uniqueRecentSearches = [...new Set(recentSearches)];
+  const randomWidths = Array(8)
+    .fill(null)
+    .map(() =>
+      Math.round(scale(Math.floor(Math.random() * (80 - 50 + 1)) + 50))
+    );
+
+  return (
+    <View style={styles.container}>
+      {/* Header */}
+      <View style={styles.headerRow}>
+        <Text style={[styles.recentSearchText, { color: textPrimary }]}>
+          Recent Searches
+        </Text>
+        {uniqueRecentSearches.length > 0 && (
+          <TouchableOpacity
+            onPress={onClearAll}
+            accessibilityRole="button"
+            accessibilityLabel="Clear all recent searches"
+          >
+            <Text style={styles.clearAllText}>Clear All</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+
+      {/* Pills */}
+      <View style={styles.pillContainer}>
+        {isLoading ? (
+          <SkeletonPlaceholder
+            backgroundColor={skeletonBaseColor}
+            highlightColor={skeletonHighlightColor}
+            speed={1200}
+          >
+            <SkeletonPlaceholder.Item style={styles.pillSkeletonWrapper}>
+              {randomWidths.map((width, index) => (
+                <SkeletonPlaceholder.Item
+                  key={index}
+                  width={width}
+                  height={scale(32)}
+                  borderRadius={scale(5)}
+                  borderWidth={scale(0.5)}
+                  borderColor={border}
+                  marginRight={scale(6.5)}
+                  marginBottom={scale(6)}
+                />
+              ))}
+            </SkeletonPlaceholder.Item>
+          </SkeletonPlaceholder>
+        ) : uniqueRecentSearches.length > 0 ? (
+          uniqueRecentSearches.map((item, index) => (
+            <TouchableOpacity
+              key={`${item}-${index}`}
+              onPress={() => onPressItem(item)}
+              style={[
+                styles.pill,
+                { backgroundColor: skeletonBaseColor, borderColor: border },
+              ]}
+              accessibilityRole="button"
+              accessibilityLabel={`Search for ${item}`}
+              activeOpacity={0.7}
+            >
+              <RotateCcw
+                size={scale(15)}
+                color={textPrimary}
+                style={styles.pillIcon}
+              />
+              <Text
+                style={[styles.pillText, { color: textPrimary }]}
+                numberOfLines={1}
+                ellipsizeMode="tail"
+              >
+                {item}
+              </Text>
+            </TouchableOpacity>
+          ))
+        ) : (
+          <Text style={[styles.noResultsText, { color: textPrimary }]}>
+            No recent searches
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default memo(RecentSearchesSection);
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: scale(10),
+    backgroundColor: 'transparent',
+  },
+  headerRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: scale(12),
+  },
+  recentSearchText: {
+    fontSize: RFValue(12),
+    fontWeight: '600',
+    letterSpacing: 0.2,
+  },
+  clearAllText: {
+    fontSize: RFValue(10),
+    fontWeight: '500',
+    textDecorationLine: 'underline',
+  },
+  pillContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  pillSkeletonWrapper: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    flexWrap: 'wrap',
+  },
+  pill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: scale(5),
+    paddingHorizontal: scale(10),
+    borderWidth: scale(0.5),
+    paddingVertical: scale(5),
+    marginRight: scale(6.5),
+    marginBottom: scale(6),
+    maxWidth: scale(150),
+  },
+  pillText: {
+    fontSize: RFValue(10),
+    fontWeight: '500',
+    flexShrink: 1,
+  },
+  pillIcon: {
+    marginRight: scale(5),
+  },
+  skeletonPill: {
+    height: scale(32),
+    borderRadius: scale(16),
+    marginRight: scale(6.5),
+    marginBottom: scale(6),
+  },
+  noResultsText: {
+    fontSize: RFValue(11),
+    fontStyle: 'italic',
+    opacity: 0.7,
+  },
+});

package/src/components/Search/components/SearchCard.tsx

@@ -0,0 +1,285 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useMemo } from 'react';
+import { View, Pressable, StyleSheet, type DimensionValue } from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import LinearGradient from 'react-native-linear-gradient';
+import FastImage from 'react-native-fast-image';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+
+import { useTheme } from '../../../theme';
+import type { ThemeOverride } from '../../../theme/themes';
+
+import { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
+import { Text } from '../../Text';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { useSafePressHandler } from '../../../hooks/useSafeCallback';
+import { useSkeletonItems } from '../../../hooks/useSkeletonItems';
+import { convertColorWithOpacity } from '../../../utils/colorUtils';
+
+/**
+ * Configuration for SearchCard skeleton rendering.
+ */
+export type SearchCardSkeletonConfig = {
+  items?: number; // Lines of text per card
+  textWidths?: (string | number)[]; // Widths of text lines
+};
+
+/**
+ * Props for SearchCard component.
+ */
+export type SearchCardProps = {
+  title: string;
+  thumbnail: string;
+  description: string;
+  category?: string;
+  contentType?: string;
+  isLoading?: boolean;
+  onPress?: () => void;
+  theme?: ThemeOverride;
+  skeletonConfig?: SearchCardSkeletonConfig;
+};
+
+/**
+ * A reusable search result card with skeleton support for loading state.
+ */
+const SearchCard: React.FC<SearchCardProps> = ({
+  title,
+  thumbnail,
+  description,
+  category,
+  contentType,
+  isLoading = false,
+  onPress,
+  theme,
+  skeletonConfig,
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const {
+    colors: {
+      textPrimary,
+      textSecondary,
+      skeletonBaseColor,
+      skeletonHighlightColor,
+      primary,
+      secondary,
+    },
+  } = appliedTheme;
+
+  const { items = 5, textWidths = ['80%', '100%', '70%', '50%', '40%'] } =
+    skeletonConfig ?? {};
+
+  const skeletonItems = useSkeletonItems(items);
+
+  const isVerticalContent = contentType === 'VERTICAL_STREAM';
+
+  const verticalBadgeColors = useMemo(() => {
+    const primaryColor = primary;
+    const secondaryColor = secondary || primaryColor;
+
+    return [
+      convertColorWithOpacity(primaryColor, 0.9),
+      convertColorWithOpacity(secondaryColor, 0.9),
+    ];
+  }, [primary, secondary]);
+
+  // Memoize handlePress before any early returns
+  const handlePress = useSafePressHandler(onPress);
+
+  const renderSkeleton = () => (
+    <SkeletonPlaceholder
+      backgroundColor={skeletonBaseColor}
+      highlightColor={skeletonHighlightColor}
+      borderRadius={scale(8)}
+    >
+      <View style={styles.card}>
+        <View style={styles.imageContainer}>
+          <SkeletonPlaceholder.Item
+            width={scale(150)}
+            height={verticalScale(80)}
+            borderRadius={scale(8)}
+          />
+        </View>
+        <View
+          style={[
+            styles.textContainer,
+            {
+              marginTop: verticalScale(3),
+            },
+          ]}
+        >
+          {skeletonItems.map((_, lineIdx) => {
+            const rawWidth = textWidths[lineIdx] ?? '90%';
+            const resolvedWidth =
+              typeof rawWidth === 'string'
+                ? rawWidth
+                : `${Math.min(rawWidth, 100)}%`;
+
+            return (
+              <SkeletonPlaceholder.Item
+                key={`skeleton-line-${lineIdx}`}
+                width={resolvedWidth as DimensionValue}
+                height={moderateScale(12)}
+                borderRadius={4}
+                marginBottom={verticalScale(4)}
+              />
+            );
+          })}
+        </View>
+      </View>
+    </SkeletonPlaceholder>
+  );
+
+  const pressableStyle = ({ pressed }: { pressed: boolean }) => [
+    styles.card,
+    {
+      opacity: pressed ? 0.9 : 1,
+    },
+  ];
+
+  if (isLoading) return renderSkeleton();
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      style={pressableStyle}
+      accessibilityRole="button"
+      accessibilityLabel={title}
+      disabled={!onPress}
+    >
+      <View style={styles.imageContainer}>
+        <ThumbnailCard
+          thumbnailUri={thumbnail}
+          theme={appliedTheme}
+          borderRadius={scale(8)}
+          resizeMode={FastImage.resizeMode.cover}
+          isLoading={false}
+        />
+        {isVerticalContent && (
+          <View
+            style={styles.verticalBadgeContainer}
+            accessible
+            accessibilityRole="text"
+            accessibilityLabel="Vertical video"
+          >
+            <LinearGradient
+              colors={verticalBadgeColors}
+              start={{ x: 0, y: 0 }}
+              end={{ x: 1, y: 0 }}
+              style={styles.verticalBadge}
+            >
+              <Text style={styles.verticalBadgeText} color="#FFFFFF">
+                VERTICAL
+              </Text>
+            </LinearGradient>
+          </View>
+        )}
+      </View>
+      <View style={styles.textContainer}>
+        <Text
+          style={styles.title}
+          color={textPrimary}
+          numberOfLines={1}
+          accessibilityLabel={`Title: ${title}`}
+        >
+          {title}
+        </Text>
+        <Text
+          style={styles.description}
+          color={textSecondary}
+          numberOfLines={3}
+          accessibilityLabel={`Description: ${description}`}
+        >
+          {description}
+        </Text>
+        {!!category && (
+          <Text
+            style={styles.categoryTextLine}
+            color={textSecondary}
+            numberOfLines={1}
+            accessibilityLabel={`Category: ${category}`}
+          >
+            {category}
+          </Text>
+        )}
+      </View>
+    </Pressable>
+  );
+};
+
+export default React.memo(SearchCard);
+
+const styles = StyleSheet.create({
+  card: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginBottom: verticalScale(5),
+  },
+  imageContainer: {
+    width: scale(150),
+    height: verticalScale(80),
+    borderRadius: scale(8),
+    overflow: 'hidden',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  verticalBadgeContainer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 15,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 6,
+  },
+  verticalBadge: {
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 0,
+  },
+  verticalBadgeText: {
+    fontSize: RFValue(7),
+    fontWeight: '700',
+    letterSpacing: scale(0.5),
+    textAlign: 'center',
+    textShadowColor: 'rgba(0, 0, 0, 0.3)',
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 2,
+    paddingHorizontal: scale(8),
+    paddingVertical: scale(1),
+  },
+  textContainer: {
+    flex: 1,
+    height: verticalScale(80),
+    marginLeft: scale(5),
+    justifyContent: 'flex-start',
+  },
+  title: {
+    fontSize: RFValue(10),
+    fontWeight: '600',
+    lineHeight: moderateScale(20),
+    marginTop: verticalScale(2),
+  },
+  description: {
+    fontSize: RFValue(9),
+    fontWeight: '400',
+    lineHeight: moderateScale(16),
+    marginLeft: scale(1),
+    marginBottom: verticalScale(2),
+    flexShrink: 1,
+  },
+  categoryTextLine: {
+    fontSize: RFValue(9),
+    textTransform: 'capitalize',
+    fontWeight: '500',
+    marginLeft: scale(1),
+    lineHeight: moderateScale(16),
+  },
+});

package/src/components/Search/index.ts

@@ -0,0 +1,16 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import SearchOne from './One';
+
+import SearchCard from './components/SearchCard';
+
+export const Search = {
+  One: SearchOne,
+  Two: SearchCard,
+};
+
+export type { SearchOneProps } from './One';
+export type { SearchCardProps } from './components/SearchCard';