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

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

@@ -0,0 +1,218 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { memo, useMemo } 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';
+import type { ThemeOverride } from '../../../theme/themes';
+import type { UserInfo, UserInfoTextStyle } from '../../../types';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+interface UserSectionProps {
+  userInfo: UserInfo;
+  isLoading?: boolean;
+  renderUserInfo?: (userInfo: UserInfo) => React.ReactNode;
+  theme?: ThemeOverride;
+  avatarComponent?: React.ReactNode;
+  skeletonProps?: Partial<React.ComponentProps<typeof SkeletonPlaceholder>>;
+  userInfoTextStyle?: UserInfoTextStyle;
+}
+
+const UserSectionComponent: React.FC<UserSectionProps> = ({
+  userInfo,
+  isLoading,
+  renderUserInfo,
+  theme,
+  avatarComponent,
+  skeletonProps = {},
+  userInfoTextStyle = {},
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+
+  // Memoize skeleton colors
+  const skeletonColors = useMemo(
+    () => ({
+      backgroundColor: appliedTheme.colors.skeletonBaseColor,
+      highlightColor: appliedTheme.colors.skeletonHighlightColor,
+    }),
+    [
+      appliedTheme.colors.skeletonBaseColor,
+      appliedTheme.colors.skeletonHighlightColor,
+    ]
+  );
+
+  // Memoize edit button style
+  const editButtonStyle = useMemo(
+    () => [
+      styles.editButton,
+      {
+        borderColor: appliedTheme.colors.primary,
+        backgroundColor: appliedTheme.colors.surfaceVariant,
+        shadowColor: appliedTheme.colors.surface,
+      },
+    ],
+    [
+      appliedTheme.colors.primary,
+      appliedTheme.colors.surfaceVariant,
+      appliedTheme.colors.surface,
+    ]
+  );
+
+  // Memoize text styles
+  const userNameStyle = useMemo(
+    () => [
+      styles.userName,
+      { color: appliedTheme.colors.onBackground },
+      userInfoTextStyle.nameStyle,
+    ],
+    [appliedTheme.colors.onBackground, userInfoTextStyle.nameStyle]
+  );
+
+  const userEmailStyle = useMemo(
+    () => [
+      styles.userEmail,
+      { color: appliedTheme.colors.onBackground },
+      userInfoTextStyle.emailStyle,
+    ],
+    [appliedTheme.colors.onBackground, userInfoTextStyle.emailStyle]
+  );
+
+  // Memoize ripple color
+  const rippleColor = useMemo(
+    () => appliedTheme.colors.surfaceDisabled,
+    [appliedTheme.colors.surfaceDisabled]
+  );
+
+  // Memoize primary color
+  const primaryColor = useMemo(
+    () => appliedTheme.colors.primary,
+    [appliedTheme.colors.primary]
+  );
+
+  if (isLoading) {
+    return (
+      <View style={styles.userInfoContainer}>
+        <SkeletonPlaceholder
+          backgroundColor={skeletonColors.backgroundColor}
+          highlightColor={skeletonColors.highlightColor}
+          borderRadius={moderateScale(8)}
+          {...skeletonProps}
+        >
+          <View style={styles.skeletonWrapper}>
+            <View style={styles.skeletonAvatar} />
+            <View style={styles.skeletonName} />
+            <View style={styles.skeletonEmail} />
+          </View>
+        </SkeletonPlaceholder>
+      </View>
+    );
+  }
+
+  if (!userInfo) return null;
+  if (renderUserInfo) return renderUserInfo(userInfo);
+
+  return (
+    <View style={styles.userInfoContainer}>
+      <View style={styles.avatarWrapper}>
+        {avatarComponent ?? (
+          <>
+            <UserAvatar avatarUri={userInfo.avatarUri} theme={theme} />
+            {userInfo.onEditPress && (
+              <Pressable
+                onPress={userInfo.onEditPress}
+                style={editButtonStyle}
+                android_ripple={{
+                  color: rippleColor,
+                }}
+              >
+                <Edit3 size={moderateScale(13)} color={primaryColor} />
+              </Pressable>
+            )}
+          </>
+        )}
+      </View>
+
+      {userInfo.name && <Text style={userNameStyle}>{userInfo.name}</Text>}
+      {userInfo.emailOrPhone && (
+        <Text style={userEmailStyle}>{userInfo.emailOrPhone}</Text>
+      )}
+    </View>
+  );
+};
+
+const UserSection = memo(UserSectionComponent);
+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),
+    padding: scale(2),
+    width: scale(23),
+    height: scale(23),
+    overflow: 'hidden',
+    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,
+
+  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,18 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { WatchHistory } from './WatchHistory/WatchHistory';
+import { WatchLater } from './WatchLater/WatchLater';
+import { DeviceSessions } from './DeviceSessions/DeviceSessions';
+import { ProfileUpdate } from './ProfileUpdate/ProfileUpdate';
+import { PurchaseHistory } from './PurchaseHistory/PurchaseHistory';
+
+export {
+  WatchHistory,
+  WatchLater,
+  DeviceSessions,
+  ProfileUpdate,
+  PurchaseHistory,
+};

