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

package/src/components/Input/PhoneNumberInputTwo.tsx

@@ -1,418 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Mon 16 Jun 2025 at 12:35 PM
- */
-
-import React, {
-  useRef,
-  useState,
-  useCallback,
-  useMemo,
-  useEffect,
-} from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  Animated,
-  type AccessibilityProps,
-  type TextStyle,
-  type ViewStyle,
-} from 'react-native';
-import PhoneInput from 'react-native-phone-number-input';
-import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-import { ChevronDown } from 'lucide-react-native';
-import { getExampleNumber } from 'libphonenumber-js';
-import examples from 'libphonenumber-js/mobile/examples';
-import { parsePhoneNumberFromString } from 'libphonenumber-js';
-import debounce from 'lodash.debounce';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import type { ThemeOverride } from '../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-
-export interface PhoneNumberInputProps extends Pick<
-  AccessibilityProps,
-  'accessibilityLabel' | 'accessibilityHint'
-> {
-  value: string;
-  onChangeText: (params: {
-    fullNumber: string;
-    countryCode: string;
-    formattedNumber: string;
-  }) => void;
-  label?: string;
-  placeholder?: string;
-  error?: boolean;
-  errorMessage?: string;
-  inputStyle?: TextStyle;
-  containerStyle?: ViewStyle;
-  theme?: ThemeOverride;
-  disabled?: boolean;
-}
-
-const getMaxLengthForCountry = (
-  countryCode: string,
-  defaultMaxLength: number
-): number => {
-  try {
-    const example = getExampleNumber(
-      countryCode as keyof typeof examples,
-      examples
-    );
-    return example?.nationalNumber?.length ?? defaultMaxLength;
-  } catch (error) {
-    console.warn(`Failed to get max length for country ${countryCode}:`, error);
-    return defaultMaxLength;
-  }
-};
-
-const PhoneNumberInputTwo: React.FC<PhoneNumberInputProps> = ({
-  value = '',
-  onChangeText,
-  label,
-  placeholder = 'Phone Number',
-  error = false,
-  errorMessage,
-  inputStyle,
-  containerStyle,
-  theme: propTheme,
-  accessibilityLabel = label || 'Phone number input',
-  accessibilityHint,
-  disabled = false,
-}) => {
-  const phoneInputRef = useRef<PhoneInput>(null);
-  const { theme: appliedTheme, isDarkMode } = useInternalTheme(propTheme);
-  const { textPrimary, textDisabled, error: errorColor } = appliedTheme.colors;
-
-  const [inputError, setInputError] = useState<string | null>(null);
-  const [, setIsFocused] = useState<boolean>(false);
-  const errorAnimation = useRef(new Animated.Value(0)).current;
-
-  // ✅ Hard set country to India
-  useEffect(() => {
-    phoneInputRef.current?.getCountryCode();
-  }, []);
-
-  useEffect(() => {
-    if (inputError || error) {
-      Animated.timing(errorAnimation, {
-        toValue: 1,
-        duration: 300,
-        useNativeDriver: true,
-      }).start();
-    } else {
-      Animated.timing(errorAnimation, {
-        toValue: 0,
-        duration: 300,
-        useNativeDriver: true,
-      }).start();
-    }
-  }, [inputError, error, errorAnimation]);
-
-  const validatePhoneNumber = useCallback(
-    (formattedText: string, inputCallingCode: string) => {
-      const rawInput = formattedText.replace(/[^\d]/g, '');
-      const fullRawNumber = `+${inputCallingCode}${rawInput}`;
-      const parsedNumber = parsePhoneNumberFromString(fullRawNumber);
-      const maxLength = getMaxLengthForCountry('IN', 10);
-
-      if (!rawInput) {
-        setInputError(null);
-        onChangeText({
-          fullNumber: '',
-          formattedNumber: formattedText,
-          countryCode: inputCallingCode,
-        });
-        return;
-      }
-
-      if (!parsedNumber || !inputCallingCode) {
-        setInputError('Invalid phone number format');
-        onChangeText({
-          fullNumber: '',
-          formattedNumber: formattedText,
-          countryCode: inputCallingCode,
-        });
-        return;
-      }
-
-      if (rawInput.length > maxLength) {
-        setInputError(`Phone number must not exceed ${maxLength} digits`);
-        onChangeText({
-          fullNumber: '',
-          formattedNumber: formattedText,
-          countryCode: inputCallingCode,
-        });
-        return;
-      }
-
-      if (rawInput.length < maxLength) {
-        setInputError(`Phone number must be at least ${maxLength} digits`);
-        onChangeText({
-          fullNumber: '',
-          formattedNumber: formattedText,
-          countryCode: inputCallingCode,
-        });
-        return;
-      }
-
-      const isValid = parsedNumber.isValid();
-      const e164 = parsedNumber.number;
-
-      if (isValid && e164) {
-        setInputError(null);
-        onChangeText({
-          fullNumber: e164,
-          formattedNumber: formattedText,
-          countryCode: inputCallingCode,
-        });
-      } else {
-        setInputError('Please enter a valid phone number');
-        onChangeText({
-          fullNumber: '',
-          formattedNumber: formattedText,
-          countryCode: inputCallingCode,
-        });
-      }
-    },
-    [onChangeText]
-  );
-
-  const phoneTextColor = useMemo(
-    () =>
-      disabled ? textDisabled : inputError || error ? errorColor : textPrimary,
-    [disabled, inputError, error, textDisabled, errorColor, textPrimary]
-  );
-
-  const debouncedHandlePhoneChange = useMemo(
-    () =>
-      debounce((formattedText: string) => {
-        const currentCallingCode = phoneInputRef.current?.getCallingCode();
-        validatePhoneNumber(formattedText, currentCallingCode || '');
-      }, 300),
-    [validatePhoneNumber]
-  );
-
-  useEffect(() => {
-    return () => {
-      debouncedHandlePhoneChange.cancel();
-    };
-  }, [debouncedHandlePhoneChange]);
-
-  const maxLength = useMemo(() => getMaxLengthForCountry('IN', 10), []);
-
-  const wrapperBackgroundColor = useMemo(() => {
-    if (disabled) return appliedTheme.colors.backgroundDisabled;
-    if (inputError || error) return appliedTheme.colors.errorContainer;
-
-    return isDarkMode
-      ? 'rgba(255, 255, 255, 0.2)'
-      : 'rgba(255, 255, 255, 0.24)';
-  }, [disabled, inputError, error, isDarkMode, appliedTheme.colors]);
-
-  const borderColor = useMemo(() => {
-    if (disabled) return appliedTheme.colors.outlineDisabled;
-    if (inputError || error) return errorColor;
-
-    return isDarkMode ? 'rgba(255,255,255,0.50)' : 'rgba(255,255,255,0.9)';
-  }, [
-    disabled,
-    appliedTheme.colors.outlineDisabled,
-    inputError,
-    error,
-    errorColor,
-    isDarkMode,
-  ]);
-
-  const inputWrapperStyle = useMemo(
-    () => [
-      styles.inputWrapper,
-      {
-        backgroundColor: wrapperBackgroundColor,
-        borderColor,
-        borderWidth: scale(1.2),
-
-        shadowColor: isDarkMode ? 'transparent' : '#000',
-        shadowOpacity: isDarkMode ? 0 : 0.12,
-        shadowRadius: 10,
-        shadowOffset: { width: 0, height: 6 },
-        elevation: isDarkMode ? 0 : 4,
-      },
-    ],
-    [wrapperBackgroundColor, borderColor, isDarkMode]
-  );
-
-  const computedAccessibilityLabel = useMemo(
-    () =>
-      `${accessibilityLabel}, country code: +91${inputError || error ? `, error: ${inputError || errorMessage || 'Invalid phone number'}` : ''}`,
-    [accessibilityLabel, inputError, error, errorMessage]
-  );
-
-  return (
-    <Animated.View
-      style={[
-        styles.container,
-        containerStyle,
-        {
-          opacity: errorAnimation.interpolate({
-            inputRange: [0, 1],
-            outputRange: [1, 0.95],
-          }),
-        },
-      ]}
-    >
-      {label && (
-        <View
-          style={[
-            styles.labelContainer,
-            { backgroundColor: appliedTheme.colors.background },
-          ]}
-        />
-      )}
-      <View style={inputWrapperStyle}>
-        <PhoneInput
-          ref={phoneInputRef}
-          defaultCode="IN"
-          layout="second"
-          value={value}
-          onChangeText={debouncedHandlePhoneChange}
-          flagButtonStyle={styles.flagButtonStyle}
-          withShadow={false}
-          autoFocus={false}
-          disabled={disabled}
-          placeholder={placeholder}
-          containerStyle={[
-            styles.phoneInputContainer,
-            { backgroundColor: 'transparent' },
-          ]}
-          textContainerStyle={[
-            styles.phoneInputTextContainer,
-            { backgroundColor: 'transparent' },
-          ]}
-          textInputStyle={[
-            styles.textInput,
-            { color: phoneTextColor, backgroundColor: 'transparent' },
-            inputStyle,
-          ]}
-          codeTextStyle={[styles.codeTextStyle, { color: 'white' }]}
-          countryPickerButtonStyle={[
-            styles.countryPickerButtonStyle,
-            { backgroundColor: 'transparent' },
-          ]}
-          renderDropdownImage={<ChevronDown color={'white'} size={scale(18)} />}
-          textInputProps={{
-            keyboardType: 'numeric',
-            maxLength,
-            placeholderTextColor: disabled
-              ? appliedTheme.colors.textDisabled
-              : appliedTheme.colors.textSecondary,
-            accessibilityLabel: computedAccessibilityLabel,
-            accessibilityHint,
-            cursorColor:
-              inputError || error
-                ? appliedTheme.colors.onErrorContainer
-                : appliedTheme.colors.primary,
-            selectionColor:
-              inputError || error
-                ? appliedTheme.colors.onErrorContainer
-                : appliedTheme.colors.primary,
-            onFocus: () => setIsFocused(true),
-            onBlur: () => setIsFocused(false),
-          }}
-          withDarkTheme={isDarkMode}
-        />
-      </View>
-      {(error || inputError) && (
-        <Text
-          style={[
-            styles.errorText,
-            { color: appliedTheme.colors.onErrorContainer },
-          ]}
-        >
-          {inputError || errorMessage || 'Invalid phone number'}
-        </Text>
-      )}
-    </Animated.View>
-  );
-};
-
-export default React.memo(PhoneNumberInputTwo);
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    marginBottom: verticalScale(16),
-  },
-  labelContainer: {
-    position: 'absolute',
-    top: -verticalScale(7),
-    left: scale(12),
-    zIndex: 1,
-    paddingHorizontal: scale(6),
-    borderRadius: scale(4),
-  },
-  label: {
-    fontSize: RFValue(10),
-    fontWeight: '500',
-    letterSpacing: 0.3,
-  },
-  inputWrapper: {
-    width: '100%',
-    height: verticalScale(50),
-    borderRadius: moderateScale(8),
-    paddingHorizontal: scale(8),
-    flexDirection: 'row',
-    alignItems: 'center',
-    shadowColor: 'transparent',
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-    elevation: 0,
-  },
-  flagButtonStyle: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: scale(4),
-  },
-  phoneInputContainer: {
-    flex: 1,
-    borderWidth: 0,
-    elevation: 0,
-  },
-  phoneInputTextContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    paddingVertical: 0,
-    paddingHorizontal: scale(4),
-  },
-  textInput: {
-    flex: 1,
-    fontSize: RFValue(16),
-    padding: 0,
-    fontWeight: '400',
-  },
-  codeTextStyle: {
-    fontSize: RFValue(16),
-    marginLeft: scale(4),
-    fontWeight: '500',
-  },
-  countryPickerButtonStyle: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: verticalScale(42),
-    paddingHorizontal: scale(8),
-    borderRightWidth: 0.8,
-    borderRightColor: '#D0D0D0',
-  },
-
-  errorText: {
-    fontSize: RFValue(10),
-    marginTop: verticalScale(8),
-    marginLeft: scale(12),
-    fontWeight: '400',
-    opacity: 0.9,
-  },
-});

