@umituz/react-native-design-system 1.0.0

package/src/presentation/atoms/AtomicInput.tsx

@@ -0,0 +1,232 @@
+import React, { useState } from 'react';
+import { View, Pressable, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { TextInput, HelperText } from 'react-native-paper';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { AtomicIcon } from './AtomicIcon';
+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 - Material Design 3 Text Input
+ *
+ * Features:
+ * - React Native Paper TextInput integration
+ * - Lucide icons for password toggle and custom icons
+ * - Material Design 3 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 isDisabled = state === 'disabled' || disabled;
+  const characterCount = value?.toString().length || 0;
+
+  // Map variant to Paper mode
+  const getPaperMode = (): 'outlined' | 'flat' => {
+    if (variant === 'outlined') return 'outlined';
+    return 'flat'; // filled and flat both use 'flat' mode
+  };
+
+  // Map state to Paper error prop
+  const hasError = state === 'error';
+
+  // Get icon size based on input size
+  const getIconSize = (): AtomicIconSize => {
+    switch (size) {
+      case 'sm': return 'xs';
+      case 'lg': return 'md';
+      default: return 'sm';
+    }
+  };
+
+  const iconSizeName = getIconSize();
+  const iconColor = isDisabled
+    ? tokens.colors.onSurfaceDisabled
+    : tokens.colors.surfaceVariant;
+
+  // Render leading icon
+  const renderLeadingIcon = leadingIcon ? () => (
+    <AtomicIcon
+      name={leadingIcon}
+      size={iconSizeName}
+      customColor={iconColor}
+    />
+  ) : undefined;
+
+  // Render trailing icon or password toggle
+  const renderTrailingIcon = () => {
+    if (showPasswordToggle && secureTextEntry) {
+      return (
+        <Pressable onPress={() => setIsPasswordVisible(!isPasswordVisible)}>
+          <AtomicIcon
+            name={isPasswordVisible ? "EyeOff" : "Eye"}
+            size={iconSizeName}
+            customColor={iconColor}
+          />
+        </Pressable>
+      );
+    }
+
+    if (trailingIcon) {
+      const icon = (
+        <AtomicIcon
+          name={trailingIcon}
+          size={iconSizeName}
+          customColor={iconColor}
+        />
+      );
+
+      return onTrailingIconPress ? (
+        <Pressable onPress={onTrailingIconPress}>{icon}</Pressable>
+      ) : icon;
+    }
+
+    return undefined;
+  };
+
+  // Get text color based on state
+  const getTextColor = () => {
+    if (state === 'error') return tokens.colors.error;
+    if (state === 'success') return tokens.colors.success;
+    return tokens.colors.onSurface;
+  };
+
+  return (
+    <View style={style} testID={testID}>
+      <TextInput
+        mode={getPaperMode()}
+        label={label}
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        error={hasError}
+        disabled={isDisabled}
+        secureTextEntry={secureTextEntry && !isPasswordVisible}
+        maxLength={maxLength}
+        keyboardType={keyboardType}
+        autoCapitalize={autoCapitalize}
+        autoCorrect={autoCorrect}
+        left={renderLeadingIcon ? <TextInput.Icon icon={renderLeadingIcon} /> : undefined}
+        right={renderTrailingIcon() ? <TextInput.Icon icon={renderTrailingIcon} /> : undefined}
+        style={inputStyle}
+        textColor={getTextColor()}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        testID={testID ? `${testID}-input` : undefined}
+      />
+
+      {(helperText || showCharacterCount) && (
+        <View style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          marginTop: tokens.spacing.xs,
+        }}>
+          {helperText && (
+            <HelperText
+              type={hasError ? 'error' : 'info'}
+              visible={Boolean(helperText)}
+              style={{ flex: 1 }}
+              testID={testID ? `${testID}-helper` : undefined}
+            >
+              {helperText}
+            </HelperText>
+          )}
+          {showCharacterCount && maxLength && (
+            <HelperText
+              type="info"
+              visible={true}
+              style={{ marginLeft: tokens.spacing.xs }}
+              testID={testID ? `${testID}-count` : undefined}
+            >
+              {characterCount}/{maxLength}
+            </HelperText>
+          )}
+        </View>
+      )}
+    </View>
+  );
+};
+
+export type { AtomicInputProps as InputProps };

package/src/presentation/atoms/AtomicNumberInput.tsx

@@ -0,0 +1,182 @@
+/**
+ * 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}
+    />
+  );
+};