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

package/src/hooks/useInitSplashCacheSync.ts

@@ -0,0 +1,146 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 29 Jul 2025 at 05:37 PM
+ */
+
+import { useEffect, useState } from 'react';
+import RNFS from 'react-native-fs';
+import CryptoJS from 'crypto-js';
+import { MMKV } from 'react-native-mmkv';
+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 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';
+  } catch {
+    return 'png';
+  }
+};
+
+const cacheSplashAsset = async (
+  url: string,
+  extension: string,
+  mmkvKey: string,
+  forceDownload: boolean
+): Promise<string | null> => {
+  if (!url?.trim()) return null;
+
+  const ext = extension.replace(/^\./, '').trim() || 'mp4';
+  const hash = CryptoJS.MD5(`${url}|${mmkvKey}|${ext}`).toString();
+  const localPath = `${RNFS.CachesDirectoryPath}/splash_${hash}.${ext}`;
+
+  if (inFlightDownloadsMap.has(hash)) {
+    return inFlightDownloadsMap.get(hash)!;
+  }
+
+  const downloadTask = (async () => {
+    try {
+      const previousHash = mmkvStorage.getString(mmkvKey);
+
+      if (previousHash && previousHash !== hash) {
+        const oldPath = `${RNFS.CachesDirectoryPath}/splash_${previousHash}.${ext}`;
+        const exists = await RNFS.exists(oldPath);
+        if (exists) {
+          await RNFS.unlink(oldPath).catch(() => {});
+        }
+      }
+
+      if (!forceDownload) {
+        const exists = await RNFS.exists(localPath);
+        if (exists && previousHash === hash) {
+          return localPath;
+        }
+      }
+
+      const { statusCode } = await RNFS.downloadFile({
+        fromUrl: url,
+        toFile: localPath,
+        cacheable: true,
+        readTimeout: 15000,
+        connectionTimeout: 10000
+      }).promise;
+
+      if (statusCode === 200) {
+        mmkvStorage.set(mmkvKey, hash);
+        return localPath;
+      }
+    } catch {}
+
+    return null;
+  })();
+
+  inFlightDownloadsMap.set(hash, downloadTask);
+  return downloadTask;
+};
+
+type UseSplashCacheSyncOptions = {
+  logoUrl?: string;
+  backgroundUrl?: string;
+  forceDownload?: boolean;
+};
+
+export const useInitSplashCacheSync = ({
+  logoUrl,
+  backgroundUrl,
+  forceDownload = false
+}: UseSplashCacheSyncOptions) => {
+  const [splashSyncState, setSplashSyncState] = useState({
+    isReady: false,
+    error: null as Error | null
+  });
+
+  const setSplashLogoPath = useSplashStore((s) => s.setLogoPath);
+  const setSplashBackgroundPath = useSplashStore((s) => s.setBackdropPath);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const syncSplashAssets = async () => {
+      try {
+        const [logoPath, backgroundPath] = await Promise.all([
+          logoUrl
+            ? cacheSplashAsset(logoUrl, extractFileExtension(logoUrl), 'splash_logo', forceDownload)
+            : Promise.resolve(null),
+          backgroundUrl
+            ? cacheSplashAsset(backgroundUrl, extractFileExtension(backgroundUrl), 'splash_background', forceDownload)
+            : Promise.resolve(null)
+        ]);
+
+        if (!isMounted) return;
+
+        if (logoPath) setSplashLogoPath?.(logoPath);
+        if (backgroundPath) setSplashBackgroundPath?.(backgroundPath);
+
+        setSplashSyncState({ isReady: true, error: null });
+      } catch (err) {
+        if (isMounted) {
+          setSplashSyncState({ isReady: true, error: err as Error });
+        }
+      }
+    };
+
+    syncSplashAssets();
+    return () => {
+      isMounted = false;
+    };
+  }, [logoUrl, backgroundUrl, forceDownload, setSplashLogoPath, setSplashBackgroundPath]);
+
+  const splashLogoLocalPath = useSplashStore((s) => s.logo.localPath);
+  const splashBackgroundLocalPath = useSplashStore((s) => s.backdrop.localPath);
+
+  return {
+    state: splashSyncState,
+    isLoading: !splashSyncState.isReady && !splashSyncState.error,
+    data: {
+      localPathLogo: splashLogoLocalPath,
+      localPathBackground: splashBackgroundLocalPath
+    }
+  };
+};

