@hoddy-ui/core 1.0.0

package/src/Components/TextField.tsx

@@ -0,0 +1,442 @@
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import React, { useRef, useState } from "react";
+import { Animated, TextInput, TouchableOpacity, View } from "react-native";
+import {
+  ScaledSheet,
+  moderateScale,
+  verticalScale,
+} from "react-native-size-matters";
+import { useColors } from "../hooks";
+import { TextFieldProps } from "../types";
+import SelectMenu from "./SelectMenu";
+import Typography from "./Typography";
+
+const TextField: React.FC<TextFieldProps> = ({
+  label,
+  keyboardType,
+  variant,
+  color = "dark",
+  value,
+  type,
+  helperText,
+  onChangeText,
+  onSubmitEditing = () => {},
+  onFocus = () => {},
+  onBlur = () => {},
+  error,
+  start,
+  rounded,
+  disabled = false,
+  style = {},
+  inputStyles = {},
+  gutterBottom = 0,
+  end,
+  options,
+  ...props
+}) => {
+  const colors = useColors();
+  const [focused, setFocused] = useState(false);
+
+  const labelAnim = useRef(new Animated.Value(0)).current;
+
+  const height = moderateScale(variant === "text" ? 50 : 45);
+
+  React.useEffect(() => {
+    if (focused || value) {
+      Animated.timing(labelAnim, {
+        toValue: variant === "outlined" ? verticalScale(-12) : verticalScale(5),
+        duration: 300,
+        useNativeDriver: false,
+      }).start();
+    } else {
+      Animated.timing(labelAnim, {
+        toValue: height / moderateScale(variant === "text" ? 2 : 3.2),
+        duration: 300,
+        useNativeDriver: false,
+      }).start();
+    }
+  }, [focused, value]);
+  const styles: any = ScaledSheet.create({
+    root: {
+      marginBottom: gutterBottom + "@vs",
+      width: "100%",
+      ...style,
+    },
+    container: {
+      height: height,
+      overflow: "hidden",
+
+      backgroundColor:
+        variant === "outlined" || variant === "text"
+          ? "#fff0"
+          : focused
+          ? colors.white[3]
+          : colors.white[4],
+      flexDirection: "row",
+      borderColor: error
+        ? colors.error.main
+        : focused
+        ? colors[color].main
+        : colors.black[1],
+      borderWidth: error ? 1 : variant === "outlined" ? (focused ? 2 : 1) : 0,
+      borderBottomWidth: variant === "text" ? 0.5 : error ? 1 : 0,
+      width: "100%",
+      borderRadius: variant === "text" ? 0 : rounded ? 30 : 7,
+      alignItems: "center",
+      ...inputStyles,
+    },
+    input: {
+      fontSize: "14@s",
+      flex: 1,
+      alignSelf: "stretch",
+      paddingLeft: moderateScale(15),
+      paddingRight: moderateScale(10),
+      paddingTop: variant !== "outlined" ? "11@vs" : 0,
+      color: colors.black[1],
+      zIndex: 10,
+      // backgroundColor: "#284",
+    },
+    inputText: {
+      fontSize: "14@ms",
+      paddingLeft: moderateScale(15),
+      paddingTop: variant !== "outlined" ? "13@ms" : 0,
+    },
+    label: {
+      position: "absolute",
+      left: moderateScale(15),
+      fontSize: focused || value ? "10@s" : "13@s",
+      color: focused ? colors[color].main : colors.black[1],
+    },
+    helperText: {
+      paddingHorizontal: "15@s",
+      color: focused ? colors[color].dark : colors.black[1],
+      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: true,
+          autoCompleteType: "password",
+          autoCapitalize: "none",
+          textContentType: "password",
+        }
+      : {};
+  return (
+    <>
+      <View style={styles.root}>
+        <TouchableOpacity
+          onPress={() => setFocused(true)}
+          style={styles.container}
+        >
+          <Animated.Text style={{ ...styles.label, top: labelAnim }}>
+            {label}
+          </Animated.Text>
+          {start}
+          {options ? (
+            <Typography style={styles.inputText}>
+              {options.find((cur) => cur.value === value)?.label}
+            </Typography>
+          ) : (
+            <TextInput
+              onFocus={() => {
+                onFocus();
+                setFocused(true);
+              }}
+              onBlur={() => {
+                onBlur();
+                setFocused(false);
+              }}
+              value={value}
+              onChangeText={onChangeText}
+              keyboardType={keyboardType}
+              editable={!disabled}
+              selectTextOnFocus={!disabled}
+              onSubmitEditing={onSubmitEditing}
+              {...formProps}
+              {...props}
+              style={styles.input}
+            />
+          )}
+          {end && <View style={{ marginRight: 20 }}>{end}</View>}
+        </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}
+            </Typography>
+          </View>
+        )}
+      </View>
+      {options && (
+        <SelectMenu
+          options={options}
+          value={value}
+          open={focused}
+          onClose={() => setFocused(false)}
+          label={label}
+          helperText={helperText}
+          onChange={onChangeText!}
+        />
+      )}
+    </>
+  );
+};
+
+export const TextField2: React.FC<TextFieldProps> = ({
+  label,
+  keyboardType,
+  variant,
+  color = "primary",
+  value,
+  type,
+  helperText,
+  onChangeText,
+  onSubmitEditing = () => {},
+  onFocus = () => {},
+  onBlur = () => {},
+  error,
+  start,
+  rounded,
+  disabled = false,
+  style = {},
+  inputStyles = {},
+  gutterBottom = 8,
+  end,
+  options,
+  ...props
+}) => {
+  const colors = useColors();
+  const [focused, setFocused] = useState(false);
+
+  const labelAnim = useRef(new Animated.Value(0)).current;
+
+  const height = moderateScale(50);
+
+  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",
+      ...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.light,
+      zIndex: 10,
+      // backgroundColor: "#284",
+    },
+    inputText: {
+      fontSize: "14@ms",
+      color: colors.dark.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: true,
+          autoCompleteType: "password",
+          autoCapitalize: "none",
+          textContentType: "password",
+        }
+      : {};
+  return (
+    <>
+      <View style={styles.root}>
+        {label && (
+          <Typography variant="body1" gutterBottom={10} fontWeight={600}>
+            {label}
+          </Typography>
+        )}
+        <TouchableOpacity
+          onPress={() => setFocused(true)}
+          style={styles.container}
+        >
+          {start}
+
+          {options ? (
+            <>
+              <Typography style={styles.inputText}>
+                {options.find((cur) => cur.value === value)?.label}
+              </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}
+              keyboardType={keyboardType}
+              editable={!disabled}
+              selectTextOnFocus={!disabled}
+              onSubmitEditing={onSubmitEditing}
+              {...formProps}
+              {...props}
+              style={styles.input}
+            />
+          )}
+
+          {end && <View style={{ marginRight: 20 }}>{end}</View>}
+        </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}
+            </Typography>
+          </View>
+        )}
+      </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

