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

package/src/components/View/View.tsx

@@ -0,0 +1,19 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 07 Jul 2025 at 11:49 AM
+ */
+import React from 'react';
+import { View as RNView, type ViewProps as RNViewProps, type ViewStyle } from 'react-native';
+
+export type ViewProps = RNViewProps & {
+  style?: ViewStyle;
+  backgroundColor?: string;
+};
+
+export const View: React.FC<ViewProps> = ({ style, backgroundColor = 'transparent', children, ...rest }) => {
+  return (
+    <RNView style={[style, { backgroundColor }]} {...rest}>
+      {children}
+    </RNView>
+  );
+};

package/src/components/View/index.ts

@@ -0,0 +1,5 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 07 Jul 2025 at 11:50 AM
+ */
+export { View } from './View';

package/src/components/index.ts

@@ -3,8 +3,22 @@
  * @lastModified Sun 08 Jun 2025 at 03:23 PM
  */
 
-export * from './Button/Button';
+export * from './Button/PrimaryBtn';
 export * from './Loader/Loader';
 export * from './Headers';
-export * from './Section/Sections';
+export * from './Content/Content';
 export * from './Logo/Logo';
+export * from './SplashScreen';
+export * from './Auth';
+export * from './layout';
+export * from './Settings';
+export * from './Account';
+export * from './TabBar';
+export * from './Input/Input';
+export * from './Text';
+export * from './View';
+export * from './User';
+export * from './BlogView';
+export * from './ContentView';
+export * from './Search';
+export * from './Subscription';

package/src/components/layout/SafeAreaWrapper.tsx

@@ -0,0 +1,32 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 25 Jun 2025 at 02:34 PM
+ */
+
+import React from 'react';
+import { StyleSheet, type ViewStyle } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useTheme } from '../../theme';
+import type { AppTheme } from '../../theme/themes';
+
+type SafeAreaWrapperProps = {
+  children: React.ReactNode;
+  style?: ViewStyle;
+  theme?: AppTheme;
+};
+
+export const SafeAreaWrapper: React.FC<SafeAreaWrapperProps> = ({ children, style, theme }) => {
+  const { theme: appliedTheme } = useTheme(theme);
+
+  return (
+    <SafeAreaView style={[styles.container, { backgroundColor: appliedTheme.colors.background }, style]}>
+      {children}
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});

package/src/components/layout/index.ts

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

package/src/constants/dummySections.ts

@@ -0,0 +1,45 @@
+import type { IGetSectionData } from '../types';
+
+const generateDummySection = (type: IGetSectionData['type']): IGetSectionData => {
+  return {
+    _id: `dummy-${type}`,
+    name: `Loading ${type.charAt(0).toUpperCase() + type.slice(1)}`,
+    type,
+    content_ids: Array(5).fill(''),
+    category: {
+      _id: 'dummy-cat-id',
+      name: 'Dummy',
+      slug: 'dummy'
+    },
+    content: {
+      data: Array(5).fill({ id: '', order: 0 }),
+      meta: {
+        pagination: {
+          total: 5,
+          limit: 5,
+          page: 1,
+          hasNextPage: true,
+          length: 5,
+          nextPage: 2
+        }
+      }
+    },
+    label: '',
+    order: 0,
+    status: false,
+    createdAt: new Date(),
+    updatedAt: new Date()
+  };
+};
+
+export const dummySections: IGetSectionData[] = [
+  generateDummySection('slider'),
+  generateDummySection('normal'),
+  generateDummySection('continue_watching'),
+  generateDummySection('card_style_2'),
+  generateDummySection('card_style_3'),
+  generateDummySection('card_style_4'),
+  generateDummySection('card_style_5'),
+  generateDummySection('card_style_6'),
+  generateDummySection('top_10')
+];

package/src/hooks/useDebounce.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const useDebounce = (callback: (value: string) => void, delay: number) => {
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
+
+  return React.useCallback(
+    (value: string) => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => callback(value), delay);
+    },
+    [callback, delay]
+  );
+};

package/src/hooks/useInitSplashCacheSync.ts

