@imksh/create 1.0.26 → 1.0.28

package/templates/react-native/src/components/ui/feedback/Skeleton.tsx

@@ -1,84 +0,0 @@
-import React, { useEffect } from "react";
-import { StyleProp, ViewStyle } from "react-native";
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withRepeat,
-  withTiming,
-  withSequence,
-} from "react-native-reanimated";
-import { useColorScheme } from "nativewind";
-import { Colors } from "../../../constants/Colors";
-
-export interface SkeletonProps {
-  width?: number | string;
-  height?: number | string;
-  borderRadius?: number;
-  style?: StyleProp<ViewStyle>;
-  variant?: "circular" | "rectangular" | "text";
-  className?: string;
-}
-
-export default function Skeleton({
-  width,
-  height,
-  borderRadius,
-  style,
-  variant = "rectangular",
-  className=""
-}: SkeletonProps) {
-  const { colorScheme } = useColorScheme();
-  const theme = Colors[colorScheme ?? "light"];
-  const opacity = useSharedValue(0.3);
-
-  useEffect(() => {
-    opacity.value = withRepeat(
-      withSequence(
-        withTiming(0.7, { duration: 800 }),
-        withTiming(0.3, { duration: 800 })
-      ),
-      -1,
-      true
-    );
-  }, [opacity]);
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    opacity: opacity.value,
-  }));
-
-  const getVariantStyles = (): ViewStyle => {
-    switch (variant) {
-      case "circular":
-        return {
-          width: (width as import('react-native').DimensionValue) ?? 40,
-          height: (height as import('react-native').DimensionValue) ?? ((width as import('react-native').DimensionValue) ?? 40),
-          borderRadius: 9999,
-        };
-      case "text":
-        return {
-          width: (width as import('react-native').DimensionValue) ?? "100%",
-          height: (height as import('react-native').DimensionValue) ?? 20,
-          borderRadius: borderRadius ?? 4,
-        };
-      case "rectangular":
-      default:
-        return {
-          width: (width as import('react-native').DimensionValue) ?? "100%",
-          height: (height as import('react-native').DimensionValue) ?? 100,
-          borderRadius: borderRadius ?? 12,
-        };
-    }
-  };
-
-  return (
-    <Animated.View
-      style={[
-        { backgroundColor: theme.base300 },
-        getVariantStyles(),
-        animatedStyle,
-        style,
-      ]}
-      className={className}
-    />
-  );
-}

package/templates/react-native/src/components/ui/feedback/Spinner.tsx

@@ -1,50 +0,0 @@
-import React, { useEffect } from "react";
-import { StyleProp, ViewStyle } from "react-native";
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withRepeat,
-  withTiming,
-  Easing,
-} from "react-native-reanimated";
-import { useColorScheme } from "nativewind";
-import { Colors } from "../../../constants/Colors";
-import { EvilIcons } from "@expo/vector-icons";
-
-export interface SpinnerProps {
-  size?: number | "xs" | "sm" | "md" | "lg" | "xl";
-  color?: string;
-  style?: StyleProp<ViewStyle>;
-}
-
-export default function Spinner({ size = 24, color, style }: SpinnerProps) {
-  const { colorScheme } = useColorScheme();
-  const theme = Colors[colorScheme ?? "light"];
-  const rotation = useSharedValue(0);
-
-  const numericSize = typeof size === "number" ? size : {
-    xs: 16,
-    sm: 20,
-    md: 24,
-    lg: 32,
-    xl: 40,
-  }[size] || 24;
-
-  useEffect(() => {
-    rotation.value = withRepeat(
-      withTiming(360, { duration: 2000, easing: Easing.linear }),
-      -1,
-      false
-    );
-  }, [rotation]);
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ rotate: `${rotation.value}deg` }],
-  }));
-
-  return (
-    <Animated.View style={[animatedStyle, style, { width: numericSize, height: numericSize, alignItems: "center", justifyContent: "center" }]}>
-      <EvilIcons name="spinner" size={numericSize} color={color || theme.primary} />
-    </Animated.View>
-  );
-}

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

