@hoddy-ui/core 1.0.0

package/index.ts

@@ -0,0 +1,15 @@
+// Components
+export { default as AdaptiveStatusBar } from "./src/Components/AdaptiveStatusBar";
+export { default as AlertX } from "./src/Components/AlertX";
+export { default as Avatar } from "./src/Components/Avatar";
+export * from "./src/Components/Button";
+export { default as Button } from "./src/Components/Button";
+export { default as Spinner } from "./src/Components/Spinner";
+export * from "./src/Components/TextField";
+export { default as TextField } from "./src/Components/TextField";
+export { default as Typography } from "./src/Components/Typography";
+export { default as SafeAreaView } from "./src/Components/SafeAreaView";
+export { default as SelectMenu } from "./src/Components/SelectMenu";
+// Others
+export * from "./src/hooks";
+export * from "./src/theme/index";

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@hoddy-ui/core",
+  "version": "1.0.0",
+  "description": "Core rich react native components written in typescript",
+  "main": "index.ts",
+  "repository": {
+    "directory": "packages/core",
+    "type": "git",
+    "url": "https://github.com/kinghoddy/hoddy-ui"
+  },
+  "author": "Hoddy inc",
+  "license": "MIT",
+  "private": false,
+  "peerDependencies": {
+    "@expo/vector-icons": "^13.0.0",
+    "@react-native-async-storage/async-storage": "^1.18.1",
+    "@react-navigation/native": "^6.1.6",
+    "expo-navigation-bar": "^2.1.1",
+    "expo-system-ui": "^2.2.1",
+    "react": "^18.2.0",
+    "react-native": "^0.71.8",
+    "react-native-safe-area-context": "^4.5.3",
+    "react-native-size-matters": "^0.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.6",
+    "@types/react-native": "^0.72.0",
+    "typescript": "^5.0.4"
+  },
+  "dependencies": {},
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/Components/AdaptiveStatusBar.tsx

@@ -0,0 +1,38 @@
+import { useFocusEffect } from "@react-navigation/native";
+import React, { useState } from "react";
+import { Platform, StatusBar } from "react-native";
+import { useColors, useTheme } from "../hooks";
+
+const AdaptiveStatusBar = ({ translucent = false }) => {
+  const [focused, setFocused] = useState(false);
+  const colors = useColors();
+  const theme = useTheme();
+  useFocusEffect(
+    React.useCallback(() => {
+      // setFocused(true);
+      StatusBar.setBarStyle(
+        theme === "dark" ? "light-content" : "dark-content"
+      );
+      if (Platform.OS === "android") {
+        StatusBar.setBackgroundColor(
+          colors.white[1] + (translucent ? "0" : "")
+        );
+        StatusBar.setTranslucent(true);
+      }
+      // return () => setFocused(false);
+    }, [theme])
+  );
+
+  React.useEffect(() => {
+    // setFocused(true);
+    StatusBar.setBarStyle(theme === "dark" ? "light-content" : "dark-content");
+    if (Platform.OS === "android") {
+      StatusBar.setBackgroundColor(colors.white[1] + (translucent ? "0" : ""));
+      StatusBar.setTranslucent(true);
+    }
+    // return () => setFocused(false);
+  }, [theme]);
+  return <></>;
+};
+
+export default AdaptiveStatusBar;

package/src/Components/AlertX.tsx

