@zezosoft/zezo-ott-react-native-ui-kit 1.3.5 → 1.3.6

package/src/hooks/useSplashCache.ts

@@ -0,0 +1,245 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import RNFS from 'react-native-fs';
+import NetInfo from '@react-native-community/netinfo';
+import { useSplashStore } from '../store/splashStore';
+import { createNamespacedStorage } from '../store/storage';
+
+const storage = createNamespacedStorage('splash-cache');
+const pendingDownloads = new Map<string, Promise<CachedAsset | null>>();
+const FALLBACK_EXT = 'bin';
+const FILE_PREFIX = 'splash_';
+
+type CachedAsset = {
+  filePath: string;
+  fileExt: string;
+};
+
+export type SplashCacheOptions = {
+  logoUrl?: string;
+  backgroundUrl?: string;
+  forceRefresh?: boolean;
+};
+
+export type SplashCacheResult = {
+  isLoading: boolean;
+  logoExt: string;
+  data: {
+    logoPath: string | null;
+    backgroundPath: string | null;
+  };
+};
+
+const pathKey = (slot: string) => `splash_path__${slot}`;
+const extKey = (slot: string) => `splash_ext__${slot}`;
+
+const isOnline = async (): Promise<boolean> => {
+  const state = await NetInfo.fetch();
+  return !!state.isConnected;
+};
+
+const extractExt = (url: string): string => {
+  try {
+    const clean = url.split('?')[0] ?? '';
+    const dot = clean.lastIndexOf('.');
+    if (dot === -1) return FALLBACK_EXT;
+    const ext = clean.substring(dot + 1).toLowerCase();
+    return /^[a-z0-9]+$/.test(ext) ? ext : FALLBACK_EXT;
+  } catch {
+    return FALLBACK_EXT;
+  }
+};
+
+const simpleHash = (str: string): string => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash * 31 + str.charCodeAt(i)) % 1000000007;
+  }
+  return hash.toString(36);
+};
+
+const buildFilePath = (url: string, slot: string, ext: string): string => {
+  const cleanExt = ext.replace(/^\./, '') || FALLBACK_EXT;
+  const hash = simpleHash(`${url}|${slot}|${cleanExt}`);
+  return `${RNFS.CachesDirectoryPath}/${FILE_PREFIX}${hash}.${cleanExt}`;
+};
+
+const fetchAndCache = async (
+  url: string,
+  slot: string,
+  forceRefresh: boolean
+): Promise<CachedAsset | null> => {
+  if (!url?.trim()) return null;
+
+  const ext = extractExt(url);
+  const targetPath = buildFilePath(url, slot, ext);
+
+  if (pendingDownloads.has(targetPath)) {
+    return pendingDownloads.get(targetPath)!;
+  }
+
+  const task = (async (): Promise<CachedAsset | null> => {
+    const cachedPath = storage.getString(pathKey(slot)) ?? null;
+    const cachedExt = storage.getString(extKey(slot)) ?? ext;
+
+    const getFallback = async () =>
+      cachedPath && (await RNFS.exists(cachedPath))
+        ? { filePath: cachedPath, fileExt: cachedExt }
+        : null;
+
+    if (
+      !forceRefresh &&
+      cachedPath === targetPath &&
+      (await RNFS.exists(targetPath))
+    ) {
+      return { filePath: targetPath, fileExt: cachedExt };
+    }
+
+    if (!(await isOnline())) {
+      const fallback = await getFallback();
+      if (!fallback) {
+        console.warn(
+          `[SplashCache] Offline — no cached file for slot: ${slot}`
+        );
+      }
+      return fallback;
+    }
+
+    try {
+      const { statusCode } = await RNFS.downloadFile({
+        fromUrl: url,
+        toFile: targetPath,
+        cacheable: true,
+        readTimeout: 15_000,
+        connectionTimeout: 10_000,
+      }).promise;
+
+      if (statusCode !== 200) {
+        throw new Error(`HTTP ${statusCode}`);
+      }
+
+      storage.set(pathKey(slot), targetPath);
+      storage.set(extKey(slot), ext);
+
+      if (cachedPath && cachedPath !== targetPath) {
+        await RNFS.unlink(cachedPath).catch(() => {});
+      }
+
+      return { filePath: targetPath, fileExt: ext };
+    } catch (err) {
+      console.warn(`[SplashCache] Download failed for slot "${slot}":`, err);
+    }
+
+    return getFallback();
+  })().finally(() => {
+    pendingDownloads.delete(targetPath);
+  });
+
+  pendingDownloads.set(targetPath, task);
+  return task;
+};
+
+const getCachedAssetForUrl = (
+  url: string | undefined,
+  slot: string
+): CachedAsset | null => {
+  if (!url?.trim()) return null;
+  const ext = extractExt(url);
+  const targetPath = buildFilePath(url, slot, ext);
+  const cachedPath = storage.getString(pathKey(slot)) ?? null;
+  const cachedExt = storage.getString(extKey(slot)) ?? ext;
+
+  return cachedPath === targetPath
+    ? { filePath: cachedPath, fileExt: cachedExt }
+    : null;
+};
+
+type HookState = {
+  isLoading: boolean;
+  logoPath: string | null;
+  backgroundPath: string | null;
+  logoExt: string;
+};
+
+export const useSplashCache = ({
+  logoUrl,
+  backgroundUrl,
+  forceRefresh = false,
+}: SplashCacheOptions): SplashCacheResult => {
+  const getInitialState = (): HookState => {
+    const logo = logoUrl ? getCachedAssetForUrl(logoUrl, 'logo') : null;
+    const bg = backgroundUrl
+      ? getCachedAssetForUrl(backgroundUrl, 'background')
+      : null;
+    const isReady =
+      !forceRefresh && (!logoUrl || logo) && (!backgroundUrl || bg);
+
+    return {
+      isLoading: !isReady,
+      logoPath: logo?.filePath ?? null,
+      backgroundPath: bg?.filePath ?? null,
+      logoExt: logo?.fileExt ?? '',
+    };
+  };
+
+  const [state, setState] = useState<HookState>(getInitialState);
+  const prevProps = useRef({ logoUrl, backgroundUrl, forceRefresh });
+
+  if (
+    prevProps.current.logoUrl !== logoUrl ||
+    prevProps.current.backgroundUrl !== backgroundUrl ||
+    prevProps.current.forceRefresh !== forceRefresh
+  ) {
+    prevProps.current = { logoUrl, backgroundUrl, forceRefresh };
+    setState(getInitialState());
+  }
+
+  const mounted = useRef(true);
+
+  useEffect(() => {
+    mounted.current = true;
+
+    const sync = async () => {
+      const [logoAsset, backgroundAsset] = await Promise.all([
+        logoUrl ? fetchAndCache(logoUrl, 'logo', forceRefresh) : null,
+        backgroundUrl
+          ? fetchAndCache(backgroundUrl, 'background', forceRefresh)
+          : null,
+      ]);
+
+      if (!mounted.current) return;
+
+      setState({
+        isLoading: false,
+        logoPath: logoAsset?.filePath ?? null,
+        backgroundPath: backgroundAsset?.filePath ?? null,
+        logoExt: logoAsset?.fileExt ?? '',
+      });
+
+      const { setLogoPath, setBackdropPath } = useSplashStore.getState();
+      if (logoAsset?.filePath) setLogoPath(logoAsset.filePath);
+      if (backgroundAsset?.filePath) setBackdropPath(backgroundAsset.filePath);
+    };
+
+    sync().catch(() => {
+      if (mounted.current) setState((prev) => ({ ...prev, isLoading: false }));
+    });
+
+    return () => {
+      mounted.current = false;
+    };
+  }, [logoUrl, backgroundUrl, forceRefresh]);
+
+  return {
+    isLoading: state.isLoading,
+    logoExt: state.logoExt,
+    data: {
+      logoPath: state.logoPath,
+      backgroundPath: state.backgroundPath,
+    },
+  };
+};

