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

package/src/hooks/useSplashCache.ts

@@ -1,245 +0,0 @@
-/**
- * @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

@@ -1,9 +0,0 @@
-/**
- * @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

@@ -1,72 +0,0 @@
-/**
- * @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

@@ -1,86 +0,0 @@
-/**
- * @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

@@ -1,29 +0,0 @@
-/**
- * @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

@@ -1,19 +0,0 @@
-/**
- * @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

@@ -1,87 +0,0 @@
-/**
- * @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

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

package/src/theme/hooks/useTheme.ts

@@ -1,118 +0,0 @@
-/**
- * @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

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