package/src/components/Keyboard/HideKeyboard.tsx

@@ -1,88 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Fri 08 Aug 2025 at 08:14 AM
- */
-import React, { useEffect, useRef } from 'react';
-import {
-  TouchableWithoutFeedback,
-  Keyboard,
-  KeyboardAvoidingView,
-  StyleSheet,
-  Animated,
-  Platform,
-  StatusBar,
-  type ViewStyle,
-} from 'react-native';
-import { scale } from 'react-native-size-matters';
-
-interface HideKeyboardProps {
-  children: React.ReactNode;
-  containerStyle?: ViewStyle;
-  behavior?: 'padding' | 'height' | 'position';
-  keyboardVerticalOffset?: number;
-}
-
-const HideKeyboard: React.FC<HideKeyboardProps> = ({
-  children,
-  containerStyle,
-  behavior = 'padding',
-  keyboardVerticalOffset = scale(-160),
-}) => {
-  const fadeAnim = useRef(new Animated.Value(1)).current;
-
-  // Platform-based offset
-  const offset =
-    keyboardVerticalOffset ??
-    (Platform.OS === 'ios' ? 0 : (StatusBar.currentHeight ?? 0));
-
-  useEffect(() => {
-    const showEvent =
-      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-    const hideEvent =
-      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
-
-    const showSub = Keyboard.addListener(showEvent, () => {
-      Animated.timing(fadeAnim, {
-        toValue: 0.98,
-        duration: 250,
-        useNativeDriver: true,
-      }).start();
-    });
-
-    const hideSub = Keyboard.addListener(hideEvent, () => {
-      Animated.timing(fadeAnim, {
-        toValue: 1,
-        duration: 250,
-        useNativeDriver: true,
-      }).start();
-    });
-
-    return () => {
-      showSub.remove();
-      hideSub.remove();
-    };
-  }, [fadeAnim]);
-
-  return (
-    <KeyboardAvoidingView
-      style={[styles.keyboardAvoidingView, containerStyle]}
-      behavior={behavior}
-      keyboardVerticalOffset={offset}
-    >
-      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
-        <Animated.View style={{ flex: 1, transform: [{ scale: fadeAnim }] }}>
-          {children}
-        </Animated.View>
-      </TouchableWithoutFeedback>
-    </KeyboardAvoidingView>
-  );
-};
-
-const styles = StyleSheet.create({
-  keyboardAvoidingView: {
-    flex: 1,
-    width: '100%',
-  },
-});
-
-export default HideKeyboard;

