@umituz/react-native-design-system 4.23.96 → 4.23.100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.23.96",
+  "version": "4.23.100",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/button/AtomicButton.tsx

@@ -29,6 +29,9 @@ export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
   textStyle,
   activeOpacity = 0.8,
   testID,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole = 'button',
 }) => {
   const tokens = useAppDesignTokens();
 
@@ -80,6 +83,10 @@ export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
       activeOpacity={activeOpacity}
       disabled={isDisabled}
       testID={testID}
+      accessibilityRole={accessibilityRole}
+      accessibilityLabel={accessibilityLabel || title || (typeof children === 'string' ? children : 'Button')}
+      accessibilityHint={accessibilityHint}
+      accessibilityState={{ disabled: isDisabled, busy: loading }}
     >
       {loading ? (
         <AtomicSpinner

package/src/atoms/button/types/index.ts

@@ -24,6 +24,10 @@ export interface AtomicButtonProps {
   readonly textStyle?: StyleProp<TextStyle>;
   readonly activeOpacity?: number;
   readonly testID?: string;
+  // Accessibility props
+  readonly accessibilityLabel?: string;
+  readonly accessibilityHint?: string;
+  readonly accessibilityRole?: 'button' | 'link';
 }
 
 export interface ButtonSizeConfig {

package/src/atoms/input/hooks/useInputState.ts

@@ -1,12 +1,10 @@
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useEffect, useMemo } from 'react';
 
 interface UseInputStateProps {
   value?: string;
   onChangeText?: (text: string) => void;
   secureTextEntry?: boolean;
-  showPasswordToggle?: boolean;
   maxLength?: number;
-  showCharacterCount?: boolean;
 }
 
 interface UseInputStateReturn {
@@ -24,9 +22,7 @@ export const useInputState = ({
   value = '',
   onChangeText,
   secureTextEntry = false,
-  showPasswordToggle: _showPasswordToggle = false,
   maxLength,
-  showCharacterCount: _showCharacterCount = false,
 }: UseInputStateProps = {}): UseInputStateReturn => {
   const [localValue, setLocalValue] = useState(value);
   const [isFocused, setIsFocused] = useState(false);
@@ -49,7 +45,7 @@ export const useInputState = ({
   const characterCount = localValue.length;
   const isAtMaxLength = maxLength ? characterCount >= maxLength : false;
 
-  return {
+  return useMemo(() => ({
     localValue,
     isFocused,
     isPasswordVisible,
@@ -58,5 +54,5 @@ export const useInputState = ({
     setIsFocused,
     handleTextChange,
     togglePasswordVisibility,
-  };
+  }), [localValue, isFocused, isPasswordVisible, characterCount, isAtMaxLength, handleTextChange, togglePasswordVisibility]);
 };

package/src/haptics/infrastructure/services/HapticService.ts

@@ -15,7 +15,7 @@ import type { ImpactStyle, NotificationType, HapticPattern } from '../../domain/
  * Log error in development mode only
  */
 function logError(method: string, error: unknown): void {
-  if (process.env.NODE_ENV === 'development') {
+  if (__DEV__) {
     console.error(`[DesignSystem] HapticService.${method} error:`, error);
   }
 }

package/src/media/infrastructure/hooks/useGenericMediaGeneration.ts

@@ -0,0 +1,170 @@
+/**
+ * Generic Media Generation Hook
+ * Shared implementation for both Media and CardMedia generation
+ * Eliminates ~600 LOC duplication
+ */
+
+import { useState, useCallback } from "react";
+
+interface GenericMediaAttachment {
+  id: string;
+  type: string;
+  position: string;
+  url: string;
+  filename: string;
+  fileSize: number;
+  mimeType: string;
+  duration?: number;
+  thumbnailUrl?: string;
+  caption?: string;
+  isDownloaded: boolean;
+  createdAt: string;
+}
+
+interface GenericMediaGenerationRequest {
+  type: "text_to_image" | "text_to_audio" | "image_search";
+  input: {
+    text?: string;
+    prompt?: string;
+    language?: string;
+    voice?: "male" | "female" | "neutral";
+    style?: "realistic" | "cartoon" | "artistic";
+  };
+  options: {
+    maxResults?: number;
+    quality?: "low" | "medium" | "high";
+    format?: "jpeg" | "png" | "mp3" | "wav";
+  };
+}
+
+interface GenericMediaGenerationResult<TAttachment> {
+  success: boolean;
+  attachments: TAttachment[];
+  creditsUsed: number;
+  processingTime: number;
+  error?: string;
+  requestId: string;
+}
+
+export interface UseGenericMediaGenerationResult<TAttachment, TRequest> {
+  generateMedia: (request: TRequest) => Promise<GenericMediaGenerationResult<TAttachment>>;
+  isGenerating: boolean;
+  generationResult: GenericMediaGenerationResult<TAttachment> | null;
+  error: string | null;
+}
+
+/**
+ * Generic implementation of media generation logic
+ * Type-safe through attachment factory pattern
+ */
+export function useGenericMediaGeneration<
+  TAttachment extends GenericMediaAttachment,
+  TRequest extends GenericMediaGenerationRequest
+>(
+  attachmentFactory: (baseAttachment: GenericMediaAttachment) => TAttachment
+): UseGenericMediaGenerationResult<TAttachment, TRequest> {
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [generationResult, setGenerationResult] =
+    useState<GenericMediaGenerationResult<TAttachment> | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const generateMedia = useCallback(
+    async (request: TRequest): Promise<GenericMediaGenerationResult<TAttachment>> => {
+      try {
+        setIsGenerating(true);
+        setError(null);
+
+        // Simulate generation
+        await new Promise((resolve) => setTimeout(resolve, 3000));
+
+        const baseAttachments: GenericMediaAttachment[] = [];
+
+        switch (request.type) {
+          case "text_to_image":
+            for (let i = 0; i < (request.options.maxResults || 1); i++) {
+              baseAttachments.push({
+                id: `ai_img_${Date.now()}_${i}`,
+                type: "image",
+                position: "both",
+                url: `https://picsum.photos/400/300?random=${Date.now() + i}`,
+                filename: `ai_generated_${i}.jpg`,
+                fileSize: 150000,
+                mimeType: "image/jpeg",
+                isDownloaded: false,
+                createdAt: new Date().toISOString(),
+              });
+            }
+            break;
+
+          case "text_to_audio":
+            baseAttachments.push({
+              id: `ai_audio_${Date.now()}`,
+              type: "audio",
+              position: "back",
+              url: `https://example.com/audio_${Date.now()}.mp3`,
+              filename: `ai_generated_${Date.now()}.mp3`,
+              fileSize: 80000,
+              mimeType: "audio/mp3",
+              duration: 10,
+              isDownloaded: false,
+              createdAt: new Date().toISOString(),
+            });
+            break;
+
+          case "image_search":
+            for (let i = 0; i < (request.options.maxResults || 5); i++) {
+              baseAttachments.push({
+                id: `search_img_${Date.now()}_${i}`,
+                type: "image",
+                position: "both",
+                url: `https://picsum.photos/400/300?random=${Date.now() + i}`,
+                filename: `search_result_${i}.jpg`,
+                fileSize: 120000,
+                mimeType: "image/jpeg",
+                isDownloaded: false,
+                createdAt: new Date().toISOString(),
+              });
+            }
+            break;
+        }
+
+        const attachments = baseAttachments.map(attachmentFactory);
+
+        const result: GenericMediaGenerationResult<TAttachment> = {
+          success: true,
+          attachments,
+          creditsUsed: request.type === "text_to_image" ? 5 : request.type === "text_to_audio" ? 3 : 2,
+          processingTime: 3000,
+          requestId: `req_${Date.now()}`,
+        };
+
+        setGenerationResult(result);
+        return result;
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : "Generation failed";
+        setError(errorMessage);
+        setIsGenerating(false);
+
+        return {
+          success: false,
+          attachments: [],
+          creditsUsed: 0,
+          processingTime: 0,
+          error: errorMessage,
+          requestId: "",
+        };
+      } finally {
+        setIsGenerating(false);
+      }
+    },
+    [attachmentFactory],
+  );
+
+  return {
+    generateMedia,
+    isGenerating,
+    generationResult,
+    error,
+  };
+}

package/src/media/presentation/hooks/useCardMediaGeneration.ts

@@ -1,124 +1,20 @@
 /**
  * Card Media Generation Hook
  * Hook for generating card media with AI
+ * Now a thin wrapper around useGenericMediaGeneration
+ *
+ * Note: CardMedia types are aliases of Media types for backward compatibility
  */
 
-import { useState, useCallback } from "react";
+import { useGenericMediaGeneration } from "../../infrastructure/hooks/useGenericMediaGeneration";
 import type { UseCardMediaGenerationResult } from "./card-multimedia.types";
 import type {
-  CardMediaAttachment,
-  CardMediaGenerationRequest,
-  CardMediaGenerationResult,
-} from "../../domain/entities/CardMultimedia.types";
+  MediaAttachment as CardMediaAttachment,
+  MediaGenerationRequest as CardMediaGenerationRequest,
+} from "../../domain/entities/MultimediaFlashcardTypes";
 
 export const useCardMediaGeneration = (): UseCardMediaGenerationResult => {
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [generationResult, setGenerationResult] =
-    useState<CardMediaGenerationResult | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  const generateMedia = useCallback(
-    async (
-      request: CardMediaGenerationRequest,
-    ): Promise<CardMediaGenerationResult> => {
-      try {
-        setIsGenerating(true);
-        setError(null);
-
-        // Simulate generation
-        await new Promise((resolve) => setTimeout(resolve, 3000));
-
-        const attachments: CardMediaAttachment[] = [];
-
-        switch (request.type) {
-          case "text_to_image":
-            for (let i = 0; i < (request.options.maxResults || 1); i++) {
-              attachments.push({
-                id: `ai_img_${Date.now()}_${i}`,
-                type: "image",
-                position: "both",
-                url: `https://picsum.photos/400/300?random=${Date.now() + i}`,
-                filename: `ai_generated_${i}.jpg`,
-                fileSize: 150000, // 150KB
-                mimeType: "image/jpeg",
-                isDownloaded: false,
-                createdAt: new Date().toISOString(),
-              });
-            }
-            break;
-
-          case "text_to_audio":
-            attachments.push({
-              id: `ai_audio_${Date.now()}`,
-              type: "audio",
-              position: "back",
-              url: `https://example.com/audio_${Date.now()}.mp3`,
-              filename: `ai_generated_${Date.now()}.mp3`,
-              fileSize: 80000, // 80KB
-              mimeType: "audio/mp3",
-              duration: 10, // 10 seconds
-              isDownloaded: false,
-              createdAt: new Date().toISOString(),
-            });
-            break;
-
-          case "image_search":
-            for (let i = 0; i < (request.options.maxResults || 5); i++) {
-              attachments.push({
-                id: `search_img_${Date.now()}_${i}`,
-                type: "image",
-                position: "both",
-                url: `https://picsum.photos/400/300?random=${Date.now() + i}`,
-                filename: `search_result_${i}.jpg`,
-                fileSize: 120000, // 120KB
-                mimeType: "image/jpeg",
-                isDownloaded: false,
-                createdAt: new Date().toISOString(),
-              });
-            }
-            break;
-        }
-
-        const result: CardMediaGenerationResult = {
-          success: true,
-          attachments,
-          creditsUsed:
-            request.type === "text_to_image"
-              ? 5
-              : request.type === "text_to_audio"
-                ? 3
-                : 2,
-          processingTime: 3000,
-          requestId: `req_${Date.now()}`,
-        };
-
-        setGenerationResult(result);
-        return result;
-      } catch (err) {
-        const errorMessage =
-          err instanceof Error ? err.message : "Generation failed";
-        setError(errorMessage);
-        setIsGenerating(false);
-
-        return {
-          success: false,
-          attachments: [],
-          creditsUsed: 0,
-          processingTime: 0,
-          error: errorMessage,
-          requestId: "",
-        };
-      } finally {
-        setIsGenerating(false);
-      }
-    },
-    [],
+  return useGenericMediaGeneration<CardMediaAttachment, CardMediaGenerationRequest>(
+    (baseAttachment) => baseAttachment as CardMediaAttachment
   );
-
-  return {
-    generateMedia,
-    isGenerating,
-    generationResult,
-    error,
-  };
 };

package/src/media/presentation/hooks/useCardMediaUpload.ts

@@ -8,11 +8,11 @@ import { generateThumbnail, getMediaDuration } from "../../infrastructure/utils/
 import { getMediaTypeFromMime } from "../../infrastructure/utils/mime-type-detector";
 import type { UseCardMediaUploadResult } from "./card-multimedia.types";
 import type {
-  CardMediaAttachment,
-  CardMediaCompressionOptions,
-  CardMediaFile,
-  CardMediaUploadProgress,
-} from "../../domain/entities/CardMultimedia.types";
+  MediaAttachment as CardMediaAttachment,
+  MediaCompressionOptions as CardMediaCompressionOptions,
+  MediaFile as CardMediaFile,
+  MediaUploadProgress as CardMediaUploadProgress,
+} from "../../domain/entities/MultimediaFlashcardTypes";
 
 export const useCardMediaUpload = (): UseCardMediaUploadResult => {
   const [isUploading, setIsUploading] = useState(false);

package/src/media/presentation/hooks/useCardMediaValidation.ts

@@ -6,7 +6,10 @@
 import { useState, useCallback } from "react";
 import { formatFileSize } from "../../infrastructure/utils/media-collection-utils";
 import type { UseCardMediaValidationResult } from "./card-multimedia.types";
-import type { CardMediaValidation, CardMediaFile } from "../../domain/entities/CardMultimedia.types";
+import type {
+  MediaValidation as CardMediaValidation,
+  MediaFile as CardMediaFile,
+} from "../../domain/entities/MultimediaFlashcardTypes";
 
 export const useCardMediaValidation = (): UseCardMediaValidationResult => {
   const [isValidating, setIsValidating] = useState(false);

package/src/media/presentation/hooks/useMediaGeneration.ts

@@ -1,101 +1,18 @@
 /**
  * Media Generation Hook
  * Hook for generating media with AI
+ * Now a thin wrapper around useGenericMediaGeneration
  */
 
-import { useState, useCallback } from "react";
+import { useGenericMediaGeneration } from "../../infrastructure/hooks/useGenericMediaGeneration";
 import type { UseMediaGenerationResult } from "./multimedia.types";
 import type {
   MediaAttachment,
   MediaGenerationRequest,
-  MediaGenerationResult,
 } from "../../domain/entities/MultimediaFlashcardTypes";
 
 export const useMediaGeneration = (): UseMediaGenerationResult => {
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [generationResult, setGenerationResult] =
-    useState<MediaGenerationResult | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  const generateMedia = useCallback(
-    async (request: MediaGenerationRequest): Promise<MediaGenerationResult> => {
-      try {
-        setIsGenerating(true);
-        setError(null);
-
-        // Simulate generation
-        await new Promise((resolve) => setTimeout(resolve, 3000));
-
-        const attachments: MediaAttachment[] = [];
-
-        switch (request.type) {
-          case "text_to_image":
-            for (let i = 0; i < (request.options.maxResults || 1); i++) {
-              attachments.push({
-                id: `ai_img_${Date.now()}_${i}`,
-                type: "image",
-                position: "both",
-                url: `https://picsum.photos/400/300?random=${Date.now() + i}`,
-                filename: `ai_generated_${i}.jpg`,
-                fileSize: 150000, // 150KB
-                mimeType: "image/jpeg",
-                isDownloaded: false,
-                createdAt: new Date().toISOString(),
-              });
-            }
-            break;
-
-          case "text_to_audio":
-            attachments.push({
-              id: `ai_audio_${Date.now()}`,
-              type: "audio",
-              position: "back",
-              url: `https://example.com/audio_${Date.now()}.mp3`,
-              filename: `ai_generated_${Date.now()}.mp3`,
-              fileSize: 80000, // 80KB
-              mimeType: "audio/mp3",
-              duration: 10, // 10 seconds
-              isDownloaded: false,
-              createdAt: new Date().toISOString(),
-            });
-            break;
-        }
-
-        const result: MediaGenerationResult = {
-          success: true,
-          attachments,
-          creditsUsed: request.type === "text_to_image" ? 5 : 3,
-          processingTime: 3000,
-          requestId: `req_${Date.now()}`,
-        };
-
-        setGenerationResult(result);
-        return result;
-      } catch (err) {
-        const errorMessage =
-          err instanceof Error ? err.message : "Generation failed";
-        setError(errorMessage);
-        setIsGenerating(false);
-
-        return {
-          success: false,
-          attachments: [],
-          creditsUsed: 0,
-          processingTime: 0,
-          error: errorMessage,
-          requestId: "",
-        };
-      } finally {
-        setIsGenerating(false);
-      }
-    },
-    [],
+  return useGenericMediaGeneration<MediaAttachment, MediaGenerationRequest>(
+    (baseAttachment) => baseAttachment as MediaAttachment
   );
-
-  return {
-    generateMedia,
-    isGenerating,
-    generationResult,
-    error,
-  };
 };

package/src/molecules/navigation/components/NavigationHeader.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { AtomicText } from '../../../atoms';
 import { AtomicIcon, useIconName } from '../../../atoms';
@@ -20,7 +20,7 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
   const insets = useSafeAreaInsets();
   const arrowLeftIcon = useIconName('arrowLeft');
 
-  const styles = StyleSheet.create({
+  const styles = useMemo(() => StyleSheet.create({
     container: {
       paddingTop: insets.top,
       paddingHorizontal: tokens.spacing.md,
@@ -45,7 +45,7 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
       flex: 1,
       textAlign: 'left',
     },
-  });
+  }), [tokens, insets]);
 
   return (
     <View style={styles.container}>

package/src/molecules/navigation/utils/AppNavigation.ts

@@ -34,12 +34,30 @@ export const canGoBack = (): boolean => navigationRef?.canGoBack() ?? false;
 
 /**
  * Navigate to a specific route.
+ * Supports both simple and nested navigation.
  */
 export const navigate = (name: string, params?: object): void => {
     if (__DEV__) {
     }
     if (navigationRef?.isReady()) {
-        navigationRef.navigate(name, params);
+        navigationRef.navigate(name as never, params as never);
+    }
+};
+
+/**
+ * Navigate to a nested screen in a specific navigator.
+ * @param navigatorName - The name of the parent navigator
+ * @param screenName - The name of the screen within that navigator
+ * @param params - Optional parameters to pass to the screen
+ */
+export const navigateNested = (navigatorName: string, screenName: string, params?: object): void => {
+    if (__DEV__) {
+    }
+    if (navigationRef?.isReady()) {
+        navigationRef.navigate(navigatorName as never, {
+            screen: screenName,
+            params,
+        } as never);
     }
 };
 
@@ -130,6 +148,7 @@ export const AppNavigation = {
     isReady,
     canGoBack,
     navigate,
+    navigateNested,
     push,
     goBack,
     reset,

package/src/offline/index.ts

@@ -14,6 +14,7 @@ export type {
 
 // Store
 export { useOfflineStore } from './infrastructure/storage/OfflineStore';
+export { useOfflineConfigStore } from './infrastructure/storage/OfflineConfigStore';
 
 // Hooks
 export { useOffline, configureOffline } from './presentation/hooks/useOffline';

package/src/offline/infrastructure/storage/OfflineConfigStore.ts

@@ -0,0 +1,34 @@
+/**
+ * Offline Config Store
+ * Centralized configuration for offline functionality
+ * Replaces module-level mutable state with Zustand store
+ */
+
+import { create } from 'zustand';
+import type { OfflineConfig } from '../../types';
+
+interface OfflineConfigStore {
+  config: OfflineConfig;
+  setConfig: (config: OfflineConfig) => void;
+  mergeConfig: (partialConfig: OfflineConfig) => void;
+  reset: () => void;
+}
+
+export const useOfflineConfigStore = create<OfflineConfigStore>((set) => ({
+  config: {},
+
+  setConfig: (config) => set({ config }),
+
+  mergeConfig: (partialConfig) => set((state) => ({
+    config: { ...state.config, ...partialConfig }
+  })),
+
+  reset: () => set({ config: {} }),
+}));
+
+/**
+ * Get current config (for non-React contexts)
+ */
+export const getOfflineConfig = (): OfflineConfig => {
+  return useOfflineConfigStore.getState().config;
+};

package/src/offline/presentation/hooks/useOffline.ts

@@ -10,6 +10,7 @@ import type { NetworkState as ExpoNetworkState } from 'expo-network';
 import type { NetworkState, OfflineConfig } from '../../types';
 import { useOfflineStore } from '../../infrastructure/storage/OfflineStore';
 import { networkEvents } from '../../infrastructure/events/NetworkEvents';
+import { useOfflineConfigStore } from '../../infrastructure/storage/OfflineConfigStore';
 
 /**
  * Convert expo-network state to our internal format
@@ -21,14 +22,17 @@ const toNetworkState = (state: ExpoNetworkState): NetworkState => ({
   details: null,
 });
 
-let globalConfig: OfflineConfig = {};
-
+/**
+ * Configure offline settings globally
+ * This is a facade over the config store for backward compatibility
+ */
 export const configureOffline = (config: OfflineConfig): void => {
-  globalConfig = config;
+  useOfflineConfigStore.getState().setConfig(config);
 };
 
 export const useOffline = (config?: OfflineConfig) => {
   const store = useOfflineStore();
+  const globalConfig = useOfflineConfigStore((state) => state.config);
   const isInitialized = useRef(false);
   const previousStateRef = useRef<NetworkState | null>(null);
   const isMountedRef = useRef(true);
@@ -36,7 +40,7 @@ export const useOffline = (config?: OfflineConfig) => {
   // Memoize merged config to prevent unnecessary effect re-runs
   const mergedConfig = useMemo(
     () => ({ ...globalConfig, ...config }),
-    [config]
+    [globalConfig, config]
   );
 
   const handleNetworkStateChange = useCallback((state: ExpoNetworkState) => {