@@ -1,54 +0,0 @@
-import React from "react";
-import { TouchableOpacity, View } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
-import { useColorScheme } from "nativewind";
-import { Colors } from "../../../constants/Colors";
-import { Txt } from "../../common/Typography";
-
-export interface CheckboxProps {
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-  label?: string;
-  disabled?: boolean;
-}
-
-export default function Checkbox({
-  checked,
-  onChange,
-  label,
-  disabled,
-}: CheckboxProps) {
-  const { colorScheme } = useColorScheme();
-  const theme = Colors[colorScheme ?? "light"];
-
-  return (
-    <TouchableOpacity
-      activeOpacity={0.7}
-      disabled={disabled}
-      onPress={() => onChange(!checked)}
-      style={{
-        flexDirection: "row",
-        alignItems: "center",
-        opacity: disabled ? 0.5 : 1,
-        marginBottom: 8,
-      }}
-    >
-      <View
-        style={{
-          width: 24,
-          height: 24,
-          borderRadius: 6,
-          borderWidth: checked ? 0 : 2,
-          borderColor: theme.base300,
-          backgroundColor: checked ? theme.primary : "transparent",
-          alignItems: "center",
-          justifyContent: "center",
-          marginRight: 10,
-        }}
-      >
-        {checked && <Ionicons name="checkmark" size={16} color={theme.primaryContent} />}
-      </View>
-      {label && <Txt color={theme.baseContent} variant="base">{label}</Txt>}
-    </TouchableOpacity>
-  );
-}

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

