@umituz/react-native-design-system 1.5.17 → 1.5.18

package/src/presentation/atoms/AtomicFormError.js

@@ -0,0 +1,63 @@
+/**
+ * AtomicFormError - Universal Form Error Component
+ *
+ * Provides consistent error message display for forms
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Display validation error messages
+ *
+ * Usage:
+ * - Form field validation errors
+ * - Global form error messages
+ * - API error display
+ * - Input validation feedback
+ */
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { AtomicText } from './AtomicText';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
+import { withAlpha } from '@umituz/react-native-theme';
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+export const AtomicFormError = ({ message, variant = 'field', style, textStyle, }) => {
+    const tokens = useAppDesignTokens();
+    if (!message) {
+        return null;
+    }
+    if (variant === 'global') {
+        return (<View style={[
+                {
+                    padding: tokens.spacing.md,
+                    borderRadius: tokens.borders.radius.md,
+                    marginBottom: tokens.spacing.sm,
+                    backgroundColor: withAlpha(tokens.colors.error, 0.15),
+                },
+                style,
+            ]}>
+        <AtomicText type="bodySmall" color="error" style={StyleSheet.flatten([
+                {
+                    textAlign: 'center',
+                    fontWeight: tokens.typography.medium,
+                },
+                textStyle,
+            ])}>
+          {message}
+        </AtomicText>
+      </View>);
+    }
+    return (<AtomicText type="bodySmall" color="error" style={StyleSheet.flatten([
+            {
+                marginTop: tokens.spacing.xs,
+                marginLeft: tokens.spacing.xs,
+            },
+            textStyle,
+        ])}>
+      {message}
+    </AtomicText>);
+};
+// =============================================================================
+// EXPORTS
+// =============================================================================
+export default AtomicFormError;

package/src/presentation/atoms/AtomicIcon.js

@@ -0,0 +1,29 @@
+/**
+ * AtomicIcon - Atomic Design System Icon Component
+ *
+ * Wrapper for the universal Icon component from @domains/icons
+ * Provides backward compatibility with AtomicIcon naming convention
+ * while leveraging the full power of the icons domain architecture.
+ */
+import React from 'react';
+import { Icon } from '@umituz/react-native-icon';
+/**
+ * AtomicIcon Component
+ *
+ * @example
+ * ```tsx
+ * import { AtomicIcon } from '@umituz/react-native-design-system';
+ *
+ * // Basic usage
+ * <AtomicIcon name="Settings" size="md" color="primary" />
+ *
+ * // Custom size and color
+ * <AtomicIcon name="Heart" customSize={32} customColor="#FF0000" />
+ *
+ * // With background
+ * <AtomicIcon name="Info" size="lg" withBackground backgroundColor="#667eea" />
+ * ```
+ */
+export const AtomicIcon = (props) => {
+    return <Icon {...props}/>;
+};

package/src/presentation/atoms/AtomicImage.js

@@ -0,0 +1,91 @@
+/**
+ * AtomicImage - Universal Image Component
+ *
+ * Provides consistent image handling across the app with theme integration
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Basic image display with consistent styling
+ *
+ * Usage:
+ * - Profile pictures
+ * - Product images
+ * - Icons and illustrations
+ * - Background images
+ */
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
+// =============================================================================
+// SIZE CONFIGURATION
+// =============================================================================
+const SIZE_CONFIG = {
+    xs: 24,
+    sm: 32,
+    md: 48,
+    lg: 64,
+    xl: 96,
+    xxl: 128,
+};
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+export const AtomicImage = ({ source, size = 'md', shape = 'rounded', borderRadius, style, imageStyle, backgroundColor, borderColor, borderWidth = 0, ...props }) => {
+    const tokens = useAppDesignTokens();
+    const styles = getStyles(tokens);
+    const imageSize = SIZE_CONFIG[size];
+    const calculatedBorderRadius = borderRadius ?? getBorderRadius(shape, imageSize, tokens);
+    const containerStyle = [
+        styles.container,
+        {
+            width: imageSize,
+            height: imageSize,
+            borderRadius: calculatedBorderRadius,
+            backgroundColor: backgroundColor || tokens.colors.surface,
+            borderColor: borderColor || tokens.colors.border,
+            borderWidth,
+        },
+        style,
+    ];
+    const finalImageStyle = [
+        styles.image,
+        {
+            borderRadius: calculatedBorderRadius,
+        },
+        imageStyle,
+    ];
+    return (<Image source={source} style={finalImageStyle} {...props}/>);
+};
+// =============================================================================
+// HELPER FUNCTIONS
+// =============================================================================
+const getBorderRadius = (shape, size, tokens) => {
+    switch (shape) {
+        case 'circle':
+            return size / 2;
+        case 'square':
+            return 0;
+        case 'rounded':
+        default:
+            return tokens.borders.radius.md;
+    }
+};
+// =============================================================================
+// STYLES
+// =============================================================================
+const getStyles = (tokens) => StyleSheet.create({
+    container: {
+        overflow: 'hidden',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+        resizeMode: 'cover',
+    },
+});
+// =============================================================================
+// EXPORTS
+// =============================================================================
+export default AtomicImage;