package/src/components/Loader/Loader.tsx

@@ -1,44 +0,0 @@
-import React, { useMemo } from 'react';
-import { StyleSheet, View, ActivityIndicator } from 'react-native';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import type { ThemeOverride } from '../../theme/themes';
-
-interface LoaderProps {
-  color?: string;
-  theme?: ThemeOverride;
-}
-
-export const Loader: React.FC<LoaderProps> = React.memo(
-  ({ color, theme: themeOverride }) => {
-    const { theme } = useInternalTheme(themeOverride);
-
-    const rootStyle = useMemo(
-      () => [styles.root, { backgroundColor: theme.colors.scrim }],
-      [theme.colors.scrim]
-    );
-
-    const indicatorColor = useMemo(
-      () => color ?? theme.colors.primary,
-      [color, theme.colors.primary]
-    );
-
-    return (
-      <View style={rootStyle}>
-        <ActivityIndicator size="large" color={indicatorColor} />
-      </View>
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  root: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 999,
-  },
-});

package/src/components/Logo/Logo.tsx

@@ -1,145 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Tue 17 Feb 2026 at 04:10 PM
- */
-import React, { useMemo, useState } from 'react';
-import {
-  Image,
-  View,
-  type StyleProp,
-  type ImageStyle,
-  type ViewStyle,
-} from 'react-native';
-import { moderateScale } from 'react-native-size-matters';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import { useSplashCache } from '../../hooks/useSplashCache';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import type { ThemeOverride } from '../../theme/themes';
-
-interface ILogoProps {
-  width?: number;
-  height?: number;
-  resizeMode?: 'contain' | 'cover' | 'stretch';
-  logoUri: string;
-  imageStyle?: StyleProp<ImageStyle>;
-  containerStyle?: StyleProp<ViewStyle>;
-  aspectRatio?: number;
-  fallbackUri?: string;
-  theme?: ThemeOverride;
-  isLoading?: boolean;
-}
-
-export const Logo: React.FC<ILogoProps> = ({
-  width = 200,
-  height = 50,
-  resizeMode = 'contain',
-  logoUri,
-  imageStyle,
-  containerStyle,
-  aspectRatio,
-  fallbackUri,
-  theme,
-  isLoading = false,
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  const [hasError, setHasError] = useState(false);
-
-  const {
-    data: { logoPath },
-    isLoading: isSplashLoading,
-  } = useSplashCache({
-    logoUrl: logoUri,
-  });
-  const finalSource = useMemo(() => {
-    if (hasError) {
-      return fallbackUri ? { uri: fallbackUri } : undefined;
-    }
-
-    if (logoPath) {
-      return {
-        uri: logoPath.startsWith('file://') ? logoPath : `file://${logoPath}`,
-      };
-    }
-
-    if (logoUri) {
-      return { uri: logoUri };
-    }
-
-    if (fallbackUri) {
-      return { uri: fallbackUri };
-    }
-
-    return undefined;
-  }, [logoPath, logoUri, fallbackUri, hasError]);
-
-  const containerStyleMemo = useMemo(
-    () => [
-      {
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-      },
-      containerStyle,
-    ],
-    [containerStyle]
-  );
-
-  const imageStyleMemo = useMemo(
-    () => [
-      {
-        width: moderateScale(width),
-        height: moderateScale(height),
-        ...(aspectRatio ? { aspectRatio } : {}),
-      },
-      imageStyle,
-    ],
-    [width, height, aspectRatio, imageStyle]
-  );
-
-  const showSkeleton = isLoading || isSplashLoading;
-  const showPlaceholder = !finalSource;
-
-  return (
-    <View style={containerStyleMemo}>
-      {showSkeleton ? (
-        <SkeletonPlaceholder
-          backgroundColor={appliedTheme.colors.skeletonBaseColor}
-          highlightColor={appliedTheme.colors.skeletonHighlightColor}
-          speed={1000}
-          borderRadius={4}
-        >
-          <SkeletonPlaceholder.Item
-            alignSelf="center"
-            width={moderateScale(width)}
-            height={moderateScale(height)}
-            borderRadius={4}
-          />
-        </SkeletonPlaceholder>
-      ) : finalSource ? (
-        <Image
-          source={finalSource}
-          resizeMode={resizeMode}
-          style={imageStyleMemo}
-          onError={() => {
-            if (!hasError) {
-              setHasError(true);
-            }
-          }}
-        />
-      ) : showPlaceholder ? (
-        <View
-          style={[
-            {
-              width: moderateScale(width),
-              height: moderateScale(height),
-              borderRadius: 4,
-              backgroundColor: appliedTheme.colors.skeletonBaseColor,
-            },
-          ]}
-        />
-      ) : null}
-    </View>
-  );
-};
-
-export default React.memo(Logo);