@croacroa/react-native-template 2.0.1 → 3.2.0

package/components/ui/Toast.tsx

@@ -0,0 +1,427 @@
+/**
+ * @fileoverview Custom Toast component with animations
+ * Provides a flexible toast notification system as an alternative to Burnt.
+ * @module components/ui/Toast
+ */
+
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+  ReactNode,
+} from "react";
+import {
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  Dimensions,
+  AccessibilityInfo,
+} from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  SlideInUp,
+  SlideOutUp,
+} from "react-native-reanimated";
+import { Ionicons } from "@expo/vector-icons";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type ToastType = "success" | "error" | "warning" | "info";
+
+export interface ToastConfig {
+  /** Unique identifier */
+  id: string;
+  /** Toast type determines icon and colors */
+  type: ToastType;
+  /** Main message */
+  title: string;
+  /** Optional description */
+  message?: string;
+  /** Duration in ms (0 = persistent) */
+  duration?: number;
+  /** Action button */
+  action?: {
+    label: string;
+    onPress: () => void;
+  };
+  /** Called when toast is dismissed */
+  onDismiss?: () => void;
+}
+
+interface ToastContextValue {
+  show: (config: Omit<ToastConfig, "id">) => string;
+  success: (title: string, message?: string) => string;
+  error: (title: string, message?: string) => string;
+  warning: (title: string, message?: string) => string;
+  info: (title: string, message?: string) => string;
+  dismiss: (id: string) => void;
+  dismissAll: () => void;
+}
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+/**
+ * Hook to access toast functions
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const toast = useToast();
+ *
+ *   const handleSave = async () => {
+ *     try {
+ *       await saveData();
+ *       toast.success("Saved!", "Your changes have been saved.");
+ *     } catch (e) {
+ *       toast.error("Error", "Failed to save changes.");
+ *     }
+ *   };
+ * }
+ * ```
+ */
+export function useToast(): ToastContextValue {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+}
+
+// ============================================================================
+// Toast Item Component
+// ============================================================================
+
+const TOAST_CONFIG = {
+  success: {
+    icon: "checkmark-circle" as const,
+    bgColor: "bg-green-500",
+    iconColor: "#22c55e",
+  },
+  error: {
+    icon: "close-circle" as const,
+    bgColor: "bg-red-500",
+    iconColor: "#ef4444",
+  },
+  warning: {
+    icon: "warning" as const,
+    bgColor: "bg-amber-500",
+    iconColor: "#f59e0b",
+  },
+  info: {
+    icon: "information-circle" as const,
+    bgColor: "bg-blue-500",
+    iconColor: "#3b82f6",
+  },
+};
+
+interface ToastItemProps {
+  config: ToastConfig;
+  onDismiss: (id: string) => void;
+}
+
+function ToastItem({ config, onDismiss }: ToastItemProps) {
+  const { type, title, message, duration = 4000, action, id } = config;
+  const { icon, iconColor } = TOAST_CONFIG[type];
+  const progress = useSharedValue(1);
+  const timerRef = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    // Announce to screen readers
+    AccessibilityInfo.announceForAccessibility(
+      `${type}: ${title}. ${message || ""}`
+    );
+
+    if (duration > 0) {
+      // Start progress animation
+      progress.value = withTiming(0, { duration });
+
+      // Auto-dismiss timer
+      timerRef.current = setTimeout(() => {
+        onDismiss(id);
+      }, duration);
+    }
+
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, [duration, id, onDismiss, progress, type, title, message]);
+
+  const progressStyle = useAnimatedStyle(() => ({
+    width: `${progress.value * 100}%`,
+  }));
+
+  const handleDismiss = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    config.onDismiss?.();
+    onDismiss(id);
+  };
+
+  return (
+    <Animated.View
+      entering={SlideInUp.springify().damping(15)}
+      exiting={SlideOutUp.springify().damping(15)}
+      style={styles.toastContainer}
+      accessibilityRole="alert"
+      accessibilityLiveRegion="polite"
+    >
+      <Pressable
+        onPress={handleDismiss}
+        style={styles.toastContent}
+        className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden"
+      >
+        {/* Icon */}
+        <View
+          className="w-10 h-10 rounded-full items-center justify-center mr-3"
+          style={{ backgroundColor: `${iconColor}20` }}
+        >
+          <Ionicons name={icon} size={24} color={iconColor} />
+        </View>
+
+        {/* Text */}
+        <View style={styles.textContainer}>
+          <Text
+            className="text-base font-semibold text-gray-900 dark:text-white"
+            numberOfLines={1}
+          >
+            {title}
+          </Text>
+          {message && (
+            <Text
+              className="text-sm text-gray-600 dark:text-gray-300 mt-0.5"
+              numberOfLines={2}
+            >
+              {message}
+            </Text>
+          )}
+        </View>
+
+        {/* Action Button */}
+        {action && (
+          <Pressable
+            onPress={() => {
+              action.onPress();
+              handleDismiss();
+            }}
+            className="ml-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-700 rounded-lg"
+          >
+            <Text className="text-sm font-medium text-primary-600 dark:text-primary-400">
+              {action.label}
+            </Text>
+          </Pressable>
+        )}
+
+        {/* Close button */}
+        <Pressable
+          onPress={handleDismiss}
+          className="ml-2 p-1"
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          accessibilityLabel="Dismiss notification"
+          accessibilityRole="button"
+        >
+          <Ionicons name="close" size={20} color="#9ca3af" />
+        </Pressable>
+      </Pressable>
+
+      {/* Progress bar */}
+      {duration > 0 && (
+        <View className="absolute bottom-0 left-4 right-4 h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+          <Animated.View
+            style={[
+              styles.progressBar,
+              progressStyle,
+              { backgroundColor: iconColor },
+            ]}
+          />
+        </View>
+      )}
+    </Animated.View>
+  );
+}
+
+// ============================================================================
+// Toast Provider
+// ============================================================================
+
+interface ToastProviderProps {
+  children: ReactNode;
+  /** Maximum number of toasts to show at once */
+  maxToasts?: number;
+}
+
+/**
+ * Toast provider component. Wrap your app with this to enable toasts.
+ *
+ * @example
+ * ```tsx
+ * export default function App() {
+ *   return (
+ *     <ToastProvider maxToasts={3}>
+ *       <NavigationContainer>
+ *         <RootNavigator />
+ *       </NavigationContainer>
+ *     </ToastProvider>
+ *   );
+ * }
+ * ```
+ */
+export function ToastProvider({ children, maxToasts = 3 }: ToastProviderProps) {
+  const [toasts, setToasts] = useState<ToastConfig[]>([]);
+  const insets = useSafeAreaInsets();
+  const idCounter = useRef(0);
+
+  const dismiss = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const dismissAll = useCallback(() => {
+    setToasts([]);
+  }, []);
+
+  const show = useCallback(
+    (config: Omit<ToastConfig, "id">): string => {
+      const id = `toast-${++idCounter.current}`;
+      const newToast: ToastConfig = { ...config, id };
+
+      setToasts((prev) => {
+        const updated = [newToast, ...prev];
+        // Limit number of toasts
+        return updated.slice(0, maxToasts);
+      });
+
+      return id;
+    },
+    [maxToasts]
+  );
+
+  const success = useCallback(
+    (title: string, message?: string) =>
+      show({ type: "success", title, message }),
+    [show]
+  );
+
+  const error = useCallback(
+    (title: string, message?: string) =>
+      show({ type: "error", title, message }),
+    [show]
+  );
+
+  const warning = useCallback(
+    (title: string, message?: string) =>
+      show({ type: "warning", title, message }),
+    [show]
+  );
+
+  const info = useCallback(
+    (title: string, message?: string) => show({ type: "info", title, message }),
+    [show]
+  );
+
+  return (
+    <ToastContext.Provider
+      value={{ show, success, error, warning, info, dismiss, dismissAll }}
+    >
+      {children}
+      <View
+        style={[styles.container, { top: insets.top + 8 }]}
+        pointerEvents="box-none"
+      >
+        {toasts.map((toast) => (
+          <ToastItem key={toast.id} config={toast} onDismiss={dismiss} />
+        ))}
+      </View>
+    </ToastContext.Provider>
+  );
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const { width } = Dimensions.get("window");
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    left: 16,
+    right: 16,
+    zIndex: 9999,
+    alignItems: "center",
+  },
+  toastContainer: {
+    width: width - 32,
+    marginBottom: 8,
+  },
+  toastContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 12,
+    paddingBottom: 16,
+  },
+  textContainer: {
+    flex: 1,
+  },
+  progressBar: {
+    height: "100%",
+    borderRadius: 2,
+  },
+});
+
+// ============================================================================
+// Imperative API (for use outside React components)
+// ============================================================================
+
+let toastRef: ToastContextValue | null = null;
+
+export function setToastRef(ref: ToastContextValue | null) {
+  toastRef = ref;
+}
+
+/**
+ * Imperative toast API for use outside React components.
+ * Must call setToastRef first from within ToastProvider.
+ *
+ * @example
+ * ```tsx
+ * // In your root component:
+ * function App() {
+ *   const toastContext = useToast();
+ *   useEffect(() => {
+ *     setToastRef(toastContext);
+ *     return () => setToastRef(null);
+ *   }, [toastContext]);
+ *   // ...
+ * }
+ *
+ * // Then anywhere:
+ * import { toastManager } from '@/components/ui/Toast';
+ * toastManager.success('Done!');
+ * ```
+ */
+export const toastManager = {
+  show: (config: Omit<ToastConfig, "id">) => toastRef?.show(config),
+  success: (title: string, message?: string) =>
+    toastRef?.success(title, message),
+  error: (title: string, message?: string) => toastRef?.error(title, message),
+  warning: (title: string, message?: string) =>
+    toastRef?.warning(title, message),
+  info: (title: string, message?: string) => toastRef?.info(title, message),
+  dismiss: (id: string) => toastRef?.dismiss(id),
+  dismissAll: () => toastRef?.dismissAll(),
+};

