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

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

@@ -1,439 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useCallback, useMemo } from 'react';
-import {
-  StyleSheet,
-  View,
-  Keyboard,
-  ScrollView,
-  type ViewStyle,
-  type TextStyle,
-  type StyleProp,
-  Platform,
-} from 'react-native';
-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 TextButton from '../../../Button/TextButton';
-import { useTheme } from '../../../../theme';
-import { useKeyboard } from '../../../../hooks/useKeyboard';
-import HideKeyboard from '../../../Keyboard/HideKeyboard';
-import { Text } from '../../../Text';
-import type { ThemeOverride } from '../../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { Lock, Mail, UserIcon } from 'lucide-react-native';
-import AuthHeader from '../AuthHeader/AuthHeader';
-import { BackgroundLayout } from '../../../BackgroundLayout';
-
-type FormValues = {
-  username: string;
-  email: string;
-  password: string;
-  confirmPassword: string;
-};
-
-export interface SignupProps {
-  title: string;
-  subTitle?: string;
-  onSubmit?: (values: FormValues) => void;
-  onLogin?: () => void;
-  containerStyle?: StyleProp<ViewStyle>;
-  titleStyle?: StyleProp<TextStyle>;
-  subtitleStyle?: StyleProp<TextStyle>;
-  formStyle?: StyleProp<ViewStyle>;
-  inputStyle?: StyleProp<TextStyle>;
-  inputContainerStyle?: StyleProp<ViewStyle>;
-  minPasswordLength?: number;
-  logoUri?: string;
-  theme?: ThemeOverride;
-  loadingSubmitBtn?: boolean;
-  text?: {
-    usernamePlaceholder?: string;
-    emailPlaceholder?: string;
-    passwordPlaceholder?: string;
-    loadingSubmitBtnText?: string;
-    confirmPasswordPlaceholder?: string;
-    loginPrompt?: string;
-    loginLink?: string;
-    signupButton?: string;
-  };
-  loginTextProps?: TextStyle;
-  loginLinkTextProps?: TextStyle;
-  renderSingUpHeader?: () => React.ReactNode;
-  renderLoginPrompt?: () => React.ReactNode;
-  renderSubmitButton?: (props: {
-    onPress: () => void;
-    disabled: boolean;
-    loading: boolean;
-  }) => React.ReactNode;
-}
-
-const Signup: React.FC<SignupProps> = React.memo(
-  ({
-    title = 'Sign Up',
-    subTitle = 'Enter your details to register.',
-    onSubmit,
-    onLogin,
-    containerStyle,
-    titleStyle,
-    subtitleStyle,
-    formStyle,
-    inputStyle,
-    inputContainerStyle,
-    minPasswordLength = 6,
-    loadingSubmitBtn,
-    logoUri,
-    theme: overrideTheme,
-    text,
-    loginTextProps,
-    loginLinkTextProps,
-    renderSingUpHeader,
-    renderLoginPrompt,
-    renderSubmitButton,
-  }) => {
-    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 isDisabled = useMemo(
-      () => loadingSubmitBtn || isLoading,
-      [loadingSubmitBtn, isLoading]
-    );
-
-    return (
-      <BackgroundLayout.Two>
-        <View style={[styles.container, containerStyle]}>
-          <AuthHeader
-            logoUri={logoUri}
-            onLogoPress={() => {}}
-            rightTitle="Sign In"
-            onRightPress={() => {
-              Keyboard.dismiss();
-              requestAnimationFrame(() => onLogin?.());
-            }}
-            theme={overrideTheme}
-          />
-          <HideKeyboard keyboardVerticalOffset={scale(-50)}>
-            <ScrollView
-              style={styles.scrollView}
-              keyboardShouldPersistTaps="handled"
-              showsVerticalScrollIndicator={false}
-            >
-              <View
-                style={[
-                  styles.mainContent,
-                  isKeyboardOpen && styles.mainContentKeyboardOpen,
-                ]}
-              >
-                {renderSingUpHeader ? (
-                  renderSingUpHeader()
-                ) : (
-                  <View
-                    style={[
-                      styles.headerContainer,
-                      isKeyboardOpen && styles.headerContainerKeyboardOpen,
-                    ]}
-                  >
-                    <Text
-                      style={[
-                        styles.title,
-                        titleStyle,
-                        { color: resolvedTheme?.colors?.textPrimary },
-                      ]}
-                    >
-                      {title}
-                    </Text>
-                    <Text
-                      style={[
-                        styles.subtitle,
-                        subtitleStyle,
-                        { color: resolvedTheme?.colors?.textPrimary },
-                      ]}
-                    >
-                      {subTitle}
-                    </Text>
-                  </View>
-                )}
-
-                <View style={[styles.formContainer, formStyle]}>
-                  <Controller
-                    control={control}
-                    name="username"
-                    rules={{
-                      required: 'Username is required',
-                      minLength: { value: 3, message: 'At least 3 characters' },
-                    }}
-                    render={({ field: { onChange, onBlur, value } }) => (
-                      <Input.Three
-                        placeholder={text?.usernamePlaceholder ?? 'Name'}
-                        value={value}
-                        onChangeText={onChange}
-                        onBlur={onBlur}
-                        disabled={isDisabled}
-                        error={!!touchedFields.username && !!errors.username}
-                        errorMessage={errors.username?.message}
-                        inputStyle={inputStyle}
-                        containerStyle={inputContainerStyle}
-                        theme={overrideTheme}
-                        leftIcon={<UserIcon size={22} />}
-                      />
-                    )}
-                  />
-
-                  <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.Three
-                        placeholder={text?.emailPlaceholder ?? '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}
-                        leftIcon={<Mail size={22} />}
-                      />
-                    )}
-                  />
-
-                  <Controller
-                    control={control}
-                    name="password"
-                    rules={{
-                      required: 'Password is required',
-                      minLength: {
-                        value: minPasswordLength,
-                        message: `Minimum ${minPasswordLength} characters`,
-                      },
-                    }}
-                    render={({ field: { onChange, onBlur, value } }) => (
-                      <Input.Three
-                        placeholder={text?.passwordPlaceholder ?? '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}
-                        leftIcon={<Lock size={22} />}
-                      />
-                    )}
-                  />
-
-                  <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.Three
-                        placeholder={
-                          text?.confirmPasswordPlaceholder ?? '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"
-                        leftIcon={<Lock size={22} />}
-                      />
-                    )}
-                  />
-
-                  {!isKeyboardOpen &&
-                    (renderSubmitButton ? (
-                      renderSubmitButton({
-                        onPress: handleSubmit(handleFormSubmit),
-                        disabled: !isValid || isDisabled,
-                        loading: isDisabled,
-                      })
-                    ) : (
-                      <Button.Primary
-                        title={text?.signupButton || 'Sign up'}
-                        loadingText={
-                          text?.loadingSubmitBtnText || 'Signing up...'
-                        }
-                        disabled={!isValid || isDisabled}
-                        loading={isDisabled}
-                        theme={overrideTheme}
-                        onPress={handleSubmit(handleFormSubmit)}
-                      />
-                    ))}
-                </View>
-              </View>
-            </ScrollView>
-          </HideKeyboard>
-
-          {(renderLoginPrompt || onLogin) && (
-            <View style={styles.footerContainer}>
-              {renderLoginPrompt ? (
-                renderLoginPrompt()
-              ) : (
-                <View style={styles.loginPromptRow}>
-                  <Text style={[styles.loginPromptText, loginTextProps]}>
-                    {text?.loginPrompt || 'Already have an account?'}
-                  </Text>
-                  <TextButton
-                    title={text?.loginLink || 'Login'}
-                    bold
-                    style={loginLinkTextProps}
-                    onPress={() => {
-                      Keyboard.dismiss();
-                      requestAnimationFrame(() => onLogin?.());
-                    }}
-                  />
-                </View>
-              )}
-            </View>
-          )}
-        </View>
-      </BackgroundLayout.Two>
-    );
-  }
-);
-
-export default Signup;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: '100%',
-    position: 'relative',
-    paddingHorizontal: scale(16),
-  },
-  scrollView: {
-    flex: 1,
-    width: '100%',
-  },
-
-  mainContent: {
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    paddingTop: Platform.OS === 'ios' ? verticalScale(70) : verticalScale(50),
-  },
-  mainContentKeyboardOpen: {
-    paddingTop: verticalScale(25),
-  },
-  headerContainer: {
-    width: '100%',
-    alignItems: 'center',
-    marginBottom: verticalScale(70),
-  },
-  headerContainerKeyboardOpen: {
-    marginBottom: verticalScale(12),
-  },
-  title: {
-    fontSize: RFValue(21),
-    fontWeight: '700',
-    marginTop: verticalScale(4),
-    marginBottom: verticalScale(10),
-  },
-  subtitle: {
-    fontSize: RFValue(13),
-    opacity: 0.7,
-    textAlign: 'center',
-  },
-  formContainer: {
-    width: '100%',
-    gap: verticalScale(6),
-  },
-  footerContainer: {
-    position: 'absolute',
-    bottom: verticalScale(40),
-    left: 0,
-    right: 0,
-    alignItems: 'center',
-    zIndex: 999,
-  },
-  loginPromptRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexWrap: 'wrap',
-  },
-  loginPromptText: {
-    textAlign: 'center',
-    marginRight: 4,
-  },
-});

