@zezosoft/zezo-ott-react-native-ui-kit 1.1.5 → 1.1.7

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

@@ -1,108 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Pressable,
-  StyleSheet,
-  type ViewStyle,
-  Text,
-} from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { scale, verticalScale } from 'react-native-size-matters';
-import type { ThemeOverride } from '../../../../theme';
-import { useInternalTheme } from '../../../../theme/hook';
-import Logo from '../../../Logo/Logo';
-import TextButton from '../../../Button/TextButton';
-
-type Props = {
-  logoUri?: string;
-  onLogoPress?: () => void;
-  rightTitle?: string;
-  onRightPress?: () => void;
-  rightComponent?: React.ReactNode;
-  containerStyle?: ViewStyle;
-  theme?: ThemeOverride;
-  headerTitle?: string;
-};
-
-const AuthHeader: React.FC<Props> = ({
-  logoUri,
-  onLogoPress,
-  rightTitle,
-  onRightPress,
-  rightComponent,
-  containerStyle,
-  theme: overrideTheme,
-  headerTitle,
-}) => {
-  const insets = useSafeAreaInsets();
-  const { theme } = useInternalTheme(overrideTheme);
-
-  return (
-    <View
-      style={[styles.container, { paddingTop: insets.top }, containerStyle]}
-    >
-      <View style={styles.row}>
-        <View style={styles.left}>
-          {logoUri && (
-            <Pressable onPress={onLogoPress} style={styles.logoWrapper}>
-              <Logo logoUri={logoUri} resizeMode="contain" />
-            </Pressable>
-          )}
-          {headerTitle && (
-            <Text style={[styles.title, { color: theme.colors.textPrimary }]}>
-              {headerTitle}
-            </Text>
-          )}
-        </View>
-
-        <View style={styles.right}>
-          {rightComponent ? (
-            rightComponent
-          ) : rightTitle && onRightPress ? (
-            <TextButton
-              title={rightTitle}
-              onPress={onRightPress}
-              color={theme.colors.textPrimary}
-            />
-          ) : null}
-        </View>
-      </View>
-    </View>
-  );
-};
-
-export default React.memo(AuthHeader);
-
-const styles = StyleSheet.create({
-  container: {
-    marginTop: verticalScale(0),
-    width: '100%',
-    zIndex: 100,
-  },
-  row: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    paddingTop: verticalScale(8),
-  },
-  left: {
-    flex: 1,
-    justifyContent: 'flex-start',
-    alignItems: 'flex-start',
-  },
-  logoWrapper: {
-    width: scale(100),
-    height: scale(10),
-    transform: [{ scale: 0.6 }],
-  },
-  right: {
-    justifyContent: 'flex-start',
-    alignItems: 'flex-end',
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: '700',
-    marginTop: verticalScale(8),
-    textAlign: 'left',
-  },
-});

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

