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

package/src/components/Alert/UAAlert.tsx

@@ -1,170 +0,0 @@
-import React from 'react';
-import { Modal, Text, View, TouchableOpacity, StyleSheet } from 'react-native';
-import { scale } from 'react-native-size-matters';
-import type { ThemeOverride } from '../../theme/themes';
-import { useInternalTheme } from '../../theme/hook';
-
-interface IProps {
-  theme?: ThemeOverride;
-  visible: boolean;
-  title?: string;
-  message?: string;
-  confirmationText?: string;
-  rejectText?: string;
-  resolveText?: string;
-  onPress: (e: 'reject' | 'resolve') => void;
-  onRequestClose?: () => void;
-}
-
-export const UAAlert: React.FC<IProps> = ({
-  theme: themeOverride,
-  visible,
-  title = 'Maturity Rating: 18+',
-  message = 'May contain non-explicit sexual behavior, nudity, violence, strong language, substances.',
-  confirmationText = 'I confirm that I am 18 years and above.',
-  rejectText = 'No',
-  resolveText = 'Yes',
-  onPress,
-  onRequestClose,
-}): React.ReactElement => {
-  const { theme } = useInternalTheme(themeOverride);
-  return (
-    <Modal
-      animationType="fade"
-      transparent
-      visible={visible}
-      onRequestClose={onRequestClose ?? (() => onPress('reject'))}
-    >
-      <View style={styles.overlay}>
-        <View
-          style={[
-            styles.container,
-            { backgroundColor: theme?.colors?.surface ?? '#fff' },
-          ]}
-        >
-          {/* Title */}
-          <Text style={[styles.title, { color: theme?.colors?.textPrimary }]}>
-            {title}
-          </Text>
-
-          {/* Message */}
-          <Text
-            style={[styles.message, { color: theme?.colors?.textSecondary }]}
-          >
-            {message}
-          </Text>
-
-          {/* Confirmation Note */}
-          {confirmationText ? (
-            <Text
-              style={[
-                styles.confirmation,
-                { color: theme?.colors?.textSecondary },
-              ]}
-            >
-              {confirmationText}
-            </Text>
-          ) : null}
-
-          {/* Divider */}
-          <View style={[styles.divider, { backgroundColor: '#ccc' }]} />
-
-          {/* Buttons */}
-          <View style={styles.buttonRow}>
-            <TouchableOpacity
-              activeOpacity={0.8}
-              onPress={() => onPress('reject')}
-              style={[
-                styles.button,
-                {
-                  backgroundColor: 'rgba(255, 255, 255, 0.97)',
-                },
-              ]}
-            >
-              <Text
-                style={[
-                  styles.buttonText,
-                  { color: theme?.colors?.black ?? '#000' },
-                ]}
-              >
-                {rejectText}
-              </Text>
-            </TouchableOpacity>
-
-            <TouchableOpacity
-              activeOpacity={0.8}
-              onPress={() => onPress('resolve')}
-              style={[
-                styles.button,
-                { backgroundColor: theme?.colors?.primary },
-              ]}
-            >
-              <Text
-                style={[
-                  styles.buttonText,
-                  { color: theme?.colors?.black ?? '#000' },
-                ]}
-              >
-                {resolveText}
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-      </View>
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'rgba(0,0,0,0.6)', // ✅ lighter backdrop for light mode
-  },
-  container: {
-    width: '80%',
-    padding: scale(20),
-    borderRadius: scale(20),
-    elevation: 5, // ✅ shadow on Android
-    shadowColor: '#000', // ✅ shadow on iOS
-    shadowOpacity: 0.2,
-    shadowOffset: { width: 0, height: 2 },
-    shadowRadius: 6,
-  },
-  title: {
-    fontSize: scale(18),
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  message: {
-    fontSize: scale(13),
-    textAlign: 'center',
-    marginTop: scale(20),
-  },
-  confirmation: {
-    fontSize: scale(12.2),
-    textAlign: 'center',
-    marginTop: scale(20),
-  },
-  divider: {
-    height: StyleSheet.hairlineWidth,
-    marginVertical: scale(12),
-    marginHorizontal: scale(18),
-  },
-  buttonRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    marginTop: scale(10),
-  },
-  button: {
-    width: scale(100),
-    paddingVertical: scale(10),
-    borderRadius: scale(8),
-    alignItems: 'center',
-  },
-  buttonText: {
-    fontSize: scale(13),
-    fontWeight: '600',
-  },
-});

