@imksh/create 1.0.25 → 1.0.27

package/templates/production-fullstack/mobile/src/components/ui/inputs/Input.tsx

@@ -0,0 +1,158 @@
+import React, { useState } from "react";
+import {
+  View,
+  TextInput,
+  TextInputProps,
+  TouchableOpacity,
+} from "react-native";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../../constants/Colors";
+import { Ionicons } from "@expo/vector-icons";
+import { Txt } from "../../common/Typography";
+
+export interface InputProps extends TextInputProps {
+  label?: string;
+  error?: string;
+  leftIcon?: keyof typeof Ionicons.glyphMap;
+  rightIcon?: keyof typeof Ionicons.glyphMap;
+  onRightIconPress?: () => void;
+  helperText?: string;
+  containerStyle?: import("react-native").StyleProp<
+    import("react-native").ViewStyle
+  >;
+  labelOnBorder?: boolean;
+}
+
+export default function Input({
+  label,
+  error,
+  leftIcon,
+  rightIcon,
+  onRightIconPress,
+  helperText,
+  style,
+  containerStyle,
+  labelOnBorder = false,
+  ...props
+}: InputProps) {
+  const { colorScheme } = useColorScheme();
+  const theme = Colors[colorScheme ?? "light"];
+  const [isFocused, setIsFocused] = useState(false);
+
+  const borderColor = error
+    ? theme.error
+    : isFocused
+      ? theme.primary
+      : theme.base300;
+
+  return (
+    <View className="mb-4 relative">
+      {!labelOnBorder && label && (
+        <Txt
+          color={theme.baseContent}
+          weight="semibold"
+          style={{ marginBottom: 6 }}
+        >
+          {label} {error ? "*" : ""}{" "}
+        </Txt>
+      )}
+
+      {labelOnBorder && label && (
+        <View
+          style={{
+            position: "absolute",
+            top: -6,
+            left: 12,
+            backgroundColor: theme.base100,
+            paddingHorizontal: 6,
+            zIndex: 10,
+          }}
+        >
+          <Txt
+            color={
+              error ? theme.error : isFocused ? theme.primary : theme.secondary
+            }
+            variant="xs"
+            weight="semibold"
+          >
+            {label} {error ? "*" : ""}
+          </Txt>
+        </View>
+      )}
+
+      <View
+        style={[
+          {
+            flexDirection: "row",
+            alignItems: "center",
+            backgroundColor: theme.base100,
+            borderWidth: 1,
+            borderColor,
+            borderRadius: 12,
+            paddingHorizontal: 12,
+            height: 52,
+          },
+          containerStyle,
+        ]}
+      >
+        {leftIcon && (
+          <Ionicons
+            name={leftIcon}
+            size={20}
+            color={isFocused ? theme.primary : theme.secondary}
+            style={{ marginRight: 8 }}
+          />
+        )}
+
+        <TextInput
+          style={[
+            {
+              flex: 1,
+              color: theme.baseContent,
+              fontSize: 16,
+              height: "100%",
+            },
+            style,
+          ]}
+          placeholderTextColor={theme.secondary}
+          onFocus={(e) => {
+            setIsFocused(true);
+            props.onFocus?.(e);
+          }}
+          onBlur={(e) => {
+            setIsFocused(false);
+            props.onBlur?.(e);
+          }}
+          {...props}
+        />
+
+        {rightIcon && (
+          <TouchableOpacity
+            onPress={onRightIconPress}
+            disabled={!onRightIconPress}
+          >
+            <Ionicons
+              name={rightIcon}
+              size={20}
+              color={theme.secondary}
+              style={{ marginLeft: 8 }}
+            />
+          </TouchableOpacity>
+        )}
+      </View>
+
+      {(error || helperText) && (
+        <Txt
+          style={{
+            color: error ? theme.error : theme.secondary,
+            fontSize: 12,
+            marginTop: 4,
+            marginLeft: 4,
+          }}
+        >
+          {error || helperText}
+        </Txt>
+      )}
+    </View>
+  );
+}

package/templates/production-fullstack/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/production-fullstack/mobile/src/components/ui/inputs/OTPInput.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+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;
+}
+
+export default function OTPInput({
+  length = 4,
+  onTextChange,
+  onFilled,
+  label,
+  error,
+  labelOnBorder = false,
+}: OTPProps) {
+  const { colorScheme } = useColorScheme();
+  const theme = Colors[colorScheme ?? "light"];
+
+  return (
+    <View className={`mb-4 ${labelOnBorder ? 'relative' : ''}`}>
+      {!labelOnBorder && label && (
+        <Txt
+          color={theme.baseContent}
+          weight="semibold"
+          style={{ marginBottom: 8 }}
+        >
+          {label}
+        </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}
+        onFilled={onFilled}
+        focusColor={error ? theme.error : theme.primary}
+        focusStickBlinkingDuration={500}
+        theme={{
+          containerStyle: { width: "100%" },
+          pinCodeContainerStyle: {
+            backgroundColor: theme.base100,
+            borderColor: error ? theme.error : theme.base300,
+            borderWidth: 1,
+            borderRadius: 12,
+            width: 56,
+            height: 64,
+          },
+          pinCodeTextStyle: {
+            color: theme.baseContent,
+            fontSize: 24,
+            fontWeight: "700",
+          },
+        }}
+      />
+
+      {error && (
+        <Txt
+          color={theme.error}
+          variant="sm"
+          style={{ marginTop: 8, marginLeft: 4 }}
+        >
+          {error}
+        </Txt>
+      )}
+    </View>
+  );
+}

package/templates/production-fullstack/mobile/src/components/ui/inputs/PasswordInput.tsx

@@ -0,0 +1,16 @@
+import React, { useState } from "react";
+import Input, { InputProps } from "./Input";
+
+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"}
+      onRightIconPress={() => setIsVisible(!isVisible)}
+    />
+  );
+}

