@wecareu/input-text 0.1.1

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@wecareu/input-text",
+  "version": "0.1.1",
+  "description": "Campo de texto controlado do design system WeCareU com suporte a ícones e feedback de erro",
+  "keywords": [
+    "react-native",
+    "input",
+    "text",
+    "design-system",
+    "wecareu"
+  ],
+  "license": "UNLICENSED",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "react-native": "lib/module/index.js",
+  "types": "lib/typescript/src/index.d.ts",
+  "files": [
+    "lib",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "clean": "rimraf lib",
+    "lint": "eslint .",
+    "test": "jest"
+  },
+  "peerDependencies": {
+    "@wecareu/icons": "*",
+    "@wecareu/theme": "*",
+    "@wecareu/tokens": "*",
+    "react": ">=18.2.0",
+    "react-native": ">=0.74.0-0 <0.76.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-native": "^5.4.3",
+    "@testing-library/react-native": "^12.7.2",
+    "@types/jest": "^29.5.0",
+    "jest": "^29.7.0",
+    "react": "18.2.0",
+    "react-native": "0.74.5",
+    "react-native-builder-bob": "^0.23.2",
+    "typescript": "^5.4.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/src/index.d.ts",
+      "react-native": "./lib/module/index.js",
+      "import": "./lib/module/index.js",
+      "require": "./lib/commonjs/index.js"
+    }
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  }
+}

package/src/InputText.tsx

