feat: moved to vite build tool

.gitignore

@@ -1,25 +1,5 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-.env
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
+node_modules
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+dist
+dist-ssr
+*.local

README.md

@@ -1 +1,3 @@
+## Edcut client
+
 ...

index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Learn management system." />
+    <title>Application</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package.json

@@ -1,67 +1,46 @@
 {
   "name": "educt-client",
   "version": "0.1.0",
-  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
+    "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\""
+  },
   "dependencies": {
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "@chakra-ui/icons": "^1.0.15",
     "@chakra-ui/react": "^1.0.0",
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
     "@hookform/resolvers": "^2.8.0",
-    "@testing-library/jest-dom": "^5.9.0",
-    "@testing-library/react": "^10.2.1",
-    "@testing-library/user-event": "^12.0.2",
-    "@types/jest": "^25.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react-dom": "^16.9.0",
     "axios": "^0.21.1",
     "framer-motion": "^4.0.0",
     "js-cookie": "^3.0.0",
     "mobx": "^6.3.2",
     "mobx-react": "^7.2.0",
     "qs": "^6.10.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "react-error-boundary": "^3.1.3",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.12.2",
     "react-icons": "^3.11.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
-    "typescript": "^3.9.5",
     "validator": "^13.6.0",
-    "web-vitals": "^0.2.2",
     "yup": "^0.32.9"
   },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
-    "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\""
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "@types/js-cookie": "^2.2.7",
     "@types/qs": "^6.9.7",
-    "@types/react": "^16.14.13",
     "@types/react-helmet": "^6.1.2",
     "@types/react-router-dom": "^5.1.8",
-    "@types/validator": "^13.6.3"
+    "@types/validator": "^13.6.3",
+    "@vitejs/plugin-react": "^1.0.0",
+    "typescript": "^4.3.2",
+    "vite": "^2.6.4"
   }
 }

public/index.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Learn management system" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
-    <title>Application</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>

public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

src/App.tsx

@@ -4,29 +4,29 @@ import { Router, Switch } from 'react-router-dom';
 /**
  * Types
  */
-import { UserRoleEnum } from 'enums';
+import { UserRoleEnum } from '@educt/enums';
 
 /**
  * Hooks
  */
-import { useRootStore } from 'hooks/useRootStore';
+import { useRootStore } from '@educt/hooks/useRootStore';
 
 /**
  * Components
  */
-import PrivateRoute from 'components/PrivateRoute';
-import PublicRoute from 'components/PublicRoute';
+import PrivateRoute from '@educt/components/PrivateRoute';
+import PublicRoute from '@educt/components/PublicRoute';
 
 /**
  * Pages
  */
