@wecareu/input-text 0.1.1

package/src/InputTextIcon.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+
+import { Pressable, StyleSheet, TouchableOpacity, View } from 'react-native'
+
+import { Icon } from '@wecareu/icons'
+import { useTheme } from '@wecareu/theme'
+
+import type { InputTextIconProps } from './InputText.types'
+
+export function InputTextIcon({
+  accessibilityLabel,
+  color,
+  name,
+  onPress,
+  size,
+  testID
+}: InputTextIconProps): JSX.Element {
+  const theme = useTheme()
+
+  const iconColor = color ?? theme.colors.text.tertiary
+  const iconSize = size ?? theme.spacing.lg
+  const hitSlop = React.useMemo(
+    () => ({
+      bottom: theme.spacing.xs,
+      left: theme.spacing.xs,
+      right: theme.spacing.xs,
+      top: theme.spacing.xs
+    }),
+    [theme.spacing.xs]
+  )
+
+  if (onPress) {
+    const InteractiveComponent = Pressable ?? TouchableOpacity
+
+    return (
+      <InteractiveComponent
+        accessibilityLabel={accessibilityLabel ?? name}
+        accessibilityRole='button'
+        hitSlop={hitSlop}
+        onPress={onPress}
+        style={styles.iconPressable}
+        testID={testID}
+      >
+        <Icon color={iconColor} name={name} size={iconSize} />
+      </InteractiveComponent>
+    )
+  }
+
+  return (
+    <View accessible={false} style={styles.iconWrapper} testID={testID}>
+      <Icon accessibilityLabel={accessibilityLabel} color={iconColor} name={name} size={iconSize} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  iconPressable: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  iconWrapper: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+})

package/src/animations/shake.ts

@@ -0,0 +1,76 @@
+import { useCallback, useMemo, useRef } from 'react'
+
+import { Animated } from 'react-native'
+
+interface UseShakeAnimationParams {
+  /**
+   * Distance in pixels applied to the shake translation
+   */
+  distance?: number
+  /**
+   * Duration of each shake step in milliseconds
+   */
+  duration?: number
+  /**
+   * Number of oscillations executed per trigger
+   */
+  iterations?: number
+}
+
+interface UseShakeAnimationReturn {
+  /**
+   * Animated style applied to the container that needs feedback
+   */
+  animatedStyle: {
+    transform: { translateX: Animated.AnimatedInterpolation<number> }[]
+  }
+  /**
+   * Function responsible for starting the shake effect
+   */
+  triggerShake: () => void
+}
+
+export function useShakeAnimation({
+  distance = 6,
+  duration = 60,
+  iterations = 2
+}: UseShakeAnimationParams = {}): UseShakeAnimationReturn {
+  const translation = useRef(new Animated.Value(0)).current
+
+  const animatedStyle = useMemo(
+    () => ({
+      transform: [
+        {
+          translateX: translation.interpolate({
+            inputRange: [-1, -0.5, 0, 0.5, 1],
+            outputRange: [-distance, -distance / 2, 0, distance / 2, distance]
+          })
+        }
+      ]
+    }),
+    [distance, translation]
+  )
+
+  const triggerShake = useCallback(() => {
+    translation.setValue(0)
+
+    const animation = Animated.sequence([
+      Animated.timing(translation, {
+        duration,
+        toValue: 1,
+        useNativeDriver: true
+      }),
+      Animated.timing(translation, {
+        duration,
+        toValue: -1,
+        useNativeDriver: true
+      })
+    ])
+
+    Animated.loop(animation, { iterations }).start(() => {
+      translation.setValue(0)
+    })
+  }, [duration, iterations, translation])
+
+  return { animatedStyle, triggerShake }
+}

package/src/index.stories.tsx

