@hoddy-ui/core 1.1.4 → 2.0.35

package/src/Components/SelectMenu.tsx

@@ -1,11 +1,11 @@
 import { MaterialIcons } from "@expo/vector-icons";
 import React, { useCallback, useState } from "react";
-import { FlatList, Modal, TouchableOpacity, View } from "react-native";
+import { FlatList, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ScaledSheet } from "react-native-size-matters";
 import { useColors } from "../hooks";
 import { SelectMenuProps } from "../types";
-import Button from "./Button";
+import { Popup } from "./Popup";
 import TextField from "./TextField";
 import Typography from "./Typography";
 
@@ -19,22 +19,15 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
   label,
   secondary,
   helperText,
+  searchEnabled = false,
+  searchPlaceholder = "Search",
 }) => {
   const colors = useColors();
   const { bottom } = useSafeAreaInsets();
 
   const [search, setSearch] = useState("");
   const styles: any = ScaledSheet.create({
-    root: {
-      backgroundColor: colors.white[1],
-      flex: 1,
-    },
-    content: {
-      flex: 1,
-      paddingHorizontal: "10@ms",
-    },
     header: {
-      paddingTop: "80@ms",
       marginBottom: "20@vs",
     },
 
@@ -46,11 +39,6 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
       alignItems: "center",
       marginBottom: "10@vs",
     },
-    footer: {
-      paddingBottom: bottom,
-      paddingHorizontal: "15@ms",
-      paddingTop: "15@ms",
-    },
   });
 
   const renderItem = useCallback(
@@ -70,6 +58,7 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
         {item.start && <View style={{ marginRight: 10 }}>{item.start}</View>}
         <View style={{ flex: 1 }}>
           <Typography
+            variant="body2"
             style={{
               color: item.value === value ? colors.blue.light : colors.black[2],
             }}
@@ -102,51 +91,44 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
     [value, colors]
   );
   return (
-    <Modal visible={open} animationType="slide" onRequestClose={onClose}>
-      <View style={styles.root}>
-        <View style={styles.content}>
-          <View style={styles.header}>
-            <Typography variant="h5" gutterBottom={5} fontWeight={700}>
-              {label}
+    <Popup
+      open={open}
+      onClose={onClose}
+      title={label}
+      disableAutoKeyboardManagement
+    >
+      <View style={styles.content}>
+        <View style={styles.header}>
+          {helperText && (
+            <Typography variant="body2" color="textSecondary" gutterBottom={5}>
+              {helperText}
             </Typography>
-            {helperText ? (
-              <Typography variant="body2" color="textSecondary">
-                {helperText}
-              </Typography>
-            ) : null}
-
+          )}
+          {searchEnabled && (
             <TextField
-              label="Search"
+              label={searchPlaceholder}
               value={search}
               type="search"
               onChangeText={setSearch}
               variant="outlined"
             />
-          </View>
-          <FlatList
-            removeClippedSubviews
-            keyExtractor={(item) => item.value}
-            renderItem={renderItem}
-            data={options
-              .filter((item) =>
-                search.length > 1
-                  ? item.label.toLowerCase().indexOf(search.toLowerCase()) > -1
-                  : item
-              )
-              .sort((a, b) => a.label.localeCompare(b.label))}
-          />
-        </View>
-        <View style={styles.footer}>
-          <Button
-            color="error"
-            variant="outlined"
-            fullWidth
-            title="Close"
-            onPress={onClose}
-          />
+          )}
         </View>
+        <FlatList
+          removeClippedSubviews
+          keyExtractor={(item) => item.value}
+          bounces={false}
+          renderItem={renderItem}
+          data={options
+            .filter((item) =>
+              search.length > 1
+                ? item.label.toLowerCase().indexOf(search.toLowerCase()) > -1
+                : item
+            )
+            .sort((a, b) => a.label.localeCompare(b.label))}
+        />
       </View>
-    </Modal>
+    </Popup>
   );
 };
 

package/src/Components/TextField.tsx

@@ -7,9 +7,9 @@ import {
   ms,
   verticalScale,
 } from "react-native-size-matters";
-import { getConfig } from "../config/KeyManager";
 import { useColors } from "../hooks";
 import { TextFieldProps } from "../types";
+import { getFontFamily } from "../utility";
 import SelectMenu from "./SelectMenu";
 import Typography from "./Typography";
 