package/src/presentation/atoms/AtomicInput.js

@@ -0,0 +1,201 @@
+import React, { useState } from 'react';
+import { View, TextInput, Pressable, StyleSheet, Platform } from 'react-native';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
+import { AtomicIcon } from './AtomicIcon';
+import { AtomicText } from './AtomicText';
+/**
+ * AtomicInput - Pure React Native Text Input
+ *
+ * Features:
+ * - Pure React Native implementation (no Paper dependency)
+ * - Lucide icons for password toggle and custom icons
+ * - Outlined/filled/flat variants
+ * - Error, success, disabled states
+ * - Character counter
+ * - Responsive sizing
+ * - Full accessibility support
+ */
+export const AtomicInput = ({ variant = 'outlined', state = 'default', size = 'md', label, value = '', onChangeText, placeholder, helperText, leadingIcon, trailingIcon, onTrailingIconPress, showPasswordToggle = false, secureTextEntry = false, maxLength, showCharacterCount = false, keyboardType = 'default', autoCapitalize = 'sentences', autoCorrect = true, disabled = false, style, inputStyle, testID, onBlur, onFocus, }) => {
+    const tokens = useAppDesignTokens();
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const isDisabled = state === 'disabled' || disabled;
+    const characterCount = value?.toString().length || 0;
+    const hasError = state === 'error';
+    const hasSuccess = state === 'success';
+    // Size configuration
+    const sizeConfig = {
+        sm: {
+            paddingVertical: tokens.spacing.xs,
+            paddingHorizontal: tokens.spacing.sm,
+            fontSize: tokens.typography.bodySmall.fontSize,
+            iconSize: 16,
+            minHeight: 40,
+        },
+        md: {
+            paddingVertical: tokens.spacing.sm,
+            paddingHorizontal: tokens.spacing.md,
+            fontSize: tokens.typography.bodyMedium.fontSize,
+            iconSize: 20,
+            minHeight: 48,
+        },
+        lg: {
+            paddingVertical: tokens.spacing.md,
+            paddingHorizontal: tokens.spacing.lg,
+            fontSize: tokens.typography.bodyLarge.fontSize,
+            iconSize: 24,
+            minHeight: 56,
+        },
+    };
+    const config = sizeConfig[size];
+    // Get variant styles
+    const getVariantStyle = () => {
+        const baseStyle = {
+            backgroundColor: tokens.colors.surface,
+            borderRadius: tokens.borders.radius.md,
+        };
+        let borderColor = tokens.colors.border;
+        if (isFocused)
+            borderColor = tokens.colors.primary;
+        if (hasError)
+            borderColor = tokens.colors.error;
+        if (hasSuccess)
+            borderColor = tokens.colors.success;
+        if (isDisabled)
+            borderColor = tokens.colors.borderDisabled;
+        switch (variant) {
+            case 'outlined':
+                return {
+                    ...baseStyle,
+                    borderWidth: isFocused ? 2 : 1,
+                    borderColor,
+                };
+            case 'filled':
+                return {
+                    ...baseStyle,
+                    backgroundColor: tokens.colors.surfaceSecondary,
+                    borderWidth: 0,
+                    borderBottomWidth: isFocused ? 2 : 1,
+                    borderBottomColor: borderColor,
+                };
+            case 'flat':
+                return {
+                    ...baseStyle,
+                    backgroundColor: 'transparent',
+                    borderWidth: 0,
+                    borderBottomWidth: 1,
+                    borderBottomColor: borderColor,
+                    borderRadius: 0,
+                };
+            default:
+                return baseStyle;
+        }
+    };
+    // Get text color based on state
+    const getTextColor = () => {
+        if (isDisabled)
+            return tokens.colors.textDisabled;
+        if (hasError)
+            return tokens.colors.error;
+        if (hasSuccess)
+            return tokens.colors.success;
+        return tokens.colors.textPrimary;
+    };
+    const iconColor = isDisabled ? tokens.colors.textDisabled : tokens.colors.textSecondary;
+    const containerStyle = [
+        styles.container,
+        getVariantStyle(),
+        {
+            paddingTop: config.paddingVertical,
+            paddingBottom: config.paddingVertical,
+            paddingHorizontal: config.paddingHorizontal,
+            minHeight: config.minHeight,
+            justifyContent: 'center',
+            opacity: isDisabled ? 0.5 : 1,
+        },
+        style,
+    ];
+    const textInputStyle = [
+        styles.input,
+        {
+            fontSize: config.fontSize || tokens.typography.bodyMedium.fontSize || 16,
+            lineHeight: (config.fontSize || tokens.typography.bodyMedium.fontSize || 16) * 1.5, // Ensure text is fully visible
+            color: getTextColor(),
+            paddingVertical: 0, // Remove vertical padding to prevent clipping
+        },
+        leadingIcon ? { paddingLeft: config.iconSize + 8 } : undefined,
+        (trailingIcon || showPasswordToggle) ? { paddingRight: config.iconSize + 8 } : undefined,
+        inputStyle,
+    ];
+    return (<View testID={testID}>
+      {label && (<AtomicText type="labelMedium" color={hasError ? 'error' : hasSuccess ? 'success' : 'secondary'} style={styles.label}>
+          {label}
+        </AtomicText>)}
+
+      <View style={containerStyle}>
+        {leadingIcon && (<View style={styles.leadingIcon}>
+            <AtomicIcon name={leadingIcon} customSize={config.iconSize} customColor={iconColor}/>
+          </View>)}
+
+        <TextInput value={value} onChangeText={onChangeText} placeholder={placeholder} placeholderTextColor={tokens.colors.textSecondary} secureTextEntry={secureTextEntry && !isPasswordVisible} maxLength={maxLength} keyboardType={keyboardType} autoCapitalize={autoCapitalize} autoCorrect={autoCorrect} editable={!isDisabled} style={textInputStyle} textAlignVertical="center" {...(Platform.OS === 'android' && { includeFontPadding: false })} onBlur={() => {
+            setIsFocused(false);
+            onBlur?.();
+        }} onFocus={() => {
+            setIsFocused(true);
+            onFocus?.();
+        }} testID={testID ? `${testID}-input` : undefined}/>
+
+        {(showPasswordToggle && secureTextEntry) && (<Pressable onPress={() => setIsPasswordVisible(!isPasswordVisible)} style={styles.trailingIcon}>
+            <AtomicIcon name={isPasswordVisible ? "EyeOff" : "Eye"} customSize={config.iconSize} customColor={iconColor}/>
+          </Pressable>)}
+
+        {trailingIcon && !showPasswordToggle && (<Pressable onPress={onTrailingIconPress} style={styles.trailingIcon} disabled={!onTrailingIconPress}>
+            <AtomicIcon name={trailingIcon} customSize={config.iconSize} customColor={iconColor}/>
+          </Pressable>)}
+      </View>
+
+      {(helperText || showCharacterCount) && (<View style={styles.helperRow}>
+          {helperText && (<AtomicText type="bodySmall" color={hasError ? 'error' : 'secondary'} style={styles.helperText} testID={testID ? `${testID}-helper` : undefined}>
+              {helperText}
+            </AtomicText>)}
+          {showCharacterCount && maxLength && (<AtomicText type="bodySmall" color="secondary" style={styles.characterCount} testID={testID ? `${testID}-count` : undefined}>
+              {characterCount}/{maxLength}
+            </AtomicText>)}
+        </View>)}
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    input: {
+        flex: 1,
+        margin: 0,
+        padding: 0,
+    },
+    label: {
+        marginBottom: 4,
+    },
+    leadingIcon: {
+        position: 'absolute',
+        left: 12,
+        zIndex: 1,
+    },
+    trailingIcon: {
+        position: 'absolute',
+        right: 12,
+        zIndex: 1,
+    },
+    helperRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginTop: 4,
+    },
+    helperText: {
+        flex: 1,
+    },
+    characterCount: {
+        marginLeft: 8,
+    },
+});

