@umituz/react-native-design-system 2.5.9 → 2.5.11

package/README.md

@@ -23,7 +23,7 @@ npm install @umituz/react-native-design-system
 ### Peer Dependencies
 
 ```bash
-npm install react@18.3.1 react-native@0.76.3 react-native-reanimated@~3.10.1 react-native-svg@^15.0.0 lucide-react-native@^0.468.0
+npm install react@18.3.1 react-native@0.76.3 react-native-reanimated@~3.10.1 react-native-svg@^15.0.0
 ```
 
 > **v1.3.0 Breaking Change**: React Native Paper dependency removed! All components now use pure React Native implementation for lighter bundle size and full control over styling.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.5.9",
+  "version": "2.5.11",
   "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",
@@ -59,6 +59,7 @@
     "@umituz/react-native-filesystem": "*",
     "@umituz/react-native-haptics": "*",
     "@umituz/react-native-localization": "*",
+    "@umituz/react-native-storage": "*",
     "@umituz/react-native-uuid": "*",
     "expo-application": ">=5.0.0",
     "expo-clipboard": ">=8.0.0",
@@ -112,6 +113,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-uuid": "*",
     "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",

package/src/atoms/AtomicButton.tsx

@@ -41,9 +41,6 @@ export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
 
   const handlePress = () => {
     if (!disabled) {
-      if (__DEV__) {
-        console.log('[AtomicButton] Button pressed:', { title, variant, disabled });
-      }
       onPress();
     }
   };