package/src/hooks/useKeyboard.ts

@@ -0,0 +1,34 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sat 14 Jun 2025 at 03:01 PM
+ */
+
+import { useEffect, useState } from 'react';
+import { Keyboard, Platform } from 'react-native';
+
+export const useKeyboard = () => {
+  const [isKeyboardOpen, setKeyboardOpen] = useState(false);
+
+  useEffect(() => {
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+    const showListener = Keyboard.addListener(showEvent, () => {
+      setKeyboardOpen(true);
+    });
+
+    const hideListener = Keyboard.addListener(hideEvent, () => {
+      setKeyboardOpen(false);
+    });
+
+    return () => {
+      showListener.remove();
+      hideListener.remove();
+    };
+  }, []);
+
+  return {
+    isKeyboardOpen,
+    hideKeyboard: () => Keyboard.dismiss()
+  };
+};

package/src/hooks/usePaginatedSection.ts

@@ -0,0 +1,78 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 25 Jun 2025 at 12:00 PM
+ */
+import React, { useCallback, useState } from 'react';
+import type { MoreFetchData } from '../types';
+
+export function usePaginatedSection<T>(
+  sectionId: string,
+  fetchFn?: MoreFetchData<T>,
+  initialData: T[] = [],
+  isLoading?: boolean
+) {
+  const [data, setData] = useState<T[]>(initialData);
+  const [pagination, setPagination] = useState<{
+    hasNextPage: boolean;
+    nextPage: number | null;
+  }>({
+    hasNextPage: true,
+    nextPage: 2
+  });
+  const [loading, setLoading] = useState(false);
+
+  // Sync initial data on mount or loading complete
+  React.useEffect(() => {
+    if (!isLoading && initialData.length) {
+      setData(initialData);
+    }
+  }, [isLoading, initialData]);
+
+  const loadMoreData = useCallback(
+    async (page: number | null) => {
+      if (!page || loading || !pagination.hasNextPage || !fetchFn) return;
+
+      setLoading(true);
+      try {
+        const res = await fetchFn({
+          sectionId,
+          meta: {
+            hasNextPage: pagination.hasNextPage,
+            nextPage: page
+          }
+        });
+
+        if (!res || !res.data || !res.meta?.pagination) {
+          console.warn(`⚠️ Invalid response for section: ${sectionId}`, res);
+          return;
+        }
+
+        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));
+          return [...prev, ...newItems];
+        });
+
+        setPagination({
+          hasNextPage,
+          nextPage
+        });
+      } catch (err) {
+        console.error(`❌ Error loading section [${sectionId}]:`, err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [loading, pagination.hasNextPage, fetchFn, sectionId]
+  );
+
+  return {
+    data,
+    pagination,
+    loading,
+    hasMore: pagination.hasNextPage,
+    loadMoreData
+  };
+}

package/src/index.ts

@@ -3,4 +3,6 @@
  * @lastModified Sun 08 Jun 2025 at 03:23 PM
  */
 export * from './components';
-export * from './types';
+export * from './theme';
+export type * from './types';
+export { default as SizeMatters } from './utils/SizeMatters';

package/src/store/RecentSearchesStore.ts