package/src/presentation/atoms/AtomicNumberInput.js

@@ -0,0 +1,124 @@
+/**
+ * AtomicNumberInput Component
+ *
+ * A specialized number input component that wraps AtomicInput with
+ * number-specific validation and keyboard handling.
+ *
+ * Features:
+ * - Numeric keyboard (integer or decimal)
+ * - Min/max validation
+ * - Step increment support
+ * - Automatic error states for invalid numbers
+ * - Parsed number callback (onValueChange)
+ * - Consistent styling with AtomicInput
+ * - All AtomicInput features (variants, states, sizes)
+ *
+ * Usage:
+ * ```tsx
+ * const [age, setAge] = useState<number | null>(null);
+ *
+ * <AtomicNumberInput
+ *   value={age?.toString() || ''}
+ *   onValueChange={setAge}
+ *   label="Age"
+ *   min={0}
+ *   max={150}
+ *   helperText="Enter your age"
+ * />
+ * ```
+ *
+ * Why This Component:
+ * - Separation of concerns (text vs number input)
+ * - Built-in number validation
+ * - Type-safe number callbacks
+ * - Prevents non-numeric input via keyboard
+ * - Consistent with AtomicInput styling
+ *
+ * @module AtomicNumberInput
+ */
+import React, { useState, useEffect } from 'react';
+import { AtomicInput } from './AtomicInput';
+/**
+ * AtomicNumberInput - Specialized numeric input component
+ *
+ * Wraps AtomicInput with:
+ * - Numeric keyboard
+ * - Number validation (min, max, format)
+ * - Parsed number callbacks
+ * - Automatic error states
+ */
+export const AtomicNumberInput = ({ min, max, step = 1, allowDecimal = false, onValueChange, onTextChange, value = '', state: externalState, helperText: externalHelperText, ...props }) => {
+    const [internalError, setInternalError] = useState(undefined);
+    /**
+     * Validate number and return error message if invalid
+     */
+    const validateNumber = (text) => {
+        // Empty is valid (null value)
+        if (!text || text === '' || text === '-' || text === '.') {
+            return undefined;
+        }
+        // Parse number
+        const num = parseFloat(text);
+        // Check if valid number
+        if (isNaN(num)) {
+            return 'Invalid number';
+        }
+        // Check min constraint
+        if (min !== undefined && num < min) {
+            return `Minimum value is ${min}`;
+        }
+        // Check max constraint
+        if (max !== undefined && num > max) {
+            return `Maximum value is ${max}`;
+        }
+        return undefined;
+    };
+    /**
+     * Handle text change with validation
+     */
+    const handleChangeText = (text) => {
+        // Allow empty, minus sign, and decimal point during typing
+        if (text === '' || text === '-' || (allowDecimal && text === '.')) {
+            setInternalError(undefined);
+            onTextChange?.(text);
+            onValueChange?.(null);
+            return;
+        }
+        // Validate format
+        const decimalRegex = allowDecimal ? /^-?\d*\.?\d*$/ : /^-?\d*$/;
+        if (!decimalRegex.test(text)) {
+            // Invalid format, don't update
+            return;
+        }
+        // Validate number
+        const error = validateNumber(text);
+        setInternalError(error);
+        // Call text callback
+        onTextChange?.(text);
+        // Call value callback with parsed number
+        if (!error && text !== '' && text !== '-' && text !== '.') {
+            const num = parseFloat(text);
+            onValueChange?.(isNaN(num) ? null : num);
+        }
+        else {
+            onValueChange?.(null);
+        }
+    };
+    /**
+     * Validate on mount and when value/constraints change
+     */
+    useEffect(() => {
+        if (value) {
+            const error = validateNumber(value.toString());
+            setInternalError(error);
+        }
+        else {
+            setInternalError(undefined);
+        }
+    }, [value, min, max]);
+    // Determine final state (external state overrides internal error)
+    const finalState = externalState || (internalError ? 'error' : 'default');
+    // Determine final helper text (internal error overrides external helper)
+    const finalHelperText = internalError || externalHelperText;
+    return (<AtomicInput {...props} value={value} onChangeText={handleChangeText} keyboardType={allowDecimal ? 'decimal-pad' : 'numeric'} state={finalState} helperText={finalHelperText}/>);
+};