@croacroa/react-native-template 1.0.0

package/components/ui/OptimizedImage.tsx

@@ -0,0 +1,369 @@
+import { useState, useCallback } from "react";
+import { View, StyleSheet } from "react-native";
+import { Image, ImageProps, ImageContentFit } from "expo-image";
+import Animated, {
+  useAnimatedStyle,
+  withTiming,
+  interpolate,
+  useSharedValue,
+} from "react-native-reanimated";
+import { useTheme } from "@/hooks/useTheme";
+import { cn } from "@/utils/cn";
+
+const AnimatedImage = Animated.createAnimatedComponent(Image);
+
+type ImagePriority = "low" | "normal" | "high";
+
+interface OptimizedImageProps {
+  /**
+   * Image source URL
+   */
+  source: string | number;
+
+  /**
+   * Alt text for accessibility
+   */
+  alt?: string;
+
+  /**
+   * Image width
+   */
+  width?: number | string;
+
+  /**
+   * Image height
+   */
+  height?: number | string;
+
+  /**
+   * Aspect ratio (e.g., 16/9, 1, 4/3)
+   */
+  aspectRatio?: number;
+
+  /**
+   * How to fit the image in the container
+   */
+  contentFit?: ImageContentFit;
+
+  /**
+   * Blur hash or thumbhash for placeholder
+   */
+  placeholder?: string | number;
+
+  /**
+   * Loading priority
+   */
+  priority?: ImagePriority;
+
+  /**
+   * Whether to enable caching
+   */
+  cachePolicy?: "none" | "disk" | "memory" | "memory-disk";
+
+  /**
+   * Transition duration in ms
+   */
+  transitionDuration?: number;
+
+  /**
+   * Additional class name for container
+   */
+  className?: string;
+
+  /**
+   * Whether to show loading skeleton
+   */
+  showSkeleton?: boolean;
+
+  /**
+   * Border radius
+   */
+  borderRadius?: number;
+
+  /**
+   * Called when image loads successfully
+   */
+  onLoad?: () => void;
+
+  /**
+   * Called when image fails to load
+   */
+  onError?: (error: Error) => void;
+
+  /**
+   * Style override
+   */
+  style?: ImageProps["style"];
+}
+
+export function OptimizedImage({
+  source,
+  alt,
+  width,
+  height,
+  aspectRatio,
+  contentFit = "cover",
+  placeholder,
+  priority = "normal",
+  cachePolicy = "memory-disk",
+  transitionDuration = 300,
+  className,
+  showSkeleton = true,
+  borderRadius = 0,
+  onLoad,
+  onError,
+  style,
+}: OptimizedImageProps) {
+  const { isDark } = useTheme();
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+  const opacity = useSharedValue(0);
+
+  const handleLoad = useCallback(() => {
+    setIsLoading(false);
+    opacity.value = withTiming(1, { duration: transitionDuration });
+    onLoad?.();
+  }, [opacity, transitionDuration, onLoad]);
+
+  const handleError = useCallback(
+    (error: { error: string }) => {
+      setIsLoading(false);
+      setHasError(true);
+      onError?.(new Error(error.error));
+    },
+    [onError]
+  );
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(opacity.value, [0, 1], [0, 1]),
+    };
+  });
+
+  // Determine the source
+  const imageSource = typeof source === "string" ? { uri: source } : source;
+
+  // Map priority to expo-image priority
+  const imagePriority =
+    priority === "high" ? "high" : priority === "low" ? "low" : "normal";
+
+  return (
+    <View
+      className={cn("overflow-hidden", className)}
+      style={[
+        {
+          width,
+          height,
+          aspectRatio,
+          borderRadius,
+          backgroundColor: isDark ? "#1e293b" : "#f1f5f9",
+        },
+      ]}
+    >
+      {/* Skeleton loader */}
+      {showSkeleton && isLoading && !hasError && (
+        <SkeletonLoader borderRadius={borderRadius} />
+      )}
+
+      {/* Error state */}
+      {hasError && (
+        <View
+          style={[styles.errorContainer, { borderRadius }]}
+          className={isDark ? "bg-gray-800" : "bg-gray-100"}
+        >
+          <View className="items-center justify-center">
+            <View
+              className={cn(
+                "w-12 h-12 rounded-full items-center justify-center mb-2",
+                isDark ? "bg-gray-700" : "bg-gray-200"
+              )}
+            >
+              <ErrorIcon isDark={isDark} />
+            </View>
+          </View>
+        </View>
+      )}
+
+      {/* Actual image */}
+      {!hasError && (
+        <AnimatedImage
+          source={imageSource}
+          contentFit={contentFit}
+          placeholder={placeholder}
+          placeholderContentFit="cover"
+          transition={transitionDuration}
+          priority={imagePriority}
+          cachePolicy={cachePolicy}
+          onLoad={handleLoad}
+          onError={handleError}
+          accessibilityLabel={alt}
+          style={[styles.image, { borderRadius }, animatedStyle, style]}
+        />
+      )}
+    </View>
+  );
+}
+
+/**
+ * Skeleton loader with shimmer effect
+ */
+function SkeletonLoader({ borderRadius }: { borderRadius: number }) {
+  const { isDark } = useTheme();
+  const shimmer = useSharedValue(0);
+
+  // Start shimmer animation
+  useState(() => {
+    shimmer.value = withTiming(1, { duration: 1500 }, () => {
+      shimmer.value = 0;
+    });
+  });
+
+  const shimmerStyle = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(shimmer.value, [0, 0.5, 1], [0.3, 0.6, 0.3]),
+    };
+  });
+
+  return (
+    <Animated.View
+      style={[
+        styles.skeleton,
+        { borderRadius },
+        shimmerStyle,
+        { backgroundColor: isDark ? "#334155" : "#e2e8f0" },
+      ]}
+    />
+  );
+}
+
+/**
+ * Error icon component
+ */
+function ErrorIcon({ isDark }: { isDark: boolean }) {
+  return (
+    <View
+      style={{
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        backgroundColor: isDark ? "#475569" : "#cbd5e1",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <View
+        style={{
+          width: 12,
+          height: 2,
+          backgroundColor: isDark ? "#94a3b8" : "#64748b",
+          transform: [{ rotate: "45deg" }],
+        }}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  image: {
+    width: "100%",
+    height: "100%",
+    position: "absolute",
+    top: 0,
+    left: 0,
+  },
+  skeleton: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  errorContainer: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+
+/**
+ * Background Image component
+ */
+interface BackgroundImageProps extends OptimizedImageProps {
+  children?: React.ReactNode;
+  overlayColor?: string;
+  overlayOpacity?: number;
+}
+
+export function BackgroundImage({
+  children,
+  overlayColor = "#000000",
+  overlayOpacity = 0.4,
+  ...props
+}: BackgroundImageProps) {
+  return (
+    <View style={styles.backgroundContainer}>
+      <OptimizedImage {...props} style={StyleSheet.absoluteFill} />
+      {overlayOpacity > 0 && (
+        <View
+          style={[
+            StyleSheet.absoluteFill,
+            {
+              backgroundColor: overlayColor,
+              opacity: overlayOpacity,
+            },
+          ]}
+        />
+      )}
+      <View style={styles.backgroundContent}>{children}</View>
+    </View>
+  );
+}
+
+/**
+ * Image with progressive loading (blur to sharp)
+ */
+interface ProgressiveImageProps extends OptimizedImageProps {
+  /**
+   * Low-quality placeholder image
+   */
+  thumbnail?: string;
+}
+
+export function ProgressiveImage({
+  thumbnail,
+  source,
+  ...props
+}: ProgressiveImageProps) {
+  const [isFullLoaded, setIsFullLoaded] = useState(false);
+
+  return (
+    <View style={{ position: "relative", overflow: "hidden" }}>
+      {/* Thumbnail (blurred) */}
+      {thumbnail && !isFullLoaded && (
+        <Image
+          source={{ uri: thumbnail }}
+          style={[StyleSheet.absoluteFill, { opacity: 0.5 }]}
+          contentFit="cover"
+          blurRadius={10}
+        />
+      )}
+
+      {/* Full resolution image */}
+      <OptimizedImage
+        {...props}
+        source={source}
+        onLoad={() => {
+          setIsFullLoaded(true);
+          props.onLoad?.();
+        }}
+        showSkeleton={!thumbnail}
+      />
+    </View>
+  );
+}
+
+Object.assign(styles, {
+  backgroundContainer: {
+    flex: 1,
+  },
+  backgroundContent: {
+    flex: 1,
+    zIndex: 1,
+  },
+});

package/components/ui/Select.tsx

@@ -0,0 +1,240 @@
+import { useState, useCallback } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Modal,
+  FlatList,
+  StyleSheet,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useTheme } from "@/hooks/useTheme";
+import { cn } from "@/utils/cn";
+
+export interface SelectOption<T = string> {
+  label: string;
+  value: T;
+  disabled?: boolean;
+  icon?: keyof typeof Ionicons.glyphMap;
+}
+
+interface SelectProps<T = string> {
+  /**
+   * Available options
+   */
+  options: SelectOption<T>[];
+
+  /**
+   * Currently selected value
+   */
+  value?: T;
+
+  /**
+   * Callback when value changes
+   */
+  onChange?: (value: T) => void;
+
+  /**
+   * Placeholder text when no value selected
+   */
+  placeholder?: string;
+
+  /**
+   * Label displayed above the select
+   */
+  label?: string;
+
+  /**
+   * Error message
+   */
+  error?: string;
+
+  /**
+   * Whether the select is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Additional class name for container
+   */
+  className?: string;
+
+  /**
+   * Modal title
+   */
+  modalTitle?: string;
+}
+
+export function Select<T = string>({
+  options,
+  value,
+  onChange,
+  placeholder = "Select an option",
+  label,
+  error,
+  disabled = false,
+  className,
+  modalTitle,
+}: SelectProps<T>) {
+  const { isDark } = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  const handleSelect = useCallback(
+    (option: SelectOption<T>) => {
+      if (option.disabled) return;
+      onChange?.(option.value);
+      setIsOpen(false);
+    },
+    [onChange]
+  );
+
+  const renderOption = ({ item }: { item: SelectOption<T> }) => {
+    const isSelected = item.value === value;
+
+    return (
+      <TouchableOpacity
+        onPress={() => handleSelect(item)}
+        disabled={item.disabled}
+        className={cn(
+          "flex-row items-center px-4 py-3 border-b",
+          isDark ? "border-surface-dark" : "border-gray-100",
+          isSelected && (isDark ? "bg-surface-dark" : "bg-primary-50"),
+          item.disabled && "opacity-50"
+        )}
+        activeOpacity={0.7}
+      >
+        {item.icon && (
+          <Ionicons
+            name={item.icon}
+            size={20}
+            color={isSelected ? "#10b981" : isDark ? "#94a3b8" : "#64748b"}
+            style={styles.optionIcon}
+          />
+        )}
+        <Text
+          className={cn(
+            "flex-1 text-base",
+            isSelected
+              ? "text-primary-600 font-medium"
+              : isDark
+                ? "text-text-dark"
+                : "text-text-light"
+          )}
+        >
+          {item.label}
+        </Text>
+        {isSelected && <Ionicons name="checkmark" size={20} color="#10b981" />}
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View className={cn("mb-4", className)}>
+      {label && (
+        <Text
+          className={cn(
+            "text-sm font-medium mb-1.5",
+            isDark ? "text-text-dark" : "text-text-light"
+          )}
+        >
+          {label}
+        </Text>
+      )}
+
+      <TouchableOpacity
+        onPress={() => !disabled && setIsOpen(true)}
+        disabled={disabled}
+        className={cn(
+          "flex-row items-center justify-between px-4 py-3 rounded-xl border",
+          isDark
+            ? "bg-surface-dark border-gray-700"
+            : "bg-white border-gray-200",
+          error && "border-red-500",
+          disabled && "opacity-50"
+        )}
+        activeOpacity={0.7}
+      >
+        <Text
+          className={cn(
+            "text-base",
+            selectedOption
+              ? isDark
+                ? "text-text-dark"
+                : "text-text-light"
+              : isDark
+                ? "text-muted-dark"
+                : "text-muted-light"
+          )}
+        >
+          {selectedOption?.label || placeholder}
+        </Text>
+        <Ionicons
+          name="chevron-down"
+          size={20}
+          color={isDark ? "#94a3b8" : "#64748b"}
+        />
+      </TouchableOpacity>
+
+      {error && <Text className="text-red-500 text-sm mt-1">{error}</Text>}
+
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType="slide"
+        onRequestClose={() => setIsOpen(false)}
+      >
+        <View className="flex-1 justify-end bg-black/50">
+          <View
+            className={cn(
+              "rounded-t-3xl max-h-[70%]",
+              isDark ? "bg-background-dark" : "bg-white"
+            )}
+          >
+            {/* Header */}
+            <View
+              className={cn(
+                "flex-row items-center justify-between px-4 py-4 border-b",
+                isDark ? "border-surface-dark" : "border-gray-100"
+              )}
+            >
+              <Text
+                className={cn(
+                  "text-lg font-semibold",
+                  isDark ? "text-text-dark" : "text-text-light"
+                )}
+              >
+                {modalTitle || label || "Select"}
+              </Text>
+              <TouchableOpacity
+                onPress={() => setIsOpen(false)}
+                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+              >
+                <Ionicons
+                  name="close"
+                  size={24}
+                  color={isDark ? "#f8fafc" : "#0f172a"}
+                />
+              </TouchableOpacity>
+            </View>
+
+            {/* Options */}
+            <FlatList
+              data={options}
+              renderItem={renderOption}
+              keyExtractor={(item, index) => `${item.value}-${index}`}
+              showsVerticalScrollIndicator={false}
+            />
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  optionIcon: {
+    marginRight: 12,
+  },
+});