package/templates/production-fullstack/mobile/src/components/ui/inputs/Radio.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+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;
+  onChange: () => void;
+  label?: string;
+  disabled?: boolean;
+}
+
+export default function Radio({
+  checked,
+  onChange,
+  label,
+  disabled,
+}: RadioProps) {
+  const { colorScheme } = useColorScheme();
+  const theme = Colors[colorScheme ?? "light"];
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      disabled={disabled}
+      onPress={onChange}
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        opacity: disabled ? 0.5 : 1,
+        marginBottom: 8,
+      }}
+    >
+      <View
+        style={{
+          width: 24,
+          height: 24,
+          borderRadius: 12,
+          borderWidth: 2,
+          borderColor: checked ? theme.primary : theme.base300,
+          alignItems: "center",
+          justifyContent: "center",
+          marginRight: 10,
+        }}
+      >
+        {checked && (
+          <View style={{ width: 12, height: 12, borderRadius: 6, backgroundColor: theme.primary }} />
+        )}
+      </View>
+      {label && <Txt color={theme.baseContent} variant="base">{label}</Txt>}
+    </TouchableOpacity>
+  );
+}

package/templates/production-fullstack/mobile/src/components/ui/inputs/SearchBar.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import Input, { InputProps } from "./Input";
+
+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..."
+      style={[{ fontSize: s.fontSize }, style]}
+      containerStyle={[
+        {
+          borderRadius: 9999,
+          height: s.height,
+          paddingHorizontal: s.px,
+          backgroundColor: "rgba(0,0,0,0.05)",
+          borderWidth: 0,
+        },
+        containerStyle,
+      ]}
+      {...props}
+    />
+  );
+}

package/templates/production-fullstack/mobile/src/components/ui/inputs/Slider.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+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;
+  onValueChange: (value: number) => void;
+  minimumValue?: number;
+  maximumValue?: number;
+  step?: number;
+  label?: string;
+}
+
+export default function Slider({
+  value,
+  onValueChange,
+  minimumValue = 0,
+  maximumValue = 100,
+  step = 1,
+  label,
+}: SliderProps) {
+  const { colorScheme } = useColorScheme();
+  const theme = Colors[colorScheme ?? "light"];
+
+  return (
+    <View className="mb-4 w-full">
+      {label && (
+        <View className="flex-row justify-between mb-2">
+          <Txt color={theme.baseContent} weight="semibold">{label}</Txt>
+          <Txt color={theme.secondary}>{value}</Txt>
+        </View>
+      )}
+      <CommunitySlider
+        style={{ width: "100%", height: 40 }}
+        minimumValue={minimumValue}
+        maximumValue={maximumValue}
+        step={step}
+        value={value}
+        onValueChange={onValueChange}
+        minimumTrackTintColor={theme.primary}
+        maximumTrackTintColor={theme.base300}
+        thumbTintColor={theme.primary}
+      />
+    </View>
+  );
+}

package/templates/production-fullstack/mobile/src/components/ui/inputs/Switch.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect } from "react";
+import { TouchableOpacity, StyleProp, ViewStyle } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  interpolateColor,
+} from "react-native-reanimated";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../../constants/Colors";
+import { Txt } from "../../common/Typography";
+
+export interface SwitchProps {
+  checked: boolean;
+  onChange?: (checked: boolean) => void;
+  label?: string;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export default function Switch({
+  checked,
+  onChange,
+  label,
+  disabled,
+  style,
+}: SwitchProps) {
+  const { colorScheme } = useColorScheme();
+  const theme = Colors[colorScheme ?? "light"];
+  
+  const progress = useSharedValue(checked ? 1 : 0);
+
+  useEffect(() => {
+    progress.value = withTiming(checked ? 1 : 0, { duration: 250 });
+  }, [checked, progress]);
+
+  const trackStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      progress.value,
+      [0, 1],
+      [theme.base300, theme.primary]
+    );
+    return { backgroundColor };
+  });
+
+  const thumbStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: progress.value * 20 }],
+    };
+  });
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      disabled={disabled}
+      onPress={() => onChange && onChange(!checked)}
+      style={[{ flexDirection: "row", alignItems: "center", opacity: disabled ? 0.5 : 1 }, style]}
+    >
+      <Animated.View
+        style={[
+          { width: 44, height: 24, borderRadius: 12, padding: 2, justifyContent: "center" },
+          trackStyle,
+        ]}
+      >
+        <Animated.View
+          style={[
+            { width: 20, height: 20, borderRadius: 10, backgroundColor: "#fff", elevation: 2, shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 2 },
+            thumbStyle,
+          ]}
+        />
+      </Animated.View>
+      {label && <Txt color={theme.baseContent} variant="base" style={{ marginLeft: 10 }}>{label}</Txt>}
+    </TouchableOpacity>
+  );
+}