@@ -0,0 +1,451 @@
+import React from 'react'
+
+import { Animated, StyleSheet, TextInput, View } from 'react-native'
+import type { KeyboardTypeOptions, TextInputProps } from 'react-native'
+
+import { useTheme } from '@wecareu/theme'
+import type { Theme } from '@wecareu/theme'
+
+import type { InputTextLocale, InputTextProps, InputTextType } from './InputText.types'
+import { InputTextErrorMessage } from './InputTextErrorMessage'
+import { InputTextIcon } from './InputTextIcon'
+import { useShakeAnimation } from './animations/shake'
+
+interface AutoConfig {
+  formatter?: (value: string) => string
+  parser?: (input: string) => string
+  validator?: (value: string) => boolean
+  keyboardType?: KeyboardTypeOptions
+  textContentType?: TextInputProps['textContentType']
+  secureTextEntry?: boolean
+}
+
+export const InputText = React.forwardRef<TextInput, InputTextProps>(function InputText(
+  {
+    accessibilityRole,
+    accessibilityState,
+    accessibilityValue: accessibilityValueProp,
+    disabled = false,
+    errorMessage,
+    formatter,
+    inputError = false,
+    inputStyle,
+    leftIcon,
+    locale = 'pt',
+    maskNumber = false,
+    maxLength = 255,
+    minLength = 3,
+    nextInputRef,
+    onChangeText,
+    onSubmitEditing,
+    onValidation,
+    parser,
+    placeholder,
+    readonly = false,
+    rightIcon,
+    style,
+    testID,
+    type = 'text',
+    validateOnBlur = true,
+    validationMessage,
+    validator,
+    validatorMessage,
+    value,
+    ...rest
+  }: InputTextProps,
+  ref
+) {
+  const theme = useTheme()
+  const styles = React.useMemo(() => createStyles(theme), [theme])
+  const isEditable = !(disabled || readonly)
+  const placeholderColor = theme.colors.text.tertiary
+  const { animatedStyle, triggerShake } = useShakeAnimation({
+    distance: theme.spacing.sm
+  })
+  const [touched, setTouched] = React.useState(false)
+
+  const autoConfig = React.useMemo(() => getAutoConfig({ locale, maskNumber, type }), [locale, maskNumber, type])
+
+  const appliedFormatter = formatter ?? autoConfig.formatter
+  const appliedParser = parser ?? autoConfig.parser
+  const appliedValidator = validator ?? autoConfig.validator
+
+  const {
+    keyboardType: propKeyboardType,
+    secureTextEntry: propSecureTextEntry,
+    textContentType: propTextContentType,
+    onBlur: textInputOnBlur,
+    onEndEditing: textInputOnEndEditing,
+    ...textInputProps
+  } = rest as TextInputProps
+
+  const appliedKeyboardType = propKeyboardType ?? autoConfig.keyboardType
+  const appliedTextContentType = propTextContentType ?? autoConfig.textContentType
+  const appliedSecureTextEntry = propSecureTextEntry ?? autoConfig.secureTextEntry ?? false
+
+  const displayValue = React.useMemo(
+    () => (appliedFormatter ? appliedFormatter(value) : value),
+    [appliedFormatter, value]
+  )
+
+  const lengthInvalid = value.length < minLength || value.length > maxLength
+  const validatorInvalid = appliedValidator ? !appliedValidator(value) : false
+  const internalHasError = touched && validateOnBlur && isEditable && (lengthInvalid || validatorInvalid)
+
+  const shouldShowError = inputError || internalHasError
+  const effectiveErrorMessage = inputError
+    ? errorMessage
+    : internalHasError
+      ? validatorInvalid
+        ? validatorMessage
+        : lengthInvalid
+          ? validationMessage
+          : undefined
+      : undefined
+
+  const previousErrorRef = React.useRef(false)
+
+  React.useEffect(() => {
+    if (!validateOnBlur || !isEditable) {
+      return
+    }
+    if (!touched) {
+      return
+    }
+    onValidation?.(!internalHasError)
+  }, [internalHasError, isEditable, onValidation, touched, validateOnBlur])
+
+  React.useEffect(() => {
+    if (shouldShowError && !previousErrorRef.current) {
+      triggerShake()
+    }
+    previousErrorRef.current = shouldShowError
+  }, [shouldShowError, triggerShake])
+
+  const handleChangeText = React.useCallback(
+    (text: string) => {
+      if (!isEditable) {
+        return
+      }
+
+      const parsedValue = appliedParser ? appliedParser(text) : text
+      onChangeText(parsedValue)
+    },
+    [appliedParser, isEditable, onChangeText]
+  )
+
+  const notifyValidIfDisabled = React.useCallback(() => {
+    if (!validateOnBlur) {
+      onValidation?.(true)
+    }
+  }, [onValidation, validateOnBlur])
+
+  const handleBlur = React.useCallback(
+    (event: Parameters<NonNullable<TextInputProps['onBlur']>>[0]) => {
+      setTouched(true)
+      notifyValidIfDisabled()
+      textInputOnBlur?.(event)
+    },
+    [notifyValidIfDisabled, textInputOnBlur]
+  )
+
+  const handleEndEditing = React.useCallback(
+    (event: Parameters<NonNullable<TextInputProps['onEndEditing']>>[0]) => {
+      setTouched(true)
+      notifyValidIfDisabled()
+      textInputOnEndEditing?.(event)
+    },
+    [notifyValidIfDisabled, textInputOnEndEditing]
+  )
+
+  const handleSubmitEditing = React.useCallback(
+    (event: Parameters<NonNullable<typeof onSubmitEditing>>[0]) => {
+      setTouched(true)
+      notifyValidIfDisabled()
+
+      onSubmitEditing?.(event)
+
+      if (nextInputRef?.current) {
+        nextInputRef.current.focus()
+      }
+    },
+    [nextInputRef, notifyValidIfDisabled, onSubmitEditing]
+  )
+
+  const mergedAccessibilityState = React.useMemo(
+    () => ({
+      ...accessibilityState,
+      disabled: !isEditable,
+      invalid: shouldShowError
+    }),
+    [accessibilityState, isEditable, shouldShowError]
+  )
+
+  const mergedAccessibilityValue = React.useMemo(
+    () => ({
+      ...accessibilityValueProp,
+      max: maxLength,
+      min: minLength,
+      now: value.length
+    }),
+    [accessibilityValueProp, maxLength, minLength, value]
+  )
+
+  const role = accessibilityRole ?? 'text'
+
+  return (
+    <View style={styles.wrapper}>
+      <Animated.View
+        accessible={false}
+        style={[
+          styles.container,
+          !isEditable && styles.containerDisabled,
+          shouldShowError && styles.containerError,
+          animatedStyle,
+          style
+        ]}
+        testID={testID}
+      >
+        {leftIcon ? (
+          <View style={styles.iconLeft}>
+            <InputTextIcon {...leftIcon} />
+          </View>
+        ) : null}
+
+        <TextInput
+          {...textInputProps}
+          accessibilityRole={role}
+          accessibilityState={mergedAccessibilityState}
+          accessibilityValue={mergedAccessibilityValue}
+          editable={isEditable}
+          keyboardType={appliedKeyboardType}
+          maxLength={maxLength}
+          onBlur={handleBlur}
+          onChangeText={handleChangeText}
+          onEndEditing={handleEndEditing}
+          onSubmitEditing={handleSubmitEditing}
+          placeholder={placeholder}
+          placeholderTextColor={placeholderColor}
+          ref={ref}
+          secureTextEntry={appliedSecureTextEntry}
+          selectionColor={theme.colors.brand.primary}
+          style={[styles.input, !isEditable && styles.inputDisabled, inputStyle]}
+          textContentType={appliedTextContentType}
+          value={displayValue}
+        />
+
+        {rightIcon ? (
+          <View style={styles.iconRight}>
+            <InputTextIcon {...rightIcon} />
+          </View>
+        ) : null}
+      </Animated.View>
+
+      <InputTextErrorMessage
+        message={shouldShowError ? effectiveErrorMessage : undefined}
+        testID={effectiveErrorMessage ? `${testID ?? 'input-text'}-error` : undefined}
+      />
+    </View>
+  )
+})
+
+function createStyles(theme: Theme) {
+  return StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      backgroundColor: 'transparent',
+      borderColor: theme.colors.brand.primary,
+      borderRadius: theme.radius.xxl,
+      borderWidth: 1,
+      flexDirection: 'row',
+      paddingHorizontal: theme.spacing.md,
+      paddingVertical: theme.spacing.sm,
+      width: '100%'
+    },
+    containerDisabled: {
+      backgroundColor: theme.colors.surface.disabled,
+      borderColor: theme.colors.border.disabled
+    },
+    containerError: {
+      borderColor: theme.colors.status.error
+    },
+    iconLeft: {
+      marginRight: theme.spacing.xs
+    },
+    iconRight: {
+      marginLeft: theme.spacing.xs
+    },
+    input: {
+      color: theme.colors.text.primary,
+      flex: 1,
+      fontFamily: theme.typography.fontFamily.body,
+      fontSize: theme.typography.fontSize.md,
+      lineHeight: theme.typography.lineHeight.bodySmall,
+      textAlign: 'center'
+    },
+    inputDisabled: {
+      color: theme.colors.text.disabled
+    },
+    wrapper: {
+      width: '100%'
+    }
+  })
+}
+
+interface AutoConfigOptions {
+  locale: InputTextLocale
+  maskNumber: boolean
+  type: InputTextType
+}
+
+function getAutoConfig({ locale, maskNumber, type }: AutoConfigOptions): AutoConfig {
+  switch (type) {
+    case 'email':
+      return {
+        keyboardType: 'email-address',
+        textContentType: 'emailAddress',
+        validator: validateEmail
+      }
+    case 'password':
+      return {
+        secureTextEntry: true,
+        textContentType: 'password'
+      }
+    case 'number':
+      return {
+        formatter: maskNumber ? value => formatNumber(value, locale) : undefined,
+        keyboardType: 'numeric',
+        parser: maskNumber ? input => parseNumberInput(input) : input => sanitizeDigits(input)
+      }
+    case 'url':
+      return {
+        keyboardType: 'url',
+        textContentType: 'URL',
+        validator: validateUrl
+      }
+    case 'tel':
+      return {
+        formatter: value => formatTel(value, locale),
+        keyboardType: 'phone-pad',
+        parser: input => parseTelInput(input, locale),
+        textContentType: 'telephoneNumber',
+        validator: value => validateTel(value, locale)
+      }
+    default:
+      return {}
+  }
+}
+
+function sanitizeDigits(value: string): string {
+  return value.replace(/\D/g, '')
+}
+
+function formatNumber(value: string, locale: InputTextLocale): string {
+  const digits = sanitizeDigits(value)
+  if (!digits) {
+    return ''
+  }
+
+  const reversed = digits.split('').reverse()
+  const groups: string[] = []
+
+  for (let i = 0; i < reversed.length; i += 3) {
+    groups.push(
+      reversed
+        .slice(i, i + 3)
+        .reverse()
+        .join('')
+    )
+  }
+
+  const separator = locale === 'pt' ? '.' : ','
+  return groups.reverse().join(separator)
+}
+
+function parseNumberInput(input: string): string {
+  return sanitizeDigits(input)
+}
+
+function formatTel(value: string, locale: InputTextLocale): string {
+  const digits = sanitizeDigits(value)
+  if (!digits) {
+    return ''
+  }
+
+  if (locale === 'en') {
+    const cc = digits.slice(0, 1)
+    const area = digits.slice(1, 4)
+    const first = digits.slice(4, 7)
+    const last = digits.slice(7, 11)
+
+    let result = cc ? `+${cc}` : '+'
+    if (area) {
+      result += ` (${area}`
+      if (area.length === 3) {
+        result += ')'
+      }
+    }
+    if (first) {
+      result += area.length < 3 ? ')' : ''
+      result += ` ${first}`
+    }
+    if (last) {
+      result += `-${last}`
+    }
+    return result.trim()
+  }
+
+  const cc = digits.slice(0, 2)
+  const area = digits.slice(2, 4)
+  const withoutArea = digits.slice(4)
+
+  let result = cc ? `+${cc}` : '+'
+  if (area) {
+    result += ` (${area}`
+    if (area.length === 2) {
+      result += ')'
+    }
+  }
+
+  if (withoutArea.length >= 5) {
+    result += area.length < 2 ? ')' : ''
+    const firstBlock = withoutArea.slice(0, withoutArea.length - 4)
+    const lastBlock = withoutArea.slice(-4)
+    result += ` ${firstBlock}-${lastBlock}`
+  } else if (withoutArea) {
+    result += area.length < 2 ? ')' : ''
+    result += ` ${withoutArea}`
+  }
+
+  return result.trim()
+}
+
+function parseTelInput(input: string, locale: InputTextLocale): string {
+  const digits = sanitizeDigits(input)
+  const limit = locale === 'en' ? 11 : 13
+  return digits.slice(0, limit)
+}
+
+function validateEmail(value: string): boolean {
+  if (!value) {
+    return false
+  }
+  const regex = /.+@.+\..+/
+  return regex.test(value)
+}
+
+function validateUrl(value: string): boolean {
+  if (!value) {
+    return false
+  }
+  const regex = /^(https?:\/\/).+/i
+  return regex.test(value)
+}
+
+function validateTel(value: string, locale: InputTextLocale): boolean {
+  const digits = sanitizeDigits(value)
+  if (locale === 'en') {
+    return digits.length === 11
+  }
+  return digits.length >= 12 && digits.length <= 13
+}

