@umituz/react-native-design-system 2.6.110 → 2.6.112

package/src/infinite-scroll/presentation/components/types.ts

@@ -0,0 +1,124 @@
+/**
+ * Component Types
+ *
+ * Shared types for presentation components
+ */
+
+import type { TextStyle, ViewStyle, AccessibilityProps } from "react-native";
+
+export interface EmptyProps extends AccessibilityProps {
+  /**
+   * Optional text to display
+   * Default: "No items found"
+   */
+  text?: string;
+
+  /**
+   * Optional accessibility label
+   * Default: "Empty list"
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * Optional custom style for container
+   */
+  containerStyle?: ViewStyle;
+
+  /**
+   * Optional custom style for text
+   */
+  textStyle?: TextStyle;
+}
+
+export interface ErrorProps extends AccessibilityProps {
+  /**
+   * Error message to display
+   */
+  error: string;
+
+  /**
+   * Retry callback
+   */
+  onRetry: () => void;
+
+  /**
+   * Optional text for retry button
+   * Default: "Tap to retry"
+   */
+  retryText?: string;
+
+  /**
+   * Optional accessibility label for error
+   * Default: "Error: {error}"
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * Optional accessibility hint for retry button
+   * Default: "Double tap to retry"
+   */
+  retryAccessibilityHint?: string;
+
+  /**
+   * Optional custom style for container
+   */
+  containerStyle?: ViewStyle;
+
+  /**
+   * Optional custom style for error text
+   */
+  errorTextStyle?: TextStyle;
+
+  /**
+   * Optional custom style for retry text
+   */
+  retryTextStyle?: TextStyle;
+}
+
+export interface LoadingProps extends AccessibilityProps {
+  /**
+   * Optional custom style for container
+   */
+  containerStyle?: ViewStyle;
+
+  /**
+   * Optional size for indicator
+   * Default: "large"
+   */
+  size?: "small" | "large" | number;
+
+  /**
+   * Optional color for indicator
+   */
+  color?: string;
+
+  /**
+   * Optional accessibility label
+   * Default: "Loading"
+   */
+  accessibilityLabel?: string;
+}
+
+export interface LoadingMoreProps extends AccessibilityProps {
+  /**
+   * Optional custom style for container
+   */
+  containerStyle?: ViewStyle;
+
+  /**
+   * Optional size for indicator
+   * Default: "small"
+   */
+  size?: "small" | "large" | number;
+
+  /**
+   * Optional color for indicator
+   */
+  color?: string;
+
+  /**
+   * Optional accessibility label
+   * Default: "Loading more"
+   */
+  accessibilityLabel?: string;
+}

package/src/infinite-scroll/presentation/hooks/pagination.helper.ts

@@ -0,0 +1,83 @@
+/**
+ * Pagination Helper
+ * SOLID: Single Responsibility - Handle pagination operations
+ */
+
+import type { InfiniteScrollConfig, PaginatedResult } from "../../domain/types/infinite-scroll-config";
+import type { InfiniteScrollState } from "../../domain/types/infinite-scroll-state";
+
+export function isCursorMode<T>(
+  config: InfiniteScrollConfig<T>,
+): config is Extract<InfiniteScrollConfig<T>, { paginationMode: "cursor" }> {
+  return "paginationMode" in config && config.paginationMode === "cursor";
+}
+
+export async function loadData<T>(
+  config: InfiniteScrollConfig<T>,
+  pageOrCursor: number | string | undefined,
+  pageSize: number,
+  totalItems?: number,
+): Promise<InfiniteScrollState<T>> {
+  if (isCursorMode(config)) {
+    const result = await config.fetchCursor(pageOrCursor as string | undefined, pageSize);
+    return {
+      items: result.items,
+      pages: [result.items],
+      currentPage: 0,
+      cursor: result.nextCursor,
+      hasMore: result.hasMore,
+      isLoading: false,
+      isLoadingMore: false,
+      isRefreshing: false,
+      error: null,
+      totalItems,
+    };
+  } else {
+    const data = await config.fetchData(pageOrCursor as number, pageSize);
+    const hasMore = data.length >= pageSize;
+    return {
+      items: data,
+      pages: [data],
+      currentPage: pageOrCursor as number,
+      cursor: null,
+      hasMore,
+      isLoading: false,
+      isLoadingMore: false,
+      isRefreshing: false,
+      error: null,
+      totalItems,
+    };
+  }
+}
+
+export async function loadMoreData<T>(
+  config: InfiniteScrollConfig<T>,
+  state: InfiniteScrollState<T>,
+  pageSize: number,
+): Promise<Partial<InfiniteScrollState<T>>> {
+  if (isCursorMode(config)) {
+    if (!state.cursor) throw new Error("No cursor available");
+    const result = await config.fetchCursor(state.cursor, pageSize);
+    return {
+      items: [...state.items, ...result.items],
+      pages: [...state.pages, result.items],
+      cursor: result.nextCursor,
+      hasMore: result.hasMore,
+      isLoadingMore: false,
+      error: null,
+    };
+  } else {
+    const nextPage = state.currentPage + 1;
+    const data = await config.fetchData(nextPage, pageSize);
+    const newPages = [...state.pages, data];
+    const hasMore = data.length >= pageSize;
+    return {
+      items: newPages.flat(),
+      pages: newPages,
+      currentPage: nextPage,
+      hasMore,
+      isLoadingMore: false,
+      error: null,
+    };
+  }
+}