package/components/ui/UploadProgress.tsx

@@ -0,0 +1,189 @@
+/**
+ * @fileoverview Upload progress bar component
+ * Displays upload progress with percentage, cancel, retry, and error states.
+ * @module components/ui/UploadProgress
+ */
+
+import { View, Text, Pressable } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "@/hooks/useTheme";
+import type { UploadProgress as UploadProgressType } from "@/services/media/media-upload";
+import { cn } from "@/utils/cn";
+
+/**
+ * Props for the UploadProgress component
+ */
+interface UploadProgressProps {
+  /** Current upload progress */
+  progress: UploadProgressType | null;
+  /** Whether an upload is currently in progress */
+  isUploading: boolean;
+  /** Error message if the upload failed */
+  error?: string | null;
+  /** Callback to cancel the upload */
+  onCancel?: () => void;
+  /** Callback to retry a failed upload */
+  onRetry?: () => void;
+  /** Additional class name for the container */
+  className?: string;
+}
+
+/**
+ * Upload progress indicator with error and cancel/retry support.
+ * Returns null when there is nothing to show (not uploading, no error).
+ *
+ * @example
+ * ```tsx
+ * function FileUploader() {
+ *   const { upload, progress, isUploading, error, cancel, reset } = useUpload({
+ *     url: 'https://api.example.com/upload',
+ *   });
+ *
+ *   return (
+ *     <View>
+ *       <Button onPress={() => upload(fileUri)}>Upload</Button>
+ *       <UploadProgress
+ *         progress={progress}
+ *         isUploading={isUploading}
+ *         error={error}
+ *         onCancel={cancel}
+ *         onRetry={() => upload(fileUri)}
+ *       />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export function UploadProgress({
+  progress,
+  isUploading,
+  error,
+  onCancel,
+  onRetry,
+  className,
+}: UploadProgressProps) {
+  const { isDark } = useTheme();
+  const { t } = useTranslation();
+
+  // Nothing to show
+  if (!isUploading && !error) {
+    return null;
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <View
+        className={cn(
+          "flex-row items-center rounded-lg px-4 py-3",
+          isDark ? "bg-red-900/30" : "bg-red-50",
+          className
+        )}
+      >
+        <Ionicons
+          name="alert-circle"
+          size={20}
+          color={isDark ? "#fca5a5" : "#ef4444"}
+        />
+        <Text
+          className={cn(
+            "ml-2 flex-1 text-sm font-medium",
+            isDark ? "text-red-300" : "text-red-600"
+          )}
+          numberOfLines={2}
+        >
+          {t("upload.failed")}
+        </Text>
+        {onRetry && (
+          <Pressable
+            onPress={onRetry}
+            className={cn(
+              "ml-2 rounded-md px-3 py-1.5",
+              isDark
+                ? "bg-red-800/50 active:bg-red-800"
+                : "bg-red-100 active:bg-red-200"
+            )}
+          >
+            <Text
+              className={cn(
+                "text-sm font-semibold",
+                isDark ? "text-red-300" : "text-red-600"
+              )}
+            >
+              {t("upload.retry")}
+            </Text>
+          </Pressable>
+        )}
+      </View>
+    );
+  }
+
+  // Uploading state
+  const percentage = progress?.percentage ?? 0;
+
+  return (
+    <View
+      className={cn(
+        "rounded-lg px-4 py-3",
+        isDark ? "bg-gray-800" : "bg-gray-50",
+        className
+      )}
+    >
+      {/* Header row */}
+      <View className="mb-2 flex-row items-center justify-between">
+        <View className="flex-row items-center">
+          <Text
+            className={cn(
+              "text-sm font-medium",
+              isDark ? "text-gray-200" : "text-gray-700"
+            )}
+          >
+            {t("upload.uploading")}
+          </Text>
+          <Text
+            className={cn(
+              "ml-2 text-sm",
+              isDark ? "text-gray-400" : "text-gray-500"
+            )}
+          >
+            {percentage}%
+          </Text>
+        </View>
+        {onCancel && (
+          <Pressable
+            onPress={onCancel}
+            className={cn(
+              "rounded-md px-3 py-1",
+              isDark
+                ? "bg-gray-700 active:bg-gray-600"
+                : "bg-gray-200 active:bg-gray-300"
+            )}
+          >
+            <Text
+              className={cn(
+                "text-xs font-semibold",
+                isDark ? "text-gray-300" : "text-gray-600"
+              )}
+            >
+              Cancel
+            </Text>
+          </Pressable>
+        )}
+      </View>
+
+      {/* Progress bar */}
+      <View
+        className={cn(
+          "h-2 overflow-hidden rounded-full",
+          isDark ? "bg-gray-700" : "bg-gray-200"
+        )}
+      >
+        <View
+          className="h-full rounded-full bg-primary-500"
+          style={{ width: `${percentage}%` }}
+        />
+      </View>
+    </View>
+  );
+}