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

package/src/components/User/components/UserSection.tsx

@@ -42,7 +42,7 @@ const UserSection: React.FC<UserSectionProps> = ({
   theme,
   avatarComponent,
   skeletonProps = {},
-  userInfoTextStyle = {}
+  userInfoTextStyle = {},
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
   if (!userInfo) return null;
@@ -81,15 +81,18 @@ const UserSection: React.FC<UserSectionProps> = ({
                   {
                     borderColor: appliedTheme.colors.primary,
                     backgroundColor: appliedTheme.colors.white,
-                    shadowColor: appliedTheme.colors.surface
-                  }
+                    shadowColor: appliedTheme.colors.surface,
+                  },
                 ]}
                 android_ripple={{
-                  color: appliedTheme.colors.surfaceDisabled
+                  color: appliedTheme.colors.surfaceDisabled,
                 }}
               >
                 <View style={styles.editContent}>
-                  <Edit3 size={moderateScale(14)} color={appliedTheme.colors.primary} />
+                  <Edit3
+                    size={moderateScale(14)}
+                    color={appliedTheme.colors.primary}
+                  />
                 </View>
               </Pressable>
             )}
@@ -98,12 +101,24 @@ const UserSection: React.FC<UserSectionProps> = ({
       </View>
 
       {userInfo.name && (
-        <Text style={[styles.userName, { color: appliedTheme.colors.onBackground }, userInfoTextStyle.nameStyle]}>
+        <Text
+          style={[
+            styles.userName,
+            { color: appliedTheme.colors.onBackground },
+            userInfoTextStyle.nameStyle,
+          ]}
+        >
           {userInfo.name}
         </Text>
       )}
       {userInfo.emailOrPhone && (
-        <Text style={[styles.userEmail, { color: appliedTheme.colors.onBackground }, userInfoTextStyle.emailStyle]}>
+        <Text
+          style={[
+            styles.userEmail,
+            { color: appliedTheme.colors.onBackground },
+            userInfoTextStyle.emailStyle,
+          ]}
+        >
           {userInfo.emailOrPhone}
         </Text>
       )}
@@ -119,10 +134,10 @@ const styles = {
     alignItems: 'center',
     justifyContent: 'center',
     paddingVertical: verticalScale(10),
-    height: verticalScale(200)
+    height: verticalScale(200),
   } as ViewStyle,
   avatarWrapper: {
-    position: 'relative'
+    position: 'relative',
   } as ViewStyle,
   editButton: {
     position: 'absolute',
@@ -137,46 +152,46 @@ const styles = {
     elevation: 1,
     shadowOffset: { width: 0, height: 0.5 },
     shadowOpacity: 0.1,
-    shadowRadius: 0.5
+    shadowRadius: 0.5,
   } as ViewStyle,
   editContent: {
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   } as ViewStyle,
   editLabel: {
     fontSize: RFValue(8),
     marginTop: verticalScale(1),
     fontWeight: '500',
-    lineHeight: moderateScale(12)
+    lineHeight: moderateScale(12),
   } as TextStyle,
   userName: {
     fontSize: RFValue(15),
     fontWeight: '600',
     marginTop: verticalScale(10),
-    marginBottom: verticalScale(2)
+    marginBottom: verticalScale(2),
   } as TextStyle,
   userEmail: {
     fontSize: RFValue(13),
-    opacity: 0.7
+    opacity: 0.7,
   } as TextStyle,
   skeletonWrapper: {
-    alignItems: 'center'
+    alignItems: 'center',
   } as ViewStyle,
   skeletonAvatar: {
     width: scale(80),
     height: scale(80),
     borderRadius: scale(40),
-    marginBottom: verticalScale(12)
+    marginBottom: verticalScale(12),
   } as ViewStyle,
   skeletonName: {
     width: scale(120),
     height: verticalScale(18),
     borderRadius: moderateScale(4),
-    marginBottom: verticalScale(6)
+    marginBottom: verticalScale(6),
   } as ViewStyle,
   skeletonEmail: {
     width: scale(160),
     height: verticalScale(14),
-    borderRadius: moderateScale(4)
-  } as ViewStyle
+    borderRadius: moderateScale(4),
+  } as ViewStyle,
 };

package/src/components/View/View.tsx

@@ -3,14 +3,23 @@
  * @lastModified Mon 07 Jul 2025 at 11:49 AM
  */
 import React from 'react';
-import { View as RNView, type ViewProps as RNViewProps, type ViewStyle } from 'react-native';
+import {
+  View as RNView,
+  type ViewProps as RNViewProps,
+  type ViewStyle,
+} from 'react-native';
 
 export type ViewProps = RNViewProps & {
   style?: ViewStyle;
   backgroundColor?: string;
 };
 
-export const View: React.FC<ViewProps> = ({ style, backgroundColor = 'transparent', children, ...rest }) => {
+export const View: React.FC<ViewProps> = ({
+  style,
+  backgroundColor = 'transparent',
+  children,
+  ...rest
+}) => {
   return (
     <RNView style={[style, { backgroundColor }]} {...rest}>
       {children}

package/src/components/index.ts

@@ -21,3 +21,4 @@ export * from './BlogView';
 export * from './ContentView';
 export * from './Search';
 export * from './Subscription';
+export * from './Alert';

package/src/components/layout/SafeAreaWrapper.tsx

@@ -17,12 +17,18 @@ export const SafeAreaWrapper: React.FC<SafeAreaWrapperProps> = ({
   style,
   theme,
   edges = ['top'],
-  fallbackBackground = '#fff'
+  fallbackBackground = '#fff',
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
 
   const containerStyle = useMemo(() => {
-    return [styles.container, { backgroundColor: appliedTheme?.colors?.background || fallbackBackground }, style];
+    return [
+      styles.container,
+      {
+        backgroundColor: appliedTheme?.colors?.background || fallbackBackground,
+      },
+      style,
+    ];
   }, [appliedTheme.colors.background, fallbackBackground, style]);
 
   return (
@@ -34,6 +40,6 @@ export const SafeAreaWrapper: React.FC<SafeAreaWrapperProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1
-  }
+    flex: 1,
+  },
 });

package/src/constants/dummySections.ts

@@ -1,6 +1,8 @@
 import type { IGetSectionData } from '../types';
 
-const generateDummySection = (type: IGetSectionData['type']): IGetSectionData => {
+const generateDummySection = (
+  type: IGetSectionData['type']
+): IGetSectionData => {
   return {
     _id: `dummy-${type}`,
     name: `Loading ${type.charAt(0).toUpperCase() + type.slice(1)}`,
@@ -9,7 +11,7 @@ const generateDummySection = (type: IGetSectionData['type']): IGetSectionData =>
     category: {
       _id: 'dummy-cat-id',
       name: 'Dummy',
-      slug: 'dummy'
+      slug: 'dummy',
     },
     content: {
       data: Array(5).fill({ id: '', order: 0 }),
@@ -20,15 +22,15 @@ const generateDummySection = (type: IGetSectionData['type']): IGetSectionData =>
           page: 1,
           hasNextPage: true,
           length: 5,
-          nextPage: 2
-        }
-      }
+          nextPage: 2,
+        },
+      },
     },
     label: '',
     order: 0,
     status: false,
     createdAt: new Date(),
-    updatedAt: new Date()
+    updatedAt: new Date(),
   };
 };
 
