feat: replace relative import closes nodejs#5484

Author: umairraza96

.eslintrc

@@ -8,9 +8,16 @@
   "overrides": [
     {
       "files": ["**/*.ts?(x)"],
-      "plugins": ["@typescript-eslint"],
+      "plugins": ["@typescript-eslint", "no-relative-import-paths"],
       "rules": {
-        "@typescript-eslint/consistent-type-imports": "error"
+        "@typescript-eslint/consistent-type-imports": "error",
+        "no-relative-import-paths/no-relative-import-paths": [
+          "warn",
+          {
+            "allowSameFolder": true,
+            "prefix": "@"
+          }
+        ]
       }
     },
     {

__fixtures__/nodeReleases.tsx

@@ -1,4 +1,4 @@
-import type { NodeRelease } from '../types';
+import type { NodeRelease } from '@/types';
 
 export const createNodeReleases = (): NodeRelease[] => [
   {

components/Api/ApiChanges/index.tsx

@@ -1,7 +1,7 @@
 import { FormattedMessage } from 'react-intl';
 import styles from './index.module.scss';
-import { parseApiDocsVersion } from '../../../util/parseApiDocsVersion';
-import type { ApiChange, ApiUpdate } from '../../../types';
+import { parseApiDocsVersion } from '@/util/parseApiDocsVersion';
+import type { ApiChange, ApiUpdate } from '@/types';
 import type { FC } from 'react';
 
 type ApiChangesProps = {

components/Article/Codebox/__tests__/index.test.tsx

@@ -2,7 +2,10 @@ import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 
-import Codebox, { replaceLabelLanguages, replaceLanguages } from '../index';
+import Codebox, {
+  replaceLabelLanguages,
+  replaceLanguages,
+} from '@/components/Article/Codebox/index';
 
 describe('Replacer tests', (): void => {
   it('replaceLabelLanguages', (): void => {

components/Article/Codebox/index.tsx

@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { highlight, languages } from 'prismjs';
 import classnames from 'classnames';
 import styles from './index.module.scss';
-import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
+import { useCopyToClipboard } from '@/hooks/useCopyToClipboard';
 import type { FC, PropsWithChildren, ReactElement, MouseEvent } from 'react';
 
 type CodeBoxProps = {

components/Article/EditLink/index.tsx

@@ -1,7 +1,7 @@
 import { FaPencilAlt } from 'react-icons/fa';
 import { FormattedMessage } from 'react-intl';
 import styles from './index.module.scss';
-import { useLocale } from './../../../hooks/useLocale';
+import { useLocale } from '@/hooks/useLocale';
 import type { FC } from 'react';
 
 type EditLinkProps = {

components/Blog/BlogCard/index.tsx

@@ -1,8 +1,8 @@
 import { FormattedDate, FormattedMessage } from 'react-intl';
 import styles from './index.module.scss';
-import LocalizedLink from '../../LocalizedLink';
-import navigation from '../../../navigation.json';
-import type { BlogPost } from '../../../types';
+import LocalizedLink from '@/components/LocalizedLink';
+import navigation from '@/navigation.json';
+import type { BlogPost } from '@/types';
 import type { FC } from 'react';
 
 const getBlogCategoryUrl = (category: string): string =>

components/Common/ActiveLocalizedLink/index.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router';
 import { useState, useEffect, type FC } from 'react';
 import classNames from 'classnames';
-import LocalizedLink from '../../LocalizedLink';
+import LocalizedLink from '@/components/LocalizedLink';
 import type Link from 'next/link';
 import type { ComponentProps } from 'react';
 

components/Common/Banner/__tests__/index.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
-import Banner from '../index';
-import type { WebsiteBanner } from '../../../../types';
+import Banner from '@/components/Common/Banner/index';
+import type { WebsiteBanner } from '@/types';
 
 const bannersIndex: WebsiteBanner = {
   endDate: '',

components/Common/Banner/index.tsx

@@ -1,10 +1,10 @@
 import { useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './index.module.scss';
-import { dateIsBetween } from '../../../util/dateIsBetween';
-import { isAbsoluteUrl } from '../../../util/isAbsoluteUrl';
+import { dateIsBetween } from '@/util/dateIsBetween';
+import { isAbsoluteUrl } from '@/util/isAbsoluteUrl';
 import type { FC } from 'react';
-import type { WebsiteBanner } from '../../../types';
+import type { WebsiteBanner } from '@/types';
 
 const useTextContent = ({ text, link }: WebsiteBanner, bannerBtnText: string) =>
   useMemo(() => {