Merge branch 'main' into fix/30446

.eslintrc.js

@@ -14,11 +14,6 @@ const restrictedImportPaths = [
         importNames: ['TouchableOpacity', 'TouchableWithoutFeedback', 'TouchableNativeFeedback', 'TouchableHighlight'],
         message: "Please use 'PressableWithFeedback' and/or 'PressableWithoutFeedback' from 'src/components/Pressable' instead.",
     },
-    {
-        name: 'awesome-phonenumber',
-        importNames: ['parsePhoneNumber'],
-        message: "Please use '@libs/PhoneNumber' instead.",
-    },
     {
         name: 'react-native-safe-area-context',
         importNames: ['useSafeAreaInsets', 'SafeAreaConsumer', 'SafeAreaInsetsContext'],
@@ -29,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 = {
@@ -176,10 +203,26 @@ 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',
                 'jsdoc/no-types': 'error',
+                'rulesdir/no-default-props': 'error',
                 'import/no-extraneous-dependencies': 'off',
                 'rulesdir/prefer-underscore-method': 'off',
                 'rulesdir/prefer-import-module-contents': 'off',

.github/PULL_REQUEST_TEMPLATE.md

@@ -103,6 +103,9 @@ This is a checklist for PR authors. Please make sure to complete all tasks and c
 - [ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like `Avatar` is modified, I verified that `Avatar` is working as expected in all cases)
 - [ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
 - [ ] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
+- [ ] If the PR modifies the form input styles:
+    - [ ] I verified that all the inputs inside a form are aligned with each other.
+    - [ ] I added `Design` label so the design team can review the changes.
 - [ ] If a new page is added, I verified it's using the `ScrollView` component to make it scrollable when more elements are added to the page.
 - [ ] If the `main` branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the `Test` steps.
 

.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/authorChecklist/index.js

@@ -99,6 +99,20 @@ class GithubUtils {
         return this.internalOctokit.rest;
     }
 
+    /**
+     * Get the graphql instance from internal octokit.
+     * @readonly
+     * @static
+     * @memberof GithubUtils
+     */
+    static get graphql() {
+        if (this.internalOctokit) {
+            return this.internalOctokit.graphql;
+        }
+        this.initOctokit();
+        return this.internalOctokit.graphql;
+    }
+
     /**
      * Either give an existing instance of Octokit paginate or create a new one
      *

.github/actions/javascript/awaitStagingDeploys/index.js

@@ -211,6 +211,20 @@ class GithubUtils {
         return this.internalOctokit.rest;
     }
 
+    /**
+     * Get the graphql instance from internal octokit.
+     * @readonly
+     * @static
+     * @memberof GithubUtils
+     */
+    static get graphql() {
+        if (this.internalOctokit) {
+            return this.internalOctokit.graphql;
+        }
+        this.initOctokit();
+        return this.internalOctokit.graphql;
+    }
+
     /**
      * Either give an existing instance of Octokit paginate or create a new one
      *

.github/actions/javascript/checkDeployBlockers/index.js

@@ -178,6 +178,20 @@ class GithubUtils {
         return this.internalOctokit.rest;
     }
 
+    /**
+     * Get the graphql instance from internal octokit.
+     * @readonly
+     * @static
+     * @memberof GithubUtils
+     */
+    static get graphql() {
+        if (this.internalOctokit) {
+            return this.internalOctokit.graphql;
+        }
+        this.initOctokit();
+        return this.internalOctokit.graphql;
+    }
+
     /**
      * Either give an existing instance of Octokit paginate or create a new one
      *

.github/actions/javascript/createOrUpdateStagingDeploy/index.js

@@ -407,6 +407,20 @@ class GithubUtils {
         return this.internalOctokit.rest;
     }
 
+    /**
+     * Get the graphql instance from internal octokit.
+     * @readonly
+     * @static
+     * @memberof GithubUtils
+     */
+    static get graphql() {
+        if (this.internalOctokit) {
+            return this.internalOctokit.graphql;
+        }
+        this.initOctokit();
+        return this.internalOctokit.graphql;
+    }
+
     /**
      * Either give an existing instance of Octokit paginate or create a new one
      *

.github/actions/javascript/getDeployPullRequestList/index.js

@@ -350,6 +350,20 @@ class GithubUtils {
         return this.internalOctokit.rest;
     }
 
+    /**
+     * Get the graphql instance from internal octokit.
+     * @readonly
+     * @static
+     * @memberof GithubUtils
+     */
+    static get graphql() {
+        if (this.internalOctokit) {
+            return this.internalOctokit.graphql;
+        }
+        this.initOctokit();
+        return this.internalOctokit.graphql;
+    }
+
     /**
      * Either give an existing instance of Octokit paginate or create a new one
      *

.github/actions/javascript/getPullRequestDetails/index.js

@@ -145,6 +145,20 @@ class GithubUtils {
         return this.internalOctokit.rest;
     }
 
+    /**
+     * Get the graphql instance from internal octokit.
+     * @readonly
+     * @static
+     * @memberof GithubUtils
+     */
+    static get graphql() {
+        if (this.internalOctokit) {
+            return this.internalOctokit.graphql;
+        }
+        this.initOctokit();
+        return this.internalOctokit.graphql;
+    }
+
     /**
      * Either give an existing instance of Octokit paginate or create a new one
      *

.github/actions/javascript/getReleaseBody/index.js

@@ -145,6 +145,20 @@ class GithubUtils {
         return this.internalOctokit.rest;
     }
 
+    /**
+     * Get the graphql instance from internal octokit.
+     * @readonly
+     * @static
+     * @memberof GithubUtils
+     */
+    static get graphql() {
+        if (this.internalOctokit) {
+            return this.internalOctokit.graphql;
+        }
+        this.initOctokit();
+        return this.internalOctokit.graphql;
+    }
+
     /**
      * Either give an existing instance of Octokit paginate or create a new one
      *

.github/actions/javascript/isStagingDeployLocked/index.js

@@ -129,6 +129,20 @@ class GithubUtils {
         return this.internalOctokit.rest;
     }
 
+    /**
+     * Get the graphql instance from internal octokit.
+     * @readonly
+     * @static
+     * @memberof GithubUtils
+     */
+    static get graphql() {
+        if (this.internalOctokit) {
+            return this.internalOctokit.graphql;
+        }
+        this.initOctokit();
+        return this.internalOctokit.graphql;
+    }
+
     /**
      * Either give an existing instance of Octokit paginate or create a new one
      *

.github/actions/javascript/markPullRequestsAsDeployed/index.js

@@ -294,6 +294,20 @@ class GithubUtils {
         return this.internalOctokit.rest;
     }
 
+    /**
+     * Get the graphql instance from internal octokit.
+     * @readonly
+     * @static
+     * @memberof GithubUtils
+     */
+    static get graphql() {
+        if (this.internalOctokit) {
+            return this.internalOctokit.graphql;
+        }
+        this.initOctokit();
+        return this.internalOctokit.graphql;
+    }
+
     /**
      * Either give an existing instance of Octokit paginate or create a new one
      *