feat: mobile textbox comp (#926)

Co-authored-by: Alder Whiteford <[email protected]>
Co-authored-by: Alder Whiteford <[email protected]>

frontend/mobile/app/(app)/(tabs)/index.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 const HomePage = () => {
     return (
         <View style={styles.container}>
-            <Text style={styles.title}>Home Page</Text>
+            <Text style={styles.title}>Hello</Text>
         </View>
     );
 };

frontend/mobile/app/(design-system)/components/Button/Button.tsx

@@ -53,7 +53,7 @@ const StandardButton: React.FC<
 }) => {
     return (
         <BaseButton
-            backgroundColor={disabled ? 'disabled' : color}
+            backgroundColor={disabled ? 'gray' : color}
             disabled={disabled}
             onPress={disabled ? undefined : onPress}
             {...styles.standardButton}
@@ -83,7 +83,7 @@ const IconButton: React.FC<
 
     return (
         <BaseButton
-            backgroundColor={disabled ? 'disabled' : color}
+            backgroundColor={disabled ? 'gray' : color}
             justifyContent={justify}
             disabled={disabled}
             onPress={disabled ? undefined : onPress}

frontend/mobile/app/(design-system)/components/Text/TextVariants.ts

@@ -10,30 +10,25 @@ const Texts = {
         fontFamily: 'DMSans-Medium',
         fontSize: 24,
         fontStyle: 'normal',
-        fontWeight: '500',
-        lineHeight: 'normal',
-        color: '#000'
+        fontWeight: '500'
     },
     'body-1': {
         fontFamily: 'DMSans-Regular',
         fontSize: 16,
         fontStyle: 'normal',
-        fontWeight: '400',
-        lineHeight: 'normal'
+        fontWeight: '400'
     },
     'caption-1': {
         fontFamily: 'DMSans-Regular',
         fontSize: 12,
         fontStyle: 'normal',
-        fontWeight: '400',
-        lineHeight: 'normal'
+        fontWeight: '200'
     },
     'caption-2': {
         fontFamily: 'DMSans-Regular',
         fontSize: 10,
         fontStyle: 'normal',
-        fontWeight: '400',
-        lineHeight: 'normal'
+        fontWeight: '200'
     }
 } as const;
 

frontend/mobile/app/(design-system)/components/Textbox/Textbox.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { TextInput } from 'react-native';
+
+import { BoxProps, createBox } from '@shopify/restyle';
+
+import ErrorIcon from '@/app/(design-system)/assets/svg/Error.svg';
+import { Box } from '@/app/(design-system)/components/Box/Box';
+import { Text } from '@/app/(design-system)/components/Text/Text';
+import { TextVariants } from '@/app/(design-system)/components/Text/TextVariants';
+import { Theme, createStyles } from '@/app/(design-system)/theme';
+
+type TextboxProps = {
+    title?: string;
+    placeholder?: string;
+    helperText?: string;
+    error?: string;
+    autoFocus?: boolean;
+    readOnly?: boolean;
+    inputMode?: 'text' | 'numeric' | 'tel' | 'search' | 'email';
+    onChangeText?: () => void;
+    value?: string;
+    maxLength?: number;
+    secureTextEntry?: boolean;
+    children?: React.ReactNode;
+} & BoxProps<Theme>;
+
+const BaseTextInput = createBox<Theme, TextboxProps>(TextInput);
+
+export const TextBox: React.FC<TextboxProps> = ({
+    title,
+    placeholder,
+    helperText = ' ',
+    error,
+    autoFocus = false,
+    readOnly = false,
+    inputMode = 'text',
+    onChangeText,
+    value,
+    maxLength,
+    secureTextEntry = false
+}) => {
+    return (
+        <Box>
+            <Text color="black" variant="body-1">
+                {title}
+            </Text>
+            <BaseTextInput
+                placeholder={placeholder}
+                autoFocus={autoFocus}
+                readOnly={readOnly}
+                inputMode={inputMode}
+                onChangeText={onChangeText}
+                value={value}
+                maxLength={maxLength}
+                secureTextEntry={secureTextEntry}
+                {...styles.textInput}
+                borderColor={error ? 'darkRed' : 'gray'}
+            />
+            <Box gap="xxs" flexDirection="row" alignItems="center">
+                {error && <ErrorIcon />}
+                <Text color={error ? 'darkRed' : 'black'} variant="caption-1">
+                    {error ?? helperText}
+                </Text>
+            </Box>
+        </Box>
+    );
+};
+
+const styles = createStyles({
+    textInput: {
+        borderWidth: 1,
+        borderRadius: 'base',
+        backgroundColor: 'white',
+        padding: 'm',
+        marginBottom: 'xs',
+        marginTop: 'xs',
+        minWidth: '100%',
+        ...TextVariants['body-1']
+    }
+});

frontend/mobile/app/(design-system)/shared/colors.ts

@@ -11,7 +11,7 @@ export const Colors = {
     yellow: '#FFB626',
     white: '#FFFFFF',
     black: '#000000',
-    disabled: '#BDBDBD'
+    gray: '#C3C9D0'
 };
 
 export type SACColors = keyof typeof Colors;
@@ -69,5 +69,5 @@ export const textColorVariants = {
     yellow: 'white',
     white: 'black',
     black: 'white',
-    disabled: 'white'
+    gray: 'white'
 } as const;