@@ -0,0 +1,60 @@
+import { MaterialIcons } from "@expo/vector-icons";
+import React from "react";
+import { View } from "react-native";
+import { ScaledSheet } from "react-native-size-matters";
+import { useColors } from "../hooks";
+import { AlertXProps } from "../types";
+import Typography from "./Typography";
+
+const AlertX: React.FC<AlertXProps> = ({
+  type = "info",
+  variant = "contained",
+  title,
+  gutterBottom = 0,
+  body,
+  style = {},
+}) => {
+  const colors = useColors();
+
+  const styles: any = ScaledSheet.create({
+    container: {
+      padding: 20,
+      paddingTop: 10,
+      paddingBottom: 10,
+      borderRadius: 8,
+      alignItems: "center",
+      flexDirection: "row",
+      marginBottom: gutterBottom + "@ms",
+      backgroundColor: colors[type].main + (variant === "contained" ? "" : "3"),
+    },
+    title: {
+      color: variant === "contained" ? "#fff" : colors[type].main,
+    },
+    body: {
+      color: variant === "contained" ? "#fff" : colors[type].main,
+    },
+  });
+  return (
+    <View style={{ ...styles.container, ...style }}>
+      <View style={{ width: "80%" }}>
+        <Typography style={styles.title} gutterBottom={3} fontWeight={700}>
+          {title}
+        </Typography>
+        {body && (
+          <Typography fontWeight={700} variant="body2" style={styles.body}>
+            {body}
+          </Typography>
+        )}
+      </View>
+      <View style={{ marginLeft: "auto" }}>
+        <MaterialIcons
+          color={variant === "contained" ? "#fff" : colors[type].main}
+          size={36}
+          name={type === "success" ? "check" : type}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default AlertX;

package/src/Components/Avatar.tsx

@@ -0,0 +1,57 @@
+import { AntDesign } from "@expo/vector-icons";
+import React from "react";
+import { Image, View } from "react-native";
+import { ScaledSheet } from "react-native-size-matters";
+import { useColors } from "../hooks";
+import { AvatarProps } from "../types";
+import Typography from "./Typography";
+
+const Avatar: React.FC<AvatarProps> = ({
+  color = "dark",
+  label,
+  variant = "contained",
+  source,
+  size = 48,
+  style = {},
+}) => {
+  const colors = useColors();
+  const styles: any = ScaledSheet.create({
+    root: {
+      borderRadius: 150,
+      height: size + "@ms",
+      width: size + "@ms",
+      alignItems: "center",
+      justifyContent: "center",
+      overflow: "hidden",
+      borderWidth: variant === "outlined" ? 5 : 0,
+      borderColor: variant === "outlined" ? "#fff" : "#0000",
+      backgroundColor:
+        variant === "outlined"
+          ? null
+          : label
+          ? colors[color].main
+          : colors.white[4],
+      ...style,
+    },
+    image: {
+      height: "110%",
+      width: "110%",
+    },
+  });
+
+  return (
+    <View style={styles.root}>
+      {source ? (
+        <Image resizeMode="cover" style={styles.image} source={source} />
+      ) : label ? (
+        <Typography style={{ color: colors[color].text }}>
+          {label[0]}
+        </Typography>
+      ) : (
+        <AntDesign name="user" color="#fff" size={Math.round(size / 1.5)} />
+      )}
+    </View>
+  );
+};
+
+export default Avatar;

package/src/Components/Button.tsx

@@ -0,0 +1,174 @@
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import React from "react";
+import { ActivityIndicator, Text, TouchableOpacity } from "react-native";
+import { ScaledSheet, moderateScale } from "react-native-size-matters";
+import { useColors } from "../hooks";
+import { ButtonProps, IconButtonProps, LinkButtonProps } from "../types";
+
+export const LinkButton: React.FC<LinkButtonProps> = ({
+  title,
+  style = {},
+  color = "blue",
+  fontSize = 12,
+  fontWeight = "400",
+  disabled,
+  onPress = () => {},
+}) => {
+  const colors = useColors();
+
+  const styles: any = ScaledSheet.create({
+    text: {
+      fontSize: moderateScale(fontSize),
+      fontWeight: fontWeight,
+      color: disabled ? "#777" : colors[color].main,
+    },
+  });
+  return (
+    <TouchableOpacity onPress={onPress} disabled={disabled}>
+      <Text style={{ ...styles.text, ...style }}>{title}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export const IconButton: React.FC<IconButtonProps> = ({
+  style = {},
+  color = "dark",
+  disabled,
+  icon,
+  elevation,
+  bg = false,
+  size = 24,
+  containerStyles = {},
+  onPress = () => {},
+  iconType = "material",
+}) => {
+  const colors = useColors();
+
+  const styles: any = ScaledSheet.create({
+    container: {
+      alignSelf: "flex-start",
+      flexGrow: 0,
+      backgroundColor: bg
+        ? colors.white[1]
+        : elevation! > 0
+        ? colors.white[1]
+        : null,
+      padding: "5@ms",
+      shadowColor: "#000",
+      shadowOpacity: 0.1,
+      shadowOffset: {
+        height: 1,
+        width: 0,
+      },
+      height: bg ? size + 20 + "@ms" : undefined,
+      width: bg ? size + 20 + "@ms" : undefined,
+      alignItems: "center",
+      justifyContent: "center",
+      shadowRadius: elevation,
+      elevation: elevation,
+      borderRadius: size,
+    },
+    text: {
+      color: disabled ? "#777" : colors[color].main,
+    },
+  });
+
+  const IconComp = {
+    material: MaterialIcons,
+    ion: Ionicons,
+  }[iconType];
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      activeOpacity={0.3}
+      style={{ ...styles.container, ...containerStyles }}
+    >
+      <IconComp style={{ ...styles.text, ...style }} name={icon} size={size} />
+    </TouchableOpacity>
+  );
+};
+
+const Button: React.FC<ButtonProps> = ({
+  elevation = 0,
+  onPress = () => {},
+  disabled = false,
+  title,
+  loading,
+  size,
+  rounded = false,
+  gutterBottom,
+  style = {},
+  fullWidth = false,
+  translucent = false,
+  color = "primary",
+  variant = "contained",
+  start,
+  end,
+}) => {
+  const colors = useColors();
+
+  const styles: any = ScaledSheet.create({
+    con: {
+      flexDirection: "row",
+      alignItems: "center",
+      alignSelf: "flex-start",
+      justifyContent: "center",
+      backgroundColor:
+        variant === "text" || variant === "outlined"
+          ? null
+          : translucent
+          ? translucent === "dark"
+            ? colors.white[3] + "2"
+            : colors.black[3] + "2"
+          : loading
+          ? colors[color].light
+          : disabled
+          ? colors.white[4]
+          : colors[color].main,
+      borderRadius: rounded ? 30 : 10,
+      elevation: variant === "text" ? 0 : elevation,
+      paddingVertical: size === "small" ? 8 : "13@ms",
+      paddingHorizontal: size === "small" ? "10@ms" : "18@ms",
+      borderColor: colors[color].main,
+      borderWidth: variant === "outlined" ? 1 : 0,
+      shadowColor: "#000",
+      shadowRadius: elevation,
+      marginBottom: gutterBottom,
+      shadowOffset: {
+        height: elevation / 2,
+        width: 0,
+      },
+      shadowOpacity: variant === "text" ? 0 : 0.3,
+      width: fullWidth ? "100%" : null,
+      ...style,
+    },
+    text: {
+      color: disabled
+        ? variant === "text" || variant === "outlined"
+          ? colors.black[1]
+          : colors[color].text
+        : colors[color][
+            variant === "text" || variant === "outlined" ? "main" : "text"
+          ],
+      fontWeight: variant === "outlined" ? "700" : "500",
+      fontSize: size === "small" ? "12@ms" : "16@ms",
+    },
+  });
+
+  return (
+    <TouchableOpacity onPress={onPress} disabled={disabled} style={styles.con}>
+      {start}
+      {loading && (
+        <ActivityIndicator
+          size="small"
+          color={colors[color].text}
+          style={{ marginRight: 10 }}
+        />
+      )}
+      <Text style={styles.text}>{title}</Text>
+      {end}
+    </TouchableOpacity>
+  );
+};
+
+export default Button;

package/src/Components/SafeAreaView.tsx

@@ -0,0 +1,19 @@
+import { SafeAreaView as Safe } from "react-native";
+import React from "react";
+
+import { Platform, StyleSheet } from "react-native";
+import { moderateScale } from "react-native-size-matters";
+import { SafeAreaViewProps } from "../types";
+
+const styles = StyleSheet.create({
+  droidSafeArea: {
+    flex: 1,
+    paddingTop: Platform.OS === "android" ? moderateScale(35) : 0,
+  },
+});
+
+const SafeAreaView: React.FC<SafeAreaViewProps> = ({ children, style }) => {
+  return <Safe style={{ ...styles.droidSafeArea, ...style }}>{children}</Safe>;
+};
+
+export default SafeAreaView;

package/src/Components/SelectMenu.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+import { View, Modal, TouchableOpacity, ScrollView } from "react-native";
+import { ScaledSheet } from "react-native-size-matters";
+import Typography from "./Typography";
+import { MaterialIcons } from "@expo/vector-icons";
+import Button from "./Button";
+import { useColors } from "../hooks";
+import { SelectMenuProps } from "../types";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+const SelectMenu: React.FC<SelectMenuProps> = ({
+  open = false,
+  onClose,
+  value,
+  options = [],
+  onChange,
+  disableAutoClose = false,
+  label,
+  secondary,
+  helperText,
+}) => {
+  const colors = useColors();
+  const { bottom } = useSafeAreaInsets();
+  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",
+    },
+
+    options: {},
+    option: {
+      paddingHorizontal: "10@s",
+      paddingVertical: "10@vs",
+      borderRadius: 8,
+      flexDirection: "row",
+      alignItems: "center",
+      marginBottom: "10@vs",
+    },
+    footer: {
+      paddingBottom: bottom,
+      paddingHorizontal: "15@ms",
+      paddingTop: "15@ms",
+    },
+  });
+  return (
+    <Modal visible={open} animationType="slide" onRequestClose={onClose}>
+      <View style={styles.root}>
+        <View style={{ flex: 1 }}>
+          <ScrollView>
+            <View style={styles.content}>
+              <View style={styles.header}>
+                <Typography variant="h5" gutterBottom={5} fontWeight={700}>
+                  {label}
+                </Typography>
+                {helperText ? (
+                  <Typography variant="body2" color="textSecondary">
+                    {helperText}
+                  </Typography>
+                ) : null}
+              </View>
+              <View style={styles.options}>
+                {[...options].map((cur) => (
+                  <TouchableOpacity
+                    style={{
+                      ...styles.option,
+                      backgroundColor:
+                        cur.value === value
+                          ? colors.blue.light + "2"
+                          : colors.white[2],
+                    }}
+                    onPress={() => {
+                      onChange(cur.value);
+                      if (!disableAutoClose) onClose();
+                    }}
+                    key={cur.label}
+                  >
+                    <View>
+                      <Typography
+                        style={{
+                          color:
+                            cur.value === value
+                              ? colors.blue.light
+                              : colors.black[2],
+                        }}
+                      >
+                        {cur.label}
+                      </Typography>
+                      {cur.secondary ? (
+                        <Typography
+                          variant="body2"
+                          style={{
+                            marginTop: 2,
+                            color:
+                              cur.value === value
+                                ? colors.blue.light
+                                : colors.white[5],
+                          }}
+                        >
+                          {cur.secondary}
+                        </Typography>
+                      ) : null}
+                    </View>
+                    {value === cur.value && (
+                      <MaterialIcons
+                        name="check"
+                        color={colors.blue.light}
+                        size={24}
+                        style={{ marginLeft: "auto" }}
+                      />
+                    )}
+                  </TouchableOpacity>
+                ))}
+              </View>
+            </View>
+          </ScrollView>
+        </View>
+        <View style={styles.footer}>
+          <Button
+            color="error"
+            variant="outlined"
+            fullWidth
+            title="Close"
+            onPress={onClose}
+          />
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default SelectMenu;

package/src/Components/Spinner.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { ActivityIndicator, Dimensions, View } from "react-native";
+
+import { ScaledSheet } from "react-native-size-matters";
+import { useColors } from "../hooks";
+import { SpinnerProps } from "../types";
+import Typography from "./Typography";
+
+const Spinner: React.FC<SpinnerProps> = ({
+  label,
+  size = "large",
+  color = "primary",
+  fullscreen = false,
+  style = {},
+}) => {
+  const colors = useColors();
+  const styles: any = ScaledSheet.create({
+    root: {
+      width: fullscreen ? Dimensions.get("screen").width : "100%",
+      height: fullscreen ? Dimensions.get("screen").height : "100%",
+      left: 0,
+      bottom: 0,
+      zIndex: 100,
+      alignItems: "center",
+      justifyContent: "center",
+      position: fullscreen ? "absolute" : "relative",
+      backgroundColor: fullscreen ? colors.white[1] + "d" : undefined,
+      ...style,
+    },
+    content: {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingVertical: "15@vs",
+      paddingHorizontal: "20@s",
+      borderRadius: 10,
+      // backgroundColor: fullscreen ? colors.light.main : null,
+    },
+    label: {
+      marginLeft: "10@s",
+      color: color === "light" ? colors.white[2] : colors.black[4],
+    },
+  });
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.content}>
+        <ActivityIndicator color={colors[color].dark} size={size} />
+        {label && <Typography style={styles.label}>{label}</Typography>}
+      </View>
+    </View>
+  );
+};
+
+export default Spinner;