package/src/index.tsx

@@ -0,0 +1,9 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+export * from './components';
+export * from './theme';
+export type * from './types';
+export { default as SizeMatters } from './utils/SizeMatters';

package/src/store/RecentSearchesStore.ts

@@ -0,0 +1,72 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { mmkvZustandStorage } from './storage';
+
+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(() => mmkvZustandStorage),
+      version: 1,
+      partialize: (state) => ({
+        recentSearches: state.recentSearches,
+        pillMaxCount: state.pillMaxCount,
+      }),
+      onRehydrateStorage: () => (state) => {
+        const delay =
+          (state?.recentSearches?.length ?? 0) > 0 ||
+          (state?.pillMaxCount ?? 20) !== 20;
+
+        if (delay) {
+          setTimeout(() => {
+            useRecentSearchesStore.setState({ isLoading: false });
+          }, 50);
+        } else {
+          useRecentSearchesStore.setState({ isLoading: false });
+        }
+      },
+    }
+  )
+);

package/src/store/splashStore.ts

@@ -0,0 +1,86 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { mmkvZustandStorage } from './storage';
+
+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(() => mmkvZustandStorage),
+      version: 1,
+      partialize: (state) => ({
+        logo: {
+          localPath: state.logo.localPath,
+          lastUpdated: state.logo.lastUpdated,
+        },
+        backdrop: {
+          localPath: state.backdrop.localPath,
+          lastUpdated: state.backdrop.lastUpdated,
+        },
+      }),
+    }
+  )
+);

