@umituz/react-native-design-system 4.23.55 → 4.23.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.23.55",
+  "version": "4.23.56",
   "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/EmptyState.tsx

@@ -11,7 +11,7 @@ import React from 'react';
 import { View, StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
 import { AtomicIcon } from './icon';
 import { AtomicText } from './AtomicText';
-import { useAppDesignTokens, STATIC_TOKENS } from '../theme';
+import { useAppDesignTokens, BASE_TOKENS } from '../theme';
 
 export interface EmptyStateProps {
   icon?: string;
@@ -95,7 +95,7 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'flex-start',
     justifyContent: 'flex-start',
-    padding: STATIC_TOKENS.spacing.xl,
+    padding: BASE_TOKENS.spacing.xl,
   },
   iconContainer: {
     width: 120,
@@ -103,18 +103,18 @@ const styles = StyleSheet.create({
     borderRadius: 60,
     alignItems: 'flex-start',
     justifyContent: 'flex-start',
-    marginBottom: STATIC_TOKENS.spacing.lg,
+    marginBottom: BASE_TOKENS.spacing.lg,
   },
   title: {
-    marginBottom: STATIC_TOKENS.spacing.sm,
+    marginBottom: BASE_TOKENS.spacing.sm,
   },
   description: {
-    marginBottom: STATIC_TOKENS.spacing.lg,
+    marginBottom: BASE_TOKENS.spacing.lg,
   },
   actionButton: {
-    paddingHorizontal: STATIC_TOKENS.spacing.lg,
-    paddingVertical: STATIC_TOKENS.spacing.md,
-    borderRadius: STATIC_TOKENS.borders.radius.md,
-    marginTop: STATIC_TOKENS.spacing.sm,
+    paddingHorizontal: BASE_TOKENS.spacing.lg,
+    paddingVertical: BASE_TOKENS.spacing.md,
+    borderRadius: BASE_TOKENS.borders.radius.md,
+    marginTop: BASE_TOKENS.spacing.sm,
   },
 });

package/src/atoms/index.ts

@@ -106,7 +106,6 @@ export {
 // Spinner
 export {
     AtomicSpinner,
-    AtomicSpinner as LoadingSpinner,
     type AtomicSpinnerProps,
     type SpinnerSize,
     type SpinnerColor,

package/src/exports/atoms.ts

@@ -18,7 +18,6 @@ export {
   AtomicSkeleton,
   AtomicBadge,
   AtomicSpinner,
-  LoadingSpinner,
   EmptyState,
   type IconName,
   type IconSize,

package/src/exports/molecules/bottom-sheet.ts

@@ -10,7 +10,6 @@ export {
   useBottomSheet,
   useBottomSheetModal,
   useListFilters,
-  SafeBottomSheetModalProvider,
   type BottomSheetProps,
   type BottomSheetModalProps,
   type BottomSheetRef,

package/src/exports/theme.ts

@@ -16,7 +16,6 @@ export {
   getColorPalette,
   withAlpha,
   BASE_TOKENS,
-  BASE_TOKENS as STATIC_TOKENS,
   spacing,
   typography,
   borders,

package/src/filesystem/infrastructure/services/file-reader.service.ts

@@ -3,7 +3,7 @@
  * Single Responsibility: Read files from device storage
  */
 
-import * as FileSystem from "expo-file-system/legacy";
+import { File } from "expo-file-system";
 import type { FileEncoding } from "../../domain/entities/File";
 
 /**
@@ -14,10 +14,11 @@ export async function readFile(
   encoding: FileEncoding = "utf8",
 ): Promise<string | null> {
   try {
-    const content = await FileSystem.readAsStringAsync(uri, {
-      encoding: encoding === "base64" ? FileSystem.EncodingType.Base64 : FileSystem.EncodingType.UTF8,
-    });
-    return content;
+    const file = new File(uri);
+    if (encoding === "base64") {
+      return await file.base64();
+    }
+    return await file.text();
   } catch {
     return null;
   }

package/src/image/presentation/components/editor/FilterPickerSheet.tsx

@@ -28,7 +28,7 @@ export const FilterPickerSheet = forwardRef<BottomSheetModalRef, FilterPickerShe
     return (
       <BottomSheetModal ref={ref} snapPoints={snapPoints} onDismiss={onDismiss}>
         <View style={{ padding: tokens.spacing.lg, flex: 1 }}>
-          <AtomicText style={{ ...tokens.typography.headingSmall, marginBottom: tokens.spacing.md }}>
+          <AtomicText style={{ ...tokens.typography.titleLarge, fontWeight: tokens.typography.semibold, marginBottom: tokens.spacing.md }}>
             {title}
           </AtomicText>
 

package/src/image/presentation/components/editor/StickerPickerSheet.tsx

@@ -26,7 +26,7 @@ export const StickerPickerSheet = forwardRef<BottomSheetModalRef, StickerPickerS
     return (
       <BottomSheetModal ref={ref} snapPoints={snapPoints} onDismiss={onDismiss}>
         <View style={{ padding: tokens.spacing.lg, flex: 1 }}>
-          <AtomicText style={{ ...tokens.typography.headingSmall, marginBottom: tokens.spacing.md }}>
+          <AtomicText style={{ ...tokens.typography.titleLarge, fontWeight: tokens.typography.semibold, marginBottom: tokens.spacing.md }}>
             {title}
           </AtomicText>
 

package/src/molecules/bottom-sheet/index.ts

@@ -8,4 +8,3 @@ export * from './hooks/useBottomSheetModal';
 export * from './hooks/useListFilters';
 export * from './types/BottomSheet';
 export * from './types/Filter';
-export * from './SafeBottomSheetModalProvider';

package/src/molecules/navigation/hooks/useAppNavigation.ts

@@ -1,4 +1,4 @@
-import { useNavigation } from "@react-navigation/native";
+import { useNavigation, CommonActions } from "@react-navigation/native";
 import type { NavigationProp, ParamListBase } from "@react-navigation/native";
 import { useCallback, useMemo } from "react";
 
@@ -30,7 +30,7 @@ export function useAppNavigation(): AppNavigationResult {
 
   const navigate = useCallback(
     (screen: string, params?: Record<string, unknown>) => {
-      (navigation.navigate as unknown as (name: string, params?: object) => void)(screen, params);
+      navigation.dispatch(CommonActions.navigate({ name: screen, params }));
     },
     [navigation]
   );

package/src/onboarding/domain/entities/OnboardingSlide.ts

@@ -5,7 +5,7 @@
  */
 
 import type { VideoSource } from "expo-video";
-import type { ImageSourceType } from "../../infrastructure/utils/layouts/layoutTypes";
+import type { ImageSourceType } from "../types/ImageSourceType";
 import type { OnboardingQuestion, OnboardingAnswerValue } from "./OnboardingQuestion";
 
 /**

package/src/onboarding/domain/types/ImageSourceType.ts

@@ -0,0 +1,8 @@
+/**
+ * Image Source Type
+ * Domain type for image sources used in onboarding slides
+ */
+
+import type { ImageSource } from "expo-image";
+
+export type ImageSourceType = ImageSource | number | string;

package/src/onboarding/infrastructure/utils/layouts/layoutTypes.ts

@@ -3,9 +3,9 @@
  * Type definitions for image layout generators
  */
 
-import type { ImageSource } from "expo-image";
+import type { ImageSourceType } from "../../../domain/types/ImageSourceType";
 
-export type ImageSourceType = ImageSource | number | string;
+export type { ImageSourceType };
 
 export interface SafeAreaInsets {
   top: number;

package/src/storage/domain/factories/StoreFactory.ts

@@ -7,7 +7,6 @@ import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import type { StoreApi } from 'zustand';
 import type { StoreConfig } from '../types/Store';
-import { storageService } from '../../infrastructure/adapters/StorageService';
 
 /**
  * Create a Zustand store with optional persistence and actions
@@ -35,7 +34,7 @@ export function createStore<
   return create<Store>()(
     persist<Store>(stateCreator, {
       name: config.name,
-      storage: createJSONStorage(() => storageService),
+      storage: config.storage ? createJSONStorage(() => config.storage!) : undefined,
       version: config.version || 1,
       partialize: (config.partialize
         ? (state: Store) => config.partialize!(state)

package/src/storage/domain/types/Store.ts

@@ -5,6 +5,13 @@
 
 import type { StoreApi } from 'zustand';
 
+/** StateStorage interface for Zustand persist middleware */
+export interface StateStorage {
+  getItem: (name: string) => string | null | Promise<string | null>;
+  setItem: (name: string, value: string) => void | Promise<void>;
+  removeItem: (name: string) => void | Promise<void>;
+}
+
 /** Set function type for Zustand */
 export type SetState<T> = StoreApi<T>['setState'];
 
@@ -35,6 +42,8 @@ export interface StoreConfig<TState extends object, TActions extends object = ob
   onRehydrate?: (state: TState & TActions) => void;
   /** Migration function for version changes */
   migrate?: (persistedState: unknown, version: number) => TState;
+  /** Custom storage adapter (required when persist is true) */
+  storage?: StateStorage;
 }
 
 /** Persisted state wrapper */

package/src/storage/index.ts

@@ -124,10 +124,8 @@ export {
   storageRepository,
 } from './infrastructure/repositories/AsyncStorageRepository';
 
-export {
-  storageService,
-  type StateStorage,
-} from './infrastructure/adapters/StorageService';
+export { storageService } from './infrastructure/adapters/StorageService';
+export type { StateStorage } from './domain/types/Store';
 
 // =============================================================================
 // PRESENTATION LAYER - Hooks

package/src/storage/infrastructure/adapters/StorageService.ts

@@ -7,15 +7,7 @@
 
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { devWarn } from '../../domain/utils/devUtils';
-
-/**
- * StateStorage interface for Zustand persist middleware
- */
-export interface StateStorage {
-  getItem: (name: string) => string | null | Promise<string | null>;
-  setItem: (name: string, value: string) => void | Promise<void>;
-  removeItem: (name: string) => void | Promise<void>;
-}
+import type { StateStorage } from '../../domain/types/Store';
 
 /**
  * Storage service for Zustand persist middleware

package/src/tanstack/domain/config/QueryClientAccessor.ts

@@ -0,0 +1,69 @@
+/**
+ * QueryClient Accessor
+ * Domain layer - Global QueryClient access
+ *
+ * Provides access to QueryClient instance outside of React component tree.
+ * Useful for services, utilities, and callbacks that need to invalidate cache.
+ *
+ * IMPORTANT: setGlobalQueryClient must be called before using getGlobalQueryClient.
+ * This is typically done in TanstackProvider.
+ */
+
+import type { QueryClient } from '@tanstack/react-query';
+
+let globalQueryClient: QueryClient | null = null;
+
+/**
+ * Set the global QueryClient instance.
+ * Called automatically by TanstackProvider.
+ */
+export function setGlobalQueryClient(client: QueryClient): void {
+    if (globalQueryClient && globalQueryClient !== client) {
+        if (__DEV__) {
+            
+            console.warn(
+                '[TanStack] QueryClient instance changed. Ensure you are not creating multiple instances.',
+            );
+        }
+    }
+    globalQueryClient = client;
+}
+
+/**
+ * Get the global QueryClient instance.
+ * Use this in non-React contexts (services, utilities, callbacks).
+ *
+ * @throws Error if QueryClient has not been set
+ *
+ * @example
+ * ```typescript
+ * import { getGlobalQueryClient, creditsQueryKeys } from '@umituz/react-native-tanstack';
+ *
+ * const queryClient = getGlobalQueryClient();
+ * queryClient.invalidateQueries({ queryKey: creditsQueryKeys.user(userId) });
+ * ```
+ */
+export function getGlobalQueryClient(): QueryClient {
+    if (!globalQueryClient) {
+        throw new Error(
+            '[TanStack] QueryClient not initialized. Ensure TanstackProvider is rendered before calling getGlobalQueryClient.',
+        );
+    }
+    return globalQueryClient;
+}
+
+/**
+ * Check if global QueryClient is available.
+ * Use this before calling getGlobalQueryClient to avoid throwing.
+ */
+export function hasGlobalQueryClient(): boolean {
+    return globalQueryClient !== null;
+}
+
+/**
+ * Clear the global QueryClient reference.
+ * Useful for cleanup in tests.
+ */
+export function clearGlobalQueryClient(): void {
+    globalQueryClient = null;
+}

package/src/tanstack/domain/repositories/BaseRepository.ts

@@ -36,7 +36,7 @@
  */
 
 import type { QueryClient, QueryKey } from '@tanstack/react-query';
-import { getGlobalQueryClient } from '../../infrastructure/config/QueryClientSingleton';
+import { getGlobalQueryClient } from '../config/QueryClientAccessor';
 import { CacheStrategies } from '../../infrastructure/config/QueryClientConfig';
 import { createQueryKeyFactory } from '../utils/QueryKeyFactory';
 import type {

package/src/tanstack/domain/repositories/RepositoryFactory.ts

@@ -24,7 +24,7 @@
  */
 
 import type { BaseRepository } from './BaseRepository';
-import { getGlobalQueryClient } from '../../infrastructure/config/QueryClientSingleton';
+import { getGlobalQueryClient } from '../config/QueryClientAccessor';
 
 type RepositoryMap = Map<string, BaseRepository<unknown, unknown, unknown>>;
 

package/src/tanstack/infrastructure/config/QueryClientSingleton.ts

@@ -1,69 +1,11 @@
 /**
  * QueryClient Singleton
- * Infrastructure layer - Global QueryClient access
- *
- * Provides access to QueryClient instance outside of React component tree.
- * Useful for services, utilities, and callbacks that need to invalidate cache.
- *
- * IMPORTANT: setGlobalQueryClient must be called before using getGlobalQueryClient.
- * This is typically done in TanstackProvider.
+ * Infrastructure layer re-export from domain accessor
  */
 
-import type { QueryClient } from '@tanstack/react-query';
-
-let globalQueryClient: QueryClient | null = null;
-
-/**
- * Set the global QueryClient instance.
- * Called automatically by TanstackProvider.
- */
-export function setGlobalQueryClient(client: QueryClient): void {
-    if (globalQueryClient && globalQueryClient !== client) {
-        if (__DEV__) {
-            
-            console.warn(
-                '[TanStack] QueryClient instance changed. Ensure you are not creating multiple instances.',
-            );
-        }
-    }
-    globalQueryClient = client;
-}
-
-/**
- * Get the global QueryClient instance.
- * Use this in non-React contexts (services, utilities, callbacks).
- *
- * @throws Error if QueryClient has not been set
- *
- * @example
- * ```typescript
- * import { getGlobalQueryClient, creditsQueryKeys } from '@umituz/react-native-tanstack';
- *
- * const queryClient = getGlobalQueryClient();
- * queryClient.invalidateQueries({ queryKey: creditsQueryKeys.user(userId) });
- * ```
- */
-export function getGlobalQueryClient(): QueryClient {
-    if (!globalQueryClient) {
-        throw new Error(
-            '[TanStack] QueryClient not initialized. Ensure TanstackProvider is rendered before calling getGlobalQueryClient.',
-        );
-    }
-    return globalQueryClient;
-}
-
-/**
- * Check if global QueryClient is available.
- * Use this before calling getGlobalQueryClient to avoid throwing.
- */
-export function hasGlobalQueryClient(): boolean {
-    return globalQueryClient !== null;
-}
-
-/**
- * Clear the global QueryClient reference.
- * Useful for cleanup in tests.
- */
-export function clearGlobalQueryClient(): void {
-    globalQueryClient = null;
-}
+export {
+  getGlobalQueryClient,
+  setGlobalQueryClient,
+  hasGlobalQueryClient,
+  clearGlobalQueryClient,
+} from '../../domain/config/QueryClientAccessor';

package/src/tanstack/presentation/hooks/usePrefetch.ts

@@ -115,6 +115,7 @@ export function usePrefetchInfiniteQuery<
 >(
   queryKey: QueryKey,
   queryFn: QueryFunction<TQueryFnData, QueryKey, TPageParam>,
+  initialPageParam: TPageParam,
   options: PrefetchOptions = {},
 ) {
   const queryClient = useQueryClient();
@@ -133,7 +134,7 @@ export function usePrefetchInfiniteQuery<
         queryFn,
         staleTime: options.staleTime,
         gcTime: options.gcTime,
-        initialPageParam: undefined as unknown as TPageParam,
+        initialPageParam,
       });
 
       if (__DEV__) {

package/src/theme/core/themes.ts

@@ -17,13 +17,6 @@ export interface Theme {
   spacing: typeof BASE_TOKENS.spacing;
   typography: typeof BASE_TOKENS.typography;
   borders: typeof BASE_TOKENS.borders;
-  borderRadius: {
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-    full: number;
-  };
   iconSizes: {
     xs: number;
     sm: number;
@@ -54,15 +47,6 @@ export const lightTheme: Theme = {
   typography: BASE_TOKENS.typography,
   borders: BASE_TOKENS.borders,
 
-  // Legacy compatibility mappings
-  borderRadius: {
-    sm: BASE_TOKENS.borders.radius.sm,
-    md: BASE_TOKENS.borders.radius.md,
-    lg: BASE_TOKENS.borders.radius.lg,
-    xl: BASE_TOKENS.borders.radius.xl,
-    full: BASE_TOKENS.borders.radius.full,
-  },
-
   // Icon sizes from spacing
   iconSizes: {
     xs: BASE_TOKENS.spacing.iconSizeSmall,

package/src/theme/core/tokens/BaseTokens.ts

@@ -56,10 +56,6 @@ export type Typography = {
   button: TextStyle;
   caption: TextStyle;
   overline: TextStyle;
-  // Legacy compatibility
-  headingLarge: TextStyle;
-  headingMedium: TextStyle;
-  headingSmall: TextStyle;
   // Font weight helpers (for inline fontWeight usage)
   semibold: '600';
   medium: '500';

package/src/theme/core/tokens/Borders.ts

@@ -6,6 +6,7 @@
 
 import type { ViewStyle } from 'react-native';
 import type { Borders } from './BaseTokens';
+import { DESIGN_CONSTANTS } from '../constants/DesignConstants';
 
 export const borders: Borders = {
   radius: {
@@ -16,7 +17,7 @@ export const borders: Borders = {
     lg: 12,
     xl: 16,
     xxl: 24,
-    full: 9999, // TODO: Use DESIGN_CONSTANTS.FULL_BORDER_RADIUS
+    full: DESIGN_CONSTANTS.FULL_BORDER_RADIUS,
   },
   width: {
     none: 0,
@@ -37,7 +38,7 @@ export const borders: Borders = {
     borderWidth: 1,
   } as ViewStyle,
   pill: {
-    borderRadius: 9999,
+    borderRadius: DESIGN_CONSTANTS.FULL_BORDER_RADIUS,
     borderWidth: 0,
   } as ViewStyle,
 };

package/src/theme/core/tokens/Sizes.ts

@@ -5,6 +5,7 @@
  */
 
 import type { IconSizes, Opacity, AvatarSizes, ComponentSizes } from './BaseTokens';
+import { DESIGN_CONSTANTS } from '../constants/DesignConstants';
 
 export const iconSizes: IconSizes = {
   xs: 16,
@@ -34,7 +35,7 @@ export const avatarSizes: AvatarSizes = {
 };
 
 export const sizes: ComponentSizes = {
-  touchTarget: 44, // TODO: Use DESIGN_CONSTANTS.MINIMUM_TOUCH_TARGET
+  touchTarget: DESIGN_CONSTANTS.MINIMUM_TOUCH_TARGET,
   progressBar: {
     normal: 4,
     thick: 8,

package/src/theme/core/tokens/Typography.ts

@@ -116,25 +116,6 @@ export const typography: Typography = {
     lineHeight: 16,
     letterSpacing: 1.5,
     textTransform: 'uppercase',
-  } as TextStyle,
-    // Legacy compatibility aliases
-  headingLarge: {
-    fontSize: 32,
-    fontWeight: '700',
-    lineHeight: 40,
-    letterSpacing: 0,
-  } as TextStyle,
-  headingMedium: {
-    fontSize: 24,
-    fontWeight: '600',
-    lineHeight: 32,
-    letterSpacing: 0,
-  } as TextStyle,
-  headingSmall: {
-    fontSize: 20,
-    fontWeight: '600',
-    lineHeight: 28,
-    letterSpacing: 0,
   } as TextStyle,
   // Font weight helpers (for inline fontWeight usage)
   semibold: '600' as const,

package/src/theme/hooks/commonStyles/textStyles.ts

@@ -7,13 +7,15 @@ import type { DesignTokens } from '../../types/ThemeTypes';
 
 export const createTextStyles = (tokens: DesignTokens) => ({
   screenTitle: {
-    ...tokens.typography.headingLarge,
+    ...tokens.typography.headlineLarge,
+    fontWeight: tokens.typography.bold,
     color: tokens.colors.textPrimary,
     marginBottom: tokens.spacing.sm,
   } as TextStyle,
 
   sectionTitle: {
-    ...tokens.typography.headingMedium,
+    ...tokens.typography.headlineSmall,
+    fontWeight: tokens.typography.semibold,
     color: tokens.colors.textPrimary,
     marginBottom: tokens.spacing.md,
   } as TextStyle,

package/src/theme/index.ts

@@ -32,7 +32,6 @@ export {
 
 export {
   BASE_TOKENS,
-  BASE_TOKENS as STATIC_TOKENS,
   spacing,
   typography,
   borders,

package/src/theme/infrastructure/providers/DesignSystemProvider.tsx

@@ -3,7 +3,7 @@ import { ActivityIndicator, View, StyleSheet } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { useFonts } from 'expo-font';
 import { SafeAreaProvider, initialWindowMetrics } from '../../../safe-area';
-import { useThemeStore } from '../stores/themeStore';
+import { useTheme } from '../stores/themeStore';
 import { useDesignSystemTheme, type ThemeMode } from '../globalThemeStore';
 import type { CustomThemeColors } from '../../core/CustomColors';
 import { SplashScreen } from '../../../molecules/splash';
@@ -43,9 +43,9 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   const [isInitialized, setIsInitialized] = useState(false);
   const [fontsLoaded, fontError] = fonts ? useFonts(fonts) : [true, null];
 
-  const initialize = useThemeStore((state) => state.initialize);
-  const setCustomColors = useThemeStore((state) => state.setCustomColors);
-  const setDefaultColors = useThemeStore((state) => state.setDefaultColors);
+  const initialize = useTheme((state) => state.initialize);
+  const setCustomColors = useTheme((state) => state.setCustomColors);
+  const setDefaultColors = useTheme((state) => state.setDefaultColors);
   const setGlobalCustomColors = useDesignSystemTheme((state) => state.setCustomColors);
   const setGlobalThemeMode = useDesignSystemTheme((state) => state.setThemeMode);
 

package/src/theme/infrastructure/stores/themeStore.ts

@@ -124,7 +124,5 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
   }),
 });
 
-export const useThemeStore = useTheme;
-
 
 

package/src/molecules/bottom-sheet/SafeBottomSheetModalProvider.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-
-/**
- * SafeBottomSheetModalProvider
- * A wrapper provider that was previously used for bottom sheet modals.
- * Currently serves as a pass-through to maintain compatibility with other packages.
- */
-export const SafeBottomSheetModalProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return <>{children}</>;
-};