feat: new branch for absolute path closes #5484 (#5513)

Co-authored-by: Claudio Wunder <cwunder@gnome.org>

Author: umairraza96

.eslintrc.json

@@ -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": "@"
+          }
+        ]
       }
     },
     {

.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from '@storybook/nextjs';
+import { resolve } from 'node:path';
 
 const config: StorybookConfig = {
   stories: ['../components/**/*.stories.tsx'],
@@ -8,6 +9,16 @@ const config: StorybookConfig = {
   docs: { autodocs: 'tag' },
   staticDirs: ['../public'],
   core: { disableTelemetry: true },
+  webpackFinal: async (config, { configType }) => {
+    config.resolve!.modules = [resolve(__dirname, '..'), 'node_modules'];
+
+    config.resolve!.alias = {
+      ...config.resolve!.alias,
+      '@': resolve(__dirname, '../'),
+    };
+
+    return config;
+  },
 };
 
 export default config;

__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/Api/JsonLink/index.tsx

@@ -1,6 +1,6 @@
 import { FormattedMessage } from 'react-intl';
 import { FaRobot } from 'react-icons/fa';
-import { DOCS_URL } from '../../../next.constants.mjs';
+import { DOCS_URL } from '@/next.constants.mjs';
 import type { FC } from 'react';
 
 import styles from './index.module.scss';

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

@@ -1,8 +1,8 @@
 import { useMemo, useState } from 'react';
 import classnames from 'classnames';
 import { TbCopy, TbCheck } from 'react-icons/tb';
-import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
-import { usePrismJS } from '../../../hooks/usePrismJS';
+import { useCopyToClipboard } from '@/hooks/useCopyToClipboard';
+import { usePrismJS } from '@/hooks/usePrismJS';
 import type { FC, PropsWithChildren, ReactElement, MouseEvent } from 'react';
 
 import styles from './index.module.scss';

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: '',