#278 change absolute imports with alias

next/.eslintrc.js

@@ -15,9 +15,15 @@ module.exports = {
     /** It's annoying to refactor from one style to another */
     'arrow-body-style': 'off',
     /** These are exceptions that we use with "__" */
-    'no-underscore-dangle': [2, { allow: ['__NEXT_DATA__', '__NEXT_LOADED_PAGES__', '__typename'] }],
+    'no-underscore-dangle': [
+      2,
+      { allow: ['__NEXT_DATA__', '__NEXT_LOADED_PAGES__', '__typename'] },
+    ],
     /** Use official sorting */
-    'tailwindcss/classnames-order': ['warn', { callees: ['classnames', 'cx'], officialSorting: true }],
+    'tailwindcss/classnames-order': [
+      'warn',
+      { callees: ['classnames', 'cx'], officialSorting: true },
+    ],
     /** White list custom classes */
     'tailwindcss/no-custom-classname': ['warn', { whitelist: ['.*dw.*', '.*dh.*'] }],
     /** Hoisting of functions is useful */
@@ -39,6 +45,7 @@ module.exports = {
     'unicorn/switch-case-braces': 'off',
     /** Translation t function is typed as any */
     '@typescript-eslint/restrict-template-expressions': 'off',
+    'import/extensions': 'off',
   },
   ignorePatterns: ['*.config.*', 'graphql', '.eslintrc.js', '*.md'],
 }

next/components/atoms/AppLangSwitchers.tsx

@@ -4,10 +4,10 @@ import { useTranslation } from 'next-i18next'
 import { useCallback } from 'react'
 import { useCookies } from 'react-cookie'
 
