Merge pull request Expensify#65197 from dominictb/feat/64366

feat: create the NumberWithUnitForm

Author: neil-marcellini

.storybook/preview.tsx

@@ -10,6 +10,8 @@ import HTMLEngineProvider from '@src/components/HTMLEngineProvider';
 import {LocaleContextProvider} from '@src/components/LocaleContextProvider';
 import {EnvironmentProvider} from '@src/components/withEnvironment';
 import {KeyboardStateProvider} from '@src/components/withKeyboardState';
+import CONST from '@src/CONST';
+import IntlStore from '@src/languages/IntlStore';
 import ONYXKEYS from '@src/ONYXKEYS';
 import './fonts.css';
 
@@ -20,6 +22,8 @@ Onyx.init({
     },
 });
 
+IntlStore.load(CONST.LOCALES.EN);
+
 const decorators = [
     (Story: React.ElementType) => (
         <ComposeProviders

src/CONST/index.ts

@@ -4991,6 +4991,10 @@ const CONST = {
         FLAG_SEVERITY_ASSAULT: 'assault',
     },
     EMOJI_PICKER_TEXT_INPUT_SIZES: 152,
+    TEXT_INPUT_SYMBOL_POSITION: {
+        PREFIX: 'prefix',
+        SUFFIX: 'suffix',
+    },
     QR: {
         DEFAULT_LOGO_SIZE_RATIO: 0.25,
         DEFAULT_LOGO_MARGIN_RATIO: 0.02,

src/components/AmountForm.tsx

@@ -1,10 +1,10 @@
 import {useFocusEffect} from '@react-navigation/native';
 import React, {useCallback, useRef, useState} from 'react';
 import {View} from 'react-native';
-import AmountForm from '@components/AmountForm';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
+import NumberWithSymbolForm from '@components/NumberWithSymbolForm';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
@@ -65,7 +65,7 @@ function AmountSelectorModal({value, description = '', onValueSelected, isVisibl
                     addBottomSafeAreaPadding
                 >
                     <View style={styles.flex1}>
-                        <AmountForm
+                        <NumberWithSymbolForm
                             // eslint-disable-next-line react/jsx-props-no-spreading
                             {...rest}
                             value={currentValue}

src/components/AmountPicker/AmountSelectorModal.tsx

@@ -1,5 +1,5 @@
-import type {AmountFormProps} from '@components/AmountForm';
 import type {MenuItemBaseProps} from '@components/MenuItem';
+import type {NumberWithSymbolFormProps} from '@components/NumberWithSymbolForm';
 
 type AmountSelectorModalProps = {
     /** Whether the modal is visible */
@@ -13,7 +13,11 @@ type AmountSelectorModalProps = {
 
     /** Function to call when the user closes the modal */
     onClose: () => void;
-} & Pick<MenuItemBaseProps, 'description'>;
+} & Pick<MenuItemBaseProps, 'description'> &
+    Pick<
+        NumberWithSymbolFormProps,
+        'decimals' | 'maxLength' | 'symbol' | 'symbolPosition' | 'isSymbolPressable' | 'style' | 'containerStyle' | 'touchableInputWrapperStyle' | 'autoGrowExtraSpace' | 'autoGrowMarginSide'
+    >;
 
 type AmountPickerProps = {
     /** Item to display */
@@ -34,6 +38,9 @@ type AmountPickerProps = {
     /** Whether to show the tooltip text */
     shouldShowTooltips?: boolean;
 } & Pick<MenuItemBaseProps, 'rightLabel' | 'description'> &
-    AmountFormProps;
+    Pick<
+        NumberWithSymbolFormProps,
+        'decimals' | 'maxLength' | 'symbol' | 'symbolPosition' | 'isSymbolPressable' | 'style' | 'containerStyle' | 'touchableInputWrapperStyle' | 'autoGrowExtraSpace' | 'autoGrowMarginSide'
+    >;
 
 export type {AmountSelectorModalProps, AmountPickerProps};

src/components/AmountPicker/types.ts

@@ -12,6 +12,7 @@ import type CountrySelector from '@components/CountrySelector';
 import type CurrencySelector from '@components/CurrencySelector';
 import type DatePicker from '@components/DatePicker';
 import type EmojiPickerButtonDropdown from '@components/EmojiPicker/EmojiPickerButtonDropdown';
+import type NumberWithSymbolForm from '@components/NumberWithSymbolForm';
 import type PercentageForm from '@components/PercentageForm';
 import type Picker from '@components/Picker';
 import type PushRowWithModal from '@components/PushRowWithModal';
@@ -52,6 +53,7 @@ type ValidInputs =
     | typeof CountrySelector
     | typeof CurrencySelector
     | typeof AmountForm
+    | typeof NumberWithSymbolForm
     | typeof PercentageForm
     | typeof BusinessTypePicker
     | typeof DimensionTypeSelector