package/src/infinite-scroll/presentation/hooks/useInfiniteScroll.ts

@@ -0,0 +1,327 @@
+/**
+ * useInfiniteScroll Hook
+ *
+ * Supports page-based and cursor-based pagination
+ * Features:
+ * - AbortController for request cancellation
+ * - Automatic retry with exponential backoff
+ * - Performance monitoring in __DEV__ mode
+ * - Memory leak prevention
+ */
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import type { InfiniteScrollConfig } from "../../domain/types/infinite-scroll-config";
+import type { InfiniteScrollState } from "../../domain/types/infinite-scroll-state";
+import type { UseInfiniteScrollReturn } from "../../domain/types/infinite-scroll-return";
+import { loadData, loadMoreData, isCursorMode } from "./pagination.helper";
+
+const DEFAULT_CONFIG = {
+  pageSize: 20,
+  threshold: 5,
+  autoLoad: true,
+  initialPage: 0,
+  maxRetries: 3,
+  retryDelay: 1000,
+};
+
+function createInitialState<T>(
+  initialPage: number,
+  totalItems?: number,
+): InfiniteScrollState<T> {
+  return {
+    items: [],
+    pages: [],
+    currentPage: initialPage,
+    cursor: null,
+    hasMore: true,
+    isLoading: true,
+    isLoadingMore: false,
+    isRefreshing: false,
+    error: null,
+    totalItems,
+  };
+}
+
+/**
+ * Sleep utility for retry delay
+ */
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/**
+ * Retry logic with exponential backoff
+ */
+async function retryWithBackoff<T>(
+  fn: () => Promise<T>,
+  maxRetries: number,
+  baseDelay: number,
+): Promise<T> {
+  let lastError: Error | undefined;
+
+  for (let attempt = 0; attempt <= maxRetries; attempt++) {
+    try {
+      return await fn();
+    } catch (error) {
+      lastError = error instanceof Error ? error : new Error(String(error));
+
+      if (attempt < maxRetries) {
+        const delay = baseDelay * Math.pow(2, attempt);
+        if (__DEV__) {
+          console.log(
+            `[useInfiniteScroll] Retry attempt ${attempt + 1}/${maxRetries} after ${delay}ms`,
+          );
+        }
+        await sleep(delay);
+      }
+    }
+  }
+
+  throw lastError;
+}
+
+export function useInfiniteScroll<T>(
+  config: InfiniteScrollConfig<T>,
+): UseInfiniteScrollReturn<T> {
+  const {
+    pageSize = DEFAULT_CONFIG.pageSize,
+    autoLoad = DEFAULT_CONFIG.autoLoad,
+    totalItems,
+  } = config;
+
+  const initialPage =
+    "initialPage" in config ? config.initialPage || 0 : DEFAULT_CONFIG.initialPage;
+
+  const maxRetries = DEFAULT_CONFIG.maxRetries;
+  const retryDelay = DEFAULT_CONFIG.retryDelay;
+
+  const [state, setState] = useState<InfiniteScrollState<T>>(() =>
+    createInitialState<T>(initialPage, totalItems),
+  );
+
+  const isLoadingRef = useRef(false);
+  const isMountedRef = useRef(true);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    isMountedRef.current = true;
+
+    return () => {
+      isMountedRef.current = false;
+      abortControllerRef.current?.abort();
+      if (__DEV__) {
+        console.log("[useInfiniteScroll] Cleanup: component unmounted");
+      }
+    };
+  }, []);
+
+  // Cancel pending requests
+  const cancelPendingRequests = useCallback(() => {
+    abortControllerRef.current?.abort();
+    abortControllerRef.current = new AbortController();
+  }, []);
+
+  const loadInitial = useCallback(async () => {
+    if (isLoadingRef.current) return;
+    isLoadingRef.current = true;
+
+    cancelPendingRequests();
+
+    if (isMountedRef.current) {
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    }
+
+    const startTime = __DEV__ ? performance.now() : 0;
+
+    try {
+      const newState = await retryWithBackoff(
+        async () => {
+          const result = await loadData(config, initialPage, pageSize, totalItems);
+          return result;
+        },
+        maxRetries,
+        retryDelay,
+      );
+
+      if (isMountedRef.current) {
+        setState(newState);
+
+        if (__DEV__) {
+          const duration = performance.now() - startTime;
+          console.log(
+            `[useInfiniteScroll] Initial load completed in ${duration.toFixed(2)}ms`,
+            `Loaded ${newState.items.length} items`,
+          );
+        }
+      }
+    } catch (error) {
+      if (isMountedRef.current) {
+        const errorMessage =
+          error instanceof Error ? error.message : "Failed to load data";
+
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: errorMessage,
+        }));
+
+        if (__DEV__) {
+          console.error("[useInfiniteScroll] Load initial failed:", errorMessage);
+        }
+      }
+    } finally {
+      isLoadingRef.current = false;
+    }
+  }, [config, initialPage, pageSize, totalItems, maxRetries, retryDelay, cancelPendingRequests]);
+
+  const loadMore = useCallback(async () => {
+    if (
+      isLoadingRef.current ||
+      !state.hasMore ||
+      state.isLoadingMore ||
+      state.isLoading
+    ) {
+      return;
+    }
+
+    if (isCursorMode(config) && !state.cursor) return;
+
+    isLoadingRef.current = true;
+
+    if (isMountedRef.current) {
+      setState((prev) => ({ ...prev, isLoadingMore: true, error: null }));
+    }
+
+    const startTime = __DEV__ ? performance.now() : 0;
+
+    try {
+      const updates = await retryWithBackoff(
+        async () => {
+          const result = await loadMoreData(config, state, pageSize);
+          return result;
+        },
+        maxRetries,
+        retryDelay,
+      );
+
+      if (isMountedRef.current) {
+        setState((prev) => ({ ...prev, ...updates }));
+
+        if (__DEV__) {
+          const duration = performance.now() - startTime;
+          const newItemsCount = updates.items?.length || 0;
+          console.log(
+            `[useInfiniteScroll] Load more completed in ${duration.toFixed(2)}ms`,
+            `Loaded ${newItemsCount} items, total: ${updates.items?.length || 0}`,
+          );
+        }
+      }
+    } catch (error) {
+      if (isMountedRef.current) {
+        const errorMessage =
+          error instanceof Error ? error.message : "Failed to load more items";
+
+        setState((prev) => ({
+          ...prev,
+          isLoadingMore: false,
+          error: errorMessage,
+        }));
+
+        if (__DEV__) {
+          console.error("[useInfiniteScroll] Load more failed:", errorMessage);
+        }
+      }
+    } finally {
+      isLoadingRef.current = false;
+    }
+  }, [config, state, pageSize, maxRetries, retryDelay]);
+
+  const refresh = useCallback(async () => {
+    if (isLoadingRef.current) return;
+    isLoadingRef.current = true;
+
+    cancelPendingRequests();
+
+    if (isMountedRef.current) {
+      setState((prev) => ({ ...prev, isRefreshing: true, error: null }));
+    }
+
+    const startTime = __DEV__ ? performance.now() : 0;
+
+    try {
+      const newState = await retryWithBackoff(
+        async () => {
+          const result = await loadData(config, initialPage, pageSize, totalItems);
+          return result;
+        },
+        maxRetries,
+        retryDelay,
+      );
+
+      if (isMountedRef.current) {
+        setState(newState);
+
+        if (__DEV__) {
+          const duration = performance.now() - startTime;
+          console.log(
+            `[useInfiniteScroll] Refresh completed in ${duration.toFixed(2)}ms`,
+            `Loaded ${newState.items.length} items`,
+          );
+        }
+      }
+    } catch (error) {
+      if (isMountedRef.current) {
+        const errorMessage =
+          error instanceof Error ? error.message : "Failed to refresh data";
+
+        setState((prev) => ({
+          ...prev,
+          isRefreshing: false,
+          error: errorMessage,
+        }));
+
+        if (__DEV__) {
+          console.error("[useInfiniteScroll] Refresh failed:", errorMessage);
+        }
+      }
+    } finally {
+      isLoadingRef.current = false;
+    }
+  }, [config, initialPage, pageSize, totalItems, maxRetries, retryDelay, cancelPendingRequests]);
+
+  const reset = useCallback(() => {
+    isLoadingRef.current = false;
+    cancelPendingRequests();
+    setState(createInitialState<T>(initialPage, totalItems));
+
+    if (__DEV__) {
+      console.log("[useInfiniteScroll] State reset");
+    }
+  }, [initialPage, totalItems, cancelPendingRequests]);
+
+  useEffect(() => {
+    if (autoLoad) {
+      loadInitial();
+    }
+
+    return () => {
+      // Cleanup on config change
+      if (__DEV__) {
+        console.log("[useInfiniteScroll] Config changed, cleaning up");
+      }
+    };
+  }, [autoLoad, loadInitial]);
+
+  const canLoadMore =
+    state.hasMore && !state.isLoadingMore && !state.isLoading;
+
+  return {
+    items: state.items,
+    state,
+    loadMore,
+    refresh,
+    reset,
+    canLoadMore,
+  };
+}

