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

.imgbotconfig

@@ -1,6 +1,6 @@
 {
     "ignoredFiles": [
-        "assets/images/themeDependent/empty-state_background-fade-dark.png", // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
+        "assets/images/themeDependent/empty-state_background-fade-dark.png", // Caused an issue with color gradients, https://github.com/Expensify/App/issues/30499
         "assets/images/themeDependent/empty-state_background-fade-light.png"
     ],
     "aggressiveCompression": "false"

README.md

@@ -561,7 +561,7 @@ If you'd like to add HybridApp-specific patches, use the `--patch-dir` flag:
 
 ### Additional information and troubleshooting
 
-If you seek some addtional information you can always refer to the [extended version](contributingGuides/HYBRID_APP.md) of the docs for HybridApp. You can find there extended explanation of some of the concepts, pro tips, and most common errors.
+If you seek some additional information you can always refer to the [extended version](contributingGuides/HYBRID_APP.md) of the docs for HybridApp. You can find there extended explanation of some of the concepts, pro tips, and most common errors.
 
 ----
 

__mocks__/@react-navigation/native/index.ts

@@ -48,7 +48,7 @@ const useFocusEffect = isJestEnv ? realReactNavigation.useFocusEffect : (callbac
 const UNSTABLE_usePreventRemove = isJestEnv ? jest.fn() : () => {};
 
 export {
-    // Overriden modules
+    // Overridden modules
     useIsFocused,
     useTheme,
     useNavigation,

__mocks__/Illustrations.ts

@@ -46,7 +46,7 @@ const PinkBill = 'PinkBill';
 const CreditCardsNew = 'CreditCardsNew';
 const CreditCardsNewGreen = 'CreditCardsNewGreen';
 const InvoiceBlue = 'InvoiceBlue';
-const LaptopwithSecondScreenandHourglass = 'LaptopwithSecondScreenandHourglass';
+const LaptopWithSecondScreenAndHourglass = 'LaptopWithSecondScreenAndHourglass';
 const LockOpen = 'LockOpen';
 const Luggage = 'Luggage';
 const MoneyIntoWallet = 'MoneyIntoWallet';
@@ -200,7 +200,7 @@ export {
     CreditCardsNew,
     CreditCardsNewGreen,
     InvoiceBlue,
-    LaptopwithSecondScreenandHourglass,
+    LaptopWithSecondScreenAndHourglass,
     LockOpen,
     Luggage,
     MoneyIntoWallet,

android/app/src/main/java/com/expensify/chat/customairshipextender/CustomNotificationProvider.java

@@ -105,7 +105,7 @@ protected NotificationCompat.Builder onExtendBuilder(@NonNull Context context, @
         PushMessage message = arguments.getMessage();
         Log.d(TAG, "buildNotification: " + message.toString());
 
-        // Improve notification delivery by categorising as a time-critical message
+        // Improve notification delivery by categorizing as a time-critical message
         builder.setCategory(CATEGORY_MESSAGE);
         builder.setVisibility(NotificationCompat.VISIBILITY_PRIVATE);
 

config/webpack/webpack.common.ts

@@ -294,7 +294,7 @@ const getCommonConfiguration = ({file = '.env', platform = 'web'}: Environment):
 
     optimization: {
         minimizer: [
-            // default settings accordint to https://webpack.js.org/configuration/optimization/#optimizationminimizer
+            // default settings according to https://webpack.js.org/configuration/optimization/#optimizationminimizer
             // with addition of preserving the class name for ImageManipulator (expo module)
             new TerserPlugin({
                 terserOptions: {

contributingGuides/ACCESSIBILITY.md

@@ -4,11 +4,11 @@
 
 - **GenericPressable**: A basic pressable component with generic functionality. It should generally only be used to creating a new, custom pressable components. Avoid using it directly.
 
-- **PressableWithFeedback**: A pressable component that provides standarised visual and haptic feedback upon pressing.
+- **PressableWithFeedback**: A pressable component that provides standardized visual and haptic feedback upon pressing.
 
 - **PressableWithoutFeedback**: A pressable component without any visual or haptic feedback.
 
-- **PressableWithoutFocus**: A pressable component without visible efect of focus.
+- **PressableWithoutFocus**: A pressable component without visible effect of focus.
 
 - **PressableWithDelayToggle**:  A pressable component that briefly disables then re-enables after a short delay upon pressing.
 
@@ -21,7 +21,7 @@ When implementing pressable components, it's essential to create accessible flow
 
 - size of any pressable component should be at least 44x44dp. This is the minimum size recommended by Apple and Google for touch targets. If the pressable component is smaller than `44x44dp`, it will be difficult for users with motor disabilities to interact with it. Pressable components have a `autoHitSlop` prop that can be used to automatically increase the size of the pressable component to `44x44dp`. This prop accepts a boolean value. If set to true, the pressable component will automatically increase its touchable size to `44x44dp`. If set to false, the pressable component will not increase its size. By default, this prop is set to false.
 
-- ensure that the pressable component has a label and hint. This is especially important for users with visual disabilities who rely on screen readers to navigate the app. All Pressable components have a `accessibilitylabel` prop that can be used to set the label of the pressable component. This prop accepts a string value. All Pressable components also have a `accessibilityHint` prop that can be used to set the hint of the pressable component. This prop accepts a string value. The `accessibilityHint` prop is optional. If not set, the pressable component will fallback to the `accessibilityLabel` prop. For example, if you have a button that opens a modal, you can set the `accessibilityLabel` to "Open modal" and the `accessibilityHint` to "Opens a modal with more information". This way, when the user focuses on the button, the screen reader will read "Open modal. Opens a modal with more information". This will help the user understand what the button does and what to expect after pressing it.
+- ensure that the pressable component has a label and hint. This is especially important for users with visual disabilities who rely on screen readers to navigate the app. All Pressable components have a `accessibilityLabel` prop that can be used to set the label of the pressable component. This prop accepts a string value. All Pressable components also have a `accessibilityHint` prop that can be used to set the hint of the pressable component. This prop accepts a string value. The `accessibilityHint` prop is optional. If not set, the pressable component will fallback to the `accessibilityLabel` prop. For example, if you have a button that opens a modal, you can set the `accessibilityLabel` to "Open modal" and the `accessibilityHint` to "Opens a modal with more information". This way, when the user focuses on the button, the screen reader will read "Open modal. Opens a modal with more information". This will help the user understand what the button does and what to expect after pressing it.
 
 - the `enableInScreenReaderStates` prop proves invaluable when aiming to enhance the accessibility of clickable elements, particularly when desiring to enlarge the clickable area of a component, such as an entire row. This can be especially useful, for instance, when dealing with tables where only a small portion of a row, like a checkbox, might traditionally trigger an action. By employing this prop, developers can ensure that the entirety of a designated component, in this case a row, is made accessible to users employing screen readers. This creates a more inclusive user experience, allowing individuals relying on screen readers to interact with the component effortlessly. For instance, in a table, using this prop on a row component enables users to click anywhere within the row to trigger an action, significantly improving accessibility and user-friendliness.
 

contributingGuides/HYBRID_APP.md

@@ -3,7 +3,7 @@ Every React Native mobile application needs native codebase with an entry point,
 
 It means that whenever we create a React Native application from scratch we instantiate it on a (very basic, bare) native codebase. However, we can always use a different, already existing codebase to run React Native. This is how we've built HybridApp - we've created a new `ReactRootView`, and taken all JavaScript code to run it within the existing mobile application (OldDot).
 
-It means that HybridApp is a **regular native application**, which has an additional screen that runs React Native. HybridApp let us combine New Expensify and our classic app into a single mobile app for a seemless migration
+It means that HybridApp is a **regular native application**, which has an additional screen that runs React Native. HybridApp let us combine New Expensify and our classic app into a single mobile app for a seamless migration
 # How is HybridApp built?
 If you have access to the closed-source `Mobile-Expensify` repository, you are eligible to build HybridApp. The main difference between NewDot and HybridApp is that the native code is located in a different place. The native code is located under `./Mobile-Expensify/Android` and `./Mobile-Expensify/iOS`.
 
@@ -116,14 +116,14 @@ In this case you can do the following:
 1. `rm -rf node_modules`
 2. `npm i-standalone`
 3. `npm run pod-install-standalone` (required only if you build iOS)
-4. `npm run ios-standalone` or `npm run android-stanalone`
+4. `npm run ios-standalone` or `npm run android-standalone`
 
 Alternatively, you may notice in `package.json` that all these scripts are based on `STANDALONE_NEW_DOT` environment variable. If you feel confident you can do `export STANDALONE_NEW_DOT=true` to change the default behaviour in the current process of the terminal, and use regular commands (`npm i`, `npm run android`, `npm run ios` etc.) to build NewDot. 
 
 ### Do I need to clean cache and rebuild the app?
 It's a valid question, especially because clean builds may take some time. On the way I've noticed that many developers tend to rebuild the app from scratch, even though in some cases it is unnecessary. In this case, when should you rebuild the app?
 1. Whenever any code located in `./Mobile-Expensify` has changed - this means that we need to recompile OldDot/native code
-2. Whenever you've pulled the newest main - not always necessary, but usually we don't analise what code has just been merged by `git pull`
+2. Whenever you've pulled the newest main - not always necessary, but usually we don't analyze what code has just been merged by `git pull`
 3. Whenever `package-lock.json` has changed - this may indicate that some packages with native code were bumped (however it's not always necessary, see [[#Should I rebuild HybridApp after bumping a `node_module`?]])
 4. Whenever you've updated `.env` files
 This means that if you changed only React Native code, and didn't pull any changes, the rebuilt is probably not necessary. If something doesn't work, you can always restart the Metro bundler using the following command `npm run start --reset-cache`
@@ -199,7 +199,7 @@ This one is pretty enigmatic, and usually appears after subsequent android, and
 2. rerun the iOS build
 
 ### Error: `CDN: trunk URL couldn't be downloaded`
-This error may appear after execution of `npm run pod-install`. In this case you shaould do the following:
+This error may appear after execution of `npm run pod-install`. In this case you should do the following:
 1. cd to `Mobile-Expensify/ios`
 2. run `pod repo remove trunk`
 

contributingGuides/LEFT_HAND_NAVIGATION.md

@@ -39,6 +39,6 @@ Certain reports are excluded from the LHN to avoid clutter and to focus on relev
 4. Non-Archived reports:
     - In default mode, these are sorted by the lastVisibleActionCreated date, so the most recently updated reports appear first.
     - In focus mode, these reports are sorted alphabetically by name for quicker navigation.
-5. Archived eports:
+5. Archived reports:
     - In default mode, these are sorted by lastVisibleActionCreated, with recent reports displayed first.
     - In focus mode, archived reports are sorted alphabetically by name.

contributingGuides/NAVIGATION_TESTS.md

@@ -139,7 +139,7 @@ Linked issue: https://github.com/Expensify/App/pull/49539#issuecomment-243240081
 
 1. Launch the app.
 2. Open FAB > Submit expense > Manual.
-3. Submit a manual expense to any user (as long as the user is not the currrently opened report and the receiver is not workspace chat).
+3. Submit a manual expense to any user (as long as the user is not the currently opened report and the receiver is not workspace chat).
 4. Verify if the destination report is opened after submitting expense.
 
 #### QBO - Preferred exporter/Export date tab do not auto-close after value selected
@@ -177,7 +177,7 @@ Linked issue: https://github.com/Expensify/App/pull/49539#issuecomment-243338180
 4. Click on the group chat header.
 5. Click Group name field.
 6. Click Save.
-7. Verify if the app returs to group details RHP after saving group name.
+7. Verify if the app returns to group details RHP after saving group name.
 
 #### Going up to a screen with any params
 

contributingGuides/OFFLINE_UX.md

@@ -89,7 +89,7 @@ When the user is offline:
 - The behavior for when something fails is:
     - If you were adding new data, the failed to add data is displayed greyed out and with the button to dismiss the error
     - If you were deleting data, the failed data is displayed regularly with the button to dismiss the error
-    - If you are updating data, the original data is displayed regulary with the button to dismiss the error
+    - If you are updating data, the original data is displayed regularly with the button to dismiss the error
 - When dismissing the error, the `onClose` prop will be called, there we need to call an action that either:
   - If the pendingAction was `add`, it removes the data altogether
   - Otherwise, it would clear the errors and `pendingAction` properties from the data

contributingGuides/PERFORMANCE.md

@@ -4,7 +4,7 @@
 - Use [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent), [`React.memo()`](https://reactjs.org/docs/react-api.html#reactmemo), and [`shouldComponentUpdate()`](https://reactjs.org/docs/react-component.html#shouldcomponentupdate) to prevent re-rendering expensive components.
 - Using a combination of [React DevTools Profiler](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Chrome Dev Tools Performance Timing](https://calibreapp.com/blog/react-performance-profiling-optimization) can help identify unnecessary re-renders. Both tools can be used to time an interaction like the app starting up or navigating to a new screen.
 - Watch out for [very large lists](https://reactnative.dev/docs/optimizing-flatlist-configuration) and things like `Image` components re-fetching images on render when a remote uri did not change.
-- Avoid the temptation to over-optimize. There is added cost in both code complexity and performance when adding checks like `shouldComponentUpdate()`. Be selective about when you use this and make sure there is a measureable difference before proposing the change. As a very general rule, it should be measurably faster to run logic to avoid the re-render (e.g. do a deep comparison) than it would be to let React take care of it without any extra intervention from us.
+- Avoid the temptation to over-optimize. There is added cost in both code complexity and performance when adding checks like `shouldComponentUpdate()`. Be selective about when you use this and make sure there is a measurable difference before proposing the change. As a very general rule, it should be measurably faster to run logic to avoid the re-render (e.g. do a deep comparison) than it would be to let React take care of it without any extra intervention from us.
 - Use caution when adding subscriptions that might re-render very large trees of components e.g. subscribing to state that changes often (current report, current route, etc) in the app root.
 - Avoid using arrow function callbacks in components that are expensive to re-render. React will re-render this component since each time the parent renders it creates a new instance of that function. **Alternative:** Bind the method in the constructor instead.
 

contributingGuides/REASSURE_PERFORMANCE_TEST.md

@@ -65,7 +65,7 @@ We use Reassure for monitoring performance regression. It helps us check if our
 
     - Investigate the code changes that might be causing this and address them to maintain a stable render count. More info [here](https://github.com/Expensify/App/blob/fe9e9e3e31bae27c2398678aa632e808af2690b5/tests/perf-test/README.md?plain=1#L32).
     - It is important to run Reassure tests locally and see if our changes caused a regression.
-    - One of the potential factors that may influence variation in the number of renders is adding unnecesary providers to the component we want to test using ```<ComposeProviders>``` . Ensure that all providers are necessary for running the test.
+    - One of the potential factors that may influence variation in the number of renders is adding unnecessary providers to the component we want to test using ```<ComposeProviders>``` . Ensure that all providers are necessary for running the test.
 
 ## What can be tested (scenarios)
 

contributingGuides/STORYBOOK.md

@@ -2,7 +2,7 @@
 
 >Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.
 
-At Expensify, we primarily use [Storybook](https://storybook.js.org/) to provide interactive documentation of our design system. This helps bridge the gap between design and engineering to encourage code reusibility and improve communication.
+At Expensify, we primarily use [Storybook](https://storybook.js.org/) to provide interactive documentation of our design system. This helps bridge the gap between design and engineering to encourage code reusability and improve communication.
 
 ### Building and Deploying Storybook
 

contributingGuides/STRICT_MODE.md

@@ -2,7 +2,7 @@
 ## Concurrent react
 This App is rendered using react concurrent mode, which is the direction that React seems to be moving.
 
-Concurrent mode enables a lot of new behaviours in react, most importantly renders can be interrupted by React, re-run or run more than once. This is supposed to make react more performant and webapps more responsive to user actions.
+Concurrent mode enables a lot of new behaviors in react, most importantly renders can be interrupted by React, re-run or run more than once. This is supposed to make react more performant and webapps more responsive to user actions.
 
 Further reading:
  - [What is Concurrent React](https://react.dev/blog/2022/03/29/react-v18#what-is-concurrent-react)

contributingGuides/STYLE.md

@@ -1096,7 +1096,7 @@ type ComponentProps = {
 
 #### Important Note:
 
-In React Native, one **must not** attempt to falsey-check a string for an inline ternary. Even if it's in curly braces, React Native will try to render it as a `<Text>` node and most likely throw an error about trying to render text outside of a `<Text>` component. Use `!!` instead.
+In React Native, one **must not** attempt to falsy-check a string for an inline ternary. Even if it's in curly braces, React Native will try to render it as a `<Text>` node and most likely throw an error about trying to render text outside of a `<Text>` component. Use `!!` instead.
 
 ```tsx
 // Bad! This will cause a breaking an error on native platforms

contributingGuides/STYLING.md

@@ -41,12 +41,12 @@ On the other hand, if we are copying and pasting some chunks of JSX from one pla
 
 ## Use the "Rule of Three"
 
-In order to resist the urge to preoptimize and have many single-use components, we've adopted a main principle:
+In order to resist the urge to pre-optimize and have many single-use components, we've adopted a main principle:
 
 Any array of styles associated with a single type of React element that has at least 3 identical usages should be refactored into:
 
-- A new resusable style that can be used in many places e.g. `styles.button`
-- If that style has modifiers or style variations, then those styles should follow a naming convention of `styles.elementModifer` e.g. `styles.buttonSuccess`
+- A new reusable style that can be used in many places e.g. `styles.button`
+- If that style has modifiers or style variations, then those styles should follow a naming convention of `styles.elementModifier` e.g. `styles.buttonSuccess`
 - If a reusable style has 3 or more modifiers, it should be refactored into a component with props to modify the styles e.g.
 
 ```jsx