@@ -41,5 +43,5 @@ export const dummySections: IGetSectionData[] = [
   generateDummySection('card_style_4'),
   generateDummySection('card_style_5'),
   generateDummySection('card_style_6'),
-  generateDummySection('top_10')
+  generateDummySection('top_10'),
 ];

package/src/hooks/useDebounce.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 
-export const useDebounce = (callback: (value: string) => void, delay: number) => {
+export const useDebounce = (
+  callback: (value: string) => void,
+  delay: number
+) => {
   const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
 
   return React.useCallback(

package/src/hooks/useInitSplashCacheSync.ts

@@ -12,13 +12,25 @@ import { useSplashStore } from '../store/splashStore';
 const mmkvStorage = new MMKV();
 const inFlightDownloadsMap = new Map<string, Promise<string | null>>();
 
-const SUPPORTED_FILE_TYPES = ['json', 'mp4', 'jpg', 'jpeg', 'png', 'webp'] as const;
+const SUPPORTED_FILE_TYPES = [
+  'json',
+  'mp4',
+  'jpg',
+  'jpeg',
+  'png',
+  'webp',
+] as const;
 
 const extractFileExtension = (url: string): string => {
   try {
     const cleanUrl = url.split('?')[0];
-    const ext = cleanUrl?.substring(cleanUrl.lastIndexOf('.') + 1).toLowerCase() || '';
-    return SUPPORTED_FILE_TYPES.includes(ext as (typeof SUPPORTED_FILE_TYPES)[number]) ? ext : 'png';
+    const ext =
+      cleanUrl?.substring(cleanUrl.lastIndexOf('.') + 1).toLowerCase() || '';
+    return SUPPORTED_FILE_TYPES.includes(
+      ext as (typeof SUPPORTED_FILE_TYPES)[number]
+    )
+      ? ext
+      : 'png';
   } catch {
     return 'png';
   }
@@ -34,7 +46,7 @@ const cacheSplashAsset = async (
 
   const ext = extension.replace(/^\./, '').trim() || 'mp4';
   const hash = CryptoJS.MD5(`${url}|${mmkvKey}|${ext}`).toString();
-  const localPath = `${RNFS.CachesDirectoryPath}/splash_${hash}.${ext}`;
+  const localPath = `${RNFS?.CachesDirectoryPath}/splash_${hash}.${ext}`;
 
   if (inFlightDownloadsMap.has(hash)) {
     return inFlightDownloadsMap.get(hash)!;
@@ -45,26 +57,26 @@ const cacheSplashAsset = async (
       const previousHash = mmkvStorage.getString(mmkvKey);
 
       if (previousHash && previousHash !== hash) {
-        const oldPath = `${RNFS.CachesDirectoryPath}/splash_${previousHash}.${ext}`;
-        const exists = await RNFS.exists(oldPath);
+        const oldPath = `${RNFS?.CachesDirectoryPath}/splash_${previousHash}.${ext}`;
+        const exists = await RNFS?.exists(oldPath);
         if (exists) {
-          await RNFS.unlink(oldPath).catch(() => {});
+          await RNFS?.unlink(oldPath).catch(() => {});
         }
       }
 
       if (!forceDownload) {
-        const exists = await RNFS.exists(localPath);
+        const exists = await RNFS?.exists(localPath);
         if (exists && previousHash === hash) {
           return localPath;
         }
       }
 
-      const { statusCode } = await RNFS.downloadFile({
+      const { statusCode } = await RNFS?.downloadFile({
         fromUrl: url,
         toFile: localPath,
         cacheable: true,
         readTimeout: 15000,
-        connectionTimeout: 10000
+        connectionTimeout: 10000,
       }).promise;
 
       if (statusCode === 200) {
@@ -89,11 +101,11 @@ type UseSplashCacheSyncOptions = {
 export const useInitSplashCacheSync = ({
   logoUrl,
   backgroundUrl,
-  forceDownload = false
+  forceDownload = false,
 }: UseSplashCacheSyncOptions) => {
   const [splashSyncState, setSplashSyncState] = useState({
     isReady: false,
-    error: null as Error | null
+    error: null as Error | null,
   });
 
   const setSplashLogoPath = useSplashStore((s) => s.setLogoPath);
@@ -106,11 +118,21 @@ export const useInitSplashCacheSync = ({
       try {
         const [logoPath, backgroundPath] = await Promise.all([
           logoUrl
-            ? cacheSplashAsset(logoUrl, extractFileExtension(logoUrl), 'splash_logo', forceDownload)
+            ? cacheSplashAsset(
+                logoUrl,
+                extractFileExtension(logoUrl),
+                'splash_logo',
+                forceDownload
+              )
             : Promise.resolve(null),
           backgroundUrl
-            ? cacheSplashAsset(backgroundUrl, extractFileExtension(backgroundUrl), 'splash_background', forceDownload)
-            : Promise.resolve(null)
+            ? cacheSplashAsset(
+                backgroundUrl,
+                extractFileExtension(backgroundUrl),
+                'splash_background',
+                forceDownload
+              )
+            : Promise.resolve(null),
         ]);
 
         if (!isMounted) return;
@@ -130,7 +152,13 @@ export const useInitSplashCacheSync = ({
     return () => {
       isMounted = false;
     };
-  }, [logoUrl, backgroundUrl, forceDownload, setSplashLogoPath, setSplashBackgroundPath]);
+  }, [
+    logoUrl,
+    backgroundUrl,
+    forceDownload,
+    setSplashLogoPath,
+    setSplashBackgroundPath,
+  ]);
 
   const splashLogoLocalPath = useSplashStore((s) => s.logo.localPath);
   const splashBackgroundLocalPath = useSplashStore((s) => s.backdrop.localPath);
@@ -140,7 +168,7 @@ export const useInitSplashCacheSync = ({
     isLoading: !splashSyncState.isReady && !splashSyncState.error,
     data: {
       localPathLogo: splashLogoLocalPath,
-      localPathBackground: splashBackgroundLocalPath
-    }
+      localPathBackground: splashBackgroundLocalPath,
+    },
   };
 };

package/src/hooks/useKeyboard.ts

@@ -10,8 +10,10 @@ export const useKeyboard = () => {
   const [isKeyboardOpen, setKeyboardOpen] = useState(false);
 
   useEffect(() => {
-    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const showEvent =
+      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent =
+      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
 
     const showListener = Keyboard.addListener(showEvent, () => {
       setKeyboardOpen(true);
@@ -29,6 +31,6 @@ export const useKeyboard = () => {
 
   return {
     isKeyboardOpen,
-    hideKeyboard: () => Keyboard.dismiss()
+    hideKeyboard: () => Keyboard.dismiss(),
   };
 };

package/src/hooks/usePaginatedSection.ts

@@ -17,7 +17,7 @@ export function usePaginatedSection<T>(
     nextPage: number | null;
   }>({
     hasNextPage: true,
-    nextPage: 2
+    nextPage: 2,
   });
   const [loading, setLoading] = useState(false);
 
@@ -38,8 +38,8 @@ export function usePaginatedSection<T>(
           sectionId,
           meta: {
             hasNextPage: pagination.hasNextPage,
-            nextPage: page
-          }
+            nextPage: page,
+          },
         });
 
         if (!res || !res.data || !res.meta?.pagination) {
@@ -50,14 +50,18 @@ export function usePaginatedSection<T>(
         const { hasNextPage, nextPage } = res.meta.pagination;
 
         setData((prev) => {
-          const existingIds = new Set((prev as any[]).map((item: any) => item._id));
-          const newItems = res.data.filter((item: any) => !existingIds.has(item._id));
+          const existingIds = new Set(
+            (prev as any[]).map((item: any) => item._id)
+          );
+          const newItems = res.data.filter(
+            (item: any) => !existingIds.has(item._id)
+          );
           return [...prev, ...newItems];
         });
 
         setPagination({
           hasNextPage,
-          nextPage
+          nextPage,
         });
       } catch (err) {
         console.error(`❌ Error loading section [${sectionId}]:`, err);
@@ -73,6 +77,6 @@ export function usePaginatedSection<T>(
     pagination,
     loading,
     hasMore: pagination.hasNextPage,
-    loadMoreData
+    loadMoreData,
   };
 }

package/src/store/RecentSearchesStore.ts

@@ -33,32 +33,37 @@ export const useRecentSearchesStore = create<RecentSearchesState>()(
 
         const maxCount = limit ?? get().pillMaxCount;
         const current = get().recentSearches;
-        const updated = [trimmed, ...current.filter((t) => t !== trimmed)].slice(0, maxCount);
+        const updated = [
+          trimmed,
+          ...current.filter((t) => t !== trimmed),
+        ].slice(0, maxCount);
         set({ recentSearches: updated });
       },
 
       removeSearchTerm: (term) =>
         set((state) => ({
-          recentSearches: state.recentSearches.filter((t) => t !== term)
+          recentSearches: state.recentSearches.filter((t) => t !== term),
         })),
 
       clearSearches: () => set({ recentSearches: [] }),
 
-      setPillMaxCount: (count) => set({ pillMaxCount: count })
+      setPillMaxCount: (count) => set({ pillMaxCount: count }),
     }),
     {
       name: 'recent-searches-storage',
       storage: createJSONStorage(() => ({
         getItem: (name) => mmkv.getString(name) ?? null,
         setItem: (name, value) => mmkv.set(name, value),
-        removeItem: (name) => mmkv.delete(name)
+        removeItem: (name) => mmkv.delete(name),
       })),
       partialize: (state) => ({
         recentSearches: state.recentSearches,
-        pillMaxCount: state.pillMaxCount
+        pillMaxCount: state.pillMaxCount,
       }),
       onRehydrateStorage: () => (state) => {
-        const hasData = (state?.recentSearches?.length ?? 0) > 0 || (state?.pillMaxCount ?? 20) !== 20;
+        const hasData =
+          (state?.recentSearches?.length ?? 0) > 0 ||
+          (state?.pillMaxCount ?? 20) !== 20;
 
         if (hasData) {
           setTimeout(() => {
@@ -68,7 +73,7 @@ export const useRecentSearchesStore = create<RecentSearchesState>()(
         } else {
           useRecentSearchesStore.setState({ isLoading: false });
         }
-      }
+      },
     }
   )
 );

package/src/store/splashStore.ts

@@ -28,11 +28,11 @@ export const useSplashStore = create<SplashState>()(
     (set) => ({
       logo: {
         localPath: null,
-        lastUpdated: null
+        lastUpdated: null,
       },
       backdrop: {
         localPath: null,
-        lastUpdated: null
+        lastUpdated: null,
       },
 
       setLogoPath: (path) =>
@@ -40,16 +40,16 @@ export const useSplashStore = create<SplashState>()(
           logo: {
             ...state.logo,
             localPath: path,
-            lastUpdated: Date.now()
-          }
+            lastUpdated: Date.now(),
+          },
         })),
 
       clearLogoPath: () =>
         set(() => ({
           logo: {
             localPath: null,
-            lastUpdated: null
-          }
+            lastUpdated: null,
+          },
         })),
 
       setBackdropPath: (path) =>
@@ -57,35 +57,35 @@ export const useSplashStore = create<SplashState>()(
           backdrop: {
             ...state.backdrop,
             localPath: path,
-            lastUpdated: Date.now()
-          }
+            lastUpdated: Date.now(),
+          },
         })),
 
       clearBackdropPath: () =>
         set(() => ({
           backdrop: {
             localPath: null,
-            lastUpdated: null
-          }
-        }))
+            lastUpdated: null,
+          },
+        })),
     }),
     {
       name: 'splash-storage',
       storage: createJSONStorage(() => ({
         getItem: (name) => mmkv.getString(name) || null, // Updated to use MMKV getString
         setItem: (name, value) => mmkv.set(name, value), // Updated to use MMKV set
-        removeItem: (name) => mmkv.delete(name) // Updated to use MMKV delete
+        removeItem: (name) => mmkv.delete(name), // Updated to use MMKV delete
       })),
       partialize: (state) => ({
         logo: {
           localPath: state.logo.localPath,
-          lastUpdated: state.logo.lastUpdated
+          lastUpdated: state.logo.lastUpdated,
         },
         backdrop: {
           localPath: state.backdrop.localPath,
-          lastUpdated: state.backdrop.lastUpdated
-        }
-      })
+          lastUpdated: state.backdrop.lastUpdated,
+        },
+      }),
     }
   )
 );