feat/import-alias

.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',
+        },
+      },
+    ],
+  ],
 };

docs/plugins/docusaurus-react-native-plugin.js

@@ -8,6 +8,7 @@ module.exports = function () {
         mergeStrategy: { 'resolve.extensions': 'prepend' },
         resolve: {
           alias: {
+            '@': path.resolve(__dirname, '../../src'),
             react: path.resolve('node_modules/react'),
             'react-native$': 'react-native-web',
             'react-native-paper': path.resolve('../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/Appbar/AppbarAction.tsx

@@ -8,13 +8,13 @@ import type {
 } from 'react-native';
 
 import color from 'color';
-import type { ThemeProp } from 'src/types';
 
-import { useInternalTheme } from '../../core/theming';
-import { black } from '../../styles/themes/v2/colors';
-import { forwardRef } from '../../utils/forwardRef';
-import type { IconSource } from '../Icon';
-import IconButton from '../IconButton/IconButton';
+import type { IconSource } from '@/components/Icon';
+import IconButton from '@/components/IconButton/IconButton';
+import { useInternalTheme } from '@/core/theming';
+import { black } from '@/styles/themes/v2/colors';
+import type { ThemeProp } from '@/types';
+import { forwardRef } from '@/utils/forwardRef';
 
 export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
   /**

src/components/Appbar/AppbarBackAction.tsx

@@ -7,10 +7,11 @@ import type {
   ViewStyle,
 } from 'react-native';
 
-import type { $Omit } from './../../types';
+import type { $Omit } from '@/types';
+import { forwardRef } from '@/utils/forwardRef';
+
 import AppbarAction from './AppbarAction';
 import AppbarBackIcon from './AppbarBackIcon';
-import { forwardRef } from '../../utils/forwardRef';
 
 export type Props = $Omit<
   React.ComponentPropsWithoutRef<typeof AppbarAction>,

src/components/Appbar/AppbarBackIcon.tsx

@@ -18,7 +18,7 @@ const AppbarBackIcon = ({ size, color }: { size: number; color: string }) => {
       ]}
     >
       <Image
-        source={require('../../assets/back-chevron.png')}
+        source={require('@/assets/back-chevron.png')}
         style={[
           styles.icon,
           { tintColor: color, width: iosIconSize, height: iosIconSize },

src/components/Appbar/AppbarContent.tsx

@@ -14,11 +14,12 @@ import {
 
 import color from 'color';
 
+import Text, { TextRef } from '@/components/Typography/Text';
+import { useInternalTheme } from '@/core/theming';
+import { white } from '@/styles/themes/v2/colors';
+import type { $RemoveChildren, MD3TypescaleKey, ThemeProp } from '@/types';
+
 import { modeTextVariant } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import { white } from '../../styles/themes/v2/colors';
-import type { $RemoveChildren, MD3TypescaleKey, ThemeProp } from '../../types';
-import Text, { TextRef } from '../Typography/Text';
 
 type TitleString = {
   title: string;

src/components/Appbar/AppbarHeader.tsx

@@ -11,16 +11,17 @@ import {
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { useInternalTheme } from '@/core/theming';
+import shadow from '@/styles/shadow';
+import type { ThemeProp } from '@/types';
+
 import { Appbar } from './Appbar';
 import {
   DEFAULT_APPBAR_HEIGHT,
   getAppbarBackgroundColor,
   modeAppbarHeight,
   getAppbarBorders,
 } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import shadow from '../../styles/shadow';
-import type { ThemeProp } from '../../types';
 
 export type Props = Omit<
   React.ComponentProps<typeof Appbar>,

src/components/Appbar/utils.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 import { StyleSheet, Animated } from 'react-native';
 
-import overlay from '../../styles/overlay';
-import { black, white } from '../../styles/themes/v2/colors';
-import type { InternalTheme, ThemeProp } from '../../types';
+import overlay from '@/styles/overlay';
+import { black, white } from '@/styles/themes/v2/colors';
+import type { InternalTheme, ThemeProp } from '@/types';
 
 export type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned';
 

src/components/Avatar/AvatarIcon.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
-import { useInternalTheme } from '../../core/theming';
-import { white } from '../../styles/themes/v2/colors';
-import type { ThemeProp } from '../../types';
-import getContrastingColor from '../../utils/getContrastingColor';
+import { useInternalTheme } from '@/core/theming';
+import { white } from '@/styles/themes/v2/colors';
+import type { ThemeProp } from '@/types';
+import getContrastingColor from '@/utils/getContrastingColor';
+
 import Icon, { IconSource } from '../Icon';
 
 const defaultSize = 64;

src/components/Avatar/AvatarImage.tsx

@@ -9,8 +9,8 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
+import { useInternalTheme } from '@/core/theming';
+import type { ThemeProp } from '@/types';
 
 const defaultSize = 64;
 

src/components/Avatar/AvatarText.tsx

@@ -8,10 +8,11 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import { useInternalTheme } from '../../core/theming';
-import { white } from '../../styles/themes/v2/colors';
-import type { ThemeProp } from '../../types';
-import getContrastingColor from '../../utils/getContrastingColor';
+import { useInternalTheme } from '@/core/theming';
+import { white } from '@/styles/themes/v2/colors';
+import type { ThemeProp } from '@/types';
+import getContrastingColor from '@/utils/getContrastingColor';
+
 import Text from '../Typography/Text';
 
 const defaultSize = 64;

src/components/BottomNavigation/BottomNavigation.tsx

@@ -12,13 +12,14 @@ import {
 
 import useLatestCallback from 'use-latest-callback';
 
+import type { IconSource } from '@/components/Icon';
+import { Props as TouchableRippleProps } from '@/components/TouchableRipple/TouchableRipple';
+import { useInternalTheme } from '@/core/theming';
+import type { ThemeProp } from '@/types';
+import useAnimatedValueArray from '@/utils/useAnimatedValueArray';
+
 import BottomNavigationBar from './BottomNavigationBar';
 import BottomNavigationRouteScreen from './BottomNavigationRouteScreen';
-import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-import useAnimatedValueArray from '../../utils/useAnimatedValueArray';
-import type { IconSource } from '../Icon';
-import { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 
 export type BaseRoute = {
   key: string;

src/components/BottomNavigation/BottomNavigationBar.tsx

@@ -14,25 +14,26 @@ import {
 import color from 'color';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import Badge from '@/components/Badge';
+import Icon, { IconSource } from '@/components/Icon';
+import Surface from '@/components/Surface';
+import TouchableRipple from '@/components/TouchableRipple/TouchableRipple';
+import { Props as TouchableRippleProps } from '@/components/TouchableRipple/TouchableRipple';
+import Text from '@/components/Typography/Text';
+import { useInternalTheme } from '@/core/theming';
+import overlay from '@/styles/overlay';
+import { black, white } from '@/styles/themes/v2/colors';
+import type { ThemeProp } from '@/types';
+import useAnimatedValue from '@/utils/useAnimatedValue';
+import useAnimatedValueArray from '@/utils/useAnimatedValueArray';
+import useIsKeyboardShown from '@/utils/useIsKeyboardShown';
+import useLayout from '@/utils/useLayout';
+
 import {
   getActiveTintColor,
   getInactiveTintColor,
   getLabelColor,
 } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import overlay from '../../styles/overlay';
-import { black, white } from '../../styles/themes/v2/colors';
-import type { ThemeProp } from '../../types';
-import useAnimatedValue from '../../utils/useAnimatedValue';
-import useAnimatedValueArray from '../../utils/useAnimatedValueArray';
-import useIsKeyboardShown from '../../utils/useIsKeyboardShown';
-import useLayout from '../../utils/useLayout';
-import Badge from '../Badge';
-import Icon, { IconSource } from '../Icon';
-import Surface from '../Surface';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
-import { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
-import Text from '../Typography/Text';
 
 type BaseRoute = {
   key: string;

src/components/BottomNavigation/utils.ts

@@ -1,7 +1,7 @@
 import color from 'color';
 import type { InternalTheme } from 'src/types';
 
-import type { black, white } from '../../styles/themes/v2/colors';
+import type { black, white } from '@/styles/themes/v2/colors';
 
 type BaseProps = {
   defaultColor: typeof black | typeof white;

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';

src/components/Button/utils.tsx

@@ -2,9 +2,9 @@ import { StyleSheet, type ViewStyle } from 'react-native';
 
 import color from 'color';
 
-import { black, white } from '../../styles/themes/v2/colors';
-import type { InternalTheme } from '../../types';
-import { splitStyles } from '../../utils/splitStyles';
+import { black, white } from '@/styles/themes/v2/colors';
+import type { InternalTheme } from '@/types';
+import { splitStyles } from '@/utils/splitStyles';
 
 export type ButtonMode =
   | 'text'

src/components/Card/Card.tsx

@@ -11,16 +11,17 @@ import {
 
 import useLatestCallback from 'use-latest-callback';
 
+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 CardActions from './CardActions';
 import CardContent from './CardContent';
 import CardCover from './CardCover';
 import CardTitle from './CardTitle';
 import { getCardColors } 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 Surface from '../Surface';
 
 type CardComposition = {

src/components/Card/CardActions.tsx

@@ -3,8 +3,9 @@ import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import type { ThemeProp } from 'src/types';
 
+import { useInternalTheme } from '@/core/theming';
+
 import { CardActionChildProps } from './utils';
-import { useInternalTheme } from '../../core/theming';
 
 export type Props = React.ComponentPropsWithRef<typeof View> & {
   /**

src/components/Card/CardCover.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
+import { useInternalTheme } from '@/core/theming';
+import { grey200 } from '@/styles/themes/v2/colors';
+import type { ThemeProp } from '@/types';
+import { splitStyles } from '@/utils/splitStyles';
+
 import { getCardCoverStyle } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import { grey200 } from '../../styles/themes/v2/colors';
-import type { ThemeProp } from '../../types';
-import { splitStyles } from '../../utils/splitStyles';
 
 export type Props = React.ComponentPropsWithRef<typeof Image> & {
   /**