@hoddy-ui/core 1.0.18 → 1.0.20

package/package.json

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

package/src/Components/Checkbox.tsx

@@ -1,36 +1,52 @@
-import { Pressable, StyleSheet, Text, View } from "react-native";
-import React from "react";
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import React, { FC } from "react";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useColors } from "../hooks";
+import { CheckboxProps } from "../types";
+import { ScaledSheet } from "react-native-size-matters";
 
-const CheckBox = (props: any) => {
-  const iconName = props.isChecked
-    ? "checkbox-marked"
-    : "checkbox-blank-outline";
+const CheckBox: FC<CheckboxProps> = ({
+  color = "primary",
+  checked,
+  label,
+  style = {},
+  onChange,
+}) => {
+  const iconName = checked ? "checkbox-marked" : "checkbox-blank-outline";
+  const colors = useColors();
+
+  const styles = ScaledSheet.create({
+    container: {
+      alignItems: "center",
+      flexDirection: "row",
+      ...style,
+    },
+    title: {
+      fontSize: 16,
+      color: "#000",
+      marginLeft: 5,
+      fontWeight: "600",
+    },
+  });
 
   return (
     <View style={styles.container}>
-      <Pressable onPress={props.onPress}>
-        <MaterialCommunityIcons name={iconName} size={24} color="#0195FF" />
-      </Pressable>
+      <TouchableOpacity onPress={onChange}>
+        <MaterialCommunityIcons
+          name={iconName}
+          size={24}
+          color={colors[color].main}
+        />
+      </TouchableOpacity>
+      {label}
     </View>
   );
 };
 
 export default CheckBox;
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: "flex-start",
-    alignItems: "center",
-    flexDirection: "row",
-    width: 20,
-    marginTop: 5,
-    marginRight: 10,
-  },
-  title: {
-    fontSize: 16,
-    color: "#000",
-    marginLeft: 5,
-    fontWeight: "600",
-  },
-});

package/src/Components/FlashMessage.tsx

@@ -1,56 +1,98 @@
 import React, { useEffect, useState } from "react";
