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

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

@@ -1,228 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Mon 23 Jun 2025 at 11:22 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 { useInternalTheme } from '../../../theme/hook/useInternalTheme';
-import type { ThemeOverride } 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?: 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 } = useInternalTheme(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 (!userInfo) return null;
-  if (renderUserInfo) return renderUserInfo(userInfo);
-
-  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>
-    );
-  }
-
-  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

@@ -1,18 +0,0 @@
-/**
- * @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';
-import { ProfileUpdate } from './ProfileUpdate/ProfileUpdate';
-import { PurchaseHistory } from './PurchaseHistory/PurchaseHistory';
-
-export {
-  WatchHistory,
-  WatchLater,
-  DeviceSessions,
-  ProfileUpdate,
-  PurchaseHistory,
-};

package/src/components/View/View.tsx

@@ -1,37 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Mon 07 Jul 2025 at 11:49 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

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

package/src/components/common/AppStatusBar.tsx

@@ -1,51 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 22 Oct 2025 at 11:22 AM
- */
-
-import React, { useMemo } from 'react';
-import { StatusBar, Platform, type StatusBarStyle } from 'react-native';
-import Color from 'color';
-import type { ThemeOverride } from '../../theme/themes';
-import { useInternalTheme } from '../../theme/hook';
-
-type AppStatusBarProps = {
-  backgroundColor?: string;
-  barStyle?: StatusBarStyle;
-  translucent?: boolean;
-  hidden?: boolean;
-  theme?: ThemeOverride;
-};
-
-export const AppStatusBar: React.FC<AppStatusBarProps> = ({
-  backgroundColor,
-  barStyle,
-  translucent = true,
-  hidden = false,
-  theme: overrideTheme,
-}) => {
-  const { theme } = useInternalTheme(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 = Color(resolvedBackground).isDark();
-    return isDarkBg ? 'light-content' : 'dark-content';
-  }, [barStyle, resolvedBackground]);
-
-  return (
-    <StatusBar
-      translucent={translucent}
-      hidden={hidden}
-      barStyle={resolvedBarStyle}
-      backgroundColor={
-        Platform.OS === 'android' ? resolvedBackground : 'transparent'
-      }
-    />
-  );
-};

package/src/components/index.ts

@@ -1,28 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Sun 08 Jun 2025 at 03:23 PM
- */
-
-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';

package/src/components/layout/SafeAreaWrapper.tsx

@@ -1,45 +0,0 @@
-import React, { useMemo } from 'react';
-import { StyleSheet, type ViewStyle } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import type { ThemeOverride } from '../../theme/themes';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-
-type SafeAreaWrapperProps = {
-  children: React.ReactNode;
-  style?: 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 } = useInternalTheme(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

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

package/src/constants/dummySections.ts

@@ -1,94 +0,0 @@
-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: 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/Images/index.ts

@@ -1,2 +0,0 @@
-export * from './useImageLoader';
-export * from './useImageValidation';