Update branch

.eslintrc.js

@@ -24,13 +24,45 @@ const restrictedImportPaths = [
         importNames: ['CSSProperties'],
         message: "Please use 'ViewStyle', 'TextStyle', 'ImageStyle' from 'react-native' instead.",
     },
+    {
+        name: '@styles/index',
+        importNames: ['default', 'defaultStyles'],
+        message: 'Do not import styles directly. Please use the `useThemeStyles` hook or `withThemeStyles` HOC instead.',
+    },
+    {
+        name: '@styles/utils',
+        importNames: ['default', 'DefaultStyleUtils'],
+        message: 'Do not import StyleUtils directly. Please use the `useStyleUtils` hook or `withStyleUtils` HOC instead.',
+    },
+    {
+        name: '@styles/theme',
+        importNames: ['default', 'defaultTheme'],
+
+        message: 'Do not import themes directly. Please use the `useTheme` hook or `withTheme` HOC instead.',
+    },
+    {
+        name: '@styles/theme/illustrations',
+        message: 'Do not import theme illustrations directly. Please use the `useThemeIllustrations` hook instead.',
+    },
 ];
 
 const restrictedImportPatterns = [
     {
         group: ['**/assets/animations/**/*.json'],
         message: "Do not import animations directly. Please use the 'src/components/LottieAnimations' import instead.",
     },
+    {
+        group: ['@styles/theme/themes/**'],
+        message: 'Do not import themes directly. Please use the `useTheme` hook or `withTheme` HOC instead.',
+    },
+    {
+        group: ['@styles/utils/**', '!@styles/utils/FontUtils', '!@styles/utils/types'],
+        message: 'Do not import style util functions directly. Please use the `useStyleUtils` hook or `withStyleUtils` HOC instead.',
+    },
+    {
+        group: ['@styles/theme/illustrations/themes/**'],
+        message: 'Do not import theme illustrations directly. Please use the `useThemeIllustrations` hook instead.',
+    },
 ];
 
 module.exports = {
@@ -171,6 +203,21 @@ module.exports = {
                 '@typescript-eslint/switch-exhaustiveness-check': 'error',
                 '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
                 '@typescript-eslint/no-floating-promises': 'off',
+                '@typescript-eslint/consistent-type-imports': [
+                    'error',
+                    {
+                        prefer: 'type-imports',
+                        fixStyle: 'separate-type-imports',
+                    },
+                ],
+                '@typescript-eslint/no-import-type-side-effects': 'error',
+                '@typescript-eslint/consistent-type-exports': [
+                    'error',
+                    {
+                        fixMixedExportsWithInlineTypeSpecifier: false,
+                    },
+                ],
+                'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
                 'es/no-nullish-coalescing-operators': 'off',
                 'es/no-optional-chaining': 'off',
                 'valid-jsdoc': 'off',

.github/actions/javascript/authorChecklist/categories/index.ts

@@ -1,4 +1,4 @@
-import Category from './Category';
+import type Category from './Category';
 import newComponent from './newComponentCategory';
 
 const categories: Category[] = [newComponent];

.github/actions/javascript/authorChecklist/categories/newComponentCategory.ts

@@ -4,7 +4,7 @@ import traverse from '@babel/traverse';
 import CONST from '../../../../libs/CONST';
 import GithubUtils from '../../../../libs/GithubUtils';
 import promiseSome from '../../../../libs/promiseSome';
-import Category from './Category';
+import type Category from './Category';
 
 type SuperClassType = {superClass: {name?: string; object: {name: string}; property: {name: string}} | null; name: string};
 

.github/actions/javascript/validateReassureOutput/action.yml

@@ -7,9 +7,6 @@ inputs:
   COUNT_DEVIATION:
     description: Allowable deviation for the mean count in regression test results.
     required: true
-  REGRESSION_OUTPUT:
-    description: Refers to the results obtained from regression tests `.reassure/output.json`.
-    required: true
 runs:
   using: 'node20'
   main: './index.js'

.github/actions/javascript/validateReassureOutput/index.js

@@ -8,9 +8,10 @@
 /***/ ((module, __unused_webpack_exports, __nccwpck_require__) => {
 
 const core = __nccwpck_require__(186);
+const fs = __nccwpck_require__(147);
 
 const run = () => {
-    const regressionOutput = JSON.parse(core.getInput('REGRESSION_OUTPUT', {required: true}));
+    const regressionOutput = JSON.parse(fs.readFileSync('.reassure/output.json', 'utf8'));
     const countDeviation = core.getInput('COUNT_DEVIATION', {required: true});
     const durationDeviation = core.getInput('DURATION_DEVIATION_PERCENTAGE', {required: true});
 

.github/actions/javascript/validateReassureOutput/validateReassureOutput.js

@@ -1,7 +1,8 @@
 const core = require('@actions/core');
+const fs = require('fs');
 
 const run = () => {
-    const regressionOutput = JSON.parse(core.getInput('REGRESSION_OUTPUT', {required: true}));
+    const regressionOutput = JSON.parse(fs.readFileSync('.reassure/output.json', 'utf8'));
     const countDeviation = core.getInput('COUNT_DEVIATION', {required: true});
     const durationDeviation = core.getInput('DURATION_DEVIATION_PERCENTAGE', {required: true});
 

.github/workflows/platformDeploy.yml

@@ -10,7 +10,6 @@ on:
 
 env:
   SHOULD_DEPLOY_PRODUCTION: ${{ github.event_name == 'release' }}
-  DEVELOPER_DIR: /Applications/Xcode_15.0.1.app/Contents/Developer
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event_name }}
@@ -174,6 +173,8 @@ jobs:
     name: Build and deploy iOS
     needs: validateActor
     if: ${{ fromJSON(needs.validateActor.outputs.IS_DEPLOYER) }}
+    env:
+      DEVELOPER_DIR: /Applications/Xcode_15.0.1.app/Contents/Developer
     runs-on: macos-13-xlarge
     steps:
       - name: Checkout

.github/workflows/reassurePerformanceTests.yml

@@ -36,17 +36,10 @@ jobs:
           npm install --force
           npx reassure --branch
 
-      - name: Read output.json
-        id: reassure
-        uses: juliangruber/read-file-action@v1
-        with:
-          path: .reassure/output.json
-
       - name: Validate output.json
         id: validateReassureOutput
         uses: ./.github/actions/javascript/validateReassureOutput
         with:
           DURATION_DEVIATION_PERCENTAGE: 20
           COUNT_DEVIATION: 0
-          REGRESSION_OUTPUT: ${{ steps.reassure.outputs.content }}
 

.github/workflows/testBuild.yml

@@ -10,9 +10,6 @@ on:
     types: [opened, synchronize, labeled]
     branches: ['*ci-test/**']
 
-env:
-  DEVELOPER_DIR: /Applications/Xcode_15.0.1.app/Contents/Developer
-
 jobs:
   validateActor:
     runs-on: ubuntu-latest
@@ -139,6 +136,7 @@ jobs:
     if: ${{ fromJSON(needs.validateActor.outputs.READY_TO_BUILD) }}
     env:
       PULL_REQUEST_NUMBER: ${{ github.event.number || github.event.inputs.PULL_REQUEST_NUMBER }}
+      DEVELOPER_DIR: /Applications/Xcode_15.0.1.app/Contents/Developer
     runs-on: macos-13-xlarge
     steps:
       - name: Checkout

android/app/build.gradle

@@ -96,8 +96,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001042101
-        versionName "1.4.21-1"
+        versionCode 1001042200
+        versionName "1.4.22-0"
     }
 
     flavorDimensions "default"

assets/emojis/common.ts

@@ -7,7 +7,7 @@ import TravelAndPlaces from '@assets/images/emojiCategoryIcons/plane.svg';
 import AnimalsAndNature from '@assets/images/emojiCategoryIcons/plant.svg';
 import Activities from '@assets/images/emojiCategoryIcons/soccer-ball.svg';
 import FrequentlyUsed from '@assets/images/history.svg';
-import {HeaderEmoji, PickerEmojis} from './types';
+import type {HeaderEmoji, PickerEmojis} from './types';
 
 const skinTones = [
     {

assets/emojis/en.ts

@@ -1,4 +1,4 @@
-import {EmojisList} from './types';
+import type {EmojisList} from './types';
 
 /* eslint-disable @typescript-eslint/naming-convention */
 const enEmojis: EmojisList = {

assets/emojis/es.ts

@@ -1,4 +1,4 @@
-import {EmojisList} from './types';
+import type {EmojisList} from './types';
 
 /* eslint-disable @typescript-eslint/naming-convention */
 const esEmojis: EmojisList = {

assets/emojis/index.ts

@@ -1,10 +1,13 @@
+import type {Locale} from '@src/types/onyx';
 import emojis from './common';
 import enEmojis from './en';
 import esEmojis from './es';
-import {Emoji} from './types';
+import type {Emoji, EmojisList} from './types';
 
 type EmojiTable = Record<string, Emoji>;
 
+type LocaleEmojis = Partial<Record<Locale, EmojisList>>;
+
 const emojiNameTable = emojis.reduce<EmojiTable>((prev, cur) => {
     const newValue = prev;
     if (!('header' in cur) && cur.name) {
@@ -26,10 +29,10 @@ const emojiCodeTableWithSkinTones = emojis.reduce<EmojiTable>((prev, cur) => {
     return newValue;
 }, {});
 
-const localeEmojis = {
+const localeEmojis: LocaleEmojis = {
     en: enEmojis,
     es: esEmojis,
-} as const;
+};
 
 export default emojis;
 export {emojiNameTable, emojiCodeTableWithSkinTones, localeEmojis};

assets/emojis/types.ts

@@ -1,9 +1,9 @@
-import IconAsset from '@src/types/utils/IconAsset';
+import type IconAsset from '@src/types/utils/IconAsset';
 
 type Emoji = {
     code: string;
     name: string;
-    types?: string[];
+    types?: readonly string[];
 };
 
 type HeaderEmoji = {
@@ -12,8 +12,10 @@ type HeaderEmoji = {
     code: string;
 };
 
-type PickerEmojis = Array<Emoji | HeaderEmoji>;
+type PickerEmoji = Emoji | HeaderEmoji;
+
+type PickerEmojis = PickerEmoji[];
 
 type EmojisList = Record<string, {keywords: string[]; name?: string}>;
 
-export type {Emoji, HeaderEmoji, EmojisList, PickerEmojis};
+export type {Emoji, HeaderEmoji, EmojisList, PickerEmojis, PickerEmoji};

contributingGuides/TS_STYLE.md

@@ -26,6 +26,7 @@
   - [1.19 Satisfies operator](#satisfies-operator)
   - [1.20 Hooks instead of HOCs](#hooks-instead-of-hocs)
   - [1.21 `compose` usage](#compose-usage)
+  - [1.22 Type imports](#type-imports)
 - [Exception to Rules](#exception-to-rules)
 - [Communication Items](#communication-items)
 - [Migration Guidelines](#migration-guidelines)
@@ -383,7 +384,7 @@ type Foo = {
 
 <a name="file-organization"></a><a name="1.15"></a>
 
-- [1.15](#file-organization) **File organization**: In modules with platform-specific implementations, create `types.ts` to define shared types. Import and use shared types in each platform specific files. Do not use [`satisfies` operator](#satisfies-operator) for platform-specific implementations, always define shared types that complies with all variants. 
+- [1.15](#file-organization) **File organization**: In modules with platform-specific implementations, create `types.ts` to define shared types. Import and use shared types in each platform specific files. Do not use [`satisfies` operator](#satisfies-operator) for platform-specific implementations, always define shared types that complies with all variants.
 
   > Why? To encourage consistent API across platform-specific implementations. If you're migrating module that doesn't have a default implement (i.e. `index.ts`, e.g. `getPlatform`), refer to [Migration Guidelines](#migration-guidelines) for further information.
 
@@ -514,7 +515,7 @@ type Foo = {
   <a name="hooks-instead-of-hocs"></a><a name="1.20"></a>
 
 - [1.20](#hooks-instead-of-hocs) **Hooks instead of HOCs**: Replace HOCs usage with Hooks whenever possible.
-  
+
   > Why? Hooks are easier to use (can be used inside the function component), and don't need nesting or `compose` when exporting the component. It also allows us to remove `compose` completely in some components since it has been bringing up some issues with TypeScript. Read the [`compose` usage](#compose-usage) section for further information about the TypeScript issues with `compose`.
 
   > Note: Because Onyx doesn't provide a hook yet, in a component that accesses Onyx data with `withOnyx` HOC, please make sure that you don't use other HOCs (if applicable) to avoid HOC nesting.
@@ -571,7 +572,7 @@ type Foo = {
   <a name="compose-usage"></a><a name="1.21"></a>
 
 - [1.21](#compose-usage) **`compose` usage**: Avoid the usage of `compose` function to compose HOCs in TypeScript files. Use nesting instead.
-  
+
   > Why? `compose` function doesn't work well with TypeScript when dealing with several HOCs being used in a component, many times resulting in wrong types and errors. Instead, nesting can be used to allow a seamless use of multiple HOCs and result in a correct return type of the compoment. Also, you can use [hooks instead of HOCs](#hooks-instead-of-hocs) whenever possible to minimize or even remove the need of HOCs in the component.
 
   ```ts
@@ -607,6 +608,38 @@ type Foo = {
   export default withCurrentUserPersonalDetails(ComponentWithReportOrNotFound);
   ```
 
+   <a name="type-imports"></a><a name="1.22"></a>
+
+- [1.22](#type-imports) **Type imports/exports**: Always use the `type` keyword when importing/exporting types
+
+  > Why? In order to improve code clarity and consistency and reduce bundle size after typescript transpilation, we enforce the all type imports/exports to contain the `type` keyword. This way, TypeScript can automatically remove those imports from the transpiled JavaScript bundle 
+
+  Imports:
+  ```ts
+  // BAD
+  import {SomeType} from './a'
+  import someVariable from './a'
+
+  import {someVariable, SomeOtherType} from './b'
+
+  // GOOD
+  import type {SomeType} from './a'
+  import someVariable from './a'
+  ```
+
+    Exports:
+  ```ts
+  // BAD
+  export {SomeType}
+  export someVariable
+  // or 
+  export {someVariable, SomeOtherType}
+
+  // GOOD
+  export type {SomeType}
+  export someVariable
+  ```
+
 ## Exception to Rules
 
 Most of the rules are enforced in ESLint or checked by TypeScript. If you think your particular situation warrants an exception, post the context in the `#expensify-open-source` Slack channel with your message prefixed with `TS EXCEPTION:`. The internal engineer assigned to the PR should be the one that approves each exception, however all discussion regarding granting exceptions should happen in the public channel instead of the GitHub PR page so that the TS migration team can access them easily.

ios/NewExpensify/Info.plist

@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.21</string>
+	<string>1.4.22</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.21.1</string>
+	<string>1.4.22.0</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.21</string>
+	<string>1.4.22</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.21.1</string>
+	<string>1.4.22.0</string>
 </dict>
 </plist>

ios/Podfile.lock

@@ -614,7 +614,7 @@ PODS:
     - React-Core
   - react-native-pager-view (6.2.0):
     - React-Core
-  - react-native-pdf (6.7.3):
+  - react-native-pdf (6.7.4):
     - React-Core
   - react-native-performance (5.1.0):
     - React-Core
@@ -1265,7 +1265,7 @@ SPEC CHECKSUMS:
   react-native-key-command: 5af6ee30ff4932f78da6a2109017549042932aa5
   react-native-netinfo: ccbe1085dffd16592791d550189772e13bf479e2
   react-native-pager-view: 0ccb8bf60e2ebd38b1f3669fa3650ecce81db2df
-  react-native-pdf: b4ca3d37a9a86d9165287741c8b2ef4d8940c00e
+  react-native-pdf: 79aa75e39a80c1d45ffe58aa500f3cf08f267a2e
   react-native-performance: cef2b618d47b277fb5c3280b81a3aad1e72f2886
   react-native-plaid-link-sdk: df1618a85a615d62ff34e34b76abb7a56497fbc1
   react-native-quick-sqlite: bcc7a7a250a40222f18913a97cd356bf82d0a6c4