@zezosoft/zezo-ott-react-native-ui-kit 1.1.5 → 1.1.7

package/src/hooks/useSplashCache.ts

@@ -1,186 +0,0 @@
-/**
- * @author Naresh
- * @lastModified Fri 17 Oct 2025 at 09:55 PM
- */
-
-import { useEffect, useRef, useState } from 'react';
-import RNFS from 'react-native-fs';
-import CryptoJS from 'crypto-js';
-import { MMKV } from 'react-native-mmkv';
-import NetInfo from '@react-native-community/netinfo';
-import { useSplashStore } from '../store/splashStore';
-
-const mmkvStorage = new MMKV();
-const activeDownloadTasks = new Map<string, Promise<string | null>>();
-const DEFAULT_EXTENSION = 'bin';
-const CACHE_FILE_PREFIX = 'splash_';
-
-const isNetworkOnline = async () => {
-  const state = await NetInfo.fetch();
-  return !!state.isConnected;
-};
-
-const getUrlExtension = (url: string): string => {
-  try {
-    if (!url || typeof url !== 'string') return DEFAULT_EXTENSION;
-    const cleanUrl = url.split('?')[0];
-    const dot = cleanUrl?.lastIndexOf('.') ?? -1;
-    if (dot === -1) return DEFAULT_EXTENSION;
-
-    const ext = cleanUrl?.substring(dot + 1).toLowerCase() ?? DEFAULT_EXTENSION;
-    if (!/^[a-z0-9]+$/i.test(ext)) return DEFAULT_EXTENSION;
-    return ext;
-  } catch {
-    return DEFAULT_EXTENSION;
-  }
-};
-
-const buildCachePath = (url: string, cacheKey: string, extension: string) => {
-  const ext = extension.replace(/^\./, '') || DEFAULT_EXTENSION;
-  const hash = CryptoJS.MD5(`${url}|${cacheKey}|${ext}`).toString();
-  return `${RNFS.CachesDirectoryPath}/${CACHE_FILE_PREFIX}${hash}.${ext}`;
-};
-
-const downloadAndCacheFile = async (
-  url: string,
-  extension: string,
-  cacheKey: string,
-  force: boolean
-): Promise<string | null> => {
-  if (!url?.trim()) return null;
-
-  const localFile = buildCachePath(url, cacheKey, extension);
-
-  if (activeDownloadTasks.has(localFile)) {
-    return activeDownloadTasks.get(localFile)!;
-  }
-
-  const task = (async () => {
-    let oldFile: string | null = null;
-
-    try {
-      const savedPath = mmkvStorage.getString(cacheKey);
-      oldFile = savedPath && savedPath !== localFile ? savedPath : null;
-
-      if (!force && savedPath === localFile) {
-        const exists = await RNFS.exists(localFile);
-        if (exists) return localFile;
-      }
-
-      if (!(await isNetworkOnline())) {
-        return oldFile && (await RNFS.exists(oldFile)) ? oldFile : null;
-      }
-
-      const result = await RNFS.downloadFile({
-        fromUrl: url,
-        toFile: localFile,
-        cacheable: true,
-        readTimeout: 15000,
-        connectionTimeout: 10000,
-      }).promise.catch(() => null);
-
-      if (!result || result.statusCode !== 200) {
-        const code = result?.statusCode ?? 'unknown';
-        throw new Error(`RNFS download failed (status: ${code})`);
-      }
-
-      mmkvStorage.set(cacheKey, localFile);
-
-      if (oldFile && (await RNFS.exists(oldFile))) {
-        await RNFS.unlink(oldFile).catch(() => {});
-      }
-
-      return localFile;
-    } catch (err) {
-      console.warn('[SplashCache] download failed:', url, err);
-    }
-
-    if (oldFile && (await RNFS.exists(oldFile))) {
-      return oldFile;
-    }
-
-    return null;
-  })().finally(() => {
-    activeDownloadTasks.delete(localFile);
-  });
-
-  activeDownloadTasks.set(localFile, task);
-  return task;
-};
-
-type SplashCacheOptions = {
-  logoUrl?: string;
-  backgroundUrl?: string;
-  forceDownload?: boolean;
-};
-
-export const useSplashCache = ({
-  logoUrl,
-  backgroundUrl,
-  forceDownload = false,
-}: SplashCacheOptions) => {
-  const [loadState, setLoadState] = useState({
-    isReady: false,
-    error: null as Error | null,
-  });
-  const setLogoPath = useSplashStore((s) => s.setLogoPath);
-  const setBackdropPath = useSplashStore((s) => s.setBackdropPath);
-  const isMountedRef = useRef(true);
-
-  useEffect(() => {
-    isMountedRef.current = true;
-
-    const syncAssets = async () => {
-      try {
-        const [logoLocalPath, backdropLocalPath] = await Promise.all([
-          logoUrl
-            ? downloadAndCacheFile(
-                logoUrl,
-                getUrlExtension(logoUrl),
-                'splash_logo',
-                forceDownload
-              )
-            : Promise.resolve(null),
-          backgroundUrl
-            ? downloadAndCacheFile(
-                backgroundUrl,
-                getUrlExtension(backgroundUrl),
-                'splash_background',
-                forceDownload
-              )
-            : Promise.resolve(null),
-        ]);
-
-        if (!isMountedRef.current) return;
-
-        if (logoLocalPath) setLogoPath?.(logoLocalPath);
-        if (backdropLocalPath) setBackdropPath?.(backdropLocalPath);
-
-        setLoadState({ isReady: true, error: null });
-      } catch (err) {
-        if (!isMountedRef.current) return;
-        const error =
-          err instanceof Error ? err : new Error('Splash cache failed');
-        setLoadState({ isReady: true, error });
-      }
-    };
-
-    syncAssets();
-
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, [logoUrl, backgroundUrl, forceDownload, setLogoPath, setBackdropPath]);
-
-  const logoLocalPath = useSplashStore((s) => s.logo.localPath);
-  const backdropLocalPath = useSplashStore((s) => s.backdrop.localPath);
-
-  return {
-    state: loadState,
-    isLoading: !loadState.isReady,
-    data: {
-      logoPath: logoLocalPath,
-      backgroundPath: backdropLocalPath,
-    },
-  };
-};

package/src/hooks/useThemeColors.ts

@@ -1,51 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Optimized for performance
- */
-
-import { useMemo } from 'react';
-import type { ITheme } from '../theme/themes';
-
-/**
- * Hook to extract and memoize theme colors
- * Reduces repeated color extraction patterns
- */
-export function useThemeColors(theme: ITheme) {
-  const colors = theme.colors;
-  return useMemo(
-    () => ({
-      textPrimary: colors.textPrimary,
-      textSecondary: colors.textSecondary,
-      background: colors.background,
-      surface: colors.surface,
-      surfaceVariant: colors.surfaceVariant,
-      primary: colors.primary,
-      error: colors.error,
-      errorContainer: colors.errorContainer,
-      skeletonBaseColor: colors.skeletonBaseColor,
-      skeletonHighlightColor: colors.skeletonHighlightColor,
-      border: colors.border,
-      onBackground: colors.onBackground,
-      onPrimary: colors.onPrimary,
-      onSurface: colors.onSurface,
-      outline: colors.outline,
-    }),
-    [
-      colors.textPrimary,
-      colors.textSecondary,
-      colors.background,
-      colors.surface,
-      colors.surfaceVariant,
-      colors.primary,
-      colors.error,
-      colors.errorContainer,
-      colors.skeletonBaseColor,
-      colors.skeletonHighlightColor,
-      colors.border,
-      colors.onBackground,
-      colors.onPrimary,
-      colors.onSurface,
-      colors.outline,
-    ]
-  );
-}

package/src/index.tsx

@@ -1,8 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Sun 08 Jun 2025 at 03:23 PM
- */
-export * from './components';
-export * from './theme';
-export type * from './types';
-export { default as SizeMatters } from './utils/SizeMatters';

package/src/store/RecentSearchesStore.ts

@@ -1,78 +0,0 @@
-/**
- * @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 });
-          }, 50);
-        } else {
-          useRecentSearchesStore.setState({ isLoading: false });
-        }
-      },
-    }
-  )
-);

package/src/store/splashStore.ts

@@ -1,91 +0,0 @@
-/**
- * @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';
-
-const mmkv = new MMKV();
-
-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,
-        setItem: (name, value) => mmkv.set(name, value),
-        removeItem: (name) => mmkv.delete(name),
-      })),
-      partialize: (state) => ({
-        logo: {
-          localPath: state.logo.localPath,
-          lastUpdated: state.logo.lastUpdated,
-        },
-        backdrop: {
-          localPath: state.backdrop.localPath,
-          lastUpdated: state.backdrop.lastUpdated,
-        },
-      }),
-    }
-  )
-);

package/src/store/themeStore.ts

@@ -1,43 +0,0 @@
-/**
- * @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';
-
-const storage = new MMKV();
-
-interface ThemeState {
-  isDarkMode: boolean;
-  themeMode: 'dark' | 'light' | 'system';
-  setIsDarkMode: (value: boolean) => void;
-  setTheme: (mode: 'dark' | 'light' | 'system') => void;
-}
-
-export const useInternalThemeStore = create(
-  persist<ThemeState>(
-    (set, _get) => ({
-      isDarkMode: false,
-      themeMode: 'system',
-
-      setIsDarkMode: (value: boolean) => {
-        const mode = value ? 'dark' : 'light';
-        set({ isDarkMode: value, themeMode: mode });
-      },
-
-      setTheme: (mode: 'dark' | 'light' | 'system') => {
-        set({ themeMode: mode, isDarkMode: mode === 'dark' });
-      },
-    }),
-    {
-      name: 'theme-storage',
-      storage: createJSONStorage(() => ({
-        getItem: (key: string) => storage.getString(key) ?? null,
-        setItem: (key: string, value: string) => storage.set(key, value),
-        removeItem: (key: string) => storage.delete(key),
-      })),
-    }
-  )
-);

package/src/theme/ThemeProvider.tsx

@@ -1,112 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 22 Oct 2025 at 11:29 AM
- */
-
-import React, {
-  createContext,
-  useContext,
-  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 { useInternalTheme } from './hook/useInternalTheme';
-import { type ITheme, type ThemeOverride } from './themes';
-import SystemNavigationBar from 'react-native-system-navigation-bar';
-import Color from 'color';
-type ThemeContextType = {
-  theme: {
-    dark: ITheme['colors'];
-    light: ITheme['colors'];
-  };
-  isDarkMode: boolean;
-  setTheme: (mode: 'light' | 'dark' | 'system') => void;
-  finalTheme: ITheme;
-};
-
-const ThemeContext = createContext<ThemeContextType | null>(null);
-
-/**
- * Custom hook to access ZezoUI theme context.
- */
-export const useTheme = (): ThemeContextType => {
-  const ctx = useContext(ThemeContext);
-  if (!ctx) {
-    throw new Error('useTheme must be used within ZezoUIProvider');
-  }
-  return ctx;
-};
-
-type ZezoUIProviderProps = {
-  children: ReactNode;
-  theme?: ThemeOverride;
-  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,
-    themeFull,
-  } = useInternalTheme(overrideTheme, isDark);
-
-  // Memoize context value to prevent unnecessary re-renders
-  const contextValue = useMemo(
-    () => ({
-      theme: themeFull,
-      isDarkMode,
-      setTheme,
-      finalTheme,
-    }),
-    [themeFull, 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 = Color(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/hook/index.ts

@@ -1 +0,0 @@
-export * from './useInternalTheme';

package/src/theme/hook/useInternalTheme.ts

@@ -1,98 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Fri 24 Oct 2025 at 10:45 AM
- */
-
-import { useMemo, useEffect } from 'react';
-import {
-  DarkTheme,
-  LightTheme,
-  type ITheme,
-  type ThemeOverride,
-  type useInternalThemeReturn,
-} from '../themes';
-import { filterValidOverrideColors } from '../utils/validateColor';
-import { useInternalThemeStore } from '../../store/themeStore';
-
-import { Appearance } from 'react-native';
-
-export const useInternalTheme = (
-  override?: ThemeOverride,
-  isDark?: boolean
-): useInternalThemeReturn => {
-  const {
-    isDarkMode: storeDarkMode,
-    setTheme,
-    themeMode,
-    setIsDarkMode,
-  } = useInternalThemeStore();
-
-  const isDarkMode = isDark ?? storeDarkMode;
-
-  useEffect(() => {
-    if (isDark !== undefined) {
-      setTheme(isDark ? 'dark' : 'light');
-    }
-  }, [isDark, setTheme]);
-
-  useEffect(() => {
-    if (themeMode !== 'system') return;
-    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
-      if (colorScheme === 'dark' || colorScheme === 'light') {
-        setIsDarkMode(colorScheme === 'dark');
-      }
-    });
-
-    return () => subscription.remove();
-  }, [themeMode, setIsDarkMode]);
-
-  // Memoize base theme selection
-  const baseTheme = useMemo(
-    () => (isDarkMode ? DarkTheme : LightTheme),
-    [isDarkMode]
-  );
-
-  // Memoize override colors — only valid, non-empty colors; empty/invalid skipped
-  const overrideColors = useMemo(() => {
-    const raw = isDarkMode ? (override?.dark ?? {}) : (override?.light ?? {});
-    return filterValidOverrideColors(raw) as Partial<ITheme['colors']>;
-  }, [override?.dark, override?.light, isDarkMode]);
-
-  // Memoize final theme with proper dependencies
-  const finalTheme = useMemo<ITheme>(
-    () => ({
-      ...baseTheme,
-      colors: {
-        ...baseTheme.colors,
-        ...overrideColors,
-      },
-    }),
-    [baseTheme, overrideColors]
-  );
-
-  // Memoize themeFull — only valid overrides merged with base; empty/invalid skipped
-  const themeFull = useMemo(() => {
-    const validLight = filterValidOverrideColors(override?.light);
-    const validDark = filterValidOverrideColors(override?.dark);
-    return {
-      light: {
-        ...LightTheme.colors,
-        ...(validLight as Partial<ITheme['colors']>),
-      } as ITheme['colors'],
-      dark: {
-        ...DarkTheme.colors,
-        ...(validDark as Partial<ITheme['colors']>),
-      } as ITheme['colors'],
-    };
-  }, [override?.light, override?.dark]);
-
-  return useMemo(
-    () => ({
-      theme: finalTheme,
-      isDarkMode,
-      setTheme,
-      themeFull,
-    }),
-    [finalTheme, isDarkMode, setTheme, themeFull]
-  );
-};

package/src/theme/index.ts

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