@@ -115,7 +112,7 @@ export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
         return {
           container: {
             ...baseStyle,
-            backgroundColor: 'transparent',
+            backgroundColor: undefined,
             borderWidth: 1,
             borderColor: tokens.colors.border,
           },
@@ -129,7 +126,7 @@ export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
         return {
           container: {
             ...baseStyle,
-            backgroundColor: 'transparent',
+            backgroundColor: undefined,
           },
           text: {
             ...baseTextStyle,

package/src/atoms/AtomicChip.tsx

@@ -108,37 +108,37 @@ export const AtomicChip: React.FC<AtomicChipProps> = React.memo(({
 
   const sizeConfig = sizeMap[size];
 
-  // Color mapping
+  // Color mapping - using undefined for transparent backgrounds
   const colorMap = {
     primary: {
       filled: { bg: tokens.colors.primary, text: tokens.colors.onPrimary, border: tokens.colors.primary },
-      outlined: { bg: 'transparent', text: tokens.colors.primary, border: tokens.colors.primary },
-      soft: { bg: tokens.colors.primaryContainer, text: tokens.colors.onPrimaryContainer, border: 'transparent' },
+      outlined: { bg: undefined, text: tokens.colors.primary, border: tokens.colors.primary },
+      soft: { bg: tokens.colors.primaryContainer, text: tokens.colors.onPrimaryContainer, border: undefined },
     },
     secondary: {
       filled: { bg: tokens.colors.secondary, text: tokens.colors.onSecondary, border: tokens.colors.secondary },
-      outlined: { bg: 'transparent', text: tokens.colors.secondary, border: tokens.colors.secondary },
-      soft: { bg: tokens.colors.secondaryContainer, text: tokens.colors.onSecondaryContainer, border: 'transparent' },
+      outlined: { bg: undefined, text: tokens.colors.secondary, border: tokens.colors.secondary },
+      soft: { bg: tokens.colors.secondaryContainer, text: tokens.colors.onSecondaryContainer, border: undefined },
     },
     success: {
       filled: { bg: tokens.colors.success, text: tokens.colors.onSuccess, border: tokens.colors.success },
-      outlined: { bg: 'transparent', text: tokens.colors.success, border: tokens.colors.success },
-      soft: { bg: tokens.colors.successContainer, text: tokens.colors.onSuccessContainer, border: 'transparent' },
+      outlined: { bg: undefined, text: tokens.colors.success, border: tokens.colors.success },
+      soft: { bg: tokens.colors.successContainer, text: tokens.colors.onSuccessContainer, border: undefined },
     },
     warning: {
       filled: { bg: tokens.colors.warning, text: tokens.colors.onWarning, border: tokens.colors.warning },
-      outlined: { bg: 'transparent', text: tokens.colors.warning, border: tokens.colors.warning },
-      soft: { bg: tokens.colors.warningContainer, text: tokens.colors.onWarningContainer, border: 'transparent' },
+      outlined: { bg: undefined, text: tokens.colors.warning, border: tokens.colors.warning },
+      soft: { bg: tokens.colors.warningContainer, text: tokens.colors.onWarningContainer, border: undefined },
     },
     error: {
       filled: { bg: tokens.colors.error, text: tokens.colors.onError, border: tokens.colors.error },
-      outlined: { bg: 'transparent', text: tokens.colors.error, border: tokens.colors.error },
-      soft: { bg: tokens.colors.errorContainer, text: tokens.colors.onErrorContainer, border: 'transparent' },
+      outlined: { bg: undefined, text: tokens.colors.error, border: tokens.colors.error },
+      soft: { bg: tokens.colors.errorContainer, text: tokens.colors.onErrorContainer, border: undefined },
     },
     info: {
       filled: { bg: tokens.colors.info, text: tokens.colors.onInfo, border: tokens.colors.info },
-      outlined: { bg: 'transparent', text: tokens.colors.info, border: tokens.colors.info },
-      soft: { bg: tokens.colors.infoContainer, text: tokens.colors.onInfoContainer, border: 'transparent' },
+      outlined: { bg: undefined, text: tokens.colors.info, border: tokens.colors.info },
+      soft: { bg: tokens.colors.infoContainer, text: tokens.colors.onInfoContainer, border: undefined },
     },
   };
 

package/src/atoms/AtomicIcon.tsx

@@ -122,17 +122,10 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(({
       ? getSemanticColor(color, tokens)
       : tokens.colors.textPrimary;
 
-  // Validate icon
+  // Validate icon - use fallback silently if invalid
   const isValidIcon = name in Ionicons.glyphMap;
   const iconName = isValidIcon ? name : FALLBACK_ICON;
 
-  if (__DEV__ && !isValidIcon) {
-    console.warn(
-      `[AtomicIcon] Invalid icon name: "${name}". Using fallback icon "${FALLBACK_ICON}". ` +
-      `Available icons: https://icons.expo.fyi/`
-    );
-  }
-
   const iconElement = (
     <Ionicons
       name={iconName as keyof typeof Ionicons.glyphMap}

package/src/atoms/AtomicPicker.tsx

@@ -73,7 +73,7 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
   onChange,
   options,
   label,
-  placeholder = 'Select...',
+  placeholder,
   error,
   disabled = false,
   multiple = false,
@@ -82,9 +82,10 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
   autoClose = true,
   size = 'md',
   modalTitle,
-  emptyMessage = 'No options available',
-  clearAccessibilityLabel = 'Clear selection',
-  closeAccessibilityLabel = 'Close picker',
+  emptyMessage,
+  searchPlaceholder,
+  clearAccessibilityLabel,
+  closeAccessibilityLabel,
   style,
   labelStyle,
   testID,
@@ -294,7 +295,7 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
         filteredOptions={filteredOptions}
         multiple={multiple}
         emptyMessage={emptyMessage}
-        searchPlaceholder="Search..."
+        searchPlaceholder={searchPlaceholder}
         closeAccessibilityLabel={closeAccessibilityLabel}
         testID={testID}
       />

package/src/atoms/__tests__/AtomicIcon.test.tsx

@@ -18,12 +18,6 @@ jest.mock('@umituz/react-native-design-system-theme', () => ({
   }),
 }));
 
-// Mock Lucide icons
-jest.mock('lucide-react-native', () => ({
-  Settings: () => 'Settings-Icon',
-  Heart: () => 'Heart-Icon',
-}));
-
 describe('AtomicIcon', () => {
   it('renders with default props', () => {
     const { getByTestId } = render(

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

@@ -35,17 +35,11 @@ export const useInputState = ({
   const [isPasswordVisible, setIsPasswordVisible] = useState(!secureTextEntry);
 
   const handleTextChange = useCallback((text: string) => {
-    if (__DEV__) {
-      console.log('[useInputState] Text changed:', { text, length: text.length });
-    }
     setLocalValue(text);
     onChangeText?.(text);
   }, [onChangeText]);
 
   const togglePasswordVisibility = useCallback(() => {
-    if (__DEV__) {
-      console.log('[useInputState] Password visibility toggled');
-    }
     setIsPasswordVisible((prev) => !prev);
   }, []);
 

package/src/atoms/picker/components/PickerModal.tsx

@@ -38,6 +38,12 @@ import {
   getEmptyStateTextStyles,
 } from '../styles/pickerStyles';
 
+/**
+ * PickerModalProps
+ *
+ * IMPORTANT: String props are REQUIRED for proper i18n support.
+ * Pass translated strings from your app's i18n system.
+ */
 interface PickerModalProps {
   visible: boolean;
   onClose: () => void;
@@ -50,9 +56,12 @@ interface PickerModalProps {
   onSearchChange: (query: string) => void;
   filteredOptions: PickerOption[];
   multiple?: boolean;
-  emptyMessage?: string;
-  searchPlaceholder?: string;
-  closeAccessibilityLabel?: string;
+  /** Empty state message - REQUIRED for i18n */
+  emptyMessage: string;
+  /** Search placeholder - REQUIRED for i18n */
+  searchPlaceholder: string;
+  /** Close accessibility label - REQUIRED for i18n */
+  closeAccessibilityLabel: string;
   testID?: string;
 }
 
@@ -66,9 +75,9 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
   searchQuery,
   onSearchChange,
   filteredOptions,
-  emptyMessage = 'No options available',
-  searchPlaceholder = 'Search...',
-  closeAccessibilityLabel = 'Close picker',
+  emptyMessage,
+  searchPlaceholder,
+  closeAccessibilityLabel,
   testID,
 }) => {
   const tokens = useAppDesignTokens();

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

@@ -18,12 +18,20 @@ export interface PickerOption {
 
 export type PickerSize = 'sm' | 'md' | 'lg';
 
+/**
+ * AtomicPickerProps
+ *
+ * IMPORTANT: String props (placeholder, emptyMessage, etc.) are REQUIRED
+ * for proper i18n support. Pass translated strings from your app's i18n system.
+ * Do NOT rely on default English values.
+ */
 export interface AtomicPickerProps {
   value: string | string[];
   onChange: (value: string | string[]) => void;
   options: PickerOption[];
   label?: string;
-  placeholder?: string;
+  /** Placeholder text - REQUIRED for i18n, pass translated string */
+  placeholder: string;
   error?: string;
   disabled?: boolean;
   multiple?: boolean;
@@ -33,9 +41,14 @@ export interface AtomicPickerProps {
   color?: IconColor;
   size?: PickerSize;
   modalTitle?: string;
-  emptyMessage?: string;
-  clearAccessibilityLabel?: string;
-  closeAccessibilityLabel?: string;
+  /** Empty state message - REQUIRED for i18n, pass translated string */
+  emptyMessage: string;
+  /** Search placeholder text - REQUIRED for i18n, pass translated string */
+  searchPlaceholder: string;
+  /** Clear button accessibility label - REQUIRED for i18n, pass translated string */
+  clearAccessibilityLabel: string;
+  /** Close button accessibility label - REQUIRED for i18n, pass translated string */
+  closeAccessibilityLabel: string;
   style?: ViewStyle | ViewStyle[];
   labelStyle?: TextStyle | TextStyle[];
   testID?: string;

package/src/device/detection/deviceDetection.ts

@@ -13,20 +13,15 @@ import { validateScreenDimensions } from '../../responsive/validation';
  * Helper function for device detection with fallback
  * @param operation - Operation to perform
  * @param fallback - Fallback value if operation fails
- * @param warningMessage - Warning message for __DEV__
  * @returns Operation result or fallback
  */
 const withDeviceDetectionFallback = <T>(
   operation: () => T,
-  fallback: T,
-  warningMessage: string
+  fallback: T
 ): T => {
   try {
     return operation();
   } catch {
-    if (__DEV__) {
-      console.warn(`[DeviceDetection] ${warningMessage}`);
-    }
     return fallback;
   }
 };
@@ -53,9 +48,6 @@ export const getScreenDimensions = () => {
     validateScreenDimensions(width, height);
     return { width, height };
   } catch {
-    if (__DEV__) {
-      console.warn('[getScreenDimensions] Invalid screen dimensions detected, using fallback values');
-    }
     // Fallback to safe default dimensions
     return { width: 414, height: 896 };
   }
@@ -71,8 +63,7 @@ export const isSmallPhone = (): boolean => {
       const { width } = getScreenDimensions();
       return width <= DEVICE_BREAKPOINTS.SMALL_PHONE;
     },
-    false,
-    'Error detecting device type, assuming standard phone'
+    false
   );
 };
 
@@ -86,8 +77,7 @@ export const isTablet = (): boolean => {
       const { width } = getScreenDimensions();
       return width >= DEVICE_BREAKPOINTS.SMALL_TABLET;
     },
-    false,
-    'Error detecting device type, assuming phone'
+    false
   );
 };
 
@@ -101,8 +91,7 @@ export const isLandscape = (): boolean => {
       const { width, height } = getScreenDimensions();
       return width > height;
     },
-    false,
-    'Error detecting orientation, assuming portrait'
+    false
   );
 };
 
@@ -125,15 +114,14 @@ export const getDeviceType = (): DeviceType => {
 
       return DeviceType.TABLET;
     },
-    DeviceType.MEDIUM_PHONE,
-    'Error detecting device type, assuming medium phone'
+    DeviceType.MEDIUM_PHONE
   );
 };
 
 /**
  * Responsive spacing multiplier
  * Returns a multiplier for spacing based on device size
- * 
+ *
  * @returns Spacing multiplier (0.9-1.2)
  */
 export const getSpacingMultiplier = (): number => {
@@ -149,7 +137,6 @@ export const getSpacingMultiplier = (): number => {
 
       return LAYOUT_CONSTANTS.SPACING_MULTIPLIER_STANDARD;
     },
-    LAYOUT_CONSTANTS.SPACING_MULTIPLIER_STANDARD,
-    'Error calculating spacing multiplier, using fallback'
+    LAYOUT_CONSTANTS.SPACING_MULTIPLIER_STANDARD
   );
 };

package/src/layouts/ScreenHeader/ScreenHeader.tsx

@@ -74,9 +74,8 @@ const ScreenHeaderBackButton: React.FC<{
   const handleBackPress = React.useCallback(() => {
     if (onBackPress) {
       onBackPress();
-    } else if (__DEV__) {
-      console.warn('ScreenHeader: onBackPress is required when back button is visible');
     }
+    // If no onBackPress provided, do nothing silently
   }, [onBackPress]);
 
   if (hideBackButton) return null;

package/src/molecules/alerts/AlertToast.tsx

@@ -48,7 +48,7 @@ export function AlertToast({ alert }: AlertToastProps) {
                 return { backgroundColor: tokens.colors.backgroundPrimary };
             case 'secondary':
                 return {
-                    backgroundColor: 'transparent',
+                    backgroundColor: undefined,
                     borderWidth: 1,
                     borderColor: tokens.colors.textInverse,
                 };

package/src/molecules/animation/presentation/hooks/useFireworks.ts

@@ -38,9 +38,7 @@ export const useFireworks = (config: FireworksConfig) => {
   } = config;
 
   if (!colors || colors.length === 0) {
-    if (__DEV__) {
-      console.warn('useFireworks: colors array is required and cannot be empty');
-    }
+    // Return no-op when colors not provided
     return { particles: [], trigger: () => { }, isActive: false };
   }
 

package/src/molecules/animation/presentation/providers/AnimationThemeProvider.tsx

@@ -50,9 +50,7 @@ export const AnimationThemeProvider: React.FC<AnimationThemeProviderProps> = ({
 export const useAnimationTheme = (): ThemeContext => {
   const context = useContext(ThemeContext);
   if (!context) {
-    if (__DEV__) {
-      console.warn('useAnimationTheme must be used within AnimationThemeProvider');
-    }
+    // Return default theme if used outside provider
     return {
       theme: DEFAULT_ANIMATION_THEME,
       setTheme: () => {},

package/src/molecules/avatar/Avatar.tsx

@@ -129,7 +129,7 @@ export const Avatar: React.FC<AvatarProps> = ({
             styles.initials,
             {
               fontSize: config.fontSize,
-              color: '#FFFFFF',
+              color: tokens.colors.textInverse,
             },
           ]}
         >
@@ -143,7 +143,7 @@ export const Avatar: React.FC<AvatarProps> = ({
       <AtomicIcon
         name={icon}
         customSize={config.iconSize}
-        customColor="#FFFFFF"
+        customColor={tokens.colors.textInverse}
       />
     );
   };

package/src/molecules/bottom-sheet/components/BottomSheetModal.tsx

@@ -1,5 +1,3 @@
-declare const __DEV__: boolean;
-
 import React, { forwardRef, useCallback, useMemo, useImperativeHandle, useRef } from 'react';
 import { StyleSheet } from 'react-native';
 import {
@@ -78,10 +76,6 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
 
   useImperativeHandle(ref, () => ({
     present: () => {
-      if (__DEV__) {
-        console.log('[BottomSheetModal] present() called');
-        console.log('[BottomSheetModal] modalRef.current:', modalRef.current);
-      }
       modalRef.current?.present();
     },
     dismiss: () => modalRef.current?.dismiss(),