package/src/uuid/index.ts

@@ -0,0 +1,15 @@
+/**
+ * React Native UUID
+ *
+ * Cross-platform UUID generation for React Native apps
+ */
+
+export {
+  generateUUID,
+  generateUUID as uuidv4,
+  generateUUID as generateCreationId,
+  isValidUUID,
+  getUUIDVersion,
+} from "./infrastructure/utils/UUIDUtils";
+export type { UUID } from "./types/UUID";
+export { UUIDVersion, UUID_CONSTANTS } from "./types/UUID";

package/src/uuid/infrastructure/utils/UUIDUtils.ts

@@ -0,0 +1,75 @@
+/**
+ * UUID Generation Utility
+ *
+ * Provides cross-platform UUID generation using expo-crypto.
+ * Compatible with React Native (iOS, Android) and Web.
+ */
+
+import * as Crypto from 'expo-crypto';
+import type { UUID } from '../../types/UUID';
+import { UUID_CONSTANTS } from '../../types/UUID';
+
+/**
+ * Generate a v4 UUID
+ * Uses expo-crypto's randomUUID() for secure UUID generation
+ *
+ * @returns A v4 UUID string
+ *
+ * @example
+ * ```typescript
+ * import { generateUUID } from '@umituz/react-native-uuid';
+ *
+ * const id = generateUUID();
+ * // Returns: "550e8400-e29b-41d4-a716-446655440000"
+ * ```
+ */
+export const generateUUID = (): UUID => {
+  return Crypto.randomUUID() as UUID;
+};
+
+/**
+ * Validate UUID format
+ * Checks if a string is a valid v4 UUID
+ *
+ * @param value - The value to validate
+ * @returns True if the value is a valid v4 UUID
+ *
+ * @example
+ * ```typescript
+ * import { isValidUUID } from '@umituz/react-native-uuid';
+ *
+ * isValidUUID('550e8400-e29b-41d4-a716-446655440000'); // true
+ * isValidUUID('invalid-uuid'); // false
+ * ```
+ */
+export const isValidUUID = (value: string): value is UUID => {
+  return UUID_CONSTANTS.PATTERN.test(value);
+};
+
+/**
+ * Get version from UUID string
+ * Returns the UUID version number (1-5) or null for NIL/invalid
+ *
+ * @param value - The UUID string
+ * @returns UUID version number or null
+ *
+ * @example
+ * ```typescript
+ * import { getUUIDVersion } from '@umituz/react-native-uuid';
+ *
+ * getUUIDVersion('550e8400-e29b-41d4-a716-446655440000'); // 4
+ * getUUIDVersion('00000000-0000-0000-0000-000000000000'); // 0 (NIL)
+ * getUUIDVersion('invalid'); // null
+ * ```
+ */
+export const getUUIDVersion = (value: string): number | null => {
+  if (value === UUID_CONSTANTS.NIL) {
+    return 0;
+  }
+
+  const versionChar = value.charAt(14);
+  const version = parseInt(versionChar, 10);
+
+  return (version >= 1 && version <= 5) ? version : null;
+};
+