@@ -1,335 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 18 Jun 2025 at 10:45 AM
- **/
-import React, { useCallback, useMemo, useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  Alert,
-  type ViewStyle,
-  type TextStyle,
-} 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 { Logo } from '../../../Logo/Logo';
-import { useKeyboard } from '../../../../hooks/useKeyboard';
-import HideKeyboard from '../../../Keyboard/HideKeyboard';
-import BackBtn from '../../../Button/BackBtn';
-import { Text } from '../../../Text';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { ThemeOverride } from '../../../../theme/themes';
-import { Mail } from 'lucide-react-native';
-import BackgroundLayoutOne from '../../../BackgroundLayout/BackgroundLayoutOne';
-import { useInternalTheme } from '../../../../theme/hook';
-
-type FormValues = {
-  email: string;
-};
-
-type TextConfig = {
-  emailLabel?: string;
-  emailPlaceholder?: string;
-  loadingSubmitBtnText?: string;
-  forgetPasswordButton?: string;
-  bottomInfoText?: string;
-};
-
-type ForgetPasswordProps = {
-  title?: string;
-  subtitle?: string;
-  onSubmit?: ({ email }: { email: string }) => Promise<void> | void;
-  onTopBackBtnPress?: () => void;
-  containerStyle?: ViewStyle;
-  titleStyle?: TextStyle;
-  subtitleStyle?: TextStyle;
-  formStyle?: ViewStyle;
-  inputStyle?: TextStyle;
-  inputContainerStyle?: ViewStyle;
-  topBackBtnStyle?: ViewStyle;
-  backgroundImage?: {
-    source?: string | null;
-    onImageError?: (error: Error) => void;
-    gradientSplitBackground?: number;
-    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
-  };
-  logoUri?: string;
-  theme?: ThemeOverride;
-  loadingSubmitBtn?: boolean;
-  text?: TextConfig;
-  renderLogo?: () => React.ReactNode;
-  renderForgetPasswordHeader?: () => React.ReactNode;
-  renderSubmitButton?: (props: {
-    onPress: () => void;
-    disabled: boolean;
-    loading: boolean;
-  }) => React.ReactNode;
-  renderTopBackBtn?: (props: { onPress: () => void }) => React.ReactNode;
-  renderBottomInfoText?: () => React.ReactNode;
-};
-
-const ForgetPassword: React.FC<ForgetPasswordProps> = ({
-  title = 'Forgot Password',
-  subtitle = 'Enter your email account to reset password',
-  onSubmit,
-  onTopBackBtnPress,
-  containerStyle,
-  titleStyle,
-  subtitleStyle,
-  formStyle,
-  inputStyle,
-  inputContainerStyle,
-  topBackBtnStyle,
-  loadingSubmitBtn = false,
-  // backgroundImage,
-  logoUri,
-  theme: overrideTheme,
-  text = {
-    emailLabel: 'Email',
-    emailPlaceholder: 'Enter your email',
-    loadingSubmitBtnText: 'Processing...',
-    forgetPasswordButton: 'Send Reset Link',
-  },
-  renderLogo,
-  renderForgetPasswordHeader,
-  renderSubmitButton,
-  renderTopBackBtn,
-  renderBottomInfoText,
-}) => {
-  const {
-    control,
-    handleSubmit,
-    formState: { errors, isValid, touchedFields },
-  } = useForm<FormValues>({
-    defaultValues: { email: '' },
-    mode: 'onChange',
-  });
-
-  const { isKeyboardOpen } = useKeyboard();
-  const [isLoading, setIsLoading] = useState(false);
-  const { theme } = useInternalTheme(overrideTheme);
-  const textPrimaryColor = theme.colors.textPrimary;
-
-  const handleFormSubmit = useCallback(
-    async (data: FormValues) => {
-      if (!onSubmit) return;
-      setIsLoading(true);
-      try {
-        await onSubmit(data);
-      } catch (error) {
-        console.error('Form submission error:', error);
-        Alert.alert('Error', 'Failed to process request. Please try again.');
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [onSubmit]
-  );
-
-  const shouldRender = useMemo(
-    () => (condition?: boolean | unknown) =>
-      typeof condition === 'function' || !!condition,
-    []
-  );
-
-  const isSubmitDisabled = useMemo(
-    () => loadingSubmitBtn || isLoading,
-    [loadingSubmitBtn, isLoading]
-  );
-
-  // Memoize gradient split background
-  // const gradientSplitBackground = useMemo(
-  //   () => (isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3),
-  //   [isKeyboardOpen]
-  // );
-
-  return (
-    <BackgroundLayoutOne>
-      <View style={[styles.container, containerStyle]}>
-        {shouldRender(renderTopBackBtn || onTopBackBtnPress) && (
-          <View style={styles.topBackBtnWrapper}>
-            {renderTopBackBtn ? (
-              renderTopBackBtn({
-                onPress: onTopBackBtnPress ?? (() => {}),
-              })
-            ) : (
-              <BackBtn
-                theme={overrideTheme}
-                style={topBackBtnStyle}
-                onPress={onTopBackBtnPress}
-              />
-            )}
-          </View>
-        )}
-        <HideKeyboard>
-          <View style={styles.centerContent}>
-            {renderLogo ? (
-              renderLogo()
-            ) : logoUri ? (
-              <Logo logoUri={logoUri} />
-            ) : null}
-
-            {renderForgetPasswordHeader ? (
-              renderForgetPasswordHeader()
-            ) : (
-              <>
-                <Text
-                  style={[
-                    styles.title,
-                    { color: textPrimaryColor },
-                    titleStyle,
-                  ]}
-                >
-                  {title}
-                </Text>
-
-                {subtitle ? (
-                  <Text
-                    style={[
-                      styles.subtitle,
-                      { color: textPrimaryColor },
-                      subtitleStyle,
-                    ]}
-                  >
-                    {subtitle}
-                  </Text>
-                ) : null}
-              </>
-            )}
-
-            {/* Form */}
-            <View style={[styles.form, formStyle]} testID="form">
-              <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 || 'Enter your email'}
-                    label={text.emailLabel || 'Email'}
-                    value={value}
-                    onChangeText={(inputText) => {
-                      const sanitized = inputText.replace(/[^\w@.\-+]/g, '');
-                      onChange(sanitized);
-                    }}
-                    onBlur={onBlur}
-                    disabled={isSubmitDisabled}
-                    error={!!touchedFields.email && !!errors.email}
-                    errorMessage={errors.email?.message}
-                    inputStyle={inputStyle}
-                    containerStyle={inputContainerStyle}
-                    theme={overrideTheme}
-                    textContentType="emailAddress"
-                    autoCapitalize="none"
-                    keyboardType="email-address"
-                    autoCorrect={false}
-                    testID="email-input"
-                    leftIcon={<Mail size={25} />}
-                  />
-                )}
-              />
-
-              {renderSubmitButton ? (
-                renderSubmitButton({
-                  onPress: handleSubmit(handleFormSubmit),
-                  disabled: isSubmitDisabled || !isValid,
-                  loading: loadingSubmitBtn || isLoading,
-                })
-              ) : (
-                <Button.Primary
-                  title={text.forgetPasswordButton || 'Continue'}
-                  disabled={isSubmitDisabled || !isValid}
-                  theme={overrideTheme}
-                  loading={loadingSubmitBtn || isLoading}
-                  loadingText={text.loadingSubmitBtnText || 'Please wait...'}
-                  onPress={handleSubmit(handleFormSubmit)}
-                />
-              )}
-            </View>
-
-            {/* Bottom Info Text */}
-            {!isKeyboardOpen && (
-              <>
-                {renderBottomInfoText ? (
-                  renderBottomInfoText()
-                ) : text.bottomInfoText ? (
-                  <Text
-                    style={[
-                      styles.bottomInfo,
-                      { color: theme.colors.textSecondary },
-                    ]}
-                    accessibilityRole="text"
-                    testID="bottom-info-text"
-                  >
-                    {text.bottomInfoText}
-                  </Text>
-                ) : null}
-              </>
-            )}
-          </View>
-        </HideKeyboard>
-      </View>
-    </BackgroundLayoutOne>
-  );
-};
-
-export default React.memo(ForgetPassword);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: '100%',
-    paddingHorizontal: scale(20),
-    paddingTop: verticalScale(24),
-    paddingBottom: verticalScale(32),
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  topBackBtnWrapper: {
-    position: 'absolute',
-    top: verticalScale(6),
-    left: 0,
-    zIndex: 10,
-  },
-  centerContent: {
-    flex: 1,
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: verticalScale(6),
-    marginBottom: verticalScale(100),
-  },
-  title: {
-    fontSize: RFValue(23),
-    fontWeight: '700',
-    textAlign: 'center',
-    marginTop: verticalScale(12),
-  },
-  subtitle: {
-    fontSize: RFValue(13),
-    fontWeight: '400',
-    textAlign: 'center',
-    marginBottom: verticalScale(80),
-  },
-
-  form: {
-    width: '100%',
-    gap: verticalScale(14),
-    marginTop: verticalScale(8),
-  },
-  bottomInfo: {
-    marginTop: verticalScale(15),
-    fontSize: RFValue(10),
-    fontWeight: '500',
-    textAlign: 'center',
-    opacity: 0.7,
-  },
-});

