@zezosoft/zezo-ott-react-native-ui-kit 1.0.2 → 1.0.3

package/src/components/Search/One.tsx

@@ -4,16 +4,30 @@
  */
 
 import React, { memo, useCallback, useMemo } from 'react';
-import { View, StyleSheet, Platform, FlatList, Keyboard, type ListRenderItem } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  Platform,
+  FlatList,
+  Keyboard,
+  type ListRenderItem,
+} from 'react-native';
 import { useTheme } from '../../theme/hook/useTheme';
 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 SearchCard, {
+  type SearchCardSkeletonConfig,
+} from './components/SearchCard';
 import { useDebounce } from '../../hooks/useDebounce';
-import type { IContentData, IGetSectionData, ISectionItem, MoreFetchData } from '../../types';
+import type {
+  IContentData,
+  IGetSectionData,
+  ISectionItem,
+  MoreFetchData,
+} from '../../types';
 import type { AppTheme } from '../../theme/themes';
 import { useRecentSearchesStore } from '../../store/RecentSearchesStore';
 import RecentSearchesSection from './components/RecentSearchesSection';
@@ -64,13 +78,18 @@ const SearchBar: React.FC<SearchOneProps> = ({
   noResultsText = 'No results found',
   recommendedContentCardStyles,
   theme,
-  recommendedContent
+  recommendedContent,
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
-  const { recentSearches, addSearchTerm, clearSearches, isLoading: recentSearchesLoading } = useRecentSearchesStore();
+  const {
+    recentSearches,
+    addSearchTerm,
+    clearSearches,
+    isLoading: recentSearchesLoading,
+  } = useRecentSearchesStore();
 
   const {
-    colors: { textPrimary, background }
+    colors: { textPrimary, background },
   } = appliedTheme;
 
   const debouncedSubmit = useDebounce((keyword: string) => {
@@ -103,11 +122,16 @@ const SearchBar: React.FC<SearchOneProps> = ({
     [events]
   );
 
-  const skeletonItems = useMemo(() => Array(skeletonCardCount).fill({}), [skeletonCardCount]);
+  const skeletonItems = useMemo(
+    () => Array(skeletonCardCount).fill({}),
+    [skeletonCardCount]
+  );
 
-  const showRecent = !recentSearchesLoading && search.trim() === '' && recentSearches.length > 0;
+  const showRecent =
+    !recentSearchesLoading && search.trim() === '' && recentSearches.length > 0;
 
-  const shouldShowFooter = !isLoading && search.trim().length === 0 && results?.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}>
@@ -167,7 +191,7 @@ const SearchBar: React.FC<SearchOneProps> = ({
     handleTyping,
     events,
     isLoading,
-    recommendedContentCardStyles
+    recommendedContentCardStyles,
   ]);
 
   const renderEmptyComponent = () =>
@@ -185,7 +209,9 @@ const SearchBar: React.FC<SearchOneProps> = ({
           placeholder={placeholder}
           onChangeText={handleTyping}
           leftIcon={<LucideSearch size={scale(20)} color="#aaa" />}
-          rightIcon={search.length > 0 ? <XCircle size={24} color={textPrimary} /> : null}
+          rightIcon={
+            search.length > 0 ? <XCircle size={24} color={textPrimary} /> : null
+          }
           onPressRightIcon={handleClear}
           accessibilityLabel="Search"
         />
@@ -198,7 +224,10 @@ const SearchBar: React.FC<SearchOneProps> = ({
           renderItem={renderItem}
           ListEmptyComponent={renderEmptyComponent()}
           ListFooterComponent={renderFooter}
-          contentContainerStyle={{ paddingBottom: verticalScale(80), paddingTop: scale(12) }}
+          contentContainerStyle={{
+            paddingBottom: verticalScale(80),
+            paddingTop: scale(12),
+          }}
           showsVerticalScrollIndicator={false}
           keyboardShouldPersistTaps="handled"
           style={{ flex: 1, marginTop: scale(2) }}
@@ -213,17 +242,17 @@ export default memo(SearchBar);
 const styles = StyleSheet.create({
   mainContainer: {
     flex: 1,
-    paddingTop: Platform.OS === 'ios' ? scale(18) : scale(12)
+    paddingTop: Platform.OS === 'ios' ? scale(18) : scale(12),
   },
   container: {
-    paddingHorizontal: scale(16)
+    paddingHorizontal: scale(16),
   },
   recommendedTitle: {
-    fontSize: RFValue(13)
+    fontSize: RFValue(13),
   },
   emptyText: {
     fontSize: RFValue(12),
     textAlign: 'center',
-    marginTop: verticalScale(20)
-  }
+    marginTop: verticalScale(20),
+  },
 });

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

@@ -20,21 +20,31 @@ type Props = {
   theme: ITheme;
 };
 
-const RecentSearchesSection: React.FC<Props> = ({ recentSearches, isLoading, onPressItem, onClearAll, theme }) => {
+const RecentSearchesSection: React.FC<Props> = ({
+  recentSearches,
+  isLoading,
+  onPressItem,
+  onClearAll,
+  theme,
+}) => {
   const {
-    colors: { textPrimary, skeletonBaseColor, skeletonHighlightColor, border }
+    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)));
+    .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>
+        <Text style={[styles.recentSearchText, { color: textPrimary }]}>
+          Recent Searches
+        </Text>
         {uniqueRecentSearches.length > 0 && (
           <TouchableOpacity
             onPress={onClearAll}
@@ -49,7 +59,11 @@ const RecentSearchesSection: React.FC<Props> = ({ recentSearches, isLoading, onP
       {/* Pills */}
       <View style={styles.pillContainer}>
         {isLoading ? (
-          <SkeletonPlaceholder backgroundColor={skeletonBaseColor} highlightColor={skeletonHighlightColor} speed={1200}>
+          <SkeletonPlaceholder
+            backgroundColor={skeletonBaseColor}
+            highlightColor={skeletonHighlightColor}
+            speed={1200}
+          >
             <SkeletonPlaceholder.Item style={styles.pillSkeletonWrapper}>
               {randomWidths.map((width, index) => (
                 <SkeletonPlaceholder.Item
@@ -70,19 +84,32 @@ const RecentSearchesSection: React.FC<Props> = ({ recentSearches, isLoading, onP
             <TouchableOpacity
               key={`${item}-${index}`}
               onPress={() => onPressItem(item)}
-              style={[styles.pill, { backgroundColor: skeletonBaseColor, borderColor: border }]}
+              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">
+              <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>
+          <Text style={[styles.noResultsText, { color: textPrimary }]}>
+            No recent searches
+          </Text>
         )}
       </View>
     </View>
@@ -94,32 +121,32 @@ export default memo(RecentSearchesSection);
 const styles = StyleSheet.create({
   container: {
     paddingVertical: scale(10),
-    backgroundColor: 'transparent'
+    backgroundColor: 'transparent',
   },
   headerRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    marginBottom: scale(12)
+    marginBottom: scale(12),
   },
   recentSearchText: {
     fontSize: RFValue(12),
     fontWeight: '600',
-    letterSpacing: 0.2
+    letterSpacing: 0.2,
   },
   clearAllText: {
     fontSize: RFValue(10),
     fontWeight: '500',
-    textDecorationLine: 'underline'
+    textDecorationLine: 'underline',
   },
   pillContainer: {
     flexDirection: 'row',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
   },
   pillSkeletonWrapper: {
     flexDirection: 'row',
     justifyContent: 'space-evenly',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
   },
   pill: {
     flexDirection: 'row',
@@ -130,25 +157,25 @@ const styles = StyleSheet.create({
     paddingVertical: scale(5),
     marginRight: scale(6.5),
     marginBottom: scale(6),
-    maxWidth: scale(150)
+    maxWidth: scale(150),
   },
   pillText: {
     fontSize: RFValue(10),
     fontWeight: '500',
-    flexShrink: 1
+    flexShrink: 1,
   },
   pillIcon: {
-    marginRight: scale(5)
+    marginRight: scale(5),
   },
   skeletonPill: {
     height: scale(32),
     borderRadius: scale(16),
     marginRight: scale(6.5),
-    marginBottom: scale(6)
+    marginBottom: scale(6),
   },
   noResultsText: {
     fontSize: RFValue(11),
     fontStyle: 'italic',
-    opacity: 0.7
-  }
+    opacity: 0.7,
+  },
 });

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

@@ -49,14 +49,20 @@ const SearchCard: React.FC<SearchCardProps> = ({
   isLoading = false,
   onPress,
   theme,
-  skeletonConfig
+  skeletonConfig,
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
   const {
-    colors: { textPrimary, textSecondary, skeletonBaseColor, skeletonHighlightColor }
+    colors: {
+      textPrimary,
+      textSecondary,
+      skeletonBaseColor,
+      skeletonHighlightColor,
+    },
   } = appliedTheme;
 
-  const { items = 5, textWidths = ['80%', '100%', '70%', '50%', '40%'] } = skeletonConfig ?? {};
+  const { items = 5, textWidths = ['80%', '100%', '70%', '50%', '40%'] } =
+    skeletonConfig ?? {};
 
   const renderSkeleton = () => (
     <SkeletonPlaceholder
@@ -66,19 +72,26 @@ const SearchCard: React.FC<SearchCardProps> = ({
     >
       <View style={styles.card}>
         <View style={styles.imageContainer}>
-          <SkeletonPlaceholder.Item width={scale(150)} height={verticalScale(80)} borderRadius={scale(8)} />
+          <SkeletonPlaceholder.Item
+            width={scale(150)}
+            height={verticalScale(80)}
+            borderRadius={scale(8)}
+          />
         </View>
         <View
           style={[
             styles.textContainer,
             {
-              marginTop: verticalScale(3)
-            }
+              marginTop: verticalScale(3),
+            },
           ]}
         >
           {Array.from({ length: items }).map((_, lineIdx) => {
             const rawWidth = textWidths[lineIdx] ?? '90%';
-            const resolvedWidth = typeof rawWidth === 'string' ? rawWidth : `${Math.min(rawWidth, 100)}%`;
+            const resolvedWidth =
+              typeof rawWidth === 'string'
+                ? rawWidth
+                : `${Math.min(rawWidth, 100)}%`;
 
             return (
               <SkeletonPlaceholder.Item
@@ -116,7 +129,12 @@ const SearchCard: React.FC<SearchCardProps> = ({
         />
       </View>
       <View style={styles.textContainer}>
-        <Text style={styles.title} color={textPrimary} numberOfLines={1} accessibilityLabel={`Title: ${title}`}>
+        <Text
+          style={styles.title}
+          color={textPrimary}
+          numberOfLines={1}
+          accessibilityLabel={`Title: ${title}`}
+        >
           {title}
         </Text>
         <Text
@@ -146,7 +164,7 @@ const styles = StyleSheet.create({
   card: {
     flexDirection: 'row',
     alignItems: 'flex-start',
-    marginBottom: verticalScale(5)
+    marginBottom: verticalScale(5),
   },
   imageContainer: {
     width: scale(150),
@@ -154,7 +172,7 @@ const styles = StyleSheet.create({
     borderRadius: scale(8),
     overflow: 'hidden',
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   thumbnail: {
     width: '100%',
@@ -162,19 +180,19 @@ const styles = StyleSheet.create({
     borderRadius: scale(8),
     position: 'absolute',
     top: 0,
-    left: 0
+    left: 0,
   },
   textContainer: {
     flex: 1,
     height: verticalScale(80),
     marginLeft: scale(5),
-    justifyContent: 'flex-start'
+    justifyContent: 'flex-start',
   },
   title: {
     fontSize: RFValue(10),
     fontWeight: '600',
     lineHeight: moderateScale(20),
-    marginTop: verticalScale(2)
+    marginTop: verticalScale(2),
   },
   description: {
     fontSize: RFValue(9),
@@ -182,13 +200,13 @@ const styles = StyleSheet.create({
     lineHeight: moderateScale(16),
     marginLeft: scale(1),
     marginBottom: verticalScale(2),
-    flexShrink: 1
+    flexShrink: 1,
   },
   categoryTextLine: {
     fontSize: RFValue(9),
     textTransform: 'capitalize',
     fontWeight: '500',
     marginLeft: scale(1),
-    lineHeight: moderateScale(16)
-  }
+    lineHeight: moderateScale(16),
+  },
 });

package/src/components/Search/index.ts

@@ -9,7 +9,7 @@ import SearchCard from './components/SearchCard';
 
 export const Search = {
   One: SearchOne,
-  Two: SearchCard
+  Two: SearchCard,
 };
 
 export type { SearchOneProps } from './One';

package/src/components/Settings/AppSettings.tsx

@@ -3,14 +3,31 @@
  * @lastModified Mon 23 Jun 2025 at 11:22 AM
  */
 
-import React, { useState, isValidElement, cloneElement, type FC, type ReactElement } from 'react';
-import { View, ScrollView, StyleSheet, Switch, TouchableOpacity, type ViewStyle, type TextStyle } from 'react-native';
+import React, {
+  useState,
+  isValidElement,
+  cloneElement,
+  type FC,
+  type ReactElement,
+} from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  TouchableOpacity,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { useTheme } from '../../theme/hook/useTheme';
 import DeviceInfo from 'react-native-device-info';
 import AppHeader from '../Headers/AppHeader';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-import UserSection, { type UserInfo, type UserInfoTextStyle } from '../User/components/UserSection';
+import UserSection, {
+  type UserInfo,
+  type UserInfoTextStyle,
+} from '../User/components/UserSection';
 import { Text } from '../Text';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { AppTheme } from '../../theme/themes';
@@ -87,7 +104,7 @@ export const AppSettings: FC<AppSettingsProps> = ({
   skeletonProps = {},
   headerStyle,
   userInfoTextStyle = {},
-  menuItemStyle = {}
+  menuItemStyle = {},
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
   const insets = useSafeAreaInsets();
@@ -104,10 +121,15 @@ export const AppSettings: FC<AppSettingsProps> = ({
   // ✅ Handle toggle change
   const handleToggleChange = (key: string, value: boolean) => {
     setToggleStates((prev) => ({ ...prev, [key]: value }));
-    const item = menuItems.find((i) => i.key === key) as ToggleMenuItem | undefined;
+    const item = menuItems.find((i) => i.key === key) as
+      | ToggleMenuItem
+      | undefined;
     item?.onToggleChange?.(value);
   };
-  const renderIconWithColor = (icon: React.ReactNode, color: string): React.ReactNode => {
+  const renderIconWithColor = (
+    icon: React.ReactNode,
+    color: string
+  ): React.ReactNode => {
     if (isValidElement(icon)) {
       return cloneElement(icon as ReactElement<any>, { color });
     }
@@ -121,9 +143,9 @@ export const AppSettings: FC<AppSettingsProps> = ({
           styles.menuItem,
           {
             backgroundColor: appliedTheme.colors.surfaceDisabled,
-            borderColor: appliedTheme.colors.border
+            borderColor: appliedTheme.colors.border,
           },
-          menuItemStyle.container
+          menuItemStyle.container,
         ]}
       >
         <View style={styles.menuItemContent}>
@@ -134,7 +156,11 @@ export const AppSettings: FC<AppSettingsProps> = ({
           )}
           <Text
             numberOfLines={1}
-            style={[styles.menuLabel, { color: appliedTheme.colors.onBackground }, menuItemStyle.label]}
+            style={[
+              styles.menuLabel,
+              { color: appliedTheme.colors.onBackground },
+              menuItemStyle.label,
+            ]}
           >
             {item.label}
           </Text>
@@ -142,10 +168,12 @@ export const AppSettings: FC<AppSettingsProps> = ({
         <Switch
           trackColor={{
             false: appliedTheme.colors.switchTrackColorDisabled,
-            true: appliedTheme.colors.switchTrackColor
+            true: appliedTheme.colors.switchTrackColor,
           }}
           thumbColor={
-            toggleStates[item.key] ? appliedTheme.colors.switchThumbColor : appliedTheme.colors.switchThumbColorDisabled
+            toggleStates[item.key]
+              ? appliedTheme.colors.switchThumbColor
+              : appliedTheme.colors.switchThumbColorDisabled
           }
           value={toggleStates[item.key]}
           onValueChange={(value) => handleToggleChange(item.key, value)}
@@ -168,9 +196,9 @@ export const AppSettings: FC<AppSettingsProps> = ({
           styles.menuItem,
           {
             backgroundColor: appliedTheme.colors.surfaceDisabled,
-            borderColor: appliedTheme.colors.border
+            borderColor: appliedTheme.colors.border,
           },
-          menuItemStyle.container
+          menuItemStyle.container,
         ]}
       >
         {item.icon && (
@@ -180,7 +208,11 @@ export const AppSettings: FC<AppSettingsProps> = ({
         )}
         <Text
           numberOfLines={1}
-          style={[styles.menuLabel, { color: appliedTheme.colors.onBackground }, menuItemStyle.label]}
+          style={[
+            styles.menuLabel,
+            { color: appliedTheme.colors.onBackground },
+            menuItemStyle.label,
+          ]}
         >
           {item.label}
         </Text>
@@ -189,11 +221,18 @@ export const AppSettings: FC<AppSettingsProps> = ({
   };
 
   const renderMenuItemDefault = (item: MenuItem) => {
-    return isToggleMenuItem(item) ? renderToggleMenuItem(item) : renderPressableMenuItem(item);
+    return isToggleMenuItem(item)
+      ? renderToggleMenuItem(item)
+      : renderPressableMenuItem(item);
   };
 
   return (
-    <View style={[styles.container, { backgroundColor: appliedTheme.colors.background }]}>
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: appliedTheme.colors.background },
+      ]}
+    >
       {(renderHeader || title || onBackPress) &&
         (renderHeader ? (
           renderHeader()
@@ -207,7 +246,10 @@ export const AppSettings: FC<AppSettingsProps> = ({
           />
         ))}
       <ScrollView
-        contentContainerStyle={[styles.scrollContent, { paddingBottom: verticalScale(60) + insets.bottom }]}
+        contentContainerStyle={[
+          styles.scrollContent,
+          { paddingBottom: verticalScale(60) + insets.bottom },
+        ]}
         showsVerticalScrollIndicator={false}
         keyboardShouldPersistTaps="handled"
       >
@@ -225,7 +267,9 @@ export const AppSettings: FC<AppSettingsProps> = ({
         <View style={styles.menuList}>
           {menuItems.map((item) =>
             renderMenuItem ? (
-              <React.Fragment key={item.key}>{renderMenuItem(item)}</React.Fragment>
+              <React.Fragment key={item.key}>
+                {renderMenuItem(item)}
+              </React.Fragment>
             ) : (
               renderMenuItemDefault(item)
             )
@@ -233,7 +277,14 @@ export const AppSettings: FC<AppSettingsProps> = ({
         </View>
         {renderFooter?.()}
         <View style={styles.versionContainer}>
-          <Text style={[styles.versionText, { color: appliedTheme.colors.onSurface }]}>{versionText}</Text>
+          <Text
+            style={[
+              styles.versionText,
+              { color: appliedTheme.colors.onSurface },
+            ]}
+          >
+            {versionText}
+          </Text>
         </View>
       </ScrollView>
     </View>
@@ -244,10 +295,10 @@ export const AppSettings: FC<AppSettingsProps> = ({
 const styles = StyleSheet.create({
   container: { flex: 1 },
   scrollContent: {
-    paddingHorizontal: scale(12)
+    paddingHorizontal: scale(12),
   },
   menuList: {
-    marginBottom: verticalScale(16)
+    marginBottom: verticalScale(16),
   },
   menuItem: {
     flexDirection: 'row',
@@ -257,32 +308,32 @@ const styles = StyleSheet.create({
     paddingHorizontal: scale(12),
     borderRadius: moderateScale(8),
     marginBottom: verticalScale(10),
-    position: 'relative'
+    position: 'relative',
   },
   menuIcon: {
     marginRight: scale(10),
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   menuLabel: {
     flex: 1,
     fontSize: RFValue(12),
-    fontWeight: '500'
+    fontWeight: '500',
   },
   menuItemContent: {
     flex: 1,
     flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   switchStyle: {
-    transform: [{ scaleX: 1 }, { scaleY: 1 }]
+    transform: [{ scaleX: 1 }, { scaleY: 1 }],
   },
   versionContainer: {
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   versionText: {
     fontSize: RFValue(10),
-    opacity: 0.6
-  }
+    opacity: 0.6,
+  },
 });