US-1142: new design for textinput component (#327)

* add avatar generator lib

* add avatar icon to search domain screen

* change white to light purple on choose alias screen

* add avatar icon to request domain screen

* add .rsk suffix automatically

* add avatar icon for futher steps

* add alias icon to header

* change alias icon background to white

* For better readability

* check if profile.alias exists

* show placeholder image when no alias

* remove no valid message for alias length less than 5 chars

* styles

* does not allow small alias

* swap minus and plus icons

* remove duplicate dependency

* create base input

* add suffix

* use text input props

* apply fontSize to suffix

* add padding to domain availabilty

* encapsulate common attributes

* use BaseInput in TextInputWithLabel

* use TextInputWithLabel in ProfileCreateScreen

* show digits only for phone input

* lint

* adjust suffix top

* feedback labels to lower case

* function call on press

* use switch statement

* create some enums

* lint

* add optional label

* use useMemo to avoid re-computing

* use useCallback on ProfileCreateScreen

* fix

src/components/input/BaseInput.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import {
+  ColorValue,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextInputProps,
+  TextStyle,
+  View,
+} from 'react-native'
+import { TextInput } from 'react-native-gesture-handler'
+import { colors } from '../../styles'
+import { fonts } from '../../styles/fonts'
+import { BaseInputStatus } from '../shared'
+
+interface Props {
+  inputStyle?: StyleProp<TextStyle>
+  setValue?: (value: string) => void
+  status?: BaseInputStatus
+  suffix?: string
+}
+
+export const BaseInput: React.FC<TextInputProps & Props> = ({
+  inputStyle = {},
+  setValue,
+  status = BaseInputStatus.NONE,
+  suffix = '',
+  ...params
+}) => {
+  const { fontSize, borderColor, ...rest } = StyleSheet.flatten(inputStyle)
+
+  const getBorderColor = (
+    inputStatus: BaseInputStatus,
+    borderColorValue: ColorValue | undefined,
+  ) => {
+    switch (inputStatus) {
+      case BaseInputStatus.VALID:
+        return colors.border.green
+      case BaseInputStatus.INVALID:
+        return colors.border.red
+      case BaseInputStatus.NEUTRAL:
+        return colors.lightPurple
+      default:
+        return borderColorValue || 'transparent'
+    }
+  }
+
+  const borderColorValue = getBorderColor(status, borderColor)
+
+  const inputStyles = {
+    ...styles.input,
+    ...rest,
+    fontSize,
+    borderColor: borderColorValue,
+  }
+
+  return (
+    <View style={styles.container}>
+      <TextInput
+        style={inputStyles}
+        onChangeText={setValue}
+        maxLength={30}
+        placeholderTextColor={colors.text.secondary}
+        spellCheck={false}
+        autoCapitalize="none"
+        {...params}
+      />
+      {suffix ? (
+        <Text style={{ ...styles.suffix, fontSize }}>{suffix}</Text>
+      ) : null}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  input: {
+    flex: 1,
+    fontFamily: fonts.regular,
+    color: colors.lightPurple,
+    backgroundColor: colors.darkPurple4,
+    borderWidth: 1,
+    borderRadius: 15,
+    padding: 15,
+  },
+  suffix: {
+    position: 'absolute',
+    right: 15,
+    top: 18,
+    color: colors.lightPurple,
+  },
+})

src/components/input/TextInputWithLabel.tsx

@@ -1,61 +1,69 @@
 import React from 'react'
-import { StyleSheet, TextInput, View } from 'react-native'
+import {
+  StyleProp,
+  StyleSheet,
+  TextInputProps,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native'
 import { colors } from '../../styles'
-import { fonts } from '../../styles/fonts'
+import { BaseInputStatus } from '../shared'
 import { RegularText } from '../typography'
+import { BaseInput } from './BaseInput'
 
-interface TextInputInterface {
+interface Props {
   label: string
-  placeholder?: string
-  testID?: string
-  value: string
-  setValue: (value: string) => void
-  multiline?: boolean
-  inputStyle?: any
+  style?: StyleProp<ViewStyle>
+  inputStyle?: StyleProp<TextStyle>
+  setValue?: (value: string) => void
+  suffix?: string
+  status?: BaseInputStatus
+  optional?: boolean
 }
 
-export const TextInputWithLabel: React.FC<TextInputInterface> = ({
+export const TextInputWithLabel: React.FC<TextInputProps & Props> = ({
   label,
-  placeholder,
-  testID,
-  value,
-  setValue,
-  multiline,
+  style,
   inputStyle,
+  setValue,
+  suffix = '',
+  status = BaseInputStatus.NONE,
+  optional = false,
+  ...params
 }) => {
-  const inputStyles = inputStyle
-    ? { ...inputStyle, ...styles.input }
-    : styles.input
   return (
-    <View>
-      <RegularText style={styles.label}>{label}</RegularText>
-      <TextInput
-        testID={testID}
+    <View style={style}>
+      <View style={styles.labelView}>
+        <RegularText style={styles.label}>{label}</RegularText>
+        <RegularText style={styles.optional}>
+          {optional ? 'optional' : ''}
+        </RegularText>
+      </View>
+      <BaseInput
         accessibilityLabel="nameInput"
-        style={inputStyles}
-        onChangeText={setValue}
-        value={value}
-        placeholder={placeholder}
-        placeholderTextColor={colors.text.secondary}
-        multiline={multiline || false}
-        textAlignVertical="top"
+        inputStyle={inputStyle}
+        setValue={setValue}
+        status={status}
+        suffix={suffix}
+        {...params}
       />
     </View>
   )
 }
 
 const styles = StyleSheet.create({
+  labelView: {
+    flexDirection: 'row',
+  },
   label: {
-    color: colors.white,
+    color: colors.lightPurple,
     paddingLeft: 5,
-    paddingBottom: 10,
   },
-  input: {
-    color: colors.text.primary,
-    fontFamily: fonts.regular,
-    backgroundColor: colors.darkPurple4,
-    borderRadius: 15,
-    padding: 20,
-    marginBottom: 20,
+  optional: {
+    fontStyle: 'italic',
+    color: colors.lightPurple,
+    paddingLeft: 5,
+    opacity: 0.5,
   },
 })

src/components/shared.ts

@@ -0,0 +1,6 @@
+export enum BaseInputStatus {
+  VALID,
+  INVALID,
+  NEUTRAL,
+  NONE,
+}

src/screens/feedback/FeedbackScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { View, StyleSheet } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import { RegularText } from '../../components'
 import { PurpleButton } from '../../components/button/ButtonVariations'
 import { TextInputWithLabel } from '../../components/input/TextInputWithLabel'
@@ -36,26 +36,30 @@ export const FeedbackScreen: React.FC = () => {
       <RegularText style={styles.heading}>Feedback form</RegularText>
 
       <TextInputWithLabel
-        label="Name"
+        label="name"
         placeholder="your name"
         value={name}
         setValue={setName}
+        style={styles.input}
       />
 
       <TextInputWithLabel
-        label="Email"
+        label="email"
         placeholder="your email"
         value={email}
         setValue={setEmail}
+        style={styles.input}
       />
 
       <TextInputWithLabel
-        label="Comments"
+        label="comments"
         placeholder="your feedback"
         value={feedback}
         setValue={setFeedback}
         multiline={true}
         inputStyle={styles.feedback}
+        style={styles.input}
+        textAlignVertical="top"
       />
 
       <PurpleButton
@@ -79,6 +83,9 @@ const styles = StyleSheet.create({
     fontSize: 16,
     marginVertical: 20,
   },
+  input: {
+    marginBottom: 10,
+  },
   feedback: {
     paddingTop: 20,
     height: 150,