-import { View } from "react-native";
+import {
+  LayoutAnimation,
+  Touchable,
+  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 { MaterialIcons } from "@expo/vector-icons";
 import { FlashMessageProps } from "../types";
 import Typography from "./Typography";
 
-const FlashMessage: React.FC<FlashMessageProps> = ({
-  title,
-  message,
-  type,
-}) => {
+export let showFlashMessage: (msg: FlashMessageProps) => void = () => {
+  console.log("hi");
+};
+
+const FlashMessage: React.FC = () => {
   const { top } = useSafeAreaInsets();
-  const colors = useColors();
+  const [message, setMessage] = useState<null | FlashMessageProps>(null);
   const [show, setShow] = useState(false);
+  const colors = useColors();
+  const type = message?.type || "success";
+
+  showFlashMessage = (msg: FlashMessageProps) => {
+    setMessage(msg);
+    setTimeout(() => {
+      setShow(true);
+    }, 50);
+
+    setTimeout(() => {
+      setShow(false);
+      setTimeout(() => {
+        setMessage(null);
+      }, 500);
+    }, msg.duration || 2000);
+
+    console.log("done", msg);
+  };
+  useEffect(() => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+  }, [show]);
+
   const styles = ScaledSheet.create({
     root: {
       position: "absolute",
-      top: 0,
+      top: show ? 0 : -200,
       zIndex: 1000,
       left: 0,
       paddingTop: top + 10,
       paddingHorizontal: "15@ms",
       backgroundColor: colors[type].main,
       width: "100%",
-      paddingBottom: "10@ms",
+      paddingBottom: "15@ms",
+    },
+
+    action: {
+      borderRadius: 20,
+      marginTop: "10@vs",
+      flexDirection: "row",
+      justifyContent: "center",
+      paddingHorizontal: "20@ms",
+      paddingVertical: "8@vs",
+      backgroundColor: "#fff3",
     },
   });
-  useEffect(() => {
-    if (message) setShow(true);
-    setTimeout(() => {
-      setShow(false);
-    }, 2000);
-  }, [message]);
-  return show ? (
+
+  return (
     <View style={styles.root}>
-      {title && (
-        <Typography
-          variant="body2"
-          fontWeight={600}
-          gutterBottom={3}
-          style={{ color: "#fff" }}
-        >
-          {title}
-        </Typography>
-      )}
-      <Typography fontWeight={700} style={{ color: "#fff" }}>
-        {message}
-      </Typography>
+      <View style={{ flexDirection: "row" }}>
+        <View style={{ flex: 1, marginRight: 10 }}>
+          {message?.title && (
+            <Typography
+              variant="h6"
+              fontWeight={600}
+              gutterBottom={3}
+              style={{ color: "#fff" }}
+            >
+              {message?.title}
+            </Typography>
+          )}
+          <Typography style={{ color: "#fff" }}>{message?.message}</Typography>
+        </View>
+        {/* <MaterialIcons color="#fff" size={36} name="error-outline" /> */}
+      </View>
+
+      {message?.actions?.map((cur) => (
+        <TouchableOpacity style={styles.action}>
+          <Typography fontWeight={700} style={{ color: "#fff" }}>
+            {cur.title}
+          </Typography>
+        </TouchableOpacity>
+      ))}
     </View>
-  ) : (
-    <></>
   );
 };
 

package/src/Components/OTPInput.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import { View, TextInput, StyleSheet, Button } from "react-native";
+
+export const OTPInput = () => {
+  const [numFields, setNumFields] = useState(1);
+  const [inputTexts, setInputTexts] = useState(Array(numFields).fill(""));
+
+  const handleInputChange = (text, index) => {
+    const updatedInputTexts = [...inputTexts];
+    updatedInputTexts[index] = text;
+    setInputTexts(updatedInputTexts);
+  };
+
+  const addField = () => {
+    setNumFields(numFields + 1);
+    setInputTexts([...inputTexts, ""]);
+  };
+
+  return (
+    <View style={styles.container}>
+      {inputTexts.map((inputText, index) => (
+        <TextInput
+          key={index}
+          style={styles.input}
+          placeholder={`Enter text ${index + 1}`}
+          value={inputText}
+          onChangeText={(text) => handleInputChange(text, index)}
+        />
+      ))}
+      <Button title="Add Field" onPress={addField} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 20,
+    paddingHorizontal: 16,
+  },
+  input: {
+    height: 40,
+    borderColor: "gray",
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    marginBottom: 10,
+  },
+});

package/src/theme/index.tsx

@@ -1,15 +1,18 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as NavigationBar from "expo-navigation-bar";
 import * as SystemUI from "expo-system-ui";
-import React, { createContext, useReducer } from "react";
+import React, { createContext, useReducer, useState } from "react";
 import { Platform, useColorScheme } from "react-native";
 import {
+  FlashMessageProps,
   ThemeActionTypes,
   ThemeContext,
   ThemeProviderProps,
   ThemeState,
   ThemeTypes,
 } from "../types";
+import FlashMessage from "../Components/FlashMessage";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
 export const UIThemeContext = createContext<ThemeContext>({
   themeState: { mode: "default", value: "light" },
@@ -52,6 +55,7 @@ export const UIThemeProvider = ({ children }: ThemeProviderProps) => {
     mode: "default",
     value: "light",
   });
+
   const colorScheme: ThemeTypes = useColorScheme()!;
 
   React.useEffect(() => {
@@ -75,8 +79,16 @@ export const UIThemeProvider = ({ children }: ThemeProviderProps) => {
     });
   }, [colorScheme]);
   return (
-    <UIThemeContext.Provider value={{ themeState, themeDispatch }}>
-      {children}
-    </UIThemeContext.Provider>
+    <SafeAreaProvider>
+      <UIThemeContext.Provider
+        value={{
+          themeState,
+          themeDispatch,
+        }}
+      >
+        {children}
+        <FlashMessage />
+      </UIThemeContext.Provider>
+    </SafeAreaProvider>
   );
 };

package/src/types.ts

@@ -99,10 +99,20 @@ export interface ButtonProps {
   start?: ReactNode;
   end?: ReactNode;
 }
+
+export interface CheckboxProps {
+  color?: colorTypes;
+  label: ReactNode;
+  checked?: boolean;
+  style?: ViewStyle;
+  onChange?: () => void;
+}
 export interface FlashMessageProps {
-  message?: string;
+  message: string;
   title?: string;
-  type: "success" | "warning" | "error";
+  actions?: Array<{ title: string; onPress?: () => void }>;
+  duration?: number;
+  type?: "success" | "warning" | "error";
 }
 export interface LinkButtonProps {
   title: string;