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

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

@@ -1,181 +0,0 @@
-/**
- * @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

@@ -1,285 +0,0 @@
-/**
- * @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

@@ -1,16 +0,0 @@
-/**
- * @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';