@umituz/react-native-design-system 2.6.34 → 2.6.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.34",
+  "version": "2.6.38",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -51,7 +51,6 @@
   "peerDependencies": {
     "@expo/vector-icons": ">=15.0.0",
     "@gorhom/bottom-sheet": ">=5.0.0",
-    "@react-native-async-storage/async-storage": ">=2.0.0",
     "@react-native-community/datetimepicker": ">=8.0.0",
     "@react-navigation/bottom-tabs": ">=7.0.0",
     "@react-navigation/native": ">=7.0.0",
@@ -98,7 +97,6 @@
     "@eslint/js": "^9.39.2",
     "@expo/vector-icons": "^15.0.0",
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-community/datetimepicker": "^8.5.1",
     "@react-navigation/bottom-tabs": "^7.9.0",
     "@react-navigation/native": "^7.1.26",
@@ -113,7 +111,7 @@
     "@umituz/react-native-filesystem": "^2.1.7",
     "@umituz/react-native-haptics": "^1.0.2",
     "@umituz/react-native-localization": "^3.5.34",
-    "@umituz/react-native-storage": "latest",
+    "@umituz/react-native-storage": "^2.6.20",
     "@umituz/react-native-uuid": "*",
     "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",

package/src/atoms/AtomicInput.tsx

@@ -43,7 +43,15 @@ export interface AtomicInputProps {
   /** Show character counter */
   showCharacterCount?: boolean;
   /** Keyboard type */
-  keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'url' | 'number-pad' | 'decimal-pad';
+  keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'url' | 'number-pad' | 'decimal-pad' | 'web-search' | 'twitter' | 'numeric' | 'visible-password';
+  /** Return key type */
+  returnKeyType?: 'done' | 'go' | 'next' | 'search' | 'send';
+  /** Callback when submit button is pressed */
+  onSubmitEditing?: () => void;
+  /** Blur on submit */
+  blurOnSubmit?: boolean;
+  /** Auto focus */
+  autoFocus?: boolean;
   /** Auto-capitalize */
   autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
   /** Auto-correct */
@@ -78,7 +86,7 @@ export interface AtomicInputProps {
  * - Responsive sizing
  * - Full accessibility support
  */
-export const AtomicInput: React.FC<AtomicInputProps> = ({
+export const AtomicInput = React.forwardRef<TextInput, AtomicInputProps>(({
   variant = 'outlined',
   state = 'default',
   size = 'md',
@@ -95,6 +103,10 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
   maxLength,
   showCharacterCount = false,
   keyboardType = 'default',
+  returnKeyType,
+  onSubmitEditing,
+  blurOnSubmit,
+  autoFocus,
   autoCapitalize = 'sentences',
   autoCorrect = true,
   disabled = false,
@@ -105,7 +117,7 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
   onFocus,
   multiline = false,
   numberOfLines,
-}) => {
+}, ref) => {
   const tokens = useAppDesignTokens();
 
   const {
@@ -198,6 +210,7 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
         )}
 
         <TextInput
+          ref={ref}
           value={localValue}
           onChangeText={handleTextChange}
           placeholder={placeholder}
@@ -205,6 +218,10 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
           secureTextEntry={secureTextEntry && !isPasswordVisible}
           maxLength={maxLength}
           keyboardType={keyboardType}
+          returnKeyType={returnKeyType}
+          onSubmitEditing={onSubmitEditing}
+          blurOnSubmit={blurOnSubmit}
+          autoFocus={autoFocus}
           autoCapitalize={autoCapitalize}
           autoCorrect={autoCorrect}
           editable={!isDisabled}
@@ -274,7 +291,7 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
       )}
     </View>
   );
-};
+});
 
 const styles = StyleSheet.create({
   container: {

package/src/atoms/AtomicKeyboardAvoidingView.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  type KeyboardAvoidingViewProps,
+} from 'react-native';
+
+export interface AtomicKeyboardAvoidingViewProps extends KeyboardAvoidingViewProps {
+  /**
+   * Optional offset to adjust the position of the content.
+   * On iOS, this is often necessary to account for headers, tabs, etc.
+   */
+  offset?: number;
+}
+
+/**
+ * AtomicKeyboardAvoidingView - A consistent wrapper for React Native's KeyboardAvoidingView
+ * 
+ * Provides sensible defaults and OS-specific behaviors:
+ * - iOS: behavior="padding"
+ * - Android: behavior=undefined (handled by windowSoftInputMode="adjustResize")
+ */
+export const AtomicKeyboardAvoidingView: React.FC<AtomicKeyboardAvoidingViewProps> = ({
+  children,
+  behavior,
+  style,
+  offset = 0,
+  ...props
+}) => {
+  const defaultBehavior = Platform.OS === 'ios' ? 'padding' : undefined;
+
+  return (
+    <KeyboardAvoidingView
+      behavior={behavior ?? defaultBehavior}
+      style={[styles.container, style]}
+      keyboardVerticalOffset={offset}
+      {...props}
+    >
+      {children}
+    </KeyboardAvoidingView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/atoms/AtomicTextArea.tsx

@@ -1,32 +1,52 @@
-/**
- * AtomicTextArea - Multiline Text Input Component
- *
- * Atomic Design Level: ATOM
- * Purpose: Multiline text input across all apps
- */
-
-import React from 'react';
-import { View, TextInput, StyleSheet, ViewStyle } from 'react-native';
+import React, { forwardRef } from 'react';
+import { View, TextInput, StyleSheet, type ViewStyle, type StyleProp, type TextStyle } from 'react-native';
 import { useAppDesignTokens } from '../theme';
 import { AtomicText } from './AtomicText';
 
 export interface AtomicTextAreaProps {
+  /** Text area label */
   label?: string;
+  /** Current value */
   value?: string;
+  /** Value change callback */
   onChangeText?: (text: string) => void;
+  /** Placeholder text */
   placeholder?: string;
+  /** Helper text below input */
   helperText?: string;
+  /** Error message to display */
   errorText?: string;
+  /** Maximum character length */
   maxLength?: number;
+  /** Number of lines (default: 4) */
   numberOfLines?: number;
+  /** Alternative to numberOfLines */
   rows?: number;
+  /** Minimum height override */
   minHeight?: number;
+  /** Disabled state */
   disabled?: boolean;
-  style?: ViewStyle;
+  /** Container style */
+  style?: StyleProp<ViewStyle>;
+  /** Input text style */
+  inputStyle?: StyleProp<TextStyle>;
+  /** Auto focus */
+  autoFocus?: boolean;
+  /** Return key type */
+  returnKeyType?: 'done' | 'go' | 'next' | 'search' | 'send';
+  /** Callback when submit button is pressed */
+  onSubmitEditing?: () => void;
+  /** Blur on submit */
+  blurOnSubmit?: boolean;
+  /** Test ID */
   testID?: string;
 }
 
-export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
+/**
+ * AtomicTextArea - Multiline Text Input Component
+ * Consistent with AtomicInput but optimized for multiline usage.
+ */
+export const AtomicTextArea = forwardRef<TextInput, AtomicTextAreaProps>(({
   label,
   value,
   onChangeText,
@@ -39,8 +59,13 @@ export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
   minHeight,
   disabled = false,
   style,
+  inputStyle,
+  autoFocus,
+  returnKeyType,
+  onSubmitEditing,
+  blurOnSubmit,
   testID,
-}) => {
+}, ref) => {
   const lineCount = numberOfLines ?? rows;
   const calculatedMinHeight = minHeight ?? lineCount * 24;
   const tokens = useAppDesignTokens();
@@ -51,20 +76,26 @@ export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
       {label && (
         <AtomicText
           type="labelMedium"
-          style={[styles.label, { color: tokens.colors.textSecondary }]}
+          color={hasError ? 'error' : 'secondary'}
+          style={styles.label}
         >
           {label}
         </AtomicText>
       )}
       <TextInput
+        ref={ref}
         value={value}
         onChangeText={onChangeText}
         placeholder={placeholder}
-        placeholderTextColor={tokens.colors.textTertiary}
+        placeholderTextColor={tokens.colors.textSecondary}
         maxLength={maxLength}
         numberOfLines={lineCount}
         multiline
         editable={!disabled}
+        autoFocus={autoFocus}
+        returnKeyType={returnKeyType}
+        onSubmitEditing={onSubmitEditing}
+        blurOnSubmit={blurOnSubmit}
         textAlignVertical="top"
         style={[
           styles.input,
@@ -73,39 +104,57 @@ export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
             borderColor: hasError ? tokens.colors.error : tokens.colors.border,
             color: tokens.colors.textPrimary,
             minHeight: calculatedMinHeight,
+            padding: tokens.spacing.md,
+            borderRadius: tokens.borderRadius.md,
+            fontSize: 16,
           },
+          inputStyle,
           disabled && { opacity: 0.5 },
         ]}
       />
       {(helperText || errorText) && (
-        <AtomicText
-          type="bodySmall"
-          style={[
-            styles.helperText,
-            { color: hasError ? tokens.colors.error : tokens.colors.textSecondary },
-          ]}
-        >
-          {errorText || helperText}
-        </AtomicText>
+        <View style={styles.helperRow}>
+          <AtomicText
+            type="bodySmall"
+            color={hasError ? 'error' : 'secondary'}
+            style={styles.helperText}
+          >
+            {errorText || helperText}
+          </AtomicText>
+          {maxLength && value !== undefined && (
+            <AtomicText
+              type="labelSmall"
+              color="secondary"
+              style={styles.characterCount}
+            >
+              {value.length}/{maxLength}
+            </AtomicText>
+          )}
+        </View>
       )}
     </View>
   );
-};
+});
 
 const styles = StyleSheet.create({
   container: {
-    marginBottom: 16,
+    width: '100%',
   },
   label: {
     marginBottom: 8,
   },
   input: {
     borderWidth: 1,
-    borderRadius: 12,
-    padding: 12,
-    fontSize: 16,
   },
-  helperText: {
+  helperRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
     marginTop: 4,
   },
+  helperText: {
+    flex: 1,
+  },
+  characterCount: {
+    marginLeft: 8,
+  },
 });