package/src/store/storage.ts

@@ -0,0 +1,29 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { createMMKV } from 'react-native-mmkv';
+
+export const mmkv = createMMKV({ id: 'zezo-app-storage' });
+
+export const mmkvZustandStorage = {
+  getItem: (name: string): string | null => mmkv.getString(name) ?? null,
+  setItem: (name: string, value: string): void => mmkv.set(name, value),
+  removeItem: (name: string) => {
+    mmkv.remove(name);
+  },
+};
+
+export const createNamespacedStorage = (namespace: string) => {
+  const ns = (key: string) => `${namespace}::${key}`;
+
+  return {
+    getString: (key: string): string | undefined => mmkv.getString(ns(key)),
+    set: (key: string, value: string | number | boolean): void =>
+      mmkv.set(ns(key), value),
+    remove: (key: string): void => {
+      mmkv.remove(ns(key));
+    },
+  };
+};

package/src/theme/ThemeContext.ts

@@ -0,0 +1,19 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { createContext } from 'react';
+import { type ITheme } from './themes';
+
+export type ThemeContextType = {
+  themeColors: {
+    dark: ITheme['colors'];
+    light: ITheme['colors'];
+  };
+  isDarkMode: boolean;
+  setTheme: (mode: 'light' | 'dark' | 'system') => void;
+  theme: ITheme;
+};
+
+export const ThemeContext = createContext<ThemeContextType | null>(null);

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,87 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useEffect, useMemo, type ReactNode } from 'react';
+import 'react-native-gesture-handler';
+import 'react-native-reanimated';
+import { Platform, StyleSheet, View } from 'react-native';
+import {
+  SafeAreaProvider,
+  initialWindowMetrics,
+} from 'react-native-safe-area-context';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { AppStatusBar } from '../components/common/AppStatusBar';
+import { useTheme } from './hooks/useTheme';
+import { type CustomTheme } from './themes';
+import { ThemeContext } from './ThemeContext';
+import SystemNavigationBar from 'react-native-system-navigation-bar';
+import tinycolor from 'tinycolor2';
+
+export { useTheme } from './hooks/useTheme';
+
+type ZezoUIProviderProps = {
+  children: ReactNode;
+  theme?: CustomTheme;
+  isDark?: boolean;
+};
+
+/**
+ * ZezoUIProvider — Wraps your app with theming, safe area, and gesture support.
+ */
+export const ZezoUIProvider: React.FC<ZezoUIProviderProps> = ({
+  children,
+  theme: overrideTheme,
+  isDark,
+}) => {
+  const {
+    theme: finalTheme,
+    isDarkMode,
+    setTheme,
+    themeColors,
+  } = useTheme(overrideTheme, isDark);
+
+  // Memoize context value to prevent unnecessary re-renders
+  const contextValue = useMemo(
+    () => ({
+      themeColors,
+      isDarkMode,
+      setTheme,
+      theme: finalTheme,
+    }),
+    [themeColors, isDarkMode, setTheme, finalTheme]
+  );
+
+  // Memoize container style
+  const containerStyle = useMemo(
+    () => ({ flex: 1, backgroundColor: finalTheme.colors.background }),
+    [finalTheme.colors.background]
+  );
+
+  // Update system navigation bar (Android) with theme colors
+  useEffect(() => {
+    const isDarkBackground = tinycolor(finalTheme.colors.background).isDark();
+    if (Platform.OS === 'android') {
+      SystemNavigationBar.setNavigationColor(
+        isDarkBackground ? '#212121' : '#FFFFFF'
+      );
+    }
+  }, [finalTheme.colors.background]);
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+        <ThemeContext.Provider value={contextValue}>
+          <AppStatusBar theme={overrideTheme} />
+          <View style={containerStyle}>{children}</View>
+        </ThemeContext.Provider>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/theme/hooks/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+export * from './useTheme';

package/src/theme/hooks/useTheme.ts

@@ -0,0 +1,118 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { useMemo, useEffect, useContext, useCallback } from 'react';
+import { Appearance } from 'react-native';
+import {
+  DarkTheme,
+  LightTheme,
+  type ITheme,
+  type ThemeOverride,
+  type UseThemeReturn,
+  type BaseColors,
+  type CustomTheme,
+} from '../themes';
+import { useThemeStore } from '../store/theme';
+import { ThemeContext } from '../ThemeContext';
+import { cleanColors, mergeColors } from '../utils/cleanColors';
+
+export const useTheme = (
+  themeOverride?: ThemeOverride,
+  isDark?: boolean
+): UseThemeReturn => {
+  const context = useContext(ThemeContext);
+
+  const storeState = useThemeStore(
+    useCallback((state) => (context ? null : state), [context])
+  );
+
+  const isDarkMode =
+    isDark ??
+    (context ? context.isDarkMode : (storeState?.isDarkMode ?? false));
+  const setTheme = useMemo(() => {
+    return context ? context.setTheme : (storeState?.setTheme ?? (() => {}));
+  }, [context, storeState?.setTheme]);
+
+  const themeMode = storeState?.themeMode;
+  const setIsDarkMode = storeState?.setIsDarkMode;
+
+  useEffect(() => {
+    if (context || !setIsDarkMode || themeMode !== 'system') return;
+    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
+      if (colorScheme === 'dark' || colorScheme === 'light') {
+        setIsDarkMode(colorScheme === 'dark');
+      }
+    });
+
+    return () => subscription.remove();
+  }, [context, themeMode, setIsDarkMode]);
+
+  const normalizedOverride = useMemo(() => {
+    if (!themeOverride) return undefined;
+
+    let lightOverride: Partial<BaseColors> | undefined;
+    let darkOverride: Partial<BaseColors> | undefined;
+
+    if ('colors' in themeOverride && themeOverride.colors) {
+      const cleanedColors = cleanColors(themeOverride.colors);
+      if (cleanedColors) {
+        lightOverride = cleanedColors;
+        darkOverride = cleanedColors;
+      }
+    } else {
+      const custom = themeOverride as CustomTheme;
+      if (custom.light) {
+        lightOverride = cleanColors(custom.light);
+      }
+      if (custom.dark) {
+        darkOverride = cleanColors(custom.dark);
+      }
+    }
+
+    if (lightOverride || darkOverride) {
+      return {
+        light: lightOverride,
+        dark: darkOverride,
+      };
+    }
+
+    return undefined;
+  }, [themeOverride]);
+
+  const themeColors = useMemo(() => {
+    const lightBase = context ? context.themeColors.light : LightTheme.colors;
+    const darkBase = context ? context.themeColors.dark : DarkTheme.colors;
+
+    if (!normalizedOverride) {
+      return { light: lightBase, dark: darkBase };
+    }
+
+    return {
+      light: mergeColors(lightBase, normalizedOverride.light),
+      dark: mergeColors(darkBase, normalizedOverride.dark),
+    };
+  }, [context, normalizedOverride]);
+
+  const theme = useMemo<ITheme>(() => {
+    if (context && !normalizedOverride && isDark === undefined) {
+      return context.theme;
+    }
+
+    return {
+      colors: isDarkMode ? themeColors.dark : themeColors.light,
+    } as ITheme;
+  }, [context, normalizedOverride, isDark, isDarkMode, themeColors]);
+
+  return useMemo(
+    () => ({
+      theme,
+      finalTheme: theme,
+      isDarkMode,
+      setTheme,
+      themeColors,
+    }),
+    [theme, isDarkMode, setTheme, themeColors]
+  );
+};

package/src/theme/index.ts

@@ -0,0 +1,8 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+export * from './ThemeProvider';
+export * from './themes';
+export * from './ThemeContext';