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

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

@@ -0,0 +1,401 @@
+/**
+ * @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/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 = {
+  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?: AppTheme;
+  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> = ({
+  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 } = 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 shouldRender = (condition?: boolean | unknown): boolean => typeof condition === 'function' || !!condition;
+
+  return (
+    <BackgroundLayout
+      theme={resolvedTheme}
+      backgroundImage={backgroundImage?.source}
+      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 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={loadingSubmitBtn || isLoading}
+                    error={!!touchedFields.username && !!errors.username}
+                    errorMessage={errors.username?.message}
+                    inputStyle={inputStyle}
+                    containerStyle={inputContainerStyle}
+                    theme={resolvedTheme}
+                  />
+                )}
+              />
+
+              {/* 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={resolvedTheme}
+                    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="none"
+                    autoCapitalize="none"
+                    spellCheck={false}
+                    autoCorrect={false}
+                    autoComplete="off"
+                    theme={resolvedTheme}
+                  />
+                )}
+              />
+
+              {/* 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={resolvedTheme}
+                    textContentType="none"
+                    autoCapitalize="none"
+                    spellCheck={false}
+                    autoCorrect={false}
+                    autoComplete="off"
+                  />
+                )}
+              />
+
+              {/* 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={resolvedTheme}
+                    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={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',
+    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'
+  }
+});

package/src/components/Auth/SplashScreen/SplashScreen.tsx

@@ -0,0 +1,166 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 30 Jul 2025 at 03:21 PM
+ */
+
+import React, { useEffect, useMemo, useCallback } from 'react';
+import SplashImage from './components/SplashImage/SplashImage';
+import SplashVideo from './components/SplashVideo/SplashVideo';
+import SplashLottie from './components/SplashLottie/SplashLottie';
+import { StatusBar, type ViewStyle } from 'react-native';
+import type { AppTheme } from '../../../theme/themes';
+import { useTheme } from '../../../theme';
+import { useInitSplashCacheSync } from '../../../hooks/useInitSplashCacheSync';
+import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
+import Color from 'color';
+type SplashSourceType = 'image' | 'video' | 'lottie-animation';
+
+type SplashScreenConfig = {
+  source: string;
+  type?: SplashSourceType;
+  width: number;
+  height: number;
+  isStatic?: boolean;
+  screenTime?: number;
+  fullscreen?: boolean;
+  resizeMode?: 'contain' | 'cover' | 'stretch' | 'repeat' | 'center';
+  backgroundColor?: string;
+};
+
+type SplashScreenProps = {
+  splashScreenConfig: SplashScreenConfig;
+  innerContainerStyle?: ViewStyle;
+  onRedirect: () => void;
+  theme?: AppTheme;
+  backgroundImage?: {
+    source?: string | null;
+    onImageError?: (error: Error) => void;
+    gradientSplitBackground?: number;
+    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
+  };
+};
+
+const DEFAULT_IMAGE_TIMEOUT_SECONDS = 5;
+
+export const SplashScreen: React.FC<SplashScreenProps> = ({
+  splashScreenConfig: {
+    source: splashSource,
+    type: splashType = 'image',
+    width,
+    height,
+    isStatic = false,
+    screenTime,
+    fullscreen = false,
+    resizeMode = 'contain',
+    backgroundColor: splashBackgroundColor
+  },
+  innerContainerStyle,
+  backgroundImage = {
+    gradientSplitBackground: 0.4,
+    resizeMode: 'cover'
+  },
+  onRedirect,
+  theme: overrideTheme
+}) => {
+  const isRemoteSource = useMemo(() => splashSource.startsWith('http'), [splashSource]);
+  const { theme: resolvedTheme } = useTheme(overrideTheme);
+
+  const isImageSplash = splashType === 'image';
+  const backgroundImageUri =
+    isImageSplash && backgroundImage.source?.startsWith('http') ? backgroundImage.source : undefined;
+
+  const {
+    data: { localPathLogo }
+  } = useInitSplashCacheSync({
+    logoUrl: isRemoteSource ? splashSource : undefined,
+    backgroundUrl: backgroundImageUri
+  });
+
+  const resolvedSplashUri = isRemoteSource && localPathLogo ? localPathLogo : splashSource;
+  const effectiveTimeout = useMemo(() => {
+    const timeout = screenTime ?? (isImageSplash || isStatic ? DEFAULT_IMAGE_TIMEOUT_SECONDS : 0);
+    return Number.isFinite(timeout) ? Number(timeout) : 0;
+  }, [screenTime, isImageSplash, isStatic]);
+
+  const handleRedirect = useCallback(() => {
+    try {
+      onRedirect();
+    } catch (err) {
+      console.error('[SplashScreen] Redirect error:', err);
+    }
+  }, [onRedirect]);
+
+  useEffect(() => {
+    const fallbackTimeout = 0.5; // fallback to 0.5s even if 0
+    const timeout = effectiveTimeout > 0 ? effectiveTimeout : fallbackTimeout;
+    const timer = setTimeout(() => {
+      handleRedirect();
+    }, timeout * 1000);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [effectiveTimeout, handleRedirect]);
+
+  const splashComponentProps = useMemo(
+    () => ({
+      source: resolvedSplashUri,
+      width,
+      height,
+      fullscreen,
+      resizeMode: resizeMode as any
+    }),
+    [resolvedSplashUri, width, height, fullscreen, resizeMode]
+  );
+
+  const renderSplashContent = useCallback(() => {
+    switch (splashType) {
+      case 'video':
+        return <SplashVideo {...splashComponentProps} onEnd={effectiveTimeout ? undefined : handleRedirect} />;
+      case 'lottie-animation':
+        return (
+          <SplashLottie {...splashComponentProps} onAnimationFinish={effectiveTimeout ? undefined : handleRedirect} />
+        );
+      case 'image':
+      default:
+        return <SplashImage {...splashComponentProps} />;
+    }
+  }, [splashType, splashComponentProps, effectiveTimeout, handleRedirect]);
+  const getSafeBackgroundColor = (inputColor: string | undefined, fallbackColor: string): string => {
+    try {
+      if (!inputColor) return fallbackColor;
+
+      const parsedColor = Color(inputColor);
+      const alpha = parsedColor.alpha(); // 0 to 1
+
+      if (alpha < 0.8) return fallbackColor; // ✅ your condition
+
+      return parsedColor.hex(); // Always convert to solid hex
+    } catch (e) {
+      return fallbackColor;
+    }
+  };
+  const colorToUse = getSafeBackgroundColor(splashBackgroundColor, resolvedTheme.colors.background);
+  const isDark = Color(colorToUse).isDark();
+  const statusBarStyle: 'light-content' | 'dark-content' = isDark ? 'light-content' : 'dark-content';
+
+  return (
+    <BackgroundLayout
+      backgroundImage={isImageSplash ? backgroundImage.source : undefined}
+      backgroundColor={splashBackgroundColor}
+      resizeMode={backgroundImage.resizeMode ?? 'cover'}
+      innerContainerStyle={innerContainerStyle}
+      onImageError={backgroundImage.onImageError}
+      theme={resolvedTheme}
+      gradientSplitBackground={backgroundImage.gradientSplitBackground ?? 0.4}
+    >
+      <StatusBar translucent backgroundColor="transparent" barStyle={statusBarStyle} />
+
+      {renderSplashContent()}
+    </BackgroundLayout>
+  );
+};
+
+namespace SplashScreen {
+  export type Config = SplashScreenConfig;
+  export type Props = SplashScreenProps;
+}

package/src/components/Auth/SplashScreen/components/SplashImage/SplashImage.tsx

@@ -0,0 +1,66 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 30 Jul 2025 at 02:56 PM
+ */
+
+import React, { useState, useMemo } from 'react';
+import FastImage from 'react-native-fast-image';
+import { ActivityIndicator, View, StyleSheet } from 'react-native';
+import Display from '../../../../../utils/Display';
+
+type SplashImageProps = {
+  source: string;
+  width: number;
+  height: number;
+  fullscreen: boolean;
+  resizeMode?: 'cover' | 'contain' | 'stretch' | 'center';
+  backgroundColor?: string;
+};
+
+const SplashImage: React.FC<SplashImageProps> = ({ fullscreen, height, resizeMode = 'contain', source, width }) => {
+  const [isLoading, setIsLoading] = useState(!!source);
+
+  const imageStyles = useMemo(
+    () => ({
+      width: fullscreen ? Display.fullWidth : width,
+      height: fullscreen ? Display.fullHeight : height,
+      flex: 1
+    }),
+    [fullscreen, width, height]
+  );
+
+  const handleLoadEnd = useMemo(() => (source ? () => setIsLoading(false) : undefined), [source]);
+  const resolveUri = (src?: string): string => {
+    if (!src) return '';
+    if (src.startsWith('http') || src.startsWith('https') || src.startsWith('file://')) return src;
+    return `file://${src}`;
+  };
+
+  return (
+    <View style={styles.container}>
+      {isLoading && <ActivityIndicator size="large" style={styles.loader} />}
+      <FastImage
+        source={{ uri: resolveUri(source) }}
+        onLoadEnd={handleLoadEnd}
+        style={imageStyles}
+        resizeMode={resizeMode}
+        onError={() => setIsLoading(false)}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: Display.fullWidth,
+    height: Display.fullHeight,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  loader: {
+    position: 'absolute'
+  }
+});
+
+export default React.memo(SplashImage);

package/src/components/Auth/SplashScreen/components/SplashLottie/SplashLottie.tsx

@@ -0,0 +1,71 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Thu 12 Jun 2025 at 09:22 AM
+ */
+import React, { useMemo } from 'react';
+import LottieView from 'lottie-react-native';
+import { StyleSheet } from 'react-native';
+import Display from '../../../../../utils/Display';
+
+type ResizeMode = 'cover' | 'contain' | 'center';
+
+interface IProps {
+  source: string;
+  width: number;
+  height: number;
+  fullscreen: boolean;
+  resizeMode?: ResizeMode;
+  onAnimationFinish?: () => void;
+}
+
+const SplashLottie: React.FC<IProps> = ({
+  fullscreen,
+  height,
+  source,
+  resizeMode = 'contain',
+  width,
+  onAnimationFinish
+}) => {
+  // Memoize the style object
+  const lottieStyle = useMemo(
+    () => ({
+      ...styles.base,
+      width: fullscreen ? Display.fullWidth : width,
+      height: fullscreen ? Display.fullHeight : height,
+      ...(fullscreen ? styles.fullscreen : {})
+    }),
+    [fullscreen, width, height]
+  );
+
+  // Early return if invalid source
+  if (!source) {
+    return null;
+  }
+
+  return (
+    <LottieView
+      source={{ uri: source }}
+      autoPlay
+      loop={false}
+      onAnimationFinish={onAnimationFinish}
+      style={lottieStyle}
+      resizeMode={resizeMode}
+      onAnimationFailure={(error) => {
+        console.error('Lottie animation failed to load:', error);
+      }}
+      hardwareAccelerationAndroid
+      cacheComposition
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  base: {
+    alignSelf: 'center'
+  },
+  fullscreen: {
+    flex: 1
+  }
+});
+
+export default React.memo(SplashLottie);