@hoddy-ui/core 1.1.0 → 1.1.1

package/next/index.ts

@@ -25,6 +25,7 @@ export * from "../src/Components/OTPInput";
 // export * from "../src/config";
 export * from "../src/hooks";
 export * from "../src/theme";
+export * from "../src/types";
 
 const HoddyUI = {
   initialize: initialize,

package/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/next",
-  "version": "2.0.34",
+  "version": "2.0.47",
   "description": "Core rich react native components written in typescript, with support for expo-router",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/core",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {

package/src/Components/Locator.tsx

@@ -12,11 +12,14 @@ import { LocatorProps } from "../types";
 import { getConfig } from "../config/KeyManager";
 import Typography from "./Typography";
 
-type predictionType = {
+export type predictionType = {
   id: string;
   description: string;
 };
-export const getPredictionsFromCoords = async (coords: any) => {
+export const getPredictionsFromCoords = async (coords: {
+  latitude: number;
+  longitude: number;
+}) => {
   const { GOOGLE_MAP_API_KEY } = getConfig();
 
   if (!GOOGLE_MAP_API_KEY)
@@ -44,6 +47,45 @@ export const getPredictionsFromCoords = async (coords: any) => {
   return p;
 };
 
+export const getPredictionsFromQuery = async (
+  query: string,
+  country: string
+) => {
+  const { GOOGLE_MAP_API_KEY } = getConfig();
+  const endpoint = `https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${query}&components=country:${country}&radius=20000&key=${GOOGLE_MAP_API_KEY}`;
+  const res = await (await fetch(endpoint)).json();
+
+  const p = [];
+  for (let key in res.predictions) {
+    const { description, place_id } = res.predictions[key];
+    p.push({
+      description,
+      id: place_id,
+    });
+  }
+  return p;
+};
+
+export const getLocationFromPlaceId = async (
+  place_id: string
+): Promise<{
+  formatted_address: string;
+  geometry: {
+    location: {
+      lat: number;
+      lng: number;
+    };
+  };
+}> => {
+  const { GOOGLE_MAP_API_KEY } = getConfig();
+  const res = await (
+    await fetch(
+      `https://maps.googleapis.com/maps/api/place/details/json?place_id=${place_id}&fields=formatted_address%2Cgeometry&key=${GOOGLE_MAP_API_KEY}`
+    )
+  ).json();
+  return res.result;
+};
+
 export const Locator: React.FC<LocatorProps> = ({
   variant = "contained",
   onLocationSelected,
@@ -84,17 +126,8 @@ export const Locator: React.FC<LocatorProps> = ({
     },
   });
   const search = async (query: string) => {
-    const endpoint = `https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${query}&components=country:${country}&radius=20000&key=${GOOGLE_MAP_API_KEY}`;
-    const res = await (await fetch(endpoint)).json();
-    const p = [];
-    for (let key in res.predictions) {
-      const { description, place_id } = res.predictions[key];
-      p.push({
-        description,
-        id: place_id,
-      });
-    }
-    setPrediction(p);
+    const predictions = await getPredictionsFromQuery(query, country);
+    setPrediction(predictions);
   };
 
   const locateMe = () => {
@@ -135,19 +168,14 @@ export const Locator: React.FC<LocatorProps> = ({
   };
   const locationPressed = async (loc: predictionType) => {
     setValue(loc.description);
-    const res = await (
-      await fetch(
-        `https://maps.googleapis.com/maps/api/place/details/json?place_id=${loc.id}&fields=formatted_address%2Cgeometry&key=${GOOGLE_MAP_API_KEY}`
-      )
-    ).json();
+    const res = await getLocationFromPlaceId(loc.id);
     onLocationSelected(
       {
-        latitude: res.result?.geometry.location.lat,
-        longitude: res.result?.geometry.location.lng,
-
+        latitude: res.geometry.location.lat,
+        longitude: res.geometry.location.lng,
         description: loc.description,
       },
-      res.result?.formatted_address
+      res?.formatted_address
     );
     setChanged(false);
     setPrediction([]);

package/src/Components/Popup.tsx

@@ -58,15 +58,18 @@ export const Popup: React.FC<PopupProps> = ({
       ...style,
     },
     content: {
-      paddingHorizontal: bare ? undefined : "10@ms",
+      paddingHorizontal: bare ? undefined : "15@ms",
       // flex: 1,
     },
     title: {
       flexDirection: "row",
       alignItems: "center",
-      paddingVertical: "5@ms",
-      paddingHorizontal: "10@ms",
-      marginBottom: "10@ms",
+      justifyContent: "center",
+      height: "50@ms",
+    },
+    titleIcon: {
+      position: "absolute",
+      left: "15@ms",
     },
     backdrop: {
       position: "absolute",
@@ -131,16 +134,16 @@ export const Popup: React.FC<PopupProps> = ({
                   <View style={styles.container}>
                     {!bare && (
                       <View style={styles.title}>
-                        <IconButton
-                          size={20}
-                          icon="close"
-                          onPress={closeAction}
-                        />
-                        <View style={{ flex: 1 }}>
-                          <Typography color="textSecondary" align="center">
-                            {title}
-                          </Typography>
+                        <View style={styles.titleIcon}>
+                          <IconButton
+                            size={20}
+                            icon="close"
+                            onPress={closeAction}
+                          />
                         </View>
+                        <Typography align="center" fontWeight={500}>
+                          {title}
+                        </Typography>
                       </View>
                     )}
 

package/src/Components/TextField.tsx

@@ -275,235 +275,245 @@ const TextField: React.FC<TextFieldProps> = ({
   );
 };
 
-export const TextField2: React.FC<TextFieldProps> = ({
-  label,
-  keyboardType,
-  color = "primary",
-  value,
-  type,
-  helperText,
-  onChangeText,
-  onSubmitEditing = () => {},
-  onFocus = () => {},
-  onBlur = () => {},
-  error,
-  start,
-  rounded,
-  disabled = false,
-  style = {},
-  inputStyles = {},
-  gutterBottom = 8,
-  placeholder,
-  end,
-  options,
-  ...props
-}) => {
-  const colors = useColors();
-  const [focused, _setFocused] = useState(false);
-  const [showPassword, setShowPassword] = useState(false);
+export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
+  (
+    {
+      label,
+      keyboardType,
+      color = "primary",
+      value,
+      type,
+      helperText,
+      onChangeText,
+      onSubmitEditing = () => {},
+      onFocus = () => {},
+      onBlur = () => {},
+      error,
+      start,
+      rounded,
+      disabled = false,
+      style = {},
+      inputStyles = {},
+      gutterBottom = 8,
+      placeholder,
+      end,
+      options,
+      multiline,
+      ...props
+    },
+    ref
+  ) => {
+    const colors = useColors();
+    const [focused, _setFocused] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
 
-  const height = moderateScale(
-    props.multiline ? 50 + (props.numberOfLines || 1) * 18 : 50
-  );
+    const height = moderateScale(
+      multiline ? 50 + (props.numberOfLines || 1) * 18 : 50
+    );
 
-  const setFocused = (value: boolean) => {
-    _setFocused(value);
-  };
+    const setFocused = (value: boolean) => {
+      _setFocused(value);
+    };
 
-  const styles: any = ScaledSheet.create({
-    root: {
-      marginBottom: gutterBottom + "@vs",
-      ...style,
-    },
-    container: {
-      height: height,
-      overflow: "hidden",
-      flexDirection: "row",
-      borderColor: error
-        ? colors.error.main
-        : focused
-        ? colors[color].main
-        : colors.white[5],
-      borderWidth: error ? 1 : focused ? 2 : 1,
-      width: "100%",
-      borderRadius: rounded ? 30 : 10,
-      alignItems: "center",
-      ...inputStyles,
-    },
-    input: {
-      fontSize: "14@s",
-      flex: 1,
-      alignSelf: "stretch",
-      paddingLeft: moderateScale(10),
-      paddingRight: moderateScale(10),
-      color: colors.dark.main,
-      zIndex: 10,
-      // backgroundColor: "#284",
-    },
-    inputText: {
-      fontSize: "14@ms",
-      color: colors.dark.main,
-      paddingLeft: moderateScale(10),
-    },
-    placeholder: {
-      fontSize: "14@ms",
-      color: colors.textSecondary.main,
-      paddingLeft: moderateScale(10),
-    },
-    label: {},
-    helperText: {
-      paddingHorizontal: "15@s",
-      color: focused ? colors[color].dark : "#fffa",
-      paddingTop: "4@ms",
-    },
-    error: {
-      paddingLeft: 10,
-      paddingRight: 10,
-      paddingTop: 5,
-      flexDirection: "row",
-      alignItems: "center",
-    },
-    errorText: {
-      fontSize: 12,
-      marginLeft: 10,
-    },
-  });
-  const formProps: any =
-    type === "email"
-      ? {
-          textContentType: "emailAddress",
-          keyboardType: "email-address",
-          autoCapitalize: "none",
-          autoCompleteType: "email",
-        }
-      : type === "number"
-      ? {
-          keyboardType: "numeric",
-        }
-      : type === "tel"
-      ? {
-          textContentType: "telephoneNumber",
-          keyboardType: "phone-pad",
-        }
-      : type === "search"
-      ? {
-          keyboardType: "web-search",
-          returnKeyType: "search",
-          autoCapitalize: "none",
-        }
-      : type === "password"
-      ? {
-          secureTextEntry: !showPassword,
-          autoCompleteType: "password",
-          autoCapitalize: "none",
-          textContentType: "password",
-        }
-      : {};
-  return (
-    <>
-      <View style={styles.root}>
-        {label && (
-          <Typography variant="body1" color="textSecondary" gutterBottom={7}>
-            {label}
-          </Typography>
-        )}
-        <TouchableOpacity
-          onPress={() => setFocused(true)}
-          style={styles.container}
-        >
-          {start}
-
-          {options ? (
-            <>
-              {value ? (
-                <Typography style={styles.inputText}>
-                  {options.find((cur) => cur.value === value)?.label}
-                </Typography>
-              ) : (
-                <Typography style={styles.placeholder}>
-                  {placeholder}
-                </Typography>
-              )}
-              <Ionicons
-                name="chevron-down"
-                size={24}
-                style={{ marginLeft: "auto", marginRight: 15 }}
-                color={colors.dark.light}
-              />
-            </>
-          ) : (
-            <TextInput
-              onFocus={() => {
-                onFocus();
-                setFocused(true);
-              }}
-              onBlur={() => {
-                onBlur();
-                setFocused(false);
-              }}
-              value={value}
-              onChangeText={onChangeText}
-              key={showPassword ? "show" : "hide"}
-              keyboardType={keyboardType}
-              placeholderTextColor={colors.textSecondary.main}
-              editable={!disabled}
-              placeholder={placeholder}
-              selectTextOnFocus={!disabled}
-              onSubmitEditing={onSubmitEditing}
-              {...formProps}
-              {...props}
-              style={styles.input}
-            />
+    const styles: any = ScaledSheet.create({
+      root: {
+        marginBottom: gutterBottom + "@vs",
+        ...style,
+      },
+      container: {
+        height: height,
+        overflow: "hidden",
+        flexDirection: "row",
+        borderColor: error
+          ? colors.error.main
+          : focused
+          ? colors[color].main
+          : colors.white[4],
+        borderWidth: error ? 1 : focused ? 2 : 1,
+        width: "100%",
+        borderRadius: rounded ? 30 : 10,
+        alignItems: multiline ? "flex-start" : "center",
+        paddingVertical: multiline ? 10 : 0,
+        ...inputStyles,
+      },
+      input: {
+        fontSize: "14@s",
+        flex: 1,
+        alignSelf: "stretch",
+        paddingLeft: moderateScale(10),
+        paddingRight: moderateScale(10),
+        color: colors.dark.main,
+        zIndex: 10,
+        // backgroundColor: "#284",
+      },
+      inputText: {
+        fontSize: "14@ms",
+        color: colors.dark.main,
+        paddingLeft: moderateScale(10),
+      },
+      placeholder: {
+        fontSize: "14@ms",
+        color: colors.textSecondary.light,
+        paddingLeft: moderateScale(10),
+      },
+      label: {},
+      helperText: {
+        paddingHorizontal: "15@s",
+        color: focused ? colors[color].dark : "#fffa",
+        paddingTop: "4@ms",
+      },
+      error: {
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingTop: 5,
+        flexDirection: "row",
+        alignItems: "center",
+      },
+      errorText: {
+        fontSize: 12,
+        marginLeft: 10,
+      },
+    });
+    const formProps: any =
+      type === "email"
+        ? {
+            textContentType: "emailAddress",
+            keyboardType: "email-address",
+            autoCapitalize: "none",
+            autoCompleteType: "email",
+          }
+        : type === "number"
+        ? {
+            keyboardType: "numeric",
+          }
+        : type === "tel"
+        ? {
+            textContentType: "telephoneNumber",
+            keyboardType: "phone-pad",
+          }
+        : type === "search"
+        ? {
+            keyboardType: "web-search",
+            returnKeyType: "search",
+            autoCapitalize: "none",
+          }
+        : type === "password"
+        ? {
+            secureTextEntry: !showPassword,
+            autoCompleteType: "password",
+            autoCapitalize: "none",
+            textContentType: "password",
+          }
+        : {};
+    return (
+      <>
+        <View style={styles.root}>
+          {label && (
+            <Typography variant="body1" color="textSecondary" gutterBottom={7}>
+              {label}
+            </Typography>
           )}
+          <TouchableOpacity
+            onPress={() => setFocused(true)}
+            style={styles.container}
+          >
+            <View style={{ marginTop: multiline ? 5 : 0 }}>{start}</View>
 
-          {end ? (
-            <View style={{ marginRight: 20 }}>{end}</View>
-          ) : (
-            type === "password" && (
-              <TouchableOpacity
-                style={{ marginRight: 20 }}
-                onPress={() => setShowPassword(!showPassword)}
-              >
+            {options ? (
+              <>
+                {value ? (
+                  <Typography style={styles.inputText}>
+                    {options.find((cur) => cur.value === value)?.label}
+                  </Typography>
+                ) : (
+                  <Typography style={styles.placeholder}>
+                    {placeholder}
+                  </Typography>
+                )}
                 <Ionicons
-                  name={showPassword ? "eye-outline" : "eye-off-outline"}
+                  name="chevron-down"
                   size={24}
-                  color={colors.textSecondary.main}
+                  style={{ marginLeft: "auto", marginRight: 15 }}
+                  color={colors.dark.light}
                 />
-              </TouchableOpacity>
-            )
-          )}
-        </TouchableOpacity>
-        {helperText && (
-          <Typography
-            color="textSecondary"
-            style={styles.helperText}
-            variant="caption"
-          >
-            {helperText}
-          </Typography>
-        )}
-        {error && (
-          <View style={styles.error}>
-            <MaterialIcons name="error" color={colors.error.main} size={16} />
-            <Typography style={styles.errorText} color="error">
-              {error}
+              </>
+            ) : (
+              <TextInput
+                ref={ref}
+                onFocus={() => {
+                  onFocus();
+                  setFocused(true);
+                }}
+                onBlur={() => {
+                  onBlur();
+                  setFocused(false);
+                }}
+                value={value}
+                onChangeText={onChangeText}
+                key={showPassword ? "show" : "hide"}
+                keyboardType={keyboardType}
+                placeholderTextColor={colors.textSecondary.light}
+                editable={!disabled}
+                placeholder={placeholder}
+                selectTextOnFocus={!disabled}
+                onSubmitEditing={onSubmitEditing}
+                multiline={multiline}
+                extAlignVertical={multiline ? "top" : "center"}
+                {...formProps}
+                {...props}
+                style={styles.input}
+              />
+            )}
+
+            {end ? (
+              <View style={{ marginRight: 20 }}>{end}</View>
+            ) : (
+              type === "password" && (
+                <TouchableOpacity
+                  style={{ marginRight: 20 }}
+                  onPress={() => setShowPassword(!showPassword)}
+                >
+                  <Ionicons
+                    name={showPassword ? "eye-outline" : "eye-off-outline"}
+                    size={24}
+                    color={colors.textSecondary.main}
+                  />
+                </TouchableOpacity>
+              )
+            )}
+          </TouchableOpacity>
+          {helperText && (
+            <Typography
+              color="textSecondary"
+              style={styles.helperText}
+              variant="caption"
+            >
+              {helperText}
             </Typography>
-          </View>
+          )}
+          {error && (
+            <View style={styles.error}>
+              <MaterialIcons name="error" color={colors.error.main} size={16} />
+              <Typography style={styles.errorText} color="error">
+                {error}
+              </Typography>
+            </View>
+          )}
+        </View>
+        {options && (
+          <SelectMenu
+            options={options}
+            value={value}
+            open={focused}
+            onClose={() => setFocused(false)}
+            label={label}
+            helperText={helperText}
+            onChange={onChangeText!}
+          />
         )}
-      </View>
-      {options && (
-        <SelectMenu
-          options={options}
-          value={value}
-          open={focused}
-          onClose={() => setFocused(false)}
-          label={label}
-          helperText={helperText}
-          onChange={onChangeText!}
-        />
-      )}
-    </>
-  );
-};
+      </>
+    );
+  }
+);
 
 export default TextField;

package/src/Components/Typography.tsx

@@ -15,7 +15,6 @@ const Typography: React.FC<TypographyProps> = forwardRef(
       variant = "body1",
       align = "left",
       gutterBottom = 0,
-      numberOfLines,
       adjustsFontSizeToFit,
       fontWeight = 400,
       fontFamily, // NEW PROP ADDED
@@ -52,7 +51,6 @@ const Typography: React.FC<TypographyProps> = forwardRef(
     return (
       <Text
         ref={ref as any}
-        numberOfLines={numberOfLines}
         adjustsFontSizeToFit={adjustsFontSizeToFit}
         style={[styles.text, style]} // Ensures external styles are applied
         {...props}