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

package/src/components/Logo/Logo.tsx

@@ -3,14 +3,12 @@
  * @lastModified Sun 08 Jun 2025 at 03:23 PM
  */
 import React from 'react';
-import {
-  Image,
-  View,
-  type StyleProp,
-  type ImageStyle,
-  type ViewStyle,
-} from 'react-native';
+import { Image, View, type StyleProp, type ImageStyle, type ViewStyle } from 'react-native';
 import { moderateScale } from 'react-native-size-matters';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { useInitSplashCacheSync } from '../../hooks/useInitSplashCacheSync';
+import { useTheme } from '../../theme';
+import type { AppTheme } from '../../theme/themes';
 
 interface ILogoProps {
   width?: number;
@@ -21,6 +19,8 @@ interface ILogoProps {
   containerStyle?: StyleProp<ViewStyle>;
   aspectRatio?: number;
   fallbackUri?: string;
+  theme?: AppTheme;
+  isLoading?: boolean;
 }
 
 export const Logo: React.FC<ILogoProps> = ({
@@ -32,28 +32,71 @@ export const Logo: React.FC<ILogoProps> = ({
   containerStyle,
   aspectRatio,
   fallbackUri,
+  theme,
+  isLoading = false
 }) => {
-  const finalSource = logoUri?.startsWith('http')
-    ? { uri: logoUri }
-    : fallbackUri
-      ? { uri: fallbackUri }
-      : undefined;
+  const { theme: appliedTheme } = useTheme(theme);
 
+  const {
+    data: { localPathLogo },
+    isLoading: isSplashLoading
+  } = useInitSplashCacheSync({
+    logoUrl: logoUri
+  });
+  const finalSource = localPathLogo
+    ? {
+        uri: localPathLogo.startsWith('file://') ? localPathLogo : `file://${localPathLogo}`
+      }
+    : logoUri
+      ? { uri: logoUri }
+      : fallbackUri
+        ? { uri: fallbackUri }
+        : undefined;
+
+  if (!finalSource && !isLoading) {
+    return null;
+  }
   return (
-    <View style={containerStyle}>
-      {finalSource && (
-        <Image
-          source={finalSource}
-          resizeMode={resizeMode}
-          style={[
-            {
-              width: moderateScale(width),
-              height: moderateScale(height),
-              ...(aspectRatio ? { aspectRatio } : {}),
-            },
-            imageStyle,
-          ]}
-        />
+    <View
+      style={[
+        {
+          alignItems: 'center',
+          justifyContent: 'center'
+        },
+        containerStyle
+      ]}
+    >
+      {isLoading || isSplashLoading ? (
+        <SkeletonPlaceholder
+          backgroundColor={appliedTheme.colors.skeletonBaseColor}
+          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          speed={1000}
+        >
+          <SkeletonPlaceholder.Item
+            alignSelf="center"
+            width={moderateScale(width)}
+            height={moderateScale(width / 2)}
+            borderRadius={4}
+          />
+        </SkeletonPlaceholder>
+      ) : (
+        finalSource && (
+          <Image
+            source={finalSource}
+            resizeMode={resizeMode}
+            style={[
+              {
+                width: moderateScale(width),
+                height: moderateScale(height),
+                ...(aspectRatio ? { aspectRatio } : {})
+              },
+              imageStyle
+            ]}
+            onError={() => {
+              return null;
+            }}
+          />
+        )
       )}
     </View>
   );

package/src/components/Search/One.tsx

@@ -0,0 +1,228 @@
+/**
+ * @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 { useTheme } from '../../theme';
+import InputTwo from '../Input/InputTwo';
+import { LucideSearch, XCircle } from 'lucide-react-native';
+import { Text } from '../Text';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import HideKeyboard from '../Keyboard/HideKeyboard';
+import SearchCard, { type SearchCardSkeletonConfig } from './components/SearchCard';
+import { useDebounce } from '../../hooks/useDebounce';
+import type { IContentData, IGetSectionData, ISectionItem, MoreFetchData } from '../../types';
+import type { AppTheme } 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';
+
+// 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?: AppTheme;
+  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 } = useTheme(theme);
+  const { recentSearches, addSearchTerm, clearSearches, isLoading: recentSearchesLoading } = useRecentSearchesStore();
+
+  const {
+    colors: { textPrimary, background }
+  } = appliedTheme;
+
+  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 = useMemo(() => Array(skeletonCardCount).fill({}), [skeletonCardCount]);
+
+  const showRecent = !recentSearchesLoading && search.trim() === '' && recentSearches.length > 0;
+
+  const shouldShowFooter = !isLoading && search.trim().length === 0 && 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 || item?.content_offering_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={appliedTheme}
+            onPressItem={(item) => events?.onPressRecommendedItem?.({ item })}
+            onPressMore={events?.onPressRecommendedMore}
+            moreFetchData={events?.moreFetchDataRecommended}
+            {...recommendedContentCardStyles}
+          />
+        )}
+      </>
+    );
+  }, [
+    shouldShowFooter,
+    showRecent,
+    recommendedContent,
+    recentSearches,
+    appliedTheme,
+    clearSearches,
+    handleTyping,
+    events,
+    isLoading,
+    recommendedContentCardStyles
+  ]);
+
+  const renderEmptyComponent = () =>
+    !isLoading && search.trim().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>
+        <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: moderateScale(16)
+  },
+  emptyText: {
+    fontSize: moderateScale(14),
+    textAlign: 'center',
+    marginTop: verticalScale(20)
+  }
+});

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

@@ -0,0 +1,153 @@
+/**
+ * @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';
+
+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(16)} 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(12),
+    backgroundColor: 'transparent'
+  },
+  headerRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: scale(12)
+  },
+  recentSearchText: {
+    fontSize: scale(14),
+    fontWeight: '700',
+    letterSpacing: 0.2
+  },
+  clearAllText: {
+    fontSize: scale(12),
+    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(11),
+    borderWidth: scale(0.5),
+    paddingVertical: scale(6),
+    marginRight: scale(6.5),
+    marginBottom: scale(6),
+    maxWidth: scale(150)
+  },
+  pillText: {
+    fontSize: scale(12),
+    fontWeight: '500',
+    flexShrink: 1
+  },
+  pillIcon: {
+    marginRight: scale(5)
+  },
+  skeletonPill: {
+    height: scale(32),
+    borderRadius: scale(16),
+    marginRight: scale(6.5),
+    marginBottom: scale(6)
+  },
+  noResultsText: {
+    fontSize: scale(12),
+    fontStyle: 'italic',
+    opacity: 0.7
+  }
+});

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

@@ -0,0 +1,193 @@
+/**
+ * @author Ashok Desai
+ * @lastModified jun 23 Jun 2025 at 11:40 AM
+ */
+
+import React from 'react';
+import { View, Pressable, StyleSheet, type DimensionValue } from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import FastImage from 'react-native-fast-image';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+
+import { useTheme } from '../../../theme';
+import type { AppTheme } from '../../../theme/themes';
+
+import { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
+import { Text } from '../../Text';
+
+/**
+ * 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;
+  isLoading?: boolean;
+  onPress?: () => void;
+  theme?: AppTheme;
+  skeletonConfig?: SearchCardSkeletonConfig;
+};
+
+/**
+ * A reusable search result card with skeleton support for loading state.
+ */
+const SearchCard: React.FC<SearchCardProps> = ({
+  title,
+  thumbnail,
+  description,
+  category = 'Unknown',
+  isLoading = false,
+  onPress,
+  theme,
+  skeletonConfig
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const {
+    colors: { textPrimary, textSecondary, skeletonBaseColor, skeletonHighlightColor }
+  } = appliedTheme;
+
+  const { items = 5, textWidths = ['80%', '100%', '70%', '50%', '40%'] } = skeletonConfig ?? {};
+
+  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)
+            }
+          ]}
+        >
+          {Array.from({ length: items }).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>
+  );
+
+  if (isLoading) return renderSkeleton();
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => [styles.card, { opacity: pressed ? 0.9 : 1 }]}
+      accessibilityRole="button"
+      accessibilityLabel={title}
+      disabled={!onPress}
+    >
+      <View style={styles.imageContainer}>
+        <ThumbnailCard
+          thumbnailUri={thumbnail}
+          theme={appliedTheme}
+          borderRadius={scale(8)}
+          resizeMode={FastImage.resizeMode.cover}
+          wrapperStyle={styles.thumbnail}
+          isLoading={false}
+        />
+      </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>
+        <Text
+          style={styles.categoryTextLine}
+          color={textSecondary}
+          numberOfLines={1}
+          accessibilityLabel={`Category: ${category}`}
+        >
+          {category}
+        </Text>
+      </View>
+    </Pressable>
+  );
+};
+
+export default 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'
+  },
+  thumbnail: {
+    width: '100%',
+    height: '100%',
+    borderRadius: scale(8),
+    position: 'absolute',
+    top: 0,
+    left: 0
+  },
+  textContainer: {
+    flex: 1,
+    height: verticalScale(80),
+    marginLeft: scale(5),
+    justifyContent: 'flex-start'
+  },
+  title: {
+    fontSize: moderateScale(14),
+    fontWeight: '700',
+    lineHeight: moderateScale(20),
+    marginTop: verticalScale(2)
+  },
+  description: {
+    fontSize: moderateScale(12),
+    fontWeight: '400',
+    lineHeight: moderateScale(16),
+    marginLeft: scale(1),
+    marginBottom: verticalScale(2),
+    flexShrink: 1
+  },
+  categoryTextLine: {
+    fontSize: moderateScale(12),
+    textTransform: 'capitalize',
+    fontWeight: '500',
+    marginLeft: scale(1),
+    lineHeight: moderateScale(16)
+  }
+});

package/src/components/Search/index.ts

@@ -0,0 +1,16 @@
+/**
+ * @author Ashok Desai
+ * @lastModified jun 23 Jun 2025 at 11:40 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';