package/src/components/Alert/index.ts

@@ -1,2 +0,0 @@
-export * from './UAAlert';
-export * from './AlertDialog';

package/src/components/Auth/AuthProvider/AuthProvider.tsx

@@ -1,415 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Tue 22 Oct 2025
- */
-import React, {
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  useCallback,
-} from 'react';
-import {
-  View,
-  StyleSheet,
-  SafeAreaView,
-  TouchableOpacity,
-  Animated,
-} from 'react-native';
-import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
-import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
-import { type ThemeOverride } from '../../../theme/themes';
-import { Logo } from '../../Logo/Logo';
-import { Text } from '../../Text';
-import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
-import { Phone, Mail } from 'lucide-react-native';
-import { Button } from '../../Button';
-import { default as SkeletonPlaceholder } from 'react-native-skeleton-placeholder';
-
-export interface AuthProviderProps {
-  logoUri: string;
-  title: string;
-  description?: string;
-  backgroundImage?: {
-    source: string | null;
-    gradientSplitBackground?: number;
-    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
-  };
-  text?: {
-    loginWithPhone?: string;
-    loginWithEmail?: string;
-  };
-  variant?: 'one' | 'two';
-  theme?: ThemeOverride;
-  isLoading?: boolean;
-  authProvider?: {
-    phone?: {
-      enabled?: boolean;
-      onPress?: () => void;
-    };
-    email?: {
-      enabled?: boolean;
-      onPress?: () => void;
-    };
-  };
-}
-
-const AuthProvider: React.FC<AuthProviderProps> = React.memo(
-  ({
-    title = 'Your Favourite OTT Platform',
-    description,
-    backgroundImage,
-    logoUri,
-    text,
-    variant = 'one',
-    theme: overrideTheme,
-    isLoading = false,
-    authProvider = {
-      phone: { enabled: true },
-      email: { enabled: true },
-    },
-  }) => {
-    const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
-    const { colors } = resolvedTheme;
-
-    const phoneEnabled = !!authProvider.phone?.enabled;
-    const emailEnabled = !!authProvider.email?.enabled;
-
-    const [activeTab, setActiveTab] = useState<'phone' | 'email'>(
-      phoneEnabled ? 'phone' : 'email'
-    );
-
-    const slideAnim = useRef(new Animated.Value(80)).current;
-    const opacityAnim = useRef(new Animated.Value(0)).current;
-
-    useEffect(() => {
-      setActiveTab(phoneEnabled ? 'phone' : 'email');
-
-      Animated.parallel([
-        Animated.timing(slideAnim, {
-          toValue: 0,
-          duration: 600,
-          useNativeDriver: true,
-        }),
-        Animated.timing(opacityAnim, {
-          toValue: 1,
-          duration: 600,
-          useNativeDriver: true,
-        }),
-      ]).start();
-    }, [phoneEnabled, emailEnabled, slideAnim, opacityAnim]);
-
-    const triggerEvent = useCallback(
-      (type: 'phone' | 'email') => {
-        if (type === 'phone') authProvider.phone?.onPress?.();
-        else authProvider.email?.onPress?.();
-      },
-      [authProvider.phone, authProvider.email]
-    );
-
-    const handlePress = useCallback(
-      (type: 'phone' | 'email') => {
-        if (activeTab !== type) setActiveTab(type);
-        setTimeout(() => triggerEvent(type), 100);
-      },
-      [activeTab, triggerEvent]
-    );
-
-    const authMethods: {
-      key: 'phone' | 'email';
-      label: string;
-      icon: React.ReactNode;
-      enabled: boolean;
-    }[] = useMemo(
-      () => [
-        {
-          key: 'phone',
-          label: text?.loginWithPhone || 'Phone',
-          icon: <Phone size={moderateScale(16)} />,
-          enabled: phoneEnabled,
-        },
-        {
-          key: 'email',
-          label: text?.loginWithEmail || 'Email',
-          icon: <Mail size={moderateScale(16)} />,
-          enabled: emailEnabled,
-        },
-      ],
-      [text?.loginWithPhone, text?.loginWithEmail, phoneEnabled, emailEnabled]
-    );
-
-    // Memoize enabled methods filter
-    const enabledMethods = useMemo(
-      () => authMethods.filter((item) => item.enabled),
-      [authMethods]
-    );
-
-    // Memoize skeleton style
-    const skeletonStyle = useMemo(
-      () =>
-        StyleSheet.create({
-          skeleton: {
-            width: '100%' as const,
-            height: verticalScale(48),
-            borderRadius: moderateScale(8),
-          },
-        }).skeleton,
-      []
-    );
-
-    // Memoize toggle skeleton style
-    const toggleSkeletonStyle = useMemo(
-      () =>
-        StyleSheet.create({
-          toggleSkeleton: {
-            width: '100%' as const,
-            height: verticalScale(48),
-            borderRadius: 50,
-          },
-        }).toggleSkeleton,
-      []
-    );
-
-    // Memoize animated view style
-    const animatedViewStyle = useMemo(
-      () => ({
-        transform: [{ translateY: slideAnim }],
-        opacity: opacityAnim,
-        width: '100%' as const,
-      }),
-      [slideAnim, opacityAnim]
-    );
-
-    // Memoize title style
-    const titleStyleMemo = useMemo(
-      () => [styles.title, { color: colors.textPrimary }],
-      [colors.textPrimary]
-    );
-
-    // Memoize description style
-    const descriptionStyleMemo = useMemo(
-      () => [styles.description, { color: colors.textSecondary }],
-      [colors.textSecondary]
-    );
-
-    // Memoize toggle wrapper style
-    const toggleWrapperStyleMemo = useMemo(
-      () => [
-        styles.toggleWrapper,
-        {
-          backgroundColor: colors.surfaceVariant,
-          borderColor: colors.border,
-        },
-      ],
-      [colors.surfaceVariant, colors.border]
-    );
-
-    const renderButtons = useCallback(
-      () => (
-        <View style={styles.buttonContainer}>
-          {enabledMethods.map((item) => (
-            <React.Fragment key={item.key}>
-              {isLoading ? (
-                <SkeletonPlaceholder
-                  backgroundColor={colors.skeletonBaseColor}
-                  highlightColor={colors.skeletonHighlightColor}
-                  borderRadius={moderateScale(8)}
-                >
-                  <View style={skeletonStyle} />
-                </SkeletonPlaceholder>
-              ) : (
-                <Button.Secondary
-                  containerStyle={{
-                    backgroundColor:
-                      activeTab === item.key ? colors.button : 'transparent',
-                    borderWidth: 1.2,
-                    borderColor: colors.button,
-                  }}
-                  titleStyle={{
-                    color:
-                      activeTab === item.key
-                        ? colors.buttonText
-                        : colors.textPrimary,
-                  }}
-                  title={`Continue with ${item.label}`}
-                  onPress={() => handlePress(item.key)}
-                  leftIcon={React.cloneElement(item.icon as any, {
-                    color:
-                      activeTab === item.key
-                        ? colors.buttonText
-                        : colors.textPrimary,
-                    size: moderateScale(18),
-                  })}
-                />
-              )}
-            </React.Fragment>
-          ))}
-        </View>
-      ),
-      [
-        enabledMethods,
-        isLoading,
-        colors.skeletonBaseColor,
-        colors.skeletonHighlightColor,
-        colors.button,
-        colors.buttonText,
-        colors.textPrimary,
-        skeletonStyle,
-        activeTab,
-        handlePress,
-      ]
-    );
-
-    // Toggle render without absolute
-    const renderToggle = useCallback(() => {
-      if (isLoading) {
-        return (
-          <SkeletonPlaceholder
-            backgroundColor={colors.skeletonBaseColor}
-            highlightColor={colors.skeletonHighlightColor}
-            borderRadius={50}
-          >
-            <View style={toggleSkeletonStyle} />
-          </SkeletonPlaceholder>
-        );
-      }
-
-      return (
-        <View style={toggleWrapperStyleMemo}>
-          {enabledMethods.map((item) => {
-            const isActive = activeTab === item.key;
-            return (
-              <TouchableOpacity
-                key={item.key}
-                style={[
-                  styles.toggleHalf,
-                  {
-                    backgroundColor: isActive ? colors.primary : 'transparent',
-                  },
-                ]}
-                onPress={() => handlePress(item.key)}
-                activeOpacity={0.8}
-              >
-                <View style={styles.iconTextRow}>
-                  {React.cloneElement(item.icon as any, {
-                    color: isActive ? colors.buttonText : colors.textPrimary,
-                  })}
-                  <Text
-                    style={[
-                      styles.toggleText,
-                      {
-                        color: isActive
-                          ? colors.buttonText
-                          : colors.textPrimary,
-                      },
-                    ]}
-                  >
-                    {item.label}
-                  </Text>
-                </View>
-              </TouchableOpacity>
-            );
-          })}
-        </View>
-      );
-    }, [
-      isLoading,
-      enabledMethods,
-      activeTab,
-      colors,
-      handlePress,
-      toggleSkeletonStyle,
-      toggleWrapperStyleMemo,
-    ]);
-
-    return (
-      <BackgroundLayout
-        backgroundImage={backgroundImage?.source}
-        theme={overrideTheme}
-        gradientSplitBackground={
-          backgroundImage?.gradientSplitBackground ?? 0.35
-        }
-        resizeMode={backgroundImage?.resizeMode ?? 'cover'}
-      >
-        <SafeAreaView style={styles.safeArea}>
-          <View style={styles.container}>
-            <View style={styles.logoWrapper}>
-              <Logo logoUri={logoUri} />
-            </View>
-
-            <View style={styles.bottomSection}>
-              <Text style={titleStyleMemo}>{title}</Text>
-              <Text
-                style={descriptionStyleMemo}
-                numberOfLines={2}
-                adjustsFontSizeToFit
-              >
-                {description}
-              </Text>
-
-              <Animated.View style={animatedViewStyle}>
-                {variant === 'one' ? renderButtons() : renderToggle()}
-              </Animated.View>
-            </View>
-          </View>
-        </SafeAreaView>
-      </BackgroundLayout>
-    );
-  }
-);
-
-export default AuthProvider;
-
-const styles = StyleSheet.create({
-  safeArea: { flex: 1, width: '100%' },
-  container: {
-    flex: 1,
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    width: '100%',
-    paddingHorizontal: scale(18),
-    paddingVertical: verticalScale(20),
-  },
-  logoWrapper: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  bottomSection: {
-    width: '100%',
-    alignItems: 'center',
-    paddingBottom: verticalScale(30),
-  },
-  title: {
-    fontSize: moderateScale(18),
-    fontWeight: '700',
-    textAlign: 'center',
-    marginBottom: verticalScale(12),
-  },
-  description: {
-    fontSize: moderateScale(14),
-    textAlign: 'center',
-    width: '90%',
-    marginBottom: verticalScale(30),
-  },
-  buttonContainer: { width: '100%', gap: verticalScale(10) },
-  toggleWrapper: {
-    flexDirection: 'row',
-    height: verticalScale(48),
-    borderRadius: 50,
-    borderWidth: scale(0.5),
-    padding: scale(4),
-    overflow: 'hidden',
-    alignItems: 'center',
-    width: '100%',
-  },
-  toggleHalf: {
-    flex: 1,
-    borderRadius: scale(50),
-    height: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  toggleText: { fontSize: moderateScale(14), fontWeight: '600' },
-  iconTextRow: { flexDirection: 'row', alignItems: 'center', gap: scale(6) },
-});