@croacroa/react-native-template 2.0.1 → 3.2.0

package/hooks/useAnimatedEntry.ts

@@ -0,0 +1,204 @@
+import { useCallback, useEffect, useRef } from "react";
+import { ViewStyle } from "react-native";
+import {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  withDelay,
+  interpolate,
+} from "react-native-reanimated";
+import type { WithTimingConfig, SharedValue } from "react-native-reanimated";
+
+import {
+  TIMING,
+  ENTRY_CONFIGS,
+  staggerDelay,
+} from "@/utils/animations/presets";
+import type { EntryAnimation } from "@/utils/animations/presets";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface UseAnimatedEntryOptions {
+  /**
+   * Which entry animation to use
+   * @default 'fadeIn'
+   */
+  animation?: EntryAnimation;
+
+  /**
+   * Delay before the animation starts (ms)
+   * @default 0
+   */
+  delay?: number;
+
+  /**
+   * Timing configuration for the animation
+   * @default TIMING.normal
+   */
+  timing?: WithTimingConfig;
+
+  /**
+   * Whether the animation plays automatically on mount
+   * @default true
+   */
+  autoPlay?: boolean;
+}
+
+export interface UseAnimatedEntryReturn {
+  /** Animated style to spread onto an Animated.View */
+  animatedStyle: ViewStyle;
+
+  /** Manually trigger the entry animation */
+  play: () => void;
+
+  /** Reset animation back to start (progress = 0) */
+  reset: () => void;
+
+  /** Shared value tracking animation progress (0 = start, 1 = done) */
+  progress: SharedValue<number>;
+}
+
+// ============================================================================
+// Hook Implementation
+// ============================================================================
+
+/**
+ * Hook for declarative entry animations.
+ *
+ * Returns an animated style that interpolates opacity, translateX, translateY,
+ * and scale from the chosen preset's initial values to their identity values
+ * as `progress` goes from 0 to 1.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { animatedStyle } = useAnimatedEntry({
+ *     animation: 'slideUp',
+ *     delay: 200,
+ *   });
+ *
+ *   return (
+ *     <Animated.View style={animatedStyle}>
+ *       <Text>Hello</Text>
+ *     </Animated.View>
+ *   );
+ * }
+ * ```
+ */
+export function useAnimatedEntry(
+  options: UseAnimatedEntryOptions = {}
+): UseAnimatedEntryReturn {
+  const {
+    animation = "fadeIn",
+    delay = 0,
+    timing = TIMING.normal,
+    autoPlay = true,
+  } = options;
+
+  const progress = useSharedValue(0);
+  const config = ENTRY_CONFIGS[animation];
+
+  // Store timing config in a ref to avoid infinite re-renders when
+  // callers pass an inline object literal for `timing`.
+  const timingRef = useRef(timing);
+  timingRef.current = timing;
+
+  const play = useCallback(() => {
+    progress.value = 0;
+    if (delay > 0) {
+      progress.value = withDelay(delay, withTiming(1, timingRef.current));
+    } else {
+      progress.value = withTiming(1, timingRef.current);
+    }
+  }, [delay, progress]);
+
+  const reset = useCallback(() => {
+    progress.value = 0;
+  }, [progress]);
+
+  // Auto-play on mount
+  useEffect(() => {
+    if (autoPlay) {
+      play();
+    }
+  }, [autoPlay, play]);
+
+  const animatedStyle = useAnimatedStyle((): ViewStyle => {
+    return {
+      opacity: interpolate(progress.value, [0, 1], [config.opacity, 1]),
+      transform: [
+        {
+          translateX: interpolate(
+            progress.value,
+            [0, 1],
+            [config.translateX, 0]
+          ),
+        },
+        {
+          translateY: interpolate(
+            progress.value,
+            [0, 1],
+            [config.translateY, 0]
+          ),
+        },
+        {
+          scale: interpolate(progress.value, [0, 1], [config.scale, 1]),
+        },
+      ],
+    };
+  });
+
+  return { animatedStyle, play, reset, progress };
+}
+
+// ============================================================================
+// Staggered Entry
+// ============================================================================
+
+export interface UseStaggeredEntryOptions extends Omit<
+  UseAnimatedEntryOptions,
+  "delay"
+> {
+  /**
+   * Base delay between each staggered item (ms)
+   * @default 50
+   */
+  staggerDelay?: number;
+}
+
+/**
+ * Convenience wrapper around `useAnimatedEntry` that adds an index-based
+ * stagger delay. Use this for list items that should animate in sequentially.
+ *
+ * @param index - The item's position in the list (0-based)
+ * @param options - Same as useAnimatedEntry options, plus `staggerDelay`
+ *
+ * @example
+ * ```tsx
+ * function ListItem({ index }: { index: number }) {
+ *   const { animatedStyle } = useStaggeredEntry(index, {
+ *     animation: 'slideUp',
+ *     staggerDelay: 80,
+ *   });
+ *
+ *   return (
+ *     <Animated.View style={animatedStyle}>
+ *       <Text>Item {index}</Text>
+ *     </Animated.View>
+ *   );
+ * }
+ * ```
+ */
+export function useStaggeredEntry(
+  index: number,
+  options: UseStaggeredEntryOptions = {}
+): UseAnimatedEntryReturn {
+  const { staggerDelay: baseDelay = 50, ...rest } = options;
+
+  return useAnimatedEntry({
+    ...rest,
+    delay: staggerDelay(index, baseDelay),
+  });
+}