@@ -0,0 +1,47 @@
+import React from "react";
+import { Text, StyleSheet } from "react-native";
+import { moderateScale, scale, verticalScale } from "react-native-size-matters";
+import { useColors } from "../hooks";
+import { TypographyProps } from "../types";
+
+const Typography: React.FC<TypographyProps> = ({
+  children,
+  color = "dark",
+  style = {},
+  textCase = null,
+  variant = "body1",
+  align = "left",
+  gutterBottom = 0,
+  fontWeight = 400,
+}) => {
+  const colors = 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(),
+    },
+  });
+  return (
+    <Text adjustsFontSizeToFit style={{ ...styles.text, ...style }}>
+      {children}
+    </Text>
+  );
+};
+
+export default Typography;

package/src/hooks.ts

@@ -0,0 +1,73 @@
+import { useContext } from "react";
+import { Platform } from "react-native";
+import { ms, vs } from "react-native-size-matters";
+import colors from "./theme/colors";
+import { UIThemeContext } from "./theme";
+
+export const useColors = () => {
+  const { themeState } = useContext(UIThemeContext);
+  return colors(themeState.value);
+};
+
+export const useTheme = () => {
+  const { themeState } = useContext(UIThemeContext);
+  return themeState.value;
+};
+export const useNavScreenOptions = (type: "stack" | "tab" | "drawer") => {
+  const colors = useColors();
+  const options = {
+    stack: {
+      headerShown: false,
+
+      headerStyle: {
+        backgroundColor: colors.white[1],
+      },
+      headerShadowVisible: false,
+      contentStyle: {
+        backgroundColor: colors.white[1],
+      },
+      headerTitleStyle: {
+        color: colors.black[1],
+      },
+      headerTintColor:
+        Platform.OS === "android" ? colors.black[1] : colors.blue.light,
+    },
+    tab: {
+      headerShown: false,
+      headerTintColor: colors.dark.main,
+      tabBarStyle: {
+        borderTopColor: colors.white[3],
+        borderTopWidth: 1,
+        // shadowColor: "#000",
+        // shadowOffset: { height: -3, width: 0 },
+        // shadowRadius: 7,
+        // shadowOpacity: 0.1,
+        height: vs(70),
+        backgroundColor: colors.white[1],
+      },
+      tabBarActiveTintColor: colors.blue.main,
+      tabBarInactiveTintColor: colors.textSecondary.main,
+      tabBarLabelStyle: {
+        // fontSize: ms(12),
+      },
+    },
+    drawer: {
+      headerShown: false,
+      drawerActiveTintColor: colors.primary.main,
+      drawerInactiveTintColor: colors.textSecondary.main,
+      sceneContainerStyle: {
+        backgroundColor: colors.white[2],
+      },
+      drawerStyle: {
+        backgroundColor: colors.white[1],
+      },
+      headerStyle: {
+        backgroundColor: colors.white[1],
+      },
+      headerTitleStyle: {
+        color: colors.dark.main,
+      },
+    },
+  };
+  return options[type];
+};

