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

package/src/components/Auth/One/SignUp/SignUp.tsx

@@ -1,470 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useCallback, useMemo } from 'react';
-import {
-  StyleSheet,
-  View,
-  Platform,
-  Keyboard,
-  type ViewStyle,
-  type TextStyle,
-  type StyleProp,
-} from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { useForm, Controller } from 'react-hook-form';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { Input } from '../../../Input/Input';
-import { Button } from '../../../Button';
-import { Logo } from '../../../Logo/Logo';
-import TextButton from '../../../Button/TextButton';
-import { useTheme } from '../../../../theme';
-import { useKeyboard } from '../../../../hooks/useKeyboard';
-import HideKeyboard from '../../../Keyboard/HideKeyboard';
-import BackBtn from '../../../Button/BackBtn';
-import { Text } from '../../../Text';
-import type { ThemeOverride } from '../../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { getResponsiveBottomSpacing } from '../../../../utils/Spacing';
-import { BackgroundLayout } from '../../../BackgroundLayout';
-
-type FormValues = {
-  username: string;
-  email: string;
-  password: string;
-  confirmPassword: string;
-};
-
-export interface SignupProps {
-  title: string;
-  onSubmit?: (values: FormValues) => void;
-  onLogin?: () => void;
-  onTopBackBtnPress?: () => void;
-  containerStyle?: StyleProp<ViewStyle>;
-  titleStyle?: StyleProp<TextStyle>;
-  formStyle?: StyleProp<ViewStyle>;
-  inputStyle?: StyleProp<TextStyle>;
-  inputContainerStyle?: StyleProp<ViewStyle>;
-  topBackBtnStyle?: StyleProp<ViewStyle>;
-  minPasswordLength?: number;
-  backgroundImage?: {
-    source?: string | null;
-  };
-  logoUri?: string;
-  theme?: ThemeOverride;
-  loadingSubmitBtn?: boolean;
-  text?: {
-    usernameLabel?: string;
-    usernamePlaceholder?: string;
-    emailLabel?: string;
-    emailPlaceholder?: string;
-    passwordLabel?: string;
-    loadingSubmitBtnText?: string;
-    passwordPlaceholder?: string;
-    confirmPasswordLabel?: string;
-    confirmPasswordPlaceholder?: string;
-    loginPrompt?: string;
-    loginLink?: string;
-    signupButton?: string;
-  };
-  loginTextProps?: TextStyle;
-  loginLinkTextProps?: TextStyle;
-  renderLogo?: () => React.ReactNode;
-  renderSingUpHeader?: () => React.ReactNode;
-  renderLoginPrompt?: () => React.ReactNode;
-  renderSubmitButton?: (props: {
-    onPress: () => void;
-    disabled: boolean;
-    loading: boolean;
-  }) => React.ReactNode;
-  renderTopBackBtn?: (props: { onPress: () => void }) => React.ReactNode;
-}
-
-const Signup: React.FC<SignupProps> = React.memo(
-  ({
-    title = 'Sign Up',
-    onSubmit,
-    onLogin,
-    onTopBackBtnPress,
-    containerStyle,
-    titleStyle,
-    formStyle,
-    inputStyle,
-    inputContainerStyle,
-    topBackBtnStyle,
-    minPasswordLength = 6,
-    loadingSubmitBtn,
-    backgroundImage,
-    logoUri,
-    theme: overrideTheme,
-    text,
-    loginTextProps,
-    loginLinkTextProps,
-    renderLogo,
-    renderSingUpHeader,
-    renderLoginPrompt,
-    renderSubmitButton,
-    renderTopBackBtn,
-  }) => {
-    const {
-      control,
-      handleSubmit,
-      formState: { errors, isValid, touchedFields },
-      getValues,
-    } = useForm<FormValues>({
-      defaultValues: {
-        username: '',
-        email: '',
-        password: '',
-        confirmPassword: '',
-      },
-      mode: 'onChange',
-    });
-    const { theme: resolvedTheme } = useTheme(overrideTheme);
-    const { isKeyboardOpen } = useKeyboard();
-    const [isLoading, setIsLoading] = React.useState(false);
-
-    const handleFormSubmit = useCallback(
-      async (data: FormValues) => {
-        if (!onSubmit) return;
-        setIsLoading(true);
-        try {
-          await onSubmit(data);
-        } catch (error) {
-          console.error('Form submission error:', error);
-        } finally {
-          setIsLoading(false);
-        }
-      },
-      [onSubmit]
-    );
-
-    const shouldRender = useMemo(
-      () =>
-        (condition?: boolean | unknown): boolean =>
-          typeof condition === 'function' || !!condition,
-      []
-    );
-
-    // Memoize gradient split background
-    const gradientSplitBackground = useMemo(
-      () => (isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3),
-      [isKeyboardOpen]
-    );
-
-    // Memoize disabled state
-    const isDisabled = useMemo(
-      () => loadingSubmitBtn || isLoading,
-      [loadingSubmitBtn, isLoading]
-    );
-
-    return (
-      <BackgroundLayout.One
-        theme={overrideTheme}
-        backgroundImage={backgroundImage?.source}
-        gradientSplitBackground={gradientSplitBackground}
-      >
-        <SafeAreaView style={styles.safeArea}>
-          {/* Top Back Button */}
-          {shouldRender(renderTopBackBtn || onTopBackBtnPress) && (
-            <View style={styles.topBackBtnWrapper}>
-              {renderTopBackBtn ? (
-                renderTopBackBtn({
-                  onPress: onTopBackBtnPress ?? (() => {}),
-                })
-              ) : (
-                <BackBtn
-                  theme={overrideTheme}
-                  style={topBackBtnStyle}
-                  onPress={onTopBackBtnPress}
-                />
-              )}
-            </View>
-          )}
-          <View style={[styles.container, containerStyle]}>
-            <HideKeyboard
-              keyboardVerticalOffset={
-                Platform.OS === 'ios' ? scale(50) : scale(-50)
-              }
-            >
-              <View style={styles.centerContent}>
-                {/* Logo */}
-                {renderLogo ? (
-                  renderLogo()
-                ) : logoUri ? (
-                  <Logo logoUri={logoUri} width={100} height={100} />
-                ) : null}
-
-                {/* Title */}
-                {renderSingUpHeader ? (
-                  renderSingUpHeader()
-                ) : (
-                  <Text style={[styles.title, titleStyle]}>{title}</Text>
-                )}
-
-                {/* Form */}
-                <View style={[styles.form, formStyle]}>
-                  {/* Username */}
-                  <Controller
-                    control={control}
-                    name="username"
-                    rules={{
-                      required: 'Username is required',
-                      minLength: { value: 3, message: 'At least 3 characters' },
-                    }}
-                    render={({ field: { onChange, onBlur, value } }) => (
-                      <Input.One
-                        placeholder={text?.usernamePlaceholder || 'Username'}
-                        label={text?.usernameLabel || 'Username'}
-                        value={value}
-                        onChangeText={onChange}
-                        onBlur={onBlur}
-                        disabled={isDisabled}
-                        error={!!touchedFields.username && !!errors.username}
-                        errorMessage={errors.username?.message}
-                        inputStyle={inputStyle}
-                        containerStyle={inputContainerStyle}
-                        theme={overrideTheme}
-                      />
-                    )}
-                  />
-
-                  {/* Email */}
-                  <Controller
-                    control={control}
-                    name="email"
-                    rules={{
-                      required: 'Email is required',
-                      pattern: {
-                        value: /^\S+@\S+\.\S+$/,
-                        message: 'Enter a valid email address',
-                      },
-                    }}
-                    render={({ field: { onChange, onBlur, value } }) => (
-                      <Input.One
-                        placeholder={text?.emailPlaceholder || 'Email'}
-                        label={text?.emailLabel || 'Email'}
-                        value={value}
-                        onChangeText={(inputText) => {
-                          const sanitized = inputText.replace(
-                            /[^\w@.\-+]/g,
-                            ''
-                          );
-                          onChange(sanitized);
-                        }}
-                        onBlur={onBlur}
-                        disabled={isDisabled}
-                        error={!!touchedFields.email && !!errors.email}
-                        errorMessage={errors.email?.message}
-                        inputStyle={inputStyle}
-                        containerStyle={inputContainerStyle}
-                        theme={overrideTheme}
-                        textContentType="emailAddress"
-                        autoCapitalize="none"
-                        keyboardType="email-address"
-                        autoCorrect={false}
-                      />
-                    )}
-                  />
-
-                  {/* Password */}
-                  <Controller
-                    control={control}
-                    name="password"
-                    rules={{
-                      required: 'Password is required',
-                      minLength: {
-                        value: minPasswordLength,
-                        message: `Minimum ${minPasswordLength} characters`,
-                      },
-                    }}
-                    render={({ field: { onChange, onBlur, value } }) => (
-                      <Input.One
-                        placeholder={text?.passwordPlaceholder || 'Password'}
-                        label={text?.passwordLabel || 'Password'}
-                        value={value}
-                        secureTextEntry
-                        onChangeText={onChange}
-                        onBlur={onBlur}
-                        disabled={isDisabled}
-                        inputStyle={inputStyle}
-                        error={!!touchedFields.password && !!errors.password}
-                        errorMessage={errors.password?.message}
-                        containerStyle={inputContainerStyle}
-                        textContentType="none"
-                        autoCapitalize="none"
-                        spellCheck={false}
-                        autoCorrect={false}
-                        autoComplete="off"
-                        theme={overrideTheme}
-                      />
-                    )}
-                  />
-
-                  {/* Confirm Password */}
-                  <Controller
-                    control={control}
-                    name="confirmPassword"
-                    rules={{
-                      required: 'Confirm password is required',
-                      validate: (value) =>
-                        value === getValues('password') ||
-                        'Passwords do not match',
-                    }}
-                    render={({ field: { onChange, onBlur, value } }) => (
-                      <Input.One
-                        placeholder={
-                          text?.confirmPasswordPlaceholder || 'Confirm Password'
-                        }
-                        label={text?.confirmPasswordLabel || 'Confirm Password'}
-                        value={value}
-                        secureTextEntry
-                        onChangeText={onChange}
-                        onBlur={onBlur}
-                        error={
-                          !!touchedFields.confirmPassword &&
-                          !!errors.confirmPassword
-                        }
-                        disabled={isDisabled}
-                        errorMessage={errors.confirmPassword?.message}
-                        inputStyle={inputStyle}
-                        containerStyle={inputContainerStyle}
-                        theme={overrideTheme}
-                        textContentType="none"
-                        autoCapitalize="none"
-                        spellCheck={false}
-                        autoCorrect={false}
-                        autoComplete="off"
-                      />
-                    )}
-                  />
-
-                  {/* Submit Button */}
-                  {!isKeyboardOpen &&
-                    (renderSubmitButton ? (
-                      renderSubmitButton({
-                        onPress: handleSubmit(handleFormSubmit),
-                        disabled: !isValid || isDisabled,
-                        loading: isDisabled,
-                      })
-                    ) : (
-                      <Button.Primary
-                        title={text?.signupButton || 'Sign up'}
-                        disabled={!isValid || isDisabled}
-                        theme={overrideTheme}
-                        loading={isDisabled}
-                        loadingText={
-                          text?.loadingSubmitBtnText || 'Signing up...'
-                        }
-                        onPress={handleSubmit(handleFormSubmit)}
-                      />
-                    ))}
-                </View>
-              </View>
-
-              {/* Login Prompt */}
-              {!isKeyboardOpen &&
-                shouldRender(renderLoginPrompt || onLogin) &&
-                (renderLoginPrompt ? (
-                  renderLoginPrompt()
-                ) : (
-                  <View
-                    style={[
-                      styles.loginContainerWrapper,
-                      {
-                        bottom: getResponsiveBottomSpacing(35),
-                      },
-                    ]}
-                  >
-                    <View style={styles.loginContainer}>
-                      <View style={styles.loginRow}>
-                        <Text
-                          style={[styles.loginPrompt, loginTextProps]}
-                          color={resolvedTheme?.colors?.textPrimary}
-                        >
-                          {text?.loginPrompt || `Already have an account?`}
-                        </Text>
-                        <TextButton
-                          title={text?.loginLink || 'Login'}
-                          onPress={() => {
-                            Keyboard.dismiss();
-                            requestAnimationFrame(() => {
-                              onLogin?.();
-                            });
-                          }}
-                          bold
-                          underline
-                          color={resolvedTheme?.colors?.button}
-                          style={loginLinkTextProps}
-                        />
-                      </View>
-                    </View>
-                  </View>
-                ))}
-            </HideKeyboard>
-          </View>
-        </SafeAreaView>
-      </BackgroundLayout.One>
-    );
-  }
-);
-
-export default Signup;
-
-const styles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-    width: '100%',
-    paddingBottom: verticalScale(12),
-  },
-  container: {
-    flex: 1,
-    width: '100%',
-    paddingHorizontal: scale(16),
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  topBackBtnWrapper: {
-    position: 'absolute',
-    top: verticalScale(6),
-    left: 0,
-    zIndex: 10,
-  },
-  centerContent: {
-    flex: 1,
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: RFValue(21),
-    fontWeight: '700',
-    marginTop: verticalScale(5),
-    marginBottom: verticalScale(20),
-  },
-  form: {
-    width: '100%',
-    gap: verticalScale(6),
-  },
-  loginContainerWrapper: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    alignItems: 'center',
-  },
-  loginRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexWrap: 'wrap',
-  },
-  loginPrompt: {
-    textAlign: 'center',
-    marginRight: 4,
-  },
-  loginContainer: {
-    alignItems: 'center',
-  },
-});