@@ -1,186 +0,0 @@
-import React, { useState } from "react";
-import { View, TouchableOpacity, ScrollView } from "react-native";
-import { Txt } from "../../common/Typography";
-import { Ionicons } from "@expo/vector-icons";
-import { useColorScheme } from "nativewind";
-import { Colors } from "../../../constants/Colors";
-import BottomModal from "../BottomModal";
-import Button from "../buttons/Button";
-import dayjs from "dayjs";
-
-interface DatePickerProps {
-  label: string;
-  value: string; // YYYY-MM-DD
-  onChange: (value: string) => void;
-  placeholder?: string;
-  minimumDate?: string; // YYYY-MM-DD
-}
-
-export default function DatePicker({
-  label,
-  value,
-  onChange,
-  placeholder = "Select Date",
-  minimumDate,
-}: DatePickerProps) {
-  const { colorScheme } = useColorScheme();
-  const colors = Colors[colorScheme ?? "light"];
-  const [isOpen, setIsOpen] = useState(false);
-
-  // Parse initial selected date or default to today
-  const selectedDate = value ? dayjs(value) : dayjs();
-  const [currentMonth, setCurrentMonth] = useState(selectedDate);
-
-  // Month navigation
-  const handlePrevMonth = () => {
-    setCurrentMonth((prev) => prev.subtract(1, "month"));
-  };
-
-  const handleNextMonth = () => {
-    setCurrentMonth((prev) => prev.add(1, "month"));
-  };
-
-  // Generate days in current month grid
-  const daysInMonth = currentMonth.daysInMonth();
-  const startDayOfWeek = currentMonth.startOf("month").day(); // 0 (Sun) - 6 (Sat)
-
-  const daysArray: { dayNum: number; dateString: string; isCurrentMonth: boolean }[] = [];
-
-  // Padding days from previous month
-  const prevMonth = currentMonth.subtract(1, "month");
-  const prevMonthDays = prevMonth.daysInMonth();
-  for (let i = startDayOfWeek - 1; i >= 0; i--) {
-    const dayNum = prevMonthDays - i;
-    daysArray.push({
-      dayNum,
-      dateString: prevMonth.date(dayNum).format("YYYY-MM-DD"),
-      isCurrentMonth: false,
-    });
-  }
-
-  // Days of current month
-  for (let i = 1; i <= daysInMonth; i++) {
-    daysArray.push({
-      dayNum: i,
-      dateString: currentMonth.date(i).format("YYYY-MM-DD"),
-      isCurrentMonth: true,
-    });
-  }
-
-  // Padding days for next month to complete the row
-  const remainingDays = 42 - daysArray.length; // 6 rows * 7 days = 42 total slots
-  const nextMonth = currentMonth.add(1, "month");
-  for (let i = 1; i <= remainingDays; i++) {
-    daysArray.push({
-      dayNum: i,
-      dateString: nextMonth.date(i).format("YYYY-MM-DD"),
-      isCurrentMonth: false,
-    });
-  }
-
-  const handleDateSelect = (dateStr: string) => {
-    if (minimumDate && dayjs(dateStr).isBefore(dayjs(minimumDate), "day")) {
-      return; // Date is disabled
-    }
-    onChange(dateStr);
-    setIsOpen(false);
-  };
-
-  const formattedDisplay = value ? dayjs(value).format("MMM DD, YYYY") : "";
-
-  return (
-    <View className="flex-1">
-      <Txt className="text-xs text-base-content/60 uppercase mb-2 font-medium">
-        {label}
-      </Txt>
-      <TouchableOpacity
-        onPress={() => setIsOpen(true)}
-        activeOpacity={0.8}
-        className="bg-base-100 rounded-2xl px-4 py-3 border border-base-300 flex-row justify-between items-center h-12"
-      >
-        <Txt className={formattedDisplay ? "text-base-content font-medium" : "text-base-content/40 font-medium"}>
-          {formattedDisplay || placeholder}
-        </Txt>
-        <Ionicons name="calendar-outline" size={18} color={colors.primary} />
-      </TouchableOpacity>
-
-      <BottomModal isOpen={isOpen} onClose={() => setIsOpen(false)} heightPercent={0.65}>
-        <View className="p-4 flex-1">
-          <Txt variant="lg" className="font-bold text-center mb-4">
-            {label}
-          </Txt>
-
-          {/* Month & Year Navigation Header */}
-          <View className="flex-row justify-between items-center px-2 mb-4">
-            <TouchableOpacity onPress={handlePrevMonth} className="p-2 bg-base-200 rounded-full">
-              <Ionicons name="chevron-back" size={20} color={colors.primary} />
-            </TouchableOpacity>
-            <Txt className="font-bold text-base-content text-base">
-              {currentMonth.format("MMMM YYYY")}
-            </Txt>
-            <TouchableOpacity onPress={handleNextMonth} className="p-2 bg-base-200 rounded-full">
-              <Ionicons name="chevron-forward" size={20} color={colors.primary} />
-            </TouchableOpacity>
-          </View>
-
-          {/* Day Names Header */}
-          <View className="flex-row justify-between mb-2">
-            {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => (
-              <View key={day} className="flex-1 items-center">
-                <Txt variant="xs" className="text-base-content/40 font-bold">
-                  {day}
-                </Txt>
-              </View>
-            ))}
-          </View>
-
-          {/* Days Grid */}
-          <ScrollView showsVerticalScrollIndicator={false}>
-            <View className="flex-row flex-wrap">
-              {daysArray.map((item, idx) => {
-                const isSelected = value === item.dateString;
-                const isToday = dayjs().format("YYYY-MM-DD") === item.dateString;
-                const isDisabled = !!(minimumDate && dayjs(item.dateString).isBefore(dayjs(minimumDate), "day"));
-
-                return (
-                  <TouchableOpacity
-                    key={idx}
-                    onPress={() => handleDateSelect(item.dateString)}
-                    disabled={isDisabled}
-                    style={{ width: "14.28%", aspectRatio: 1 }}
-                    className={`items-center justify-center rounded-2xl my-1 relative ${
-                      isSelected
-                        ? "bg-primary"
-                        : isToday
-                        ? "bg-primary/10 border border-primary/30"
-                        : ""
-                    } ${isDisabled ? "opacity-25" : ""}`}
-                  >
-                    <Txt
-                      className={`font-semibold ${
-                        isSelected
-                          ? "text-white"
-                          : item.isCurrentMonth
-                          ? "text-base-content"
-                          : "text-base-content/30"
-                      }`}
-                    >
-                      {item.dayNum}
-                    </Txt>
-                    {isToday && !isSelected && (
-                      <View className="absolute bottom-1 w-1 h-1 bg-primary rounded-full" />
-                    )}
-                  </TouchableOpacity>
-                );
-              })}
-            </View>
-          </ScrollView>
-
-          <View className="pt-4 border-t border-base-200">
-            <Button label="Close" variant="outline" onPress={() => setIsOpen(false)} className="w-full" />
-          </View>
-        </View>
-      </BottomModal>
-    </View>
-  );
-}

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

