@hoddy-ui/core 1.0.43 → 1.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/core",
-  "version": "1.0.43",
+  "version": "1.0.45",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {
@@ -13,8 +13,12 @@
   "private": false,
   "peerDependencies": {
     "@expo/vector-icons": "^13.0.0",
+    "@react-navigation/native": ">=6.1.7",
     "@types/react": "^18.2.6",
     "@types/react-native": "^0.72.0",
+    "expo-location": ">=15.1.1",
+    "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",
@@ -29,10 +33,6 @@
   ],
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.18.1",
-    "@react-navigation/native": "^6.1.7",
-    "expo-location": "^15.1.1",
-    "expo-navigation-bar": "^2.1.1",
-    "expo-system-ui": "^2.2.1",
     "react-native-size-matters": "^0.4.0"
   },
   "publishConfig": {

package/src/Components/StarRating.tsx

@@ -0,0 +1,174 @@
+import { Ionicons } from "@expo/vector-icons";
+import * as Haptics from "expo-haptics";
+import { FC, useContext, useEffect, useState } from "react";
+import { Alert, TouchableOpacity, View } from "react-native";
+import { TextInput } from "react-native-gesture-handler";
+import { ScaledSheet } from "react-native-size-matters";
+import { GlobalContext } from "../../context";
+import colors from "../../theme/colors";
+import Button from "./Button";
+import Popup from "./Popup";
+import Typography from "./Typography";
+import { errorMessage } from "../../utility";
+import client from "../../api/client";
+import { useColors } from "../hooks";
+import { RatingInputProps, RatingStarsProps, StarRatingProps } from "../types";
+
+export const RatingStars: FC<RatingStarsProps> = ({
+  rating = 0,
+  size = 16,
+}) => {
+  const colors = useColors();
+
+  const styles = ScaledSheet.create({
+    root: {
+      flexDirection: "row",
+      alignItems: "center",
+    },
+  });
+  return (
+    <View style={styles.root}>
+      {[...Array(Math.floor(rating))].map((_, index) => (
+        <Ionicons key={index} name="star" size={size} color="#FFD700" />
+      ))}
+      {[...Array(5 - Math.floor(rating))].map((_, index) => (
+        <Ionicons
+          key={index}
+          name="star"
+          size={size}
+          color={colors.textSecondary.light}
+        />
+      ))}
+    </View>
+  );
+};
+
+export const RatingInput: FC<RatingInputProps> = ({
+  onSubmit: _onSubmit,
+  _id,
+  rating = 0,
+  size = 16,
+}) => {
+  const { themeState } = useContext(GlobalContext);
+  const [showReviewsModal, setShowReviewsModal] = useState(false);
+  const [rate, setRate] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [review, setReview] = useState("");
+  const styles = ScaledSheet.create({
+    root: {
+      flexDirection: "row",
+      alignItems: "center",
+    },
+    inputCon: {
+      marginBottom: "20@vs",
+      backgroundColor: colors(themeState.value).white[3],
+      padding: "15@ms",
+      borderRadius: 20,
+    },
+    input: {
+      fontSize: "16@ms",
+      color: colors(themeState.value).dark.main,
+      height: "100@vs",
+    },
+  });
+
+  useEffect(() => {
+    setRate(rating);
+  }, [rating]);
+  const onRate = (index) => {
+    setRate(index + 1);
+    Haptics.selectionAsync();
+
+    setTimeout(() => {
+      setShowReviewsModal(true);
+    }, 500);
+  };
+
+  const onSubmit = async () => {
+    setLoading(true);
+    try {
+      const res = (
+        await client.post("customer/review/product", {
+          rate,
+          review,
+          productId: _id,
+        })
+      ).data;
+
+      console.log("R", res);
+      _onSubmit(res.data);
+      setShowReviewsModal(false);
+      Alert.alert("Review received", "Thank you for your review");
+    } catch (error) {
+      console.log("Couldn't add review", errorMessage(error));
+      Alert.alert("couldn't add review", errorMessage(error));
+    }
+    setLoading(false);
+  };
+  return (
+    <>
+      <View style={styles.root}>
+        {[...Array(5)].map((_, index) => (
+          <TouchableOpacity
+            key={index}
+            activeOpacity={0.9}
+            onPress={() => {
+              onRate(index);
+            }}
+          >
+            <Ionicons
+              style={{ marginLeft: 10 }}
+              name={index < rate ? "star" : "star-outline"}
+              size={size}
+              color={colors(themeState.value).primary.light}
+            />
+          </TouchableOpacity>
+        ))}
+      </View>
+      <Popup
+        sheet
+        port
+        open={showReviewsModal}
+        onClose={() => {
+          setShowReviewsModal(false);
+        }}
+      >
+        <View
+          style={{
+            alignItems: "center",
+            marginBottom: 5,
+          }}
+        >
+          <StarRating rating={rate} size={24} />
+        </View>
+        <Typography
+          align="center"
+          fontWeight={700}
+          variant="h5"
+          gutterBottom={20}
+        >
+          Add to your review
+        </Typography>
+
+        <View style={styles.inputCon}>
+          <TextInput
+            style={styles.input}
+            multiline
+            value={review}
+            onChangeText={(text) => setReview(text)}
+            placeholder="Type review here.."
+          />
+        </View>
+        <Button
+          gutterBottom={40}
+          title="Submit Review"
+          loading={loading}
+          disabled={loading}
+          onPress={() => {
+            onSubmit();
+          }}
+        />
+      </Popup>
+    </>
+  );
+};

package/src/Components/TextField.tsx

@@ -276,6 +276,7 @@ export const TextField2: React.FC<TextFieldProps> = ({
   style = {},
   inputStyles = {},
   gutterBottom = 8,
+  placeholder,
   end,
   options,
   ...props
@@ -343,6 +344,11 @@ export const TextField2: React.FC<TextFieldProps> = ({
       color: colors.dark.light,
       paddingLeft: moderateScale(10),
     },
+    placeholder: {
+      fontSize: "14@ms",
+      color: colors.textSecondary.main,
+      paddingLeft: moderateScale(10),
+    },
     label: {},
     helperText: {
       paddingHorizontal: "15@s",
@@ -408,9 +414,15 @@ export const TextField2: React.FC<TextFieldProps> = ({
 
           {options ? (
             <>
-              <Typography style={styles.inputText}>
-                {options.find((cur) => cur.value === value)?.label}
-              </Typography>
+              {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}
@@ -433,6 +445,7 @@ export const TextField2: React.FC<TextFieldProps> = ({
               keyboardType={keyboardType}
               placeholderTextColor={colors.textSecondary.main}
               editable={!disabled}
+              placeholder={placeholder}
               selectTextOnFocus={!disabled}
               onSubmitEditing={onSubmitEditing}
               {...formProps}

package/src/types.ts

@@ -293,3 +293,13 @@ export interface OTPInputProps {
   spacing?: number;
   size?: number;
 }
+
+export interface RatingStarsProps {
+  rating: number;
+  size: number;
+}
+
+export interface RatingInputProps {
+  rating: number;
+  size: number;
+}