@imksh/create 1.0.24 → 1.0.26

package/templates/production-fullstack/mobile/src/components/ui/feedback/GestureWrapper.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { Gesture, GestureDetector, GestureType } from "react-native-gesture-handler";
+import Animated, { runOnJS } from "react-native-reanimated";
+
+interface GestureWrapperProps {
+  children: React.ReactNode;
+  containerStyle?: StyleProp<ViewStyle>;
+  
+  // Tap Gestures
+  onTap?: () => void;
+  onDoubleTap?: () => void;
+  
+  // Pan/Drag Gestures
+  onPanStart?: (e: any) => void;
+  onPanUpdate?: (e: any) => void;
+  onPanEnd?: (e: any) => void;
+
+  // Swipe Gestures
+  onSwipeLeft?: () => void;
+  onSwipeRight?: () => void;
+  onSwipeUp?: () => void;
+  onSwipeDown?: () => void;
+}
+
+export const GestureWrapper: React.FC<GestureWrapperProps> = ({
+  children,
+  containerStyle,
+  onTap,
+  onDoubleTap,
+  onPanStart,
+  onPanUpdate,
+  onPanEnd,
+  onSwipeLeft,
+  onSwipeRight,
+  onSwipeUp,
+  onSwipeDown,
+}) => {
+  const gestures: GestureType[] = [];
+
+  // 1. Single Tap
+  if (onTap) {
+    const tap = Gesture.Tap().onEnd(() => {
+      runOnJS(onTap)();
+    });
+    gestures.push(tap);
+  }
+
+  // 2. Double Tap
+  if (onDoubleTap) {
+    const doubleTap = Gesture.Tap()
+      .numberOfTaps(2)
+      .onEnd(() => {
+        runOnJS(onDoubleTap)();
+      });
+    gestures.push(doubleTap);
+  }
+
+  // 3. Generic Pan / Drag
+  if (onPanStart || onPanUpdate || onPanEnd) {
+    const pan = Gesture.Pan()
+      .onStart((e) => {
+        if (onPanStart) runOnJS(onPanStart)(e);
+      })
+      .onUpdate((e) => {
+        if (onPanUpdate) runOnJS(onPanUpdate)(e);
+      })
+      .onEnd((e) => {
+        if (onPanEnd) runOnJS(onPanEnd)(e);
+      });
+    gestures.push(pan);
+  }
+
+  // 4. Directional Swipes (Fling)
+  const SWIPE_VELOCITY_THRESHOLD = 500;
+  
+  if (onSwipeLeft || onSwipeRight || onSwipeUp || onSwipeDown) {
+    const swipe = Gesture.Pan()
+      .onEnd((e) => {
+        // Horizontal Swipes
+        if (Math.abs(e.velocityX) > Math.abs(e.velocityY)) {
+          if (e.velocityX > SWIPE_VELOCITY_THRESHOLD && onSwipeRight) {
+            runOnJS(onSwipeRight)();
+          } else if (e.velocityX < -SWIPE_VELOCITY_THRESHOLD && onSwipeLeft) {
+            runOnJS(onSwipeLeft)();
+          }
+        } 
+        // Vertical Swipes
+        else {
+          if (e.velocityY > SWIPE_VELOCITY_THRESHOLD && onSwipeDown) {
+            runOnJS(onSwipeDown)();
+          } else if (e.velocityY < -SWIPE_VELOCITY_THRESHOLD && onSwipeUp) {
+            runOnJS(onSwipeUp)();
+          }
+        }
+      });
+    gestures.push(swipe);
+  }
+
+  // If no gestures are provided, just return the children wrapped in a view
+  if (gestures.length === 0) {
+    return <Animated.View style={containerStyle}>{children}</Animated.View>;
+  }
+
+  // Combine all active gestures (Exclusive makes sure they don't fight each other if configured properly, 
+  // but for generic wrapping, Simultaneous is safer so Pan and Swipe can co-exist).
+  const composedGesture = Gesture.Simultaneous(...gestures);
+
+  return (
+    <GestureDetector gesture={composedGesture}>
+      <Animated.View style={containerStyle}>{children}</Animated.View>
+    </GestureDetector>
+  );
+};

package/templates/production-fullstack/mobile/src/components/ui/feedback/ProgressBar.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect } from "react";
+import { View, StyleProp, ViewStyle } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+} from "react-native-reanimated";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../../constants/Colors";
+import { Txt } from "../../common/Typography";
+
+export interface ProgressBarProps {
+  progress: number; // 0 to 100
+  color?: string;
+  height?: number;
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export default function ProgressBar({ progress, color, height = 8, label, style }: ProgressBarProps) {
+  const { colorScheme } = useColorScheme();
+  const theme = Colors[colorScheme ?? "light"];
+  const widthVal = useSharedValue(0);
+
+  useEffect(() => {
+    widthVal.value = withTiming(progress, { duration: 500 });
+  }, [progress, widthVal]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: `${widthVal.value}%`,
+  }));
+
+  return (
+    <View style={[{ width: "100%", marginBottom: label ? 16 : 0 }, style]}>
+      {label && (
+        <View style={{ flexDirection: "row", justifyContent: "space-between", marginBottom: 6 }}>
+          <Txt color={theme.baseContent} variant="sm" weight="semibold">{label}</Txt>
+          <Txt color={theme.secondary} variant="sm">{Math.round(progress)}%</Txt>
+        </View>
+      )}
+      <View style={{ width: "100%", height, backgroundColor: theme.base300, borderRadius: height / 2, overflow: "hidden" }}>
+        <Animated.View
+          style={[
+            { height: "100%", backgroundColor: color || theme.primary, borderRadius: height / 2 },
+            animatedStyle,
+          ]}
+        />
+      </View>
+    </View>
+  );
+}

package/templates/production-fullstack/mobile/src/components/ui/feedback/Skeleton.tsx

@@ -0,0 +1,84 @@
+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/production-fullstack/mobile/src/components/ui/feedback/Spinner.tsx

@@ -0,0 +1,50 @@
+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/production-fullstack/mobile/src/components/ui/inputs/Checkbox.tsx

@@ -0,0 +1,54 @@
+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/production-fullstack/mobile/src/components/ui/inputs/DatePicker.tsx

@@ -0,0 +1,186 @@
+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/production-fullstack/mobile/src/components/ui/inputs/ImagePickerModal.tsx

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