@zezosoft/zezo-ott-react-native-ui-kit 1.0.3 → 1.0.5

package/src/components/Alert/AlertDialog.tsx

@@ -0,0 +1,247 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sat 18 Oct 2025 at 06:45 PM
+ */
+import React, { useEffect, useRef } from 'react';
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  Dimensions,
+  Modal,
+  Animated,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import { Text } from '../Text';
+import { X } from 'lucide-react-native';
+import LottieView from 'lottie-react-native';
+import { useTheme } from '../../theme/hook/useTheme';
+import type { AppTheme } from '../../theme/themes';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { Button } from '../Button';
+
+const { width } = Dimensions.get('window');
+
+export interface AlertDialogProps {
+  visible: boolean;
+  type: 'success' | 'pending' | 'failed';
+  title: string;
+  buttonText?: string;
+  onPressButton?: () => void;
+  onClose?: () => void;
+  theme?: AppTheme;
+}
+
+export const AlertDialog: React.FC<AlertDialogProps> = ({
+  visible,
+  type = 'success',
+  title,
+  buttonText,
+  onPressButton,
+  onClose,
+  theme,
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const scaleAnim = useRef(new Animated.Value(0.85)).current;
+
+  useEffect(() => {
+    if (visible) {
+      Animated.parallel([
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 220,
+          useNativeDriver: true,
+        }),
+        Animated.spring(scaleAnim, {
+          toValue: 1,
+          friction: 7,
+          tension: 90,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(fadeAnim, {
+          toValue: 0,
+          duration: 180,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scaleAnim, {
+          toValue: 0.85,
+          duration: 180,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  }, [fadeAnim, scaleAnim, visible]);
+
+  const animationMap = {
+    success: require('../../assets/animations/Successful.json'),
+    pending: require('../../assets/animations/Pending.json'),
+    failed: require('../../assets/animations/Failed.json'),
+  };
+
+  const defaultTitles = {
+    success: 'Account successfully created!',
+    pending: 'Please wait... Processing',
+    failed: 'Something went wrong!',
+  };
+
+  const defaultButtonText = {
+    success: 'Go to Home',
+    pending: 'Please Wait...',
+    failed: 'Try Again',
+  };
+
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      animationType="none"
+      onRequestClose={onClose}
+    >
+      <Animated.View
+        style={[
+          styles.backdrop,
+          { backgroundColor: appliedTheme.colors.shadow },
+        ]}
+      >
+        <TouchableWithoutFeedback onPress={onClose}>
+          <View style={StyleSheet.absoluteFillObject} />
+        </TouchableWithoutFeedback>
+
+        <Animated.View
+          style={[
+            styles.centerContainer,
+            { opacity: fadeAnim, transform: [{ scale: scaleAnim }] },
+          ]}
+        >
+          <View
+            style={[
+              styles.dialogBox,
+              {
+                backgroundColor: appliedTheme.colors.surface,
+                shadowColor: appliedTheme.colors.shadow,
+              },
+            ]}
+          >
+            {/* Close Button */}
+            <TouchableOpacity
+              style={[
+                styles.closeButton,
+                { backgroundColor: appliedTheme.colors.background },
+              ]}
+              onPress={onClose}
+              activeOpacity={0.7}
+            >
+              <X
+                color={appliedTheme.colors.textPrimary}
+                size={scale(18)}
+                strokeWidth={2}
+              />
+            </TouchableOpacity>
+
+            {/* Content Wrapper */}
+            <View style={styles.contentWrapper}>
+              {/* Animation */}
+              <View style={styles.lottieStyle}>
+                <LottieView
+                  source={animationMap[type]}
+                  autoPlay
+                  loop={type === 'pending'}
+                  style={{ width: 500, height: 500, padding: 0 }}
+                />
+              </View>
+
+              {/* Title */}
+              <Text
+                style={[
+                  styles.titleText,
+                  { color: appliedTheme.colors.textPrimary },
+                ]}
+              >
+                {title || defaultTitles[type]}
+              </Text>
+            </View>
+
+            {/* Button fixed at bottom */}
+            <Button.Primary
+              title={buttonText || defaultButtonText[type]}
+              onPress={onPressButton}
+              disabled={type === 'pending'}
+              containerStyle={styles.bottomButton}
+            />
+          </View>
+        </Animated.View>
+      </Animated.View>
+    </Modal>
+  );
+};
+
+export default AlertDialog;
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    zIndex: 10,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+    paddingHorizontal: scale(15),
+  },
+  centerContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  dialogBox: {
+    width: width * 0.85,
+    borderRadius: moderateScale(16),
+    paddingTop: verticalScale(20),
+    paddingBottom: verticalScale(15),
+    paddingHorizontal: scale(20),
+    shadowOpacity: 0.25,
+    shadowRadius: moderateScale(8),
+    shadowOffset: { width: 0, height: 3 },
+    elevation: 8,
+    minHeight: verticalScale(250),
+    justifyContent: 'flex-start',
+  },
+  closeButton: {
+    position: 'absolute',
+    top: verticalScale(8),
+    right: scale(8),
+    width: scale(28),
+    height: scale(28),
+    borderRadius: scale(14),
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 10,
+    elevation: 6,
+  },
+  contentWrapper: {
+    alignItems: 'center',
+    marginBottom: verticalScale(50),
+  },
+  lottieStyle: {
+    width: scale(150),
+    height: scale(150),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: verticalScale(10),
+  },
+  titleText: {
+    fontSize: RFValue(15),
+    fontWeight: '600',
+    textAlign: 'center',
+    lineHeight: RFValue(20),
+  },
+  bottomButton: {
+    position: 'absolute',
+    bottom: verticalScale(15),
+    left: scale(15),
+    right: scale(15),
+  },
+});

package/src/components/Alert/index.ts

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

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

@@ -0,0 +1,344 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sat 18 Oct 2025 at 06:23 PM
+ */
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  SafeAreaView,
+  TouchableOpacity,
+  Animated,
+  Platform,
+} from 'react-native';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import { useTheme } from '../../../theme/hook/useTheme';
+import { type AppTheme } 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';
+
+export interface AuthProviderProps {
+  title?: string;
+  description?: string;
+  backgroundImage?: {
+    source?: string | null;
+    gradientSplitBackground?: number;
+    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
+  };
+  logoUri?: string;
+  text?: {
+    loginWithPhone?: string;
+    loginWithEmail?: string;
+  };
+  variant?: 'one' | 'two';
+  theme?: AppTheme;
+  authProvider?: {
+    phone?: {
+      enabled?: boolean;
+      onPress?: () => void;
+    };
+    email?: {
+      enabled?: boolean;
+      onPress?: () => void;
+    };
+  };
+}
+
+const AuthProvider: React.FC<AuthProviderProps> = ({
+  title = 'Your Favourite OTT Platform',
+  description,
+  backgroundImage,
+  logoUri,
+  text,
+  variant = 'one',
+  theme: overrideTheme,
+  authProvider = {
+    phone: { enabled: true },
+    email: { enabled: true },
+  },
+}) => {
+  const { theme: resolvedTheme } = useTheme(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(() => {
+    Animated.parallel([
+      Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 600,
+        useNativeDriver: true,
+      }),
+      Animated.timing(opacityAnim, {
+        toValue: 1,
+        duration: 600,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [opacityAnim, slideAnim]);
+
+  useEffect(() => {
+    setActiveTab(phoneEnabled ? 'phone' : 'email');
+  }, [phoneEnabled, emailEnabled]);
+
+  const triggerEvent = (type: 'phone' | 'email') => {
+    if (type === 'phone') authProvider.phone?.onPress?.();
+    else authProvider.email?.onPress?.();
+  };
+
+  const handlePress = (type: 'phone' | 'email') => {
+    if (phoneEnabled && !emailEnabled) return triggerEvent('phone');
+    if (emailEnabled && !phoneEnabled) return triggerEvent('email');
+
+    if (activeTab !== type) {
+      setActiveTab(type);
+      setTimeout(() => triggerEvent(type), 150);
+    } else {
+      triggerEvent(type);
+    }
+  };
+
+  const renderButtons = () => (
+    <View style={styles.buttonContainer}>
+      {phoneEnabled && (
+        <Button.Secondary
+          containerStyle={{
+            backgroundColor:
+              activeTab === 'phone' ? colors.button : 'transparent',
+            borderWidth: 1.2,
+            borderColor: colors.button,
+          }}
+          titleStyle={{
+            color:
+              activeTab === 'phone' ? colors.buttonText : colors.textPrimary,
+          }}
+          title={text?.loginWithPhone || 'Continue with Phone'}
+          onPress={() => handlePress('phone')}
+          leftIcon={
+            <Phone
+              size={moderateScale(18)}
+              color={
+                activeTab === 'phone' ? colors.buttonText : colors.textPrimary
+              }
+            />
+          }
+        />
+      )}
+      {emailEnabled && (
+        <Button.Secondary
+          title={text?.loginWithEmail || 'Continue with Email'}
+          onPress={() => handlePress('email')}
+          containerStyle={{
+            backgroundColor:
+              activeTab === 'email' ? colors.button : 'transparent',
+            borderWidth: 1.2,
+            borderColor: colors.button,
+          }}
+          titleStyle={{
+            color:
+              activeTab === 'email' ? colors.buttonText : colors.textPrimary,
+          }}
+          leftIcon={
+            <Mail
+              size={moderateScale(18)}
+              color={
+                activeTab === 'email' ? colors.buttonText : colors.textPrimary
+              }
+            />
+          }
+        />
+      )}
+    </View>
+  );
+
+  const renderToggle = () => (
+    <View
+      style={[styles.toggleWrapper, { backgroundColor: colors.surfaceVariant }]}
+    >
+      <Animated.View
+        style={[
+          styles.activeHighlight,
+          {
+            backgroundColor: colors.primary,
+            width: phoneEnabled && emailEnabled ? '50%' : '96%',
+            left:
+              phoneEnabled && emailEnabled
+                ? activeTab === 'phone'
+                  ? '2%'
+                  : '48%'
+                : '2%',
+          },
+        ]}
+      />
+      {phoneEnabled && (
+        <ToggleButton
+          active={activeTab === 'phone'}
+          icon={<Phone size={moderateScale(16)} />}
+          text={text?.loginWithPhone || 'Phone'}
+          onPress={() => handlePress('phone')}
+          colors={colors}
+        />
+      )}
+      {emailEnabled && (
+        <ToggleButton
+          active={activeTab === 'email'}
+          icon={<Mail size={moderateScale(16)} />}
+          text={text?.loginWithEmail || 'Email'}
+          onPress={() => handlePress('email')}
+          colors={colors}
+        />
+      )}
+    </View>
+  );
+
+  return (
+    <BackgroundLayout
+      backgroundImage={backgroundImage?.source}
+      theme={resolvedTheme}
+      gradientSplitBackground={backgroundImage?.gradientSplitBackground ?? 0.35}
+      resizeMode={backgroundImage?.resizeMode ?? 'cover'}
+    >
+      <SafeAreaView style={styles.safeArea}>
+        <View style={styles.container}>
+          <View style={styles.logoWrapper}>
+            <Logo
+              logoUri={
+                logoUri ||
+                'https://res.cloudinary.com/dcxtwwtl0/image/upload/v1759578007/Logo_y4uzsd.png'
+              }
+            />
+          </View>
+
+          <View style={styles.bottomSection}>
+            <Text style={[styles.title, { color: colors.textPrimary }]}>
+              {title}
+            </Text>
+            <Text
+              style={[styles.description, { color: colors.textSecondary }]}
+              numberOfLines={2}
+              adjustsFontSizeToFit
+            >
+              {description}
+            </Text>
+
+            <Animated.View
+              style={{
+                transform: [{ translateY: slideAnim }],
+                opacity: opacityAnim,
+                width: '100%',
+              }}
+            >
+              {variant === 'one' ? renderButtons() : renderToggle()}
+            </Animated.View>
+          </View>
+        </View>
+      </SafeAreaView>
+    </BackgroundLayout>
+  );
+};
+
+const ToggleButton = ({
+  active,
+  icon,
+  text,
+  onPress,
+  colors,
+}: {
+  active: boolean;
+  icon: React.ReactNode;
+  text: string;
+  onPress: () => void;
+  colors: any;
+}) => (
+  <TouchableOpacity
+    style={styles.toggleHalf}
+    onPress={onPress}
+    activeOpacity={0.8}
+  >
+    <View style={styles.iconTextRow}>
+      {React.cloneElement(icon as any, {
+        color: active ? colors.buttonText : colors.textPrimary,
+      })}
+      <Text
+        style={[
+          styles.toggleText,
+          { color: active ? colors.buttonText : colors.textPrimary },
+        ]}
+      >
+        {text}
+      </Text>
+    </View>
+  </TouchableOpacity>
+);
+
+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(Platform.OS === 'ios' ? 40 : 30),
+  },
+  title: {
+    fontSize: moderateScale(18),
+    fontWeight: '700',
+    textAlign: 'center',
+  },
+  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,
+    overflow: 'hidden',
+    alignItems: 'center',
+    width: '100%',
+    position: 'relative',
+  },
+  toggleHalf: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 2,
+  },
+  toggleText: { fontSize: moderateScale(14), fontWeight: '600' },
+  activeHighlight: {
+    position: 'absolute',
+    top: '7%',
+    height: '86%',
+    borderRadius: 50,
+    zIndex: 1,
+  },
+  iconTextRow: { flexDirection: 'row', alignItems: 'center', gap: scale(6) },
+});