package/src/components/View/View.tsx

@@ -0,0 +1,38 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useMemo } from 'react';
+import {
+  View as RNView,
+  type ViewProps as RNViewProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+export type ViewProps = RNViewProps & {
+  style?: StyleProp<ViewStyle> | undefined;
+  backgroundColor?: string;
+};
+
+export const View: React.FC<ViewProps> = ({
+  style,
+  backgroundColor = 'transparent',
+  children,
+  ...rest
+}) => {
+  // Memoize style array to prevent unnecessary re-renders
+  const computedStyle = useMemo(
+    () => [style, backgroundColor !== 'transparent' && { backgroundColor }],
+    [style, backgroundColor]
+  );
+
+  return (
+    <RNView style={computedStyle} {...rest}>
+      {children}
+    </RNView>
+  );
+};
+
+export default React.memo(View);

package/src/components/View/index.ts

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

package/src/components/common/AppStatusBar.tsx

@@ -0,0 +1,57 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useMemo } from 'react';
+import { StatusBar, Platform, type StatusBarStyle } from 'react-native';
+import tinycolor from 'tinycolor2';
+import type { ThemeOverride } from '../../theme/themes';
+import { useTheme } from '../../theme/hooks/useTheme';
+
+type AppStatusBarProps = {
+  backgroundColor?: string;
+  barStyle?: StatusBarStyle;
+  transparent?: boolean;
+  translucent?: boolean;
+  hidden?: boolean;
+  theme?: ThemeOverride;
+};
+
+export const AppStatusBar: React.FC<AppStatusBarProps> = ({
+  backgroundColor,
+  barStyle,
+  transparent = false,
+  translucent = true,
+  hidden = false,
+  theme: overrideTheme,
+}) => {
+  const { theme } = useTheme(overrideTheme);
+
+  const resolvedBackground = useMemo(() => {
+    if (backgroundColor) return backgroundColor;
+    return theme.colors.background;
+  }, [backgroundColor, theme]);
+
+  // 🌗 Auto bar style
+  const resolvedBarStyle: StatusBarStyle = useMemo(() => {
+    if (barStyle) return barStyle;
+    const isDarkBg = tinycolor(resolvedBackground).isDark();
+    return isDarkBg ? 'light-content' : 'dark-content';
+  }, [barStyle, resolvedBackground]);
+
+  return (
+    <StatusBar
+      translucent={translucent}
+      hidden={hidden}
+      barStyle={resolvedBarStyle}
+      backgroundColor={
+        Platform.OS === 'android'
+          ? transparent
+            ? 'transparent'
+            : resolvedBackground
+          : 'transparent'
+      }
+    />
+  );
+};

package/src/components/common/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,30 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+export * from './Button';
+export * from './Fallbacks';
+export * from './Input/Input';
+export * from './Loader/Loader';
+export * from './Headers';
+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 './Text';
+export * from './View';
+export * from './User';
+export * from './BlogView';
+export * from './ContentView';
+export * from './Search';
+export * from './Subscription';
+export * from './Alert';
+export * from './Reels';
+export * from './BlurView';
+export * from './BottomSheet';
+export * from './NewRelease';
+export * from './common';

package/src/components/layout/SafeAreaWrapper.tsx

@@ -0,0 +1,50 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useMemo } from 'react';
+import { StyleSheet, type ViewStyle, type StyleProp } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import type { ThemeOverride } from '../../theme/themes';
+import { useTheme } from '../../theme';
+
+type SafeAreaWrapperProps = {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  theme?: ThemeOverride;
+  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,6 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+export * from './SafeAreaWrapper';

package/src/constants/dummySections.ts

@@ -0,0 +1,103 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+import type { IGetSectionData } from '../types';
+
+/**
+ * Creates a dummy content data object for skeleton loading states
+ */
+export const dummyContentData = (
+  id: string = 'dummy-content-id'
+): IContentData => {
+  return {
+    _id: id,
+    poster: '',
+    thumbnail: '',
+    content_offering_type: 'movie',
+    name: '',
+    slug: '',
+    u_age: '',
+    description: '',
+    release_date: '',
+    runtime: '',
+    duration: '',
+    genre: '',
+    director: '',
+    cast: [],
+    rating: '',
+    language: '',
+    subtitles: [],
+    audio_tracks: [],
+    type: 'movie',
+    year: '',
+    tags: [],
+    trailer: '',
+    trailer_source_link: '',
+    banner: '',
+    logo: '',
+    source_link: '',
+    source_type: '',
+    is_featured: false,
+    is_premium: false,
+    status: 'active',
+    views: 0,
+    likes: 0,
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+  } as unknown as IContentData;
+};
+
+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.from({ length: 5 }, (_, i) =>
+        dummyContentData(`dummy-content-${i}`)
+      ),
+      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 = ({
+  headerStyle = 'one',
+}: { headerStyle?: 'one' | 'two' | 'three' } = {}): IGetSectionData[] => [
+  headerStyle === 'three'
+    ? generateDummySection('slider_style_3')
+    : 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/Images/index.ts

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