@umituz/react-native-design-system 2.6.61 → 2.6.64

package/src/atoms/AtomicInput.tsx

@@ -1,78 +1,12 @@
 import React from 'react';
-import { View, TextInput, Pressable, StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { View, TextInput, StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { useAppDesignTokens } from '../theme';
-import { AtomicIcon } from './AtomicIcon';
-import { AtomicText } from './AtomicText';
 import { useInputState } from './input/hooks/useInputState';
 import { getSizeConfig, getVariantStyle, getTextColor } from './input/styles/inputStylesHelper';
-import type { IconName } 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 (Ionicons name) */
-  leadingIcon?: IconName;
-  /** Trailing icon (Ionicons name) */
-  trailingIcon?: IconName;
-  /** 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' | 'web-search' | 'twitter' | 'numeric' | 'visible-password';
-  /** Return key type */
-  returnKeyType?: 'done' | 'go' | 'next' | 'search' | 'send';
-  /** Callback when submit button is pressed */
-  onSubmitEditing?: () => void;
-  /** Blur on submit */
-  blurOnSubmit?: boolean;
-  /** Auto focus */
-  autoFocus?: boolean;
-  /** 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;
-  /** Multiline input support */
-  multiline?: boolean;
-  /** Number of lines for multiline input */
-  numberOfLines?: number;
-}
+import type { AtomicInputProps } from './input/types';
+import { InputLabel } from './input/components/InputLabel';
+import { InputIcon } from './input/components/InputIcon';
+import { InputHelper } from './input/components/InputHelper';
 
 /**
  * AtomicInput - Pure React Native Text Input
@@ -188,25 +122,16 @@ export const AtomicInput = React.forwardRef<TextInput, AtomicInputProps>(({
 
   return (
     <View testID={testID}>
-      {label && (
-        <AtomicText
-          type="labelMedium"
-          color={hasError ? 'error' : hasSuccess ? 'success' : 'secondary'}
-          style={styles.label}
-        >
-          {label}
-        </AtomicText>
-      )}
+      <InputLabel label={label} state={state} />
 
       <View style={containerStyle}>
         {leadingIcon && (
-          <View style={styles.leadingIcon}>
-            <AtomicIcon
-              name={leadingIcon}
-              customSize={sizeConfig.iconSize}
-              customColor={iconColor}
-            />
-          </View>
+          <InputIcon
+            name={leadingIcon}
+            size={sizeConfig.iconSize}
+            color={iconColor}
+            position="leading"
+          />
         )}
 
         <TextInput
@@ -240,55 +165,36 @@ export const AtomicInput = React.forwardRef<TextInput, AtomicInputProps>(({
         />
 
         {(showPasswordToggle && secureTextEntry) && (
-          <Pressable
+          <InputIcon
+            name={isPasswordVisible ? "eye-off-outline" : "eye-outline"}
+            size={sizeConfig.iconSize}
+            color={iconColor}
+            position="trailing"
             onPress={() => togglePasswordVisibility()}
-            style={styles.trailingIcon}
-          >
-            <AtomicIcon
-              name={isPasswordVisible ? "eye-off-outline" : "eye-outline"}
-              customSize={sizeConfig.iconSize}
-              customColor={iconColor}
-            />
-          </Pressable>
+            testID={testID ? `${testID}-toggle-password` : undefined}
+          />
         )}
 
         {trailingIcon && !showPasswordToggle && (
-          <Pressable
+          <InputIcon
+            name={trailingIcon}
+            size={sizeConfig.iconSize}
+            color={iconColor}
+            position="trailing"
             onPress={onTrailingIconPress}
-            style={styles.trailingIcon}
-            disabled={!onTrailingIconPress}
-          >
-            <AtomicIcon
-              name={trailingIcon}
-              customSize={sizeConfig.iconSize}
-              customColor={iconColor}
-            />
-          </Pressable>
+            testID={testID ? `${testID}-trailing-icon` : undefined}
+          />
         )}
       </View>
 
-      {(helperText || showCharacterCount) && (
-        <View style={styles.helperRow}>
-          {helperText && (
-            <AtomicText
-              style={styles.helperText}
-              color={hasError ? 'error' : 'secondary'}
-              testID={testID ? `${testID}-helper` : undefined}
-            >
-              {helperText}
-            </AtomicText>
-          )}
-          {showCharacterCount && maxLength && (
-            <AtomicText
-              style={[styles.helperText, styles.characterCount]}
-              color="secondary"
-              testID={testID ? `${testID}-count` : undefined}
-            >
-              {characterCount}/{maxLength}
-            </AtomicText>
-          )}
-        </View>
-      )}
+      <InputHelper
+        helperText={helperText}
+        showCharacterCount={showCharacterCount}
+        characterCount={characterCount}
+        maxLength={maxLength}
+        state={state}
+        testID={testID}
+      />
     </View>
   );
 });
@@ -303,30 +209,4 @@ const styles = StyleSheet.create({
     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/atoms/AtomicPicker.tsx

@@ -40,7 +40,7 @@
  * @module AtomicPicker
  */
 
-import React, { useState, useMemo } from 'react';
+import React from 'react';
 import {
   View,
   TouchableOpacity,
@@ -59,6 +59,7 @@ import {
   getPickerValueStyles,
   getPickerErrorStyles,
 } from './picker/styles/pickerStyles';
+import { usePickerState } from './picker/hooks/usePickerState';
 
 export type { AtomicPickerProps, PickerOption, PickerSize } from './picker/types';
 
@@ -92,8 +93,14 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const [modalVisible, setModalVisible] = useState(false);
-  const [searchQuery, setSearchQuery] = useState('');
+  const pickerState = usePickerState({
+    value,
+    multiple,
+    options,
+    placeholder,
+    autoClose,
+    onChange,
+  });
 
   // Get style helpers with design tokens
   const containerStyles = getPickerContainerStyles(tokens);
@@ -102,110 +109,6 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
   const valueStyles = getPickerValueStyles(tokens);
   const errorStyles = getPickerErrorStyles(tokens);
 
-  /**
-   * Normalize value to array for consistent handling
-   */
-  const selectedValues = useMemo(() => {
-    if (multiple) {
-      return Array.isArray(value) ? value : [];
-    }
-    return value ? [value as string] : [];
-  }, [value, multiple]);
-
-  /**
-   * Get selected option objects
-   */
-  const selectedOptions = useMemo(() => {
-    return options.filter((opt) => selectedValues.includes(opt.value));
-  }, [options, selectedValues]);
-
-  /**
-   * Filter options based on search query
-   */
-  const filteredOptions = useMemo(() => {
-    if (!searchQuery.trim()) return options;
-
-    const query = searchQuery.toLowerCase();
-    return options.filter(
-      (opt) =>
-        opt.label.toLowerCase().includes(query) ||
-        opt.description?.toLowerCase().includes(query)
-    );
-  }, [options, searchQuery]);
-
-  /**
-   * Format display text for selected value(s)
-   */
-  const displayText = useMemo(() => {
-    if (selectedOptions.length === 0) {
-      return placeholder;
-    }
-
-    if (multiple) {
-      return selectedOptions.length === 1
-        ? selectedOptions[0]?.label || placeholder
-        : `${selectedOptions.length} selected`;
-    }
-    return selectedOptions[0]?.label || placeholder;
-  }, [selectedOptions, placeholder, multiple]);
-
-  /**
-   * Handle modal open
-   */
-  const openModal = () => {
-    if (disabled) return;
-    setModalVisible(true);
-    setSearchQuery('');
-  };
-
-  /**
-   * Handle modal close
-   */
-  const closeModal = () => {
-    setModalVisible(false);
-    setSearchQuery('');
-  };
-
-  /**
-   * Handle option selection
-   */
-  const handleSelect = (optionValue: string) => {
-    if (multiple) {
-      const newValues = selectedValues.includes(optionValue)
-        ? selectedValues.filter((v) => v !== optionValue)
-        : [...selectedValues, optionValue];
-      onChange(newValues);
-    } else {
-      onChange(optionValue);
-      if (autoClose) {
-        closeModal();
-      }
-    }
-  };
-
-  /**
-   * Handle clear selection
-   */
-  const handleClear = () => {
-    onChange(multiple ? [] : '');
-  };
-
-  /**
-   * Handle search query change
-   */
-  const handleSearch = (query: string) => {
-    setSearchQuery(query);
-  };
-
-
-
-  /**
-   * Handle chip removal
-   */
-  const handleChipRemove = (value: string) => {
-    handleSelect(value);
-  };
-
   const pickerContainerStyle = StyleSheet.flatten([
     containerStyles.base,
     containerStyles.size[size],
@@ -221,12 +124,17 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
   ]);
 
   const pickerValueStyle = StyleSheet.flatten([
-    selectedOptions.length > 0 ? valueStyles.base : placeholderStyles.base,
-    selectedOptions.length > 0
+    pickerState.selectedOptions.length > 0 ? valueStyles.base : placeholderStyles.base,
+    pickerState.selectedOptions.length > 0
       ? valueStyles.size[size]
       : placeholderStyles.size[size],
   ]);
 
+  const handleOpenModal = () => {
+    if (disabled) return;
+    pickerState.openModal();
+  };
+
   return (
     <View>
       {/* Label */}
@@ -234,7 +142,7 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
 
       {/* Picker Button */}
       <TouchableOpacity
-        onPress={openModal}
+        onPress={handleOpenModal}
         disabled={disabled}
         accessibilityRole="button"
         accessibilityLabel={label || placeholder}
@@ -244,15 +152,15 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
       >
         {/* Display Text */}
         <AtomicText style={pickerValueStyle} numberOfLines={1}>
-          {displayText}
+          {pickerState.displayText}
         </AtomicText>
 
         {/* Icons */}
         <View style={{ flexDirection: 'row', alignItems: 'center', gap: tokens.spacing.xs }}>
           {/* Clear Button */}
-          {clearable && selectedOptions.length > 0 && !disabled && (
+          {clearable && pickerState.selectedOptions.length > 0 && !disabled && (
             <TouchableOpacity
-              onPress={handleClear}
+              onPress={pickerState.handleClear}
               hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
               accessibilityRole="button"
               accessibilityLabel={clearAccessibilityLabel}
@@ -264,7 +172,7 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
 
           {/* Dropdown Icon */}
           <AtomicIcon
-            name={modalVisible ? 'ChevronUp' : 'ChevronDown'}
+            name={pickerState.modalVisible ? 'ChevronUp' : 'ChevronDown'}
             size="sm"
             color={disabled ? 'surfaceVariant' : 'secondary'}
           />
@@ -273,8 +181,8 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
 
       {/* Selected Chips (Multi-select) */}
       <PickerChips
-        selectedOptions={selectedOptions}
-        onRemoveChip={handleChipRemove}
+        selectedOptions={pickerState.selectedOptions}
+        onRemoveChip={pickerState.handleChipRemove}
         testID={testID}
       />
 
@@ -283,16 +191,16 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
 
       {/* Selection Modal */}
       <PickerModal
-        visible={modalVisible}
-        onClose={closeModal}
+        visible={pickerState.modalVisible}
+        onClose={pickerState.closeModal}
         options={options}
-        selectedValues={selectedValues}
-        onSelect={handleSelect}
+        selectedValues={pickerState.selectedValues}
+        onSelect={pickerState.handleSelect}
         title={modalTitle || label}
         searchable={searchable}
-        searchQuery={searchQuery}
-        onSearchChange={handleSearch}
-        filteredOptions={filteredOptions}
+        searchQuery={pickerState.searchQuery}
+        onSearchChange={pickerState.handleSearch}
+        filteredOptions={pickerState.filteredOptions}
         multiple={multiple}
         emptyMessage={emptyMessage}
         searchPlaceholder={searchPlaceholder}

package/src/atoms/button/AtomicButton.tsx

@@ -0,0 +1,108 @@
+/**
+ * AtomicButton Component
+ * Refactored: Extracted configs, styles, and types
+ */
+
+import React from 'react';
+import { StyleProp, ViewStyle, TextStyle, TouchableOpacity, View } from 'react-native';
+import { AtomicText } from '../AtomicText';
+import { AtomicIcon } from '../AtomicIcon';
+import { AtomicSpinner } from '../AtomicSpinner';
+import { useAppDesignTokens } from '../../theme';
+import { getButtonSizeConfig } from './configs/buttonSizeConfig';
+import { getVariantStyles } from './styles/buttonVariantStyles';
+import { buttonStyles } from './styles/buttonStyles';
+import type { AtomicButtonProps } from './types';
+
+export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
+  title,
+  children,
+  onPress,
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  loading = false,
+  icon,
+  iconPosition = 'left',
+  fullWidth = false,
+  style,
+  textStyle,
+  activeOpacity = 0.8,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const handlePress = () => {
+    if (!disabled && !loading) {
+      onPress();
+    }
+  };
+
+  const isDisabled = disabled || loading;
+  const config = getButtonSizeConfig(size, tokens);
+  const variantStyles = getVariantStyles(variant, tokens);
+  const iconColor = variantStyles.text.color;
+
+  const containerStyle: StyleProp<ViewStyle> = [
+    buttonStyles.button,
+    {
+      paddingVertical: config.paddingVertical,
+      paddingHorizontal: config.paddingHorizontal,
+      minHeight: config.minHeight,
+      borderRadius: tokens.borders.radius.md,
+    },
+    variantStyles.container,
+    fullWidth ? buttonStyles.fullWidth : undefined,
+    isDisabled ? buttonStyles.disabled : undefined,
+    style,
+  ];
+
+  const buttonTextStyle: StyleProp<TextStyle> = [
+    {
+      fontSize: config.fontSize,
+      fontWeight: '600',
+    },
+    variantStyles.text,
+    isDisabled ? buttonStyles.disabledText : undefined,
+    textStyle,
+  ];
+
+  const buttonText = title || children;
+  const showIcon = icon;
+
+  return (
+    <TouchableOpacity
+      style={containerStyle}
+      onPress={handlePress}
+      activeOpacity={activeOpacity}
+      disabled={isDisabled}
+      testID={testID}
+    >
+      <View style={[buttonStyles.content, iconPosition === 'right' && buttonStyles.rowReverse]}>
+        {loading ? (
+          <AtomicSpinner
+            size="sm"
+            color={iconColor as string}
+            style={iconPosition === 'right' ? buttonStyles.iconRight : buttonStyles.iconLeft}
+          />
+        ) : showIcon ? (
+          <AtomicIcon
+            name={icon}
+            customSize={config.iconSize}
+            customColor={iconColor as string | undefined}
+            style={iconPosition === 'right' ? buttonStyles.iconRight : buttonStyles.iconLeft}
+          />
+        ) : null}
+
+        <AtomicText style={buttonTextStyle}>
+          {buttonText}
+        </AtomicText>
+      </View>
+    </TouchableOpacity>
+  );
+});
+
+AtomicButton.displayName = 'AtomicButton';
+
+// Re-export types for convenience
+export type { AtomicButtonProps, ButtonVariant, ButtonSize } from './types';

package/src/atoms/button/configs/buttonSizeConfig.ts

@@ -0,0 +1,37 @@
+/**
+ * Button Size Configuration
+ */
+
+import type { DesignTokens } from '../../../theme';
+import type { ButtonSize, ButtonSizeConfig } from '../types';
+
+export const getButtonSizeConfig = (
+  size: ButtonSize,
+  tokens: DesignTokens,
+): ButtonSizeConfig => {
+  const sizeConfigs: Record<ButtonSize, ButtonSizeConfig> = {
+    sm: {
+      paddingVertical: tokens.spacing.xs,
+      paddingHorizontal: tokens.spacing.sm,
+      fontSize: tokens.typography.bodySmall.responsiveFontSize,
+      iconSize: 16 * tokens.spacingMultiplier,
+      minHeight: 32 * tokens.spacingMultiplier,
+    },
+    md: {
+      paddingVertical: tokens.spacing.sm,
+      paddingHorizontal: tokens.spacing.md,
+      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
+      iconSize: 20 * tokens.spacingMultiplier,
+      minHeight: 44 * tokens.spacingMultiplier,
+    },
+    lg: {
+      paddingVertical: tokens.spacing.md,
+      paddingHorizontal: tokens.spacing.lg,
+      fontSize: tokens.typography.bodyLarge.responsiveFontSize,
+      iconSize: 24 * tokens.spacingMultiplier,
+      minHeight: 52 * tokens.spacingMultiplier,
+    },
+  };
+
+  return sizeConfigs[size];
+};

package/src/atoms/button/index.ts

@@ -0,0 +1,6 @@
+/**
+ * AtomicButton Barrel Export
+ */
+
+export { AtomicButton } from './AtomicButton';
+export type { AtomicButtonProps, ButtonVariant, ButtonSize } from './types';

package/src/atoms/button/styles/buttonStyles.ts

@@ -0,0 +1,36 @@
+/**
+ * Button Base Styles
+ */
+
+import { StyleSheet } from 'react-native';
+
+export const buttonStyles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rowReverse: {
+    flexDirection: 'row-reverse',
+  },
+  fullWidth: {
+    width: '100%',
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  disabledText: {
+    opacity: 0.7,
+  },
+  iconLeft: {
+    marginRight: 8,
+  },
+  iconRight: {
+    marginLeft: 8,
+  },
+});