[No QA] Sorted import aliases

.eslintrc.js

@@ -24,7 +24,7 @@ const restrictedImportPatterns = [
 ];
 
 module.exports = {
-    extends: ['expensify', 'plugin:storybook/recommended', 'plugin:react-hooks/recommended', 'plugin:react-native-a11y/basic', 'prettier'],
+    extends: ['expensify', 'plugin:storybook/recommended', 'plugin:react-hooks/recommended', 'plugin:react-native-a11y/basic', 'plugin:@dword-design/import-alias/recommended', 'prettier'],
     plugins: ['react-hooks', 'react-native-a11y'],
     parser: 'babel-eslint',
     ignorePatterns: ['!.*', 'src/vendor', '.github/actions/**/index.js', 'desktop/dist/*.js', 'dist/*.js', 'node_modules/.bin/**', 'node_modules/.cache/**', '.git/**'],
@@ -49,8 +49,31 @@ module.exports = {
                         touchables: ['PressableWithoutFeedback', 'PressableWithFeedback'],
                     },
                 ],
+                '@dword-design/import-alias/prefer-alias': [
+                    'warn',
+                    {
+                        alias: {
+                            '@assets': './assets',
+                            '@components': './src/components',
+                            '@hooks': './src/hooks',
+                            // This is needed up here, if not @libs/actions would take the priority
+                            '@userActions': './src/libs/actions',
+                            '@libs': './src/libs',
+                            '@navigation': './src/libs/Navigation',
+                            '@pages': './src/pages',
+                            '@styles': './src/styles',
+                            // This path is provide alias for files like `ONYXKEYS` and `CONST`.
+                            '@src': './src',
+                        },
+                    },
+                ],
             },
         },
