@zezosoft/zezo-ott-react-native-ui-kit 0.1.0 → 1.0.1

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

@@ -0,0 +1,273 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 18 Jun 2025 at 10:45 AM
+ **/
+import React, { useCallback, useMemo, useState } from 'react';
+import { StyleSheet, View, Platform, 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 { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
+import { Logo } from '../../Logo/Logo';
+import { useTheme } from '../../../theme/hook/useTheme';
+import { useKeyboard } from '../../../hooks/useKeyboard';
+import HideKeyboard from '../../Keyboard/HideKeyboard';
+import BackBtn from '../../Button/BackBtn';
+import { Text } from '../../Text';
+import type { AppTheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+type FormValues = {
+  email: string;
+};
+
+type TextConfig = {
+  emailLabel?: string;
+  emailPlaceholder?: string;
+  loadingSubmitBtnText?: string;
+  forgetPasswordButton?: string;
+  bottomInfoText?: string;
+};
+
+type ForgetPasswordProps = {
+  title?: string;
+  onSubmit?: ({ email }: { email: string }) => Promise<void> | void;
+  onTopBackBtnPress?: () => void;
+  containerStyle?: ViewStyle;
+  titleStyle?: 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?: AppTheme;
+  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',
+  onSubmit,
+  onTopBackBtnPress,
+  containerStyle,
+  titleStyle,
+  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 { theme: resolvedTheme } = useTheme(overrideTheme);
+  const { isKeyboardOpen } = useKeyboard();
+  const [isLoading, setIsLoading] = 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);
+        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 = loadingSubmitBtn || isLoading;
+
+  return (
+    <BackgroundLayout
+      backgroundImage={backgroundImage?.source}
+      theme={resolvedTheme}
+      gradientSplitBackground={isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3}
+    >
+      <View style={[styles.container, containerStyle]}>
+        {/* Top Back Button */}
+        {shouldRender(renderTopBackBtn || onTopBackBtnPress) && (
+          <View style={styles.topBackBtnWrapper}>
+            {renderTopBackBtn ? (
+              renderTopBackBtn({
+                onPress: onTopBackBtnPress ?? (() => {})
+              })
+            ) : (
+              <BackBtn theme={resolvedTheme} style={topBackBtnStyle} onPress={onTopBackBtnPress} />
+            )}
+          </View>
+        )}
+        <HideKeyboard>
+          <View style={styles.centerContent}>
+            {/* Logo */}
+            {renderLogo ? renderLogo() : logoUri ? <Logo logoUri={logoUri} /> : null}
+
+            {/* Title */}
+            {renderForgetPasswordHeader ? (
+              renderForgetPasswordHeader()
+            ) : (
+              <Text style={[styles.title, titleStyle]} accessibilityRole="header" testID="title">
+                {title}
+              </Text>
+            )}
+
+            {/* 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.One
+                    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={resolvedTheme}
+                    textContentType="emailAddress"
+                    autoCapitalize="none"
+                    keyboardType="email-address"
+                    autoCorrect={false}
+                    testID="email-input"
+                  />
+                )}
+              />
+
+              {renderSubmitButton ? (
+                renderSubmitButton({
+                  onPress: handleSubmit(handleFormSubmit),
+                  disabled: isSubmitDisabled || !isValid,
+                  loading: loadingSubmitBtn || isLoading
+                })
+              ) : (
+                <Button.Primary
+                  title={text.forgetPasswordButton || 'Continue'}
+                  disabled={isSubmitDisabled || !isValid}
+                  theme={resolvedTheme}
+                  loading={loadingSubmitBtn || isLoading}
+                  loadingText={text.loadingSubmitBtnText || 'Please wait...'}
+                  onPress={handleSubmit(handleFormSubmit)}
+                />
+              )}
+            </View>
+
+            {/* Bottom Info Text */}
+            {!isKeyboardOpen && (
+              <>
+                {renderBottomInfoText ? (
+                  renderBottomInfoText()
+                ) : text.bottomInfoText ? (
+                  <Text style={styles.bottomInfo} accessibilityRole="text" testID="bottom-info-text">
+                    {text.bottomInfoText}
+                  </Text>
+                ) : null}
+              </>
+            )}
+          </View>
+        </HideKeyboard>
+      </View>
+    </BackgroundLayout>
+  );
+};
+
+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(16)
+  },
+  title: {
+    fontSize: RFValue(23),
+    fontWeight: '700',
+    marginTop: verticalScale(12),
+    marginBottom: verticalScale(20),
+    textAlign: 'center'
+  },
+  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/Login/LoginWithEmail.tsx

@@ -0,0 +1,376 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 16 Jun 2025 at 03:05 PM
+ */
+import React, { useCallback } from 'react';
+import { StyleSheet, View, Keyboard, 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 { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
+import { Logo } from '../../Logo/Logo';
+import TextButton from '../../Button/TextButton';
+import { useTheme } from '../../../theme/hook/useTheme';
+import HideKeyboard from '../../Keyboard/HideKeyboard';
+import { useKeyboard } from '../../../hooks/useKeyboard';
+import BackBtn from '../../Button/BackBtn';
+import { Text } from '../../Text';
+import type { AppTheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+type FormValues = {
+  email: string;
+  password: string;
+};
+
+type LoginWithEmailProps = {
+  title: string;
+  onSubmit?: (values: FormValues) => void;
+  onSignup?: () => void;
+  onForgotPassword?: () => void;
+  onSwitchToPhoneLogin?: () => void;
+  onTopBackBtnPress?: () => void;
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  formStyle?: ViewStyle;
+  inputStyle?: TextStyle;
+  topBackBtnStyle?: ViewStyle;
+  inputContainerStyle?: ViewStyle;
+  minPasswordLength?: number;
+  backgroundImage?: {
+    source?: string | null;
+    onImageError?: (error: Error) => void;
+    gradientSplitBackground?: number;
+    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
+  };
+  logoUri?: string;
+  loadingSubmitBtn?: boolean;
+
+  theme?: AppTheme;
+  text?: {
+    emailLabel?: string;
+    emailPlaceholder?: string;
+    passwordLabel?: string;
+    passwordPlaceholder?: string;
+    forgotPassword?: string;
+    loadingSubmitBtnText?: string;
+    loginButton?: string;
+    signupPrompt?: string;
+    signupLink?: string;
+    switchToPhoneLogin?: string;
+  };
+  signupTextProps?: TextStyle;
+  signupLinkTextProps?: TextStyle;
+  renderLogo?: () => React.ReactNode;
+  renderForgotPassword?: () => React.ReactNode;
+  renderEmailHeader?: () => React.ReactNode;
+  renderSignupPrompt?: (props: { onPress: () => void }) => React.ReactNode;
+  renderSubmitButton?: (props: { onPress: () => void; disabled: boolean; loading: boolean }) => React.ReactNode;
+  renderSwitchToPhoneLogin?: (props: { onPress: () => void }) => React.ReactNode;
+  renderTopBackBtn?: (props: { onPress: () => void }) => React.ReactNode;
+};
+
+const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
+  title = 'Login',
+  onSubmit,
+  onSignup,
+  onForgotPassword,
+  onSwitchToPhoneLogin,
+  onTopBackBtnPress,
+  containerStyle,
+  titleStyle,
+  formStyle,
+  inputStyle,
+  inputContainerStyle,
+  loadingSubmitBtn,
+  topBackBtnStyle,
+  minPasswordLength = 6,
+  backgroundImage,
+  logoUri,
+  theme: overrideTheme,
+  text,
+  signupTextProps,
+  signupLinkTextProps,
+  renderLogo,
+  renderForgotPassword,
+  renderEmailHeader,
+  renderSignupPrompt,
+  renderSubmitButton,
+  renderSwitchToPhoneLogin,
+  renderTopBackBtn
+}) => {
+  const { isKeyboardOpen } = useKeyboard();
+  const { theme: resolvedTheme } = useTheme(overrideTheme);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isValid, touchedFields }
+  } = useForm<FormValues>({
+    defaultValues: { email: '', password: '' },
+    mode: 'onChange'
+  });
+
+  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 handleKeyboardDismiss = (callback?: () => void) => {
+    Keyboard.dismiss();
+    requestAnimationFrame(() => callback?.());
+  };
+
+  const shouldRender = (condition?: boolean | unknown): boolean => typeof condition === 'function' || !!condition;
+
+  return (
+    <BackgroundLayout
+      backgroundImage={backgroundImage?.source}
+      theme={resolvedTheme}
+      gradientSplitBackground={isKeyboardOpen ? 0.31 : 0.35}
+    >
+      <View style={[styles.container, containerStyle]}>
+        {shouldRender(renderTopBackBtn || onTopBackBtnPress) && (
+          <View style={styles.topBackBtnWrapper}>
+            {renderTopBackBtn ? (
+              renderTopBackBtn({
+                onPress: onTopBackBtnPress ?? (() => {})
+              })
+            ) : (
+              <BackBtn theme={resolvedTheme} style={topBackBtnStyle} onPress={onTopBackBtnPress} />
+            )}
+          </View>
+        )}
+        <HideKeyboard>
+          <View style={styles.centerContent}>
+            {renderLogo ? renderLogo() : logoUri ? <Logo logoUri={logoUri} /> : null}
+
+            {renderEmailHeader ? renderEmailHeader() : <Text style={[styles.title, titleStyle]}>{title}</Text>}
+
+            <View style={[styles.form, formStyle]}>
+              <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
+                    label={text?.emailLabel || 'Email'}
+                    placeholder={text?.emailPlaceholder || 'Email'}
+                    value={value}
+                    onChangeText={(inputText) => {
+                      const sanitized = inputText.replace(/[^\w@.\-+]/g, '');
+                      onChange(sanitized);
+                    }}
+                    onBlur={onBlur}
+                    disabled={loadingSubmitBtn || isLoading}
+                    error={!!touchedFields.email && !!errors.email}
+                    errorMessage={errors.email?.message}
+                    inputStyle={inputStyle}
+                    containerStyle={inputContainerStyle}
+                    theme={resolvedTheme}
+                    textContentType="emailAddress"
+                    autoCapitalize="none"
+                    keyboardType="email-address"
+                    autoCorrect={false}
+                  />
+                )}
+              />
+
+              <Controller
+                control={control}
+                name="password"
+                rules={{
+                  required: 'Password is required',
+                  minLength: {
+                    value: minPasswordLength,
+                    message: `Password must be at least ${minPasswordLength} characters`
+                  }
+                }}
+                render={({ field: { onChange, onBlur, value } }) => (
+                  <>
+                    <Input.One
+                      label={text?.passwordLabel || 'Password'}
+                      placeholder={text?.passwordPlaceholder || 'Password'}
+                      value={value}
+                      secureTextEntry
+                      onChangeText={(inputText) => {
+                        const sanitized = inputText.replace(/[^\w@.\-+]/g, '');
+                        onChange(sanitized);
+                      }}
+                      onBlur={onBlur}
+                      disabled={loadingSubmitBtn || isLoading}
+                      error={!!touchedFields.password && !!errors.password}
+                      errorMessage={errors.password?.message}
+                      inputStyle={inputStyle}
+                      containerStyle={inputContainerStyle}
+                      textContentType="none"
+                      autoCapitalize="none"
+                      spellCheck={false}
+                      autoCorrect={false}
+                      autoComplete="off"
+                      theme={resolvedTheme}
+                    />
+                    {!isKeyboardOpen &&
+                      shouldRender(renderForgotPassword || onForgotPassword) &&
+                      (renderForgotPassword ? (
+                        renderForgotPassword()
+                      ) : (
+                        <TextButton
+                          title={text?.forgotPassword || 'Forgot password?'}
+                          onPress={() => handleKeyboardDismiss(onForgotPassword)}
+                          color={resolvedTheme.colors.button}
+                          align="right"
+                          style={styles.forgotPasswordText}
+                        />
+                      ))}
+                  </>
+                )}
+              />
+
+              {!isKeyboardOpen &&
+                (renderSubmitButton ? (
+                  renderSubmitButton({
+                    onPress: handleSubmit(handleFormSubmit),
+                    disabled: loadingSubmitBtn || !isValid || isLoading,
+                    loading: loadingSubmitBtn || isLoading
+                  })
+                ) : (
+                  <Button.Primary
+                    title={text?.loginButton || 'Login'}
+                    onPress={handleSubmit(handleFormSubmit)}
+                    disabled={loadingSubmitBtn || !isValid || isLoading}
+                    theme={resolvedTheme}
+                    titleStyle={{
+                      fontSize: RFValue(14)
+                    }}
+                    loadingText={text?.loadingSubmitBtnText || 'Logging in...'}
+                    loading={loadingSubmitBtn || isLoading}
+                  />
+                ))}
+            </View>
+
+            {!isKeyboardOpen &&
+              shouldRender(onSwitchToPhoneLogin || renderSwitchToPhoneLogin) &&
+              (renderSwitchToPhoneLogin ? (
+                renderSwitchToPhoneLogin({
+                  onPress: () => handleKeyboardDismiss(onSwitchToPhoneLogin)
+                })
+              ) : (
+                <TextButton
+                  title={text?.switchToPhoneLogin || 'Login with Phone'}
+                  onPress={() => handleKeyboardDismiss(onSwitchToPhoneLogin)}
+                  color={resolvedTheme.colors.button}
+                  style={styles.switchPhoneText}
+                  underline
+                  bold
+                  align="center"
+                />
+              ))}
+          </View>
+
+          {!isKeyboardOpen && shouldRender(onSignup || renderSignupPrompt) && (
+            <View style={styles.signupContainer}>
+              {renderSignupPrompt ? (
+                renderSignupPrompt({
+                  onPress: () => handleKeyboardDismiss(onSignup)
+                })
+              ) : (
+                <View style={styles.loginRow}>
+                  <Text style={[styles.loginPrompt, signupTextProps]} color={resolvedTheme.colors.textPrimary}>
+                    {text?.signupPrompt || `Don't have an account?`}
+                  </Text>
+                  <TextButton
+                    title={text?.signupLink || 'Sign Up'}
+                    onPress={() => handleKeyboardDismiss(onSignup)}
+                    bold
+                    underline
+                    align="center"
+                    color={resolvedTheme.colors.button}
+                    style={signupLinkTextProps}
+                  />
+                </View>
+              )}
+            </View>
+          )}
+        </HideKeyboard>
+      </View>
+    </BackgroundLayout>
+  );
+};
+
+export default LoginWithEmail;
+
+const styles = StyleSheet.create({
+  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(10)
+  },
+  forgotPasswordText: {
+    textAlign: 'right',
+    marginRight: scale(4),
+    marginTop: -verticalScale(10),
+    marginBottom: verticalScale(8)
+  },
+  switchPhoneText: {
+    marginTop: verticalScale(10)
+  },
+  signupContainer: {
+    position: 'absolute',
+    bottom: verticalScale(30),
+    left: 0,
+    right: 0,
+    alignItems: 'center'
+  },
+  loginRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexWrap: 'wrap'
+  },
+  loginPrompt: {
+    textAlign: 'center',
+    marginRight: 4
+  }
+});