@zezosoft/zezo-ott-react-native-ui-kit 1.1.3 → 1.1.6

package/src/hooks/useSplashCache.ts

@@ -1,167 +0,0 @@
-/**
- * @author Naresh
- * @lastModified Fri 17 Oct 2025 at 09:55 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 storage = new MMKV();
-const activeDownloads = new Map<string, Promise<string | null>>();
-
-const SUPPORTED_EXTENSIONS = [
-  'json',
-  'mp4',
-  'jpg',
-  'jpeg',
-  'png',
-  'webp',
-] as const;
-
-const getFileExtension = (url: string): string => {
-  try {
-    const cleanUrl = url.split('?')[0];
-    const ext = cleanUrl
-      ?.substring(cleanUrl?.lastIndexOf('.') + 1)
-      .toLowerCase();
-    return SUPPORTED_EXTENSIONS.includes(ext as any) ? (ext as string) : 'png';
-  } catch {
-    return 'png';
-  }
-};
-
-const downloadAndCacheAsset = async (
-  url: string,
-  extension: string,
-  cacheKey: string,
-  force: boolean
-): Promise<string | null> => {
-  if (!url?.trim()) return null;
-
-  const ext = extension.replace(/^\./, '') || 'png';
-  const hash = CryptoJS.MD5(`${url}|${cacheKey}|${ext}`).toString();
-  const localFile = `${RNFS.CachesDirectoryPath}/splash_${hash}.${ext}`;
-
-  if (activeDownloads.has(hash)) {
-    return activeDownloads.get(hash)!;
-  }
-
-  const task = (async () => {
-    try {
-      const savedHash = storage.getString(cacheKey);
-
-      if (savedHash && savedHash !== hash) {
-        const oldFile = `${RNFS.CachesDirectoryPath}/splash_${savedHash}.${ext}`;
-        if (await RNFS.exists(oldFile)) {
-          await RNFS.unlink(oldFile).catch(() => {});
-        }
-      }
-
-      if (!force) {
-        const exists = await RNFS.exists(localFile);
-        if (exists && savedHash === hash) {
-          return localFile;
-        }
-      }
-
-      const { statusCode } = await RNFS.downloadFile({
-        fromUrl: url,
-        toFile: localFile,
-        cacheable: true,
-        readTimeout: 15000,
-        connectionTimeout: 10000,
-      }).promise;
-
-      if (statusCode === 200) {
-        storage.set(cacheKey, hash);
-        return localFile;
-      }
-    } catch {
-      return null;
-    }
-
-    return null;
-  })();
-
-  activeDownloads.set(hash, task);
-  return task;
-};
-
-type SplashCacheOptions = {
-  logoUrl?: string;
-  backgroundUrl?: string;
-  forceDownload?: boolean;
-};
-
-export const useSplashCache = ({
-  logoUrl,
-  backgroundUrl,
-  forceDownload = false,
-}: SplashCacheOptions) => {
-  const [state, setState] = useState({
-    isReady: false,
-    error: null as Error | null,
-  });
-
-  const setLogo = useSplashStore((s) => s.setLogoPath);
-  const setBackground = useSplashStore((s) => s.setBackdropPath);
-
-  useEffect(() => {
-    let mounted = true;
-
-    const syncAssets = async () => {
-      try {
-        const [logoPath, bgPath] = await Promise.all([
-          logoUrl
-            ? downloadAndCacheAsset(
-                logoUrl,
-                getFileExtension(logoUrl),
-                'splash_logo',
-                forceDownload
-              )
-            : Promise.resolve(null),
-          backgroundUrl
-            ? downloadAndCacheAsset(
-                backgroundUrl,
-                getFileExtension(backgroundUrl),
-                'splash_background',
-                forceDownload
-              )
-            : Promise.resolve(null),
-        ]);
-
-        if (!mounted) return;
-
-        if (logoPath) setLogo?.(logoPath);
-        if (bgPath) setBackground?.(bgPath);
-
-        setState({ isReady: true, error: null });
-      } catch (err) {
-        if (mounted) {
-          setState({ isReady: true, error: err as Error });
-        }
-      }
-    };
-
-    syncAssets();
-    return () => {
-      mounted = false;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [logoUrl, backgroundUrl, forceDownload]);
-
-  const logoPath = useSplashStore((s) => s.logo.localPath);
-  const bgPath = useSplashStore((s) => s.backdrop.localPath);
-
-  return {
-    state,
-    isLoading: !state.isReady && !state.error,
-    data: {
-      logoPath,
-      backgroundPath: bgPath,
-    },
-  };
-};

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,99 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 22 Oct 2025 at 11:29 AM
- */
-
-import React, {
-  createContext,
-  useContext,
-  useMemo,
-  type ReactNode,
-} from 'react';
-import { 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';
-
-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]
-  );
-
-  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,2 +0,0 @@
-export * from './useInternalTheme';
-export * from './useThemeStatusBar';

package/src/theme/hook/useInternalTheme.ts

@@ -1,89 +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 { 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
-  const overrideColors = useMemo(
-    () => (isDarkMode ? (override?.dark ?? {}) : (override?.light ?? {})),
-    [override?.dark, override?.light, isDarkMode]
-  );
-
-  // Memoize final theme with proper dependencies
-  const finalTheme = useMemo<ITheme>(
-    () => ({
-      ...baseTheme,
-      colors: {
-        ...baseTheme.colors,
-        ...overrideColors,
-      },
-    }),
-    [baseTheme, overrideColors]
-  );
-
-  // Memoize themeFull with proper dependencies
-  const themeFull = useMemo(
-    () => ({
-      light: (override?.light as ITheme['colors']) ?? LightTheme.colors,
-      dark: (override?.dark as ITheme['colors']) ?? DarkTheme.colors,
-    }),
-    [override?.light, override?.dark]
-  );
-
-  return useMemo(
-    () => ({
-      theme: finalTheme,
-      isDarkMode,
-      setTheme,
-      themeFull,
-    }),
-    [finalTheme, isDarkMode, setTheme, themeFull]
-  );
-};

package/src/theme/hook/useThemeStatusBar.ts

@@ -1,42 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 22 Oct 2025 at 10:29 AM
- */
-/**
- * Automatically syncs StatusBar color & style with current theme.
- */
-import { useEffect, useMemo } from 'react';
-import { StatusBar, Platform, type StatusBarStyle } from 'react-native';
-import Color from 'color';
-import type { ITheme } from '../themes';
-
-interface UseThemeStatusBarOptions {
-  theme: ITheme;
-  backgroundColor?: string;
-  barStyle?: StatusBarStyle;
-}
-
-export const useThemeStatusBar = ({
-  theme,
-  backgroundColor,
-  barStyle,
-}: UseThemeStatusBarOptions) => {
-  // Memoize background color
-  const bgColor = useMemo(
-    () => backgroundColor ?? theme.colors.background,
-    [backgroundColor, theme.colors.background]
-  );
-
-  // Memoize content style calculation
-  const contentStyle = useMemo<StatusBarStyle>(() => {
-    if (barStyle) return barStyle;
-    return Color(bgColor).isDark() ? 'light-content' : 'dark-content';
-  }, [barStyle, bgColor]);
-
-  useEffect(() => {
-    StatusBar.setBarStyle(contentStyle, true);
-    if (Platform.OS === 'android') {
-      StatusBar.setBackgroundColor(bgColor, true);
-    }
-  }, [bgColor, contentStyle]);
-};

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';