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

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

@@ -1,462 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Mon 16 Jun 2025 at 03:05 PM
- */
-import React, { useCallback, useMemo } 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 { useInternalTheme } from '../../../theme/hook/useInternalTheme';
-import { useKeyboard } from '../../../hooks/useKeyboard';
-import HideKeyboard from '../../Keyboard/HideKeyboard';
-import BackBtn from '../../Button/BackBtn';
-import { Text } from '../../Text';
-import type { ThemeOverride } from '../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { getResponsiveBottomSpacing } from '../../../utils/Spacing';
-
-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?: {
-    source?: string | null;
-    onImageError?: (error: Error) => void;
-    gradientSplitBackground?: number;
-    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
-  };
-  logoUri?: string;
-  theme?: ThemeOverride;
-  loadingSubmitBtn?: 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> = React.memo(
-  ({
-    title = 'Sign Up',
-    onSubmit,
-    onLogin,
-    onTopBackBtnPress,
-    containerStyle,
-    titleStyle,
-    formStyle,
-    inputStyle,
-    inputContainerStyle,
-    topBackBtnStyle,
-    minPasswordLength = 6,
-    loadingSubmitBtn,
-    backgroundImage,
-    logoUri,
-    theme: overrideTheme,
-    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: resolvedTheme } = useInternalTheme(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 shouldRender = useMemo(
-      () =>
-        (condition?: boolean | unknown): boolean =>
-          typeof condition === 'function' || !!condition,
-      []
-    );
-
-    // Memoize gradient split background
-    const gradientSplitBackground = useMemo(
-      () => (isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3),
-      [isKeyboardOpen]
-    );
-
-    // Memoize disabled state
-    const isDisabled = useMemo(
-      () => loadingSubmitBtn || isLoading,
-      [loadingSubmitBtn, isLoading]
-    );
-
-    return (
-      <BackgroundLayout
-        theme={overrideTheme}
-        backgroundImage={backgroundImage?.source}
-        gradientSplitBackground={gradientSplitBackground}
-      >
-        <View style={[styles.container, containerStyle]}>
-          {/* Top Back Button */}
-          {shouldRender(renderTopBackBtn || onTopBackBtnPress) && (
-            <View style={styles.topBackBtnWrapper}>
-              {renderTopBackBtn ? (
-                renderTopBackBtn({
-                  onPress: onTopBackBtnPress ?? (() => {}),
-                })
-              ) : (
-                <BackBtn
-                  theme={overrideTheme}
-                  style={topBackBtnStyle}
-                  onPress={onTopBackBtnPress}
-                />
-              )}
-            </View>
-          )}
-          <HideKeyboard keyboardVerticalOffset={scale(-50)}>
-            <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={isDisabled}
-                      error={!!touchedFields.username && !!errors.username}
-                      errorMessage={errors.username?.message}
-                      inputStyle={inputStyle}
-                      containerStyle={inputContainerStyle}
-                      theme={overrideTheme}
-                    />
-                  )}
-                />
-
-                {/* 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={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}
-                    />
-                  )}
-                />
-
-                {/* 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={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}
-                    />
-                  )}
-                />
-
-                {/* 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={isDisabled}
-                      errorMessage={errors.confirmPassword?.message}
-                      inputStyle={inputStyle}
-                      containerStyle={inputContainerStyle}
-                      theme={overrideTheme}
-                      textContentType="none"
-                      autoCapitalize="none"
-                      spellCheck={false}
-                      autoCorrect={false}
-                      autoComplete="off"
-                    />
-                  )}
-                />
-
-                {/* Submit Button */}
-                {!isKeyboardOpen &&
-                  (renderSubmitButton ? (
-                    renderSubmitButton({
-                      onPress: handleSubmit(handleFormSubmit),
-                      disabled: !isValid || isDisabled,
-                      loading: isDisabled,
-                    })
-                  ) : (
-                    <Button.Primary
-                      title={text?.signupButton || 'Sign up'}
-                      disabled={!isValid || isDisabled}
-                      theme={overrideTheme}
-                      loading={isDisabled}
-                      loadingText={
-                        text?.loadingSubmitBtnText || 'Signing up...'
-                      }
-                      onPress={handleSubmit(handleFormSubmit)}
-                    />
-                  ))}
-              </View>
-            </View>
-
-            {/* Login Prompt */}
-            {!isKeyboardOpen &&
-              shouldRender(renderLoginPrompt || onLogin) &&
-              (renderLoginPrompt ? (
-                renderLoginPrompt()
-              ) : (
-                <View
-                  style={[
-                    styles.loginContainerWrapper,
-                    {
-                      bottom: getResponsiveBottomSpacing(35),
-                    },
-                  ]}
-                >
-                  <View style={styles.loginContainer}>
-                    <View style={styles.loginRow}>
-                      <Text
-                        style={[styles.loginPrompt, loginTextProps]}
-                        color={resolvedTheme?.colors?.textPrimary}
-                      >
-                        {text?.loginPrompt || `Already have an account?`}
-                      </Text>
-                      <TextButton
-                        title={text?.loginLink || 'Login'}
-                        onPress={() => {
-                          Keyboard.dismiss();
-                          requestAnimationFrame(() => {
-                            onLogin?.();
-                          });
-                        }}
-                        bold
-                        underline
-                        color={resolvedTheme?.colors?.button}
-                        style={loginLinkTextProps}
-                      />
-                    </View>
-                  </View>
-                </View>
-              ))}
-          </HideKeyboard>
-        </View>
-      </BackgroundLayout>
-    );
-  }
-);
-
-export default Signup;
-
-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(6),
-  },
-  loginContainerWrapper: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    alignItems: 'center',
-  },
-  loginRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexWrap: 'wrap',
-  },
-  loginPrompt: {
-    textAlign: 'center',
-    marginRight: 4,
-  },
-  loginContainer: {
-    alignItems: 'center',
-  },
-});

package/src/theme/hook/useThemeStatusBar.ts

@@ -1,42 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 22 Oct 2025 at 10:29 AM
- */
-/**
- * Automatically syncs StatusBar color & style with current theme.
- */
-import { useEffect, useMemo } from 'react';
-import { StatusBar, Platform, type StatusBarStyle } from 'react-native';
-import Color from 'color';
-import type { ITheme } from '../themes';
-
-interface UseThemeStatusBarOptions {
-  theme: ITheme;
-  backgroundColor?: string;
-  barStyle?: StatusBarStyle;
-}
-
-export const useThemeStatusBar = ({
-  theme,
-  backgroundColor,
-  barStyle,
-}: UseThemeStatusBarOptions) => {
-  // Memoize background color
-  const bgColor = useMemo(
-    () => backgroundColor ?? theme.colors.background,
-    [backgroundColor, theme.colors.background]
-  );
-
-  // Memoize content style calculation
-  const contentStyle = useMemo<StatusBarStyle>(() => {
-    if (barStyle) return barStyle;
-    return Color(bgColor).isDark() ? 'light-content' : 'dark-content';
-  }, [barStyle, bgColor]);
-
-  useEffect(() => {
-    StatusBar.setBarStyle(contentStyle, true);
-    if (Platform.OS === 'android') {
-      StatusBar.setBackgroundColor(bgColor, true);
-    }
-  }, [bgColor, contentStyle]);
-};