refactor(typescript): replace @/ import alias to ~/

src/__tests__/index.test.tsx

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
 import { render, screen } from '@testing-library/react'
-import Home from '@/app/page'
+import Home from '~/app/page'
 
 describe('Home', () => {
   it('Renders the page heading', () => {

src/app/page.tsx

@@ -2,18 +2,18 @@
 
 import React, { useEffect } from 'react'
 
-import useQueryState from '@/shared/query/query-state'
-import { useUserInteractionStore } from '@/stores/user-interaction-store'
-import { Header } from '@/components/header'
-import { SoundButton } from '@/components/sound'
-import { ClearButton } from '@/components/clear-button'
-import { ShareButton } from '@/components/share-button'
-import { Footer } from '@/components/footer'
-import { useThemeStore } from '@/stores/theme-store'
-import { SaveComboButton } from '@/components/save-combo-button'
-import { InteractionModal } from '@/components/interaction-modal'
-
-import { sounds } from '@/sounds'
+import useQueryState from '~/shared/query/query-state'
+import { useUserInteractionStore } from '~/stores/user-interaction-store'
+import { Header } from '~/components/header'
+import { SoundButton } from '~/components/sound'
+import { ClearButton } from '~/components/clear-button'
+import { ShareButton } from '~/components/share-button'
+import { Footer } from '~/components/footer'
+import { useThemeStore } from '~/stores/theme-store'
+import { SaveComboButton } from '~/components/save-combo-button'
+import { InteractionModal } from '~/components/interaction-modal'
+
+import { sounds } from '~/sounds'
 
 import { container } from './styles'
 

src/components/clear-button/index.tsx

@@ -1,6 +1,6 @@
-import { useSoundsStateStore } from '@/stores/sounds-state-store'
-import { useThemeStore } from '@/stores/theme-store'
-import { actionButton } from '@/shared/styles/action-button'
+import { useSoundsStateStore } from '~/stores/sounds-state-store'
+import { useThemeStore } from '~/stores/theme-store'
+import { actionButton } from '~/shared/styles/action-button'
 
 export function ClearButton() {
   const bulkSoundUpdate = useSoundsStateStore(state => state.bulkUpdate)

src/components/footer/index.tsx

@@ -5,7 +5,7 @@ import { tv } from 'tailwind-variants'
 import { FiAward, FiGithub } from 'react-icons/fi'
 import { AiOutlineCopyrightCircle } from 'react-icons/ai'
 
-import { useThemeStore } from '@/stores/theme-store'
+import { useThemeStore } from '~/stores/theme-store'
 import { container, version } from './styles'
 
 import packageJson from '../../../package.json'

src/components/header/combo-list/index.tsx

@@ -3,9 +3,9 @@ import { Menu, Transition } from '@headlessui/react'
 import { PiPlaylistBold } from 'react-icons/pi'
 import { FiTrash } from 'react-icons/fi'
 
-import { useThemeStore } from '@/stores/theme-store'
-import { useComboStore } from '@/stores/combo-store'
-import { useSoundsStateStore } from '@/stores/sounds-state-store'
+import { useThemeStore } from '~/stores/theme-store'
+import { useComboStore } from '~/stores/combo-store'
+import { useSoundsStateStore } from '~/stores/sounds-state-store'
 
 import {
   comboButton,

src/components/header/global-volume-controller/index.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react'
 import { FiVolumeX, FiVolume2, FiVolume1, FiVolume } from 'react-icons/fi'
 
-import { useGlobalVolumeStore } from '@/stores/global-volume-store'
-import { useThemeStore } from '@/stores/theme-store'
-import { volumeControllerInput } from '@/shared/styles/volume-controller-input'
+import { useGlobalVolumeStore } from '~/stores/global-volume-store'
+import { useThemeStore } from '~/stores/theme-store'
+import { volumeControllerInput } from '~/shared/styles/volume-controller-input'
 import { soundButton } from './styles'
 
 export function GlobalVolumeController() {

src/components/header/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Link from 'next/link'
 
-import { useThemeStore } from '@/stores/theme-store'
+import { useThemeStore } from '~/stores/theme-store'
 import { ThemeMenu } from './theme-menu'
 import { GlobalVolumeController } from './global-volume-controller'
 import { title } from './styles'

src/components/header/pomodoro/config-modal.tsx

@@ -3,7 +3,7 @@ import { Fragment, useState } from 'react'
 
 import { padZero } from './pad-zero'
 import { display, minuteConfigInput } from './styles'
-import { useThemeStore } from '@/stores/theme-store'
+import { useThemeStore } from '~/stores/theme-store'
 
 interface Props {
   displayMinutes: string

src/components/header/pomodoro/index.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef, useState } from 'react'
 import { FiPause, FiPlay, FiRotateCw } from 'react-icons/fi'
 
-import { PomodoroStatus, usePomodoroStore } from '@/stores/pomodoro-store'
-import { useThemeStore } from '@/stores/theme-store'
+import { PomodoroStatus, usePomodoroStore } from '~/stores/pomodoro-store'
+import { useThemeStore } from '~/stores/theme-store'
 import { ConfigModal } from './config-modal'
 import { container, controlButton } from './styles'
 

src/components/header/theme-menu/index.tsx

@@ -2,8 +2,8 @@ import { Fragment, useEffect } from 'react'
 import { Menu, Transition } from '@headlessui/react'
 import { PiPaintBrushBroadBold } from 'react-icons/pi'
 
-import useQueryState from '@/shared/query/query-state'
-import { Theme, useThemeStore } from '@/stores/theme-store'
+import useQueryState from '~/shared/query/query-state'
+import { Theme, useThemeStore } from '~/stores/theme-store'
 import { themeButton, triggerButton } from './styles'
 
 export function ThemeMenu() {

src/components/interaction-modal/index.tsx

@@ -3,8 +3,8 @@
 import { Fragment } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
 
-import { useUserInteractionStore } from '@/stores/user-interaction-store'
-import { useSoundsStateStore } from '@/stores/sounds-state-store'
+import { useUserInteractionStore } from '~/stores/user-interaction-store'
+import { useSoundsStateStore } from '~/stores/sounds-state-store'
 
 export function InteractionModal() {
   const bulkSoundUpdate = useSoundsStateStore(state => state.bulkUpdate)

src/components/save-combo-button/index.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react'
 import { FiCheck } from 'react-icons/fi'
 
-import { useComboStore } from '@/stores/combo-store'
-import { useSoundsStateStore } from '@/stores/sounds-state-store'
-import { useThemeStore } from '@/stores/theme-store'
+import { useComboStore } from '~/stores/combo-store'
+import { useSoundsStateStore } from '~/stores/sounds-state-store'
+import { useThemeStore } from '~/stores/theme-store'
 
-import { randomString } from '@/utils/random-string'
-import { actionButton } from '@/shared/styles/action-button'
+import { randomString } from '~/utils/random-string'
+import { actionButton } from '~/shared/styles/action-button'
 
 import { input } from './styles'
 

src/components/share-button/index.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react'
 import { useSearchParams } from 'next/navigation'
 
-import { useSoundsStateStore } from '@/stores/sounds-state-store'
-import { useThemeStore } from '@/stores/theme-store'
+import { useSoundsStateStore } from '~/stores/sounds-state-store'
+import { useThemeStore } from '~/stores/theme-store'
 
-import { actionButton } from '@/shared/styles/action-button'
+import { actionButton } from '~/shared/styles/action-button'
 
 import { ConfirmationModal } from './confirmation-modal'
 

src/components/sound/index.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react'
 
-import type { Sound } from '@/sounds'
-
-import useQueryState from '@/shared/query/query-state'
-import { useThemeStore } from '@/stores/theme-store'
-import { useGlobalVolumeStore } from '@/stores/global-volume-store'
-import { PomodoroStatus, usePomodoroStore } from '@/stores/pomodoro-store'
-import { SoundState, useSoundsStateStore } from '@/stores/sounds-state-store'
-import { useUserInteractionStore } from '@/stores/user-interaction-store'
+import type { Sound } from '~/sounds'
+
+import useQueryState from '~/shared/query/query-state'
+import { useThemeStore } from '~/stores/theme-store'
+import { useGlobalVolumeStore } from '~/stores/global-volume-store'
+import { PomodoroStatus, usePomodoroStore } from '~/stores/pomodoro-store'
+import { SoundState, useSoundsStateStore } from '~/stores/sounds-state-store'
+import { useUserInteractionStore } from '~/stores/user-interaction-store'
 
 import { VolumeController } from './volume-controller'
 import { icon, soundButton } from './styles'

src/components/sound/volume-controller/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 
-import { useThemeStore } from '@/stores/theme-store'
-import { useSoundsStateStore } from '@/stores/sounds-state-store'
+import { useThemeStore } from '~/stores/theme-store'
+import { useSoundsStateStore } from '~/stores/sounds-state-store'
 
 import { container, input } from './styles'
 

src/components/sound/volume-controller/styles.ts

@@ -1,4 +1,4 @@
-import { volumeControllerInput } from '@/shared/styles/volume-controller-input'
+import { volumeControllerInput } from '~/shared/styles/volume-controller-input'
 import { tv } from 'tailwind-variants'
 
 export const container = tv({

src/sounds.tsx

@@ -22,7 +22,7 @@ import {
   Waves,
   WhiteNoise,
   Wind
-} from '@/components/sound-icons'
+} from '~/components/sound-icons'
 
 export const sounds = [
   {

tsconfig.json

@@ -19,7 +19,7 @@
     "jsx": "preserve",
     "baseUrl": ".",
     "paths": {
-      "@/*": [
+      "~/*": [
         "src/*"
       ]
     },