package/src/components/Auth/Two/Login/AuthLoginShell.tsx

@@ -1,173 +0,0 @@
-import React from 'react';
-import { View, StyleSheet, Pressable } from 'react-native';
-import { verticalScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { Text } from '../../../Text';
-import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
-import type { ThemeOverride } from '../../../../theme/themes';
-import AuthHeader from '../AuthHeader/AuthHeader';
-
-type Props = {
-  activeTab: 'phone' | 'email';
-  onPhonePress?: () => void;
-  onEmailPress?: () => void;
-  onSignup?: () => void;
-  logoUri?: string;
-  title?: string;
-  description?: string;
-  bottomTitle?: string;
-  children: React.ReactNode;
-  theme?: ThemeOverride;
-};
-
-const AuthLoginShell: React.FC<Props> = ({
-  activeTab,
-  onPhonePress,
-  onEmailPress,
-  onSignup,
-  logoUri,
-  title,
-  description,
-  bottomTitle,
-  children,
-  theme: overrideTheme,
-}) => {
-  const { theme } = useInternalTheme(overrideTheme);
-
-  return (
-    <View style={styles.wrapper}>
-      {/* ✅ Reusable Auth Header */}
-      <AuthHeader
-        logoUri={logoUri}
-        rightTitle="Sign Up"
-        onRightPress={onSignup}
-        theme={overrideTheme}
-      />
-
-      {/* ===== Title ===== */}
-      <View style={styles.titleBlock}>
-        {title && (
-          <Text style={[styles.title, { color: theme.colors.textPrimary }]}>
-            {title}
-          </Text>
-        )}
-        {description && (
-          <Text style={[styles.subtitle, { color: theme.colors.textPrimary }]}>
-            {description}
-          </Text>
-        )}
-      </View>
-
-      {/* ===== Tabs ===== */}
-      <View style={styles.tabRow}>
-        <Pressable style={styles.tab} onPress={onPhonePress}>
-          <Text
-            style={[
-              styles.tabText,
-              {
-                color: theme.colors.textPrimary,
-                opacity: activeTab === 'phone' ? 1 : 0.6,
-              },
-            ]}
-          >
-            Phone number
-          </Text>
-
-          {activeTab === 'phone' && (
-            <View
-              style={[
-                styles.activeLine,
-                { backgroundColor: theme.colors.button },
-              ]}
-            />
-          )}
-        </Pressable>
-
-        <Pressable style={styles.tab} onPress={onEmailPress}>
-          <Text
-            style={[
-              styles.tabText,
-              {
-                color: theme.colors.textPrimary,
-                opacity: activeTab === 'email' ? 1 : 0.6,
-              },
-            ]}
-          >
-            Email address
-          </Text>
-
-          {activeTab === 'email' && (
-            <View
-              style={[
-                styles.activeLine,
-                { backgroundColor: theme.colors.button },
-              ]}
-            />
-          )}
-        </Pressable>
-      </View>
-
-      {/* ===== Content ===== */}
-      <View style={styles.center}>{children}</View>
-
-      {/* ===== Bottom Text ===== */}
-      {bottomTitle && (
-        <Text style={[styles.disclaimer, { color: theme.colors.textPrimary }]}>
-          {bottomTitle}
-        </Text>
-      )}
-    </View>
-  );
-};
-
-export default AuthLoginShell;
-
-const styles = StyleSheet.create({
-  wrapper: {
-    flex: 1,
-    width: '100%',
-    alignItems: 'center',
-  },
-  titleBlock: {
-    alignItems: 'center',
-    marginBottom: verticalScale(28),
-    marginTop: verticalScale(110), // ⬅ header ke liye thoda space
-  },
-  title: {
-    fontSize: RFValue(22),
-    fontWeight: '700',
-    marginBottom: verticalScale(6),
-  },
-  subtitle: {
-    fontSize: RFValue(12),
-    textAlign: 'center',
-  },
-  tabRow: {
-    flexDirection: 'row',
-    width: '100%',
-    marginBottom: verticalScale(20),
-  },
-  tab: {
-    flex: 1,
-    alignItems: 'center',
-    marginTop: verticalScale(30),
-  },
-  tabText: {
-    fontSize: RFValue(14.5),
-    fontWeight: '600',
-  },
-  activeLine: {
-    marginTop: verticalScale(6),
-    height: 2,
-    width: '70%',
-  },
-  center: {
-    width: '100%',
-    flexGrow: 1,
-  },
-  disclaimer: {
-    marginBottom: verticalScale(45),
-    fontSize: RFValue(12.5),
-    textAlign: 'center',
-  },
-});