RDT-9 Integrate absolute imports (#10)

* integrate absolute imports

* fix typos in readme

* fix tsconfig

.eslintrc.cjs

@@ -26,6 +26,16 @@ module.exports = {
           "index"
         ],
         "pathGroups": [
+          {
+            "pattern": "react",
+            "group": "builtin",
+            "position": "before"
+          },
+          {
+            "pattern": "@/**",
+            "group": "parent",
+            "position": "before"
+          },
           {
             "pattern": "**/*.stories.ts?",
             "group": "external",

README.md

@@ -38,10 +38,9 @@ React dApp Template (Vite) is an easy-to-use foundation for efficiently building
 
 ## What's Included and Preconfigured
 
-### Web3 Related Packages
+### Web3 Packages
 
-- ethers.js
-- typechain
+- ethers.js (v5)
 
 ### Testing Infrastucture
 
@@ -66,17 +65,17 @@ React dApp Template (Vite) is an easy-to-use foundation for efficiently building
 
 **React Error Boundary**: A feature in React for handling and containing errors within specific components.
 
-**React Helmet**: A library for managing metadata in React applications, optimizing SEO and discoverability.
+**React Helmet Async**: A library for managing metadata in React applications, optimizing SEO and discoverability.
 
 **I18Next**: An internationalization library for easily translating JavaScript applications into different languages.
 
-**React Icon All Files**: A library providing a collection of high-quality SVG icons for React applications.
+**React Icons**: A library providing a collection of high-quality SVG icons for React applications.
 
 **React Cookie Consent**: A library simplifying the implementation of cookie consent banners in React applications.
 
 ## Getting Started
 
-Please visit the [Official React dApp Tamplate Documentation Page](https://huseyindeniz.github.io/react-dapp-template-documentation/) to start your dApp frontend development journey.
+Please visit the [Official React dApp Template Documentation Page](https://huseyindeniz.github.io/react-dapp-template-documentation/) to start your dApp frontend development journey.
 
 ## Contributions
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vitedapp",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -76,38 +76,39 @@
     "storybook-addon-react-router-v6": "^2.0.7",
     "ts-jest": "^29.1.1",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "vite": "^4.4.5",
+    "vite-tsconfig-paths": "^4.2.1"
   },
   "jest": {
     "preset": "ts-jest",
     "testEnvironment": "jsdom",
     "moduleNameMapper": {
       "^.+\\.svg$": "jest-svg-transformer",
       "^.+\\.(css|less|scss|webp|png|jpg)$": "identity-obj-proxy",
-      "react-i18next": "<rootDir>/src/__mocks__/i18nextMock.tsx"
+      "react-i18next": "<rootDir>/src/__mocks__/i18nextMock.tsx",
+      "@/features/i18n/(.*)": "<rootDir>/src/features/i18n/$1",
+      "@/features/ui/(.*)": "<rootDir>/src/features/ui/$1",
+      "@/features/wallet/(.*)": "<rootDir>/src/features/wallet/$1",
+      "@/services/(.*)": "<rootDir>/src/services/$1",
+      "@/pages/(.*)": "<rootDir>/src/pages/$1",
+      "@/hooks/(.*)": "<rootDir>/src/hooks/$1",
+      "@/store/(.*)": "<rootDir>/src/store/$1"
     },
     "setupFilesAfterEnv": [
       "<rootDir>/src/setupTests.ts"
     ],
     "collectCoverageFrom": [
       "src/**/*.{js,jsx,ts,tsx}",
-      "!src/reportWebVitals.ts",
-      "!src/serviceWorker.ts",
-      "!src/serviceWorkerRegistration.ts",
-      "!src/test-utils.tsx",
-      "!src/index.tsx",
-      "!src/App.tsx",
       "!src/**/*.stories.{js,jsx,ts,tsx}",
-      "!<rootDir>/node_modules/",
-      "!<rootDir>/template/"
+      "!<rootDir>/node_modules/"
     ],
     "coveragePathIgnorePatterns": [],
     "coverageThreshold": {
       "global": {
         "branches": 30,
-        "functions": 40,
-        "lines": 40,
-        "statements": 40
+        "functions": 30,
+        "lines": 30,
+        "statements": 30
       }
     }
   }

src/App.tsx

@@ -1,11 +1,12 @@
-import log from 'loglevel';
 import React from 'react';
+
+import log from 'loglevel';
 import { Provider } from 'react-redux';
 
-import { Router } from './pages/Router';
-import store from './store/store';
+import { Router } from '@/pages/Router';
+import store from '@/store/store';
 
-import './features/i18n/i18n';
+import '@/features/i18n/i18n';
 
 log.setDefaultLevel('silent');
 

src/__mocks__/customRender.tsx

@@ -1,10 +1,11 @@
 /* eslint-disable react-refresh/only-export-components */
+import * as React from 'react';
+
 import { ChakraProvider } from '@chakra-ui/react';
 import { render, RenderOptions } from '@testing-library/react';
-import * as React from 'react';
-import { I18nextProvider } from 'react-i18next';
+import { I18nextProvider } from 'react-i18next';
 
-import { theme } from '../features/ui/components/Layout/Theme/theme';
+import { theme } from '@/features/ui/components/Layout/Theme/theme';
 
 import i18n from './i18nextMock';
 

src/features/i18n/components/LangMenu/LangMenu.tsx

@@ -1,5 +1,6 @@
-import { Button, useDisclosure } from "@chakra-ui/react";
 import React from "react";
+
+import { Button, useDisclosure } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 

src/features/i18n/useI18nWatchers.ts

@@ -1,8 +1,9 @@
 import { useEffect } from 'react';
+
 import { useTranslation } from 'react-i18next';
 import { useLocation, useParams, useNavigate } from 'react-router-dom';
 
-import { usePages } from '../../pages/usePages';
+import { usePages } from '@/pages/usePages';
 
 import { i18nConfig } from './config';
 

src/features/ui/components/Layout/Copyright/Copyright.tsx

@@ -1,13 +1,14 @@
-import { Box, Link, Button, Image, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
+import { Box, Link, Button, Image, Tooltip } from '@chakra-ui/react';
+
 import reactDappTemplateLogo from '../../../assets/images/react-dapp-template-logo.webp';
 
 // You can remove or change this section
 export const Copyright: React.FC = React.memo(() => {
   return (
     <Box>
-      <Tooltip label="Powered by React dApp Template (Vite) v0.1.0">
+      <Tooltip label="Powered by React dApp Template (Vite) v0.2.0">
         <Button
           as={Link}
           href="https://github.com/huseyindeniz/vite-react-dapp-template"

src/features/ui/components/Layout/Footer/Footer.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { MenuType } from '../../../../../pages/types';
+import { MenuType } from '@/pages/types';
+
 import { Copyright } from '../Copyright/Copyright';
 import { SecondaryMenu } from '../SecondaryMenu/SecondaryMenu';
 import { SiteLogo } from '../SiteLogo/SiteLogo';

src/features/ui/components/Layout/Footer/FooterView/FooterView.tsx

@@ -1,11 +1,12 @@
+import React from 'react';
+
 import {
   Box,
   Container,
   Stack,
   useColorModeValue,
   Divider,
 } from '@chakra-ui/react';
-import React from 'react';
 
 export interface FooterViewProps {
   firstRowContent?: React.ReactNode;

src/features/ui/components/Layout/Header/Header.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {
   Box,
   Flex,
@@ -9,12 +11,12 @@ import {
   Divider,
   Spinner,
 } from '@chakra-ui/react';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { IoClose, IoEllipsisVertical } from 'react-icons/io5';
 
-import { MenuType } from '../../../../../pages/types';
-import { LangMenu } from '../../../../i18n/components/LangMenu/LangMenu';
+import { LangMenu } from '@/features/i18n/components/LangMenu/LangMenu';
+import { MenuType } from '@/pages/types';
+
 import { MainMenu } from '../MainMenu/MainMenu';
 import { SiteLogo } from '../SiteLogo/SiteLogo';
 import { ThemeSwitcher } from '../ThemeSwitcher/ThemeSwitcher';

src/features/ui/components/Layout/Layout.tsx

@@ -1,13 +1,14 @@
+import React from 'react';
+
 import { Box, ChakraProvider, ScaleFade } from '@chakra-ui/react';
 import log from 'loglevel';
-import React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { HelmetProvider } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import { useLocation, Outlet } from 'react-router-dom';
 
-import { usePageLink } from '../../../../pages/usePageLink';
-import { usePages } from '../../../../pages/usePages';
+import { usePageLink } from '@/pages/usePageLink';
+import { usePages } from '@/pages/usePages';
 
 import { CookieConsentMessage } from './CookieConsent/CookieConsentMessage';
 import { ErrorFallback } from './ErrorFallback/ErrorFallback';

src/features/ui/components/Layout/MainMenu/MainMenu.stories.tsx

@@ -2,7 +2,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { withRouter } from 'storybook-addon-react-router-v6';
 
-import { MenuType } from '../../../../../pages/types';
+import { MenuType } from '@/pages/types';
 
 import { MainMenu } from './MainMenu';
 

src/features/ui/components/Layout/MainMenu/MainMenu.tsx

@@ -1,8 +1,9 @@
-import { Link, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
+
+import { Link, useColorModeValue } from '@chakra-ui/react';
 import { NavLink as RouterLink } from 'react-router-dom';
 
-import { MenuType } from '../../../../../pages/types';
+import { MenuType } from '@/pages/types';
 
 export interface MainMenuProps {
   onClick: () => void;

src/features/ui/components/Layout/ProfileMenu/ProfileMenu.test.tsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 
 import { ProfileMenu } from './ProfileMenu';
 
-jest.mock('../../../../wallet/components/Wallet', () => ({
+jest.mock('@/features/wallet/components/Wallet', () => ({
   Wallet: () => <div data-testid="mock-wallet" />,
 }));
 

src/features/ui/components/Layout/ProfileMenu/ProfileMenu.tsx

@@ -1,4 +1,4 @@
-import { Wallet } from '../../../../wallet/components/Wallet';
+import { Wallet } from '@/features/wallet/components/Wallet';
 
 export const ProfileMenu: React.FC = () => {
   return <Wallet />;

src/features/ui/components/Layout/ScrollToTopButton/ScrollToTopButton.tsx

@@ -1,5 +1,6 @@
-import { Box, IconButton } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
+
+import { Box, IconButton } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { IoChevronUp } from 'react-icons/io5';
 

src/features/ui/components/Layout/SecondaryMenu/SecondaryMenu.stories.tsx

@@ -2,7 +2,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { withRouter } from 'storybook-addon-react-router-v6';
 
-import { MenuType } from '../../../../../pages/types';
+import { MenuType } from '@/pages/types';
 
 import { SecondaryMenu } from './SecondaryMenu';
 

src/features/ui/components/Layout/SecondaryMenu/SecondaryMenu.tsx

@@ -1,8 +1,9 @@
-import { Link, Stack, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
+
+import { Link, Stack, useColorModeValue } from '@chakra-ui/react';
 import { NavLink as RouterLink } from 'react-router-dom';
 
-import { MenuType } from '../../../../../pages/types';
+import { MenuType } from '@/pages/types';
 
 export interface SecondaryMenuProps {
   secondaryMenuItems: MenuType[];

src/features/ui/components/Layout/SiteMeta/SiteMeta.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Helmet } from 'react-helmet-async';
 
 export interface SiteMetaProps {