package/src/components/Auth/Two/index.ts

@@ -1,20 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import AuthHeader from './AuthHeader/AuthHeader';
-import ForgotPassword from './ForgotPassword/ForgotPassword';
-import EmailOrPhoneLogin from './Login/EmailOrPhoneLogin';
-import OTP from './OTP/OTP';
-import SignUp from './SignUp/SignUp';
-
-const AuthTwo = {
-  EmailOrPhoneLogin,
-  AuthHeader,
-  SignUp,
-  OTP,
-  ForgotPassword,
-};
-
-export default AuthTwo;

package/src/components/Auth/index.ts

@@ -1,16 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import AuthOne from './One';
-import AuthTwo from './Two';
-import AuthProvider from './AuthProvider/AuthProvider';
-
-export const Auth = {
-  One: AuthOne,
-  Two: AuthTwo,
-  AuthProvider: AuthProvider,
-};
-
-export { AuthOne, AuthTwo, AuthProvider };

package/src/components/BackgroundLayout/One/One.tsx

@@ -1,184 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useMemo, useCallback, memo } from 'react';
-import {
-  View,
-  StyleSheet,
-  ImageBackground,
-  type ViewStyle,
-  type ImageStyle,
-  type StyleProp,
-} from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import type { ThemeOverride } from '../../../theme';
-import { useTheme } from '../../../theme';
-import { useSplashCache } from '../../../hooks';
-import { AppStatusBar } from '../../common/AppStatusBar';
-
-type BackgroundLayoutOneProps = {
-  children: React.ReactNode;
-  backgroundImage?: string | null;
-  backgroundColor?: string | null;
-  gradientSplitBackground?: number;
-  resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
-  innerContainerStyle?: StyleProp<ViewStyle>;
-  theme?: ThemeOverride;
-  onImageError?: (error: Error) => void;
-};
-
-const BackgroundLayoutOneComponent: React.FC<BackgroundLayoutOneProps> = (
-  props
-) => {
-  const {
-    children,
-    backgroundImage: backgroundImageUri,
-    backgroundColor: bgColor,
-    gradientSplitBackground = 0.4,
-    resizeMode = 'cover',
-    innerContainerStyle,
-    onImageError,
-    theme: themeOverride,
-  } = props;
-
-  const { theme } = useTheme(themeOverride);
-  const {
-    data: { backgroundPath: localPathBackground },
-  } = useSplashCache({
-    backgroundUrl: backgroundImageUri || undefined,
-  });
-
-  const resolvedImageUri = useMemo(() => {
-    if (!backgroundImageUri) return undefined;
-    const rawPath = localPathBackground || backgroundImageUri;
-    // Already a full URL or file:// path — use as-is
-    if (/^(https?|file):\/\//.test(rawPath)) return rawPath;
-    // Bare absolute path from RNFS cache — add file:// scheme
-    if (rawPath.startsWith('/')) return `file://${rawPath}`;
-    return rawPath;
-  }, [backgroundImageUri, localPathBackground]);
-
-  const backgroundColor = useMemo(
-    () => bgColor ?? theme.colors.background,
-    [bgColor, theme.colors.background]
-  );
-
-  const containerStyle = useMemo(
-    () => [styles.container, { backgroundColor }],
-    [backgroundColor]
-  );
-
-  const handleImageLoadError = useCallback(
-    (e: any) => {
-      console.warn(
-        '[BackgroundLayoutOne] Image load failed:',
-        e?.nativeEvent?.error
-      );
-      onImageError?.(new Error('Background image failed to load'));
-    },
-    [onImageError]
-  );
-
-  const gradientLocations = useMemo(() => {
-    const gradientColors = theme.colors.backgroundLayoutGradient;
-    const count = gradientColors?.length ?? 0;
-    const baseSteps = [0, 0.3, 0.4, 1, 1];
-    const locations = [
-      0,
-      ...baseSteps.map((step) => Math.min(1, gradientSplitBackground + step)),
-    ];
-
-    if (locations.length > count) {
-      return locations.slice(0, count);
-    }
-    if (locations.length < count) {
-      const last = locations[locations.length - 1] ?? 1;
-      return [...locations, ...Array(count - locations.length).fill(last)];
-    }
-
-    return locations;
-  }, [theme.colors.backgroundLayoutGradient, gradientSplitBackground]);
-
-  const imageContainerStyle = useMemo(
-    () => [styles.imageContainer, { backgroundColor: theme.colors.background }],
-    [theme.colors.background]
-  );
-
-  const imageStyle = useMemo(
-    () => [styles.imageStyle, { backgroundColor: theme.colors.background }],
-    [theme.colors.background]
-  );
-
-  const innerContainerStyleMemo = useMemo(
-    () => [
-      styles.innerContainer,
-      innerContainerStyle,
-      bgColor ? { backgroundColor: bgColor } : null,
-    ],
-    [innerContainerStyle, bgColor]
-  );
-
-  const showBackground = Boolean(backgroundImageUri && resolvedImageUri);
-
-  if (showBackground) {
-    return (
-      <View style={containerStyle}>
-        <AppStatusBar theme={themeOverride} transparent />
-        <ImageBackground
-          source={{ uri: resolvedImageUri }}
-          resizeMode={resizeMode}
-          style={imageContainerStyle}
-          imageStyle={imageStyle}
-          onError={handleImageLoadError}
-        >
-          <LinearGradient
-            colors={theme.colors.backgroundLayoutGradient}
-            locations={gradientLocations}
-            start={{ x: 0.5, y: 0 }}
-            end={{ x: 0.5, y: 1 }}
-            style={styles.gradientOverlay}
-          />
-          <View style={innerContainerStyleMemo}>{children}</View>
-        </ImageBackground>
-      </View>
-    );
-  }
-
-  return (
-    <View style={containerStyle}>
-      <View style={innerContainerStyleMemo}>{children}</View>
-    </View>
-  );
-};
-
-export const BackgroundLayoutOne = memo(BackgroundLayoutOneComponent);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: '100%',
-    height: '100%',
-  },
-  imageContainer: {
-    flex: 1,
-    width: '100%',
-    height: '100%',
-  },
-  imageStyle: {
-    height: '60%',
-    width: '100%',
-    alignSelf: 'flex-start',
-  } as ImageStyle,
-  gradientOverlay: {
-    ...StyleSheet.absoluteFill,
-    pointerEvents: 'none',
-  },
-  innerContainer: {
-    flex: 1,
-    width: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});