@umituz/react-native-design-system 1.5.36 → 1.5.38

package/src/presentation/atoms/AtomicInput.tsx

@@ -1,363 +0,0 @@
-import React, { useState } from 'react';
-import { View, TextInput, Pressable, StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { AtomicIcon } from './AtomicIcon';
-import { AtomicText } from './AtomicText';
-import type { AtomicIconName, AtomicIconSize } from './AtomicIcon';
-
-export type AtomicInputVariant = 'outlined' | 'filled' | 'flat';
-export type AtomicInputState = 'default' | 'error' | 'success' | 'disabled';
-export type AtomicInputSize = 'sm' | 'md' | 'lg';
-
-export interface AtomicInputProps {
-  /** Input label */
-  label?: string;
-  /** Current input value */
-  value?: string;
-  /** Value change callback */
-  onChangeText?: (text: string) => void;
-  /** Input variant (outlined, filled, flat) */
-  variant?: AtomicInputVariant;
-  /** Input state (default, error, success, disabled) */
-  state?: AtomicInputState;
-  /** Input size (sm, md, lg) */
-  size?: AtomicInputSize;
-  /** Placeholder text */
-  placeholder?: string;
-  /** Helper text below input */
-  helperText?: string;
-  /** Leading icon (Lucide icon name) */
-  leadingIcon?: AtomicIconName;
-  /** Trailing icon (Lucide icon name) */
-  trailingIcon?: AtomicIconName;
-  /** Callback when trailing icon is pressed */
-  onTrailingIconPress?: () => void;
-  /** Show password toggle for secure inputs */
-  showPasswordToggle?: boolean;
-  /** Secure text entry (password field) */
-  secureTextEntry?: boolean;
-  /** Maximum character length */
-  maxLength?: number;
-  /** Show character counter */
-  showCharacterCount?: boolean;
-  /** Keyboard type */
-  keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'url' | 'number-pad' | 'decimal-pad';
-  /** Auto-capitalize */
-  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
-  /** Auto-correct */
-  autoCorrect?: boolean;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Container style */
-  style?: StyleProp<ViewStyle>;
-  /** Input text style */
-  inputStyle?: StyleProp<TextStyle>;
-  /** Test ID for E2E testing */
-  testID?: string;
-  /** Blur callback */
-  onBlur?: () => void;
-  /** Focus callback */
-  onFocus?: () => void;
-}
-
-/**
- * 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: React.FC<AtomicInputProps> = ({
-  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] ?? sizeConfig.md;
-  
-  // Ensure config is always defined with safe fallbacks
-  const fontSize = config?.fontSize ?? tokens.typography.bodyMedium?.fontSize ?? 16;
-  const iconSize = config?.iconSize ?? 20;
-  const paddingVertical = config?.paddingVertical ?? tokens.spacing?.sm ?? 8;
-  const paddingHorizontal = config?.paddingHorizontal ?? tokens.spacing?.md ?? 12;
-  const minHeight = config?.minHeight ?? 48;
-
-  // Get variant styles
-  const getVariantStyle = (): ViewStyle => {
-    const baseStyle: ViewStyle = {
-      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: StyleProp<ViewStyle> = [
-    styles.container,
-    getVariantStyle(),
-    {
-      paddingTop: paddingVertical,
-      paddingBottom: paddingVertical,
-      paddingHorizontal: paddingHorizontal,
-      minHeight: minHeight,
-      justifyContent: 'center',
-      opacity: isDisabled ? 0.5 : 1,
-    },
-    style,
-  ];
-
-  const textInputStyle: StyleProp<TextStyle> = [
-    styles.input,
-    {
-      fontSize: fontSize,
-      lineHeight: fontSize * 1.2, // Tighter lineHeight to prevent text clipping
-      color: getTextColor(),
-      paddingVertical: 0, // Remove vertical padding to prevent clipping
-    },
-    leadingIcon ? { paddingLeft: iconSize + 8 } : undefined,
-    (trailingIcon || showPasswordToggle) ? { paddingRight: 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={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}
-          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={iconSize}
-              customColor={iconColor}
-            />
-          </Pressable>
-        )}
-
-        {trailingIcon && !showPasswordToggle && (
-          <Pressable
-            onPress={onTrailingIconPress}
-            style={styles.trailingIcon}
-            disabled={!onTrailingIconPress}
-          >
-            <AtomicIcon
-              name={trailingIcon}
-              customSize={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,
-  },
-});
-
-export type { AtomicInputProps as InputProps };

package/src/presentation/atoms/AtomicNumberInput.tsx

@@ -1,182 +0,0 @@
-/**
- * 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, AtomicInputProps } from './AtomicInput';
-
-/**
- * Props for AtomicNumberInput component
- * Extends AtomicInput but removes text-specific props
- */
-export interface AtomicNumberInputProps
-  extends Omit<
-    AtomicInputProps,
-    'keyboardType' | 'secureTextEntry' | 'showPasswordToggle' | 'onChangeText'
-  > {
-  /** Minimum allowed value */
-  min?: number;
-  /** Maximum allowed value */
-  max?: number;
-  /** Step increment (for spinners, future feature) */
-  step?: number;
-  /** Allow decimal numbers (default: false for integers only) */
-  allowDecimal?: boolean;
-  /** Callback when valid number is entered (null if invalid/empty) */
-  onValueChange?: (value: number | null) => void;
-  /** Callback when raw text changes (optional) */
-  onTextChange?: (text: string) => void;
-}
-
-/**
- * AtomicNumberInput - Specialized numeric input component
- *
- * Wraps AtomicInput with:
- * - Numeric keyboard
- * - Number validation (min, max, format)
- * - Parsed number callbacks
- * - Automatic error states
- */
-export const AtomicNumberInput: React.FC<AtomicNumberInputProps> = ({
-  min,
-  max,
-  step = 1,
-  allowDecimal = false,
-  onValueChange,
-  onTextChange,
-  value = '',
-  state: externalState,
-  helperText: externalHelperText,
-  ...props
-}) => {
-  const [internalError, setInternalError] = useState<string | undefined>(undefined);
-
-  /**
-   * Validate number and return error message if invalid
-   */
-  const validateNumber = (text: string): string | undefined => {
-    // 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: string) => {
-    // 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}
-    />
-  );
-};