package/hooks/useApi.ts

@@ -8,8 +8,10 @@ import {
   useQuery,
   useMutation,
   useQueryClient,
+  useSuspenseQuery,
   UseQueryOptions,
   UseMutationOptions,
+  UseSuspenseQueryOptions,
 } from "@tanstack/react-query";
 import { api } from "@/services/api";
 import { toast, handleApiError } from "@/utils/toast";
@@ -36,14 +38,15 @@ export const queryKeys = {
   },
   posts: {
     all: ["posts"] as const,
-    list: (filters: Record<string, unknown>) => ["posts", "list", filters] as const,
+    list: (filters: Record<string, unknown>) =>
+      ["posts", "list", filters] as const,
     detail: (id: string) => ["posts", id] as const,
   },
   // Add more query keys as needed
 } as const;
 
 // Generic types for API responses
-interface PaginatedResponse<T> {
+interface _PaginatedResponse<T> {
   data: T[];
   page: number;
   pageSize: number;
@@ -120,6 +123,63 @@ export function useUser(
   });
 }
 
+// ===========================================
+// Suspense-Ready Hooks (React 19 compatible)
+// ===========================================
+
+/**
+ * Suspense-ready version of useCurrentUser.
+ * Use inside a Suspense boundary - throws promise while loading.
+ *
+ * @example
+ * ```tsx
+ * function Profile() {
+ *   const { data: user } = useSuspenseCurrentUser();
+ *   // No loading check needed - Suspense handles it
+ *   return <Text>Hello, {user.name}</Text>;
+ * }
+ *
+ * // Wrap with Suspense
+ * <Suspense fallback={<Skeleton />}>
+ *   <Profile />
+ * </Suspense>
+ * ```
+ */
+export function useSuspenseCurrentUser(
+  options?: Omit<UseSuspenseQueryOptions<User, Error>, "queryKey" | "queryFn">
+) {
+  return useSuspenseQuery({
+    queryKey: queryKeys.users.me(),
+    queryFn: () => api.get<User>("/users/me"),
+    staleTime: 1000 * 60 * 5,
+    ...options,
+  });
+}
+
+/**
+ * Suspense-ready version of useUser.
+ * Use inside a Suspense boundary - throws promise while loading.
+ *
+ * @param userId - The unique identifier of the user to fetch
+ * @example
+ * ```tsx
+ * function UserCard({ userId }: { userId: string }) {
+ *   const { data: user } = useSuspenseUser(userId);
+ *   return <Avatar name={user.name} />;
+ * }
+ * ```
+ */
+export function useSuspenseUser(
+  userId: string,
+  options?: Omit<UseSuspenseQueryOptions<User, Error>, "queryKey" | "queryFn">
+) {
+  return useSuspenseQuery({
+    queryKey: queryKeys.users.detail(userId),
+    queryFn: () => api.get<User>(`/users/${userId}`),
+    ...options,
+  });
+}
+
 /**
  * Update the current user's profile.
  * Automatically updates the cache and shows a success/error toast.
@@ -163,7 +223,7 @@ export function useUpdateUser() {
 // Generic CRUD Hooks Factory
 // ===========================================
 
-interface CrudHooksConfig<T, CreateDTO, UpdateDTO> {
+interface CrudHooksConfig<_T, _CreateDTO, _UpdateDTO> {
   baseKey: readonly string[];
   endpoint: string;
   entityName: string;
@@ -205,7 +265,7 @@ interface CrudHooksConfig<T, CreateDTO, UpdateDTO> {
 export function createCrudHooks<
   T extends { id: string },
   CreateDTO = Omit<T, "id">,
-  UpdateDTO = Partial<T>
+  UpdateDTO = Partial<T>,
 >(config: CrudHooksConfig<T, CreateDTO, UpdateDTO>) {
   const { baseKey, endpoint, entityName } = config;
 

package/hooks/useAuth.tsx

@@ -128,7 +128,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         // Check if tokens are expired
         if (parsedTokens.expiresAt < Date.now()) {
           // Try to refresh
-          const refreshed = await tryRefreshWithToken(parsedTokens.refreshToken);
+          const refreshed = await tryRefreshWithToken(
+            parsedTokens.refreshToken
+          );
           if (!refreshed) {
             await clearAuth();
             return;
@@ -146,7 +148,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     }
   };
 
-  const tryRefreshWithToken = async (refreshToken: string): Promise<boolean> => {
+  const tryRefreshWithToken = async (
+    _refreshToken: string
+  ): Promise<boolean> => {
     try {
       // TODO: Replace with your actual API call
       // const response = await api.post('/auth/refresh', { refreshToken });
@@ -190,7 +194,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     setUser(null);
   };
 
-  const signIn = useCallback(async (email: string, password: string) => {
+  const signIn = useCallback(async (email: string, _password: string) => {
     try {
       // TODO: Replace with your actual API call
       // const response = await api.post('/auth/login', { email, password });