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

package/src/components/Auth/OTP/OTP.tsx

@@ -0,0 +1,322 @@
+import React, { memo, useMemo, useState, useCallback, useEffect } from 'react';
+import { View, type ViewStyle, type TextStyle, type KeyboardTypeOptions, StyleSheet, Platform } from 'react-native';
+import { CodeField, Cursor, useBlurOnFulfill, useClearByFocusCell } from 'react-native-confirmation-code-field';
+import { scale, verticalScale } from 'react-native-size-matters';
+
+import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
+import HideKeyboard from '../../Keyboard/HideKeyboard';
+import { useKeyboard } from '../../../hooks/useKeyboard';
+import BackBtn from '../../Button/BackBtn';
+import { useTheme } from '../../../theme';
+import { Logo } from '../../Logo/Logo';
+import { Button } from '../../Button';
+import Display from '../../../utils/Display';
+import { Text } from '../../Text';
+import type { AppTheme } from '../../../theme/themes';
+
+type OTPProps = {
+  title?: string;
+  onSubmit?: (values: { otp: string }) => Promise<void> | void;
+  onBackPress?: () => void;
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  formStyle?: ViewStyle;
+  backBtnStyle?: ViewStyle;
+  backgroundImage?: string;
+  loading?: boolean;
+  logoUri?: string;
+  theme?: AppTheme;
+  gradientEnabled?: boolean;
+  otpDigitCount?: number;
+  keyboardType?: KeyboardTypeOptions;
+  phoneNumber?: string;
+  text?: {
+    otpLabel?: string;
+    otpPlaceholder?: string;
+    loadingSubmitBtnText?: string;
+    submitButton?: string;
+    otpSentText?: string;
+    resendOtpText?: string;
+    resendOtpCountdownText?: string;
+  };
+  // Resend
+  onResendOtp?: () => void;
+  renderResendButton?: (props: { onPress: () => void; disabled: boolean }) => React.ReactNode;
+  resendDisabledTime?: number;
+
+  // Render Props
+  renderLogo?: () => React.ReactNode;
+  renderSubmitButton?: (props: { onPress: () => void; disabled: boolean; loading: boolean }) => React.ReactNode;
+  renderBackButton?: (props: { onPress: () => void }) => React.ReactNode;
+  renderOtpHeader?: () => React.ReactNode;
+  renderOtpInput?: (props: {
+    value: string;
+    onChange: (value: string) => void;
+    isFocused: boolean[];
+  }) => React.ReactNode;
+  renderPhoneText?: (phoneNumber: string) => React.ReactNode;
+
+  // Style Overrides
+  cellStyle?: TextStyle;
+  focusCellStyle?: TextStyle;
+};
+
+const DEFAULT_TEXT = {
+  otpLabel: 'Enter OTP',
+  otpPlaceholder: '••••',
+  submitButton: 'Verify OTP',
+  loadingSubmitBtnText: 'Verifying...',
+  otpSentText: 'A One-Time OTP has been sent to',
+  resendOtpText: 'Resend OTP',
+  resendOtpCountdownText: 'Resend OTP in'
+};
+
+const OTP: React.FC<OTPProps> = ({
+  title,
+  onSubmit,
+  onBackPress,
+  containerStyle,
+  titleStyle,
+  formStyle,
+  backBtnStyle,
+  backgroundImage,
+  loading = false,
+  logoUri,
+  theme,
+  gradientEnabled = true,
+  otpDigitCount = 4,
+  keyboardType = 'number-pad',
+  phoneNumber,
+  text = DEFAULT_TEXT,
+  onResendOtp,
+  renderResendButton,
+  resendDisabledTime = 30,
+  renderLogo,
+  renderSubmitButton,
+  renderBackButton,
+  renderOtpHeader,
+  renderOtpInput,
+  renderPhoneText,
+  cellStyle,
+  focusCellStyle
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const { isKeyboardOpen } = useKeyboard();
+  const [otp, setOtp] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [resendTimer, setResendTimer] = useState(resendDisabledTime);
+
+  const ref = useBlurOnFulfill({ value: otp, cellCount: otpDigitCount });
+  const [codeFieldProps, getCellOnLayoutHandler] = useClearByFocusCell({
+    value: otp,
+    setValue: setOtp
+  });
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          width: '100%',
+          paddingHorizontal: scale(16),
+          justifyContent: 'center',
+          alignItems: 'center'
+        },
+        content: {
+          width: '100%',
+          maxWidth: scale(400),
+          alignItems: 'center',
+          gap: verticalScale(12)
+        },
+        title: {
+          fontSize: scale(22),
+          fontWeight: '700',
+          marginTop: verticalScale(8),
+          color: appliedTheme.colors.textPrimary,
+          textAlign: 'center'
+        },
+        sentText: {
+          fontSize: scale(14),
+          color: appliedTheme.colors.onSurfaceVariant,
+          textAlign: 'center',
+          lineHeight: scale(18)
+        },
+        sentNumberContainer: {
+          marginTop: verticalScale(8),
+          alignItems: 'center'
+        },
+        form: {
+          width: '100%',
+          gap: verticalScale(20),
+          alignItems: 'center',
+          marginTop: verticalScale(24)
+        },
+        codeFieldRoot: {
+          width: Display.setWidth(80),
+          marginTop: scale(10)
+        },
+        cell: {
+          width: scale(55),
+          height: scale(55),
+          fontSize: scale(30),
+          fontWeight: '500',
+          paddingTop: Platform.OS === 'ios' ? scale(10) : scale(7),
+          borderWidth: scale(1),
+          borderRadius: scale(8),
+          textAlign: 'center',
+          color: appliedTheme.colors.textPrimary,
+          borderColor: appliedTheme.colors.outline
+        },
+        focusCell: {
+          borderColor: appliedTheme.colors.primary,
+          backgroundColor: appliedTheme.colors.surface
+        }
+      }),
+    [appliedTheme]
+  );
+
+  useEffect(() => {
+    if (resendTimer <= 0) return;
+    const timer = setInterval(() => {
+      setResendTimer((prev) => prev - 1);
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [resendTimer]);
+
+  const handleSubmit = useCallback(async () => {
+    if (!onSubmit || otp.length !== otpDigitCount) return;
+    setIsSubmitting(true);
+    try {
+      await onSubmit({ otp });
+    } catch (error) {
+      console.error('OTP submission error:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [onSubmit, otp, otpDigitCount]);
+
+  const handleResendOtp = useCallback(() => {
+    if (onResendOtp) {
+      onResendOtp();
+      setResendTimer(resendDisabledTime);
+    }
+  }, [onResendOtp, resendDisabledTime]);
+
+  const isLoading = loading || isSubmitting;
+  const isSubmitDisabled = otp.length !== otpDigitCount || isLoading;
+
+  return (
+    <BackgroundLayout
+      gradientEnabled={gradientEnabled}
+      backgroundImage={backgroundImage}
+      gradientSplit={isKeyboardOpen ? 0.3 : 0.4}
+    >
+      <HideKeyboard keyboardVerticalOffset={verticalScale(-80)}>
+        <View style={[styles.container, containerStyle]}>
+          {renderBackButton ? (
+            renderBackButton({ onPress: onBackPress ?? (() => {}) })
+          ) : onBackPress ? (
+            <BackBtn theme={appliedTheme} style={backBtnStyle} onPress={onBackPress} />
+          ) : null}
+
+          <View style={styles.content}>
+            {renderLogo ? renderLogo() : logoUri ? <Logo logoUri={logoUri} /> : null}
+
+            {renderOtpHeader ? renderOtpHeader() : <Text style={[styles.title, titleStyle]}>{title}</Text>}
+
+            {phoneNumber &&
+              (renderPhoneText ? (
+                renderPhoneText(phoneNumber)
+              ) : (
+                <View style={styles.sentNumberContainer}>
+                  <Text style={styles.sentText}>{text?.otpSentText}</Text>
+                  <Text
+                    style={{
+                      fontWeight: '700',
+                      fontSize: scale(15),
+                      marginTop: verticalScale(4),
+                      color: appliedTheme.colors.primary
+                    }}
+                  >
+                    {phoneNumber}
+                  </Text>
+                </View>
+              ))}
+
+            <View style={[styles.form, formStyle]}>
+              {renderOtpInput ? (
+                renderOtpInput({
+                  value: otp,
+                  onChange: (val) => setOtp(val.replace(/\D/g, '')),
+                  isFocused: Array.from({ length: otpDigitCount }, (_, i) => otp.length === i)
+                })
+              ) : (
+                <CodeField
+                  ref={ref}
+                  {...codeFieldProps}
+                  value={otp}
+                  onChangeText={(input) => setOtp(input.replace(/\D/g, ''))}
+                  cellCount={otpDigitCount}
+                  rootStyle={styles.codeFieldRoot}
+                  keyboardType={keyboardType}
+                  textContentType="oneTimeCode"
+                  renderCell={({ index, symbol, isFocused }) => (
+                    <Text
+                      key={index}
+                      style={[styles.cell, cellStyle, isFocused && styles.focusCell, isFocused && focusCellStyle]}
+                      onLayout={getCellOnLayoutHandler(index)}
+                    >
+                      {symbol || (isFocused ? <Cursor /> : null)}
+                    </Text>
+                  )}
+                />
+              )}
+
+              {renderSubmitButton ? (
+                renderSubmitButton({
+                  onPress: handleSubmit,
+                  disabled: isSubmitDisabled,
+                  loading: isLoading
+                })
+              ) : (
+                <Button.Primary
+                  title={text.submitButton || DEFAULT_TEXT.submitButton}
+                  theme={appliedTheme}
+                  onPress={handleSubmit}
+                  loadingText={text.loadingSubmitBtnText}
+                  disabled={isSubmitDisabled}
+                  loading={isLoading}
+                />
+              )}
+
+              {/* Resend OTP Section */}
+              <View style={{ alignItems: 'center', marginTop: verticalScale(10) }}>
+                {renderResendButton ? (
+                  renderResendButton({
+                    onPress: handleResendOtp,
+                    disabled: resendTimer > 0
+                  })
+                ) : (
+                  <Text
+                    onPress={resendTimer <= 0 ? handleResendOtp : undefined}
+                    style={{
+                      fontSize: scale(14),
+                      color: resendTimer > 0 ? appliedTheme.colors.onSurfaceVariant : appliedTheme.colors.primary,
+                      textAlign: 'center'
+                    }}
+                  >
+                    {resendTimer > 0
+                      ? `${text?.resendOtpCountdownText || DEFAULT_TEXT.resendOtpCountdownText} ${resendTimer}s`
+                      : text?.resendOtpText || DEFAULT_TEXT.resendOtpText}
+                  </Text>
+                )}
+              </View>
+            </View>
+          </View>
+        </View>
+      </HideKeyboard>
+    </BackgroundLayout>
+  );
+};
+
+export default memo(OTP);

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

@@ -0,0 +1,383 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 16 Jun 2025 at 03:05 PM
+ */
+import React, { useCallback } from 'react';
+import { StyleSheet, View, Platform, 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';
+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';
+
+type FormValues = {
+  username: string;
+  email: string;
+  password: string;
+  confirmPassword: string;
+};
+
+export interface SignupProps {
+  title: string;
+  onSubmit?: (values: FormValues) => void;
+  onLogin?: () => void;
+  onTopBackBtnPress?: () => void;
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  formStyle?: ViewStyle;
+  inputStyle?: TextStyle;
+  inputContainerStyle?: ViewStyle;
+  topBackBtnStyle?: ViewStyle;
+  minPasswordLength?: number;
+  backgroundImage?: string;
+  logoUri?: string;
+  theme?: AppTheme;
+  loadingSubmitBtn?: boolean;
+  gradientEnabled?: 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> = ({
+  title = 'Sign Up',
+  onSubmit,
+  onLogin,
+  onTopBackBtnPress,
+  containerStyle,
+  titleStyle,
+  formStyle,
+  inputStyle,
+  inputContainerStyle,
+  topBackBtnStyle,
+  minPasswordLength = 6,
+  loadingSubmitBtn,
+  backgroundImage,
+  logoUri,
+  theme,
+  gradientEnabled,
+  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: appliedTheme } = useTheme(theme);
+  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 = (condition?: boolean | unknown): boolean => typeof condition === 'function' || !!condition;
+
+  return (
+    <BackgroundLayout
+      gradientEnabled={gradientEnabled}
+      backgroundImage={backgroundImage}
+      gradientSplit={isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3}
+    >
+      <HideKeyboard>
+        <View style={[styles.container, containerStyle]}>
+          {/* Top Back Button */}
+          {shouldRender(renderTopBackBtn || onTopBackBtnPress) &&
+            (renderTopBackBtn ? (
+              renderTopBackBtn({ onPress: onTopBackBtnPress ?? (() => {}) })
+            ) : (
+              <BackBtn theme={appliedTheme} style={topBackBtnStyle} onPress={onTopBackBtnPress} />
+            ))}
+
+          <View style={styles.centerContent}>
+            {/* Logo */}
+            {renderLogo ? renderLogo() : logoUri ? <Logo logoUri={logoUri} /> : 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={loadingSubmitBtn || isLoading}
+                    error={!!touchedFields.username && !!errors.username}
+                    errorMessage={errors.username?.message}
+                    inputStyle={inputStyle}
+                    containerStyle={inputContainerStyle}
+                    theme={appliedTheme}
+                  />
+                )}
+              />
+
+              {/* 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={loadingSubmitBtn || isLoading}
+                    error={!!touchedFields.email && !!errors.email}
+                    errorMessage={errors.email?.message}
+                    inputStyle={inputStyle}
+                    containerStyle={inputContainerStyle}
+                    theme={appliedTheme}
+                    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={(inputText) => {
+                      const sanitized = inputText.replace(/[^\w@.\-+]/g, '');
+                      onChange(sanitized);
+                    }}
+                    onBlur={onBlur}
+                    disabled={loadingSubmitBtn || isLoading}
+                    inputStyle={inputStyle}
+                    error={!!touchedFields.password && !!errors.password}
+                    errorMessage={errors.password?.message}
+                    containerStyle={inputContainerStyle}
+                    textContentType="password"
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    theme={appliedTheme}
+                  />
+                )}
+              />
+
+              {/* 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={(inputText) => {
+                      const sanitized = inputText.replace(/[^\w@.\-+]/g, '');
+                      onChange(sanitized);
+                    }}
+                    onBlur={onBlur}
+                    error={!!touchedFields.confirmPassword && !!errors.confirmPassword}
+                    disabled={loadingSubmitBtn || isLoading}
+                    errorMessage={errors.confirmPassword?.message}
+                    inputStyle={inputStyle}
+                    containerStyle={inputContainerStyle}
+                    theme={appliedTheme}
+                    textContentType="password"
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                  />
+                )}
+              />
+
+              {/* Submit Button */}
+              {!isKeyboardOpen &&
+                (renderSubmitButton ? (
+                  renderSubmitButton({
+                    onPress: handleSubmit(handleFormSubmit),
+                    disabled: !isValid || loadingSubmitBtn || isLoading,
+                    loading: loadingSubmitBtn || isLoading
+                  })
+                ) : (
+                  <Button.Primary
+                    title={text?.signupButton || 'Sign up'}
+                    disabled={!isValid}
+                    theme={appliedTheme}
+                    loading={loadingSubmitBtn || isLoading}
+                    loadingText={text?.loadingSubmitBtnText || 'Signing up...'}
+                    onPress={handleSubmit(handleFormSubmit)}
+                  />
+                ))}
+            </View>
+          </View>
+
+          {/* Login Prompt */}
+          {!isKeyboardOpen &&
+            shouldRender(renderLoginPrompt || onLogin) &&
+            (renderLoginPrompt ? (
+              renderLoginPrompt()
+            ) : (
+              <View style={styles.loginContainerWrapper}>
+                <View style={styles.loginContainer}>
+                  <View style={styles.loginRow}>
+                    <Text style={[styles.loginPrompt, loginTextProps]} color={appliedTheme?.colors?.textPrimary}>
+                      {text?.loginPrompt || `Already have an account?`}
+                    </Text>
+                    <TextButton
+                      title={text?.loginLink || 'Login'}
+                      onPress={() => {
+                        Keyboard.dismiss();
+                        requestAnimationFrame(() => {
+                          onLogin?.();
+                        });
+                      }}
+                      bold
+                      underline
+                      color={appliedTheme?.colors?.button}
+                      style={loginLinkTextProps}
+                    />
+                  </View>
+                </View>
+              </View>
+            ))}
+        </View>
+      </HideKeyboard>
+    </BackgroundLayout>
+  );
+};
+
+export default Signup;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    paddingHorizontal: scale(16),
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  centerContent: {
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  title: {
+    fontSize: scale(22),
+    fontWeight: '700',
+    marginTop: verticalScale(5),
+    marginBottom: verticalScale(20)
+  },
+  form: {
+    width: '100%',
+    gap: verticalScale(6)
+  },
+  loginContainerWrapper: {
+    position: 'absolute',
+    bottom: verticalScale(30),
+    left: 0,
+    right: 0,
+    alignItems: 'center'
+  },
+  loginRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexWrap: 'wrap'
+  },
+  loginPrompt: {
+    textAlign: 'center',
+    marginRight: 4
+  },
+  loginContainer: {
+    alignItems: 'center'
+  }
+});