package/src/theme/colors.ts

@@ -0,0 +1,141 @@
+import { ThemeTypes } from "../types";
+
+const lightColors = {
+  white: {
+    1: "#fff",
+    2: "#f7f7f7",
+    3: "#eee",
+    4: "#ddd",
+    5: "#bbb",
+  },
+  black: {
+    1: "#888",
+    2: "#777",
+    3: "#555",
+    4: "#333",
+    5: "#000",
+  },
+};
+
+const darkColors = {
+  black: {
+    1: "#fff",
+    2: "#f7f7f7",
+    3: "#eee",
+    4: "#ddd",
+    5: "#aaa",
+  },
+  white: {
+    1: "#111",
+    2: "#222",
+    3: "#444",
+    4: "#333",
+    5: "#555",
+  },
+  dark: {
+    main: "#f2f3f4",
+    light: "#fff",
+    dark: "#ddd",
+    text: "#000",
+  },
+  light: {
+    main: "#000",
+    light: "#555",
+    dark: "#333",
+    text: "#fff",
+  },
+
+  textSecondary: {
+    main: "#777",
+    light: "#aaa",
+    dark: "#555",
+    text: "#fff",
+  },
+  secondary: {
+    main: "#a00",
+    light: "#a33",
+    dark: "#900",
+    text: "#fff",
+  },
+  purple: {
+    main: "#815",
+    light: "#f4d",
+    dark: "#a06",
+    text: "#fff",
+  },
+};
+
+export default function colors(theme: ThemeTypes) {
+  const dynamicColors = theme === "dark" ? darkColors : lightColors;
+  return {
+    primary: {
+      main: "#FD7",
+      light: "#FEFFD3",
+      dark: "#fa0",
+      orange: "#F68B1E",
+      text: "#000",
+    },
+    secondary: {
+      main: "#f11",
+      light: "#f43",
+      dark: "#d00",
+      text: "#fff",
+    },
+    purple: {
+      main: "#a09",
+      light: "#f4d",
+      dark: "#a06",
+      text: "#fff",
+    },
+    light: {
+      main: "#fff",
+      light: "#fff",
+      dark: "#ddd",
+      text: "#000",
+    },
+    dark: {
+      main: "#000",
+      light: "#777",
+      dark: "#111",
+      text: "#fff",
+    },
+    textSecondary: {
+      main: "#aaa",
+      light: "#bbb",
+      dark: "#777",
+      text: "#000",
+    },
+    blue: {
+      main: "#09F",
+      light: "#39f",
+      dark: "#028",
+      text: "#fff",
+    },
+    info: {
+      main: "#09f",
+      light: "#3af",
+      dark: "#08a",
+      text: "#fff",
+    },
+    success: {
+      main: "#0a4",
+      text: "#fff",
+      light: "#5c3",
+      dark: "#062",
+    },
+
+    warning: {
+      main: "#fa2",
+      light: "#fc7",
+      dark: "#f90",
+      text: "#fff",
+    },
+    error: {
+      main: "#D22",
+      text: "#fff",
+      light: "#f43",
+      dark: "#a20",
+    },
+    ...dynamicColors,
+  };
+}