SC 2776: UI component input component phone

apps/hero/package.json

@@ -64,6 +64,7 @@
     "react-combine-providers": "^0.9.6",
     "react-dom": "18.2.0",
     "react-native": "0.72.5",
+    "react-native-country-picker-modal": "^2.0.0",
     "react-native-dotenv": "^3.4.9",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-safe-area-context": "4.6.3",

packages/common/src/modules/Auth/components/EmailSignInForm/index.tsx

@@ -30,12 +30,14 @@ export const EmailSignInForm: FC = () => {
   return (
     <VStack style={styles.container}>
       {/* TODO replace button label and placeholders with i18n call */}
-      <Input placeholder="Email" control={control} name="email" />
+      <Input placeholder="Email" control={control} name="email" title="Email" />
       <Input
         placeholder="Password"
         type="password"
         control={control}
         name="password"
+        title="Password"
+        size="md"
       />
       <Button variant="solid" size="md" onPress={onSubmit}>
         Continue

packages/ui/package.json

@@ -17,6 +17,9 @@
     "lint": "eslint . --fix"
   },
   "dependencies": {
+    "@callstack/react-theme-provider": "^3.0.9",
+    "@gluestack-style/animation-resolver": "^1.0.2",
+    "@gluestack-style/legend-motion-animation-driver": "^1.0.2",
     "@expo/html-elements": "^0.5.1",
     "@gluestack-style/react": "^1.0.8",
     "@gluestack-ui/button": "^0.1.33",
@@ -32,6 +35,9 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.47.0",
     "react-native": "^0.72.5",
+    "react-native-country-picker-modal": "^2.0.0",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "react-native-masked-text": "^1.13.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-svg": "^13.4.0",
     "react-native-web": "~0.19.6"

packages/ui/src/components/atoms/HStack/index.tsx

@@ -1,6 +1,5 @@
 import { HStack as GluestackHStack } from '@gluestack-ui/themed';
 import { FC, PropsWithChildren } from 'react';
-import { StyleSheet } from 'react-native';
 
 import { LayoutStyles } from '../../../types';
 
@@ -11,13 +10,5 @@ interface Props extends PropsWithChildren {
 export const HStack: FC<Props> = (props) => {
   const { children, style } = props;
 
-  return (
-    <GluestackHStack style={[styles.stack, style]}>{children}</GluestackHStack>
-  );
+  return <GluestackHStack style={style}>{children}</GluestackHStack>;
 };
-
-const styles = StyleSheet.create({
-  stack: {
-    paddingHorizontal: 8,
-  },
-});

packages/ui/src/components/atoms/KeyboardAwareScrollView/index.tsx

@@ -0,0 +1,17 @@
+import { FC, PropsWithChildren } from 'react';
+import { StyleSheet } from 'react-native';
+import { KeyboardAwareScrollView as RnKeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+
+export const KeyboardAwareScrollView: FC<PropsWithChildren> = (props) => {
+  const { children } = props;
+
+  return (
+    <RnKeyboardAwareScrollView style={styles.main}>
+      {children}
+    </RnKeyboardAwareScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  main: { flex: 1 },
+});

packages/ui/src/components/atoms/Text/index.tsx

@@ -1,12 +1,16 @@
 import { Text as GluestackText } from '@gluestack-ui/themed';
 import { FC } from 'react';
 
-interface Props {
-  children: string;
-}
+import { TextVariant } from './types';
 
-export const Text: FC<Props> = (props) => {
-  const { children } = props;
+import { Color } from '$theme/constants';
 
-  return <GluestackText>{children}</GluestackText>;
+export type TextProps = {
+  children: string;
+  color?: `${Color}`;
+  variant?: `${TextVariant}`;
 };
+
+export const Text: FC<TextProps> = ({ children, ...restProps }) => (
+  <GluestackText {...restProps}>{children}</GluestackText>
+);

packages/ui/src/components/atoms/Text/types.ts

@@ -0,0 +1,16 @@
+export enum TextSize {
+  XXS = 'xxs',
+  XS = 'xs',
+  SM = 'sm',
+  MD = 'md',
+  LG = 'lg',
+  XL = 'xl',
+  XXL = 'xxl',
+  XXXL = 'xxxl',
+}
+
+export enum TextVariant {
+  REGULAR = 'regular',
+  SMALL = 'small',
+  DESCRIPTOR = 'descriptor',
+}

packages/ui/src/components/atoms/VStack/index.tsx

@@ -1,6 +1,5 @@
 import { VStack as GluestackVStack } from '@gluestack-ui/themed';
 import { FC, PropsWithChildren } from 'react';
-import { StyleSheet } from 'react-native';
 
 import { LayoutStyles } from '$types';
 
@@ -11,13 +10,5 @@ interface Props extends PropsWithChildren {
 export const VStack: FC<Props> = (props) => {
   const { children, style } = props;
 
-  return (
-    <GluestackVStack style={[styles.stack, style]}>{children}</GluestackVStack>
-  );
+  return <GluestackVStack style={style}>{children}</GluestackVStack>;
 };
-
-const styles = StyleSheet.create({
-  stack: {
-    paddingHorizontal: 8,
-  },
-});

packages/ui/src/components/atoms/index.ts

@@ -1,7 +1,5 @@
 export * from './Button';
 export * from './HStack';
-export * from './Input';
-export * from './InputField';
 export * from './SafeAreaView';
 export * from './Text';
 export * from './Toast';
@@ -12,4 +10,5 @@ export * from './Actionsheet';
 export * from './Alert';
 export * from './RadioButton';
 export * from './RadioGroup';
+export * from './KeyboardAwareScrollView';
 export * from './IconButton';

packages/ui/src/components/index.ts

@@ -1,2 +1,3 @@
 export * from './atoms';
 export * from './molecules';
+export * from './organisms';

packages/ui/src/components/molecules/Input/components/InputField.tsx

@@ -0,0 +1,63 @@
+import { InputField as GluestackInputField } from '@gluestack-ui/themed';
+import { ReactElement } from 'react';
+import { ControllerRenderProps, FieldValues, Path } from 'react-hook-form';
+import { KeyboardType } from 'react-native';
+import { TextInputMask } from 'react-native-masked-text';
+
+import { InputType } from '../types';
+
+import { InputFieldProps } from './types';
+
+type Props<Type extends FieldValues> = {
+  field: ControllerRenderProps<Type, Path<Type>>;
+  keyboardType?: KeyboardType;
+  mask?: string;
+  placeholder?: string;
+  type?: `${InputType}`;
+};
+
+export const InputField = <Type extends FieldValues>(
+  props: Props<Type>,
+): ReactElement => {
+  const {
+    placeholder,
+    mask,
+    field,
+    type = InputType.TEXT,
+    keyboardType = 'default',
+  } = props;
+
+  const { onChange, value, ref } = field;
+
+  const isMasked = Boolean(mask);
+  const isPassword = type === InputType.PASSWORD;
+
+  const inputProps: InputFieldProps = {
+    ref,
+    placeholder,
+    type,
+    secureTextEntry: isPassword,
+    keyboardType,
+  };
+
+  if (isMasked) {
+    return (
+      <TextInputMask
+        type="custom"
+        customTextInput={GluestackInputField}
+        customTextInputProps={inputProps}
+        options={{ mask }}
+        onChangeText={onChange}
+        value={value}
+      />
+    );
+  }
+
+  return (
+    <GluestackInputField
+      value={value}
+      onChangeText={onChange}
+      {...inputProps}
+    />
+  );
+};

packages/ui/src/components/molecules/Input/components/InputHelper.tsx

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { FieldError } from 'react-hook-form';
+
+import { StyledInputHelper } from '$styled';
+
+type Props = {
+  error?: FieldError;
+};
+
+export const InputHelper: FC<Props> = (props): JSX.Element => {
+  const { error } = props;
+
+  const errorText = error?.message || '';
+
+  return <StyledInputHelper>{errorText}</StyledInputHelper>;
+};

packages/ui/src/components/molecules/Input/components/InputTitle.tsx

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+
+import { InputSize } from '../types';
+
+import { StyledInputTitle } from '$styled';
+
+type Props = {
+  size?: `${InputSize}`;
+  value?: string;
+};
+
+export const InputTitle: FC<Props> = (props) => {
+  const { value, ...restProps } = props;
+
+  if (!value) {
+    return null;
+  }
+
+  return <StyledInputTitle {...restProps}>{value}</StyledInputTitle>;
+};

packages/ui/src/components/molecules/Input/components/PasswordVisibleSwitcher.tsx

@@ -0,0 +1,18 @@
+import { InputIcon, Pressable } from '@gluestack-ui/themed';
+import { EyeIcon, EyeOffIcon } from 'lucide-react-native';
+import { FC } from 'react';
+
+type Props = {
+  isPasswordVisible: boolean;
+  toggleIsPasswordVisible: () => void;
+};
+
+export const PasswordVisibleSwitcher: FC<Props> = (props) => {
+  const { toggleIsPasswordVisible, isPasswordVisible } = props;
+
+  return (
+    <Pressable onPress={toggleIsPasswordVisible}>
+      <InputIcon as={isPasswordVisible ? EyeIcon : EyeOffIcon} />
+    </Pressable>
+  );
+};

packages/ui/src/components/molecules/Input/components/index.ts

@@ -0,0 +1,4 @@
+export * from './InputField';
+export * from './InputHelper';
+export * from './InputTitle';
+export * from './PasswordVisibleSwitcher';

packages/ui/src/components/molecules/Input/components/types.ts

@@ -0,0 +1,12 @@
+import { Ref } from 'react';
+import { KeyboardType, TextInputProps } from 'react-native';
+
+import { InputType } from '../types';
+
+export type InputFieldProps = {
+  keyboardType: KeyboardType;
+  secureTextEntry: boolean;
+  placeholder?: string;
+  ref?: Ref<TextInputProps>;
+  type?: `${InputType}`;
+};