-import { ContentPageEntityFragment } from '../../graphql'
-import { LocalStorageEnum } from '../../types/localStorage.d'
-import { WithAttributes } from '../../utils/isDefined'
-import { getEquivalentRouteInTargetLocale } from '../../utils/localeRoutes'
+import { ContentPageEntityFragment } from '@/graphql'
+import { LocalStorageEnum } from '@/types/localStorage'
+import { WithAttributes } from '@/utils/isDefined'
+import { getEquivalentRouteInTargetLocale } from '@/utils/localeRoutes'
 
 interface AppLangSwitchersProps {
   contentPage?: WithAttributes<ContentPageEntityFragment>

next/components/atoms/Button.tsx

@@ -1,6 +1,6 @@
 import cx from 'classnames'
 
-import Link from './Link'
+import Link from '@/components/atoms/Link'
 
 type ButtonProps = React.DetailedHTMLProps<
   React.AnchorHTMLAttributes<HTMLAnchorElement>,

next/components/atoms/Checkbox.tsx

@@ -1,10 +1,10 @@
 import { useToggleState } from '@react-stately/toggle'
 import type { AriaCheckboxProps } from '@react-types/checkbox'
 import cx from 'classnames'
-import React, { useRef } from 'react'
+import { useRef } from 'react'
 import { mergeProps, useCheckbox, useFocusRing, VisuallyHidden } from 'react-aria'
 
-import CheckIcon from '../../assets/icons/check.svg'
+import CheckIcon from '@/assets/icons/check.svg'
 
 /* eslint-disable react/destructuring-assignment */
 

next/components/atoms/CityGalleryMarkdown.tsx

@@ -5,8 +5,8 @@ import { ReactElement } from 'react-markdown/lib/react-markdown'
 import remarkGfm from 'remark-gfm'
 import supersub from 'remark-supersub'
 
-import ImageFigure from './ImageFigure'
-import Link from './Link'
+import ImageFigure from '@/components/atoms/ImageFigure'
+import Link from '@/components/atoms/Link'
 
 export interface CityGalleryMarkdownProps {
   content: string | null | undefined

next/components/atoms/DownloadItem.tsx

@@ -1,9 +1,9 @@
 import { useTranslation } from 'next-i18next'
 import { useState } from 'react'
 
-import FileIcon from '../../assets/icons/file.svg'
-import { DownloadItemFragment } from '../../graphql'
-import Button from './Button'
+import FileIcon from '@/assets/icons/file.svg'
+import Button from '@/components/atoms/Button'
+import { DownloadItemFragment } from '@/graphql'
 
 interface DownloadProps {
   downloadItem: DownloadItemFragment

next/components/atoms/ImageGalleryTile.tsx

@@ -1,7 +1,7 @@
 import cx from 'classnames'
 
-import { ImageWithFormatsEntityFragment } from '../../graphql'
-import { WithAttributes } from '../../utils/isDefined'
+import { ImageWithFormatsEntityFragment } from '@/graphql'
+import { WithAttributes } from '@/utils/isDefined'
 
 interface ImageGalleryTileProps {
   image?: WithAttributes<ImageWithFormatsEntityFragment> | null

next/components/atoms/Link.tsx

@@ -3,7 +3,7 @@ import NextLink from 'next/link'
 import { useTranslation } from 'next-i18next'
 import { ReactNode } from 'react'
 
-import { getRouteForLocale, isOfTypeRoute } from '../../utils/localeRoutes'
+import { getRouteForLocale, isOfTypeRoute } from '@/utils/localeRoutes'
 
 type LinkProps = React.ComponentPropsWithoutRef<'a'> & {
   locale?: string

next/components/atoms/MobileShareButton.tsx

@@ -1,8 +1,8 @@
 import cx from 'classnames'
 import { useEffect, useState } from 'react'
 
-import ShareIcon from '../../assets/icons/share-nodes.svg'
-import { getNextUrl } from '../../utils/getNextUrl'
+import ShareIcon from '@/assets/icons/share-nodes.svg'
+import { getNextUrl } from '@/utils/getNextUrl'
 
 interface MobileShareButtonProps {
   className?: string

next/components/atoms/NavLink.tsx

@@ -2,7 +2,7 @@ import cx from 'classnames'
 import { useRouter } from 'next/router'
 import { ReactNode } from 'react'
 
-import Link from './Link'
+import Link from '@/components/atoms/Link'
 
 export interface INavLinkProps {
   url: string

next/components/atoms/Seo.tsx

@@ -2,8 +2,8 @@ import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
 
-import { ImageEntityFragment, SeoFragment } from '../../graphql'
-import { getNextUrl } from '../../utils/getNextUrl'
+import { ImageEntityFragment, SeoFragment } from '@/graphql'
+import { getNextUrl } from '@/utils/getNextUrl'
 
 interface SeoProps {
   seo?: SeoFragment | null

next/components/atoms/ShareButton.tsx

@@ -1,14 +1,14 @@
 import cx from 'classnames'
 import { useTranslation } from 'next-i18next'
 
-import EmailIcon from '../../assets/icons/social-platforms/email.svg'
-import FacebookIcon from '../../assets/icons/social-platforms/facebook.svg'
-import LinkedInIcon from '../../assets/icons/social-platforms/linkedin.svg'
-import TwitterIcon from '../../assets/icons/social-platforms/twitter.svg'
-import WhatsAppIcon from '../../assets/icons/social-platforms/whatsapp.svg'
-import { capitalizeFirstLetter } from '../../utils/capitalize'
-import { getNextUrl } from '../../utils/getNextUrl'
-import Link from './Link'
+import EmailIcon from '@/assets/icons/social-platforms/email.svg'
+import FacebookIcon from '@/assets/icons/social-platforms/facebook.svg'
+import LinkedInIcon from '@/assets/icons/social-platforms/linkedin.svg'
+import TwitterIcon from '@/assets/icons/social-platforms/twitter.svg'
+import WhatsAppIcon from '@/assets/icons/social-platforms/whatsapp.svg'
+import Link from '@/components/atoms/Link'
+import { capitalizeFirstLetter } from '@/utils/capitalize'
+import { getNextUrl } from '@/utils/getNextUrl'
 
 interface ShareButtonProps {
   slug: string

next/components/atoms/SidePanelPlace.tsx

@@ -1,5 +1,5 @@
-import LocationIcon from '../../assets/icons/location.svg'
-import { ContentPagePlaceFragment } from '../../graphql'
+import LocationIcon from '@/assets/icons/location.svg'
+import { ContentPagePlaceFragment } from '@/graphql'
 
 export interface SidePanelPlaceProps {
   placeFragment: ContentPagePlaceFragment

next/components/atoms/SidePanelTime.tsx

@@ -1,9 +1,9 @@
 import { useTranslation } from 'next-i18next'
 
-import TimeIcon from '../../assets/icons/time.svg'
-import { DatetimeFragment } from '../../graphql'
-import { formatDateString } from '../../utils/formatDateString'
-import { formatTimeString } from '../../utils/formatTimeString'
+import TimeIcon from '@/assets/icons/time.svg'
+import { DatetimeFragment } from '@/graphql'
+import { formatDateString } from '@/utils/formatDateString'
+import { formatTimeString } from '@/utils/formatTimeString'
 
 export interface SidePanelTimeProps {
   datetime: DatetimeFragment

next/components/atoms/SkipNavigation.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'next-i18next'
 
-import Button from './Button'
+import Button from '@/components/atoms/Button'
 
 /* Based on approach here: https://levelup.gitconnected.com/build-an-accessible-skip-to-content-anchor-link-with-react-140903f3bd7e */
 const handleSkip = () => {

next/components/atoms/Subtitle.tsx

@@ -1,9 +1,9 @@
 import { useTranslation } from 'next-i18next'
 
-import { ContentPageEntityFragment } from '../../graphql'
-import { formatDateString } from '../../utils/formatDateString'
-import { formatTimeString } from '../../utils/formatTimeString'
-import { WithAttributes } from '../../utils/isDefined'
+import { ContentPageEntityFragment } from '@/graphql'
+import { formatDateString } from '@/utils/formatDateString'
+import { formatTimeString } from '@/utils/formatTimeString'
+import { WithAttributes } from '@/utils/isDefined'
 
 interface ISubtitleProps {
   page: WithAttributes<ContentPageEntityFragment>

next/components/molecules/ContactCard.tsx

@@ -1,6 +1,6 @@
-import { ContactCardEntityFragment } from '../../graphql'
-import { WithAttributes } from '../../utils/isDefined'
-import Link from '../atoms/Link'
+import Link from '@/components/atoms/Link'
+import { ContactCardEntityFragment } from '@/graphql'
+import { WithAttributes } from '@/utils/isDefined'
 
 interface IContactCardProps {
   contact: WithAttributes<ContactCardEntityFragment> | undefined | null

next/components/molecules/CookieConsent.tsx

@@ -6,14 +6,14 @@ import Consent from 'react-cookie-consent'
 import Modal from 'react-modal'
 import { useEffectOnceWhen } from 'rooks'
 
-import ChevronDownIcon from '../../assets/icons/chevron-down.svg'
-import CloseIcon from '../../assets/icons/close-x.svg'
-import { getGDPRCookies, setGDPRCookies } from '../../utils/GDPRCookies'
-import { initializeGoogleAnalytics, trackPageView } from '../../utils/googleAnalytics'
-import { getRouteForLocale } from '../../utils/localeRoutes'
-import { onEnterOrSpaceKeyDown } from '../../utils/onEnterOrSpaceKeyDown'
-import Button from '../atoms/Button'
-import Link from '../atoms/Link'
+import ChevronDownIcon from '@/assets/icons/chevron-down.svg'
+import CloseIcon from '@/assets/icons/close-x.svg'
+import Button from '@/components/atoms/Button'
+import Link from '@/components/atoms/Link'
+import { getGDPRCookies, setGDPRCookies } from '@/utils/GDPRCookies'
+import { initializeGoogleAnalytics, trackPageView } from '@/utils/googleAnalytics'
+import { getRouteForLocale } from '@/utils/localeRoutes'
+import { onEnterOrSpaceKeyDown } from '@/utils/onEnterOrSpaceKeyDown'
 
 const CookieConsent = () => {
   const { t, i18n } = useTranslation()

next/components/molecules/Filters.tsx

@@ -1,8 +1,8 @@
 import { useTranslation } from 'next-i18next'
 
-import { PlaceEntityFragment, TagEntityFragment } from '../../graphql'
-import { WithAttributes } from '../../utils/isDefined'
-import TagGroup from './TagGroup'
+import TagGroup from '@/components/molecules/TagGroup'
+import { PlaceEntityFragment, TagEntityFragment } from '@/graphql'
+import { WithAttributes } from '@/utils/isDefined'
 
 interface FiltersProps {
   tagGroups?: WithAttributes<TagEntityFragment>[][]

next/components/molecules/Footer.tsx

@@ -3,12 +3,12 @@ import { useMemo } from 'react'
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown'
 import remarkGfm from 'remark-gfm'
 
-import LocationIcon from '../../assets/icons/location.svg'
-import { ContentPageEntityFragment } from '../../graphql'
-import { useGeneralContext } from '../../utils/generalContext'
-import { WithAttributes } from '../../utils/isDefined'
-import AppLangSwitchers from '../atoms/AppLangSwitchers'
-import Link from '../atoms/Link'
+import LocationIcon from '@/assets/icons/location.svg'
+import AppLangSwitchers from '@/components/atoms/AppLangSwitchers'
+import Link from '@/components/atoms/Link'
+import { ContentPageEntityFragment } from '@/graphql'
+import { useGeneralContext } from '@/utils/generalContext'
+import { WithAttributes } from '@/utils/isDefined'
 
 interface FooterProps {
   contentPage?: WithAttributes<ContentPageEntityFragment>

next/components/molecules/ImageGallery.tsx

@@ -6,13 +6,13 @@ import ReactImageGallery, { ReactImageGalleryItem } from 'react-image-gallery'
 import Modal from 'react-modal'
 import { useWindowSize } from 'rooks'
 
-import CloseIcon from '../../assets/icons/close-x.svg'
-import { ImageWithFormatsEntityFragment } from '../../graphql'
-import { StrapiImageFormats } from '../../types/strapiImageFormats'
-import { getBreakpointValue } from '../../utils/getBreakpointValue'
-import { hasAttributes, withAttributes } from '../../utils/isDefined'
-import ImageGalleryItem from '../atoms/ImageGalleryItem'
-import ImageGalleryTile from '../atoms/ImageGalleryTile'
+import CloseIcon from '@/assets/icons/close-x.svg'
+import ImageGalleryItem from '@/components/atoms/ImageGalleryItem'
+import ImageGalleryTile from '@/components/atoms/ImageGalleryTile'
+import { ImageWithFormatsEntityFragment } from '@/graphql'
+import { StrapiImageFormats } from '@/types/strapiImageFormats'
+import { getBreakpointValue } from '@/utils/getBreakpointValue'
+import { hasAttributes, withAttributes } from '@/utils/isDefined'
 
 interface ImageGalleryProps {
   medias?: ImageWithFormatsEntityFragment[]

next/components/molecules/ImgSwiper.tsx

@@ -9,8 +9,8 @@ import { Autoplay, Navigation, Pagination } from 'swiper'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { NavigationOptions } from 'swiper/types'
 
-import { ImageEntityFragment } from '../../graphql'
-import { WithAttributes } from '../../utils/isDefined'
+import { ImageEntityFragment } from '@/graphql'
+import { WithAttributes } from '@/utils/isDefined'
 
 interface ImgSwiperProps {
   slides?: WithAttributes<ImageEntityFragment>[]

next/components/molecules/Map.tsx

@@ -17,11 +17,11 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { usePreviousImmediate } from 'rooks'
 
-import GmbLogoIcon from '../../assets/icons/map-icons/gmb-logo.svg'
-import MirbachovPalacIcon from '../../assets/icons/map-icons/mirbachov-palac.svg'
-import PalffyhoPalacIcon from '../../assets/icons/map-icons/palffyho-palac.svg'
-import { useGeneralContext } from '../../utils/generalContext'
-import Link from '../atoms/Link'
+import GmbLogoIcon from '@/assets/icons/map-icons/gmb-logo.svg'
+import MirbachovPalacIcon from '@/assets/icons/map-icons/mirbachov-palac.svg'
+import PalffyhoPalacIcon from '@/assets/icons/map-icons/palffyho-palac.svg'
+import Link from '@/components/atoms/Link'
+import { useGeneralContext } from '@/utils/generalContext'
 
 interface MapProps {
   mapboxAccessToken: string

next/components/molecules/Navigation.tsx

@@ -2,21 +2,21 @@ import cx from 'classnames'
 import Image from 'next/image'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useWindowSize } from 'rooks'
 
-import CloseIcon from '../../assets/icons/close-x.svg'
-import HamburgerIcon from '../../assets/icons/menu.svg'
-import SearchIcon from '../../assets/icons/search.svg'
-import Logo from '../../assets/images/gmb-logo-header.png'
-import { ContentPageEntityFragment } from '../../graphql'
-import { getBreakpointValue } from '../../utils/getBreakpointValue'
-import { WithAttributes } from '../../utils/isDefined'
-import AppLangSwitchers from '../atoms/AppLangSwitchers'
-import Button from '../atoms/Button'
-import Link from '../atoms/Link'
-import SkipNavigation from '../atoms/SkipNavigation'
-import SearchBar from './SearchBar'
+import CloseIcon from '@/assets/icons/close-x.svg'
+import HamburgerIcon from '@/assets/icons/menu.svg'
+import SearchIcon from '@/assets/icons/search.svg'
+import Logo from '@/assets/images/gmb-logo-header.png'
+import AppLangSwitchers from '@/components/atoms/AppLangSwitchers'
+import Button from '@/components/atoms/Button'
+import Link from '@/components/atoms/Link'
+import SkipNavigation from '@/components/atoms/SkipNavigation'
+import SearchBar from '@/components/molecules/SearchBar'
+import { ContentPageEntityFragment } from '@/graphql'
+import { getBreakpointValue } from '@/utils/getBreakpointValue'
+import { WithAttributes } from '@/utils/isDefined'
 
 interface NavigationProps {
   contentPage?: WithAttributes<ContentPageEntityFragment>

next/components/molecules/PlaceTime.tsx

@@ -1,6 +1,6 @@
-import { ContentPagePlaceFragment, DatetimeFragment } from '../../graphql'
-import { SidePanelPlace } from '../atoms/SidePanelPlace'
-import { SidePanelTime } from '../atoms/SidePanelTime'
+import { SidePanelPlace } from '@/components/atoms/SidePanelPlace'
+import { SidePanelTime } from '@/components/atoms/SidePanelTime'
+import { ContentPagePlaceFragment, DatetimeFragment } from '@/graphql'
 
 interface IPlaceTimeProps {
   place: ContentPagePlaceFragment | undefined

next/components/molecules/Results.tsx

@@ -1,6 +1,6 @@
-import { CommonSearchPageEntityFragment } from '../../graphql'
-import { hasAttributes } from '../../utils/isDefined'
-import Link from '../atoms/Link'
+import Link from '@/components/atoms/Link'
+import { CommonSearchPageEntityFragment } from '@/graphql'
+import { hasAttributes } from '@/utils/isDefined'
 
 interface ResultsProps {
   results: CommonSearchPageEntityFragment[]

next/components/molecules/SearchBar.tsx

@@ -3,17 +3,17 @@ import { useTranslation } from 'next-i18next'
 import { useEffect } from 'react'
 import { useQuery } from 'react-query'
 
-import CloseIcon from '../../assets/icons/close-x.svg'
+import CloseIcon from '@/assets/icons/close-x.svg'
+import Results from '@/components/molecules/Results'
 import {
   commonSearchDefaultFilters,
   commonSearchFetcher,
   CommonSearchFilters,
   getCommonSearchQueryKey,
-} from '../../services/meilisearch/fetchers/commonSearchFetcher'
-import { isDefined } from '../../utils/isDefined'
-import { useRoutePreservedState } from '../../utils/useRoutePreservedState'
-import { useSearch } from '../../utils/useSearch'
-import Results from './Results'
+} from '@/services/meilisearch/fetchers/commonSearchFetcher'
+import { isDefined } from '@/utils/isDefined'
+import { useRoutePreservedState } from '@/utils/useRoutePreservedState'
+import { useSearch } from '@/utils/useSearch'
 
 interface SearchBarProps {
   closeSearchBar: () => void