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

package/src/components/User/WatchLater/WatchLater.tsx

@@ -0,0 +1,293 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 24 Jun 2025 at 10:15 PM
+ **/
+
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  FlatList,
+  type TextStyle,
+  type StyleProp,
+  type ViewStyle,
+  type ListRenderItem
+} from 'react-native';
+import { FlatGrid } from 'react-native-super-grid';
+import { scale } from 'react-native-size-matters';
+import { Search } from 'lucide-react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+
+import { useTheme } from '../../../theme/hook/useTheme';
+
+import AppHeader from '../../Headers/AppHeader';
+import { Text } from '../../Text';
+import { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
+import CardPoster from '../../Content/Card/components/CardPoster';
+import type { IContentData } from '../../../types';
+import type { AppTheme, ITheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+type IWatchLaterItem = {
+  _id: string;
+  user_id?: string;
+  content: IContentData;
+  updatedAt?: string;
+};
+
+export type WatchLaterProps = {
+  data: IWatchLaterItem[];
+  isLoading?: boolean;
+  title?: string;
+  headerComponent?: React.ReactNode;
+  onBackPress?: () => void;
+  onSearchPress?: () => void;
+  showSearchIcon?: boolean;
+  itemDimension?: number;
+  spacing?: number;
+  titleStyle?: StyleProp<TextStyle>;
+  listStyle?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  theme?: AppTheme;
+  viewMode?: 'poster' | 'detailed';
+  renderItem?: (item: IWatchLaterItem, index: number) => React.ReactElement | null;
+  skeletonCount?: number;
+  skeletonComponent?: React.ReactElement;
+  noDataComponent?: React.ReactNode;
+  noDataText?: string;
+  onPressItem?: (item: IWatchLaterItem) => void;
+  onEndReached?: () => void;
+  onEndReachedThreshold?: number;
+};
+
+const DefaultSkeleton: React.FC<{ theme: ITheme; viewMode: 'poster' | 'detailed' }> = ({ theme, viewMode }) => {
+  if (viewMode === 'detailed') {
+    return (
+      <SkeletonPlaceholder
+        borderRadius={6}
+        highlightColor={theme.colors.skeletonHighlightColor}
+        backgroundColor={theme.colors.skeletonBaseColor}
+      >
+        <View style={styles.detailedItem}>
+          <View style={styles.thumbnailWrapper} />
+          <View style={[styles.detailedInfo, { justifyContent: 'center' }]}>
+            <View style={{ width: '60%', height: scale(12), marginBottom: scale(6) }} />
+            <View style={{ width: '90%', height: scale(10), marginBottom: scale(4) }} />
+            <View style={{ width: '70%', height: scale(10), marginBottom: scale(4) }} />
+            <View style={{ width: '40%', height: scale(10), marginBottom: scale(4) }} />
+            <View style={{ width: '30%', height: scale(10) }} />
+          </View>
+        </View>
+      </SkeletonPlaceholder>
+    );
+  }
+
+  return (
+    <SkeletonPlaceholder
+      borderRadius={6}
+      highlightColor={theme.colors.skeletonHighlightColor}
+      backgroundColor={theme.colors.skeletonBaseColor}
+    >
+      <View style={{ height: scale(140), borderRadius: scale(6), margin: scale(1) }} />
+    </SkeletonPlaceholder>
+  );
+};
+
+export const WatchLater: React.FC<WatchLaterProps> = ({
+  data = [],
+  isLoading = false,
+  title = 'Watch Later',
+  headerComponent,
+  onBackPress,
+  onSearchPress = () => {},
+  showSearchIcon = true,
+  itemDimension = 90,
+  spacing = 10,
+  listStyle,
+  titleStyle,
+  contentContainerStyle,
+  theme,
+  renderItem,
+  skeletonCount = 9,
+  skeletonComponent,
+  noDataComponent,
+  noDataText = 'No Watch Later Found',
+  onPressItem,
+  onEndReached,
+  onEndReachedThreshold,
+  viewMode = 'poster'
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+
+  const listData = isLoading
+    ? (Array.from({ length: skeletonCount }, (_, i) => ({
+        _id: `skeleton-${i}`,
+        content: {
+          name: '',
+          description: '',
+          poster: '',
+          thumbnail: ''
+        }
+      })) as any)
+    : data;
+
+  const renderGridItem: ListRenderItem<IWatchLaterItem> = ({ item, index }) => {
+    if (isLoading) {
+      return skeletonComponent ?? <DefaultSkeleton theme={appliedTheme} viewMode={viewMode} />;
+    }
+
+    if (renderItem) return renderItem(item, index);
+
+    if (viewMode === 'detailed') {
+      return (
+        <TouchableOpacity
+          key={item._id}
+          onPress={() => onPressItem?.(item)}
+          activeOpacity={0.8}
+          style={styles.detailedItem}
+        >
+          <View style={styles.thumbnailWrapper}>
+            <ThumbnailCard
+              theme={appliedTheme}
+              isLoading={false}
+              thumbnailUri={item?.content?.thumbnail}
+              wrapperStyle={styles.thumbnailImage}
+            />
+          </View>
+          <View style={styles.detailedInfo}>
+            <Text numberOfLines={1} style={styles.detailedTitle}>
+              {item?.content?.name}
+            </Text>
+            <Text numberOfLines={5} style={[styles.detailedDesc, { color: appliedTheme.colors.textSecondary }]}>
+              {item?.content?.description}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      );
+    }
+
+    return (
+      <TouchableOpacity key={item._id || index} onPress={() => onPressItem?.(item)} activeOpacity={0.8}>
+        <CardPoster theme={appliedTheme} isLoading={isLoading} posterUri={item?.content?.poster} />
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      {React.isValidElement(headerComponent) ? (
+        headerComponent
+      ) : (
+        <AppHeader
+          onBackPress={onBackPress}
+          title={title}
+          titleAlign="left"
+          theme={appliedTheme}
+          titleStyle={{
+            ...(titleStyle ? StyleSheet.flatten(titleStyle) : {}),
+            color: appliedTheme.colors.onBackground
+          }}
+          onRightPress={onSearchPress}
+          rightIcon={showSearchIcon ? <Search size={scale(23)} color={appliedTheme.colors.onBackground} /> : undefined}
+        />
+      )}
+
+      {isLoading || data.length > 0 ? (
+        viewMode === 'poster' ? (
+          <FlatGrid
+            itemDimension={itemDimension}
+            spacing={spacing}
+            data={listData}
+            keyExtractor={(item, index) => item._id || `item-${index}`}
+            style={listStyle}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={[styles.contentContainerFlatStyle, contentContainerStyle]}
+            renderItem={renderGridItem}
+            onEndReached={onEndReached}
+            onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
+          />
+        ) : (
+          <FlatList
+            data={listData}
+            keyExtractor={(item, index) => item._id || `item-${index}`}
+            renderItem={renderGridItem}
+            style={listStyle}
+            contentContainerStyle={[styles.contentContainerFlatStyle, contentContainerStyle]}
+            onEndReached={onEndReached}
+            onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
+            showsVerticalScrollIndicator={false}
+          />
+        )
+      ) : noDataComponent ? (
+        <>{noDataComponent}</>
+      ) : (
+        <View style={styles.noData}>
+          <Text style={styles.noDataText}>{noDataText}</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  noData: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  noDataText: {
+    fontSize: RFValue(13),
+    opacity: 0.5
+  },
+  contentContainerFlatStyle: {
+    paddingBottom: scale(50)
+  },
+  thumbnailWrapper: {
+    width: scale(150),
+    aspectRatio: 16 / 9,
+    borderRadius: scale(6),
+    overflow: 'hidden',
+    backgroundColor: '#222',
+    alignSelf: 'stretch'
+  },
+  thumbnailImage: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 0
+  },
+  detailedItem: {
+    flexDirection: 'row',
+    marginVertical: scale(6),
+    paddingHorizontal: scale(10),
+    alignItems: 'flex-start'
+  },
+  detailedPoster: {
+    width: scale(80),
+    height: scale(120),
+    borderRadius: scale(6)
+  },
+  detailedInfo: {
+    flex: 1,
+    marginLeft: scale(5)
+  },
+  detailedTitle: {
+    fontSize: RFValue(11),
+    fontWeight: '500'
+  },
+  detailedDesc: {
+    fontSize: RFValue(9),
+    textAlign: 'auto',
+    fontWeight: '400',
+    marginTop: scale(1)
+  }
+});
+
+export namespace WatchLater {
+  export type Props = WatchLaterProps;
+  export type Data = Props['data'];
+  export type Item = Props['data'][number];
+}

package/src/components/User/components/UserAvatar.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import { scale } from 'react-native-size-matters';
+import { useTheme } from '../../../theme/hook/useTheme';
+import type { AppTheme } from '../../../theme/themes';
+
+const fallbackAvatar = require('../../../assets/img/profile.jpg');
+
+type UserAvatarProps = {
+  avatarUri?: string;
+  size?: number;
+  theme?: AppTheme;
+};
+
+const UserAvatar: React.FC<UserAvatarProps> = ({ avatarUri, size = scale(80), theme }) => {
+  const [imageError, setImageError] = useState(false);
+  const { theme: appliedTheme } = useTheme(theme);
+  const borderColor = appliedTheme.colors.primary;
+
+  return (
+    <View style={styles(size).wrapper}>
+      <Image
+        source={imageError || !avatarUri ? fallbackAvatar : { uri: avatarUri }}
+        style={[styles(size).avatar, { borderColor }]}
+        onError={() => setImageError(true)}
+      />
+    </View>
+  );
+};
+
+export default UserAvatar;
+const styles = (size: number) =>
+  StyleSheet.create({
+    wrapper: {
+      position: 'relative'
+    },
+    avatar: {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      borderWidth: scale(1.5)
+    }
+  });

package/src/components/User/components/UserSection.tsx

@@ -0,0 +1,182 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 23 Jun 2025 at 11:22 AM
+ */
+import React from 'react';
+import { View, Pressable, type TextStyle, type ViewStyle } from 'react-native';
+import { Edit3 } from 'lucide-react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import UserAvatar from './UserAvatar';
+import { Text } from '../../Text';
+import { useTheme } from '../../../theme/hook/useTheme';
+import type { AppTheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+export interface UserInfo {
+  name: string;
+  avatarUri: string;
+  emailOrPhone: string;
+  onEditPress?: () => void;
+}
+
+export interface UserInfoTextStyle {
+  nameStyle?: TextStyle;
+  emailStyle?: TextStyle;
+}
+
+interface UserSectionProps {
+  userInfo: UserInfo;
+  isLoading?: boolean;
+  renderUserInfo?: (userInfo: UserInfo) => React.ReactNode;
+  theme?: AppTheme;
+  avatarComponent?: React.ReactNode;
+  skeletonProps?: Partial<React.ComponentProps<typeof SkeletonPlaceholder>>;
+  userInfoTextStyle?: UserInfoTextStyle;
+}
+
+const UserSection: React.FC<UserSectionProps> = ({
+  userInfo,
+  isLoading,
+  renderUserInfo,
+  theme,
+  avatarComponent,
+  skeletonProps = {},
+  userInfoTextStyle = {}
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  if (!userInfo) return null;
+  if (renderUserInfo) return renderUserInfo(userInfo);
+
+  if (isLoading) {
+    return (
+      <View style={styles.userInfoContainer}>
+        <SkeletonPlaceholder
+          backgroundColor={appliedTheme.colors.skeletonBaseColor}
+          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          borderRadius={moderateScale(8)}
+          {...skeletonProps}
+        >
+          <View style={styles.skeletonWrapper}>
+            <View style={styles.skeletonAvatar} />
+            <View style={styles.skeletonName} />
+            <View style={styles.skeletonEmail} />
+          </View>
+        </SkeletonPlaceholder>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.userInfoContainer}>
+      <View style={styles.avatarWrapper}>
+        {avatarComponent ?? (
+          <>
+            <UserAvatar avatarUri={userInfo.avatarUri} theme={appliedTheme} />
+            {userInfo.onEditPress && (
+              <Pressable
+                onPress={userInfo.onEditPress}
+                style={[
+                  styles.editButton,
+                  {
+                    borderColor: appliedTheme.colors.primary,
+                    backgroundColor: appliedTheme.colors.white,
+                    shadowColor: appliedTheme.colors.surface
+                  }
+                ]}
+                android_ripple={{
+                  color: appliedTheme.colors.surfaceDisabled
+                }}
+              >
+                <View style={styles.editContent}>
+                  <Edit3 size={moderateScale(14)} color={appliedTheme.colors.primary} />
+                </View>
+              </Pressable>
+            )}
+          </>
+        )}
+      </View>
+
+      {userInfo.name && (
+        <Text style={[styles.userName, { color: appliedTheme.colors.onBackground }, userInfoTextStyle.nameStyle]}>
+          {userInfo.name}
+        </Text>
+      )}
+      {userInfo.emailOrPhone && (
+        <Text style={[styles.userEmail, { color: appliedTheme.colors.onBackground }, userInfoTextStyle.emailStyle]}>
+          {userInfo.emailOrPhone}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+export default UserSection;
+
+// Styles
+const styles = {
+  userInfoContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: verticalScale(10),
+    height: verticalScale(200)
+  } as ViewStyle,
+  avatarWrapper: {
+    position: 'relative'
+  } as ViewStyle,
+  editButton: {
+    position: 'absolute',
+    bottom: scale(2),
+    right: scale(2),
+    width: scale(22),
+    height: scale(22),
+    borderRadius: scale(11),
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    elevation: 1,
+    shadowOffset: { width: 0, height: 0.5 },
+    shadowOpacity: 0.1,
+    shadowRadius: 0.5
+  } as ViewStyle,
+  editContent: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  } as ViewStyle,
+  editLabel: {
+    fontSize: RFValue(8),
+    marginTop: verticalScale(1),
+    fontWeight: '500',
+    lineHeight: moderateScale(12)
+  } as TextStyle,
+  userName: {
+    fontSize: RFValue(15),
+    fontWeight: '600',
+    marginTop: verticalScale(10),
+    marginBottom: verticalScale(2)
+  } as TextStyle,
+  userEmail: {
+    fontSize: RFValue(13),
+    opacity: 0.7
+  } as TextStyle,
+  skeletonWrapper: {
+    alignItems: 'center'
+  } as ViewStyle,
+  skeletonAvatar: {
+    width: scale(80),
+    height: scale(80),
+    borderRadius: scale(40),
+    marginBottom: verticalScale(12)
+  } as ViewStyle,
+  skeletonName: {
+    width: scale(120),
+    height: verticalScale(18),
+    borderRadius: moderateScale(4),
+    marginBottom: verticalScale(6)
+  } as ViewStyle,
+  skeletonEmail: {
+    width: scale(160),
+    height: verticalScale(14),
+    borderRadius: moderateScale(4)
+  } as ViewStyle
+};

package/src/components/User/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 24 Jun 2025 at 05:02 PM
+ */
+
+import { WatchHistory } from './WatchHistory/WatchHistory';
+import { WatchLater } from './WatchLater/WatchLater';
+import { DeviceSessions } from './DeviceSessions/DeviceSessions';
+export { WatchHistory, WatchLater, DeviceSessions };

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,21 @@
  * @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 './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,39 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, type ViewStyle } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import type { AppTheme } from '../../theme/themes';
+import { useTheme } from '../../theme/hook/useTheme';
+
+type SafeAreaWrapperProps = {
+  children: React.ReactNode;
+  style?: ViewStyle;
+  theme?: AppTheme;
+  edges?: ('top' | 'right' | 'bottom' | 'left')[];
+  fallbackBackground?: string;
+};
+
+export const SafeAreaWrapper: React.FC<SafeAreaWrapperProps> = ({
+  children,
+  style,
+  theme,
+  edges = ['top'],
+  fallbackBackground = '#fff'
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+
+  const containerStyle = useMemo(() => {
+    return [styles.container, { backgroundColor: appliedTheme?.colors?.background || fallbackBackground }, style];
+  }, [appliedTheme.colors.background, fallbackBackground, style]);
+
+  return (
+    <SafeAreaView edges={edges} style={containerStyle}>
+      {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]
+  );
+};