@@ -35,6 +35,7 @@ const TextField: React.FC<TextFieldProps> = ({
   gutterBottom = 0,
   end,
   options,
+  selectMenuProps,
   ...props
 }) => {
   const colors = useColors();
@@ -64,7 +65,7 @@ const TextField: React.FC<TextFieldProps> = ({
   }, [focused, value]);
   const styles: any = ScaledSheet.create({
     root: {
-      marginBottom: gutterBottom + "@vs",
+      marginBottom: ms(gutterBottom),
       width: "100%",
       ...style,
     },
@@ -98,7 +99,7 @@ const TextField: React.FC<TextFieldProps> = ({
       paddingLeft: variant === "text" ? 0 : moderateScale(15),
       paddingRight: moderateScale(10),
       paddingTop: "11@vs",
-      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
+      fontFamily: getFontFamily(400),
       color: colors.black[1],
       zIndex: 10,
       // backgroundColor: "#284",
@@ -110,7 +111,7 @@ const TextField: React.FC<TextFieldProps> = ({
       paddingTop: "13@ms",
     },
     label: {
-      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
+      fontFamily: getFontFamily(400),
       position: "absolute",
       left: variant === "text" ? 0 : moderateScale(15),
       fontSize: focused || value ? "10@s" : "13@s",
@@ -269,6 +270,7 @@ const TextField: React.FC<TextFieldProps> = ({
           label={label}
           helperText={helperText}
           onChange={onChangeText!}
+          {...selectMenuProps}
         />
       )}
     </>
@@ -279,6 +281,7 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
   (
     {
       label,
+      labelProps,
       keyboardType,
       color = "primary",
       value,
@@ -299,6 +302,7 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
       end,
       options,
       multiline,
+      selectMenuProps,
       ...props
     },
     ref
@@ -317,7 +321,7 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
 
     const styles: any = ScaledSheet.create({
       root: {
-        marginBottom: gutterBottom + "@vs",
+        marginBottom: ms(gutterBottom),
         ...style,
       },
       container: {
@@ -409,7 +413,12 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
       <>
         <View style={styles.root}>
           {label && (
-            <Typography variant="body1" color="textSecondary" gutterBottom={7}>
+            <Typography
+              variant="body2"
+              color="textSecondary"
+              gutterBottom={7}
+              {...labelProps}
+            >
               {label}
             </Typography>
           )}
@@ -509,6 +518,7 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
             label={label}
             helperText={helperText}
             onChange={onChangeText!}
+            {...selectMenuProps}
           />
         )}
       </>

package/src/Components/Typography.tsx

@@ -1,9 +1,10 @@
 import React, { forwardRef } from "react";
 import { StyleSheet, Text } from "react-native";
-import { moderateScale, verticalScale } from "react-native-size-matters";
+import { moderateScale, ms, verticalScale } from "react-native-size-matters";
 import { useColors } from "../hooks";
 import { TypographyProps } from "../types";
 import { getConfig } from "../config/KeyManager";
+import { getFontFamily } from "../utility";
 
 const Typography: React.FC<TypographyProps> = forwardRef(
   (
@@ -11,40 +12,42 @@ const Typography: React.FC<TypographyProps> = forwardRef(
       children,
       color = "dark",
       style = {},
-      textCase = null,
+      textCase,
       variant = "body1",
       align = "left",
       gutterBottom = 0,
       adjustsFontSizeToFit,
       fontWeight = 400,
       fontFamily, // NEW PROP ADDED
+      fontSize,
       ...props
     },
     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 _fontSize = {
+      h1: ms(42),
+      h2: ms(37),
+      h3: ms(32),
+      h4: ms(27),
+      h5: ms(22),
+      h6: ms(17),
+      body1: ms(15),
+      body2: ms(12),
+      caption: ms(10),
     };
-
+    const f = fontSize || _fontSize[variant];
     const styles: any = StyleSheet.create({
       text: {
-        fontSize: fontSize[variant],
-        marginBottom: verticalScale(gutterBottom) || 0,
+        lineHeight: f * 1.2,
+        fontSize: f,
+        marginBottom: ms(gutterBottom) || 0,
         color: colors[color]?.main || color,
         textTransform: textCase,
         alignItems: "center",
         textAlign: align,
         fontWeight: fontWeight,
-        fontFamily: fontFamily || getConfig().DEFAULT_FONT_FAMILY || undefined, // Use custom font if provided, else default
+        fontFamily: fontFamily || getFontFamily(fontWeight),
       },
     });
 

package/src/config/KeyManager.ts

@@ -1,6 +1,11 @@
 type configTypes = {
   GOOGLE_MAP_API_KEY?: string;
-  DEFAULT_FONT_FAMILY?: string;
+  TYPOGRAPHY?: {
+    fontFamily?: string;
+    fontWeights?: {
+      [K in 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]?: string;
+    };
+  };
   EDGE_TO_EDGE?: boolean;
 };
 

package/src/config/index.ts

@@ -3,18 +3,53 @@ import { setExtraColors } from "../theme/colors";
 import { extraColorTypes } from "../types";
 import { setConfig } from "./KeyManager";
 
+/**
+ * Configuration options for the Hoddy UI library
+ *
+ * @example
+ * ```typescript
+ * initialize({
+ *   googleMapApiKey: "AIzaSyBxxxxxxxxxxxxxxxxxxxxxx",
+ *   edgeToEdge: true,
+ *   colors: {
+ *     primary: "#007AFF",
+ *     secondary: "#34C759"
+ *   },
+ *   typography: {
+ *     fontFamily: "Inter",
+ *     fontWeights: {
+ *       400: "Inter-Regular",
+ *       500: "Inter-Medium",
+ *       600: "Inter-SemiBold",
+ *       700: "Inter-Bold"
+ *     }
+ *   }
+ * });
+ * ```
+ */
 type configProps = {
+  /** Google Maps API key for map components */
   googleMapApiKey?: string;
+  /** Custom color palette overrides */
   colors?: extraColorTypes;
-  fontFamily?: string;
+  /** Enable edge-to-edge display mode */
   edgeToEdge?: boolean;
+  /** Typography settings */
+  typography?: {
+    /** Primary font family */
+    fontFamily?: string;
+    /** Font family mappings for each weight (Android support) */
+    fontWeights?: {
+      [K in 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]?: string;
+    };
+  };
 };
 
 export function initialize(config: configProps): void {
   try {
     setConfig({
       GOOGLE_MAP_API_KEY: config.googleMapApiKey,
-      DEFAULT_FONT_FAMILY: config.fontFamily,
+      TYPOGRAPHY: config.typography,
       EDGE_TO_EDGE: config.edgeToEdge ?? false,
     });
     if (config.colors) setExtraColors(config.colors);

package/src/hooks.ts

@@ -1,8 +1,9 @@
 import { useContext } from "react";
-import { Dimensions, Platform } from "react-native";
-import { vs } from "react-native-size-matters";
+import { Platform, useColorScheme } from "react-native";
 import { UIThemeContext } from "./theme";
 import colors from "./theme/colors";
+import { ThemeModes, ThemeTypes } from "./types";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 export const useColors = () => {
   const { themeState } = useContext(UIThemeContext);
@@ -13,13 +14,26 @@ export const useTheme = () => {
   const { themeState } = useContext(UIThemeContext);
   return themeState.value;
 };
+
+export const useThemeContext = () => {
+  const { themeState: theme, themeDispatch } = useContext(UIThemeContext);
+  const colorScheme: ThemeTypes = useColorScheme()!;
+
+  const setTheme = (theme: ThemeModes) => {
+    if (theme === "default") {
+      themeDispatch?.({ type: "default", payload: colorScheme });
+    } else {
+      themeDispatch?.({ type: theme });
+    }
+  };
+  return { theme, setTheme };
+};
+
 export const useNavScreenOptions = (type: "stack" | "tab" | "drawer") => {
   const colors = useColors();
-  const theme = useTheme();
   const options: any = {
     stack: {
       headerShown: false,
-
       headerStyle: {
         backgroundColor: colors.white[1],
       },
@@ -37,15 +51,12 @@ export const useNavScreenOptions = (type: "stack" | "tab" | "drawer") => {
       headerShown: false,
       headerTintColor: colors.dark.main,
       tabBarStyle: {
-        borderTopColor: theme === "dark" ? colors.light.main : colors.white[2],
+        borderTopColor: colors.white[2],
+        borderColor: colors.white[2],
         borderTopWidth: 1,
-        // shadowColor: "#000",
-        // shadowOffset: { height: -3, width: 0 },
-        // shadowRadius: 7,
-        // shadowOpacity: 0.1,
         backgroundColor: colors.white[1],
       },
-      tabBarActiveTintColor: colors.blue.main,
+      tabBarActiveTintColor: colors.primary.main,
       tabBarInactiveTintColor: colors.textSecondary.main,
       tabBarLabelStyle: {
         // fontSize: ms(12),
@@ -70,9 +81,5 @@ export const useNavScreenOptions = (type: "stack" | "tab" | "drawer") => {
     },
   };
 
-  if (Platform.OS === "android") {
-    options.tab.tabBarStyle.height = Dimensions.get("screen").height * 0.08;
-    options.tab.tabBarStyle.paddingBottom = vs(15);
-  }
   return options[type];
 };

package/src/theme/index.tsx

@@ -24,7 +24,7 @@ function themeReducer(
   { type, payload }: ThemeActionTypes
 ): ThemeState {
   // Platform
-
+  AsyncStorage.setItem("theme", type);
   switch (type) {
     case "dark":
       return { mode: "dark", value: "dark" };
@@ -45,12 +45,20 @@ const ConfigureSystemUI = () => {
     const config = getConfig();
     if (colors) {
       SystemUI.setBackgroundColorAsync(colors.white[1]);
-      if (Platform.OS === "android" && !config.EDGE_TO_EDGE) {
-        NavigationBar.setBackgroundColorAsync(colors.white[1]);
-        if (theme === "dark") {
-          NavigationBar.setButtonStyleAsync("light");
+      if (Platform.OS === "android") {
+        if (config.EDGE_TO_EDGE) {
+          if (theme === "dark") {
+            NavigationBar.setStyle("light");
+          } else {
+            NavigationBar.setStyle("dark");
+          }
         } else {
-          NavigationBar.setButtonStyleAsync("dark");
+          NavigationBar.setBackgroundColorAsync(colors.white[1]);
+          if (theme === "dark") {
+            NavigationBar.setButtonStyleAsync("light");
+          } else {
+            NavigationBar.setButtonStyleAsync("dark");
+          }
         }
       }
     }

package/src/types.ts

@@ -2,6 +2,7 @@ import { ReactNode } from "react";
 import {
   NativeScrollEvent,
   NativeSyntheticEvent,
+  StyleProp,
   TextInputProps,
   TextProps,
   TextStyle,
@@ -54,7 +55,7 @@ export interface ThemeState {
 
 export interface ThemeContext {
   themeState: ThemeState;
-  themeDispatch?: any;
+  themeDispatch?: (action: ThemeActionTypes) => void;
 }
 export interface ThemeProviderProps {
   children: ReactNode;
@@ -117,7 +118,7 @@ export interface LinkButtonProps {
   style?: TextStyle & ViewStyle;
   color?: colorTypes;
   fontSize?: number;
-  fontWeight?: string;
+  fontWeight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
   disabled?: boolean;
   onPress?: () => void;
 }
@@ -214,6 +215,9 @@ export interface PopupProps {
   open: boolean;
   onClose?: () => void;
   style?: ViewStyle;
+  disableAutoKeyboardManagement?: boolean;
+  onModalShow?: () => void;
+  onModalHide?: () => void;
 }
 
 export interface SpinnerProps {
@@ -226,6 +230,7 @@ export interface SpinnerProps {
 
 export interface TextFieldProps extends TextInputProps {
   label?: string;
+  labelProps?: TypographyProps;
   variant?: "outlined" | "text" | "contained";
   color?: colorTypes;
   size?: "small" | "normal" | "large";
@@ -248,12 +253,13 @@ export interface TextFieldProps extends TextInputProps {
   }[];
   onFocus?: () => void;
   onBlur?: () => void;
+  selectMenuProps?: Partial<SelectMenuProps>;
 }
 
 export interface TypographyProps extends TextProps {
   children: ReactNode;
   color?: colorTypes | (string & {});
-  style?: TextStyle | ViewStyle;
+  style?: StyleProp<TextStyle | ViewStyle>;
   textCase?: "capitalize" | "uppercase" | "lowercase" | undefined;
   variant?:
     | "caption"
@@ -270,6 +276,7 @@ export interface TypographyProps extends TextProps {
   numberOfLines?: number;
   adjustsFontSizeToFit?: boolean;
   fontFamily?: string;
+  fontSize?: number;
   fontWeight?: 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 }
 
@@ -288,6 +295,8 @@ export interface SelectMenuProps {
   label?: string;
   secondary?: string;
   helperText?: string;
+  searchEnabled?: boolean;
+  searchPlaceholder?: string;
 }
 
 export interface OTPInputProps {

package/src/utility.ts

@@ -0,0 +1,11 @@
+import { getConfig } from "./config/KeyManager";
+
+export const getFontFamily = (
+  fontWeight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
+) => {
+  return (
+    getConfig().TYPOGRAPHY?.fontWeights?.[fontWeight] ||
+    getConfig().TYPOGRAPHY?.fontFamily ||
+    undefined
+  );
+};