feat: use path-alias (#771)

gui/.eslintrc.json

@@ -4,7 +4,7 @@
     "es2021": true,
     "jest": true
   },
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:@dword-design/import-alias/recommended"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
@@ -30,6 +30,14 @@
         "argsIgnorePattern": "^_",
         "varsIgnorePattern": "^_"
       }
+    ],
+    "@dword-design/import-alias/prefer-alias": [
+      "error",
+      {
+        "alias": {
+          "@": "./src/"
+        }
+      }
     ]
   },
   "settings": {

gui/package.json

@@ -71,6 +71,7 @@
     ]
   },
   "devDependencies": {
+    "@dword-design/eslint-plugin-import-alias": "^4.0.8",
     "@tailwindcss/forms": "^0.5.3",
     "@tauri-apps/cli": "^2.0.0-alpha.10",
     "@types/file-saver": "^2.0.5",

gui/src/components/BVHButton.tsx

@@ -5,7 +5,7 @@ import {
   RecordBVHStatusT,
   RpcMessage,
 } from 'solarxr-protocol';
-import { useWebsocketAPI } from '../hooks/websocket-api';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
 import { BigButton } from './commons/BigButton';
 import { RecordIcon } from './commons/icon/RecordIcon';
 

gui/src/components/ClearDriftCompensationButton.tsx

@@ -1,6 +1,6 @@
 import { useLocalization } from '@fluent/react';
 import { ClearDriftCompensationRequestT, RpcMessage } from 'solarxr-protocol';
-import { useWebsocketAPI } from '../hooks/websocket-api';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
 import { BigButton } from './commons/BigButton';
 import { TrashIcon } from './commons/icon/TrashIcon';
 

gui/src/components/ClearMountingButton.tsx

@@ -1,11 +1,11 @@
 import { useLocalization } from '@fluent/react';
 import { ClearMountingResetRequestT, RpcMessage } from 'solarxr-protocol';
-import { useWebsocketAPI } from '../hooks/websocket-api';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
 import { BigButton } from './commons/BigButton';
 import { TrashIcon } from './commons/icon/TrashIcon';
-import { useTrackers } from '../hooks/tracker';
+import { useTrackers } from '@/hooks/tracker';
 import { Quaternion } from 'three';
-import { QuaternionFromQuatT, similarQuaternions } from '../maths/quaternion';
+import { QuaternionFromQuatT, similarQuaternions } from '@/maths/quaternion';
 import { useMemo } from 'react';
 
 const _q = new Quaternion();

gui/src/components/MainLayout.tsx

@@ -6,10 +6,10 @@ import {
   RpcMessage,
   SettingsRequestT,
 } from 'solarxr-protocol';
-import { useElemSize, useLayout } from '../hooks/layout';
+import { useElemSize, useLayout } from '@/hooks/layout';
 import { Navbar } from './Navbar';
 import { TopBar } from './TopBar';
-import { useWebsocketAPI } from '../hooks/websocket-api';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
 import { WidgetsComponent } from './WidgetsComponent';
 
 export function MainLayoutRoute({

gui/src/components/Navbar.tsx

@@ -8,7 +8,7 @@ import { HumanIcon } from './commons/icon/HumanIcon';
 import { RulerIcon } from './commons/icon/RulerIcon';
 import { SparkleIcon } from './commons/icon/SparkleIcon';
 import { WrenchIcon } from './commons/icon/WrenchIcons';
-import { useBreakpoint } from '../hooks/breakpoint';
+import { useBreakpoint } from '@/hooks/breakpoint';
 
 export function NavButton({
   to,

gui/src/components/SerialDetectionModal.tsx

@@ -6,9 +6,9 @@ import {
   RpcMessage,
   SerialDeviceT,
 } from 'solarxr-protocol';
-import { useConfig } from '../hooks/config';
-import { useWebsocketAPI } from '../hooks/websocket-api';
-import { useWifiForm, WifiFormData } from '../hooks/wifi-form';
+import { useConfig } from '@/hooks/config';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { useWifiForm, WifiFormData } from '@/hooks/wifi-form';
 import { BaseModal } from './commons/BaseModal';
 import { Button } from './commons/Button';
 import { BulbIcon } from './commons/icon/BulbIcon';

gui/src/components/TopBar.tsx

@@ -6,7 +6,7 @@ import {
   ServerInfosRequestT,
   ServerInfosResponseT,
 } from 'solarxr-protocol';
-import { useWebsocketAPI } from '../hooks/websocket-api';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
 import { CloseIcon } from './commons/icon/CloseIcon';
 import { MaximiseIcon } from './commons/icon/MaximiseIcon';
 import { MinimiseIcon } from './commons/icon/MinimiseIcon';
@@ -15,10 +15,10 @@ import { ProgressBar } from './commons/ProgressBar';
 import { Typography } from './commons/Typography';
 import { DownloadIcon } from './commons/icon/DownloadIcon';
 import { open } from '@tauri-apps/plugin-shell';
-import { GH_REPO, VersionContext, DOCS_SITE } from '../App';
+import { GH_REPO, VersionContext, DOCS_SITE } from '@/App';
 import classNames from 'classnames';
 import { QuestionIcon } from './commons/icon/QuestionIcon';
-import { useBreakpoint, useIsTauri } from '../hooks/breakpoint';
+import { useBreakpoint, useIsTauri } from '@/hooks/breakpoint';
 import { GearIcon } from './commons/icon/GearIcon';
 import { invoke } from '@tauri-apps/api';
 

gui/src/components/TrackingPauseButton.tsx

@@ -1,7 +1,7 @@
 import { useLocalization } from '@fluent/react';
 import { useState } from 'react';
 import { SetPauseTrackingRequestT, RpcMessage } from 'solarxr-protocol';
-import { useWebsocketAPI } from '../hooks/websocket-api';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
 import { BigButton } from './commons/BigButton';
 import { PlayIcon } from './commons/icon/PlayIcon';
 import { PauseIcon } from './commons/icon/PauseIcon';

gui/src/components/VersionUpdateModal.tsx

@@ -5,8 +5,8 @@ import { Button } from './commons/Button';
 import { Typography } from './commons/Typography';
 import { open } from '@tauri-apps/plugin-shell';
 import semver from 'semver';
-import { GH_REPO, VersionContext } from '../App';
-import { error } from '../utils/logging';
+import { GH_REPO, VersionContext } from '@/App';
+import { error } from '@/utils/logging';
 
 export function VersionUpdateModal() {
   const { l10n } = useLocalization();

gui/src/components/WidgetsComponent.tsx

@@ -6,7 +6,7 @@ import { ResetButton } from './home/ResetButton';
 import { OverlayWidget } from './widgets/OverlayWidget';
 import { TipBox } from './commons/TipBox';
 import { DeveloperModeWidget } from './widgets/DeveloperModeWidget';
-import { useConfig } from '../hooks/config';
+import { useConfig } from '@/hooks/config';
 import {
   ResetType,
   RpcMessage,
@@ -15,9 +15,9 @@ import {
   StatusData,
 } from 'solarxr-protocol';
 import { useEffect, useMemo, useState } from 'react';
-import { parseStatusToLocale, useStatusContext } from '../hooks/status-system';
-import { useWebsocketAPI } from '../hooks/websocket-api';
-import { useAppContext } from '../hooks/app';
+import { parseStatusToLocale, useStatusContext } from '@/hooks/status-system';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { useAppContext } from '@/hooks/app';
 import { ClearMountingButton } from './ClearMountingButton';
 
 export function WidgetsComponent() {

gui/src/components/commons/BodyDisplay.tsx

@@ -8,8 +8,8 @@ import {
   useState,
 } from 'react';
 import { BodyPart, TrackerDataT } from 'solarxr-protocol';
-import { FlatDeviceTracker } from '../../hooks/app';
-import { useTracker } from '../../hooks/tracker';
+import { FlatDeviceTracker } from '@/hooks/app';
+import { useTracker } from '@/hooks/tracker';
 import { PersonFrontIcon } from './PersonFrontIcon';
 
 interface SlotDot {

gui/src/components/commons/BodyInteractions.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { ReactNode, useLayoutEffect, useRef, useState } from 'react';
 import { BodyPart } from 'solarxr-protocol';
 import { PersonFrontIcon } from './PersonFrontIcon';
-import { useBreakpoint } from '../../hooks/breakpoint';
+import { useBreakpoint } from '@/hooks/breakpoint';
 
 export function BodyInteractions({
   leftControls,

gui/src/components/commons/BodyPartIcon.tsx

@@ -1,5 +1,5 @@
 import { BodyPart } from 'solarxr-protocol';
-import { useLocaleConfig } from '../../i18n/config';
+import { useLocaleConfig } from '@/i18n/config';
 import { AnkleIcon } from './icon/AnkleIcon';
 import { ChestIcon } from './icon/ChestIcon';
 import { ControllerIcon } from './icon/ControllerIcon';

gui/src/components/commons/Dropdown.tsx

@@ -6,7 +6,7 @@ import {
   UseFormGetValues,
   useWatch,
 } from 'react-hook-form';
-import { a11yClick } from '../../utils/a11y';
+import { a11yClick } from '@/utils/a11y';
 
 export interface DropdownItem {
   label: string;

gui/src/components/commons/LangSelector.tsx

@@ -1,8 +1,8 @@
 import { useLocalization } from '@fluent/react';
 import { useEffect, useMemo, useContext } from 'react';
 import { useForm } from 'react-hook-form';
-import { useConfig } from '../../hooks/config';
-import { langs, LangContext } from '../../i18n/config';
+import { useConfig } from '@/hooks/config';
+import { langs, LangContext } from '@/i18n/config';
 import { Dropdown, DropdownDirection } from './Dropdown';
 
 export function LangSelector({

gui/src/components/home/Home.tsx

@@ -1,19 +1,19 @@
 import { Localized, useLocalization } from '@fluent/react';
 import { NavLink, useNavigate } from 'react-router-dom';
 import { StatusData, TrackerDataT } from 'solarxr-protocol';
-import { useConfig } from '../../hooks/config';
-import { useTrackers } from '../../hooks/tracker';
-import { Typography } from '../commons/Typography';
-import { TrackerCard } from '../tracker/TrackerCard';
-import { TrackersTable } from '../tracker/TrackersTable';
+import { useConfig } from '@/hooks/config';
+import { useTrackers } from '@/hooks/tracker';
+import { Typography } from '@/components/commons/Typography';
+import { TrackerCard } from '@/components/tracker/TrackerCard';
+import { TrackersTable } from '@/components/tracker/TrackersTable';
 import {
   parseStatusToLocale,
   trackerStatusRelated,
   useStatusContext,
-} from '../../hooks/status-system';
+} from '@/hooks/status-system';
 import { useMemo } from 'react';
-import { WarningBox } from '../commons/TipBox';
-import { HeadsetIcon } from '../commons/icon/HeadsetIcon';
+import { WarningBox } from '@/components/commons/TipBox';
+import { HeadsetIcon } from '@/components/commons/icon/HeadsetIcon';
 import classNames from 'classnames';
 
 const DONT_REPEAT_STATUSES = [StatusData.StatusTrackerReset];

gui/src/components/home/ResetButton.tsx

@@ -6,18 +6,18 @@ import {
   RpcMessage,
   StatusData,
 } from 'solarxr-protocol';
-import { useConfig } from '../../hooks/config';
-import { useCountdown } from '../../hooks/countdown';
-import { useWebsocketAPI } from '../../hooks/websocket-api';
-import { playSoundOnResetStarted } from '../../sounds/sounds';
-import { BigButton } from '../commons/BigButton';
-import { Button } from '../commons/Button';
+import { useConfig } from '@/hooks/config';
+import { useCountdown } from '@/hooks/countdown';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { playSoundOnResetStarted } from '@/sounds/sounds';
+import { BigButton } from '@/components/commons/BigButton';
+import { Button } from '@/components/commons/Button';
 import {
   MountingResetIcon,
   YawResetIcon,
   FullResetIcon,
-} from '../commons/icon/ResetIcon';
-import { useStatusContext } from '../../hooks/status-system';
+} from '@/components/commons/icon/ResetIcon';
+import { useStatusContext } from '@/hooks/status-system';
 
 export function ResetButton({
   type,

gui/src/components/onboarding/BodyAssignment.tsx

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import { BodyPart } from 'solarxr-protocol';
-import { FlatDeviceTracker } from '../../hooks/app';
-import { useTrackers } from '../../hooks/tracker';
-import { BodyInteractions } from '../commons/BodyInteractions';
-import { TrackerPartCard } from '../tracker/TrackerPartCard';
+import { FlatDeviceTracker } from '@/hooks/app';
+import { useTrackers } from '@/hooks/tracker';
+import { BodyInteractions } from '@/components/commons/BodyInteractions';
+import { TrackerPartCard } from '@/components/tracker/TrackerPartCard';
 import { BodyPartError } from './pages/trackers-assign/TrackerAssignment';
 
 export const SPINE_PARTS = [

gui/src/components/onboarding/NeckWarningModal.tsx

@@ -1,7 +1,7 @@
-import { Button } from '../commons/Button';
-import { WarningBox } from '../commons/TipBox';
+import { Button } from '@/components/commons/Button';
+import { WarningBox } from '@/components/commons/TipBox';
 import { Localized, useLocalization } from '@fluent/react';
-import { BaseModal } from '../commons/BaseModal';
+import { BaseModal } from '@/components/commons/BaseModal';
 import ReactModal from 'react-modal';
 
 export function NeckWarningModal({

gui/src/components/onboarding/OnboardingContextProvicer.tsx

@@ -1,8 +1,5 @@
 import { ReactNode } from 'react';
-import {
-  OnboardingContextC,
-  useProvideOnboarding,
-} from '../../hooks/onboarding';
+import { OnboardingContextC, useProvideOnboarding } from '@/hooks/onboarding';
 
 export function OnboardingContextProvider({
   children,

gui/src/components/onboarding/OnboardingLayout.tsx

@@ -1,9 +1,9 @@
 import { ReactNode, useState } from 'react';
-import { useLayout } from '../../hooks/layout';
-import { useOnboarding } from '../../hooks/onboarding';
-import { MainLayoutRoute } from '../MainLayout';
-import { TopBar } from '../TopBar';
-import { useBreakpoint } from '../../hooks/breakpoint';
+import { useLayout } from '@/hooks/layout';
+import { useOnboarding } from '@/hooks/onboarding';
+import { MainLayoutRoute } from '@/components/MainLayout';
+import { TopBar } from '@/components/TopBar';
+import { useBreakpoint } from '@/hooks/breakpoint';
 import { SkipSetupButton } from './SkipSetupButton';
 import { SkipSetupWarningModal } from './SkipSetupWarningModal';
 

gui/src/components/onboarding/SkipSetupButton.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { useEffect } from 'react';
-import { EscapeIcon } from '../commons/icon/EscapeIcon';
+import { EscapeIcon } from '@/components/commons/icon/EscapeIcon';
 
 export function SkipSetupButton({
   modalVisible,

gui/src/components/onboarding/SkipSetupWarningModal.tsx

@@ -1,7 +1,7 @@
-import { Button } from '../commons/Button';
-import { WarningBox } from '../commons/TipBox';
+import { Button } from '@/components/commons/Button';
+import { WarningBox } from '@/components/commons/TipBox';
 import { Localized, useLocalization } from '@fluent/react';
-import { BaseModal } from '../commons/BaseModal';
+import { BaseModal } from '@/components/commons/BaseModal';
 import ReactModal from 'react-modal';
 import { useNavigate } from 'react-router-dom';
 

gui/src/components/onboarding/StepperSlider.tsx

@@ -7,9 +7,9 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useElemSize } from '../../hooks/layout';
-import { CheckIcon } from '../commons/icon/CheckIcon';
-import { Typography } from '../commons/Typography';
+import { useElemSize } from '@/hooks/layout';
+import { CheckIcon } from '@/components/commons/icon/CheckIcon';
+import { Typography } from '@/components/commons/Typography';
 
 type StepComponentType = FC<{
   nextStep: () => void;

gui/src/components/onboarding/pages/CalibrationTutorial.tsx

@@ -1,13 +1,13 @@
 import { Localized, useLocalization } from '@fluent/react';
-import { useOnboarding } from '../../../hooks/onboarding';
-import { Button } from '../../commons/Button';
-import { Typography } from '../../commons/Typography';
+import { useOnboarding } from '@/hooks/onboarding';
+import { Button } from '@/components/commons/Button';
+import { Typography } from '@/components/commons/Typography';
 import { useMemo, useState } from 'react';
-import { ProgressBar } from '../../commons/ProgressBar';
-import { LoaderIcon, SlimeState } from '../../commons/icon/LoaderIcon';
-import { useCountdown } from '../../../hooks/countdown';
+import { ProgressBar } from '@/components/commons/ProgressBar';
+import { LoaderIcon, SlimeState } from '@/components/commons/icon/LoaderIcon';
+import { useCountdown } from '@/hooks/countdown';
 import classNames from 'classnames';
-import { TaybolIcon } from '../../commons/icon/TaybolIcon';
+import { TaybolIcon } from '@/components/commons/icon/TaybolIcon';
 
 export enum CalibrationStatus {
   SUCCESS,