@imksh/create 1.0.27 → 1.0.28

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

@@ -1,211 +0,0 @@
-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/react-native/src/components/ui/inputs/OTPInput.tsx

@@ -1,83 +0,0 @@
-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/react-native/src/components/ui/inputs/PasswordInput.tsx

@@ -1,16 +0,0 @@
-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/react-native/src/components/ui/inputs/Radio.tsx

@@ -1,54 +0,0 @@
-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/react-native/src/components/ui/inputs/SearchBar.tsx

@@ -1,53 +0,0 @@
-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/react-native/src/components/ui/inputs/Slider.tsx

@@ -1,49 +0,0 @@
-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/react-native/src/components/ui/inputs/Switch.tsx

@@ -1,75 +0,0 @@
-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>
-  );
-}

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

@@ -1,15 +0,0 @@
-import React from "react";
-import Input, { InputProps } from "./Input";
-
-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}
-    />
-  );
-}