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

package/src/components/Input/InputTwo.tsx

@@ -0,0 +1,189 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Fri 04 Jul 2025 at 10:53 PM
+ */
+
+import React, { useState } from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  type TextInputProps,
+  type TextStyle,
+  type ViewStyle
+} from 'react-native';
+import { Eye, EyeOff } from 'lucide-react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { useTheme } from '../../theme/hook/useTheme';
+import type { AppTheme } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+export interface InputTwoProps extends Omit<TextInputProps, 'theme'> {
+  containerStyle?: ViewStyle;
+  inputStyle?: TextStyle;
+  errorMessage?: string;
+  error?: boolean;
+  secureTextEntry?: boolean;
+  theme?: AppTheme;
+  label?: string;
+  placeholderTextColor?: string;
+  disabled?: boolean;
+
+  leftIcon?: React.ReactNode;
+  onPressLeftIcon?: () => void;
+  rightIcon?: React.ReactNode;
+  onPressRightIcon?: () => void;
+}
+
+const InputTwo: React.FC<InputTwoProps> = ({
+  containerStyle,
+  inputStyle,
+  error,
+  errorMessage,
+  secureTextEntry,
+  theme,
+  label,
+  placeholderTextColor,
+  disabled,
+  leftIcon,
+  onPressLeftIcon,
+  rightIcon,
+  onPressRightIcon,
+  ...props
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const [showPassword, setShowPassword] = useState(false);
+  const isPasswordField = !!secureTextEntry;
+  const inputSecure = isPasswordField && !showPassword;
+
+  const {
+    textPrimary,
+    textDisabled,
+    outline,
+    outlineDisabled,
+    error: inputErrorColor,
+    backgroundDisabled,
+    errorContainer,
+    skeletonBaseColor
+  } = appliedTheme?.colors || {};
+
+  const computedBorderColor = disabled ? outline : error ? inputErrorColor : outlineDisabled;
+  const computedBackgroundColor = disabled ? backgroundDisabled : error ? errorContainer : skeletonBaseColor;
+  const computedTextColor = disabled ? textDisabled : error ? inputErrorColor : textPrimary;
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {label && (
+        <View style={[styles.labelContainer, { backgroundColor: skeletonBaseColor, borderRadius: scale(3) }]}>
+          <Text style={[styles.label, { color: computedTextColor }]}>{label}</Text>
+        </View>
+      )}
+
+      <View
+        style={[
+          styles.inputWrapper,
+          {
+            borderColor: computedBorderColor,
+            backgroundColor: computedBackgroundColor
+          }
+        ]}
+      >
+        {/* Left Icon */}
+        {leftIcon && (
+          <TouchableOpacity
+            disabled={!onPressLeftIcon}
+            activeOpacity={onPressLeftIcon ? 0.8 : 1}
+            onPress={onPressLeftIcon}
+            style={styles.iconWrapper}
+            accessibilityRole="button"
+          >
+            {leftIcon}
+          </TouchableOpacity>
+        )}
+
+        {/* Text Input */}
+        <TextInput
+          {...props}
+          editable={!disabled}
+          placeholderTextColor={placeholderTextColor || textPrimary}
+          secureTextEntry={inputSecure}
+          style={[styles.input, { color: computedTextColor }, inputStyle]}
+        />
+
+        {/* Right Icon or Eye Toggle */}
+        {rightIcon ? (
+          <TouchableOpacity
+            activeOpacity={0.8}
+            disabled={!onPressRightIcon}
+            onPress={onPressRightIcon}
+            style={styles.iconWrapper}
+            accessibilityRole="button"
+          >
+            {rightIcon}
+          </TouchableOpacity>
+        ) : isPasswordField ? (
+          <TouchableOpacity
+            onPress={() => setShowPassword((prev) => !prev)}
+            disabled={disabled}
+            activeOpacity={0.8}
+            style={styles.iconWrapper}
+          >
+            {showPassword ? (
+              <EyeOff size={scale(20)} color={textPrimary} />
+            ) : (
+              <Eye size={scale(20)} color={textPrimary} />
+            )}
+          </TouchableOpacity>
+        ) : null}
+      </View>
+
+      {error && errorMessage && <Text style={[styles.errorText, { color: inputErrorColor }]}>{errorMessage}</Text>}
+    </View>
+  );
+};
+
+export default InputTwo;
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    marginBottom: verticalScale(5)
+  },
+  labelContainer: {
+    position: 'absolute',
+    top: -9,
+    left: scale(12),
+    zIndex: 1,
+    paddingHorizontal: scale(4)
+  },
+  label: {
+    fontSize: RFValue(11),
+    fontWeight: '500',
+    backgroundColor: 'transparent'
+  },
+  inputWrapper: {
+    width: '100%',
+    borderWidth: scale(0.5),
+    borderRadius: moderateScale(7.18),
+    paddingHorizontal: scale(10),
+    paddingVertical: verticalScale(6),
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  iconWrapper: {
+    marginHorizontal: scale(5)
+  },
+  input: {
+    flex: 1,
+    fontSize: RFValue(14),
+    minHeight: verticalScale(30),
+    padding: 0
+  },
+  errorText: {
+    fontSize: RFValue(11),
+    marginTop: verticalScale(4),
+    marginLeft: scale(8)
+  }
+});

package/src/components/Input/PhoneNumberInput.tsx