package/src/atoms/index.ts

@@ -111,3 +111,6 @@ export { AtomicTouchable, type AtomicTouchableProps } from './AtomicTouchable';
 
 // StatusBar
 export { AtomicStatusBar, type AtomicStatusBarProps } from './status-bar';
+
+// Keyboard Avoiding
+export { AtomicKeyboardAvoidingView, type AtomicKeyboardAvoidingViewProps } from './AtomicKeyboardAvoidingView';

package/src/device/infrastructure/services/PersistentDeviceIdService.ts

@@ -9,7 +9,7 @@
  * @layer infrastructure/services
  */
 
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import { storageRepository, unwrap } from '@umituz/react-native-storage';
 import { DeviceIdService } from './DeviceIdService';
 
 const STORAGE_KEY = '@device/persistent_id';
@@ -64,7 +64,8 @@ export class PersistentDeviceIdService {
    */
   private static async initializeDeviceId(): Promise<string> {
     try {
-      const storedId = await AsyncStorage.getItem(STORAGE_KEY);
+      const result = await storageRepository.getString(STORAGE_KEY, '');
+      const storedId = unwrap(result, '');
 
       if (storedId) {
         cachedDeviceId = storedId;
@@ -72,7 +73,7 @@ export class PersistentDeviceIdService {
       }
 
       const newId = await this.createNewDeviceId();
-      await AsyncStorage.setItem(STORAGE_KEY, newId);
+      await storageRepository.setString(STORAGE_KEY, newId);
       cachedDeviceId = newId;
 
       return newId;
@@ -101,8 +102,7 @@ export class PersistentDeviceIdService {
    */
   static async hasStoredId(): Promise<boolean> {
     try {
-      const storedId = await AsyncStorage.getItem(STORAGE_KEY);
-      return storedId !== null;
+      return await storageRepository.hasItem(STORAGE_KEY);
     } catch {
       return false;
     }
@@ -114,7 +114,7 @@ export class PersistentDeviceIdService {
    */
   static async clearStoredId(): Promise<void> {
     try {
-      await AsyncStorage.removeItem(STORAGE_KEY);
+      await storageRepository.removeItem(STORAGE_KEY);
       cachedDeviceId = null;
       initializationPromise = null;
     } catch {

package/src/layouts/FormLayout/FormLayout.tsx

@@ -6,9 +6,10 @@
  */
 
 import React, { useMemo } from 'react';
-import { View, ScrollView, KeyboardAvoidingView, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { View, ScrollView, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
 import { useResponsive } from '../../responsive';
+import { AtomicKeyboardAvoidingView } from '../../atoms';
 
 export interface FormLayoutProps {
   /** Form fields and content */
@@ -103,9 +104,9 @@ export const FormLayout: React.FC<FormLayoutProps> = ({
   const mainContent = disableKeyboardAvoid ? (
     scrollableContent
   ) : (
-    <KeyboardAvoidingView style={styles.container} behavior="padding">
+    <AtomicKeyboardAvoidingView style={styles.container}>
       {scrollableContent}
-    </KeyboardAvoidingView>
+    </AtomicKeyboardAvoidingView>
   );
 
   return (

package/src/layouts/ScreenLayout/ScreenLayout.tsx

@@ -24,10 +24,11 @@
  */
 
 import React, { useMemo } from 'react';
-import { View, ScrollView, StyleSheet, KeyboardAvoidingView, type ViewStyle, type RefreshControlProps } from 'react-native';
+import { View, ScrollView, StyleSheet, type ViewStyle, type RefreshControlProps } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets, type Edge } from '../../safe-area';
 import { useAppDesignTokens } from '../../theme';
 import { getScreenLayoutConfig } from '../../responsive/responsiveLayout';
+import { AtomicKeyboardAvoidingView } from '../../atoms';
 
 /**
  * NOTE: This component now works in conjunction with the SafeAreaProvider
@@ -206,12 +207,11 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
   const ContentWrapper: React.FC<{ children: React.ReactNode }> = ({ children: wrapperChildren }) => {
     if (keyboardAvoiding) {
       return (
-        <KeyboardAvoidingView
+        <AtomicKeyboardAvoidingView
           style={styles.keyboardAvoidingView}
-          behavior="padding"
         >
           {wrapperChildren}
-        </KeyboardAvoidingView>
+        </AtomicKeyboardAvoidingView>
       );
     }
     return <>{wrapperChildren}</>;

package/src/molecules/calendar/infrastructure/storage/CalendarStore.ts

@@ -13,7 +13,7 @@
 
 import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import { storageRepository, unwrap, storageService } from '@umituz/react-native-storage';
 import type { CalendarEvent, CreateCalendarEventRequest, UpdateCalendarEventRequest } from '../../domain/entities/CalendarEvent.entity';
 import { CalendarService } from '../services/CalendarService';
 
@@ -101,16 +101,17 @@ export const useCalendarStore = create<CalendarState & { actions: CalendarAction
         loadEvents: async () => {
           set({ isLoading: true, error: null });
           try {
-            const stored = await AsyncStorage.getItem(STORAGE_KEY);
-            if (stored) {
-              const parsed = JSON.parse(stored) as CalendarEvent[];
+            const result = await storageRepository.getItem<CalendarEvent[]>(STORAGE_KEY, []);
+            const events = unwrap(result, []);
+            
+            if (events && events.length > 0) {
               // Restore Date objects
-              const events = parsed.map((event) => ({
+              const hydratedEvents = events.map((event) => ({
                 ...event,
                 createdAt: new Date(event.createdAt),
                 updatedAt: new Date(event.updatedAt),
               }));
-              set({ events, isLoading: false });
+              set({ events: hydratedEvents, isLoading: false });
             } else {
               set({ isLoading: false });
             }
@@ -137,7 +138,7 @@ export const useCalendarStore = create<CalendarState & { actions: CalendarAction
             };
 
             const events = [...get().events, newEvent];
-            await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(events));
+            await storageRepository.setItem(STORAGE_KEY, events);
             set({ events, isLoading: false });
           } catch {
             set({
@@ -164,7 +165,7 @@ export const useCalendarStore = create<CalendarState & { actions: CalendarAction
               return event;
             });
 
-            await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(events));
+            await storageRepository.setItem(STORAGE_KEY, events);
             set({ events, isLoading: false });
           } catch {
             set({
@@ -181,7 +182,7 @@ export const useCalendarStore = create<CalendarState & { actions: CalendarAction
           set({ isLoading: true, error: null });
           try {
             const events = get().events.filter((event) => event.id !== id);
-            await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(events));
+            await storageRepository.setItem(STORAGE_KEY, events);
             set({ events, isLoading: false });
           } catch {
             set({
@@ -294,7 +295,7 @@ export const useCalendarStore = create<CalendarState & { actions: CalendarAction
         clearAllEvents: async () => {
           set({ isLoading: true, error: null });
           try {
-            await AsyncStorage.removeItem(STORAGE_KEY);
+            await storageRepository.removeItem(STORAGE_KEY);
             set({ events: [], isLoading: false });
           } catch {
             set({
@@ -307,7 +308,7 @@ export const useCalendarStore = create<CalendarState & { actions: CalendarAction
     }),
     {
       name: 'calendar-storage',
-      storage: createJSONStorage(() => AsyncStorage),
+      storage: createJSONStorage(() => storageService),
       partialize: (state) => ({ events: state.events }),
     }
   )

package/src/theme/infrastructure/storage/ThemeStorage.ts

@@ -6,7 +6,7 @@
  * Apps should use this for theme persistence.
  */
 
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import { storageRepository, unwrap } from '@umituz/react-native-storage';
 import type { ThemeMode } from '../../core/ColorPalette';
 import { DESIGN_CONSTANTS } from '../../core/constants/DesignConstants';
 
@@ -18,7 +18,9 @@ export class ThemeStorage {
    */
   static async getThemeMode(): Promise<ThemeMode | null> {
     try {
-      const value = await AsyncStorage.getItem(STORAGE_KEY);
+      const result = await storageRepository.getString(STORAGE_KEY, '');
+      const value = unwrap(result, '');
+      
       if (!value) {
         return null;
       }
@@ -45,7 +47,7 @@ export class ThemeStorage {
         throw new Error(`Invalid theme mode: ${mode}`);
       }
 
-      await AsyncStorage.setItem(STORAGE_KEY, mode);
+      await storageRepository.setString(STORAGE_KEY, mode);
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : 'Unknown error';
       // Re-throw validation errors but swallow storage errors to prevent app crashes
@@ -60,7 +62,7 @@ export class ThemeStorage {
    */
   static async clearThemeMode(): Promise<void> {
     try {
-      await AsyncStorage.removeItem(STORAGE_KEY);
+      await storageRepository.removeItem(STORAGE_KEY);
     } catch {
       // Don't throw - clearing storage is not critical
     }