@hoddy-ui/core 1.0.88 → 1.0.90

package/src/Components/Locator.tsx

@@ -9,20 +9,15 @@ import { ScaledSheet } from "react-native-size-matters";
 import { useColors } from "../hooks";
 import { LocatorProps } from "../types";
 
-import { getApiKey } from "../config/KeyManager";
+import { getConfig } from "../config/KeyManager";
 import Typography from "./Typography";
 
-setTimeout(() => {
-  const { GOOGLE_MAP_API_KEY } = getApiKey();
-  if (GOOGLE_MAP_API_KEY) Location.setGoogleApiKey(GOOGLE_MAP_API_KEY);
-}, 500);
-
 type predictionType = {
   id: string;
   description: string;
 };
 export const getPredictionsFromCoords = async (coords: any) => {
-  const { GOOGLE_MAP_API_KEY } = getApiKey();
+  const { GOOGLE_MAP_API_KEY } = getConfig();
 
   if (!GOOGLE_MAP_API_KEY)
     console.error(
@@ -63,7 +58,7 @@ export const Locator: React.FC<LocatorProps> = ({
   float = true,
   country = "ng",
 }) => {
-  const { GOOGLE_MAP_API_KEY } = getApiKey();
+  const { GOOGLE_MAP_API_KEY } = getConfig();
 
   const [changed, setChanged] = useState(false);
   const [value, setValue] = useState("");

package/src/Components/OTPInput.tsx

@@ -1,5 +1,10 @@
-import React, { FC, useMemo, useState } from "react";
-import { TextInput, View } from "react-native";
+import React, { FC, useMemo } from "react";
+import {
+  TextInput,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from "react-native";
 import { ScaledSheet, ms } from "react-native-size-matters";
 import { useColors } from "../hooks";
 import { OTPInputProps } from "../types";
@@ -20,6 +25,42 @@ export const OTPInput: FC<OTPInputProps> = ({
     [length]
   );
 
+  console.log("v", value);
+
+  const onChangeHandler = (val: string, index: number) => {
+    if (value.length >= length && val.length > 0) return;
+    // Handle pasting of full OTP
+    if (val.length > 1) {
+      console.log("reached", val);
+
+      const digits = val.replace(/\D/g, "").slice(0, length);
+      onChange(digits);
+      if (digits.length === length) {
+        inputRefs[length - 1].current?.focus();
+      }
+      return;
+    }
+    // Handle backspace
+    if (val.length === 0) {
+      const newValue = value.slice(0, index) + value.slice(index + 1);
+      onChange(newValue);
+      if (index > 0) {
+        inputRefs[index - 1].current?.focus();
+      }
+      return;
+    }
+    // Only allow numbers and take first digit
+    const digit = val.replace(/\D/g, "").slice(0, 1);
+    if (!digit) return;
+    // Create new value string
+    const newValue = value.slice(0, index) + digit + value.slice(index + 1);
+    onChange(newValue);
+    // Auto advance to next input if not at end
+    if (index < length - 1) {
+      inputRefs[index + 1].current?.focus();
+    }
+  };
+
   const colors = useColors();
   const styles = ScaledSheet.create({
     root: {},
@@ -45,32 +86,10 @@ export const OTPInput: FC<OTPInputProps> = ({
         {[...Array(length)].map((_, index) => (
           <TextInput
             ref={inputRefs[index]}
-            onChangeText={(val) => {
-              if (val.length === 1) {
-                if (index !== length - 1) inputRefs[index + 1].current?.focus();
-                let text = value;
-
-                text = text.slice(0, index) + val + text.slice(index + 1);
-                onChange(text);
-              } else if (val.length === 0) {
-                if (index !== 0) {
-                  inputRefs[index - 1].current?.focus();
-                  let text = value;
-
-                  text = text.slice(0, index);
-                  onChange(text);
-                } else onChange("");
-              } else {
-                let text = val.replace(/\D/g, "").slice(0, length);
-                onChange(text);
-                inputRefs[
-                  text.length < length - 1 ? text.length : length - 1
-                ]?.current?.focus();
-              }
-            }}
+            onChangeText={(val) => onChangeHandler(val, index)}
             value={value[index] || ""}
-            // maxLength={1}
             blurOnSubmit={false}
+            // maxLength={1}
             keyboardType="number-pad"
             key={index}
             style={[styles.input]}

package/src/Components/Popup.tsx

@@ -75,15 +75,22 @@ export const Popup: React.FC<PopupProps> = ({
   });
 
   React.useEffect(() => {
-    setShow(open);
-    setTimeout(() => {
-      setShowSecondary(open);
-    }, 500);
+    if (open) {
+      setShow(open);
+      setTimeout(() => {
+        setShowSecondary(open);
+      }, 500);
+    } else {
+      closeAction();
+    }
   }, [open]);
 
   const closeAction = () => {
-    setShow(false);
-    onClose();
+    setShowSecondary(false);
+    setTimeout(() => {
+      setShow(false);
+      onClose();
+    }, 300);
   };
 
   return (

package/src/Components/TextField.tsx

@@ -1,5 +1,5 @@
 import { Ionicons, MaterialIcons } from "@expo/vector-icons";
-import React, { startTransition, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { Animated, TextInput, TouchableOpacity, View } from "react-native";
 import {
   ScaledSheet,
@@ -7,6 +7,7 @@ import {
   ms,
   verticalScale,
 } from "react-native-size-matters";
+import { getConfig } from "../config/KeyManager";
 import { useColors } from "../hooks";
 import { TextFieldProps } from "../types";
 import SelectMenu from "./SelectMenu";
@@ -38,13 +39,14 @@ const TextField: React.FC<TextFieldProps> = ({
 }) => {
   const colors = useColors();
   const [focused, setFocused] = useState(false);
-
-  const labelAnim = useRef(new Animated.Value(0)).current;
-
   const height =
     moderateScale(variant === "text" ? 50 : 45) *
     (size === "large" ? 1.2 : size === "small" ? 0.8 : 1);
 
+  const labelAnim = useRef(
+    new Animated.Value(height / moderateScale(variant === "text" ? 2.5 : 3.2))
+  ).current;
+
   React.useEffect(() => {
     if (focused || value) {
       Animated.timing(labelAnim, {
@@ -96,6 +98,7 @@ const TextField: React.FC<TextFieldProps> = ({
       paddingLeft: variant === "text" ? 0 : moderateScale(15),
       paddingRight: moderateScale(10),
       paddingTop: "11@vs",
+      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
       color: colors.black[1],
       zIndex: 10,
       // backgroundColor: "#284",
@@ -107,6 +110,7 @@ const TextField: React.FC<TextFieldProps> = ({
       paddingTop: "13@ms",
     },
     label: {
+      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
       position: "absolute",
       left: variant === "text" ? 0 : moderateScale(15),
       fontSize: focused || value ? "10@s" : "13@s",
@@ -213,9 +217,23 @@ const TextField: React.FC<TextFieldProps> = ({
               style={styles.input}
             />
           )}
-          {end && <View style={{ marginRight: 20 }}>{end}</View>}
+          {end && (
+            <View
+              style={{
+                marginRight: 20,
+                paddingTop: variant === "text" ? ms(13) : 0,
+              }}
+            >
+              {end}
+            </View>
+          )}
           {options && (
-            <View style={{ marginRight: 20 }}>
+            <View
+              style={{
+                marginRight: variant === "text" ? 0 : 20,
+                paddingTop: variant === "text" ? ms(13) : 0,
+              }}
+            >
               <Ionicons
                 name="chevron-down"
                 color={colors.textSecondary.main}
@@ -260,7 +278,6 @@ const TextField: React.FC<TextFieldProps> = ({
 export const TextField2: React.FC<TextFieldProps> = ({
   label,
   keyboardType,
-  variant,
   color = "primary",
   value,
   type,
@@ -284,33 +301,15 @@ export const TextField2: React.FC<TextFieldProps> = ({
   const colors = useColors();
   const [focused, _setFocused] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
-  const labelAnim = useRef(new Animated.Value(0)).current;
 
   const height = moderateScale(
     props.multiline ? 50 + (props.numberOfLines || 1) * 18 : 50
   );
 
   const setFocused = (value: boolean) => {
-    startTransition(() => {
-      _setFocused(value);
-    });
+    _setFocused(value);
   };
 
-  React.useEffect(() => {
-    if (focused || value) {
-      Animated.timing(labelAnim, {
-        toValue: verticalScale(5),
-        duration: 300,
-        useNativeDriver: false,
-      }).start();
-    } else {
-      Animated.timing(labelAnim, {
-        toValue: height / moderateScale(3),
-        duration: 300,
-        useNativeDriver: false,
-      }).start();
-    }
-  }, [focused, value]);
   const styles: any = ScaledSheet.create({
     root: {
       marginBottom: gutterBottom + "@vs",
@@ -337,13 +336,13 @@ export const TextField2: React.FC<TextFieldProps> = ({
       alignSelf: "stretch",
       paddingLeft: moderateScale(10),
       paddingRight: moderateScale(10),
-      color: colors.dark.light,
+      color: colors.dark.main,
       zIndex: 10,
       // backgroundColor: "#284",
     },
     inputText: {
       fontSize: "14@ms",
-      color: colors.dark.light,
+      color: colors.dark.main,
       paddingLeft: moderateScale(10),
     },
     placeholder: {

package/src/Components/Typography.tsx

@@ -1,54 +1,66 @@
-import React from "react";
-import { Text, StyleSheet } from "react-native";
-import { moderateScale, scale, verticalScale } from "react-native-size-matters";
+import React, { forwardRef } from "react";
+import { StyleSheet, Text } from "react-native";
+import { moderateScale, verticalScale } from "react-native-size-matters";
 import { useColors } from "../hooks";
 import { TypographyProps } from "../types";
+import { getConfig } from "../config/KeyManager";
 
-const Typography: React.FC<TypographyProps> = ({
-  children,
-  color = "dark",
-  style = {},
-  textCase = null,
-  variant = "body1",
-  align = "left",
-  gutterBottom = 0,
-  numberOfLines,
-  adjustsFontSizeToFit,
-  fontWeight = 400,
-}) => {
-  const colors: any = useColors();
-  const fontSize = {
-    h1: moderateScale(42),
-    h2: moderateScale(37),
-    h3: moderateScale(32),
-    h4: moderateScale(27),
-    h5: moderateScale(22),
-    h6: moderateScale(17),
-    body1: moderateScale(15),
-    body2: moderateScale(12),
-    caption: moderateScale(10),
-  };
-  const styles: any = StyleSheet.create({
-    text: {
-      fontSize: fontSize[variant],
-      marginBottom: verticalScale(gutterBottom) || 0,
-      color: colors[color]?.main || color,
-      textTransform: textCase,
-      alignItems: "center",
-      textAlign: align,
-      fontWeight: fontWeight.toString(),
+const Typography: React.FC<TypographyProps> = forwardRef(
+  (
+    {
+      children,
+      color = "dark",
+      style = {},
+      textCase = null,
+      variant = "body1",
+      align = "left",
+      gutterBottom = 0,
+      numberOfLines,
+      adjustsFontSizeToFit,
+      fontWeight = 400,
+      fontFamily, // NEW PROP ADDED
+      ...props
     },
-  });
-  return (
-    <Text
-      numberOfLines={numberOfLines}
-      adjustsFontSizeToFit={adjustsFontSizeToFit}
-      style={{ ...styles.text, ...style }}
-    >
-      {children}
-    </Text>
-  );
-};
+    ref
+  ) => {
+    const colors: any = useColors();
+    const fontSize = {
+      h1: moderateScale(42),
+      h2: moderateScale(37),
+      h3: moderateScale(32),
+      h4: moderateScale(27),
+      h5: moderateScale(22),
+      h6: moderateScale(17),
+      body1: moderateScale(15),
+      body2: moderateScale(12),
+      caption: moderateScale(10),
+    };
+
+    const styles: any = StyleSheet.create({
+      text: {
+        fontSize: fontSize[variant],
+        marginBottom: verticalScale(gutterBottom) || 0,
+        color: colors[color]?.main || color,
+        textTransform: textCase,
+        alignItems: "center",
+        textAlign: align,
+        fontWeight: fontWeight.toString(),
+        fontFamily: fontFamily || getConfig().DEFAULT_FONT_FAMILY || "System", // Use custom font if provided, else default
+      },
+    });
+
+    return (
+      <Text
+        ref={ref as any}
+        numberOfLines={numberOfLines}
+        adjustsFontSizeToFit={adjustsFontSizeToFit}
+        style={[styles.text, style]} // Ensures external styles are applied
+        {...props}
+      >
+        {children}
+      </Text>
+    );
+  }
+);
 
-<Typography color="#f90">col</Typography>;
 export default Typography;

package/src/config/KeyManager.ts

@@ -1,15 +1,16 @@
-type apikeys = {
+type configTypes = {
   GOOGLE_MAP_API_KEY?: string;
+  DEFAULT_FONT_FAMILY?: string;
 };
 
-let apiKey: apikeys = {
+let config: configTypes = {
   GOOGLE_MAP_API_KEY: "",
 };
 
-export function setApiKey(key: apikeys): void {
-  apiKey = key;
+export function setConfig(key: configTypes): void {
+  config = key;
 }
 
-export function getApiKey(): apikeys {
-  return apiKey;
+export function getConfig(): configTypes {
+  return config;
 }

package/src/config/index.ts

@@ -1,17 +1,19 @@
 // import * as fs from "fs";
 import { setExtraColors } from "../theme/colors";
 import { extraColorTypes } from "../types";
-import { setApiKey } from "./KeyManager";
+import { setConfig } from "./KeyManager";
 
 type configProps = {
   googleMapApiKey?: string;
   colors?: extraColorTypes;
+  fontFamily?: string;
 };
 
 export function initialize(config: configProps): void {
   try {
-    setApiKey({
+    setConfig({
       GOOGLE_MAP_API_KEY: config.googleMapApiKey,
+      DEFAULT_FONT_FAMILY: config.fontFamily,
     });
     if (config.colors) setExtraColors(config.colors);
   } catch (error) {

package/src/types.ts

@@ -2,7 +2,9 @@ import { ReactNode } from "react";
 import {
   NativeScrollEvent,
   NativeSyntheticEvent,
+  Text,
   TextInputProps,
+  TextProps,
   TextStyle,
   ViewStyle,
 } from "react-native";
@@ -252,7 +254,7 @@ export interface TextFieldProps extends TextInputProps {
   onBlur?: () => void;
 }
 
-export interface TypographyProps {
+export interface TypographyProps extends TextProps {
   children: ReactNode;
   color?: colorTypes | (string & {});
   style?: TextStyle | ViewStyle;
@@ -271,6 +273,7 @@ export interface TypographyProps {
   gutterBottom?: number;
   numberOfLines?: number;
   adjustsFontSizeToFit?: boolean;
+  fontFamily?: string;
   fontWeight?: 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 }