@umituz/react-native-design-system 2.3.0 → 2.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "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",
@@ -18,6 +18,7 @@
     "./typography": "./src/typography/index.ts",
     "./responsive": "./src/responsive/index.ts",
     "./safe-area": "./src/safe-area/index.ts",
+    "./device": "./src/device/index.ts",
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -60,7 +61,9 @@
     "react-native-reanimated": ">=3.16.0",
     "react-native-safe-area-context": ">=5.0.0",
     "react-native-svg": ">=15.0.0",
-    "zustand": ">=5.0.0"
+    "zustand": ">=5.0.0",
+    "expo-device": ">=5.0.0",
+    "expo-application": ">=5.0.0"
   },
   "peerDependenciesMeta": {
     "expo-linear-gradient": {
@@ -71,6 +74,12 @@
     },
     "@gorhom/bottom-sheet": {
       "optional": true
+    },
+    "expo-device": {
+      "optional": true
+    },
+    "expo-application": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -95,7 +104,10 @@
     "react-native-safe-area-context": "^5.6.0",
     "react-native-svg": "15.12.1",
     "typescript": "~5.9.2",
-    "zustand": "^5.0.2"
+    "zustand": "^5.0.2",
+    "expo-device": "~7.0.2",
+    "expo-application": "~5.9.1",
+    "expo-localization": "~16.0.1"
   },
   "publishConfig": {
     "access": "public"
@@ -105,4 +117,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/atoms/AtomicBadge.tsx

@@ -0,0 +1,121 @@
+/**
+ * AtomicBadge Component
+ * Reusable badge for labels, status indicators, and tags
+ */
+
+import React from "react";
+import { View, StyleSheet, type StyleProp, type ViewStyle, type TextStyle } from "react-native";
+import { AtomicText } from "./AtomicText";
+import { AtomicIcon, type IconName } from "./AtomicIcon";
+import { useAppDesignTokens } from "../theme";
+
+export type BadgeVariant = "primary" | "secondary" | "success" | "warning" | "error" | "info";
+export type BadgeSize = "sm" | "md" | "lg";
+
+export interface AtomicBadgeProps {
+    /** Badge text content */
+    text: string;
+    /** Visual variant */
+    variant?: BadgeVariant;
+    /** Size preset */
+    size?: BadgeSize;
+    /** Optional icon name (Ionicons) */
+    icon?: IconName;
+    /** Icon position */
+    iconPosition?: "left" | "right";
+    /** Custom container style */
+    style?: StyleProp<ViewStyle>;
+    /** Custom text style */
+    textStyle?: StyleProp<TextStyle>;
+    /** Test ID for testing */
+    testID?: string;
+}
+
+const SIZE_CONFIG = {
+    sm: { paddingH: 6, paddingV: 2, fontSize: 10, iconSize: 10, gap: 3, radius: 4 },
+    md: { paddingH: 8, paddingV: 4, fontSize: 11, iconSize: 12, gap: 4, radius: 6 },
+    lg: { paddingH: 12, paddingV: 6, fontSize: 13, iconSize: 14, gap: 5, radius: 8 },
+};
+
+export const AtomicBadge: React.FC<AtomicBadgeProps> = React.memo(({
+    text,
+    variant = "primary",
+    size = "md",
+    icon,
+    iconPosition = "left",
+    style,
+    textStyle,
+    testID,
+}) => {
+    const tokens = useAppDesignTokens();
+    const sizeConfig = SIZE_CONFIG[size];
+
+    const getVariantColors = () => {
+        switch (variant) {
+            case "primary":
+                return { bg: tokens.colors.primaryLight, text: tokens.colors.primary };
+            case "secondary":
+                return { bg: tokens.colors.surfaceSecondary, text: tokens.colors.textSecondary };
+            case "success":
+                return { bg: tokens.colors.successLight, text: tokens.colors.success };
+            case "warning":
+                return { bg: tokens.colors.warningLight, text: tokens.colors.warning };
+            case "error":
+                return { bg: tokens.colors.errorLight, text: tokens.colors.error };
+            case "info":
+                return { bg: tokens.colors.infoLight, text: tokens.colors.info };
+            default:
+                return { bg: tokens.colors.primaryLight, text: tokens.colors.primary };
+        }
+    };
+
+    const colors = getVariantColors();
+
+    const containerStyle: StyleProp<ViewStyle> = [
+        styles.container,
+        {
+            backgroundColor: colors.bg,
+            paddingHorizontal: sizeConfig.paddingH,
+            paddingVertical: sizeConfig.paddingV,
+            borderRadius: sizeConfig.radius,
+            gap: sizeConfig.gap,
+            flexDirection: iconPosition === "right" ? "row-reverse" : "row",
+        },
+        style,
+    ];
+
+    return (
+        <View style={containerStyle} testID={testID}>
+            {icon && (
+                <AtomicIcon
+                    name={icon}
+                    customSize={sizeConfig.iconSize}
+                    customColor={colors.text}
+                />
+            )}
+            <AtomicText
+                type="labelSmall"
+                style={[
+                    {
+                        color: colors.text,
+                        fontSize: sizeConfig.fontSize,
+                        fontWeight: "700",
+                    },
+                    textStyle,
+                ]}
+            >
+                {text}
+            </AtomicText>
+        </View>
+    );
+});
+
+AtomicBadge.displayName = "AtomicBadge";
+
+const styles = StyleSheet.create({
+    container: {
+        alignSelf: "flex-start",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});

package/src/atoms/AtomicInput.tsx

@@ -107,7 +107,6 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
     isFocused,
     isPasswordVisible,
     characterCount,
-    isAtMaxLength: _isAtMaxLength,
     setIsFocused,
     handleTextChange,
     togglePasswordVisibility,

package/src/atoms/AtomicPicker.tsx

@@ -80,7 +80,6 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
   searchable = false,
   clearable = false,
   autoClose = true,
-  color: _color = 'primary',
   size = 'md',
   modalTitle,
   emptyMessage = 'No options available',

package/src/atoms/index.ts

@@ -79,3 +79,11 @@ export {
     type SkeletonConfig,
     SKELETON_PATTERNS,
 } from './skeleton';
+
+// Badge
+export {
+    AtomicBadge,
+    type AtomicBadgeProps,
+    type BadgeVariant,
+    type BadgeSize,
+} from './AtomicBadge';

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

@@ -26,7 +26,6 @@ interface PickerChipsProps {
 export const PickerChips: React.FC<PickerChipsProps> = React.memo(({
   selectedOptions,
   onRemoveChip,
-  testID: _testID,
 }) => {
   const tokens = useAppDesignTokens();
 

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

@@ -59,7 +59,6 @@ interface PickerModalProps {
 export const PickerModal: React.FC<PickerModalProps> = React.memo(({
   visible,
   onClose,
-  options: _options,
   selectedValues,
   onSelect,
   title,
@@ -67,7 +66,6 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
   searchQuery,
   onSearchChange,
   filteredOptions,
-  multiple: _multiple = false,
   emptyMessage = 'No options available',
   searchPlaceholder = 'Search...',
   closeAccessibilityLabel = 'Close picker',
@@ -76,7 +74,7 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
 
-  const modalOverlayStyles = getModalOverlayStyles(tokens);
+  const modalOverlayStyles = getModalOverlayStyles();
   const modalContainerStyles = getModalContainerStyles(tokens, 0);
   const modalHeaderStyles = getModalHeaderStyles(tokens);
   const modalTitleStyles = getModalTitleStyles(tokens);

package/src/atoms/picker/styles/pickerStyles.ts

@@ -110,7 +110,7 @@ export const getPickerErrorStyles = (tokens: DesignTokens): TextStyle => ({
 });
 
 // Modal styles
-export const getModalOverlayStyles = (_tokens: DesignTokens): ViewStyle => ({
+export const getModalOverlayStyles = (): ViewStyle => ({
     flex: 1,
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
     justifyContent: 'flex-end',

package/src/device/domain/entities/Device.ts

@@ -0,0 +1,207 @@
+/**
+ * Device Domain - Core Entities
+ *
+ * This file defines core types and interfaces for device information.
+ * Handles device details, app info using expo-device and expo-application.
+ *
+ * @domain device
+ * @layer domain/entities
+ */
+
+import type * as DeviceModule from 'expo-device';
+
+/**
+ * Re-export Device types from expo-device
+ */
+export type DeviceType = DeviceModule.DeviceType;
+
+/**
+ * Device information interface
+ */
+export interface DeviceInfo {
+  // Device identification
+  brand: string | null;
+  manufacturer: string | null;
+  modelName: string | null;
+  modelId: string | null;
+  deviceName: string | null;
+  deviceYearClass: number | null;
+
+  // Device type
+  deviceType: DeviceType | null;
+  isDevice: boolean;
+
+  // OS information
+  osName: string | null;
+  osVersion: string | null;
+  osBuildId: string | null;
+  platformApiLevel: number | null;
+
+  // Memory
+  totalMemory: number | null;
+
+  // Platform
+  platform: 'ios' | 'android' | 'web';
+
+  // Localization
+  timezone: string | null;
+  region: string | null;
+}
+
+/**
+ * Application information interface
+ */
+export interface ApplicationInfo {
+  // App identification
+  applicationName: string;
+  applicationId: string;
+  nativeApplicationVersion: string | null;
+  nativeBuildVersion: string | null;
+
+  // Installation
+  installTime: Date | null;
+  lastUpdateTime: Date | null;
+
+  // Platform-specific
+  androidId: string | null; // Android only
+  iosIdForVendor: string | null; // iOS only
+}
+
+/**
+ * Combined device and app info
+ */
+export interface SystemInfo {
+  device: DeviceInfo;
+  application: ApplicationInfo;
+  timestamp: number;
+  userId?: string;
+}
+
+/**
+ * Device constants
+ */
+export const DEVICE_CONSTANTS = {
+  DEVICE_TYPE: {
+    UNKNOWN: 0,
+    PHONE: 1,
+    TABLET: 2,
+    DESKTOP: 3,
+    TV: 4,
+  },
+  PLATFORM: {
+    IOS: 'ios',
+    ANDROID: 'android',
+    WEB: 'web',
+  },
+} as const;
+
+/**
+ * Device utilities
+ */
+export class DeviceUtils {
+  /**
+   * Check if running on physical device (not simulator/emulator)
+   */
+  static isPhysicalDevice(isDevice: boolean): boolean {
+    return isDevice;
+  }
+
+  /**
+   * Get device display name
+   */
+  static getDeviceDisplayName(info: DeviceInfo): string {
+    if (info.deviceName) {
+      return info.deviceName;
+    }
+
+    if (info.modelName) {
+      return info.modelName;
+    }
+
+    if (info.brand && info.manufacturer) {
+      return `${info.brand} ${info.manufacturer}`;
+    }
+
+    return 'Unknown Device';
+  }
+
+  /**
+   * Get OS display string
+   */
+  static getOSDisplayString(info: DeviceInfo): string {
+    if (info.osName && info.osVersion) {
+      return `${info.osName} ${info.osVersion}`;
+    }
+
+    if (info.osName) {
+      return info.osName;
+    }
+
+    return 'Unknown OS';
+  }
+
+  /**
+   * Get app version string
+   */
+  static getAppVersionString(info: ApplicationInfo): string {
+    if (info.nativeApplicationVersion && info.nativeBuildVersion) {
+      return `${info.nativeApplicationVersion} (${info.nativeBuildVersion})`;
+    }
+
+    if (info.nativeApplicationVersion) {
+      return info.nativeApplicationVersion;
+    }
+
+    return 'Unknown Version';
+  }
+
+  /**
+   * Check if device meets minimum requirements
+   */
+  static meetsMinimumRequirements(info: DeviceInfo, minMemoryGB: number = 1): {
+    meets: boolean;
+    reasons: string[];
+  } {
+    const reasons: string[] = [];
+
+    if (!info.isDevice) {
+      reasons.push('Running on simulator/emulator');
+    }
+
+    if (info.totalMemory) {
+      const memoryGB = info.totalMemory / (1024 * 1024 * 1024);
+      if (memoryGB < minMemoryGB) {
+        reasons.push(`Insufficient memory: ${memoryGB.toFixed(2)}GB (minimum: ${minMemoryGB}GB)`);
+      }
+    }
+
+    if (info.deviceYearClass && info.deviceYearClass < 2018) {
+      reasons.push(`Device too old: ${info.deviceYearClass} (minimum: 2018)`);
+    }
+
+    return {
+      meets: reasons.length === 0,
+      reasons,
+    };
+  }
+
+  /**
+   * Get device tier (low/mid/high) based on specs
+   */
+  static getDeviceTier(info: DeviceInfo): 'low' | 'mid' | 'high' {
+    if (info.deviceYearClass) {
+      if (info.deviceYearClass >= 2022) return 'high';
+      if (info.deviceYearClass >= 2019) return 'mid';
+      return 'low';
+    }
+
+    if (info.totalMemory) {
+      const memoryGB = info.totalMemory / (1024 * 1024 * 1024);
+      if (memoryGB >= 6) return 'high';
+      if (memoryGB >= 3) return 'mid';
+      return 'low';
+    }
+
+    return 'mid';
+  }
+}

package/src/device/domain/entities/DeviceMemoryUtils.ts

@@ -0,0 +1,62 @@
+/**
+ * Device Memory Utilities
+ *
+ * Utility functions for device memory calculations and formatting
+ */
+
+/**
+ * Device memory utilities
+ */
+export class DeviceMemoryUtils {
+  /**
+   * Convert bytes to gigabytes
+   */
+  static bytesToGB(bytes: number): number {
+    return bytes / (1024 * 1024 * 1024);
+  }
+
+  /**
+   * Convert bytes to megabytes
+   */
+  static bytesToMB(bytes: number): number {
+    return bytes / (1024 * 1024);
+  }
+
+  /**
+   * Format memory size to human readable string
+   */
+  static formatMemorySize(bytes: number | null): string {
+    if (!bytes) return 'Unknown';
+
+    const gb = this.bytesToGB(bytes);
+    if (gb >= 1) {
+      return `${gb.toFixed(2)} GB`;
+    }
+
+    const mb = this.bytesToMB(bytes);
+    return `${mb.toFixed(2)} MB`;
+  }
+
+  /**
+   * Check if memory is sufficient for requirements
+   */
+  static hasSufficientMemory(
+    totalMemory: number | null,
+    requiredGB: number
+  ): boolean {
+    if (!totalMemory) return false;
+    return this.bytesToGB(totalMemory) >= requiredGB;
+  }
+
+  /**
+   * Get memory tier classification
+   */
+  static getMemoryTier(totalMemory: number | null): 'low' | 'mid' | 'high' {
+    if (!totalMemory) return 'mid';
+
+    const gb = this.bytesToGB(totalMemory);
+    if (gb >= 6) return 'high';
+    if (gb >= 3) return 'mid';
+    return 'low';
+  }
+}

package/src/device/domain/entities/DeviceTypeUtils.ts

@@ -0,0 +1,66 @@
+/**
+ * Device Type Utilities
+ *
+ * Utility functions for device type detection
+ */
+
+import type { DeviceType } from './Device';
+import { DEVICE_CONSTANTS } from './Device';
+
+/**
+ * Device type utilities
+ */
+export class DeviceTypeUtils {
+  /**
+   * Check if device is a tablet
+   */
+  static isTablet(deviceType: DeviceType | null): boolean {
+    return deviceType === DEVICE_CONSTANTS.DEVICE_TYPE.TABLET;
+  }
+
+  /**
+   * Check if device is a phone
+   */
+  static isPhone(deviceType: DeviceType | null): boolean {
+    return deviceType === DEVICE_CONSTANTS.DEVICE_TYPE.PHONE;
+  }
+
+  /**
+   * Check if device is desktop
+   */
+  static isDesktop(deviceType: DeviceType | null): boolean {
+    return deviceType === DEVICE_CONSTANTS.DEVICE_TYPE.DESKTOP;
+  }
+
+  /**
+   * Check if device is TV
+   */
+  static isTV(deviceType: DeviceType | null): boolean {
+    return deviceType === DEVICE_CONSTANTS.DEVICE_TYPE.TV;
+  }
+
+  /**
+   * Check if device type is unknown
+   */
+  static isUnknown(deviceType: DeviceType | null): boolean {
+    return deviceType === DEVICE_CONSTANTS.DEVICE_TYPE.UNKNOWN;
+  }
+
+  /**
+   * Get device type name
+   */
+  static getDeviceTypeName(deviceType: DeviceType | null): string {
+    switch (deviceType) {
+      case DEVICE_CONSTANTS.DEVICE_TYPE.PHONE:
+        return 'Phone';
+      case DEVICE_CONSTANTS.DEVICE_TYPE.TABLET:
+        return 'Tablet';
+      case DEVICE_CONSTANTS.DEVICE_TYPE.DESKTOP:
+        return 'Desktop';
+      case DEVICE_CONSTANTS.DEVICE_TYPE.TV:
+        return 'TV';
+      default:
+        return 'Unknown';
+    }
+  }
+}