@@ -0,0 +1,74 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Thu 04 Jul 2025 at 07:30 PM
+ */
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { MMKV } from 'react-native-mmkv';
+
+const mmkv = new MMKV();
+
+// Define store state type
+type RecentSearchesState = {
+  recentSearches: string[];
+  pillMaxCount: number;
+  isLoading: boolean;
+  addSearchTerm: (term: string, limit?: number) => void;
+  removeSearchTerm: (term: string) => void;
+  clearSearches: () => void;
+  setPillMaxCount: (count: number) => void;
+};
+
+export const useRecentSearchesStore = create<RecentSearchesState>()(
+  persist(
+    (set, get) => ({
+      recentSearches: [],
+      pillMaxCount: 20,
+      isLoading: true,
+
+      addSearchTerm: (term, limit) => {
+        const trimmed = term.trim();
+        if (!trimmed) return;
+
+        const maxCount = limit ?? get().pillMaxCount;
+        const current = get().recentSearches;
+        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)
+        })),
+
+      clearSearches: () => set({ recentSearches: [] }),
+
+      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)
+      })),
+      partialize: (state) => ({
+        recentSearches: state.recentSearches,
+        pillMaxCount: state.pillMaxCount
+      }),
+      onRehydrateStorage: () => (state) => {
+        const hasData = (state?.recentSearches?.length ?? 0) > 0 || (state?.pillMaxCount ?? 20) !== 20;
+
+        if (hasData) {
+          setTimeout(() => {
+            useRecentSearchesStore.setState({ isLoading: false });
+            console.log('🔄 Zustand store rehydrated');
+          }, 50);
+        } else {
+          useRecentSearchesStore.setState({ isLoading: false });
+        }
+      }
+    }
+  )
+);

package/src/store/splashStore.ts

