feat: setup import alias

Author: azizbecha

.eslintrc

@@ -35,7 +35,7 @@
             "position": "before"
           },
           {
-            "pattern": "@src/**",
+            "pattern": "@/**",
             "group": "internal"
           }
         ],
@@ -71,7 +71,8 @@
     "import/resolver": {
       "node": {
         "extensions": [".js", ".ts", ".tsx"]
-      }
+      },
+      "babel-module": {}
     }
   }
 }

babel.config.js

@@ -1,3 +1,15 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        root: ['./src'],
+        extensions: ['.tsx', '.ts', '.js', '.json'],
+        alias: {
+          '@': './src',
+        },
+      },
+    ],
+  ],
 };

example/babel.config.js

@@ -20,6 +20,7 @@ module.exports = function (api) {
             ),
             // For development, we want to alias the library to the source
             [pak.name]: path.join(__dirname, '..', 'src'),
+            '@': path.join(__dirname, '..', 'src'),
           },
         },
       ],

example/tsconfig.json

@@ -1,3 +1,8 @@
 {
   "extends": "../tsconfig",
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["../src/*"]
+    }
+  }
 }

package.json

@@ -80,12 +80,15 @@
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^29.6.3",
     "babel-loader": "^8.2.3",
+    "babel-plugin-module-resolver": "^5.0.0",
     "babel-test": "^0.1.1",
     "chalk": "^4.0.0",
     "commitlint": "^8.3.4",
     "conventional-changelog-cli": "^2.0.11",
     "dedent": "^0.7.0",
     "eslint": "8.31.0",
+    "eslint-import-resolver-babel-module": "^5.3.1",
+    "eslint-import-resolver-typescript": "^3.5.2",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-local-rules": "^1.3.2",
     "glob": "^7.1.3",

src/components/Appbar/Appbar.tsx

@@ -11,6 +11,9 @@ import {
 
 import color from 'color';
 
+import { useInternalTheme } from '@/core/theming';
+import type { MD3Elevation, ThemeProp } from '@/types';
+
 import AppbarContent from './AppbarContent';
 import {
   AppbarModes,
@@ -21,8 +24,6 @@ import {
   filterAppbarActions,
   AppbarChildProps,
 } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { MD3Elevation, ThemeProp } from '../../types';
 import Surface from '../Surface';
 
 export type Props = Omit<

src/components/Button/Button.tsx

@@ -15,16 +15,17 @@ import {
 
 import color from 'color';
 
+import { useInternalTheme } from '@/core/theming';
+import type { $Omit, ThemeProp } from '@/types';
+import { forwardRef } from '@/utils/forwardRef';
+import hasTouchHandler from '@/utils/hasTouchHandler';
+import { splitStyles } from '@/utils/splitStyles';
+
 import {
   ButtonMode,
   getButtonColors,
   getButtonTouchableRippleStyle,
 } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { $Omit, ThemeProp } from '../../types';
-import { forwardRef } from '../../utils/forwardRef';
-import hasTouchHandler from '../../utils/hasTouchHandler';
-import { splitStyles } from '../../utils/splitStyles';
 import ActivityIndicator from '../ActivityIndicator';
 import Icon, { IconSource } from '../Icon';
 import Surface from '../Surface';

tsconfig.json

@@ -7,7 +7,8 @@
       ],
       "react-native-paper/react-navigation": [
         "./src/react-navigation"
-      ]
+      ],
+      "@/*": ["src/*"]
     },
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,