[NoQA] Add CSpell for spelling checks [Part 2]

src/CONST.ts

@@ -393,8 +393,8 @@ const CONST = {
     ANIMATION_GYROSCOPE_VALUE: 0.4,
     ANIMATION_PAID_DURATION: 200,
     ANIMATION_PAID_CHECKMARK_DELAY: 300,
-    ANIMATION_THUMBSUP_DURATION: 250,
-    ANIMATION_THUMBSUP_DELAY: 200,
+    ANIMATION_THUMBS_UP_DURATION: 250,
+    ANIMATION_THUMBS_UP_DELAY: 200,
     ANIMATION_PAID_BUTTON_HIDE_DELAY: 300,
     BACKGROUND_IMAGE_TRANSITION_DURATION: 1000,
     SCREEN_TRANSITION_END_TIMEOUT: 1000,
@@ -1163,7 +1163,7 @@ const CONST = {
         },
         MAX_COUNT_BEFORE_FOCUS_UPDATE: 30,
         MIN_INITIAL_REPORT_ACTION_COUNT: 15,
-        UNREPORTED_REPORTID: '0',
+        UNREPORTED_REPORT_ID: '0',
         SPLIT_REPORTID: '-2',
         SECONDARY_ACTIONS: {
             SUBMIT: 'submit',
@@ -1489,7 +1489,7 @@ const CONST = {
         MODAL_TYPE: {
             CONFIRM: 'confirm',
             CENTERED: 'centered',
-            CENTERED_SWIPABLE_TO_RIGHT: 'centered_swipable_to_right',
+            CENTERED_SWIPEABLE_TO_RIGHT: 'centered_swipable_to_right',
             CENTERED_UNSWIPEABLE: 'centered_unswipeable',
             CENTERED_SMALL: 'centered_small',
             BOTTOM_DOCKED: 'bottom_docked',
@@ -1740,7 +1740,7 @@ const CONST = {
     // More info https://github.com/Expensify/App/issues/8007
     EMAIL_SEARCH_REGEX: /\.(?=[^\s@]*@)/g,
 
-    VALIDATE_FOR_LEADINGSPACES_HTML_TAG_REGEX: /<([\s]+.+[\s]*)>/g,
+    VALIDATE_FOR_LEADING_SPACES_HTML_TAG_REGEX: /<([\s]+.+[\s]*)>/g,
 
     WHITELISTED_TAGS: [/<>/, /< >/, /<->/, /<-->/, /<br>/, /<br\/>/],
 
@@ -3101,7 +3101,7 @@ const CONST = {
     },
 
     AVATAR_SIZE: {
-        XLARGE: 'xlarge',
+        X_LARGE: 'xlarge',
         LARGE: 'large',
         MEDIUM: 'medium',
         DEFAULT: 'default',
@@ -5019,7 +5019,7 @@ const CONST = {
             SUBMITTER: 'submitter',
         },
     },
-    DELEGATE_ROLE_HELPDOT_ARTICLE_LINK: 'https://help.expensify.com/expensify-classic/hubs/copilots-and-delegates/',
+    DELEGATE_ROLE_HELP_DOT_ARTICLE_LINK: 'https://help.expensify.com/expensify-classic/hubs/copilots-and-delegates/',
     STRIPE_GBP_AUTH_STATUSES: {
         SUCCEEDED: 'succeeded',
         CARD_AUTHENTICATION_REQUIRED: 'authentication_required',
@@ -6915,9 +6915,9 @@ const CONST = {
 
     BASE_LIST_ITEM_TEST_ID: 'base-list-item-',
     PRODUCT_TRAINING_TOOLTIP_NAMES: {
-        // TODO: CONCEIRGE_LHN_GBR tooltip will be replaced by a tooltip in the #admins room
+        // TODO: CONCIERGE_LHN_GBR tooltip will be replaced by a tooltip in the #admins room
         // https://github.com/Expensify/App/issues/57045#issuecomment-2701455668
-        CONCEIRGE_LHN_GBR: 'conciergeLHNGBR',
+        CONCIERGE_LHN_GBR: 'conciergeLHNGBR',
         RENAME_SAVED_SEARCH: 'renameSavedSearch',
         BOTTOM_NAV_INBOX_TOOLTIP: 'bottomNavInboxTooltip',
         LHN_WORKSPACE_CHAT_TOOLTIP: 'workspaceChatLHNTooltip',

src/ONYXKEYS.ts

@@ -130,7 +130,7 @@ const ONYXKEYS = {
     NVP_ONBOARDING: 'nvp_onboarding',
 
     /** This NVP contains data associated with HybridApp */
-    NVP_TRYNEWDOT: 'nvp_tryNewDot',
+    NVP_TRY_NEW_DOT: 'NVP_TRY_NEW_DOT',
 
     /** Contains the platforms for which the user muted the sounds */
     NVP_MUTED_PLATFORMS: 'nvp_mutedPlatforms',
@@ -977,8 +977,8 @@ type OnyxValuesMapping = {
 
     [ONYXKEYS.NVP_ONBOARDING]: Onboarding;
 
-    // ONYXKEYS.NVP_TRYNEWDOT is HybridApp onboarding data
-    [ONYXKEYS.NVP_TRYNEWDOT]: OnyxTypes.TryNewDot;
+    // ONYXKEYS.NVP_TRY_NEW_DOT is HybridApp onboarding data
+    [ONYXKEYS.NVP_TRY_NEW_DOT]: OnyxTypes.TryNewDot;
     [ONYXKEYS.RECENT_SEARCHES]: Record<string, OnyxTypes.RecentSearchItem>;
     [ONYXKEYS.SAVED_SEARCHES]: OnyxTypes.SaveSearch;
     [ONYXKEYS.RECENTLY_USED_CURRENCIES]: string[];

src/components/AddressSearch/index.tsx

@@ -186,7 +186,7 @@ function AddressSearch(
             // When locality is not returned, many countries return the city as postalTown (e.g. 5 New Street
             // Square, London), otherwise as sublocality (e.g. 384 Court Street Brooklyn). If postalTown is
             // returned, the sublocality will be a city subdivision so shouldn't take precedence (e.g.
-            // Salagatan, Upssala, Sweden).
+            // Salagatan, Uppsala, Sweden).
             city: locality || postalTown || sublocality || cityAutocompleteFallback,
             zipCode,
 

src/components/AmountForm.tsx

@@ -227,7 +227,7 @@ function AmountForm(
     const textInputKeyPress = (event: NativeSyntheticEvent<KeyboardEvent>) => {
         const key = event.nativeEvent.key.toLowerCase();
         if (isMobileSafari() && key === CONST.PLATFORM_SPECIFIC_KEYS.CTRL.DEFAULT) {
-            // Optimistically anticipate forward-delete on iOS Safari (in cases where the Mac Accessiblity keyboard is being
+            // Optimistically anticipate forward-delete on iOS Safari (in cases where the Mac Accessibility keyboard is being
             // used for input). If the Control-D shortcut doesn't get sent, the ref will still be reset on the next key press.
             forwardDeletePressedRef.current = true;
             return;

src/components/AttachmentModal.tsx

@@ -211,7 +211,7 @@
     const parentReportAction = getReportAction(report?.parentReportID, report?.parentReportActionID);
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const transactionID = (isMoneyRequestAction(parentReportAction) && getOriginalMessage(parentReportAction)?.IOUTransactionID) || CONST.DEFAULT_NUMBER_ID;
     const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
     const [currentAttachmentLink, setCurrentAttachmentLink] = useState(attachmentLink);
 
     const [file, setFile] = useState<FileObject | undefined>(
@@ -245,7 +245,7 @@
     );
 
     /**
-     * If our attachment is a PDF, return the unswipeablge Modal type.
+     * If our attachment is a PDF, return the unswipeable Modal type.
      */
     const getModalType = useCallback(
         (sourceURL: string, fileObject: FileObject) =>

src/components/AttachmentOfflineIndicator.tsx

@@ -45,7 +45,7 @@ function AttachmentOfflineIndicator({isPreview = false}: AttachmentOfflineIndica
             {!isPreview && (
                 <View>
                     <Text style={[styles.notFoundTextHeader, styles.ph10]}>{translate('common.youAppearToBeOffline')}</Text>
-                    <Text style={[styles.textAlignCenter, styles.ph11, styles.textSupporting]}>{translate('common.attachementWillBeAvailableOnceBackOnline')}</Text>
+                    <Text style={[styles.textAlignCenter, styles.ph11, styles.textSupporting]}>{translate('common.attachmentWillBeAvailableOnceBackOnline')}</Text>
                 </View>
             )}
         </View>

src/components/AttachmentPicker/index.native.tsx

@@ -168,17 +168,17 @@ function AttachmentPicker({
                                     ImageManipulator.manipulate(targetAssetUri)
                                         .renderAsync()
                                         .then((manipulatedImage) => manipulatedImage.saveAsync({format: SaveFormat.JPEG}))
-                                        .then((manipResult) => {
-                                            const uri = manipResult.uri;
+                                        .then((manipulationResult) => {
+                                            const uri = manipulationResult.uri;
                                             const convertedAsset = {
                                                 uri,
                                                 name: uri
                                                     .substring(uri.lastIndexOf('/') + 1)
                                                     .split('?')
                                                     .at(0),
                                                 type: 'image/jpeg',
-                                                width: manipResult.width,
-                                                height: manipResult.height,
+                                                width: manipulationResult.width,
+                                                height: manipulationResult.height,
                                             };
 
                                             return resolve([convertedAsset]);

src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx

@@ -25,10 +25,10 @@ type CarouselButtonsProps = {
     /** Callback to go one page forward */
     onForward: () => void;
 
-    /** Callback for autohiding carousel button arrows */
+    /** Callback for auto hiding carousel button arrows */
     autoHideArrow?: () => void;
 
-    /** Callback for cancelling autohiding of carousel button arrows */
+    /** Callback for cancelling auto hiding of carousel button arrows */
     cancelAutoHideArrow?: () => void;
 };
 

src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.tsx

@@ -7,7 +7,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import BaseAttachmentViewPdf from './BaseAttachmentViewPdf';
 import type AttachmentViewPdfProps from './types';
 
-// If the user pans less than this threshold, we'll not enable/disable the pager scroll, since the thouch will most probably be a tap.
+// If the user pans less than this threshold, we'll not enable/disable the pager scroll, since the touch will most probably be a tap.
 // If the user moves their finger more than this threshold in the X direction, we'll enable the pager scroll. Otherwise if in the Y direction, we'll disable it.
 const SCROLL_THRESHOLD = 10;
 

src/components/Attachments/AttachmentView/index.tsx

@@ -119,7 +119,7 @@
     isUploading = false,
     reportID,
 }: AttachmentViewProps) {
     const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
     const {translate} = useLocalize();
     const {updateCurrentURLAndReportID} = usePlaybackContext();
 
@@ -214,7 +214,7 @@
 
         // We need the following View component on android native
         // So that the event will propagate properly and
-        // the Password protected preview will be shown for pdf attachement we are about to send.
+        // the Password protected preview will be shown for pdf attachment we are about to send.
         return (
             <View style={[styles.flex1, styles.attachmentCarouselContainer]}>
                 <AttachmentViewPdf

src/components/AvatarCropModal/AvatarCropModal.tsx

@@ -120,9 +120,9 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose
             return;
         }
         // We need to have image sizes in shared values to properly calculate position/size/animation
-        ImageSize.getSize(imageUri).then(({width, height, rotation: orginalRotation}) => {
+        ImageSize.getSize(imageUri).then(({width, height, rotation: originalRotation}) => {
             // On Android devices ImageSize library returns also rotation parameter.
-            if (orginalRotation === 90 || orginalRotation === 270) {
+            if (originalRotation === 90 || originalRotation === 270) {
                 originalImageHeight.set(width);
                 originalImageWidth.set(height);
             } else {

src/components/AvatarWithImagePicker.tsx

@@ -75,7 +75,7 @@ type AvatarWithImagePickerProps = {
     isUsingDefaultAvatar?: boolean;
 
     /** Size of Indicator */
-    size?: typeof CONST.AVATAR_SIZE.XLARGE | typeof CONST.AVATAR_SIZE.LARGE | typeof CONST.AVATAR_SIZE.DEFAULT;
+    size?: typeof CONST.AVATAR_SIZE.X_LARGE | typeof CONST.AVATAR_SIZE.LARGE | typeof CONST.AVATAR_SIZE.DEFAULT;
 
     /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
     fallbackIcon?: AvatarSource;

src/components/BigNumberPad.tsx

@@ -70,7 +70,7 @@ function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, i
                 >
                     {row.map((column, columnIndex) => {
                         // Adding margin between buttons except first column to
-                        // avoid unccessary space before the first column.
+                        // avoid unnecessary space before the first column.
                         const marginLeft = columnIndex > 0 ? styles.ml3 : {};
 
                         return (

src/components/BookTravelButton.tsx

@@ -37,7 +37,7 @@ type BookTravelButtonProps = {
 };
 
 const navigateToAcceptTerms = (domain: string, isUserValidated?: boolean) => {
-    // Remove the previous provision session infromation if any is cached.
+    // Remove the previous provision session information if any is cached.
     cleanupTravelProvisioningSession();
     if (isUserValidated) {
         Navigation.navigate(ROUTES.TRAVEL_TCS.getRoute(domain));

src/components/Breadcrumbs.tsx

@@ -39,7 +39,7 @@ function Breadcrumbs({breadcrumbs, style}: BreadcrumbsProps) {
     const isRootBreadcrumb = primaryBreadcrumb.type === CONST.BREADCRUMB_TYPE.ROOT;
     const fontScale = PixelRatio.getFontScale() > CONST.LOGO_MAX_SCALE ? CONST.LOGO_MAX_SCALE : PixelRatio.getFontScale();
     return (
-        <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1, styles.w100, styles.breadcrumsContainer, style]}>
+        <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1, styles.w100, styles.breadcrumbsContainer, style]}>
             {isRootBreadcrumb ? (
                 <View style={styles.breadcrumbLogo}>
                     <Header

src/components/BulletList.tsx

@@ -7,7 +7,7 @@ import Text from './Text';
 type BulletListItem = string;
 
 type BulletListProps = {
-    /** List of items for the list. Each item will be rendered as a sepearte point.  */
+    /** List of items for the list. Each item will be rendered as a separate point.  */
     items: BulletListItem[];
 
     /** Header section of the list */

src/components/Composer/types.ts

@@ -60,7 +60,7 @@ type ComposerProps = Omit<TextInputProps, 'onClear'> & {
     /** Function to check whether composer is covered up or not */
     checkComposerVisibility?: () => boolean;
 
-    /** Whether the sull composer is open */
+    /** Whether the full composer is open */
     isComposerFullSize?: boolean;
 
     /** Should make the input only scroll inside the element avoid scroll out to parent */

src/components/ConfirmContent.tsx

@@ -97,7 +97,7 @@ type ConfirmContentProps = {
     /** Styles for the image */
     imageStyles?: StyleProp<ViewStyle>;
 
-    /** Whether the modal is visibile */
+    /** Whether the modal is visible */
     isVisible: boolean;
 
     /** Whether the confirm button is loading */

src/components/ConfirmedRoute.tsx

@@ -6,8 +6,8 @@
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import * as MapboxToken from '@userActions/MapboxToken';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {MapboxAccessToken, Transaction} from '@src/types/onyx';
@@ -38,7 +38,7 @@
      * it will display pending map icon */
     requireRouteToDisplayMap?: boolean;
 
-    /** Whether the map is interactable or not */
+    /** Whether the map is interactive or not */
     interactive?: boolean;
 };
 

src/components/ConnectionLayout.tsx

@@ -41,7 +41,7 @@
     /** The current feature name that the user tries to get access to */
     featureName?: PolicyFeatureName;
 
-    /** The content container style of Scrollview */
+    /** The content container style of ScrollView */
     contentContainerStyle?: StyleProp<ViewStyle> | undefined;
 
     /** Style of the title text */
@@ -107,7 +107,7 @@
 }: ConnectionLayoutProps) {
     const {translate} = useLocalize();
 
     const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
     const isConnectionEmpty = isEmpty(policy?.connections?.[connectionName]);
 
     const renderSelectionContent = useMemo(

src/components/ContextMenuItem.tsx

@@ -42,7 +42,7 @@ type ContextMenuItemProps = {
     /** Whether the width should be limited */
     shouldLimitWidth?: boolean;
 
-    /** Styles to apply to ManuItem wrapper */
+    /** Styles to apply to MenuItem wrapper */
     wrapperStyle?: StyleProp<ViewStyle>;
 
     shouldPreventDefaultFocusOnPress?: boolean;

src/components/CountrySelector.tsx

@@ -37,12 +37,12 @@ function CountrySelector({errorText = '', value: countryCode, onInputChange = ()
     const title = countryCode ? translate(`allCountries.${countryCode}`) : '';
     const countryTitleDescStyle = title.length === 0 ? styles.textNormal : null;
 
-    const didOpenContrySelector = useRef(false);
+    const didOpenCountrySelector = useRef(false);
     const isFocused = useIsFocused();
     useEffect(() => {
         // Check if the country selector was opened and no value was selected, triggering onBlur to display an error
-        if (isFocused && didOpenContrySelector.current) {
-            didOpenContrySelector.current = false;
+        if (isFocused && didOpenCountrySelector.current) {
+            didOpenCountrySelector.current = false;
             if (!countryFromUrl) {
                 onBlur?.();
             }
@@ -76,7 +76,7 @@ function CountrySelector({errorText = '', value: countryCode, onInputChange = ()
             errorText={errorText}
             onPress={() => {
                 const activeRoute = Navigation.getActiveRoute();
-                didOpenContrySelector.current = true;
+                didOpenCountrySelector.current = true;
                 Navigation.navigate(ROUTES.SETTINGS_ADDRESS_COUNTRY.getRoute(countryCode ?? '', activeRoute));
             }}
         />

src/components/CustomStatusBarAndBackground/index.tsx

@@ -38,7 +38,7 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack
 
     const didForceUpdateStatusBarRef = useRef(false);
     const prevIsRootStatusBarEnabled = usePrevious(isRootStatusBarEnabled);
-    // The prev and current status bar background color refs are initialized with the splash screen background color so the status bar color is changed from the splash screen color to the expected color atleast once on first render - https://github.com/Expensify/App/issues/34154
+    // The prev and current status bar background color refs are initialized with the splash screen background color so the status bar color is changed from the splash screen color to the expected color at least once on first render - https://github.com/Expensify/App/issues/34154
     const prevStatusBarBackgroundColor = useSharedValue(theme.splashBG);
     const statusBarBackgroundColor = useSharedValue(theme.splashBG);
     const statusBarAnimation = useSharedValue(0);
@@ -59,7 +59,7 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack
     const listenerCount = useRef(0);
 
     // Updates the status bar style and background color depending on the current route and theme
-    // This callback is triggered everytime the route changes or the theme changes
+    // This callback is triggered every time the route changes or the theme changes
     const updateStatusBarStyle = useCallback(
         (listenerID?: number) => {
             // Check if this function is either called through the current navigation listener
@@ -69,8 +69,8 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack
                 return;
             }
 
-            // Set the status bar colour depending on the current route.
-            // If we don't have any colour defined for a route, fall back to
+            // Set the status bar color depending on the current route.
+            // If we don't have any color defined for a route, fall back to
             // appBG color.
             let currentRoute: ReturnType<typeof navigationRef.getCurrentRoute> | undefined;
             if (navigationRef.isReady()) {
@@ -106,7 +106,7 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack
             };
 
             // Don't update the status bar style if it's the same as the current one, to prevent flashing.
-            // Force update if the root status bar is back on active or it won't overwirte the nested status bar style
+            // Force update if the root status bar is back on active or it won't overwrite the nested status bar style
             if (!didForceUpdateStatusBarRef.current && !prevIsRootStatusBarEnabled && isRootStatusBarEnabled) {
                 callUpdateStatusBarAppearance();
                 callUpdateStatusBarBackgroundColor();
@@ -159,7 +159,7 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack
         return () => navigationRef.removeListener('state', listener);
     }, [isDisabled, updateStatusBarStyle]);
 
-    // Update the global background and status bar style (on web) everytime the theme changes.
+    // Update the global background and status bar style (on web) every time the theme changes.
     // The background of the html element needs to be updated, otherwise you will see a big contrast when resizing the window or when the keyboard is open on iOS web.
     // The status bar style needs to be updated when the user changes the theme, otherwise, the status bar will not change its color (mWeb iOS).
     useEffect(() => {

src/components/DatePicker/DatePickerModal.tsx

@@ -70,7 +70,7 @@ function DatePickerModal({
             innerContainerStyle={isSmallScreenWidth ? styles.w100 : {width: CONST.POPOVER_DATE_WIDTH}}
             anchorAlignment={DEFAULT_ANCHOR_ORIGIN}
             restoreFocusType={CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE}
-            shoudSwitchPositionIfOverflow
+            shouldSwitchPositionIfOverflow
             shouldEnableNewFocusManagement
             shouldMeasureAnchorPositionFromTop={shouldPositionFromTop}
             shouldUseNewModal

src/components/DelegateNoAccessModal.tsx

@@ -20,7 +20,7 @@ export default function DelegateNoAccessModal({isNoDelegateAccessMenuVisible = f
     const delegateNoAccessPrompt = (
         <Text>
             {noDelegateAccessPromptStart}
-            <TextLink href={CONST.DELEGATE_ROLE_HELPDOT_ARTICLE_LINK}>{noDelegateAccessHyperLinked}</TextLink>
+            <TextLink href={CONST.DELEGATE_ROLE_HELP_DOT_ARTICLE_LINK}>{noDelegateAccessHyperLinked}</TextLink>
             {noDelegateAccessPromptEnd}
         </Text>
     );