package/src/InputText.types.ts

@@ -0,0 +1,153 @@
+import type { RefObject } from 'react'
+
+import type { StyleProp, TextInput, TextInputProps, TextStyle, ViewStyle } from 'react-native'
+
+import type { IconName } from '@wecareu/icons'
+
+export type InputTextType = 'text' | 'email' | 'password' | 'number' | 'url' | 'tel'
+
+export type InputTextLocale = 'pt' | 'en'
+
+export interface InputTextErrorMessageProps {
+  /**
+   * Text displayed underneath the field when it is in error state
+   */
+  message?: string
+  /**
+   * Optional identifier exposed for automated tests
+   */
+  testID?: string
+}
+
+export interface InputTextIconProps {
+  /**
+   * Accessibility label announced for screen readers
+   */
+  accessibilityLabel?: string
+  /**
+   * Icon tint color. Falls back to theme.colors.text.tertiary when undefined
+   */
+  color?: string
+  /**
+   * Icon identifier available in WeCareU icons package
+   */
+  name: IconName
+  /**
+   * Press handler triggered when icon is tapped
+   */
+  onPress?: () => void
+  /**
+   * Icon size in pixels. Defaults to theme.spacing.lg
+   */
+  size?: number
+  /**
+   * Testing identifier used in automated tests
+   */
+  testID?: string
+}
+
+export interface InputTextProps
+  extends Omit<TextInputProps, 'editable' | 'onChangeText' | 'placeholderTextColor' | 'style' | 'value'> {
+  /**
+   * Callback invoked with the raw value (without mask) whenever text changes
+   */
+  onChangeText: (value: string) => void
+  /**
+   * Defines the controlled value without mask formatting
+   */
+  value: string
+  /**
+   * Defines locale used for automatic formatting/validation when type requires it
+   */
+  locale?: InputTextLocale
+  /**
+   * Enables automatic masking for numeric inputs (thousands separators)
+   */
+  maskNumber?: boolean
+  /**
+   * Semantic type used to infer validation and masking rules
+   */
+  type?: InputTextType
+  /**
+   * Displays a disabled appearance and blocks user interaction
+   */
+  disabled?: boolean
+  /**
+   * Optional error message rendered below the field when in error state
+   */
+  errorMessage?: string
+  /**
+   * Transforms the controlled raw value into a formatted string for display
+   */
+  formatter?: (value: string) => string
+  /**
+   * Shows the component using error tokens, triggering shake animation
+   */
+  inputError?: boolean
+  /**
+   * Applies style overrides directly to the TextInput element
+   */
+  inputStyle?: StyleProp<TextStyle>
+  /**
+   * Icon rendered on the left side of the field
+   */
+  leftIcon?: InputTextIconProps
+  /**
+   * Maximum length allowed for the displayed value. Defaults to 255
+   */
+  maxLength?: number
+  /**
+   * Minimum length expectation for the raw value. Defaults to 3
+   */
+  minLength?: number
+  /**
+   * Reference to the next input triggered when submitting the keyboard action
+   */
+  nextInputRef?: RefObject<TextInput>
+  /**
+   * Receives the validation status whenever internal validation runs.
+   */
+  onValidation?: (isValid: boolean) => void
+  /**
+   * Parses the masked value typed by the user back into raw format
+   */
+  parser?: (value: string) => string
+  /**
+   * Placeholder string displayed when empty
+   */
+  placeholder?: string
+  /**
+   * Renders the field as read-only, mirroring disabled visuals
+   */
+  readonly?: boolean
+  /**
+   * Icon rendered on the right side of the field
+   */
+  rightIcon?: InputTextIconProps
+  /**
+   * Applies style overrides to the container View
+   */
+  style?: StyleProp<ViewStyle>
+  /**
+   * Test identifier exposed on the container
+   */
+  testID?: string
+  /**
+   * Enables internal validation when the field loses focus.
+   * Defaults to true.
+   */
+  validateOnBlur?: boolean
+  /**
+   * Message displayed when internal validation fails (min/max length).
+   */
+  validationMessage?: string
+  /**
+   * Custom validator executed when validateOnBlur is enabled.
+   * Return true for valid values.
+   */
+  validator?: (value: string) => boolean
+  /**
+   * Message displayed when custom validator returns false.
+   */
+  validatorMessage?: string
+}

package/src/InputTextErrorMessage.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import { Text } from 'react-native'
+
+import { useTheme } from '@wecareu/theme'
+
+import type { InputTextErrorMessageProps } from './InputText.types'
+
+export function InputTextErrorMessage({ message, testID }: InputTextErrorMessageProps): JSX.Element | null {
+  const theme = useTheme()
+  const errorTextStyle = React.useMemo(
+    () => ({
+      color: theme.colors.status.error,
+      fontFamily: theme.typography.fontFamily.caption,
+      fontSize: theme.typography.fontSize.sm,
+      lineHeight: theme.typography.lineHeight.labelMedium,
+      marginTop: theme.spacing.xs
+    }),
+    [theme]
+  )
+
+  if (!message) {
+    return null
+  }
+
+  return (
+    <Text accessibilityLiveRegion='polite' style={errorTextStyle} testID={testID}>
+      {message}
+    </Text>
+  )
+}