@@ -1,129 +0,0 @@
-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 Button from "@/components/ui/buttons/Button";
-
-export type ImagePickerSource = "camera" | "gallery" | "both";
-
-export interface ImagePickerResult {
-  uri: string;
-  name: string;
-  type: string;
-}
-
-export interface ImagePickerModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onImageSelected?: (image: ImagePickerResult) => void;
-  onImagesSelected?: (images: ImagePickerResult[]) => void;
-  source?: ImagePickerSource;
-  title?: string;
-  subtitle?: string;
-  allowsEditing?: boolean;
-  allowsMultipleSelection?: boolean;
-}
-
-export default function ImagePickerModal({
-  isOpen,
-  onClose,
-  onImageSelected,
-  onImagesSelected,
-  source = "both",
-  title = "Select Image Source",
-  subtitle = "Choose where to pick your image from",
-  allowsEditing = false,
-  allowsMultipleSelection = false,
-}: ImagePickerModalProps) {
-
-  const launchPicker = async (type: "gallery" | "camera") => {
-    onClose();
-
-    // Delay picker execution to allow the modal dismiss animation to finish smoothly
-    setTimeout(async () => {
-      try {
-        let result: ImagePicker.ImagePickerResult;
-
-        if (type === "gallery") {
-          const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
-          if (!perm.granted) return;
-
-          result = await ImagePicker.launchImageLibraryAsync({
-            mediaTypes: ["images"],
-            quality: 0.8,
-            allowsEditing: !allowsMultipleSelection && allowsEditing, // multi-select cannot have editing on some OS
-            allowsMultipleSelection,
-            aspect: allowsEditing ? [16, 9] : undefined, // Assuming a common aspect ratio if cropped
-          });
-        } else {
-          const perm = await ImagePicker.requestCameraPermissionsAsync();
-          if (!perm.granted) return;
-
-          result = await ImagePicker.launchCameraAsync({
-            mediaTypes: ["images"],
-            quality: 0.8,
-            allowsEditing,
-            aspect: allowsEditing ? [16, 9] : 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 (allowsMultipleSelection && onImagesSelected) {
-            onImagesSelected(mappedAssets);
-          } else if (onImageSelected && mappedAssets.length > 0) {
-            onImageSelected(mappedAssets[0]);
-          }
-        }
-      } catch (err) {
-        console.error("ImagePicker error:", err);
-      }
-    }, 350);
-  };
-
-  return (
-    <BottomModal isOpen={isOpen} onClose={onClose}>
-      <View className="p-6">
-        <Txt variant="lg" className="font-bold mb-1 text-center">
-          {title}
-        </Txt>
-        {subtitle ? (
-          <Txt className="text-base-content/60 text-center mb-6 text-sm">
-            {subtitle}
-          </Txt>
-        ) : null}
-
-        <View className="gap-3">
-          {(source === "both" || source === "gallery") && (
-            <Button
-              label="Choose from Gallery"
-              leftIcon="images-outline"
-              variant="primary"
-              onPress={() => launchPicker("gallery")}
-            />
-          )}
-
-          {(source === "both" || source === "camera") && (
-            <Button
-              label="Take Photo with Camera"
-              leftIcon="camera-outline"
-              variant={source === "camera" ? "primary" : "outline"}
-              onPress={() => launchPicker("camera")}
-            />
-          )}
-        </View>
-      </View>
-    </BottomModal>
-  );
-}

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

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