feat: add alias and change paths

package-lock.json

@@ -22,6 +22,7 @@
       },
       "devDependencies": {
         "@chargebee/chargebee-js-types": "^1.0.1",
+        "@types/node": "^20.5.1",
         "@types/react": "^18.2.6",
         "@types/react-dom": "^18.2.4",
         "@types/react-router-dom": "^5.3.3",
@@ -1018,6 +1019,12 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "20.5.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.1.tgz",
+      "integrity": "sha512-4tT2UrL5LBqDwoed9wZ6N3umC4Yhz3W3FloMmiiG4JwmUJWpie0c7lcnUNd4gtMKuDEO4wRVS8B6Xa0uMRsMKg==",
+      "dev": true
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -4011,6 +4018,12 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "@types/node": {
+      "version": "20.5.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.1.tgz",
+      "integrity": "sha512-4tT2UrL5LBqDwoed9wZ6N3umC4Yhz3W3FloMmiiG4JwmUJWpie0c7lcnUNd4gtMKuDEO4wRVS8B6Xa0uMRsMKg==",
+      "dev": true
+    },
     "@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",

package.json

@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@chargebee/chargebee-js-types": "^1.0.1",
+    "@types/node": "^20.5.1",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
     "@types/react-router-dom": "^5.3.3",

src/api/resources/Apps.ts

@@ -1,4 +1,4 @@
-import routes from '../../routes'
+import routes from '@/routes'
 import { getBaseHeaders } from '../utils'
 
 export interface Payload {

src/api/resources/AssetCategories.ts

@@ -1,4 +1,4 @@
-import routes from "../../routes"
+import routes from "@/routes"
 import { AuthPayload } from "../types"
 import { getAuthHeaders } from "../utils"
 

src/api/resources/Assets.ts

@@ -1,4 +1,4 @@
-import routes from "../../routes"
+import routes from "@/routes"
 import { AuthPayload } from "../types"
 import { AssetCategory } from "./AssetCategories"
 import { getAuthHeaders } from "../utils"

src/api/resources/Auras.ts

@@ -1,4 +1,4 @@
-import routes from "../../routes"
+import routes from "@/routes"
 import { AuthPayload } from "../types"
 import { getAuthHeaders } from "../utils"
 

src/api/resources/AuthTokens.ts

@@ -1,4 +1,4 @@
-import routes from "../../routes"
+import routes from "@/routes"
 import { AuthToken } from "../types"
 import { User } from "./User"
 import { getBaseHeaders } from "../utils"

src/api/resources/Element.ts

@@ -1,4 +1,4 @@
-import routes from '../../routes'
+import routes from '@/routes'
 import { getBaseHeaders } from '../utils'
 
 export interface Payload {

src/api/resources/Elements.ts

@@ -1,4 +1,4 @@
-import routes from "../../routes"
+import routes from "@/routes"
 import { getBaseHeaders } from "../utils"
 
 export interface Payload {

src/api/resources/User.ts

@@ -1,4 +1,4 @@
-import routes from "../../routes"
+import routes from "@/routes"
 import { AuthPayload } from "../types"
 import { getAuthHeaders } from "../utils"
 

src/api/resources/UserDailyForecasts.ts

@@ -1,4 +1,4 @@
-import routes from "../../routes"
+import routes from "@/routes"
 import { AuthPayload } from "../types"
 import { getAuthHeaders } from "../utils"
 

src/api/resources/UserPaymentIntents.ts

@@ -1,7 +1,7 @@
 import { PaymentIntent } from '@chargebee/chargebee-js-types'
 import { AuthPayload } from '../types'
 import { getAuthHeaders } from '../utils'
-import routes from '../../routes'
+import routes from '@/routes'
 
 export interface Payload extends AuthPayload {
   paymentMethod: PaymentMethod

src/api/resources/UserSubscriptionCheckout.ts

@@ -1,4 +1,4 @@
-import routes from "../../routes"
+import routes from "@/routes"
 import { AuthPayload } from "../types"
 import { getAuthHeaders } from "../utils"
 

src/api/resources/UserSubscriptionItemPrices.ts

@@ -1,4 +1,4 @@
-import routes from "../../routes"
+import routes from "@/routes"
 import { AuthPayload } from "../types"
 import { getAuthHeaders } from "../utils"
 

src/api/resources/UserSubscriptionReceipts.ts

@@ -1,4 +1,4 @@
-import routes from "../../routes"
+import routes from "@/routes"
 import { AuthPayload } from "../types"
 import { getAuthHeaders } from "../utils"
 

src/api/resources/UserSubscriptionStatus.ts

@@ -1,4 +1,4 @@
-import routes from "../../routes"
+import routes from "@/routes"
 import { AuthPayload } from "../types"
 import { getAuthHeaders } from "../utils"
 

src/components/App/index.tsx

@@ -2,10 +2,10 @@ import { useState } from 'react'
 import {
   Routes, Route, Navigate, Outlet, useLocation, useNavigate
 } from 'react-router-dom'
-import { useAuth } from '../../auth'
+import { useAuth } from '@/auth'
 import { useSelector } from 'react-redux'
-import { selectors } from '../../store'
+import { selectors } from '@/store'
-import routes, { hasNavigation, getRouteBy, hasNoFooter } from '../../routes'
+import routes, { hasNavigation, getRouteBy, hasNoFooter } from '@/routes'
 import BirthdayPage from '../BirthdayPage'
 import BirthtimePage from '../BirthtimePage'
 import CreateProfilePage from '../CreateProfilePage'

src/components/AttentionPage/index.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import Title from '../Title'
-import routes from '../../routes'
+import routes from '@/routes'
 import styles from './styles.module.css'
 import CheckboxWithText from '../CheckboxWithText'
 import SpecialWelcomeOffer from '../SpecialWelcomeOffer'

src/components/BirthdayPage/index.tsx

@@ -2,13 +2,13 @@ import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
-import { actions, selectors } from '../../store'
+import { actions, selectors } from '@/store'
 import { DatePicker } from '../DateTimePicker'
 import MainButton from  '../MainButton'
 import Policy from '../Policy'
 import Purposes from '../Purposes'
 import Title from '../Title'
-import routes from '../../routes'
+import routes from '@/routes'
 import './styles.css'
 
 function BirthdayPage(): JSX.Element {

src/components/BirthtimePage/index.tsx

@@ -1,11 +1,11 @@
 import { useNavigate } from "react-router-dom"
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
-import { actions, selectors } from '../../store'
+import { actions, selectors } from '@/store'
 import { TimePicker } from "../DateTimePicker"
 import Title from "../Title"
 import MainButton from "../MainButton"
-import routes from "../../routes"
+import routes from "@/routes"
 import './styles.css'
 
 function BirthtimePage(): JSX.Element {

src/components/CreateProfilePage/index.tsx

@@ -3,10 +3,10 @@ import { useNavigate } from "react-router-dom"
 import { CircularProgressbar, buildStyles } from 'react-circular-progressbar'
 import { useTranslation } from 'react-i18next'
 import ProcessFlow from "./ProcessFlow"
-import routes from "../../routes"
+import routes from "@/routes"
 import styles from './styles.module.css'
 import { useSelector } from "react-redux"
-import { selectors } from "../../store"
+import { selectors } from "@/store"
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 

src/components/DateTimePicker/DateInput.tsx

@@ -1,4 +1,4 @@
-import { FormField } from '../../types'
+import { FormField } from '@/types'
 import { normalize, calculateMaxValue } from './utils'
 
 type DatePartValue = string | undefined

src/components/DateTimePicker/DatePicker.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { FormField } from '../../types'
+import { FormField } from '@/types'
 import DateInput from './DateInput'
 import ErrorText from '../ErrorText'
 import { stringify, getCurrentYear } from './utils'

src/components/DidYouKnowPage/index.tsx

@@ -2,11 +2,11 @@ import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import MainButton from  '../MainButton'
 import Title from '../Title'
-import routes from '../../routes'
+import routes from '@/routes'
 import styles from './styles.module.css'
 import { useSelector } from 'react-redux'
-import { selectors } from '../../store'
+import { selectors } from '@/store'
-import { getZodiacSignByDate } from '../../zodiac-sign'
+import { getZodiacSignByDate } from '@/services/zodiac-sign'
 import SpecialWelcomeOffer from '../SpecialWelcomeOffer'
 import { useState } from 'react'
 

src/components/EmailEnterPage/EmailInput.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { FormField } from '../../types'
+import { FormField } from '@/types'
 import './styles.css'
 
 const isValidEmail = (email: string) => {

src/components/EmailEnterPage/index.tsx

@@ -2,17 +2,17 @@ import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
-import { actions, selectors } from '../../store'
+import { actions, selectors } from '@/store'
-import { getClientTimezone } from '../../locales'
+import { getClientTimezone } from '@/locales'
-import { useAuth } from '../../auth'
+import { useAuth } from '@/auth'
-import { useApi, ApiError, extractErrorMessage } from '../../api'
+import { useApi, ApiError, extractErrorMessage } from '@/api'
 import Title from '../Title'
 import Policy from '../Policy'
 import EmailInput from './EmailInput'
 import MainButton from '../MainButton'
 import Loader, { LoaderColor } from '../Loader'
 import ErrorText from '../ErrorText'
-import routes from '../../routes'
+import routes from '@/routes'
 
 function EmailEnterPage(): JSX.Element {
   const api = useApi()

src/components/FeedbackPage/index.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import routes from '../../routes'
+import routes from '@/routes'
 import styles from './styles.module.css'
 import MainButton from '../MainButton'
 

src/components/FreePeriodInfoPage/index.tsx

@@ -1,11 +1,11 @@
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import Title from '../Title'
-import routes from '../../routes'
+import routes from '@/routes'
 import styles from './styles.module.css'
 import { useCallback } from 'react'
 import { useDispatch } from 'react-redux'
-import { actions } from '../../store'
+import { actions } from '@/store'
 
 function FreePeriodInfoPage(): JSX.Element {
   const { t } = useTranslation()

src/components/Header/index.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import routes, { hasCrossButton, hasNavigation, isNotEntrypoint } from '../../routes'
+import routes, { hasCrossButton, hasNavigation, isNotEntrypoint } from '@/routes'
 import BackButton from './BackButton'
 import iconUrl from './icon.png'
 import menuUrl from './menu.png'

src/components/Navbar/index.tsx

@@ -1,8 +1,8 @@
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
-import { useAuth } from '../../auth'
+import { useAuth } from '@/auth'
-import { useLegal } from '../../legal'
+import { useLegal } from '@/legal'
-import routes from '../../routes'
+import routes from '@/routes'
 import './styles.css'
 
 type NavbarProps = {

src/components/PaymentPage/index.tsx

@@ -2,9 +2,9 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
-import { selectors } from '../../store'
+import { selectors } from '@/store'
-import { usePayment } from '../../payment'
+import { usePayment } from '@/payment'
-import { actions } from '../../store'
+import { actions } from '@/store'
 import {
   ApplePayBanner,
   ApplePayButton,
@@ -18,7 +18,7 @@ import UserHeader from '../UserHeader'
 import Title from '../Title'
 import Loader from '../Loader'
 import secure from './secure.png'
-import routes from '../../routes'
+import routes from '@/routes'
 import './styles.css'
 
 function PaymentPage(): JSX.Element {

src/components/PaymentPage/methods/ApplePay/Button.tsx

@@ -1,11 +1,11 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PaymentIntent } from '@chargebee/chargebee-js-types'
-import { useApi, useApiCall, extractErrorMessage, SubscriptionReceipts } from '../../../../api'
+import { useApi, useApiCall, extractErrorMessage, SubscriptionReceipts } from '@/api'
-import { usePayment, ApplePayButtonOptions } from '../../../../payment'
+import { usePayment, ApplePayButtonOptions } from '@/payment'
-import { useAuth } from '../../../../auth'
+import { useAuth } from '@/auth'
-import Loader, { LoaderColor } from '../../../Loader'
+import Loader, { LoaderColor } from '@/components/Loader'
-import ErrorText from '../../../ErrorText'
+import ErrorText from '@/components/ErrorText'
 
 const currencyCode = 'USD'
 const paymentMethod = 'apple_pay'

src/components/PaymentPage/methods/Card/Button.tsx

@@ -1,6 +1,6 @@
 
 import { useTranslation } from 'react-i18next'
-import MainButton from '../../../MainButton'
+import MainButton from '@/components/MainButton'
 import card from './card.svg'
 
 interface CardButtonProps {

src/components/PaymentPage/methods/Card/Modal.tsx

@@ -5,13 +5,13 @@ import {
 } from '@chargebee/chargebee-js-react-wrapper'
 import ChargebeeComponents from '@chargebee/chargebee-js-react-wrapper/dist/components/ComponentGroup'
 import { PaymentIntent } from '@chargebee/chargebee-js-types'
-import { usePayment } from '../../../../payment'
+import { usePayment } from '@/payment'
-import { useApi, SubscriptionReceipts, useApiCall } from '../../../../api'
+import { useApi, SubscriptionReceipts, useApiCall } from '@/api'
-import { useAuth } from '../../../../auth'
+import { useAuth } from '@/auth'
-import Modal from '../../../Modal'
+import Modal from '@/components/Modal'
-import Title from '../../../Title'
+import Title from '@/components/Title'
-import MainButton from '../../../MainButton'
+import MainButton from '@/components/MainButton'
-import Loader from '../../../Loader'
+import Loader from '@/components/Loader'
 import visa from './visa.svg'
 import mastercard from './mastercard.svg'
 import amex from './amex.svg'

src/components/PaymentPage/methods/GooglePay/Button.tsx

@@ -1,11 +1,11 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PaymentIntent } from '@chargebee/chargebee-js-types'
-import { SubscriptionReceipts, extractErrorMessage, useApi, useApiCall } from '../../../../api'
+import { SubscriptionReceipts, extractErrorMessage, useApi, useApiCall } from '@/api'
-import { usePayment, GooglePayButtonOptions } from '../../../../payment'
+import { usePayment, GooglePayButtonOptions } from '@/payment'
-import { useAuth } from '../../../../auth'
+import { useAuth } from '@/auth'
-import Loader, { LoaderColor } from '../../../Loader'
+import Loader, { LoaderColor } from '@/components/Loader'
-import ErrorText from '../../../ErrorText'
+import ErrorText from '@/components/ErrorText'
 
 const currencyCode = 'USD'
 const paymentMethod = 'google_pay'

src/components/SpecialWelcomeOffer/index.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import Title from '../Title'
-import routes from '../../routes'
+import routes from '@/routes'
 import styles from './styles.module.css'
 import ModalTop from '../ModalTop'
 import Header from '../Header'

src/components/StaticPage/index.tsx

@@ -1,6 +1,6 @@
 import { useParams } from 'react-router'
 import { useTranslation } from 'react-i18next'
-import { useApi, useApiCall, Element } from '../../api'
+import { useApi, useApiCall, Element } from '@/api'
 import { useCallback } from 'react'
 import parse from 'html-react-parser'
 import Loader from '../Loader'

src/components/SubscriptionPage/index.tsx

@@ -1,14 +1,14 @@
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
-import { selectors } from '../../store'
+import { selectors } from '@/store'
 import MainButton from '../MainButton'
 import Policy from '../Policy'
 import Countdown from '../Countdown'
 import PaymentTable, { Currency, Locale } from '../PaymentTable'
 import UserHeader from '../UserHeader'
 import CallToAction from '../CallToAction'
-import routes from '../../routes'
+import routes from '@/routes'
 import './styles.css'
 
 const currency = Currency.USD

src/components/WallpaperPage/index.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useAuth } from '../../auth'
+import { useAuth } from '@/auth'
-import { useApi, useApiCall, Assets, DailyForecasts } from '../../api'
+import { useApi, useApiCall, Assets, DailyForecasts } from '@/api'
 import { saveFile, buildFilename } from './utils'
 import Loader, { LoaderColor } from '../Loader'
 import './styles.css'

src/index.css

@@ -122,3 +122,7 @@ a,button,div,input,select,textarea {
 .CircularProgressbar {
   position: relative;
 }
+
+button {
+  cursor: pointer;
+}

tsconfig.json

@@ -20,5 +20,6 @@
     "noFallthroughCasesInSwitch": true
   },
   "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [{ "path": "./tsconfig.node.json" }],
+  "extends": "./tsconfig.paths.json"
 }

tsconfig.paths.json

@@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "@/*": [
+                "./src/*"
+            ]
+        }
+    }
+}

vite.config.ts

@@ -1,7 +1,11 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import * as path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
+  },
 })