-import MainPage from 'pages/main';
-import CoursesPage from 'pages/courses';
-import MessagesPage from 'pages/messages';
-import ProfilePage from 'pages/profile';
-import UsersPage from 'pages/users';
-import AuthPage from 'pages/auth';
-import NotFoundPage from 'pages/404';
+import MainPage from '@educt/pages/main';
+import CoursesPage from '@educt/pages/courses';
+import MessagesPage from '@educt/pages/messages';
+import ProfilePage from '@educt/pages/profile';
+import UsersPage from '@educt/pages/users';
+import AuthPage from '@educt/pages/auth';
+import NotFoundPage from '@educt/pages/404';
 
 const App = () => {
   const {

src/components/CourseStatusBadge/CourseStatusBadge.tsx

@@ -1,5 +1,5 @@
 import { Badge } from '@chakra-ui/layout';
-import { CourseStatusEnum } from 'enums';
+import { CourseStatusEnum } from '@educt/enums';
 import React from 'react';
 
 type CourseStatusBadgeProps = {

src/components/ErrorFallback.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Cookies from 'js-cookie';
 import { useToast, Flex, Box, Heading, Text } from '@chakra-ui/react';
 import { MdError } from 'react-icons/md';
-import { useRootStore } from 'hooks/useRootStore';
+import { useRootStore } from '@educt/hooks/useRootStore';
 
 const ErrorFallback: React.FC<{ error: any }> = props => {
   const { userStore, authStore } = useRootStore();

src/components/Header/Header.tsx

@@ -1,12 +1,12 @@
-import config from 'config';
+import config from '@educt/config';
 import React from 'react';
 import { observer } from 'mobx-react';
-import { useRootStore } from 'hooks/useRootStore';
+import { useRootStore } from '@educt/hooks/useRootStore';
 import { Flex, Box, Heading, useColorMode } from '@chakra-ui/react';
 import UserInfo from './UserInfo';
 import UserNotifications from './UserNotifications';
-import NavMobile from 'components/Nav/Mobile';
-import ColorModeSwitcher from 'components/ColorModeSwitcher';
+import NavMobile from '@educt/components/Nav/Mobile';
+import ColorModeSwitcher from '@educt/components/ColorModeSwitcher';
 import { MdSchool } from 'react-icons/md';
 
 const Header: React.FC = () => {

src/components/Header/UserInfo.tsx

@@ -15,10 +15,10 @@ import {
 } from '@chakra-ui/react';
 import { MdSettings, MdExitToApp } from 'react-icons/md';
 import { observer } from 'mobx-react';
-import { useRootStore } from 'hooks/useRootStore';
+import { useRootStore } from '@educt/hooks/useRootStore';
 import { Link } from 'react-router-dom';
-import UserBadge from 'components/UserBadge';
-import useLogoutQuery from 'hooks/useLogoutQuery';
+import UserBadge from '@educt/components/UserBadge';
+import useLogoutQuery from '@educt/hooks/useLogoutQuery';
 
 const UserInfo: React.FC = () => {
   const { userStore } = useRootStore();

src/components/Header/UserNotifications.tsx

@@ -3,7 +3,7 @@ import { Box } from '@chakra-ui/layout';
 import { Skeleton } from '@chakra-ui/skeleton';
 import { Button } from '@chakra-ui/button';
 import { MdNotifications } from 'react-icons/md';
-import { useRootStore } from 'hooks/useRootStore';
+import { useRootStore } from '@educt/hooks/useRootStore';
 import { observer } from 'mobx-react';
 
 const UserNotifications: React.FC = () => {

src/components/Layout/Layout.tsx

@@ -2,25 +2,25 @@ import React, { useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { Redirect } from 'react-router';
 import { useErrorHandler } from 'react-error-boundary';
-import { userContainRoles } from 'helpers';
+import { userContainRoles } from '@educt/helpers';
 import { Flex, Box } from '@chakra-ui/react';
 
 /**
  * Types
  */
-import { UserRoleEnum } from 'enums';
+import { UserRoleEnum } from '@educt/enums';
 
 /**
  * Components
  */
-import LoadingPage from 'components/LoadingPage';
-import Header from 'components/Header';
-import NavDesktop from 'components/Nav/Desktop';
+import LoadingPage from '@educt/components/LoadingPage';
+import Header from '@educt/components/Header';
+import NavDesktop from '@educt/components/Nav/Desktop';
 
 /**
  * Hooks
  */
-import { useRootStore } from 'hooks/useRootStore';
+import { useRootStore } from '@educt/hooks/useRootStore';
 
 type LayoutPropsType = { roles: UserRoleEnum[] | undefined };
 

src/components/Nav/Desktop/index.tsx

@@ -1,8 +1,8 @@
-import config from 'config';
+import config from '@educt/config';
 import React from 'react';
 import { observer } from 'mobx-react';
 import { Flex, Box, useColorMode } from '@chakra-ui/react';
-import { useRootStore } from 'hooks/useRootStore';
+import { useRootStore } from '@educt/hooks/useRootStore';
 import NavList from '../NavList';
 
 /**

src/components/Nav/Mobile/index.tsx

@@ -2,15 +2,15 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import { MdExitToApp } from 'react-icons/md';
 import { Link } from 'react-router-dom';
-import { useRootStore } from 'hooks/useRootStore';
+import { useRootStore } from '@educt/hooks/useRootStore';
 import { Avatar } from '@chakra-ui/avatar';
 import { Flex, Box, Text } from '@chakra-ui/layout';
 import { Drawer, DrawerOverlay, DrawerContent, DrawerBody } from '@chakra-ui/modal';
 import { HamburgerIcon } from '@chakra-ui/icons';
 import { useDisclosure, IconButton, useColorMode, Skeleton } from '@chakra-ui/react';
 import NavList from '../NavList';
-import config from 'config';
-import useLogoutQuery from 'hooks/useLogoutQuery';
+import config from '@educt/config';
+import useLogoutQuery from '@educt/hooks/useLogoutQuery';
 
 const NavMobile: React.FC = () => {
   const {

src/components/Nav/NavLink.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import { Box, useColorMode } from '@chakra-ui/react';
-import type { LinkType } from 'types';
-import { useRootStore } from 'hooks/useRootStore';
-import { userContainRoles } from 'helpers';
+import type { LinkType } from '@educt/types';
+import { useRootStore } from '@educt/hooks/useRootStore';
+import { userContainRoles } from '@educt/helpers';
 
 type NavLinkPropsType = {
   link: LinkType;

src/components/Nav/NavList.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { observer } from 'mobx-react';
 import { useHistory } from 'react-router-dom';
-import { LinkType } from 'types';
+import { LinkType } from '@educt/types';
 import NavLink from './NavLink';
 
 type NavListPropsType = {

src/components/PrivateRoute/PrivateRoute.tsx

@@ -1,14 +1,14 @@
-import config from 'config';
+import config from '@educt/config';
 import React from 'react';
 import Helmet from 'react-helmet';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Route, Redirect } from 'react-router-dom';
 import { RouteProps } from 'react-router';
-import { IPageProps } from 'interfaces';
-import { UserRoleEnum } from 'enums';
-import { useRootStore } from 'hooks/useRootStore';
-import Layout from 'components/Layout';
-import ErrorFallback from 'components/ErrorFallback';
+import { IPageProps } from '@educt/interfaces';
+import { UserRoleEnum } from '@educt/enums';
+import { useRootStore } from '@educt/hooks/useRootStore';
+import Layout from '@educt/components/Layout';
+import ErrorFallback from '@educt/components/ErrorFallback';
 
 export interface IPrivateRouteProps extends RouteProps {
   component: React.FC<IPageProps>;

src/components/PublicRoute/PublicRoute.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Route } from 'react-router-dom';
 import { RouteProps } from 'react-router';
-import { IPageProps } from 'interfaces';
-import ErrorFallback from 'components/ErrorFallback';
+import { IPageProps } from '@educt/interfaces';
+import ErrorFallback from '@educt/components/ErrorFallback';
 
 export interface IPublicRouteProps extends RouteProps {
   component: React.FC<IPageProps>;

src/components/UserBadge/UserBadge.tsx

@@ -1,8 +1,8 @@
 import { Badge } from '@chakra-ui/react';
 import React from 'react';
-import { UserRoleEnum } from 'enums';
-import { IUserRole } from 'interfaces';
-import { userHasRoles } from 'helpers';
+import { UserRoleEnum } from '@educt/enums';
+import { IUserRole } from '@educt/interfaces';
+import { userHasRoles } from '@educt/helpers';
 
 /**
  * Returns the badge for user based on roles

src/config.ts

@@ -1,4 +1,4 @@
-import { UserRoleEnum } from 'enums';
+import { UserRoleEnum } from '@educt/enums';
 import { MdAccountCircle, MdCollectionsBookmark, MdGroup, MdHome, MdMessage } from 'react-icons/md';
 import { IAppConfig } from './interfaces';
 

src/contexts/index.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { CoursesPageContextType, ProfilePageContextType, UsersPageContextType } from 'types';
+import { CoursesPageContextType, ProfilePageContextType, UsersPageContextType } from '@educt/types';
 import RootStore from '../stores/RootStore';
 
 export const StoreContext = createContext<RootStore | undefined>(undefined);

src/favicon.svg

@@ -0,0 +1,2 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#4299E1"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3zm6.82 6L12 12.72 5.18 9 12 5.28 18.82 9zM17 15.99l-5 2.73-5-2.73v-3.72L12 15l5-2.73v3.72z"/></svg>

src/helpers/index.ts

@@ -1,5 +1,5 @@
-import { UserRoleEnum } from 'enums';
-import { IUserRole } from 'interfaces';
+import { UserRoleEnum } from '@educt/enums';
+import { IUserRole } from '@educt/interfaces';
 
 export function userHasRoles(userRoles: IUserRole[], roles: UserRoleEnum[]): boolean {
   for (let i = 0; i < roles.length; i += 1) {

src/hooks/useLoginQuery.ts

@@ -1,5 +1,5 @@
 import { useToast } from '@chakra-ui/react';
-import { IApiRespose, IToken } from 'interfaces';
+import { IApiRespose, IToken } from '@educt/interfaces';
 import { useState } from 'react';
 import { useErrorHandler } from 'react-error-boundary';
 import useIsMountedRef from './useIsMountedRef';

src/hooks/useLogoutQuery.ts

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useToast } from '@chakra-ui/react';
 import { useHistory } from 'react-router-dom';
 import { useRootStore } from './useRootStore';
-import { IApiRespose } from 'interfaces';
+import { IApiRespose } from '@educt/interfaces';
 import { useErrorHandler } from 'react-error-boundary';
 import useIsMountedRef from './useIsMountedRef';
 

src/hooks/useUpdateUserContactsQuery.ts

@@ -1,5 +1,5 @@
 import { useToast } from '@chakra-ui/react';
-import { IApiRespose, IUserContacts } from 'interfaces';
+import { IApiRespose, IUserContacts } from '@educt/interfaces';
 import { useState } from 'react';
 import { useErrorHandler } from 'react-error-boundary';
 import useIsMountedRef from './useIsMountedRef';

src/hooks/useUpdateUserEmailQuery.ts.ts

@@ -1,5 +1,5 @@
 import { useToast } from '@chakra-ui/toast';
-import { IApiRespose } from 'interfaces';
+import { IApiRespose } from '@educt/interfaces';
 import { useState } from 'react';
 import { useErrorHandler } from 'react-error-boundary';
 import useIsMountedRef from './useIsMountedRef';

src/index.tsx

@@ -3,7 +3,6 @@ import * as React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import { RootStoreProvider } from './providers';
-import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <>
@@ -16,8 +15,3 @@ ReactDOM.render(
   </>,
   document.getElementById('root')
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/interfaces/index.ts

@@ -1,5 +1,5 @@
 import type { RouteComponentProps } from 'react-router-dom';
-import { LinkType } from 'types';
+import { LinkType } from '@educt/types';
 import { CourseStatusEnum, UserRoleEnum } from '../enums';
 
 export interface IAppConfig {

src/pages/auth/components/AuthForm/AuthForm.tsx

@@ -14,7 +14,7 @@ import {
 } from '@chakra-ui/react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-import useLoginQuery from 'hooks/useLoginQuery';
+import useLoginQuery from '@educt/hooks/useLoginQuery';
 import LoginSchema from './AuthForm.validator';
 
 type AuthInputType = {

src/pages/auth/components/AuthForm/AuthForm.validator.ts

@@ -1,4 +1,4 @@
-import yup from 'schema';
+import yup from '@educt/schema';
 
 const LoginSchema = yup.object().shape({
   login: yup.string().required('Login is required'),

src/pages/auth/index.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import Helmet from 'react-helmet';
 import { Redirect } from 'react-router-dom';
 import { observer } from 'mobx-react';
-import { IPageProps } from 'interfaces';
+import { IPageProps } from '@educt/interfaces';
 import { Flex } from '@chakra-ui/react';
-import { useRootStore } from 'hooks/useRootStore';
+import { useRootStore } from '@educt/hooks/useRootStore';
 
 import AuthForm from './components/AuthForm';
 

src/pages/courses/components/CategoryList/CategoryItem.tsx

@@ -4,12 +4,12 @@ import { Tag, TagLabel } from '@chakra-ui/react';
 /**
  * Types
  */
-import { ICategory } from 'interfaces';
+import { ICategory } from '@educt/interfaces';
 
 /**
  * Contexts
  */
-import { CoursesPageContext } from 'contexts';
+import { CoursesPageContext } from '@educt/contexts';
 
 type CategoryItemProps = {
   category: ICategory;

src/pages/courses/components/CategoryList/CategoryList.tsx

@@ -1,15 +1,15 @@
 import React, { useContext, useEffect } from 'react';
 import { Box, Flex, Tag, TagLabel } from '@chakra-ui/react';
-import { CoursesPageContext } from 'contexts';
+import { CoursesPageContext } from '@educt/contexts';
 import CategoryItem from './CategoryItem';
-import { ICategory } from 'interfaces';
+import { ICategory } from '@educt/interfaces';
 import CategoryListLoading from './CategoryListLoading';
 
 /**
  * Hooks
  */
 import { useErrorHandler } from 'react-error-boundary';
-import { useRootStore } from 'hooks/useRootStore';
+import { useRootStore } from '@educt/hooks/useRootStore';
 
 type CategoryListPropsType = {
   categories: ICategory[] | null;

src/pages/courses/components/CourseList/CourseItem.tsx

@@ -21,14 +21,14 @@ import { DeleteIcon, EditIcon } from '@chakra-ui/icons';
 /**
  * Types
  */
-import { ICourse } from 'interfaces';
+import { ICourse } from '@educt/interfaces';
 
 /**
  * Hooks
  */
 import { useColorMode } from '@chakra-ui/color-mode';
-import { useRootStore } from 'hooks/useRootStore';
-import CourseStatusBadge from 'components/CourseStatusBadge';
+import { useRootStore } from '@educt/hooks/useRootStore';
+import CourseStatusBadge from '@educt/components/CourseStatusBadge';
 
 type CourseItemPropsType = {
   course: Omit<ICourse, 'teacher' | 'students' | 'lessons'>;

src/pages/courses/components/CourseList/CourseList.tsx

@@ -4,7 +4,7 @@ import { Box, Grid, Text } from '@chakra-ui/react';
 /**
  * Types
  */
-import { ICourse } from 'interfaces';
+import { ICourse } from '@educt/interfaces';
 
 /**
  * Components
@@ -16,14 +16,14 @@ import DeleteCourseDialog from '../DeleteCourseDialog';
 /**
  * Hooks
  */
-import { useRootStore } from 'hooks/useRootStore';
+import { useRootStore } from '@educt/hooks/useRootStore';
 import { useDisclosure } from '@chakra-ui/hooks';
 
 /**
  * Contexts
  */
-import { CoursesPageContext } from 'contexts';
-import { CourseStatusEnum } from 'enums';
+import { CoursesPageContext } from '@educt/contexts';
+import { CourseStatusEnum } from '@educt/enums';
 
 type CourseListPropsType = {
   courses: Omit<ICourse, 'teacher' | 'students' | 'lessons'>[] | null;

src/pages/courses/components/CourseStatusTabs/CourseStatusTabs.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { Tabs, TabList, Tab } from '@chakra-ui/react';
-import { CoursesPageContext } from 'contexts';
-import { CourseStatusEnum } from 'enums';
+import { CoursesPageContext } from '@educt/contexts';
+import { CourseStatusEnum } from '@educt/enums';
 
 type CourseStatusTabsProps = {};
 
@@ -25,4 +25,4 @@ const CourseStatusTabs: React.FC<CourseStatusTabsProps> = () => {
   );
 };
 
-export default CourseStatusTabs;
+export default React.memo(CourseStatusTabs);

src/pages/courses/components/DeleteCourseDialog/DeleteCourseDialog.tsx

@@ -10,13 +10,17 @@ import {
   useToast,
 } from '@chakra-ui/react';
 
+/**
+ * Contexts
+ */
+import { CoursesPageContext } from '@educt/contexts';
+
 /**
  * Hooks
  */
-import useIsMountedRef from 'hooks/useIsMountedRef';
+import useIsMountedRef from '@educt/hooks/useIsMountedRef';
 import { useErrorHandler } from 'react-error-boundary';
-import { CoursesPageContext } from 'contexts';
-import { useRootStore } from 'hooks/useRootStore';
+import { useRootStore } from '@educt/hooks/useRootStore';
 
 type DeleteCourseDialogProps = {
   onClose: () => void;

src/pages/courses/index.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { Flex, Box, Heading, Text, Button } from '@chakra-ui/react';
 
-import { IPageProps } from 'interfaces';
+import { IPageProps } from '@educt/interfaces';
 import { AddIcon } from '@chakra-ui/icons';
 
 /**
@@ -10,13 +10,13 @@ import { AddIcon } from '@chakra-ui/icons';
  */
 import CourseList from './components/CourseList';
 import CategoryList from './components/CategoryList';
-import LoadingPage from 'components/LoadingPage';
+import LoadingPage from '@educt/components/LoadingPage';
 
 /**
  * Hooks
  */
-import { useRootStore } from 'hooks/useRootStore';
-import { CoursesPageContextProvider } from 'providers';
+import { useRootStore } from '@educt/hooks/useRootStore';
+import { CoursesPageContextProvider } from '@educt/providers';
 import CourseStatusTabs from './components/CourseStatusTabs';
 
 /**
@@ -29,6 +29,10 @@ const CoursesPage: React.FC<IPageProps> = ({ title }) => {
     courseStore,
   } = useRootStore();
 
+  useEffect(() => {
+    console.log('upadate');
+  });
+
   if (me === null) return <LoadingPage />;
 
   return (

src/pages/main/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, Heading, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Grid } from '@chakra-ui/react';
 
-import { IPageProps } from 'interfaces';
+import { IPageProps } from '@educt/interfaces';
 import { observer } from 'mobx-react';
 
 /**

src/pages/messages/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, Heading, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Grid } from '@chakra-ui/react';
 
-import { IPageProps } from 'interfaces';
+import { IPageProps } from '@educt/interfaces';
 
 /**
  * Messages page

src/pages/profile/components/CourseList/CourseItem.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Text, Link, Box, Flex } from '@chakra-ui/layout';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import { MdVideoLibrary, MdGroup, MdThumbUp } from 'react-icons/md';
-import { UserCourseType } from 'interfaces';
+import { UserCourseType } from '@educt/interfaces';
 import { Tag, TagLabel } from '@chakra-ui/react';
 
 type CourseItemPropsType = {

src/pages/profile/components/CourseList/CourseList.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IMe } from 'interfaces';
+import { IMe } from '@educt/interfaces';
 import { Box, Text, Stack, StackDivider } from '@chakra-ui/layout';
 import CourseItem from './CourseItem';
 

src/pages/profile/components/UpdateUserContactsForm/UpdateUserContactsForm.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { MdSave } from 'react-icons/md';
-import { IUserContacts } from 'interfaces';
+import { IUserContacts } from '@educt/interfaces';
 import { Box, Heading, Stack } from '@chakra-ui/layout';
 import { Text, Input, Button } from '@chakra-ui/react';
 import { FormControl, FormHelperText } from '@chakra-ui/form-control';
 import { yupResolver } from '@hookform/resolvers/yup';
-import useUpdateUserContactsQuery from 'hooks/useUpdateUserContactsQuery';
+import useUpdateUserContactsQuery from '@educt/hooks/useUpdateUserContactsQuery';
 import UpdateUserContactsSchema from './UpdateUserContactsForm.validator';
 
 type UpdateUserContactsInputType = {

src/pages/profile/components/UpdateUserContactsForm/UpdateUserContactsForm.validator.ts

@@ -1,4 +1,4 @@
-import yup from 'schema';
+import yup from '@educt/schema';
 
 const UpdateUserContactsSchema = yup.object().shape({
   phone_number: yup

src/pages/profile/components/UserAccountInfo/UserAccountInfo.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { Box, Heading, Stack, Flex, StackDivider, Text, Button } from '@chakra-ui/react';
-import { IUser } from 'interfaces';
-import { ProfilePageContext } from 'contexts';
+import { IUser } from '@educt/interfaces';
+import { ProfilePageContext } from '@educt/contexts';
 
 type UserAccountInfoPropsType = {
   user: IUser;

src/pages/profile/containers/ConfirmEmailContainer/ConfirmEmailContainer.tsx

@@ -2,13 +2,13 @@ import React, { useContext, useEffect, useState } from 'react';
 import { PinInput, PinInputField } from '@chakra-ui/react';
 import { Button } from '@chakra-ui/button';
 import { Box, Flex, Heading, HStack, Text } from '@chakra-ui/layout';
-import { ConfirmEmailContainerDataType } from 'types';
-import useUpdateUserEmailQuery from 'hooks/useUpdateUserEmailQuery.ts';
-import { useRootStore } from 'hooks/useRootStore';
+import { ConfirmEmailContainerDataType } from '@educt/types';
+import useUpdateUserEmailQuery from '@educt/hooks/useUpdateUserEmailQuery.ts';
+import { useRootStore } from '@educt/hooks/useRootStore';
 import { useToast } from '@chakra-ui/toast';
 import { useErrorHandler } from 'react-error-boundary';
-import { ProfilePageContext } from 'contexts';
-import useIsMountedRef from 'hooks/useIsMountedRef';
+import { ProfilePageContext } from '@educt/contexts';
+import useIsMountedRef from '@educt/hooks/useIsMountedRef';
 
 type ConfirmEmailContainerPropsType = {
   data: ConfirmEmailContainerDataType;

src/pages/profile/containers/MainContainer/MainContainer.tsx

@@ -4,15 +4,15 @@ import { Box, Heading, Flex, Avatar, Text, Tabs, TabList, Tab, TabPanels, TabPan
 /**
  * Components
  */
-import UserBadge from 'components/UserBadge';
-import UserAccountInfo from 'pages/profile/components/UserAccountInfo';
-import UpdateUserContactsForm from 'pages/profile/components/UpdateUserContactsForm';
-import CourseList from 'pages/profile/components/CourseList';
+import UserBadge from '@educt/components/UserBadge';
+import UserAccountInfo from '@educt/pages/profile/components/UserAccountInfo';
+import UpdateUserContactsForm from '@educt/pages/profile/components/UpdateUserContactsForm';
+import CourseList from '@educt/pages/profile/components/CourseList';
 
 /**
  * Hooks
  */
-import { useRootStore } from 'hooks/useRootStore';
+import { useRootStore } from '@educt/hooks/useRootStore';
 import { useColorMode } from '@chakra-ui/color-mode';
 
 const MainContainer: React.FC = () => {

src/pages/profile/containers/UpdateEmailContainer/UpdateEmailContainer.tsx

@@ -1,7 +1,7 @@
 import { IconButton } from '@chakra-ui/button';
 import { ChevronLeftIcon } from '@chakra-ui/icons';
 import { Box, Flex, Heading, Text } from '@chakra-ui/layout';
-import { ProfilePageContext } from 'contexts';
+import { ProfilePageContext } from '@educt/contexts';
 import React, { useContext } from 'react';
 import UpdateEmailForm from './UpdateEmailForm';
 

src/pages/profile/containers/UpdateEmailContainer/UpdateEmailForm/UpdateEmailForm.tsx

@@ -3,9 +3,9 @@ import { FormControl, FormHelperText, FormLabel } from '@chakra-ui/form-control'
 import { Input } from '@chakra-ui/input';
 import { Box, Stack } from '@chakra-ui/layout';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { ProfilePageContext } from 'contexts';
-import { useRootStore } from 'hooks/useRootStore';
-import useUpdateUserEmailQuery from 'hooks/useUpdateUserEmailQuery.ts';
+import { ProfilePageContext } from '@educt/contexts';
+import { useRootStore } from '@educt/hooks/useRootStore';
+import useUpdateUserEmailQuery from '@educt/hooks/useUpdateUserEmailQuery.ts';
 import React, { useContext, useEffect, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import UpdateEmailSchema from './UpdateEmailForm.validator';

src/pages/profile/containers/UpdateEmailContainer/UpdateEmailForm/UpdateEmailForm.validator.ts

@@ -1,4 +1,4 @@
-import yup from 'schema';
+import yup from '@educt/schema';
 
 const UpdateEmailSchema = yup.object().shape({
   email: yup.string().required('Email address is required.').email('Please type your email correctly.'),

src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordContainer.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { Box, Heading, Flex, Text, IconButton } from '@chakra-ui/react';
 import { ChevronLeftIcon } from '@chakra-ui/icons';
-import { ProfilePageContext } from 'contexts';
+import { ProfilePageContext } from '@educt/contexts';
 import UpdatePasswordForm from './UpdatePasswordForm';
 
 const UpdatePasswordContainer: React.FC = () => {

src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordForm/UpdatePasswordForm.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState } from 'react';
-import { useRootStore } from 'hooks/useRootStore';
+import { useRootStore } from '@educt/hooks/useRootStore';
 import { Box, Stack } from '@chakra-ui/layout';
 import { FormControl, FormLabel, FormHelperText } from '@chakra-ui/form-control';
 import { Button } from '@chakra-ui/button';
@@ -9,8 +9,8 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import UpdatePasswordSchema from './UpdatePasswordForm.validator';
 import { useToast } from '@chakra-ui/toast';
 import { useErrorHandler } from 'react-error-boundary';
-import { ProfilePageContext } from 'contexts';
-import useIsMountedRef from 'hooks/useIsMountedRef';
+import { ProfilePageContext } from '@educt/contexts';
+import useIsMountedRef from '@educt/hooks/useIsMountedRef';
 
 type UpdatePasswordInputType = {
   old_password: string;

src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordForm/UpdatePasswordForm.validator.ts

@@ -1,4 +1,4 @@
-import yup from 'schema';
+import yup from '@educt/schema';
 
 const UpdatePasswordSchema = yup.object().shape({
   old_password: yup.string().required('Old password is required'),

src/pages/profile/index.tsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
 /**
  * Types
  */
-import { IPageProps } from 'interfaces';
+import { IPageProps } from '@educt/interfaces';
 
 /**
  *  Components
@@ -21,18 +21,18 @@ import ConfirmEmailContainer from './containers/ConfirmEmailContainer';
 /**
  * Hooks
  */
-import { useRootStore } from 'hooks/useRootStore';
+import { useRootStore } from '@educt/hooks/useRootStore';
 import { useHistory } from 'react-router-dom';
 
 /**
  * Contexts
  */
-import { ProfilePageContext } from 'contexts';
+import { ProfilePageContext } from '@educt/contexts';
 
 /**
  * Providers
  */
-import { ProfilePageContextProvider } from 'providers';
+import { ProfilePageContextProvider } from '@educt/providers';
 import MainContainer from './containers/MainContainer';
 
 /**

src/pages/users/components/CreateUserForm/CreateUserForm.tsx

@@ -26,19 +26,19 @@ import CreateUserSchema from './CreateUserModal.validator';
 /**
  * Types
  */
-import { IMe } from 'interfaces';
-import { UserRoleEnum } from 'enums';
+import { IMe } from '@educt/interfaces';
+import { UserRoleEnum } from '@educt/enums';
 
 /**
  * Hooks
  */
-import useIsMountedRef from 'hooks/useIsMountedRef';
+import useIsMountedRef from '@educt/hooks/useIsMountedRef';
 import { useDisclosure } from '@chakra-ui/hooks';
 import { useForm } from 'react-hook-form';
-import { useRootStore } from 'hooks/useRootStore';
+import { useRootStore } from '@educt/hooks/useRootStore';
 import { useErrorHandler } from 'react-error-boundary';
 import { useToast } from '@chakra-ui/react';
-import { UsersPageContext } from 'contexts';
+import { UsersPageContext } from '@educt/contexts';
 
 type CreateUserModalPropsType = {
   me: IMe;

src/pages/users/components/CreateUserForm/CreateUserModal.validator.ts

@@ -1,5 +1,5 @@
-import yup from 'schema';
-import { UserRoleEnum } from 'enums';
+import yup from '@educt/schema';
+import { UserRoleEnum } from '@educt/enums';
 
 const CreateUserSchema = yup.object().shape({
   first_name: yup.string().required('First field name is required'),

src/pages/users/components/DeleteUserDialog/DeleteUserDialog.tsx

@@ -8,13 +8,13 @@ import {
   AlertDialogOverlay,
   Button,
 } from '@chakra-ui/react';
-import { UsersPageContext } from 'contexts';
+import { UsersPageContext } from '@educt/contexts';
 
 /**
  * Hooks
  */
-import { useRootStore } from 'hooks/useRootStore';
-import useIsMountedRef from 'hooks/useIsMountedRef';
+import { useRootStore } from '@educt/hooks/useRootStore';
+import useIsMountedRef from '@educt/hooks/useIsMountedRef';
 import { useToast } from '@chakra-ui/react';
 import { useErrorHandler } from 'react-error-boundary';
 

src/pages/users/components/EditUserForm/EditUserForm.tsx

@@ -24,21 +24,21 @@ import UpdateUserSchema from './EditUserForm.validator';
 /**
  * Types
  */
-import { UserRoleEnum } from 'enums';
+import { UserRoleEnum } from '@educt/enums';
 
 /**
  * Contexts
  */
-import { UsersPageContext } from 'contexts';
+import { UsersPageContext } from '@educt/contexts';
 
 /**
  * Hooks
  */
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { useRootStore } from 'hooks/useRootStore';
+import { useRootStore } from '@educt/hooks/useRootStore';
 import { useErrorHandler } from 'react-error-boundary';
 import { useToast } from '@chakra-ui/react';
-import useIsMountedRef from 'hooks/useIsMountedRef';
+import useIsMountedRef from '@educt/hooks/useIsMountedRef';
 
 type UpdateUserInputType = {
   first_name: string;

src/pages/users/components/EditUserForm/EditUserForm.validator.ts

@@ -1,4 +1,4 @@
-import yup from 'schema';
+import yup from '@educt/schema';
 // import { UserRoleEnum } from 'enums';
 
 const UpdateUserSchema = yup.object().shape({

src/pages/users/components/UserList/UserItem.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
-import * as helpres from 'helpers';
+import * as helpres from '@educt/helpers';
 import { Box, Flex, Avatar, Text, IconButton, Link } from '@chakra-ui/react';
 import { Link as ReactRouterLink } from 'react-router-dom';
-import UserBadge from 'components/UserBadge';
+import UserBadge from '@educt/components/UserBadge';
 
 /**
  * Types
  */
-import { IUser } from 'interfaces';
-import { UserRoleEnum } from 'enums';
+import { IUser } from '@educt/interfaces';
+import { UserRoleEnum } from '@educt/enums';
 
 /**
  * Hooks
  */
-import { useRootStore } from 'hooks/useRootStore';
+import { useRootStore } from '@educt/hooks/useRootStore';
 import { DeleteIcon, EditIcon } from '@chakra-ui/icons';
 
 type UserItemPropsType = {

src/pages/users/components/UserList/UserList.tsx

@@ -12,19 +12,19 @@ import EditUserForm from '../EditUserForm';
 /**
  * Types
  */
-import { IPaginationMeta, IUser } from 'interfaces';
-import { UsersPageContextType } from 'types';
+import { IPaginationMeta, IUser } from '@educt/interfaces';
+import { UsersPageContextType } from '@educt/types';
 
 /**
  * Contexts
  */
-import { UsersPageContext } from 'contexts';
+import { UsersPageContext } from '@educt/contexts';
 
 /**
  * Hooks
  */
 import { useContext } from 'react';
-import { useRootStore } from 'hooks/useRootStore';
+import { useRootStore } from '@educt/hooks/useRootStore';
 import { useDisclosure } from '@chakra-ui/hooks';
 import { useErrorHandler } from 'react-error-boundary';
 import DeleteUserDialog from '../DeleteUserDialog';

src/pages/users/components/UserSearch/UserSearch.tsx

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react';
 import { Flex, Select, Input, InputGroup, InputLeftElement } from '@chakra-ui/react';
 import { SearchIcon } from '@chakra-ui/icons';
-import { useRootStore } from 'hooks/useRootStore';
-import { UserRoleEnum } from 'enums';
+import { useRootStore } from '@educt/hooks/useRootStore';
+import { UserRoleEnum } from '@educt/enums';
 import { useErrorHandler } from 'react-error-boundary';
-import { UsersPageContext } from 'contexts';
-import { UsersPageContextType } from 'types';
+import { UsersPageContext } from '@educt/contexts';
+import { UsersPageContextType } from '@educt/types';
 
 type SelectRoleStateType = UserRoleEnum | 'any';
 

src/pages/users/index.tsx

@@ -5,7 +5,7 @@ import { Box, Flex, Heading, Text } from '@chakra-ui/react';
 /**
  * Types
  */
-import { IPageProps } from 'interfaces';
+import { IPageProps } from '@educt/interfaces';
 
 /**
  * Components
@@ -17,7 +17,7 @@ import LoadingPage from './components/LoadingPage';
 /**
  * Hooks
  */
-import { useRootStore } from 'hooks/useRootStore';
+import { useRootStore } from '@educt/hooks/useRootStore';
 import { useErrorHandler } from 'react-error-boundary';
 import { useLocation } from 'react-router';
 
@@ -25,7 +25,7 @@ import { useLocation } from 'react-router';
  * Context
  */
 import CreateUserForm from './components/CreateUserForm';
-import { UsersPageContextProvider } from 'providers';
+import { UsersPageContextProvider } from '@educt/providers';
 
 /**
  * Users Page

src/providers/index.tsx

@@ -1,9 +1,14 @@
 import React, { useState, ReactNode } from 'react';
-import { CoursesPageContext, ProfilePageContext, StoreContext, UsersPageContext } from 'contexts';
-import { ProfilePageDataType, ProfilePageStatusType, SearchingRoleStateType } from 'types';
-import RootStore from 'stores/RootStore';
-import { ICategory, ICourse, IUser } from 'interfaces';
-import { CourseStatusEnum } from 'enums';
+import { CoursesPageContext, ProfilePageContext, StoreContext, UsersPageContext } from '@educt/contexts';
+import {
+  CoursesPageContextType,
+  ProfilePageDataType,
+  ProfilePageStatusType,
+  SearchingRoleStateType,
+} from '@educt/types';
+import RootStore from '@educt/stores/RootStore';
+import { ICategory, ICourse, IUser } from '@educt/interfaces';
+import { CourseStatusEnum } from '@educt/enums';
 
 /**
  * Root store context provider
@@ -66,18 +71,17 @@ export const CoursesPageContextProvider: React.FC = ({ children }) => {
   const [courseStatus, setCourseStatus] = useState<CourseStatusEnum | undefined>(undefined);
   const [deletingCourse, setDeletingCourse] = useState<Pick<ICourse, 'id' | 'title'> | undefined>(undefined);
 
-  return (
-    <CoursesPageContext.Provider
-      value={{
-        selectedCategory,
-        setSelectedCategory,
+  const context = React.useMemo(
+    () => ({
       courseStatus,
       setCourseStatus,
+      selectedCategory,
+      setSelectedCategory,
       deletingCourse,
       setDeletingCourse,
-      }}
-    >
-      {children}
-    </CoursesPageContext.Provider>
+    }),
+    [courseStatus, setCourseStatus, selectedCategory, setSelectedCategory, deletingCourse, setDeletingCourse]
   );
+
+  return <CoursesPageContext.Provider value={context}>{children}</CoursesPageContext.Provider>;
 };

src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

src/services/ApiService.ts

@@ -1,5 +1,5 @@
 import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
-import RootStore from 'stores/RootStore';
+import RootStore from '@educt/stores/RootStore';
 
 export default class ApiService {
   public root: RootStore;

src/services/AuthService.ts

@@ -1,4 +1,4 @@
-import { IApiRespose, IToken } from 'interfaces';
+import { IApiRespose, IToken } from '@educt/interfaces';
 import { AxiosInstance } from 'axios';
 
 export default class AuthService {

src/services/CategoryService.ts

@@ -1,5 +1,5 @@
 import { AxiosInstance } from 'axios';
-import { IApiRespose, ICategory } from 'interfaces';
+import { IApiRespose, ICategory } from '@educt/interfaces';
 
 export default class CategoryService {
   public api: AxiosInstance;

src/services/CourseService.ts

@@ -1,6 +1,6 @@
 import { AxiosInstance } from 'axios';
-import { IApiRespose, ICourse } from 'interfaces';
-import { FetchCoursesParams } from 'types';
+import { IApiRespose, ICourse } from '@educt/interfaces';
+import { FetchCoursesParams } from '@educt/types';
 
 export class CourseService {
   public api: AxiosInstance;

src/services/UserService.ts

@@ -1,7 +1,7 @@
 import { AxiosInstance } from 'axios';
-import { IApiRespose, IMe, IUser, IUserContacts } from 'interfaces';
-import * as helpers from 'helpers';
-import { CreateUserParamsType, FetchUsersParamsType, UpdateUserParamsType } from 'types';
+import { IApiRespose, IMe, IUser, IUserContacts } from '@educt/interfaces';
+import * as helpers from '@educt/helpers';
+import { CreateUserParamsType, FetchUsersParamsType, UpdateUserParamsType } from '@educt/types';
 
 export default class UserService {
   public api: AxiosInstance;

src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

src/stores/AuthStore.ts

@@ -5,7 +5,7 @@ import Cookies from 'js-cookie';
 /**
  * Services
  */
-import AuthService from 'services/AuthService';
+import AuthService from '@educt/services/AuthService';
 
 /**
  * Stores

src/stores/CategoryStore.ts

@@ -4,12 +4,12 @@ import { makeAutoObservable, runInAction } from 'mobx';
 /**
  * Types
  */
-import { ICategory } from 'interfaces';
+import { ICategory } from '@educt/interfaces';
 
 /**
  * Services
  */
-import CategoryService from 'services/CategoryService';
+import CategoryService from '@educt/services/CategoryService';
 
 /**
  * Stores

src/stores/CourseStore.ts

@@ -4,13 +4,13 @@ import { makeAutoObservable, runInAction } from 'mobx';
 /**
  * Types
  */
-import { FetchCoursesParams } from 'types';
-import { ICourse } from 'interfaces';
+import { FetchCoursesParams } from '@educt/types';
+import { ICourse } from '@educt/interfaces';
 
 /**
  * Services
  */
-import { CourseService } from 'services/CourseService';
+import { CourseService } from '@educt/services/CourseService';
 
 /**
  * Stores

src/stores/RootStore.ts

@@ -1,10 +1,10 @@
-import apiConfig from 'api.config';
+import apiConfig from '@educt/api.config';
 import { makeAutoObservable } from 'mobx';
 
 /**
  * Services
  */
-import ApiService from 'services/ApiService';
+import ApiService from '@educt/services/ApiService';
 
 /**
  * Stores

src/stores/UIStore.ts

@@ -4,7 +4,7 @@ import { createBrowserHistory } from 'history';
 /**
  * Types
  */
-import { IWindowDimensions } from 'interfaces';
+import { IWindowDimensions } from '@educt/interfaces';
 
 /**
  * Stores

src/stores/UserStore.ts

@@ -1,18 +1,18 @@
 import { AxiosInstance } from 'axios';
 import { makeAutoObservable, runInAction } from 'mobx';
-import * as helpers from 'helpers';
+import * as helpers from '@educt/helpers';
 
 /**
  * Types
  */
-import { CreateUserParamsType, FetchUsersParamsType, UpdateUserParamsType } from 'types';
-import { IUser, IUserContacts, IMe, IPaginationMeta } from 'interfaces';
-import { UserRoleEnum } from 'enums';
+import { CreateUserParamsType, FetchUsersParamsType, UpdateUserParamsType } from '@educt/types';
+import { IUser, IUserContacts, IMe, IPaginationMeta } from '@educt/interfaces';
+import { UserRoleEnum } from '@educt/enums';
 
 /**
  * Services
  */
-import UserService from 'services/UserService';
+import UserService from '@educt/services/UserService';
 
 /**
  * Stores

src/test-utils.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { render, RenderOptions } from '@testing-library/react';
-import { ChakraProvider, theme } from '@chakra-ui/react';
-
-const AllProviders = ({ children }: { children?: React.ReactNode }) => (
-  <ChakraProvider theme={theme}>{children}</ChakraProvider>
-);
-
-const customRender = (ui: React.ReactElement, options?: RenderOptions) =>
-  render(ui, { wrapper: AllProviders, ...options });
-
-export { customRender as render };

src/types/index.d.ts

@@ -1,5 +1,5 @@
-import { CourseStatusEnum, UserRoleEnum } from 'enums';
-import { ICategory, ICourse, IUser } from 'interfaces';
+import { CourseStatusEnum, UserRoleEnum } from '@educt/enums';
+import { ICategory, ICourse, IUser } from '@educt/interfaces';
 import React from 'react';
 import { IconType } from 'react-icons/lib';
 

tsconfig.json

@@ -1,23 +1,24 @@
 {
   "compilerOptions": {
-    "baseUrl": "src",
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
+    "baseUrl": ".",
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": false,
+    "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react",
-    "typeRoots": ["./types", "./node_modules/@types"]
-  },
-  "include": ["src"],
-  "exclude": ["types"]
+    "types": ["vite/client"],
+    "paths": {
+      "@educt/*": ["src/*"]
+    }
+  }
 }

vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: [{ find: '@educt', replacement: path.resolve(__dirname, 'src') }],
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+  },
+});