@@ -0,0 +1,91 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Thu 12 Jun 2025 at 07:57 PM
+ */
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { MMKV } from 'react-native-mmkv'; // Updated import
+
+const mmkv = new MMKV(); // Initialize MMKV instance
+
+interface ImageState {
+  localPath: string | null;
+  lastUpdated: number | null;
+}
+
+type SplashState = {
+  logo: ImageState;
+  backdrop: ImageState;
+  setLogoPath: (path: string | null) => void;
+  clearLogoPath: () => void;
+  setBackdropPath: (path: string | null) => void;
+  clearBackdropPath: () => void;
+};
+
+export const useSplashStore = create<SplashState>()(
+  persist(
+    (set) => ({
+      logo: {
+        localPath: null,
+        lastUpdated: null
+      },
+      backdrop: {
+        localPath: null,
+        lastUpdated: null
+      },
+
+      setLogoPath: (path) =>
+        set((state) => ({
+          logo: {
+            ...state.logo,
+            localPath: path,
+            lastUpdated: Date.now()
+          }
+        })),
+
+      clearLogoPath: () =>
+        set(() => ({
+          logo: {
+            localPath: null,
+            lastUpdated: null
+          }
+        })),
+
+      setBackdropPath: (path) =>
+        set((state) => ({
+          backdrop: {
+            ...state.backdrop,
+            localPath: path,
+            lastUpdated: Date.now()
+          }
+        })),
+
+      clearBackdropPath: () =>
+        set(() => ({
+          backdrop: {
+            localPath: 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
+      })),
+      partialize: (state) => ({
+        logo: {
+          localPath: state.logo.localPath,
+          lastUpdated: state.logo.lastUpdated
+        },
+        backdrop: {
+          localPath: state.backdrop.localPath,
+          lastUpdated: state.backdrop.lastUpdated
+        }
+      })
+    }
+  )
+);

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,107 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sat 26 Jul 2025 at 02:11 PM
+ */
+import React, { createContext, useMemo, useState, useCallback, useEffect, useContext, type ReactNode } from 'react';
+import { View, useColorScheme, StatusBar } from 'react-native';
+import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
+import { LightTheme, DarkTheme, type ITheme, type AppTheme } from './themes';
+
+type ThemeContextType = {
+  theme: ITheme;
+  isDarkMode: boolean;
+  toggleTheme: () => void;
+  setThemeOverride: (override?: Partial<AppTheme>) => void;
+};
+
+const ThemeContext = createContext<ThemeContextType | null>(null);
+
+export const useThemeContext = () => {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error('useTheme must be used within ZezoUIProvider');
+  return ctx;
+};
+
+type ZezoUIProviderProps = {
+  children: ReactNode;
+  theme?: Partial<AppTheme> & { dark?: boolean };
+  autoSwitchTheme?: boolean;
+};
+
+const getIsDarkMode = (
+  autoSwitchTheme: boolean | undefined,
+  systemScheme: 'dark' | 'light' | null,
+  userDark?: boolean
+): boolean => {
+  if (autoSwitchTheme) return systemScheme === 'dark';
+  return userDark ?? false;
+};
+
+export const ZezoUIProvider: React.FC<ZezoUIProviderProps> = ({ children, theme, autoSwitchTheme }) => {
+  const systemScheme = useColorScheme() ?? null;
+
+  const [overrideTheme, setOverrideTheme] = useState<Partial<AppTheme> | undefined>(theme);
+
+  // ✅ Sync prop to state if changed externally
+  useEffect(() => {
+    if (theme) {
+      setOverrideTheme(theme);
+    }
+  }, [theme]);
+
+  // ✅ This prioritizes externally passed theme.dark
+  const isDarkMode = useMemo(() => {
+    if (theme?.dark !== undefined) return theme.dark;
+    return getIsDarkMode(autoSwitchTheme, systemScheme, overrideTheme?.dark);
+  }, [theme?.dark, autoSwitchTheme, systemScheme, overrideTheme?.dark]);
+
+  const baseTheme = useMemo<ITheme>(() => (isDarkMode ? DarkTheme : LightTheme), [isDarkMode]);
+
+  const mergedTheme = useMemo<ITheme>(() => {
+    return {
+      ...baseTheme,
+      ...overrideTheme,
+      dark: isDarkMode,
+      colors: {
+        ...baseTheme.colors,
+        ...(overrideTheme?.colors ?? {})
+      }
+    };
+  }, [baseTheme, overrideTheme, isDarkMode]);
+
+  const toggleTheme = useCallback(() => {
+    if (autoSwitchTheme || theme?.dark !== undefined) return;
+    setOverrideTheme((prev) => ({
+      ...prev,
+      dark: !getIsDarkMode(false, null, prev?.dark)
+    }));
+  }, [autoSwitchTheme, theme?.dark]);
+
+  const setThemeOverride = useCallback((override?: Partial<AppTheme>) => {
+    setOverrideTheme(override);
+  }, []);
+
+  // ✅ Update StatusBar only when required
+  useEffect(() => {
+    StatusBar.setBarStyle(isDarkMode ? 'light-content' : 'dark-content', true);
+    StatusBar.setBackgroundColor(mergedTheme.colors.background, true);
+  }, [isDarkMode, mergedTheme.colors.background]);
+
+  const contextValue = useMemo(
+    () => ({
+      theme: mergedTheme,
+      isDarkMode,
+      toggleTheme,
+      setThemeOverride
+    }),
+    [mergedTheme, isDarkMode, toggleTheme, setThemeOverride]
+  );
+
+  return (
+    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+      <ThemeContext.Provider value={contextValue}>
+        <View style={{ flex: 1, backgroundColor: mergedTheme.colors.background }}>{children}</View>
+      </ThemeContext.Provider>
+    </SafeAreaProvider>
+  );
+};

package/src/theme/hook/useTheme.ts

@@ -0,0 +1,41 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sat 26 Jul 2025 at 02:11 PM
+ */
+
+import React, { useMemo } from 'react';
+import { useThemeContext } from '../ThemeProvider';
+import { DarkTheme, LightTheme, type AppTheme, type ITheme } from '../themes';
+
+export const useTheme = (override?: Partial<AppTheme>): { theme: ITheme } => {
+  const { theme: contextTheme, isDarkMode, setThemeOverride } = useThemeContext();
+
+  const isOverrideDark = override?.dark ?? contextTheme.dark ?? isDarkMode;
+
+  const baseTheme = useMemo(() => {
+    return isOverrideDark ? DarkTheme : LightTheme;
+  }, [isOverrideDark]);
+
+  const finalTheme = useMemo<ITheme>(() => {
+    return {
+      ...baseTheme,
+      ...override,
+      dark: isOverrideDark,
+      colors: {
+        ...baseTheme.colors,
+        ...(override?.colors ?? {})
+      }
+    };
+  }, [baseTheme, override, isOverrideDark]);
+
+  // 🔄 Push override only once (optional)
+  React.useEffect(() => {
+    if (override) {
+      setThemeOverride(override);
+    } else {
+      setThemeOverride(undefined);
+    }
+  }, [override, setThemeOverride]);
+
+  return useMemo(() => ({ theme: finalTheme }), [finalTheme]);
+};

package/src/theme/index.ts

@@ -0,0 +1,7 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sat 14 Jun 2025 at 11:47 AM
+ */
+
+export * from './ThemeProvider';
+export * from './hook/useTheme';