@@ -0,0 +1,159 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Thu 12 Jun 2025 at 07:57 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 mmkv = new MMKV(); // Initialize MMKV instance
+const downloadPromises = new Map<string, Promise<string | null>>();
+
+const getSplashLocalPath = async (
+  url: string,
+  extension: string,
+  LAST_HASH_KEY: string,
+  forceDownload: boolean
+): Promise<string | null> => {
+  if (!url?.trim()) return null;
+
+  const sanitizedExtension = extension.replace(/^\./, '').trim() || 'mp4';
+  const currentHash = CryptoJS.MD5(`${url}|${LAST_HASH_KEY}|${sanitizedExtension}`).toString();
+  const filePath = `${RNFS.CachesDirectoryPath}/splash_${currentHash}.${sanitizedExtension}`;
+
+  if (downloadPromises.has(currentHash)) {
+    return downloadPromises.get(currentHash)!;
+  }
+
+  const downloadOperation = (async () => {
+    const lastUsedHash = mmkv.getString(LAST_HASH_KEY); // Updated to use MMKV getString
+
+    if (lastUsedHash && lastUsedHash !== currentHash) {
+      const oldFilePath = `${RNFS.CachesDirectoryPath}/splash_${lastUsedHash}.${sanitizedExtension}`;
+      const existsOld = await RNFS.exists(oldFilePath);
+      if (existsOld) await RNFS.unlink(oldFilePath).catch(() => {});
+    }
+
+    if (!forceDownload) {
+      const exists = await RNFS.exists(filePath);
+      if (exists && lastUsedHash === currentHash) {
+        return filePath;
+      }
+    }
+
+    const result = await RNFS.downloadFile({
+      fromUrl: url,
+      toFile: filePath,
+      cacheable: true,
+      readTimeout: 15000,
+      connectionTimeout: 10000
+    }).promise;
+
+    if (result.statusCode === 200) {
+      mmkv.set(LAST_HASH_KEY, currentHash); // Updated to use MMKV set
+      return filePath;
+    }
+
+    return null;
+  })();
+
+  downloadPromises.set(currentHash, downloadOperation);
+  return downloadOperation;
+};
+
+type UseSplashCacheSyncOptions = {
+  logoUrl?: string;
+  backgroundUrl?: string;
+  forceDownload?: boolean;
+};
+
+// Helper to extract extension from URL
+const SUPPORTED_EXTENSIONS = ['json', 'mp4', 'jpg', 'jpeg', 'png', 'webp'] as const;
+
+const extractExtensionFromUrl = (url: string): string => {
+  try {
+    const cleanUrl = url.split('?')[0];
+    const ext =
+      cleanUrl
+        ?.substring(cleanUrl.lastIndexOf('.') + 1)
+        .trim()
+        .toLowerCase() || '';
+
+    return SUPPORTED_EXTENSIONS.includes(ext as any) ? ext : 'png';
+  } catch {
+    return 'png';
+  }
+};
+
+export const useInitSplashCacheSync = ({
+  logoUrl,
+  backgroundUrl,
+  forceDownload = false
+}: UseSplashCacheSyncOptions): {
+  state: { isReady: boolean; error: Error | null };
+  isLoading: boolean;
+  data: {
+    localPathLogo: string | null;
+    localPathBackground: string | null;
+  };
+} => {
+  const [state, setState] = useState({
+    isReady: false,
+    error: null as Error | null
+  });
+
+  const setLocalPathLogo = useSplashStore((s) => s.setLogoPath);
+  const setLocalPathBackground = useSplashStore((s) => s.setBackdropPath);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const syncCache = async () => {
+      try {
+        const [logoPath, bgPath] = await Promise.all([
+          logoUrl
+            ? getSplashLocalPath(logoUrl, extractExtensionFromUrl(logoUrl), 'logo', forceDownload)
+            : Promise.resolve(null),
+          backgroundUrl
+            ? getSplashLocalPath(
+                backgroundUrl,
+                extractExtensionFromUrl(backgroundUrl),
+                'backgroundImage',
+                forceDownload
+              )
+            : Promise.resolve(null)
+        ]);
+
+        if (!isMounted) return;
+
+        if (logoPath) setLocalPathLogo?.(`file://${logoPath}`);
+        if (bgPath) setLocalPathBackground?.(`file://${bgPath}`);
+
+        setState({ isReady: true, error: null });
+      } catch (err) {
+        if (isMounted) {
+          setState({ isReady: true, error: err as Error });
+        }
+      }
+    };
+
+    syncCache();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [logoUrl, backgroundUrl, forceDownload, setLocalPathLogo, setLocalPathBackground]);
+  const localPathLogo = useSplashStore((s) => s.logo.localPath);
+  const localPathBackground = useSplashStore((s) => s.backdrop.localPath);
+  return {
+    state,
+    isLoading: !state.isReady && !state.error,
+    data: {
+      localPathLogo,
+      localPathBackground
+    }
+  };
+};

package/src/hooks/useKeyboard.ts

