Add import aliases for src/ and assets/

jest.config.js

@@ -5,9 +5,9 @@ module.exports = {
   moduleNameMapper: {
     // Metro resolves SVGs to components via react-native-svg-transformer; Jest gets a stub instead
     '\\.svg$': '<rootDir>/__mocks__/svgMock.js',
-    // Absolute imports relative to the repo root (tsconfig baseUrl)
-    '^src/(.*)$': '<rootDir>/src/$1',
-    '^assets/(.*)$': '<rootDir>/assets/$1',
+    // `@` and `@assets` are aliases for `src` and `assets` (see tsconfig paths)
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '^@assets/(.*)$': '<rootDir>/assets/$1',
   },
   transformIgnorePatterns: [
     // jest-expo's default list, extended with untranspiled libraries this app uses

src/App.test.tsx

@@ -1,7 +1,7 @@
 import { render, waitFor } from '@testing-library/react-native';
 import React from 'react';
 
-import App from 'src/App';
+import App from '@/App';
 
 it('renders the whole app without crashing', async () => {
   const view = render(<App />);

src/Navigation.tsx

@@ -3,17 +3,17 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React from 'react';
 
-import IconEvent from 'assets/icons/event.svg';
-import IconInfo from 'assets/icons/information-circle.svg';
-import IconPerson from 'assets/icons/person.svg';
-import About from 'src/modules/about/About';
-import EventList from 'src/modules/events/EventList';
-import Login from 'src/modules/login/Login';
-import Membership from 'src/modules/membership/Membership';
-import UserDelete from 'src/modules/membership/UserDelete';
-import UserRegister from 'src/modules/register/UserRegister';
-import theme from 'src/theme';
-import type { EventStackParamList, HomeTabParamList, UserStackParamList } from 'src/types/navigation';
+import About from '@/modules/about/About';
+import EventList from '@/modules/events/EventList';
+import Login from '@/modules/login/Login';
+import Membership from '@/modules/membership/Membership';
+import UserDelete from '@/modules/membership/UserDelete';
+import UserRegister from '@/modules/register/UserRegister';
+import theme from '@/theme';
+import type { EventStackParamList, HomeTabParamList, UserStackParamList } from '@/types/navigation';
+import IconEvent from '@assets/icons/event.svg';
+import IconInfo from '@assets/icons/information-circle.svg';
+import IconPerson from '@assets/icons/person.svg';
 
 // This looks ugly, even though it's a recommended style from the branding profile.
 // TODO: Change this

src/components/Button.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Pressable, PressableProps, StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
-import theme from 'src/theme';
+import theme from '@/theme';
 
 export type ButtonProps = Omit<PressableProps, 'style'> & {
   style?: StyleProp<ViewStyle>;

src/components/FormErrors.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Text, StyleSheet, View } from 'react-native';
 
-import IconExclamationTriangle from 'assets/icons/exclamation-triangle.svg';
-import theme from 'src/theme';
+import theme from '@/theme';
+import IconExclamationTriangle from '@assets/icons/exclamation-triangle.svg';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const FormErrors = ({ errors }: { errors: Record<string, any> }) => {

src/components/FormInput.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { Controller, UseControllerProps } from 'react-hook-form';
 import { ReturnKeyTypeOptions, Text, StyleSheet } from 'react-native';
 
-import TextField, { TextFieldProps } from 'src/components/TextField';
-import theme from 'src/theme';
+import TextField, { TextFieldProps } from '@/components/TextField';
+import theme from '@/theme';
 
 type FormInputProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/components/PrivacyButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Linking, StyleSheet, Text, TouchableOpacity } from 'react-native';
 
-import theme from 'src/theme';
+import theme from '@/theme';
 
 const PrivacyButton = () => (
   <TouchableOpacity

src/components/RadioButton.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Text, Pressable, StyleSheet } from 'react-native';
 
-import theme from 'src/theme';
+import theme from '@/theme';
 
 export default function RadioButton({ data, onSelect, defaultValue }) {
   const [userOption, setUserOption] = useState(defaultValue.value);

src/components/Toast.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Animated, StyleSheet, Text } from 'react-native';
 
-import theme from 'src/theme';
+import theme from '@/theme';
 
 export type ToastProps = {
   message?: string;

src/modules/about/About.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import About from 'src/modules/about/About';
-import { renderWithProviders } from 'src/testUtils';
+import About from '@/modules/about/About';
+import { renderWithProviders } from '@/testUtils';
 
 it('renders the about screen', () => {
   const { getByText } = renderWithProviders(<About />);

src/modules/about/About.tsx

@@ -11,16 +11,16 @@ import {
   Dimensions,
 } from 'react-native';
 
-import logo from 'assets/DNS-logo-svart.png';
-import IconClock from 'assets/icons/clock.svg';
-import IconFacebook from 'assets/icons/facebook.svg';
-import IconInstagram from 'assets/icons/instagram.svg';
-import IconMail from 'assets/icons/mail.svg';
-import IconMap from 'assets/icons/map.svg';
-import IconPhone from 'assets/icons/phone.svg';
-import IconTiktok from 'assets/icons/tiktok.svg';
-import Button from 'src/components/Button';
-import theme from 'src/theme';
+import Button from '@/components/Button';
+import theme from '@/theme';
+import logo from '@assets/DNS-logo-svart.png';
+import IconClock from '@assets/icons/clock.svg';
+import IconFacebook from '@assets/icons/facebook.svg';
+import IconInstagram from '@assets/icons/instagram.svg';
+import IconMail from '@assets/icons/mail.svg';
+import IconMap from '@assets/icons/map.svg';
+import IconPhone from '@assets/icons/phone.svg';
+import IconTiktok from '@assets/icons/tiktok.svg';
 
 const CHATEAU_NEUF_ADDRESS = 'Det Norske Studentersamfund, Slemdalsveien 15, 0369 Oslo';
 

src/modules/events/EventList.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import EventList from 'src/modules/events/EventList';
-import { renderWithProviders } from 'src/testUtils';
-import { fetchWithTimeout } from 'src/utils';
+import EventList from '@/modules/events/EventList';
+import { renderWithProviders } from '@/testUtils';
+import { fetchWithTimeout } from '@/utils';
 
-jest.mock('src/utils', () => ({
-  ...jest.requireActual('src/utils'),
+jest.mock('@/utils', () => ({
+  ...jest.requireActual('@/utils'),
   fetchWithTimeout: jest.fn(),
 }));
 

src/modules/events/EventList.tsx

@@ -4,9 +4,9 @@ import React from 'react';
 import { StyleSheet, View, Platform, FlatList, TouchableOpacity, Text, Linking } from 'react-native';
 import 'moment/locale/nb';
 
-import Button from 'src/components/Button';
-import theme from 'src/theme';
-import { EventType } from 'src/types/data';
+import Button from '@/components/Button';
+import theme from '@/theme';
+import { EventType } from '@/types/data';
 
 import useEventList from './useEventList';
 

src/modules/events/useEventList.tsx

@@ -2,8 +2,8 @@ import moment from 'moment';
 import { useEffect, useState } from 'react';
 
 import 'moment/locale/nb';
-import type { EventType } from 'src/types/data';
-import { fetchWithTimeout } from 'src/utils';
+import type { EventType } from '@/types/data';
+import { fetchWithTimeout } from '@/utils';
 
 moment.locale('nb');
 

src/modules/login/Login.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import Login from 'src/modules/login/Login';
-import { renderWithProviders } from 'src/testUtils';
+import Login from '@/modules/login/Login';
+import { renderWithProviders } from '@/testUtils';
 
 it('renders the login form', () => {
   const { getByText } = renderWithProviders(<Login />);

src/modules/login/Login.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { ActivityIndicator, Linking, StyleSheet, View, Text, ScrollView } from 'react-native';
 
-import Button from 'src/components/Button';
-import FormErrors from 'src/components/FormErrors';
-import FormInput from 'src/components/FormInput';
-import theme from 'src/theme';
+import Button from '@/components/Button';
+import FormErrors from '@/components/FormErrors';
+import FormInput from '@/components/FormInput';
+import theme from '@/theme';
 
 import useLogin from './useLogin';
 

src/modules/login/useLogin.tsx

@@ -2,8 +2,8 @@ import { useNavigation } from '@react-navigation/native';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 
-import { requestLogin } from 'src/api';
-import { useAppDispatch, useAppSelector } from 'src/hooks';
+import { requestLogin } from '@/api';
+import { useAppDispatch, useAppSelector } from '@/hooks';
 
 interface LoginFormValues {
   email: string;

src/modules/membership/Membership.test.tsx

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 import React from 'react';
 
-import Membership from 'src/modules/membership/Membership';
-import { renderWithProviders, testUser } from 'src/testUtils';
+import Membership from '@/modules/membership/Membership';
+import { renderWithProviders, testUser } from '@/testUtils';
 
 // Must match PROOF_QUERY in useProof.tsx
 const PROOF_QUERY = gql`

src/modules/membership/Membership.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { View, ActivityIndicator } from 'react-native';
 
-import PrivacyButton from 'src/components/PrivacyButton';
-import theme from 'src/theme';
+import PrivacyButton from '@/components/PrivacyButton';
+import theme from '@/theme';
 
 import MembershipInfo from './MembershipInfo';
 import Proof from './Proof';

src/modules/membership/MembershipInfo.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ScrollView, Text, View, StyleSheet } from 'react-native';
 
-import Button from 'src/components/Button';
-import theme from 'src/theme';
+import Button from '@/components/Button';
+import theme from '@/theme';
 
 interface MembershipInfoProps {
   onRegister: () => void;

src/modules/membership/Proof.tsx

@@ -15,12 +15,12 @@ import {
 } from 'react-native';
 import Confetti from 'react-native-confetti';
 
-import Button from 'src/components/Button';
-import RadioButton from 'src/components/RadioButton';
-import Toast from 'src/components/Toast';
-import { useNotifications } from 'src/hooks/useNotifications';
-import theme from 'src/theme';
-import type { UserType } from 'src/types/data';
+import Button from '@/components/Button';
+import RadioButton from '@/components/RadioButton';
+import Toast from '@/components/Toast';
+import { useNotifications } from '@/hooks/useNotifications';
+import theme from '@/theme';
+import type { UserType } from '@/types/data';
 
 import useProof from './useProof';
 import logo from '../../../assets/DNS-logo-svart.png';

src/modules/membership/UserDelete.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import UserDelete from 'src/modules/membership/UserDelete';
-import { renderWithProviders, testUser } from 'src/testUtils';
+import UserDelete from '@/modules/membership/UserDelete';
+import { renderWithProviders, testUser } from '@/testUtils';
 
 const mockNavigate = jest.fn();
 jest.mock('@react-navigation/native', () => ({

src/modules/membership/UserDelete.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { ActivityIndicator, ScrollView, Text, TextInput, View, StyleSheet } from 'react-native';
 
-import Button from 'src/components/Button';
-import FormErrors from 'src/components/FormErrors';
-import { useAppSelector } from 'src/hooks';
-import theme from 'src/theme';
+import Button from '@/components/Button';
+import FormErrors from '@/components/FormErrors';
+import { useAppSelector } from '@/hooks';
+import theme from '@/theme';
 
 import useUserDelete from './useUserDelete';
 

src/modules/membership/useMembership.tsx

@@ -1,9 +1,9 @@
 import { useNavigation } from '@react-navigation/native';
 import { useEffect, useCallback } from 'react';
 
-import { logout } from 'src/actions';
-import { requestUserData } from 'src/api';
-import { useAppDispatch, useAppSelector, usePrevious } from 'src/hooks';
+import { logout } from '@/actions';
+import { requestUserData } from '@/api';
+import { useAppDispatch, useAppSelector, usePrevious } from '@/hooks';
 
 const useMembership = () => {
   const navigation = useNavigation();

src/modules/membership/useProof.tsx

@@ -3,10 +3,10 @@ import { useStripe } from '@stripe/stripe-react-native';
 import Constants from 'expo-constants';
 import { useEffect, useState } from 'react';
 
-import { requestStripePaymentSheet } from 'src/api';
-import { useAppSelector } from 'src/hooks';
-import { useNotifications } from 'src/hooks/useNotifications';
-import { ToastProps } from 'src/types/toast';
+import { requestStripePaymentSheet } from '@/api';
+import { useAppSelector } from '@/hooks';
+import { useNotifications } from '@/hooks/useNotifications';
+import { ToastProps } from '@/types/toast';
 
 const PROOF_QUERY = gql`
   {

src/modules/membership/useUserDelete.tsx

@@ -1,8 +1,8 @@
 import { useNavigation } from '@react-navigation/native';
 import { useEffect } from 'react';
 
-import { requestDeleteUser } from 'src/api';
-import { useAppDispatch, useAppSelector, usePrevious } from 'src/hooks';
+import { requestDeleteUser } from '@/api';
+import { useAppDispatch, useAppSelector, usePrevious } from '@/hooks';
 
 const useUserDelete = () => {
   const dispatch = useAppDispatch();

src/modules/register/UserRegister.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import UserRegister from 'src/modules/register/UserRegister';
-import { renderWithProviders } from 'src/testUtils';
+import UserRegister from '@/modules/register/UserRegister';
+import { renderWithProviders } from '@/testUtils';
 
 it('renders the registration form', () => {
   const { getByText } = renderWithProviders(<UserRegister />);

src/modules/register/UserRegister.tsx

@@ -2,12 +2,12 @@ import * as EmailValidator from 'email-validator';
 import React from 'react';
 import { ActivityIndicator, StyleSheet, Text, ScrollView } from 'react-native';
 
-import Button from 'src/components/Button';
-import FormErrors from 'src/components/FormErrors';
-import FormInput from 'src/components/FormInput';
-import PrivacyButton from 'src/components/PrivacyButton';
-import Toast from 'src/components/Toast';
-import theme from 'src/theme';
+import Button from '@/components/Button';
+import FormErrors from '@/components/FormErrors';
+import FormInput from '@/components/FormInput';
+import PrivacyButton from '@/components/PrivacyButton';
+import Toast from '@/components/Toast';
+import theme from '@/theme';
 
 import useUserRegister from './useUserRegister';
 

src/modules/register/useUserRegister.tsx

@@ -2,9 +2,9 @@ import { useNavigation } from '@react-navigation/native';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 
-import { requestRegisterUser } from 'src/api';
-import { useAppDispatch, useAppSelector, usePrevious } from 'src/hooks';
-import { ToastProps } from 'src/types/toast';
+import { requestRegisterUser } from '@/api';
+import { useAppDispatch, useAppSelector, usePrevious } from '@/hooks';
+import { ToastProps } from '@/types/toast';
 
 export interface UserRegisterFormValues {
   first_name: string;

src/testUtils.tsx

@@ -9,8 +9,8 @@ import { Provider } from 'react-redux';
 import { applyMiddleware, legacy_createStore as createStore } from 'redux';
 import { thunk } from 'redux-thunk';
 
-import rootReducer from 'src/reducers';
-import type { UserType } from 'src/types/data';
+import rootReducer from '@/reducers';
+import type { UserType } from '@/types/data';
 
 type AppState = ReturnType<typeof rootReducer>;
 

tsconfig.json

@@ -2,6 +2,10 @@
   "compilerOptions": {
     "jsx": "react",
     "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"],
+      "@assets/*": ["assets/*"]
+    },
     "strict": true
   },
   "extends": "expo/tsconfig.base",