@zezosoft/zezo-ott-react-native-ui-kit 1.1.5 → 1.1.7

package/src/components/Search/One.tsx

@@ -1,256 +0,0 @@
-/**
- * @author Ashok Desai
- * @lastModified jun 23 Jun 2025 at 11:40 AM
- */
-
-import React, { memo, useCallback, useMemo } from 'react';
-import {
-  View,
-  StyleSheet,
-  Platform,
-  FlatList,
-  Keyboard,
-  type ListRenderItem,
-} from 'react-native';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import InputTwo from '../Input/InputTwo';
-import { LucideSearch, XCircle } from 'lucide-react-native';
-import { Text } from '../Text';
-import { scale, verticalScale } from 'react-native-size-matters';
-import HideKeyboard from '../Keyboard/HideKeyboard';
-import SearchCard, {
-  type SearchCardSkeletonConfig,
-} from './components/SearchCard';
-import { useDebounce } from '../../hooks/useDebounce';
-import { useSkeletonItems } from '../../hooks/useSkeletonItems';
-import type { IGetSectionData, ISectionItem, MoreFetchData } from '../../types';
-import type { ThemeOverride } from '../../theme/themes';
-import { useRecentSearchesStore } from '../../store/RecentSearchesStore';
-import RecentSearchesSection from './components/RecentSearchesSection';
-import Cards from '../Content/Card';
-import type { RecommendedCardStyles } from '../../types/content/content-view.types';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-
-// Types
-export type ISearchItem = IContentData;
-export type SearchOneFormValues = { keyword: string };
-
-export type SearchOneProps = {
-  placeholder?: string;
-  results?: ISearchItem[];
-  search: string;
-  isLoading?: boolean;
-  events?: {
-    onSubmit: (values: SearchOneFormValues) => void;
-    onClear?: () => void;
-    onChangeText?: (text: string) => void;
-    onItemPress?: (args: { item: IContentData }) => void;
-    onPressRecommendedItem?: (args: { item: IContentData }) => void;
-    onPressRecommendedMore?: (args: {
-      section_id: IGetSectionData['_id'];
-      name: IGetSectionData['name'];
-      type: IGetSectionData['type'];
-    }) => void;
-    moreFetchDataRecommended?: MoreFetchData<IContentData>;
-  };
-  pillMaxCount?: number;
-  skeletonCardCount?: number;
-  noResultsText?: string;
-  recommendedContentCardStyles?: RecommendedCardStyles;
-  skeletonConfig?: SearchCardSkeletonConfig;
-  theme?: ThemeOverride;
-  recommendedContent?: ISectionItem | null;
-};
-
-const SearchBar: React.FC<SearchOneProps> = ({
-  placeholder = 'Search',
-  results,
-  search = '',
-  isLoading = false,
-  events,
-  pillMaxCount = 20,
-  skeletonCardCount = 6,
-  skeletonConfig,
-  noResultsText = 'No results found',
-  recommendedContentCardStyles,
-  theme,
-  recommendedContent,
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-  const {
-    recentSearches,
-    addSearchTerm,
-    clearSearches,
-    isLoading: recentSearchesLoading,
-  } = useRecentSearchesStore();
-
-  const {
-    colors: { textPrimary, background },
-  } = appliedTheme;
-
-  const trimmedSearch = search.trim();
-
-  const debouncedSubmit = useDebounce((keyword: string) => {
-    const trimmed = keyword.trim();
-    if (trimmed) {
-      events?.onSubmit({ keyword: trimmed });
-      addSearchTerm(trimmed, pillMaxCount);
-    }
-  }, 600);
-
-  const handleTyping = useCallback(
-    (text: string) => {
-      events?.onChangeText?.(text);
-      debouncedSubmit(text);
-    },
-    [events, debouncedSubmit]
-  );
-
-  const handleClear = useCallback(() => {
-    events?.onChangeText?.('');
-    events?.onSubmit({ keyword: '' });
-    events?.onClear?.();
-    Keyboard.dismiss();
-  }, [events]);
-
-  const handleItemPress = useCallback(
-    (item: ISearchItem) => {
-      events?.onItemPress?.({ item });
-    },
-    [events]
-  );
-
-  const skeletonItems = useSkeletonItems(skeletonCardCount);
-
-  const showRecent =
-    !recentSearchesLoading && trimmedSearch === '' && recentSearches.length > 0;
-
-  const shouldShowFooter = !isLoading && (!results || results.length === 0);
-
-  const renderItem: ListRenderItem<ISearchItem> = ({ item, index }) => (
-    <View style={styles.container} key={item?._id || index}>
-      <SearchCard
-        isLoading={isLoading}
-        title={item?.name}
-        thumbnail={item?.thumbnail || item?.poster || ''}
-        description={item?.description}
-        category={item?.type}
-        theme={theme}
-        contentType={item?.type}
-        onPress={() => !isLoading && handleItemPress(item)}
-        skeletonConfig={skeletonConfig}
-      />
-    </View>
-  );
-
-  const renderFooter = useMemo(() => {
-    if (!shouldShowFooter) return null;
-
-    return (
-      <>
-        {showRecent && (
-          <View style={styles.container}>
-            <RecentSearchesSection
-              recentSearches={recentSearches}
-              isLoading={isLoading}
-              onPressItem={handleTyping}
-              onClearAll={clearSearches}
-              theme={appliedTheme}
-            />
-          </View>
-        )}
-
-        {recommendedContent && recommendedContent?.content?.data.length > 0 && (
-          <Cards.Styles.Two
-            section_id={recommendedContent._id}
-            title={recommendedContent.name}
-            titleStyle={styles.recommendedTitle}
-            type={recommendedContent.type}
-            data={recommendedContent.content}
-            isLoading={isLoading}
-            theme={theme}
-            onPressItem={(item) => events?.onPressRecommendedItem?.({ item })}
-            onPressMore={events?.onPressRecommendedMore}
-            moreFetchData={events?.moreFetchDataRecommended}
-            {...recommendedContentCardStyles}
-          />
-        )}
-      </>
-    );
-  }, [
-    shouldShowFooter,
-    showRecent,
-    recentSearches,
-    isLoading,
-    handleTyping,
-    clearSearches,
-    appliedTheme,
-    recommendedContent,
-    theme,
-    events,
-    recommendedContentCardStyles,
-  ]);
-
-  const renderEmptyComponent = () =>
-    !isLoading && trimmedSearch.length > 0 && results?.length === 0 ? (
-      <Text style={styles.emptyText} color={textPrimary}>
-        {noResultsText}
-      </Text>
-    ) : null;
-
-  return (
-    <View style={[styles.mainContainer, { backgroundColor: background }]}>
-      <View style={styles.container}>
-        <InputTwo
-          value={search}
-          placeholder={placeholder}
-          onChangeText={handleTyping}
-          leftIcon={<LucideSearch size={scale(20)} color="#aaa" />}
-          rightIcon={
-            search.length > 0 ? <XCircle size={24} color={textPrimary} /> : null
-          }
-          onPressRightIcon={handleClear}
-          accessibilityLabel="Search"
-        />
-      </View>
-
-      <HideKeyboard keyboardVerticalOffset={scale(10)}>
-        <FlatList
-          data={isLoading ? skeletonItems : results}
-          keyExtractor={(item, idx) => item?._id || `item-${idx}`}
-          renderItem={renderItem}
-          ListEmptyComponent={renderEmptyComponent()}
-          ListFooterComponent={renderFooter}
-          contentContainerStyle={{
-            paddingBottom: verticalScale(80),
-            paddingTop: scale(12),
-          }}
-          showsVerticalScrollIndicator={false}
-          keyboardShouldPersistTaps="handled"
-          style={{ flex: 1, marginTop: scale(2) }}
-        />
-      </HideKeyboard>
-    </View>
-  );
-};
-
-export default memo(SearchBar);
-
-const styles = StyleSheet.create({
-  mainContainer: {
-    flex: 1,
-    paddingTop: Platform.OS === 'ios' ? scale(18) : scale(12),
-  },
-  container: {
-    paddingHorizontal: scale(16),
-  },
-  recommendedTitle: {
-    fontSize: RFValue(13),
-  },
-  emptyText: {
-    fontSize: RFValue(12),
-    textAlign: 'center',
-    marginTop: verticalScale(20),
-  },
-});

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

@@ -1,181 +0,0 @@
-/**
- * @author Ashok Desai
- * @lastModified jun 23 Jun 2025 at 11:40 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,275 +0,0 @@
-/**
- * @author Ashok Desai
- * @lastModified jun 23 Jun 2025 at 11:40 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 { useInternalTheme } from '../../../theme/hook/useInternalTheme';
-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 } = useInternalTheme(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',
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-  verticalBadge: {
-    width: '100%',
-    paddingHorizontal: scale(6),
-    paddingVertical: verticalScale(2),
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  verticalBadgeText: {
-    fontSize: RFValue(7.5),
-    fontWeight: '700',
-    letterSpacing: scale(0.5),
-    textAlign: 'center',
-  },
-  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),
-  },
-});