jsconfig pathes

jsconfig.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+      "baseUrl": "./src",
+      "paths": {
+        "svgs/*": ["src/assets/svgs/*"],
+        "components/*": ["src/components/*"],
+        "components/layouts/*": ["src/components/layouts/*"]
+      }
+    },
+    "exclude": ["node_modules"]
+  }

package.json

@@ -4,7 +4,6 @@
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
@@ -13,11 +12,10 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
-    "test": "react-app-rewired test",
-    "eject": "react-scripts eject",
-    "postinstall": "link-module-alias"
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
@@ -38,9 +36,10 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/react": "^13.3.0",
+    "@types/jest": "^28.1.3",
     "axios": "^0.27.2",
-    "react-app-rewire-alias": "^1.1.7",
-    "react-app-rewired": "^2.2.1",
+    "jest": "^28.1.1",
     "sass": "^1.52.2",
     "scss": "^0.2.4",
     "styled-components": "^5.3.5"

src/components/ProductsGrid/index.js

@@ -2,7 +2,7 @@ import React, {useContext} from 'react';
 import {ProductCard} from '../index';
 import styles from './ProductsGrid.module.scss';
 
-import {ProductsContext} from '@context'
+import {ProductsContext} from 'context'
 const ProductsGrid = () => {
     const products = useContext(ProductsContext);
     if (products === undefined) return <div>Loading...</div>;

src/components/ShopCart/index.js

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import styles from "./ShopCart.module.scss";
 
-import {CartContext} from '@context';
+import {CartContext} from 'context';
 const ShopCart = () => {
     const {state, dispatch} = useContext(CartContext);
     console.log(',,,,,,,,,,,,,,,,,,', state.itemsSelected)

src/components/layouts/Header/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Navbar } from '@components';
+import { Navbar } from 'components';
 
 const HeaderLayout = () => {
     return (

src/components/navigation/Navbar/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { useContext } from 'react';
-import { CartContext } from '@context';
+import { CartContext } from 'context';
 
-import {cartIcon} from '@svgs'
+import {cartIcon} from 'assets/svgs';
 
 const Navbar = () => {
     const {state} = useContext(CartContext)

src/components/productDetails/index.js

@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
 import {useParams, Link} from 'react-router-dom'
 //context
-import { ProductsContext } from '@context';
+import { ProductsContext } from 'context';
 
 import styles from './productDetails.module.scss'
 const ProductDetails = (props) => {

src/components/shared/Card/ProductCard/index.js

@@ -2,12 +2,12 @@ import React, { useContext } from 'react';
 import styles from "./ProductCard.module.scss";
 import { Link } from 'react-router-dom';
 
-import { CartContext } from '@context';
+import { CartContext } from 'context';
 
-import {cartIcon} from '@svgs';
+import {cartIcon} from 'assets/svgs';
 
 //helper
-import { isInCart, quantityCounter, limitWords } from '../../../../utils/helper';
+import { isInCart, quantityCounter, limitWords } from 'utils/helper';
 
 const ProductCard = ({item}) => {
     const {state,dispatch} = useContext(CartContext);

src/context/CartContextProvider.js

@@ -1,6 +1,6 @@
 import React, { useReducer } from 'react';
 import { createContext } from 'react';
-import {isInCart, totalCart} from '@helper'
+import {isInCart, totalCart} from 'utils/helper'
 const initialState = {
     itemsSelected : [],
     totalItems : 0,

src/context/ProductsContextProvider.js

@@ -1,5 +1,5 @@
 import React, {useState,createContext, useEffect} from 'react';
-import getApi from '../services/api';
+import getApi from 'services/api';
 
 export const ProductsContext = createContext()
 const ProductsContextProvider = (props) => {

src/pages/Home/index.js

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import { ProductsGrid } from '@components';
+import { ProductsGrid } from 'components';
 import styles from "./index.module.scss";
 
 const HomePage = (props) => {

src/pages/SignUp/SignUpForm.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import styles from './SignUpForm.module.css'
-import {validate} from '@helper';
+import {validate} from 'utils/helper';
 import {Link} from 'react-router-dom'
  const SignUp = () => {
     const[data, SetData] = useState({

src/pages/login/LoginForm.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import styles from '../SignUp/SignUpForm.module.css';
-import {validate} from '../../utils/helper';
+import {validate} from 'utils/helper';
 import {Link} from 'react-router-dom';
 
 const Login = () => {

src/routes/Router.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { ProductsGrid, ProductDetails, ShopCart} from '@components';
-import { MainLayout, StoreLayout} from '../components/layouts'
+import { ProductsGrid, ProductDetails, ShopCart} from 'components';
+import { MainLayout, StoreLayout} from 'components/layouts'
 import { Routes, Route, Navigate } from 'react-router-dom';
-import { HomePage, SignUp, Login } from '@pages';
+import { HomePage, SignUp, Login } from 'pages';
 
 const Router = () => {
     const Routers = [