refactor: switch to using @/ for in-app imports (#1170)

Use `@/name` for app imports, as opposed to just `name` as previously.
This is the modern convention for web apps, and makes clearer when
imports are coming from the application as opposed to npm modules.

There's a few deep `../../` style imports remaining - these get worse if
I move them to `@/`-style imports, and I think are better left until we
move the files around a bit more in a subsequent PR.

src/App.tsx

@@ -2,23 +2,23 @@ import { useState } from "react";
 
 import { Redirect, Route, Switch } from "react-router-dom";
 
-import { DraftContext, getAllDrafts } from "state/context";
-import { User } from "user/User";
+import { DraftContext, getAllDrafts } from "@/state/context";
+import { User } from "@/user/User";
 import {
   CssBaseline,
   StyledEngineProvider,
   ThemeProvider,
 } from "@mui/material";
-import { theme } from "theme";
-import { CampaignForm } from "user/views/adsManager/types";
-import { AuthVerify } from "auth/views/AuthVerify";
-import { Login } from "auth/views/Login";
-import { MagicLink } from "auth/views/MagicLink";
-import { Register } from "auth/registration/Register";
-import { LandingPage } from "auth/views/LandingPage";
-import { BraveAdsContactFrame } from "auth/registration/BraveAdsContactFrame";
+import { theme } from "./theme";
+import { CampaignForm } from "@/user/views/adsManager/types";
+import { AuthVerify } from "@/auth/views/AuthVerify";
+import { Login } from "@/auth/views/Login";
+import { MagicLink } from "@/auth/views/MagicLink";
+import { Register } from "@/auth/registration/Register";
+import { LandingPage } from "@/auth/views/LandingPage";
+import { BraveAdsContactFrame } from "@/auth/registration/BraveAdsContactFrame";
 import { useMatomo } from "@jonkoops/matomo-tracker-react";
-import { BasicAttentionTokenLandingPage } from "basic-attention-token/BasicAttentionTokenLandingPage";
+import { BasicAttentionTokenLandingPage } from "@/basic-attention-token/BasicAttentionTokenLandingPage";
 
 export function App() {
   const { enableLinkTracking } = useMatomo();

src/ErrorBoundary.tsx

@@ -1,5 +1,5 @@
 import { Component, PropsWithChildren } from "react";
-import { ErrorDetail } from "components/Error/ErrorDetail";
+import { ErrorDetail } from "@/components/Error/ErrorDetail";
 
 interface State {
   error: unknown | null;

src/auth/components/AdvertiserAddress.tsx

@@ -1,8 +1,8 @@
 import { Box, Stack } from "@mui/material";
-import { FormikTextField } from "form/FormikHelpers";
-import { CountryPicker } from "components/Country/CountryPicker";
+import { FormikTextField } from "@/form/FormikHelpers";
+import { CountryPicker } from "@/components/Country/CountryPicker";
 import { PropsWithChildren } from "react";
-import { AdvertiserBillingAddressFragment } from "graphql/advertiser.generated";
+import { AdvertiserBillingAddressFragment } from "@/graphql/advertiser.generated";
 import { useLingui } from "@lingui/react";
 import { msg } from "@lingui/macro";
 

src/auth/components/AdvertiserAgreed.tsx

@@ -1,8 +1,8 @@
 import { Box, Link, Stack } from "@mui/material";
-import { FormikCheckbox } from "form/FormikHelpers";
+import { FormikCheckbox } from "@/form/FormikHelpers";
 import { msg, Trans } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
-import { LearnMoreButton } from "components/Button/LearnMoreButton";
+import { LearnMoreButton } from "@/components/Button/LearnMoreButton";
 
 export function AdvertiserAgreed(props: { requiresPaymentAgree: boolean }) {
   const { _ } = useLingui();

src/auth/components/AdvertiserDetailsForm.tsx

@@ -1,22 +1,22 @@
 import { Box, Card, Container, Skeleton } from "@mui/material";
 import Typography from "@mui/material/Typography";
-import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
+import { useAdvertiser } from "@/auth/hooks/queries/useAdvertiser";
 import { Form, Formik } from "formik";
-import { AdvertiserAddress } from "auth/components/AdvertiserAddress";
-import { useAuthContext } from "auth/context/auth.hook";
+import { AdvertiserAddress } from "@/auth/components/AdvertiserAddress";
+import { useAuthContext } from "@/auth/context/auth.hook";
 import {
   useAdvertiserBillingAddressQuery,
   useUpdateAdvertiserMutation,
-} from "graphql/advertiser.generated";
-import { getUser } from "auth/lib";
-import { AdvertiserForm, initialAdvertiserForm } from "auth/components/types";
+} from "@/graphql/advertiser.generated";
+import { getUser } from "@/auth/lib";
+import { AdvertiserForm, initialAdvertiserForm } from "@/auth/components/types";
 import { useHistory } from "react-router-dom";
-import { PaymentType } from "graphql/types";
-import { AdvertiserAgreed } from "auth/components/AdvertiserAgreed";
-import { FormikSubmitButton } from "form/FormikButton";
-import { AdvertiserSchema } from "validation/AdvertiserSchema";
+import { PaymentType } from "@/graphql/types";
+import { AdvertiserAgreed } from "@/auth/components/AdvertiserAgreed";
+import { FormikSubmitButton } from "@/form/FormikButton";
+import { AdvertiserSchema } from "@/validation/AdvertiserSchema";
 import { useState } from "react";
-import { useTrackWithMatomo } from "hooks/useTrackWithMatomo";
+import { useTrackWithMatomo } from "@/hooks/useTrackWithMatomo";
 import _ from "lodash";
 import { msg, Trans } from "@lingui/macro";
 

src/auth/components/types.ts

@@ -1,4 +1,4 @@
-import { AdvertiserBillingAddressFragment } from "graphql/advertiser.generated";
+import { AdvertiserBillingAddressFragment } from "@/graphql/advertiser.generated";
 
 export type AdvertiserForm = {
   tracking: boolean;

src/auth/context/auth.hook.ts

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { IAuthContext } from "auth/context/auth.state";
+import { IAuthContext } from "@/auth/context/auth.state";
 
 export function useAuthContext() {
   return useContext(IAuthContext);

src/auth/context/auth.interface.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { ResponseUser } from "../lib";
-import { PaymentType } from "graphql/types";
+import { PaymentType } from "@/graphql/types";
 
 export type IAdvertiser = {
   id: string;

src/auth/hooks/mutations/useGetLink.ts

@@ -1,5 +1,5 @@
 import { useCallback, useState } from "react";
-import { getLink } from "auth/lib";
+import { getLink } from "@/auth/lib";
 import { t } from "@lingui/macro";
 
 interface Options {

src/auth/hooks/mutations/useRegister.ts

@@ -1,8 +1,8 @@
 import { useCallback, useState } from "react";
-import { RegistrationForm } from "auth/registration/types";
-import { sendMarketingEmail, submitRegistration } from "auth/lib";
-import { clearRegistrationValues } from "form/PersistRegistrationValues";
-import { useTrackMatomoEvent } from "hooks/useTrackWithMatomo";
+import { RegistrationForm } from "@/auth/registration/types";
+import { sendMarketingEmail, submitRegistration } from "@/auth/lib";
+import { clearRegistrationValues } from "@/form/PersistRegistrationValues";
+import { useTrackMatomoEvent } from "@/hooks/useTrackWithMatomo";
 import { t } from "@lingui/macro";
 import { useHistory } from "react-router-dom";
 

src/auth/hooks/mutations/useSignIn.ts

@@ -1,6 +1,6 @@
 import { useCallback, useState } from "react";
-import { useAuthContext } from "auth/context/auth.hook";
-import { getCredentials } from "auth/lib";
+import { useAuthContext } from "@/auth/context/auth.hook";
+import { getCredentials } from "@/auth/lib";
 
 interface Options {
   onError?: (message: string) => void;

src/auth/hooks/mutations/useSignOut.ts

@@ -1,6 +1,6 @@
 import { useCallback, useState } from "react";
-import { useAuthContext } from "auth/context/auth.hook";
-import { clearCredentials } from "auth/lib";
+import { useAuthContext } from "@/auth/context/auth.hook";
+import { clearCredentials } from "@/auth/lib";
 
 interface Options {
   onSuccess?: () => void;

src/auth/hooks/queries/useAdvertiser.ts

@@ -1,6 +1,6 @@
-import { useAuthContext } from "auth/context/auth.hook";
-import { IAdvertiser } from "auth/context/auth.interface";
-import { PaymentType } from "graphql/types";
+import { useAuthContext } from "@/auth/context/auth.hook";
+import { IAdvertiser } from "@/auth/context/auth.interface";
+import { PaymentType } from "@/graphql/types";
 
 export function useAdvertiser(): {
   advertiser: IAdvertiser;

src/auth/hooks/queries/useAuthorize.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { useAuthContext } from "auth/context/auth.hook";
-import { authorize, ResponseUser } from "auth/lib";
+import { useAuthContext } from "@/auth/context/auth.hook";
+import { authorize, ResponseUser } from "@/auth/lib";
 
 interface Options {
   variables: {

src/auth/hooks/queries/useIsAuthenticated.ts

@@ -1,4 +1,4 @@
-import { useAuthContext } from "auth/context/auth.hook";
+import { useAuthContext } from "@/auth/context/auth.hook";
 
 export function useIsAuthenticated(): boolean | undefined {
   const { isInitialized, isAuthenticated } = useAuthContext();

src/auth/hooks/queries/useUser.ts

@@ -1,4 +1,4 @@
-import { useAuthContext } from "auth/context/auth.hook";
+import { useAuthContext } from "@/auth/context/auth.hook";
 
 type User = {
   userId?: string;

src/auth/index.tsx

@@ -3,8 +3,8 @@ import {
   IAdvertiser,
   IAuthProviderProps,
   IAuthState,
-} from "auth/context/auth.interface";
-import { IAuthContext, initialState } from "auth/context/auth.state";
+} from "@/auth/context/auth.interface";
+import { IAuthContext, initialState } from "@/auth/context/auth.state";
 import { getUser, ResponseUser } from "./lib";
 import _ from "lodash";
 import { setActiveAdvertiser } from "./util";

src/auth/lib/index.ts

@@ -1,11 +1,11 @@
-import { UserFragment } from "graphql/user.generated";
-import { AdvertiserFragment } from "graphql/advertiser.generated";
-import { PaymentType } from "graphql/types";
+import { UserFragment } from "@/graphql/user.generated";
+import { AdvertiserFragment } from "@/graphql/advertiser.generated";
+import { PaymentType } from "@/graphql/types";
 import {
   buildAdServerEndpoint,
   buildAdServerV2Endpoint,
-} from "util/environment";
-import { RegistrationForm } from "auth/registration/types";
+} from "@/util/environment";
+import { RegistrationForm } from "@/auth/registration/types";
 import { t } from "@lingui/macro";
 
 export type Advertiser = Pick<

src/auth/registration/AccountChoice.tsx

@@ -12,10 +12,10 @@ import { msg, Trans } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
 import { MessageDescriptor } from "@lingui/core";
 import { useState } from "react";
-import logo from "assets/images/brave-icon-release-color.svg";
-import { useTrackMatomoPageView } from "hooks/useTrackWithMatomo";
-import { useIsMobile } from "hooks/useIsMobile";
-import { AuthContainer } from "auth/views/components/AuthContainer";
+import logo from "@/assets/images/brave-icon-release-color.svg";
+import { useTrackMatomoPageView } from "@/hooks/useTrackWithMatomo";
+import { useIsMobile } from "@/hooks/useIsMobile";
+import { AuthContainer } from "@/auth/views/components/AuthContainer";
 
 interface ChoiceOptions {
   title: MessageDescriptor;

src/auth/registration/AdvertiserRegistered.tsx

@@ -1,8 +1,8 @@
 import { Link, Stack, Typography } from "@mui/material";
-import { useTrackMatomoPageView } from "hooks/useTrackWithMatomo";
+import { useTrackMatomoPageView } from "@/hooks/useTrackWithMatomo";
 import { Trans } from "@lingui/macro";
-import { AuthContainer } from "auth/views/components/AuthContainer";
-import logo from "assets/images/brave-icon-release-color.svg";
+import { AuthContainer } from "@/auth/views/components/AuthContainer";
+import logo from "@/assets/images/brave-icon-release-color.svg";
 
 export function AdvertiserRegistered() {
   useTrackMatomoPageView({ documentTitle: "Advertiser Registration Complete" });

src/auth/registration/BraveAdsContactFrame.tsx

@@ -1,7 +1,7 @@
 import { Box, Stack, Toolbar, Typography } from "@mui/material";
-import { LandingPageAppBar } from "components/AppBar/LandingPageAppBar";
-import { Background } from "components/Background/Background";
-import { useTrackMatomoPageView } from "hooks/useTrackWithMatomo";
+import { LandingPageAppBar } from "@/components/AppBar/LandingPageAppBar";
+import { Background } from "@/components/Background/Background";
+import { useTrackMatomoPageView } from "@/hooks/useTrackWithMatomo";
 import { Trans } from "@lingui/macro";
 
 export function BraveAdsContactFrame() {

src/auth/registration/BrowserForm.tsx

@@ -1,8 +1,8 @@
-import { FormikTextField } from "form/FormikHelpers";
-import { MarketingOptIn } from "auth/registration/MarketingOptIn";
+import { FormikTextField } from "@/form/FormikHelpers";
+import { MarketingOptIn } from "@/auth/registration/MarketingOptIn";
 import { msg } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
-import { MarketingChannel } from "auth/registration/MarketingChannel";
+import { MarketingChannel } from "@/auth/registration/MarketingChannel";
 import { Box } from "@mui/material";
 
 export function BrowserForm() {

src/auth/registration/BrowserRegister.tsx

@@ -1,14 +1,14 @@
 import { Form, Formik } from "formik";
-import { initialValues, RegistrationForm } from "auth/registration/types";
-import { FormikSubmitButton } from "form/FormikButton";
-import { useRegister } from "auth/hooks/mutations/useRegister";
+import { initialValues, RegistrationForm } from "@/auth/registration/types";
+import { FormikSubmitButton } from "@/form/FormikButton";
+import { useRegister } from "@/auth/hooks/mutations/useRegister";
 import { Box } from "@mui/material";
-import { PersistRegistrationValues } from "form/PersistRegistrationValues";
-import { useTrackMatomoPageView } from "hooks/useTrackWithMatomo";
+import { PersistRegistrationValues } from "@/form/PersistRegistrationValues";
+import { useTrackMatomoPageView } from "@/hooks/useTrackWithMatomo";
 import { msg } from "@lingui/macro";
-import { RegistrationContainer } from "auth/registration/RegistrationContainer";
-import { BrowserForm } from "auth/registration/BrowserForm";
-import { RegistrationSchema } from "validation/RegistrationSchema";
+import { RegistrationContainer } from "@/auth/registration/RegistrationContainer";
+import { BrowserForm } from "@/auth/registration/BrowserForm";
+import { RegistrationSchema } from "@/validation/RegistrationSchema";
 
 export function BrowserRegister() {
   useTrackMatomoPageView({

src/auth/registration/MarketingChannel.tsx

@@ -1,4 +1,4 @@
-import { FormikSelect, FormikTextField } from "form/FormikHelpers";
+import { FormikSelect, FormikTextField } from "@/form/FormikHelpers";
 import { msg } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
 import { useField } from "formik";

src/auth/registration/MarketingOptIn.tsx

@@ -1,4 +1,4 @@
-import { FormikCheckbox } from "form/FormikHelpers";
+import { FormikCheckbox } from "@/form/FormikHelpers";
 import { useLingui } from "@lingui/react";
 import { msg } from "@lingui/macro";
 import { Box } from "@mui/material";

src/auth/registration/Register.tsx

@@ -1,6 +1,6 @@
-import { AdvertiserRegistered } from "auth/registration/AdvertiserRegistered";
+import { AdvertiserRegistered } from "@/auth/registration/AdvertiserRegistered";
 import { Route, Switch } from "react-router-dom";
-import { BrowserRegister } from "auth/registration/BrowserRegister";
+import { BrowserRegister } from "@/auth/registration/BrowserRegister";
 import { SearchRegister } from "./SearchRegister";
 import { AccountChoice } from "./AccountChoice";
 

src/auth/registration/RegistrationContainer.tsx

@@ -1,12 +1,12 @@
 import { PropsWithChildren } from "react";
-import { PaddedCardContainer } from "components/Card/PaddedCardContainer";
-import logo from "assets/images/brave-icon-release-color.svg";
+import { PaddedCardContainer } from "@/components/Card/PaddedCardContainer";
+import logo from "@/assets/images/brave-icon-release-color.svg";
 import Typography from "@mui/material/Typography";
 import { Trans } from "@lingui/macro";
-import { PrivacyPolicy } from "basic-attention-token/PrivacyPolicy";
-import { useIsMobile } from "hooks/useIsMobile";
-import { LandingPageAppBar } from "components/AppBar/LandingPageAppBar";
-import { Background } from "components/Background/Background";
+import { PrivacyPolicy } from "@/basic-attention-token/PrivacyPolicy";
+import { useIsMobile } from "@/hooks/useIsMobile";
+import { LandingPageAppBar } from "@/components/AppBar/LandingPageAppBar";
+import { Background } from "@/components/Background/Background";
 import { Toolbar } from "@mui/material";
 
 export function RegistrationContainer(props: PropsWithChildren) {

src/auth/registration/SearchForm.tsx

@@ -1,10 +1,10 @@
 import { Box } from "@mui/material";
-import { FormikTextField } from "form/FormikHelpers";
-import { MarketingOptIn } from "auth/registration/MarketingOptIn";
+import { FormikTextField } from "@/form/FormikHelpers";
+import { MarketingOptIn } from "@/auth/registration/MarketingOptIn";
 import { msg } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
-import { MarketingChannel } from "auth/registration/MarketingChannel";
-import { CountryPicker } from "components/Country/CountryPicker";
+import { MarketingChannel } from "@/auth/registration/MarketingChannel";
+import { CountryPicker } from "@/components/Country/CountryPicker";
 
 export function SearchForm() {
   const { _ } = useLingui();

src/auth/registration/SearchRegister.tsx

@@ -1,13 +1,13 @@
 import { Form, Formik } from "formik";
-import { initialValues, RegistrationForm } from "auth/registration/types";
-import { FormikSubmitButton } from "form/FormikButton";
-import { useRegister } from "auth/hooks/mutations/useRegister";
+import { initialValues, RegistrationForm } from "@/auth/registration/types";
+import { FormikSubmitButton } from "@/form/FormikButton";
+import { useRegister } from "@/auth/hooks/mutations/useRegister";
 import { Box } from "@mui/material";
-import { useTrackMatomoPageView } from "hooks/useTrackWithMatomo";
+import { useTrackMatomoPageView } from "@/hooks/useTrackWithMatomo";
 import { msg } from "@lingui/macro";
-import { RegistrationContainer } from "auth/registration/RegistrationContainer";
-import { RegistrationSchema } from "validation/RegistrationSchema";
-import { SearchForm } from "auth/registration/SearchForm";
+import { RegistrationContainer } from "@/auth/registration/RegistrationContainer";
+import { RegistrationSchema } from "@/validation/RegistrationSchema";
+import { SearchForm } from "@/auth/registration/SearchForm";
 
 export function SearchRegister() {
   useTrackMatomoPageView({

src/auth/views/AuthVerify.tsx

@@ -1,10 +1,10 @@
-import { AuthContainer } from "auth/views/components/AuthContainer";
-import { useAuthorize } from "auth/hooks/queries/useAuthorize";
+import { AuthContainer } from "@/auth/views/components/AuthContainer";
+import { useAuthorize } from "@/auth/hooks/queries/useAuthorize";
 import { Link as RouterLink, useHistory } from "react-router-dom";
 import { CircularProgress, Link, Stack, Typography } from "@mui/material";
 import VerifiedIcon from "@mui/icons-material/Verified";
 import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined";
-import { useTrackWithMatomo } from "hooks/useTrackWithMatomo";
+import { useTrackWithMatomo } from "@/hooks/useTrackWithMatomo";
 import { Trans } from "@lingui/macro";
 
 export function AuthVerify() {