@imksh/create 1.0.31 → 1.0.33

package/templates/layers/react-native/base/src/components/ui/inputs/ImagePickerModal.tsx

@@ -2,9 +2,10 @@ import React from "react";
 import { View } from "react-native";
 import * as ImagePicker from "expo-image-picker";
 import { Txt } from "@/components/common/Typography";
-import BottomModal from "@/components/ui/BottomModal";
+import Drawer from "@/components/ui/Drawer";
 import Button from "@/components/ui/buttons/Button";
 
+
 export type ImagePickerSource = "camera" | "gallery" | "both";
 
 export interface ImagePickerResult {
@@ -23,6 +24,7 @@ export interface ImagePickerModalProps {
   subtitle?: string;
   allowsEditing?: boolean;
   allowsMultipleSelection?: boolean;
+  aspectRatio?: [number, number];
 }
 
 export default function ImagePickerModal({
@@ -34,9 +36,9 @@ export default function ImagePickerModal({
   title = "Select Image Source",
   subtitle = "Choose where to pick your image from",
   allowsEditing = false,
+  aspectRatio = [1, 1],
   allowsMultipleSelection = false,
 }: ImagePickerModalProps) {
-
   const launchPicker = async (type: "gallery" | "camera") => {
     onClose();
 
@@ -51,10 +53,10 @@ export default function ImagePickerModal({
 
           result = await ImagePicker.launchImageLibraryAsync({
             mediaTypes: ["images"],
-            quality: 0.8,
+            quality: 0.6,
             allowsEditing: !allowsMultipleSelection && allowsEditing, // multi-select cannot have editing on some OS
             allowsMultipleSelection,
-            aspect: allowsEditing ? [16, 9] : undefined, // Assuming a common aspect ratio if cropped
+            aspect: allowsEditing ? aspectRatio : undefined, // Assuming a common aspect ratio if cropped
           });
         } else {
           const perm = await ImagePicker.requestCameraPermissionsAsync();
@@ -62,23 +64,47 @@ export default function ImagePickerModal({
 
           result = await ImagePicker.launchCameraAsync({
             mediaTypes: ["images"],
-            quality: 0.8,
+            quality: 0.6,
             allowsEditing,
-            aspect: allowsEditing ? [16, 9] : undefined,
+            aspect: allowsEditing ? aspectRatio : undefined,
           });
         }
 
-        if (result && !result.canceled && result.assets && result.assets.length > 0) {
-          const mappedAssets = result.assets.map(asset => {
-            const filename = asset.uri.split("/").pop() || "image.jpg";
-            const match = /\.(\w+)$/.exec(filename);
-            const mimeType = match ? `image/${match[1]}` : "image/jpeg";
-            return {
-              uri: asset.uri,
-              name: filename,
-              type: mimeType,
-            };
-          });
+        if (
+          result &&
+          !result.canceled &&
+          result.assets &&
+          result.assets.length > 0
+        ) {
+          const mappedAssets = await Promise.all(
+            result.assets.map(async (asset) => {
+              let finalUri = asset.uri;
+
+              // Resize image if it's too large to save bandwidth
+              if (asset.width > 1024 || asset.height > 1024) {
+                const resizeAction =
+                  asset.width > asset.height
+                    ? { resize: { width: 1024 } }
+                    : { resize: { height: 1024 } };
+
+                const manipResult = await ImageManipulator.manipulateAsync(
+                  asset.uri,
+                  [resizeAction],
+                  { compress: 0.7, format: ImageManipulator.SaveFormat.JPEG },
+                );
+                finalUri = manipResult.uri;
+              }
+
+              const filename = finalUri.split("/").pop() || "image.jpg";
+              const match = /\.(\w+)$/.exec(filename);
+              const mimeType = match ? `image/${match[1]}` : "image/jpeg";
+              return {
+                uri: finalUri,
+                name: filename,
+                type: mimeType,
+              };
+            }),
+          );
 
           if (allowsMultipleSelection && onImagesSelected) {
             onImagesSelected(mappedAssets);
@@ -93,7 +119,7 @@ export default function ImagePickerModal({
   };
 
   return (
-    <BottomModal isOpen={isOpen} onClose={onClose}>
+    <Drawer isOpen={isOpen} onClose={onClose} position="bottom">
       <View className="p-6">
         <Txt variant="lg" className="font-bold mb-1 text-center">
           {title}
@@ -124,6 +150,6 @@ export default function ImagePickerModal({
           )}
         </View>
       </View>
-    </BottomModal>
+    </Drawer>
   );
 }

package/templates/layers/react-native/base/src/components/ui/inputs/Input.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import {
   View,
   TextInput,
@@ -16,11 +16,16 @@ export interface InputProps extends TextInputProps {
   leftIcon?: keyof typeof Ionicons.glyphMap;
   rightIcon?: keyof typeof Ionicons.glyphMap;
   onRightIconPress?: () => void;
+  placeHolder?: string;
+  style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
   helperText?: string;
   containerStyle?: import("react-native").StyleProp<
     import("react-native").ViewStyle
   >;
   labelOnBorder?: boolean;
+  className?: string;
+  weight?: "normal" | "medium" | "bold" | "semibold" | "black";
+  size?: "sm" | "md" | "lg";
 }
 
 export default function Input({
@@ -31,8 +36,12 @@ export default function Input({
   onRightIconPress,
   helperText,
   style,
+  placeHolder = "",
   containerStyle,
   labelOnBorder = false,
+  className = "mb-2",
+  weight = "normal",
+  size = "md",
   ...props
 }: InputProps) {
   const { colorScheme } = useColorScheme();
@@ -45,13 +54,22 @@ export default function Input({
       ? theme.primary
       : theme.base300;
 
+  const inputHeight = size === "sm" ? 40 : size === "lg" ? 64 : 52;
+  const inputFontSize = size === "sm" ? 14 : size === "lg" ? 18 : 16;
+  const iconSize = size === "sm" ? 16 : size === "lg" ? 24 : 20;
+  const labelSize = size === "sm" ? "xs" : size === "lg" ? "lg" : "base";
   return (
-    <View className="mb-4 relative">
+    <View
+      className={`${className} relative ${props.editable === false ? "opacity-50" : ""}`}
+    >
       {!labelOnBorder && label && (
         <Txt
           color={theme.baseContent}
-          weight="semibold"
           style={{ marginBottom: 6 }}
+          weight={weight}
+          variant={labelSize}
+          adjustsFontSizeToFit
+          numberOfLines={1}
         >
           {label} {error ? "*" : ""}{" "}
         </Txt>
@@ -63,7 +81,7 @@ export default function Input({
             position: "absolute",
             top: -6,
             left: 12,
-            backgroundColor: theme.base100,
+            backgroundColor: theme.base200,
             paddingHorizontal: 6,
             zIndex: 10,
           }}
@@ -85,12 +103,12 @@ export default function Input({
           {
             flexDirection: "row",
             alignItems: "center",
-            backgroundColor: theme.base100,
+            backgroundColor: theme.base200,
             borderWidth: 1,
             borderColor,
             borderRadius: 12,
             paddingHorizontal: 12,
-            height: 52,
+            height: inputHeight,
           },
           containerStyle,
         ]}
@@ -98,7 +116,7 @@ export default function Input({
         {leftIcon && (
           <Ionicons
             name={leftIcon}
-            size={20}
+            size={iconSize}
             color={isFocused ? theme.primary : theme.secondary}
             style={{ marginRight: 8 }}
           />
@@ -109,12 +127,13 @@ export default function Input({
             {
               flex: 1,
               color: theme.baseContent,
-              fontSize: 16,
+              fontSize: inputFontSize,
               height: "100%",
             },
             style,
           ]}
           placeholderTextColor={theme.secondary}
+          placeholder={placeHolder}
           onFocus={(e) => {
             setIsFocused(true);
             props.onFocus?.(e);
@@ -133,7 +152,7 @@ export default function Input({
           >
             <Ionicons
               name={rightIcon}
-              size={20}
+              size={iconSize}
               color={theme.secondary}
               style={{ marginLeft: 8 }}
             />

package/templates/layers/react-native/base/src/components/ui/inputs/SearchablePicker.tsx

@@ -0,0 +1,199 @@
+import React, { useState, useMemo } from "react";
+import {
+  View,
+  TouchableOpacity,
+  Modal,
+  FlatList,
+  ActivityIndicator,
+} from "react-native";
+import { Txt } from "../../common/Typography";
+import { Ionicons } from "@expo/vector-icons";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../../constants/Colors";
+import ScreenHeader from "@/components/common/ScreenHeader";
+import SearchBar from "./SearchBar";
+
+interface SearchablePickerProps<T> {
+  label?: string;
+  data: T[];
+  value: string;
+  onSelect: (item: T) => void;
+  labelExtractor: (item: T) => string;
+  valueExtractor: (item: T) => string;
+  placeholder?: string;
+  isLoading?: boolean;
+  size?: "xs" | "sm" | "md" | "lg";
+  className?: string;
+  weight?: "normal" | "medium" | "bold" | "semibold" | "black";
+  renderTrigger?: (
+    onPress: () => void,
+    selectedItem: T | undefined,
+  ) => React.ReactNode;
+  onSearchChange?: (text: string) => void;
+  onEndReached?: () => void;
+  disableLocalFilter?: boolean;
+  renderOption?: (item: T, isSelected: boolean) => React.ReactNode;
+}
+export default function SearchablePicker<T>({
+  label,
+  data,
+  value,
+  onSelect,
+  labelExtractor,
+  valueExtractor,
+  placeholder = "Select an option",
+  isLoading = false,
+  size = "md",
+  className = "mb-4",
+  weight = "normal",
+  renderTrigger,
+  onSearchChange,
+  onEndReached,
+  disableLocalFilter = false,
+  renderOption,
+}: SearchablePickerProps<T>) {
+  const { colorScheme } = useColorScheme();
+  const theme = Colors[colorScheme ?? "light"];
+  const [modalVisible, setModalVisible] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const selectedItem = useMemo(
+    () => data.find((item) => valueExtractor(item) === value),
+    [data, value, valueExtractor],
+  );
+
+  const filteredData = useMemo(() => {
+    if (disableLocalFilter) return data;
+    if (!searchQuery) return data;
+    return data.filter((item) =>
+      labelExtractor(item).toLowerCase().includes(searchQuery.toLowerCase()),
+    );
+  }, [data, searchQuery, labelExtractor, disableLocalFilter]);
+
+  return (
+    <View className={className}>
+      {label && (
+        <Txt
+          color={theme.baseContent}
+          weight={weight}
+          style={{ marginBottom: 6 }}
+        >
+          {label}
+        </Txt>
+      )}
+      {renderTrigger ? (
+        renderTrigger(() => setModalVisible(true), selectedItem)
+      ) : (
+        <TouchableOpacity
+          onPress={() => setModalVisible(true)}
+          className="bg-base-100 border border-base-300 rounded-xl px-4 flex-row items-center justify-between"
+          style={{
+            height:
+              size === "xs" ? 30 : size === "sm" ? 40 : size === "lg" ? 64 : 52,
+          }}
+        >
+          <Txt
+            className={
+              selectedItem ? "text-base-content" : "text-base-content/50"
+            }
+            style={{
+              fontSize:
+                size === "xs"
+                  ? 12
+                  : size === "sm"
+                    ? 14
+                    : size === "lg"
+                      ? 18
+                      : 16,
+            }}
+          >
+            {selectedItem ? labelExtractor(selectedItem) : placeholder}
+          </Txt>
+          <Ionicons
+            name="chevron-down"
+            size={size === "xs" ? 14 : size === "sm" ? 16 : 20}
+            color={theme.secondary}
+          />
+        </TouchableOpacity>
+      )}
+
+      <Modal
+        visible={modalVisible}
+        animationType="slide"
+        presentationStyle="pageSheet"
+        onRequestClose={() => setModalVisible(false)}
+      >
+        <View className="flex-1 bg-base-100">
+          <ScreenHeader
+            title={label || "Select"}
+            icon="close"
+            onBack={() => setModalVisible(false)}
+          />
+
+          <View className="px-4 pt-4">
+            <SearchBar
+              value={searchQuery}
+              onChangeText={(text) => {
+                setSearchQuery(text);
+                if (onSearchChange) onSearchChange(text);
+              }}
+              debounceMs={0}
+            />
+          </View>
+
+          {isLoading ? (
+            <ActivityIndicator
+              style={{ marginTop: 20 }}
+              color={theme.primary}
+            />
+          ) : (
+            <FlatList
+              data={filteredData}
+              keyExtractor={(item, idx) =>
+                valueExtractor(item) || idx.toString()
+              }
+              contentContainerStyle={{
+                paddingHorizontal: 16,
+                paddingBottom: 40,
+              }}
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  onPress={() => {
+                    onSelect(item);
+                    setModalVisible(false);
+                    setSearchQuery("");
+                  }}
+                  className="py-4 border-b border-base-200 flex-row justify-between items-center"
+                >
+                  {renderOption ? (
+                    renderOption(item, valueExtractor(item) === value)
+                  ) : (
+                    <>
+                      <Txt>{labelExtractor(item)}</Txt>
+                      {valueExtractor(item) === value && (
+                        <Ionicons
+                          name="checkmark"
+                          size={20}
+                          color={theme.primary}
+                        />
+                      )}
+                    </>
+                  )}
+                </TouchableOpacity>
+              )}
+              ListEmptyComponent={() => (
+                <View className="items-center py-8">
+                  <Txt className="text-base-content/50">
+                    No data found
+                  </Txt>
+                </View>
+              )}
+              onEndReached={onEndReached}
+              onEndReachedThreshold={0.5}
+            />
+          )}
+        </View>
+      </Modal>
+    </View>
+  );
+}

package/templates/layers/react-native/base/src/components/ui/inputs/Switch.tsx

@@ -11,15 +11,15 @@ import { Colors } from "../../../constants/Colors";
 import { Txt } from "../../common/Typography";
 
 export interface SwitchProps {
-  checked: boolean;
-  onChange?: (checked: boolean) => void;
+  value: boolean;
+  onChange?: (value: boolean) => void;
   label?: string;
   disabled?: boolean;
   style?: StyleProp<ViewStyle>;
 }
 
 export default function Switch({
-  checked,
+  value,
   onChange,
   label,
   disabled,
@@ -28,11 +28,11 @@ export default function Switch({
   const { colorScheme } = useColorScheme();
   const theme = Colors[colorScheme ?? "light"];
   
-  const progress = useSharedValue(checked ? 1 : 0);
+  const progress = useSharedValue(value ? 1 : 0);
 
   useEffect(() => {
-    progress.value = withTiming(checked ? 1 : 0, { duration: 250 });
-  }, [checked, progress]);
+    progress.value = withTiming(value ? 1 : 0, { duration: 250 });
+  }, [value, progress]);
 
   const trackStyle = useAnimatedStyle(() => {
     const backgroundColor = interpolateColor(
@@ -53,7 +53,7 @@ export default function Switch({
     <TouchableOpacity
       activeOpacity={0.8}
       disabled={disabled}
-      onPress={() => onChange && onChange(!checked)}
+      onPress={() => onChange && onChange(!value)}
       style={[{ flexDirection: "row", alignItems: "center", opacity: disabled ? 0.5 : 1 }, style]}
     >
       <Animated.View