@@ -0,0 +1,33 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sat 14 Jun 2025 at 03:01 PM
+ */
+
+// use keyboard hook check keyboard open or not
+import { useEffect, useState } from 'react';
+import { Keyboard } from 'react-native';
+
+export const useKeyboard = () => {
+  const [isKeyboardOpen, setKeyboardOpen] = useState(false);
+
+  // hide keyboard when keyboard open
+
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
+      setKeyboardOpen(true);
+    });
+    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardOpen(false);
+    });
+
+    return () => {
+      keyboardDidHideListener.remove();
+      keyboardDidShowListener.remove();
+    };
+  }, []);
+
+  return {
+    isKeyboardOpen,
+    hideKeyboard: () => Keyboard.dismiss()
+  };
+};

package/src/hooks/usePaginatedSection.ts

@@ -0,0 +1,74 @@
+/**
+ * @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);
+
+  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;
+        }
+
+        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: res.meta.pagination.hasNextPage,
+          nextPage: res.meta.pagination.nextPage
+        });
+      } catch (err) {
+        console.error(`❌ Error loading section [${sectionId}]:`, err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [loading, pagination, fetchFn, sectionId]
+  );
+
+  return {
+    data,
+    pagination,
+    loading,
+    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,103 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sat 14 Jun 2025 at 11:11 AM
+ */
+import React, { createContext, useContext, useMemo, useState, useCallback, useEffect, type ReactNode } from 'react';
+import { View, useColorScheme, StatusBar } from 'react-native';
+import { LightTheme, DarkTheme, type ITheme, type AppTheme } from './themes';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+type ThemeContextType = {
+  theme: ITheme;
+  isDarkMode: boolean;
+  toggleTheme: () => void;
+};
+
+const ThemeContext = createContext<ThemeContextType | null>(null);
+ThemeContext.displayName = 'AppThemeContext';
+
+type ZezoUIProviderProps = {
+  children: ReactNode;
+  theme?: Partial<AppTheme> & { dark?: boolean };
+  autoSwitchTheme?: boolean;
+};
+
+// ✅ Cleanly handles auto switch and manual dark mode
+const getIsDarkMode = (
+  autoSwitchTheme: boolean,
+  systemScheme: 'dark' | 'light' | null,
+  userDark?: boolean
+): boolean => {
+  if (autoSwitchTheme) {
+    return systemScheme === 'dark';
+  }
+  return userDark === true;
+};
+
+export const ZezoUIProvider: React.FC<ZezoUIProviderProps> = ({ children, theme, autoSwitchTheme = false }) => {
+  const systemScheme = useColorScheme() ?? null;
+
+  const [isDarkMode, setIsDarkMode] = useState<boolean>(() =>
+    getIsDarkMode(autoSwitchTheme, systemScheme, theme?.dark)
+  );
+
+  useEffect(() => {
+    setIsDarkMode(getIsDarkMode(autoSwitchTheme, systemScheme, theme?.dark));
+  }, [autoSwitchTheme, systemScheme, theme?.dark]);
+
+  const baseTheme = useMemo<ITheme>(() => (isDarkMode ? DarkTheme : LightTheme), [isDarkMode]);
+
+  const mergedTheme = useMemo<ITheme>(() => {
+    return {
+      ...baseTheme,
+      ...theme,
+      colors: {
+        ...baseTheme.colors,
+        ...(theme?.colors || {})
+      }
+    };
+  }, [baseTheme, theme]);
+
+  const toggleTheme = useCallback(() => {
+    if (autoSwitchTheme) return; // skip toggle in auto mode
+    setIsDarkMode((prev) => !prev);
+  }, [autoSwitchTheme]);
+
+  return (
+    <SafeAreaProvider>
+      <ThemeContext.Provider
+        value={{
+          theme: mergedTheme,
+          isDarkMode,
+          toggleTheme
+        }}
+      >
+        <StatusBar
+          barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+          backgroundColor={mergedTheme.colors.background}
+        />
+        <View style={{ flex: 1, backgroundColor: mergedTheme.colors.background }}>{children}</View>
+      </ThemeContext.Provider>
+    </SafeAreaProvider>
+  );
+};
+
+// ✅ useTheme hook with optional override support
+export const useTheme = (overrideTheme?: Partial<AppTheme>): { theme: ITheme } => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ZezoUIProvider');
+  }
+
+  const finalTheme = useMemo<ITheme>(() => {
+    return {
+      ...context.theme,
+      ...overrideTheme,
+      colors: {
+        ...context.theme.colors,
+        ...(overrideTheme?.colors || {})
+      }
+    };
+  }, [context.theme, overrideTheme]);
+
+  return { theme: finalTheme };
+};