package/src/components/Auth/One/SplashScreen/SplashScreen.tsx

@@ -1,229 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useEffect, useMemo, useCallback, useRef } from 'react';
-import { View, type ViewStyle, type StyleProp, StyleSheet } from 'react-native';
-import SplashImage from './components/SplashImage/SplashImage';
-import SplashVideo from './components/SplashVideo/SplashVideo';
-import SplashLottie from './components/SplashLottie/SplashLottie';
-
-import type { ThemeOverride } from '../../../../theme/themes';
-import { useTheme } from '../../../../theme';
-import { useSplashCache } from '../../../../hooks/useSplashCache';
-import { AppStatusBar } from '../../../common/AppStatusBar';
-import { BackgroundLayout } from '../../../BackgroundLayout';
-
-type SplashType = 'image' | 'video' | 'lottie-animation';
-
-type SplashScreenConfig = {
-  source: string;
-  type?: SplashType;
-  width: number;
-  height: number;
-  isStatic?: boolean;
-  screenTime?: number;
-  fullscreen?: boolean;
-  resizeMode?: 'contain' | 'cover' | 'stretch' | 'repeat' | 'center';
-  backgroundColor?: string;
-};
-
-type SplashScreenProps = {
-  logoUrl: string;
-  splashScreenConfig: SplashScreenConfig;
-  innerContainerStyle?: StyleProp<ViewStyle>;
-  onRedirect: () => void;
-  theme?: ThemeOverride;
-  backgroundImage?: {
-    source?: string | null;
-    onImageError?: (error: Error) => void;
-    gradientSplitBackground?: number;
-    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
-  };
-};
-
-const DEFAULT_IMAGE_TIMEOUT = 5;
-const FALLBACK_TIMEOUT = 0.5;
-
-// Stable module-level default — prevents a new object reference on every render
-// when the caller omits the backgroundImage prop.
-const DEFAULT_BG_IMAGE: NonNullable<SplashScreenProps['backgroundImage']> = {
-  gradientSplitBackground: 0.4,
-  resizeMode: 'cover',
-};
-
-export const SplashScreen: React.FC<SplashScreenProps> = React.memo(
-  ({
-    splashScreenConfig,
-    innerContainerStyle,
-    backgroundImage = DEFAULT_BG_IMAGE,
-    onRedirect,
-    theme: overrideTheme,
-  }) => {
-    const { theme } = useTheme(overrideTheme);
-    const hasRedirected = useRef(false);
-
-    const {
-      source: splashSource = '',
-      type: splashType = 'image',
-      width,
-      height,
-      isStatic = false,
-      screenTime,
-      fullscreen = false,
-      resizeMode = 'contain',
-      backgroundColor: splashBgColor,
-    } = splashScreenConfig || ({} as SplashScreenConfig);
-
-    const isImageSplash = splashType === 'image';
-    const isRemote = splashSource?.startsWith('http') ?? false;
-
-    // Direct scalar derivation (slower to useMemo this than just to compute it)
-    const resolvedBgColor =
-      splashBgColor ||
-      (splashType === 'video' || splashType === 'lottie-animation'
-        ? '#000000'
-        : theme.colors.background);
-
-    const backgroundImageUrl =
-      isImageSplash && backgroundImage?.source?.startsWith('http')
-        ? backgroundImage.source
-        : undefined;
-
-    const { data } = useSplashCache({
-      logoUrl: isRemote ? splashSource : undefined,
-      backgroundUrl: backgroundImageUrl,
-    });
-
-    const resolvedSplashUri =
-      isRemote && data.logoPath
-        ? data.logoPath.startsWith('file://')
-          ? data.logoPath
-          : `file://${data.logoPath}`
-        : splashSource || '';
-
-    const displayTimeout =
-      typeof screenTime === 'number' && screenTime > 0
-        ? screenTime
-        : isImageSplash || isStatic
-          ? DEFAULT_IMAGE_TIMEOUT
-          : 0;
-
-    const handleRedirect = useCallback(() => {
-      if (hasRedirected.current) return;
-      hasRedirected.current = true;
-      try {
-        onRedirect();
-      } catch (err) {
-        console.error('[SplashScreen] Redirect error:', err);
-      }
-    }, [onRedirect]);
-
-    useEffect(() => {
-      const ms =
-        (displayTimeout > 0 ? displayTimeout : FALLBACK_TIMEOUT) * 1000;
-      const timer = setTimeout(handleRedirect, ms);
-      return () => clearTimeout(timer);
-    }, [displayTimeout, handleRedirect]);
-
-    const videoOnEnd = displayTimeout ? undefined : handleRedirect;
-    const lottieOnAnimationFinish = displayTimeout ? undefined : handleRedirect;
-
-    // Stability for the theme object passed as a single prop
-    const appStatusBarTheme = useMemo(() => {
-      if (!overrideTheme) {
-        return {
-          dark: { background: resolvedBgColor },
-          light: { background: resolvedBgColor },
-        };
-      }
-      if ('colors' in overrideTheme) {
-        return {
-          dark: { background: resolvedBgColor },
-          light: { background: resolvedBgColor },
-        };
-      }
-      return {
-        ...overrideTheme,
-        dark: { ...overrideTheme.dark, background: resolvedBgColor },
-        light: { ...overrideTheme.light, background: resolvedBgColor },
-      };
-    }, [overrideTheme, resolvedBgColor]);
-
-    return (
-      <BackgroundLayout.One
-        backgroundImage={isImageSplash ? backgroundImage.source : undefined}
-        backgroundColor={resolvedBgColor}
-        resizeMode={
-          (backgroundImage.resizeMode ?? 'cover') as
-            'cover' | 'contain' | 'stretch' | 'repeat'
-        }
-        innerContainerStyle={innerContainerStyle}
-        onImageError={backgroundImage.onImageError}
-        theme={overrideTheme}
-        gradientSplitBackground={backgroundImage.gradientSplitBackground ?? 0.4}
-      >
-        <AppStatusBar theme={appStatusBarTheme} />
-
-        <View style={styles.container}>
-          {splashType === 'video' && resolvedSplashUri ? (
-            <SplashVideo
-              source={resolvedSplashUri}
-              width={width}
-              height={height}
-              fullscreen={fullscreen}
-              resizeMode={
-                resizeMode === 'center' || resizeMode === 'repeat'
-                  ? 'none'
-                  : resizeMode
-              }
-              backgroundColor={resolvedBgColor}
-              onEnd={videoOnEnd}
-            />
-          ) : splashType === 'lottie-animation' && resolvedSplashUri ? (
-            <SplashLottie
-              source={resolvedSplashUri}
-              width={width}
-              height={height}
-              fullscreen={fullscreen}
-              resizeMode={
-                resizeMode === 'stretch' || resizeMode === 'repeat'
-                  ? 'cover'
-                  : (resizeMode as 'cover' | 'contain' | 'center')
-              }
-              onAnimationFinish={lottieOnAnimationFinish}
-            />
-          ) : splashType === 'image' || !resolvedSplashUri ? (
-            <SplashImage
-              source={resolvedSplashUri}
-              width={width}
-              height={height}
-              fullscreen={fullscreen}
-              resizeMode={
-                resizeMode === 'center' || resizeMode === 'repeat'
-                  ? 'contain'
-                  : resizeMode
-              }
-              theme={overrideTheme}
-            />
-          ) : null}
-        </View>
-      </BackgroundLayout.One>
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-namespace SplashScreen {
-  export type Config = SplashScreenConfig;
-  export type Props = SplashScreenProps;
-}