@imksh/create 1.0.26 → 1.0.28

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

@@ -1,321 +0,0 @@
-import React, { useState, useEffect, useRef, useMemo } from "react";
-import { View, Modal, TouchableOpacity, ActivityIndicator } from "react-native";
-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";
-import Input from "./Input";
-import { toast } from "@/utils/toast";
-import { WebView, WebViewMessageEvent } from "react-native-webview";
-import { LocationLoader } from "../../common/LocationLoader";
-
-export interface LocationDetails {
-  addressLine1: string;
-  addressLine2?: string;
-  locality: string;
-  city: string;
-  state: string;
-  pinCode: string;
-  latitude: number;
-  longitude: number;
-}
-
-interface WebLocationPickerProps {
-  onLocationSelected: (details: LocationDetails) => void;
-  initialCoordinate?: { latitude: number; longitude: number };
-  renderTrigger?: (onPress: () => void) => React.ReactNode;
-}
-
-export default function WebLocationPicker({
-  onLocationSelected,
-  initialCoordinate,
-  renderTrigger,
-}: WebLocationPickerProps) {
-  const { colorScheme } = useColorScheme();
-  const theme = Colors[colorScheme ?? "light"];
-
-  const [modalVisible, setModalVisible] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [searching, setSearching] = useState(false);
-  
-  const [loadingLocation, setLoadingLocation] = useState(false);
-  const [animationDone, setAnimationDone] = useState(false);
-  const [positionFetched, setPositionFetched] = useState(false);
-  
-  const [mapCenter, setMapCenter] = useState({
-    latitude: initialCoordinate?.latitude || 28.6139,
-    longitude: initialCoordinate?.longitude || 77.209,
-  });
-
-  const [currentCenter, setCurrentCenter] = useState(mapCenter);
-
-  const webViewRef = useRef<WebView>(null);
-
-  useEffect(() => {
-    if (initialCoordinate?.latitude && initialCoordinate?.longitude) {
-       
-      setMapCenter(initialCoordinate);
-      setCurrentCenter(initialCoordinate);
-    }
-  }, [initialCoordinate]);
-
-  useEffect(() => {
-    if (animationDone && positionFetched) {
-      setLoadingLocation(false);
-    }
-  }, [animationDone, positionFetched]);
-
-  const requestLocationAndOpenMap = async () => {
-    setModalVisible(true);
-    setLoadingLocation(true);
-    setAnimationDone(false);
-    setPositionFetched(false);
-
-    // Asynchronously fetch current position
-    (async () => {
-      try {
-        let { status } = await Location.requestForegroundPermissionsAsync();
-        if (status !== "granted") {
-          setPositionFetched(true);
-          return;
-        }
-
-        if (!initialCoordinate?.latitude) {
-          let location = await Location.getCurrentPositionAsync({ accuracy: Location.Accuracy.Balanced });
-          setMapCenter({
-            latitude: location.coords.latitude,
-            longitude: location.coords.longitude,
-          });
-          setCurrentCenter({
-            latitude: location.coords.latitude,
-            longitude: location.coords.longitude,
-          });
-        }
-      } catch (e) {
-        console.warn(e);
-      } finally {
-        setPositionFetched(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);
-  };
-
-  const handleSearch = async () => {
-    if (!searchQuery.trim()) return;
-    setSearching(true);
-    try {
-      const results = await Location.geocodeAsync(searchQuery);
-      if (results && results.length > 0) {
-        const { latitude, longitude } = results[0];
-        setCurrentCenter({ latitude, longitude });
-        webViewRef.current?.injectJavaScript(`
-          map.setView([${latitude}, ${longitude}], 15);
-          true;
-        `);
-      } else {
-        toast.success("Location not found");
-      }
-    } catch (error) {
-      console.warn("Search failed", error);
-      toast.error("Failed to search location");
-    }
-    setSearching(false);
-  };
-
-  const handleMessage = (event: WebViewMessageEvent) => {
-    try {
-      const data = JSON.parse(event.nativeEvent.data);
-      if (data.type === "centerChanged") {
-        setCurrentCenter({
-          latitude: data.lat,
-          longitude: data.lng,
-        });
-      }
-    } catch {}
-  };
-
-  const htmlContent = useMemo(() => `
-    <!DOCTYPE html>
-    <html>
-    <head>
-      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
-      <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-      <style>
-        body, html, #map { margin: 0; padding: 0; height: 100%; width: 100%; background: #f0f0f0; }
-        .center-marker {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -100%);
-          z-index: 1000;
-          font-size: 36px;
-          pointer-events: none;
-        }
-      </style>
-    </head>
-    <body>
-      <div id="map"></div>
-      <div class="center-marker">📍</div>
-      <script>
-        var map = L.map('map', { zoomControl: false, attributionControl: false }).setView([${mapCenter.latitude}, ${mapCenter.longitude}], 15);
-        L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
-          maxZoom: 19
-        }).addTo(map);
-
-        map.on('moveend', function() {
-          var center = map.getCenter();
-          window.ReactNativeWebView.postMessage(JSON.stringify({
-            type: 'centerChanged',
-            lat: center.lat,
-            lng: center.lng
-          }));
-        });
-      </script>
-    </body>
-    </html>
-  `, [mapCenter.latitude, mapCenter.longitude]);
-
-  return (
-    <>
-      {renderTrigger ? (
-        renderTrigger(requestLocationAndOpenMap)
-      ) : (
-        <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)}
-      >
-        {loadingLocation ? (
-          <View style={{ flex: 1 }}>
-            <LocationLoader
-              onReady={() => {
-                setAnimationDone(true);
-              }}
-            />
-          </View>
-        ) : (
-          <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)}>
-              <Ionicons name="close" size={28} color={theme.baseContent} />
-            </TouchableOpacity>
-            <Txt weight="bold" style={{ fontSize: 18 }}>
-              Select Location
-            </Txt>
-            <View style={{ width: 28 }} />
-          </View>
-
-          <View className="px-4 py-3 bg-base-100 flex-row items-center border-b border-base-200 gap-4">
-            <View className="flex-1" style={{ marginBottom: -16 }}>
-              <Input
-                placeholder="Search city, area, etc."
-                value={searchQuery}
-                onChangeText={setSearchQuery}
-                onSubmitEditing={handleSearch}
-                returnKeyType="search"
-                containerStyle={{ marginBottom: 0 }}
-                leftIcon="search"
-              />
-            </View>
-            <Button 
-              onPress={handleSearch} 
-              isLoading={searching} 
-              label="Go" 
-              variant="primary"
-              soft
-              size="md"
-              className="my-auto"
-            />
-          </View>
-
-          <View className="flex-1 relative">
-            <WebView
-              ref={webViewRef}
-              source={{ html: htmlContent }}
-              onMessage={handleMessage}
-              style={{ flex: 1 }}
-              javaScriptEnabled={true}
-              scrollEnabled={false}
-              bounces={false}
-              startInLoadingState={true}
-              renderLoading={() => (
-                <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0' }}>
-                  <ActivityIndicator size="large" color={theme.primary} />
-                </View>
-              )}
-            />
-          </View>
-
-          <View className="p-4 bg-base-100 border-t border-base-300 pb-8">
-            <Button
-              label="Confirm Location"
-              onPress={handleConfirmLocation}
-              isLoading={loading}
-              variant="primary"
-            />
-          </View>
-          </View>
-        )}
-      </Modal>
-    </>
-  );
-}

package/templates/react-native/src/components/ui/layout/Container.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import { View, ViewProps } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-export interface ContainerProps extends ViewProps {
-  safeArea?: boolean;
-}
-
-export default function Container({ children, style, safeArea = true, ...props }: ContainerProps) {
-  const insets = useSafeAreaInsets();
-  return (
-    <View
-      style={[
-        { flex: 1, paddingHorizontal: 20 },
-        safeArea && { paddingTop: insets.top, paddingBottom: insets.bottom },
-        style,
-      ]}
-      {...props}
-    >
-      {children}
-    </View>
-  );
-}

package/templates/react-native/src/components/ui/layout/Divider.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-import { View, StyleProp, ViewStyle } from "react-native";
-import { useColorScheme } from "nativewind";
-import { Colors } from "../../../constants/Colors";
-
-export default function Divider({ style, vertical }: { style?: StyleProp<ViewStyle>; vertical?: boolean }) {
-  const { colorScheme } = useColorScheme();
-  const theme = Colors[colorScheme ?? "light"];
-  return (
-    <View
-      style={[
-        {
-          backgroundColor: theme.base300,
-          ...(vertical ? { width: 1, height: "100%" } : { height: 1, width: "100%" }),
-        },
-        style,
-      ]}
-    />
-  );
-}

package/templates/react-native/src/components/ui/layout/Grid.tsx

@@ -1,62 +0,0 @@
-import React from "react";
-import { View, ViewProps } from "react-native";
-
-export interface GridProps extends ViewProps {
-  cols?: number;
-  gap?: number;
-  children: React.ReactNode;
-}
-
-export interface GridItemProps extends ViewProps {
-  colSpan?: number;
-  children: React.ReactNode;
-}
-
-export function GridItem({
-  children,
-  ...props
-}: GridItemProps) {
-  return <View {...props}>{children}</View>;
-}
-
-export default function Grid({
-  cols = 2,
-  gap = 12,
-  children,
-  style,
-  ...props
-}: GridProps) {
-  return (
-    <View
-      style={[
-        {
-          flexDirection: "row",
-          flexWrap: "wrap",
-          margin: -gap / 2,
-        },
-        style,
-      ]}
-      {...props}
-    >
-      {React.Children.map(children, (child) => {
-        if (!React.isValidElement(child)) return null;
-
-        const colSpan = Math.min(
-          (child as React.ReactElement<GridItemProps>).props.colSpan ?? 1,
-          cols
-        );
-
-        return (
-          <View
-            style={{
-              width: `${(100 / cols) * colSpan}%`,
-              padding: gap / 2,
-            }}
-          >
-            {child}
-          </View>
-        );
-      })}
-    </View>
-  );
-}

package/templates/react-native/src/components/ui/layout/KeyboardAvoidingViewWrapper.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-import { KeyboardAvoidingView, Platform, KeyboardAvoidingViewProps, TouchableWithoutFeedback, Keyboard } from "react-native";
-
-export default function KeyboardAvoidingViewWrapper({ children, ...props }: KeyboardAvoidingViewProps) {
-  return (
-    <KeyboardAvoidingView
-      style={{ flex: 1 }}
-      behavior={Platform.OS === "ios" ? "padding" : "height"}
-      {...props}
-    >
-      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-        {children}
-      </TouchableWithoutFeedback>
-    </KeyboardAvoidingView>
-  );
-}

package/templates/react-native/src/components/ui/layout/ScrollContainer.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-import { ScrollViewProps } from "react-native";
-import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-export default function ScrollContainer({ contentContainerStyle, children, ...props }: ScrollViewProps) {
-  const insets = useSafeAreaInsets();
-  return (
-    <KeyboardAwareScrollView
-      showsVerticalScrollIndicator={false}
-      keyboardShouldPersistTaps="handled"
-      enableOnAndroid={true}
-      extraScrollHeight={20}
-      removeClippedSubviews={true}
-      contentContainerStyle={[{ paddingBottom: insets.bottom + 20 }, contentContainerStyle]}
-      {...props}
-    >
-      {children}
-    </KeyboardAwareScrollView>
-  );
-}

package/templates/react-native/src/components/ui/layout/Section.tsx

@@ -1,51 +0,0 @@
-import React from "react";
-import { View, ViewProps } from "react-native";
-import { useColorScheme } from "nativewind";
-import { Colors } from "../../../constants/Colors";
-import { Txt } from "../../common/Typography";
-
-export interface SectionProps extends ViewProps {
-  title?: string;
-  titleClass?: string;
-  action?: React.ReactNode;
-}
-
-export default function Section({
-  title,
-  titleClass = "",
-  action,
-  children,
-  style,
-  ...props
-}: SectionProps) {
-  const { colorScheme } = useColorScheme();
-  const theme = Colors[colorScheme ?? "light"];
-
-  return (
-    <View style={[{ marginBottom: 24 }, style]} {...props}>
-      {(title || action) && (
-        <View
-          style={{
-            flexDirection: "row",
-            justifyContent: "space-between",
-            alignItems: "center",
-            marginBottom: 12,
-          }}
-        >
-          {title && (
-            <Txt
-              color={theme.baseContent}
-              weight="bold"
-              variant="lg"
-              className={titleClass}
-            >
-              {title}
-            </Txt>
-          )}
-          {action}
-        </View>
-      )}
-      {children}
-    </View>
-  );
-}

package/templates/react-native/src/components/ui/layout/Spacer.tsx

@@ -1,6 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-
-export default function Spacer({ size = 16, horizontal = false }: { size?: number; horizontal?: boolean }) {
-  return <View style={{ [horizontal ? "width" : "height"]: size }} />;
-}

package/templates/react-native/src/components/ui/layout/Stack.tsx

@@ -1,34 +0,0 @@
-import React from "react";
-import { View, ViewProps, FlexAlignType } from "react-native";
-
-export interface StackProps extends ViewProps {
-  direction?: "row" | "column";
-  spacing?: number;
-  align?: FlexAlignType;
-  justify?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
-}
-
-export default function Stack({
-  direction = "column",
-  spacing = 8,
-  align = "stretch",
-  justify = "flex-start",
-  children,
-  style,
-  ...props
-}: StackProps) {
-  return (
-    <View
-      style={[
-        { flexDirection: direction, gap: spacing, alignItems: align, justifyContent: justify },
-        style,
-      ]}
-      {...props}
-    >
-      {children}
-    </View>
-  );
-}
-
-export const HStack = (props: Omit<StackProps, "direction">) => <Stack direction="row" {...props} />;
-export const VStack = (props: Omit<StackProps, "direction">) => <Stack direction="column" {...props} />;

package/templates/react-native/src/components/ui/navigation/Pagination.tsx

@@ -1,61 +0,0 @@
-import React from "react";
-import { View, 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 PaginationProps {
-  currentPage: number;
-  totalPages: number;
-  onPageChange: (page: number) => void;
-}
-
-export default function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
-  const { colorScheme } = useColorScheme();
-  const theme = Colors[colorScheme ?? "light"];
-
-  const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
-
-  return (
-    <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 8 }}>
-      <TouchableOpacity
-        disabled={currentPage === 1}
-        onPress={() => onPageChange(currentPage - 1)}
-        style={{ padding: 8, opacity: currentPage === 1 ? 0.5 : 1 }}
-      >
-        <Ionicons name="chevron-back" size={20} color={theme.baseContent} />
-      </TouchableOpacity>
-      
-      {pages.map((p) => {
-        const isActive = p === currentPage;
-        return (
-          <TouchableOpacity
-            key={p}
-            onPress={() => onPageChange(p)}
-            style={{
-              width: 32,
-              height: 32,
-              borderRadius: 16,
-              backgroundColor: isActive ? theme.primary : "transparent",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            <Txt color={isActive ? theme.primaryContent : theme.baseContent} weight={isActive ? "bold" : "semibold"}>
-              {p}
-            </Txt>
-          </TouchableOpacity>
-        );
-      })}
-
-      <TouchableOpacity
-        disabled={currentPage === totalPages}
-        onPress={() => onPageChange(currentPage + 1)}
-        style={{ padding: 8, opacity: currentPage === totalPages ? 0.5 : 1 }}
-      >
-        <Ionicons name="chevron-forward" size={20} color={theme.baseContent} />
-      </TouchableOpacity>
-    </View>
-  );
-}

package/templates/react-native/src/components/ui/navigation/ProgressStepper.tsx

@@ -1,66 +0,0 @@
-import React from "react";
-import { View } 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 ProgressStepperProps {
-  steps: string[];
-  currentStep: number;
-}
-
-export default function ProgressStepper({ steps, currentStep }: ProgressStepperProps) {
-  const { colorScheme } = useColorScheme();
-  const theme = Colors[colorScheme ?? "light"];
-
-  return (
-    <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", width: "100%", paddingHorizontal: 16 }}>
-      {steps.map((step, index) => {
-        const isCompleted = index < currentStep;
-        const isActive = index === currentStep;
-        
-        return (
-          <React.Fragment key={index}>
-            <View style={{ alignItems: "center", width: 40 }}>
-              <View
-                style={{
-                  width: 32,
-                  height: 32,
-                  borderRadius: 16,
-                  backgroundColor: isCompleted ? theme.success : isActive ? theme.primary : theme.base300,
-                  alignItems: "center",
-                  justifyContent: "center",
-                  marginBottom: 8,
-                }}
-              >
-                {isCompleted ? (
-                  <Ionicons name="checkmark" size={16} color="#fff" />
-                ) : (
-                  <Txt color={isActive ? theme.primaryContent : theme.secondary} weight="bold">
-                    {index + 1}
-                  </Txt>
-                )}
-              </View>
-              <Txt color={isActive ? theme.primary : theme.secondary} variant="xs" align="center">
-                {step}
-              </Txt>
-            </View>
-            
-            {index < steps.length - 1 && (
-              <View
-                style={{
-                  flex: 1,
-                  height: 2,
-                  backgroundColor: index < currentStep ? theme.success : theme.base300,
-                  marginHorizontal: 4,
-                  marginTop: -20,
-                }}
-              />
-            )}
-          </React.Fragment>
-        );
-      })}
-    </View>
-  );
-}