@umituz/react-native-design-system 1.15.0 → 2.0.0

package/src/atoms/AtomicIcon.tsx

@@ -0,0 +1,149 @@
+/**
+ * AtomicIcon - Theme-aware Icon Component
+ *
+ * Uses @umituz/react-native-icons internally
+ * Adds theme-aware semantic colors and background support
+ */
+
+import React from "react";
+import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
+import { Icon, type IconSize as BaseIconSize, ICON_SIZES } from "@umituz/react-native-icons";
+import { useAppDesignTokens } from '../theme';
+
+// Re-export IconSize from icons package for convenience
+export type IconSize = BaseIconSize;
+
+// Semantic color names that map to theme tokens
+export type IconColor =
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "error"
+  | "info"
+  | "onSurface"
+  | "surfaceVariant"
+  | "onPrimary"
+  | "onSecondary"
+  | "textInverse";
+
+// Accept any string for flexibility
+export type IconName = string;
+
+export interface AtomicIconProps {
+  /** Icon name (Ionicons) */
+  name: IconName;
+  /** Semantic size preset */
+  size?: IconSize;
+  /** Custom size in pixels (overrides size) */
+  customSize?: number;
+  /** Semantic color from theme */
+  color?: IconColor;
+  /** Custom color (overrides color) */
+  customColor?: string;
+  /** Add circular background */
+  withBackground?: boolean;
+  /** Background color */
+  backgroundColor?: string;
+  /** Accessibility label */
+  accessibilityLabel?: string;
+  /** Test ID */
+  testID?: string;
+  /** Additional styles */
+  style?: StyleProp<ViewStyle>;
+}
+
+const getSemanticColor = (
+  color: IconColor,
+  tokens: ReturnType<typeof useAppDesignTokens>
+): string => {
+  const colorMap: Record<IconColor, string> = {
+    primary: tokens.colors.primary,
+    secondary: tokens.colors.secondary,
+    success: tokens.colors.success,
+    warning: tokens.colors.warning,
+    error: tokens.colors.error,
+    info: tokens.colors.info,
+    onSurface: tokens.colors.onSurface,
+    surfaceVariant: tokens.colors.surfaceVariant,
+    onPrimary: tokens.colors.onPrimary,
+    onSecondary: tokens.colors.onSecondary,
+    textInverse: tokens.colors.textInverse,
+  };
+  return colorMap[color];
+};
+
+/**
+ * Theme-aware icon component
+ *
+ * @example
+ * <AtomicIcon name="heart-outline" size="md" color="primary" />
+ * <AtomicIcon name="star" customSize={32} customColor="#FFD700" />
+ * <AtomicIcon name="settings" size="lg" withBackground />
+ */
+export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(({
+  name,
+  size = "md",
+  customSize,
+  color,
+  customColor,
+  withBackground = false,
+  backgroundColor,
+  accessibilityLabel,
+  testID,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  // Calculate size
+  const iconSize = customSize ?? (typeof size === "number" ? size : ICON_SIZES[size]);
+
+  // Calculate color
+  const iconColor = customColor
+    ? customColor
+    : color
+      ? getSemanticColor(color, tokens)
+      : tokens.colors.textPrimary;
+
+  if (withBackground) {
+    const bgColor = backgroundColor || tokens.colors.surfaceVariant;
+    const containerSize = iconSize + 16;
+
+    return (
+      <View
+        style={[
+          styles.backgroundContainer,
+          {
+            width: containerSize,
+            height: containerSize,
+            borderRadius: containerSize / 2,
+            backgroundColor: bgColor,
+          },
+          style,
+        ]}
+        testID={testID}
+        accessibilityLabel={accessibilityLabel}
+      >
+        <Icon name={name} size={iconSize} color={iconColor} />
+      </View>
+    );
+  }
+
+  return (
+    <View accessibilityLabel={accessibilityLabel} testID={testID} style={style}>
+      <Icon name={name} size={iconSize} color={iconColor} />
+    </View>
+  );
+});
+
+AtomicIcon.displayName = "AtomicIcon";
+
+const styles = StyleSheet.create({
+  backgroundContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});
+
+// Legacy type alias for backward compatibility
+export type IconProps = AtomicIconProps;

package/src/atoms/AtomicInput.tsx

@@ -0,0 +1,308 @@
+import React, { useMemo } from 'react';
+import { View, TextInput, Pressable, 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 (Lucide icon name) */
+  leadingIcon?: IconName;
+  /** Trailing icon (Lucide icon 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';
+  /** 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 {
+    localValue,
+    isFocused,
+    isPasswordVisible,
+    characterCount,
+    isAtMaxLength,
+    setIsFocused,
+    handleTextChange,
+    togglePasswordVisibility,
+  } = useInputState({
+    value,
+    onChangeText,
+    secureTextEntry,
+    showPasswordToggle,
+    maxLength,
+    showCharacterCount,
+  });
+
+  const isDisabled = state === 'disabled' || disabled;
+  const hasError = state === 'error';
+  const hasSuccess = state === 'success';
+
+  const sizeConfig = getSizeConfig({ size, tokens });
+  const variantStyle = getVariantStyle({
+    variant,
+    isFocused,
+    hasError,
+    hasSuccess,
+    isDisabled,
+    tokens,
+  });
+  const textColor = getTextColor({
+    isDisabled,
+    hasError,
+    hasSuccess,
+    tokens,
+  });
+
+  const iconColor = isDisabled ? tokens.colors.textDisabled : tokens.colors.textSecondary;
+
+  const containerStyle: StyleProp<ViewStyle> = [
+    styles.container,
+    variantStyle,
+    {
+      paddingTop: sizeConfig.paddingVertical,
+      paddingBottom: sizeConfig.paddingVertical,
+      paddingHorizontal: sizeConfig.paddingHorizontal,
+      minHeight: sizeConfig.minHeight,
+      justifyContent: 'center',
+      opacity: isDisabled ? 0.5 : 1,
+    },
+    style,
+  ];
+
+  const textInputStyle: StyleProp<TextStyle> = [
+    styles.input,
+    {
+      fontSize: sizeConfig.fontSize,
+      lineHeight: (sizeConfig.fontSize || 16) * 1.2,
+      color: textColor,
+      paddingVertical: 0,
+    },
+    leadingIcon ? { paddingLeft: sizeConfig.iconSize + 8 } : undefined,
+    (trailingIcon || showPasswordToggle) ? { paddingRight: sizeConfig.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={sizeConfig.iconSize}
+              customColor={iconColor}
+            />
+          </View>
+        )}
+
+        <TextInput
+          value={localValue}
+          onChangeText={handleTextChange}
+          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={() => togglePasswordVisibility()}
+            style={styles.trailingIcon}
+          >
+            <AtomicIcon
+              name={isPasswordVisible ? "EyeOff" : "Eye"}
+              customSize={sizeConfig.iconSize}
+              customColor={iconColor}
+            />
+          </Pressable>
+        )}
+
+        {trailingIcon && !showPasswordToggle && (
+          <Pressable
+            onPress={onTrailingIconPress}
+            style={styles.trailingIcon}
+            disabled={!onTrailingIconPress}
+          >
+            <AtomicIcon
+              name={trailingIcon}
+              customSize={sizeConfig.iconSize}
+              customColor={iconColor}
+            />
+          </Pressable>
+        )}
+      </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>
+      )}
+    </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 };