@imksh/create 1.0.24 → 1.0.25

package/templates/mern-react-native/mobile/src/components/ui/inputs/LocationPicker.tsx

@@ -0,0 +1,211 @@
+import React, { useState, useEffect } from "react";
+import { View, Modal, TouchableOpacity, ActivityIndicator } from "react-native";
+import MapView, { Region } from "react-native-maps";
+import * as Location from "expo-location";
+import { Ionicons } from "@expo/vector-icons";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../../constants/Colors";
+import { Txt } from "../../common/Typography";
+import Button from "../buttons/Button";
+
+export interface LocationDetails {
+  addressLine1: string;
+  addressLine2?: string;
+  locality: string;
+  city: string;
+  state: string;
+  pinCode: string;
+  latitude: number;
+  longitude: number;
+}
+
+interface LocationPickerProps {
+  onLocationSelected: (details: LocationDetails) => void;
+  initialCoordinate?: { latitude: number; longitude: number };
+}
+
+export default function LocationPicker({
+  onLocationSelected,
+  initialCoordinate,
+}: LocationPickerProps) {
+  const { colorScheme } = useColorScheme();
+  const theme = Colors[colorScheme ?? "light"];
+
+  const [modalVisible, setModalVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [region, setRegion] = useState<Region>({
+    latitude: initialCoordinate?.latitude || 28.6139,
+    longitude: initialCoordinate?.longitude || 77.209,
+    latitudeDelta: 0.0922,
+    longitudeDelta: 0.0421,
+  });
+  const [currentCenter, setCurrentCenter] = useState({
+    latitude: region.latitude,
+    longitude: region.longitude,
+  });
+
+  useEffect(() => {
+    if (initialCoordinate?.latitude && initialCoordinate?.longitude) {
+       
+      setRegion((r) => ({
+        ...r,
+        latitude: initialCoordinate.latitude,
+        longitude: initialCoordinate.longitude,
+      }));
+      setCurrentCenter(initialCoordinate);
+    }
+  }, [initialCoordinate]);
+
+  const requestLocationAndOpenMap = async () => {
+    setLoading(true);
+    let { status } = await Location.requestForegroundPermissionsAsync();
+    if (status !== "granted") {
+      setLoading(false);
+      setModalVisible(true);
+      return;
+    }
+
+    try {
+      if (!initialCoordinate?.latitude) {
+        let location = await Location.getCurrentPositionAsync({});
+        setRegion({
+          ...region,
+          latitude: location.coords.latitude,
+          longitude: location.coords.longitude,
+        });
+        setCurrentCenter({
+          latitude: location.coords.latitude,
+          longitude: location.coords.longitude,
+        });
+      }
+    } catch (e) {
+      console.warn(e);
+    }
+
+    setLoading(false);
+    setModalVisible(true);
+  };
+
+  const handleConfirmLocation = async () => {
+    setLoading(true);
+    try {
+      const [address] = await Location.reverseGeocodeAsync({
+        latitude: currentCenter.latitude,
+        longitude: currentCenter.longitude,
+      });
+
+      if (address) {
+        const details: LocationDetails = {
+          addressLine1: address.street || address.name || "",
+          locality: address.subregion || address.district || "",
+          city: address.city || address.subregion || "",
+          state: address.region || "",
+          pinCode: address.postalCode || "",
+          latitude: currentCenter.latitude,
+          longitude: currentCenter.longitude,
+        };
+        onLocationSelected(details);
+        setModalVisible(false);
+      }
+    } catch (error) {
+      console.warn("Geocoding failed", error);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <>
+      <TouchableOpacity
+        onPress={requestLocationAndOpenMap}
+        className="w-full h-14 bg-base-200 rounded-xl mb-4 flex-row items-center justify-between px-4 border border-base-300"
+      >
+        <View className="flex-row items-center">
+          <Ionicons
+            name="map-outline"
+            size={24}
+            color={theme.primary}
+            style={{ marginRight: 12 }}
+          />
+          <Txt color={theme.baseContent} weight="semibold">
+            {initialCoordinate?.latitude
+              ? "Update Location on Map"
+              : "Pick from Map"}
+          </Txt>
+        </View>
+        {loading && !modalVisible ? (
+          <ActivityIndicator color={theme.primary} />
+        ) : (
+          <Ionicons name="chevron-forward" size={20} color={theme.secondary} />
+        )}
+      </TouchableOpacity>
+
+      <Modal
+        animationType="slide"
+        transparent={false}
+        visible={modalVisible}
+        onRequestClose={() => setModalVisible(false)}
+      >
+        <View className="flex-1 bg-base-100">
+          <View
+            className="h-16 flex-row items-center justify-between px-4 border-b border-base-300 pt-4 bg-base-100"
+            style={{ zIndex: 10 }}
+          >
+            <TouchableOpacity
+              onPress={() => setModalVisible(false)}
+              className="p-2"
+            >
+              <Ionicons name="close" size={24} color={theme.baseContent} />
+            </TouchableOpacity>
+            <Txt variant="lg" weight="bold">
+              Select Location
+            </Txt>
+            <View className="w-10" />
+          </View>
+
+          <View className="flex-1 relative">
+            <MapView
+              style={{ flex: 1 }}
+              initialRegion={region}
+              showsUserLocation={true}
+              onRegionChangeComplete={(r) =>
+                setCurrentCenter({
+                  latitude: r.latitude,
+                  longitude: r.longitude,
+                })
+              }
+            />
+
+            {/* Center Pin Overlay */}
+            <View
+              className="absolute top-0 left-0 right-0 bottom-0 items-center justify-center pointer-events-none"
+              pointerEvents="none"
+            >
+              <View
+                className="items-center"
+                style={{ transform: [{ translateY: -20 }] }}
+              >
+                <Ionicons name="location" size={40} color={theme.primary} />
+                <View className="w-2 h-2 rounded-full bg-black/20 mt-1" />
+              </View>
+            </View>
+          </View>
+
+          <View className="p-6 bg-base-100 border-t border-base-300 pb-10">
+            <Txt
+              variant="sm"
+              color={theme.secondary}
+              className="mb-4 text-center"
+            >
+              Drag the map to position the pin exactly on your property.
+            </Txt>
+            <Button
+              label="Confirm Location"
+              onPress={handleConfirmLocation}
+              isLoading={loading}
+            />
+          </View>
+        </View>
+      </Modal>
+    </>
+  );
+}

package/templates/mern-react-native/mobile/src/components/ui/inputs/OTPInput.tsx

@@ -1,14 +1,16 @@
 import React from "react";
-import { View, Text } from "react-native";
+import { View } from "react-native";
 import { OtpInput } from "react-native-otp-entry";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
+import { Txt } from "../../common/Typography";
 
 export interface OTPProps {
   length?: number;
   onTextChange?: (text: string) => void;
   onFilled?: (text: string) => void;
   label?: string;
+  labelOnBorder?:boolean;
   error?: string;
 }
 
@@ -18,18 +20,31 @@ export default function OTPInput({
   onFilled,
   label,
   error,
+  labelOnBorder = false,
 }: OTPProps) {
   const { colorScheme } = useColorScheme();
   const theme = Colors[colorScheme ?? "light"];
 
   return (
-    <View className="mb-4">
-      {label && (
-        <Text style={{ color: theme.baseContent, marginBottom: 8, fontWeight: "500" }}>
+    <View className={`mb-4 ${labelOnBorder ? 'relative' : ''}`}>
+      {!labelOnBorder && label && (
+        <Txt
+          color={theme.baseContent}
+          weight="semibold"
+          style={{ marginBottom: 8 }}
+        >
           {label}
-        </Text>
+        </Txt>
       )}
-      
+
+      {labelOnBorder && label && (
+        <View style={{ position: 'absolute', top: -9, left: 12, backgroundColor: theme.base100, paddingHorizontal: 4, zIndex: 10, elevation: 2 }}>
+          <Txt color={error ? theme.error : theme.secondary} variant="xs" weight="semibold">
+            {label}
+          </Txt>
+        </View>
+      )}
+
       <OtpInput
         numberOfDigits={length}
         onTextChange={onTextChange}
@@ -46,14 +61,22 @@ export default function OTPInput({
             width: 56,
             height: 64,
           },
-          pinCodeTextStyle: { color: theme.baseContent, fontSize: 24, fontWeight: "700" },
+          pinCodeTextStyle: {
+            color: theme.baseContent,
+            fontSize: 24,
+            fontWeight: "700",
+          },
         }}
       />
 
       {error && (
-        <Text style={{ color: theme.error, fontSize: 12, marginTop: 8, marginLeft: 4 }}>
+        <Txt
+          color={theme.error}
+          variant="sm"
+          style={{ marginTop: 8, marginLeft: 4 }}
+        >
           {error}
-        </Text>
+        </Txt>
       )}
     </View>
   );

package/templates/mern-react-native/mobile/src/components/ui/inputs/PasswordInput.tsx

@@ -1,11 +1,12 @@
 import React, { useState } from "react";
 import Input, { InputProps } from "./Input";
 
-export default function PasswordInput(props: Omit<InputProps, "rightIcon" | "onRightIconPress" | "secureTextEntry">) {
+export default function PasswordInput({ labelOnBorder, ...props }: Omit<InputProps, "rightIcon" | "onRightIconPress" | "secureTextEntry">) {
   const [isVisible, setIsVisible] = useState(false);
 
   return (
     <Input
+      labelOnBorder={labelOnBorder}
       {...props}
       secureTextEntry={!isVisible}
       rightIcon={isVisible ? "eye-off" : "eye"}

package/templates/mern-react-native/mobile/src/components/ui/inputs/Radio.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { TouchableOpacity, View, Text } from "react-native";
+import { TouchableOpacity, View } from "react-native";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
+import { Txt } from "../../common/Typography";
 
 export interface RadioProps {
   checked: boolean;
@@ -47,7 +48,7 @@ export default function Radio({
           <View style={{ width: 12, height: 12, borderRadius: 6, backgroundColor: theme.primary }} />
         )}
       </View>
-      {label && <Text style={{ color: theme.baseContent, fontSize: 15 }}>{label}</Text>}
+      {label && <Txt color={theme.baseContent} variant="base">{label}</Txt>}
     </TouchableOpacity>
   );
 }

package/templates/mern-react-native/mobile/src/components/ui/inputs/SearchBar.tsx

@@ -1,16 +1,53 @@
 import React from "react";
 import Input, { InputProps } from "./Input";
 
-export default function SearchBar(props: Omit<InputProps, "leftIcon">) {
+export type SearchBarSize = "xs" | "sm" | "base" | "md" | "lg";
+
+export interface SearchBarProps extends Omit<InputProps, "leftIcon"> {
+  size?: SearchBarSize;
+}
+
+export default function SearchBar({
+  size = "base",
+  style,
+  containerStyle,
+  ...props
+}: SearchBarProps) {
+  const getSizeStyles = () => {
+    switch (size) {
+      case "xs":
+        return { height: 32, px: 10, fontSize: 12 };
+      case "sm":
+        return { height: 38, px: 12, fontSize: 13 };
+      case "base":
+        return { height: 44, px: 14, fontSize: 14 };
+      case "md":
+        return { height: 50, px: 16, fontSize: 15 };
+      case "lg":
+        return { height: 56, px: 18, fontSize: 16 };
+      default:
+        return { height: 44, px: 14, fontSize: 14 };
+    }
+  };
+
+  const s = getSizeStyles();
+
   return (
     <Input
       leftIcon="search"
       placeholder="Search..."
-      {...props}
+      style={[{ fontSize: s.fontSize }, style]}
       containerStyle={[
-        { borderRadius: 9999, height: 48, backgroundColor: "rgba(0,0,0,0.05)", borderWidth: 0 },
-        props.containerStyle,
+        {
+          borderRadius: 9999,
+          height: s.height,
+          paddingHorizontal: s.px,
+          backgroundColor: "rgba(0,0,0,0.05)",
+          borderWidth: 0,
+        },
+        containerStyle,
       ]}
+      {...props}
     />
   );
 }

package/templates/mern-react-native/mobile/src/components/ui/inputs/Slider.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { View, Text } from "react-native";
+import { View } from "react-native";
 import CommunitySlider from "@react-native-community/slider";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
+import { Txt } from "../../common/Typography";
 
 export interface SliderProps {
   value: number;
@@ -28,8 +29,8 @@ export default function Slider({
     <View className="mb-4 w-full">
       {label && (
         <View className="flex-row justify-between mb-2">
-          <Text style={{ color: theme.baseContent, fontWeight: "500" }}>{label}</Text>
-          <Text style={{ color: theme.secondary }}>{value}</Text>
+          <Txt color={theme.baseContent} weight="semibold">{label}</Txt>
+          <Txt color={theme.secondary}>{value}</Txt>
         </View>
       )}
       <CommunitySlider

package/templates/mern-react-native/mobile/src/components/ui/inputs/Switch.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { TouchableOpacity, StyleProp, ViewStyle, Text } from "react-native";
+import { TouchableOpacity, StyleProp, ViewStyle } from "react-native";
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -8,6 +8,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
+import { Txt } from "../../common/Typography";
 
 export interface SwitchProps {
   checked: boolean;
@@ -68,7 +69,7 @@ export default function Switch({
           ]}
         />
       </Animated.View>
-      {label && <Text style={{ color: theme.baseContent, marginLeft: 10, fontSize: 15 }}>{label}</Text>}
+      {label && <Txt color={theme.baseContent} variant="base" style={{ marginLeft: 10 }}>{label}</Txt>}
     </TouchableOpacity>
   );
 }

package/templates/mern-react-native/mobile/src/components/ui/inputs/TextArea.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 import Input, { InputProps } from "./Input";
 
-export default function TextArea(props: InputProps) {
+export default function TextArea({ labelOnBorder, ...props }: InputProps) {
   return (
     <Input
       multiline
       numberOfLines={4}
       containerStyle={[{ height: 120, alignItems: "flex-start", paddingTop: 12 }, props.containerStyle]}
       textAlignVertical="top"
+      labelOnBorder={labelOnBorder}
       {...props}
     />
   );