@@ -0,0 +1,387 @@
+import React from 'react'
+
+import { StyleSheet, TextInput, View } from 'react-native'
+import type { KeyboardTypeOptions } from 'react-native'
+
+import { action } from '@storybook/addon-actions'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ICON_NAMES } from '@wecareu/icons'
+
+import { InputText } from '.'
+import type { InputTextProps } from './InputText.types'
+
+const ICON_OPTIONS = ['none', ...ICON_NAMES] as const
+const INPUT_TYPE_OPTIONS = ['text', 'email', 'password', 'number', 'phone', 'url'] as const
+const KEYBOARD_OPTIONS: KeyboardTypeOptions[] = [
+  'default',
+  'email-address',
+  'numeric',
+  'phone-pad',
+  'url',
+  'visible-password'
+]
+const TEXT_CONTENT_OPTIONS = [
+  'none',
+  'emailAddress',
+  'username',
+  'password',
+  'oneTimeCode',
+  'telephoneNumber',
+  'URL'
+] as const
+
+interface StatefulInputProps extends Omit<InputTextProps, 'onChangeText' | 'value'> {
+  initialValue?: string
+  onChangeText: (value: string) => void
+}
+
+interface DefaultStoryArgs extends StatefulInputProps {
+  inputType: (typeof INPUT_TYPE_OPTIONS)[number]
+  keyboardType: KeyboardTypeOptions
+  leftIconName?: (typeof ICON_OPTIONS)[number]
+  rightIconName?: (typeof ICON_OPTIONS)[number]
+  textContentType?: (typeof TEXT_CONTENT_OPTIONS)[number]
+  validatorPattern?: string
+}
+
+type Story = StoryObj<DefaultStoryArgs>
+
+function StatefulInput({ initialValue = '', onChangeText, ...rest }: StatefulInputProps) {
+  const [value, setValue] = React.useState(initialValue)
+
+  const handleChange = React.useCallback(
+    (nextValue: string) => {
+      setValue(nextValue)
+      onChangeText(nextValue)
+    },
+    [onChangeText]
+  )
+
+  return <InputText {...rest} onChangeText={handleChange} value={value} />
+}
+
+const meta: Meta<DefaultStoryArgs> = {
+  args: {
+    disabled: false,
+    initialValue: '',
+    inputError: false,
+    inputType: 'text',
+    keyboardType: 'default',
+    leftIconName: 'none',
+    locale: 'pt',
+    maskNumber: false,
+    maxLength: 255,
+    minLength: 3,
+    onChangeText: action('onChangeText'),
+    placeholder: 'Digite seu texto',
+    readonly: false,
+    rightIconName: 'none',
+    secureTextEntry: false,
+    textContentType: 'none',
+    validateOnBlur: true,
+    validationMessage: 'Digite ao menos 3 caracteres',
+    validatorMessage: 'Informe um valor válido',
+    validatorPattern: ''
+  },
+  argTypes: {
+    disabled: { control: 'boolean' },
+    formatter: { control: false },
+    initialValue: { control: 'text' },
+    inputError: { control: 'boolean' },
+    inputStyle: { control: false },
+    inputType: {
+      control: { type: 'select' },
+      options: INPUT_TYPE_OPTIONS
+    },
+    keyboardType: {
+      control: { type: 'select' },
+      options: KEYBOARD_OPTIONS
+    },
+    leftIcon: { control: false },
+    leftIconName: {
+      control: { type: 'select' },
+      options: ICON_OPTIONS
+    },
+    locale: {
+      control: { type: 'select' },
+      options: ['pt', 'en']
+    },
+    maskNumber: { control: 'boolean' },
+    maxLength: { control: { min: 1, step: 1, type: 'number' } },
+    minLength: { control: { min: 0, step: 1, type: 'number' } },
+    nextInputRef: { control: false },
+    onChangeText: { control: false },
+    parser: { control: false },
+    placeholder: { control: 'text' },
+    readonly: { control: 'boolean' },
+    rightIcon: { control: false },
+    rightIconName: {
+      control: { type: 'select' },
+      options: ICON_OPTIONS
+    },
+    secureTextEntry: { control: 'boolean' },
+    style: { control: false },
+    textContentType: {
+      control: { type: 'select' },
+      options: TEXT_CONTENT_OPTIONS
+    },
+    validateOnBlur: { control: 'boolean' },
+    validationMessage: { control: 'text' },
+    validator: { control: false },
+    validatorMessage: { control: 'text' },
+    validatorPattern: { control: 'text' },
+    value: { control: false }
+  },
+  component: InputText,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  title: 'Forms/InputText'
+}
+
+export default meta
+
+export const Default: Story = {
+  render: args => {
+    const {
+      initialValue,
+      inputType,
+      keyboardType,
+      leftIconName,
+      locale,
+      maskNumber,
+      rightIconName,
+      textContentType,
+      validatorPattern,
+      validatorMessage,
+      ...inputArgs
+    } = args
+
+    let derivedPlaceholder = inputArgs.placeholder
+    let derivedSecureTextEntry = inputArgs.secureTextEntry
+    let derivedKeyboardType = keyboardType
+    let derivedTextContentType = textContentType
+    let derivedValidatorPattern = validatorPattern
+    let derivedValidatorMessage = validatorMessage
+
+    switch (inputType) {
+      case 'email':
+        derivedPlaceholder = 'Email'
+        derivedSecureTextEntry = false
+        derivedKeyboardType = 'email-address'
+        derivedTextContentType = 'emailAddress'
+        derivedValidatorPattern = '.+@.+\\..+'
+        derivedValidatorMessage = validatorMessage || 'Informe um email válido'
+        break
+      case 'password':
+        derivedPlaceholder = 'Senha'
+        derivedSecureTextEntry = true
+        derivedKeyboardType = 'visible-password'
+        derivedTextContentType = 'password'
+        derivedValidatorPattern = validatorPattern
+        derivedValidatorMessage = validatorMessage || 'Informe uma senha válida'
+        break
+      case 'number':
+        derivedPlaceholder = 'Número'
+        derivedSecureTextEntry = false
+        derivedKeyboardType = 'numeric'
+        derivedTextContentType = 'none'
+        derivedValidatorPattern = validatorPattern || '^[0-9]+$'
+        derivedValidatorMessage = validatorMessage || 'Informe apenas números'
+        break
+      case 'phone':
+        derivedPlaceholder = 'Telefone'
+        derivedSecureTextEntry = false
+        derivedKeyboardType = 'phone-pad'
+        derivedTextContentType = 'telephoneNumber'
+        derivedValidatorPattern = validatorPattern || '^[0-9()\\s+-]{6,}$'
+        derivedValidatorMessage = validatorMessage || 'Informe um telefone válido'
+        break
+      case 'url':
+        derivedPlaceholder = 'URL'
+        derivedSecureTextEntry = false
+        derivedKeyboardType = 'url'
+        derivedTextContentType = 'URL'
+        derivedValidatorPattern = validatorPattern || '^(https?:\\/\\/).+'
+        derivedValidatorMessage = validatorMessage || 'Informe uma URL válida'
+        break
+      default:
+        derivedPlaceholder = derivedPlaceholder || 'Digite seu texto'
+        derivedSecureTextEntry = false
+        derivedKeyboardType = 'default'
+        derivedTextContentType = 'none'
+        derivedValidatorPattern = validatorPattern
+        derivedValidatorMessage = validatorMessage || 'Informe um valor válido'
+        break
+    }
+
+    let patternValidator: ((value: string) => boolean) | undefined
+
+    if (derivedValidatorPattern && derivedValidatorPattern.trim().length > 0) {
+      try {
+        const regex = new RegExp(derivedValidatorPattern)
+        patternValidator = value => regex.test(value)
+      } catch {
+        patternValidator = undefined
+      }
+    }
+
+    const leftIcon = leftIconName && leftIconName !== 'none' ? { name: leftIconName } : undefined
+    const rightIcon = rightIconName && rightIconName !== 'none' ? { name: rightIconName } : undefined
+
+    const finalValidator = patternValidator ?? inputArgs.validator
+    const finalValidatorMessage = patternValidator ? derivedValidatorMessage : inputArgs.validatorMessage
+
+    return (
+      <View style={styles.container}>
+        <StatefulInput
+          {...inputArgs}
+          initialValue={initialValue ?? ''}
+          keyboardType={derivedKeyboardType}
+          leftIcon={leftIcon}
+          locale={locale}
+          maskNumber={maskNumber}
+          placeholder={derivedPlaceholder}
+          rightIcon={rightIcon}
+          secureTextEntry={derivedSecureTextEntry}
+          textContentType={derivedTextContentType === 'none' ? undefined : derivedTextContentType}
+          type={inputType}
+          validator={finalValidator}
+          validatorMessage={finalValidatorMessage}
+        />
+      </View>
+    )
+  }
+}
+
+export const WithError: Story = {
+  render: args => (
+    <View style={styles.container}>
+      <StatefulInput {...args} errorMessage='Campo obrigatório' initialValue='texto' inputError />
+    </View>
+  )
+}
+
+export const Disabled: Story = {
+  render: args => (
+    <View style={styles.container}>
+      <StatefulInput {...args} disabled initialValue='texto desabilitado' />
+    </View>
+  )
+}
+
+export const Readonly: Story = {
+  render: args => (
+    <View style={styles.container}>
+      <StatefulInput {...args} initialValue='valor somente leitura' readonly />
+    </View>
+  )
+}
+
+export const WithLeftIcon: Story = {
+  render: args => (
+    <View style={styles.container}>
+      <StatefulInput {...args} initialValue='' leftIcon={{ name: 'search' }} placeholder='Buscar' />
+    </View>
+  )
+}
+
+export const WithRightIcon: Story = {
+  render: args => (
+    <View style={styles.container}>
+      <StatefulInput {...args} initialValue='andre@wecareu.com' placeholder='Email' rightIcon={{ name: 'mail' }} />
+    </View>
+  )
+}
+
+export const PasswordToggle: Story = {
+  render: args => {
+    const [secure, setSecure] = React.useState(true)
+
+    return (
+      <View style={styles.container}>
+        <StatefulInput
+          {...args}
+          initialValue=''
+          placeholder='Senha'
+          rightIcon={{
+            accessibilityLabel: secure ? 'Mostrar senha' : 'Ocultar senha',
+            name: secure ? 'eyeOff' : 'eyeOn',
+            onPress: () => setSecure(previous => !previous)
+          }}
+          secureTextEntry={secure}
+        />
+      </View>
+    )
+  }
+}
+
+export const WithMask: Story = {
+  render: args => {
+    const formatter = React.useCallback((raw: string) => {
+      const digits = raw.replace(/\D/g, '').slice(0, 11)
+      return digits
+        .replace(/(\d{3})(\d)/, '$1.$2')
+        .replace(/(\d{3})(\d)/, '$1.$2')
+        .replace(/(\d{3})(\d{1,2})$/, '$1-$2')
+    }, [])
+
+    const parser = React.useCallback((masked: string) => masked.replace(/\D/g, ''), [])
+
+    return (
+      <View style={styles.container}>
+        <StatefulInput {...args} formatter={formatter} initialValue='12345678901' placeholder='CPF' parser={parser} />
+      </View>
+    )
+  }
+}
+
+export const FocusChain: Story = {
+  render: args => {
+    const secondInputRef = React.useRef<TextInput>(null)
+    const [first, setFirst] = React.useState('')
+    const [second, setSecond] = React.useState('')
+    const { onChangeText, ...rest } = args
+
+    return (
+      <View style={styles.column}>
+        <InputText
+          {...rest}
+          nextInputRef={secondInputRef}
+          onChangeText={value => {
+            setFirst(value)
+            onChangeText(value)
+          }}
+          placeholder='Primeiro campo'
+          value={first}
+        />
+        <View style={styles.columnSpacing}>
+          <InputText
+            {...rest}
+            onChangeText={value => {
+              setSecond(value)
+              onChangeText(value)
+            }}
+            placeholder='Segundo campo'
+            ref={secondInputRef}
+            value={second}
+          />
+        </View>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  column: {
+    width: '100%'
+  },
+  columnSpacing: {
+    marginTop: 16
+  },
+  container: {
+    width: 320
+  }
+})

package/src/index.tsx

@@ -0,0 +1,2 @@
+export { InputText } from './InputText'
+export type { InputTextErrorMessageProps, InputTextIconProps, InputTextProps } from './InputText.types'