@@ -0,0 +1,383 @@
+/**
+ * @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 { useTheme } from '../../theme/hook/useTheme';
+import type { AppTheme } 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?: AppTheme;
+  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 PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
+  value = '',
+  onChangeText,
+  label,
+  placeholder = 'Enter 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 } = useTheme(propTheme);
+  const [inputError, setInputError] = useState<string | null>(null);
+  const [isFocused, 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 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 inputWrapperStyle = useMemo(
+    () => [
+      styles.inputWrapper,
+      {
+        borderColor: disabled
+          ? appliedTheme.colors.outlineDisabled
+          : inputError || error
+            ? appliedTheme.colors.error
+            : isFocused
+              ? appliedTheme.colors.primary
+              : appliedTheme.colors.outline,
+        backgroundColor: disabled
+          ? appliedTheme.colors.backgroundDisabled
+          : inputError || error
+            ? appliedTheme.colors.errorContainer
+            : appliedTheme.colors.background,
+        borderWidth: isFocused ? scale(1.5) : scale(1)
+      }
+    ],
+    [
+      disabled,
+      appliedTheme.colors.outlineDisabled,
+      appliedTheme.colors.error,
+      appliedTheme.colors.primary,
+      appliedTheme.colors.outline,
+      appliedTheme.colors.backgroundDisabled,
+      appliedTheme.colors.errorContainer,
+      appliedTheme.colors.background,
+      inputError,
+      error,
+      isFocused
+    ]
+  );
+
+  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 }]}>
+          <Text
+            style={[
+              styles.label,
+              {
+                color: disabled
+                  ? appliedTheme.colors.textDisabled
+                  : error || inputError
+                    ? appliedTheme.colors.error
+                    : appliedTheme.colors.textPrimary
+              }
+            ]}
+          >
+            {label}
+          </Text>
+        </View>
+      )}
+      <View style={inputWrapperStyle}>
+        <PhoneInput
+          ref={phoneInputRef}
+          defaultCode="IN"
+          layout="second"
+          value={value}
+          onChangeText={debouncedHandlePhoneChange}
+          withShadow={false}
+          autoFocus={false}
+          disabled={disabled}
+          placeholder={placeholder}
+          containerStyle={[styles.phoneInputContainer, { backgroundColor: 'transparent' }]}
+          textContainerStyle={[styles.phoneInputTextContainer, { backgroundColor: 'transparent' }]}
+          textInputStyle={[
+            styles.textInput,
+            {
+              color: disabled ? appliedTheme.colors.textDisabled : appliedTheme.colors.textPrimary,
+              backgroundColor: 'transparent'
+            },
+            inputStyle
+          ]}
+          codeTextStyle={[
+            styles.codeTextStyle,
+            {
+              color: disabled
+                ? appliedTheme.colors.textDisabled
+                : error || inputError
+                  ? appliedTheme.colors.onErrorContainer
+                  : appliedTheme.colors.textPrimary,
+              backgroundColor: 'transparent'
+            }
+          ]}
+          countryPickerButtonStyle={[styles.countryPickerButtonStyle, { backgroundColor: 'transparent' }]}
+          renderDropdownImage={
+            <ChevronDown
+              color={
+                disabled
+                  ? appliedTheme.colors.textDisabled
+                  : error || inputError
+                    ? appliedTheme.colors.error
+                    : appliedTheme.colors.textPrimary
+              }
+              size={scale(18)}
+            />
+          }
+          textInputProps={{
+            keyboardType: 'numeric',
+            maxLength,
+            placeholderTextColor: disabled ? appliedTheme.colors.textDisabled : appliedTheme.colors.textSecondary,
+            accessibilityLabel: computedAccessibilityLabel,
+            accessibilityHint: accessibilityHint,
+            cursorColor: inputError || error ? appliedTheme.colors.error : appliedTheme.colors.primary,
+            selectionColor: inputError || error ? appliedTheme.colors.error : appliedTheme.colors.primary,
+
+            onFocus: () => setIsFocused(true),
+            onBlur: () => setIsFocused(false)
+          }}
+          withDarkTheme={appliedTheme.dark}
+        />
+      </View>
+      {(error || inputError) && (
+        <Text style={[styles.errorText, { color: appliedTheme.colors.onErrorContainer }]}>
+          {inputError || errorMessage || 'Invalid phone number'}
+        </Text>
+      )}
+    </Animated.View>
+  );
+};
+
+export default React.memo(PhoneNumberInputOne);
+
+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(12),
+    paddingHorizontal: scale(8),
+    flexDirection: 'row',
+    alignItems: 'center',
+    shadowColor: 'transparent',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    elevation: 0
+  },
+  phoneInputContainer: {
+    flex: 1,
+    borderWidth: 0,
+    elevation: 0
+  },
+  phoneInputTextContainer: {
+    flex: 1,
+    paddingVertical: 0,
+    paddingHorizontal: scale(2),
+    alignItems: 'center'
+  },
+  textInput: {
+    flex: 1,
+    fontSize: RFValue(16),
+    padding: 0,
+    fontWeight: '400'
+  },
+  codeTextStyle: {
+    fontSize: RFValue(16),
+    fontWeight: '500'
+  },
+  countryPickerButtonStyle: {
+    marginRight: scale(-4),
+    padding: scale(2),
+    marginLeft: scale(-4)
+  },
+  errorText: {
+    fontSize: RFValue(10),
+    marginTop: verticalScale(8),
+    marginLeft: scale(12),
+    fontWeight: '400',
+    opacity: 0.9
+  }
+});

package/src/components/Keyboard/HideKeyboard.tsx

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

@@ -28,6 +28,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 999,
-    backgroundColor: 'rgba(255,255,255,0.4)', // optional semi-transparent backdrop
-  },
+    backgroundColor: 'rgba(255,255,255,0.4)' // optional semi-transparent backdrop
+  }
 });