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

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

@@ -0,0 +1,439 @@
+/**
+ * @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

@@ -0,0 +1,20 @@
+/**
+ * @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

@@ -0,0 +1,16 @@
+/**
+ * @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

@@ -0,0 +1,184 @@
+/**
+ * @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',
+  },
+});