+        // This helps disable the `prefer-alias` rule to be enabled for specific directories
+        {
+            files: ['tests/**/*.js', 'tests/**/*.ts', 'tests/**/*.jsx', 'assets/**/*.js', '.storybook/**/*.js'],
+            rules: {'@dword-design/import-alias/prefer-alias': ['off']},
+        },
         {
             files: ['*.js', '*.jsx'],
             settings: {

.prettierrc.js

@@ -6,4 +6,7 @@ module.exports = {
     arrowParens: 'always',
     printWidth: 190,
     singleAttributePerLine: true,
+    importOrder: ['@assets/(.*)$', '@components/(.*)$', '@hooks/(.*)$', '@libs/(.*)$', '@navigation/(.*)$', '@pages/(.*)$', '@styles/(.*)$', '@userActions/(.*)$', '@src/(.*)$', '^[./]'],
+    importOrderSortSpecifiers: true,
+    importOrderCaseInsensitive: true,
 };

.storybook/preview.js

@@ -1,16 +1,16 @@
+import {PortalProvider} from '@gorhom/portal';
 import React from 'react';
 import Onyx from 'react-native-onyx';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
-import {PortalProvider} from '@gorhom/portal';
-import './fonts.css';
 import ComposeProviders from '../src/components/ComposeProviders';
 import HTMLEngineProvider from '../src/components/HTMLEngineProvider';
-import OnyxProvider from '../src/components/OnyxProvider';
 import {LocaleContextProvider} from '../src/components/LocaleContextProvider';
-import {KeyboardStateProvider} from '../src/components/withKeyboardState';
+import OnyxProvider from '../src/components/OnyxProvider';
 import {EnvironmentProvider} from '../src/components/withEnvironment';
+import {KeyboardStateProvider} from '../src/components/withKeyboardState';
 import {WindowDimensionsProvider} from '../src/components/withWindowDimensions';
 import ONYXKEYS from '../src/ONYXKEYS';
+import './fonts.css';
 
 Onyx.init({
     keys: ONYXKEYS,

.storybook/webpack.config.js

@@ -28,6 +28,9 @@ module.exports = ({config}) => {
         'react-native-web': '@expensify/react-native-web',
         '@react-native-community/netinfo': path.resolve(__dirname, '../__mocks__/@react-native-community/netinfo.js'),
         '@react-navigation/native': path.resolve(__dirname, '../__mocks__/@react-navigation/native'),
+
+        // Module alias support for storybook files, coping from `webpack.common.js`
+        ...custom.resolve.alias,
     };
 
     // Necessary to overwrite the values in the existing DefinePlugin hardcoded to the Config staging values

assets/emojis/common.js

@@ -1,11 +1,11 @@
 import Smiley from '../images/emoji.svg';
-import AnimalsAndNature from '../images/emojiCategoryIcons/plant.svg';
+import Flags from '../images/emojiCategoryIcons/flag.svg';
 import FoodAndDrink from '../images/emojiCategoryIcons/hamburger.svg';
-import TravelAndPlaces from '../images/emojiCategoryIcons/plane.svg';
-import Activities from '../images/emojiCategoryIcons/soccer-ball.svg';
 import Objects from '../images/emojiCategoryIcons/light-bulb.svg';
 import Symbols from '../images/emojiCategoryIcons/peace-sign.svg';
-import Flags from '../images/emojiCategoryIcons/flag.svg';
+import TravelAndPlaces from '../images/emojiCategoryIcons/plane.svg';
+import AnimalsAndNature from '../images/emojiCategoryIcons/plant.svg';
+import Activities from '../images/emojiCategoryIcons/soccer-ball.svg';
 import FrequentlyUsed from '../images/history.svg';
 
 const skinTones = [

babel.config.js

@@ -41,6 +41,42 @@ const metro = {
         ['@babel/plugin-proposal-private-property-in-object', {loose: true}],
         // The reanimated babel plugin needs to be last, as stated here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation
         'react-native-reanimated/plugin',
+        // Import alias for native devices
+        [
+            'module-resolver',
+            {
+                extensions: [
+                    '.native.js',
+                    '.native.jsx',
+                    '.native.ts',
+                    '.native.tsx',
+                    '.js',
+                    '.jsx',
+                    '.ts',
+                    '.tsx',
+                    '.ios.js',
+                    '.ios.jsx',
+                    '.ios.ts',
+                    '.ios.tsx',
+                    '.android.js',
+                    '.android.jsx',
+                    '.android.ts',
+                    '.android.tx',
+                ],
+                alias: {
+                    '@assets': './assets',
+                    '@components': './src/components',
+                    '@hooks': './src/hooks',
+                    '@libs': './src/libs',
+                    '@navigation': './src/libs/Navigation',
+                    '@pages': './src/pages',
+                    '@styles': './src/styles',
+                    // This path is provide alias for files like `ONYXKEYS` and `CONST`.
+                    '@src': './src',
+                    '@userActions': './src/libs/actions',
+                },
+            },
+        ],
     ],
 };
 

config/webpack/webpack.common.js

@@ -189,6 +189,19 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
             'react-native-web': '@expensify/react-native-web',
             'react-content-loader/native': 'react-content-loader',
             'lottie-react-native': 'react-native-web-lottie',
+
+            // Module alias for web & desktop
+            // https://webpack.js.org/configuration/resolve/#resolvealias
+            '@assets': path.resolve(__dirname, '../../assets'),
+            '@components': path.resolve(__dirname, '../../src/components/'),
+            '@hooks': path.resolve(__dirname, '../../src/hooks/'),
+            '@libs': path.resolve(__dirname, '../../src/libs/'),
+            '@navigation': path.resolve(__dirname, '../../src/libs/Navigation/'),
+            '@pages': path.resolve(__dirname, '../../src/pages/'),
+            '@styles': path.resolve(__dirname, '../../src/styles/'),
+            // This path is provide alias for files like `ONYXKEYS` and `CONST`.
+            '@src': path.resolve(__dirname, '../../src/'),
+            '@userActions': path.resolve(__dirname, '../../src/libs/actions/'),
         },
 
         // React Native libraries may have web-specific module implementations that appear with the extension `.web.js`

index.js

@@ -1,9 +1,8 @@
 /**
  * @format
  */
-
-import {enableLegacyWebImplementation} from 'react-native-gesture-handler';
 import {AppRegistry} from 'react-native';
+import {enableLegacyWebImplementation} from 'react-native-gesture-handler';
 import App from './src/App';
 import Config from './src/CONFIG';
 import additionalAppSetup from './src/setup';

jest/setup.js

@@ -1,8 +1,8 @@
-import 'setimmediate';
-import 'react-native-gesture-handler/jestSetup';
+import mockClipboard from '@react-native-clipboard/clipboard/jest/clipboard-mock';
 import '@shopify/flash-list/jestSetup';
+import 'react-native-gesture-handler/jestSetup';
 import * as reanimatedJestUtils from 'react-native-reanimated/src/reanimated2/jestUtils';
-import mockClipboard from '@react-native-clipboard/clipboard/jest/clipboard-mock';
+import 'setimmediate';
 import setupMockImages from './setupMockImages';
 
 setupMockImages();