Fix/vite tsconfig setup (#404)

* Use "create-vite"s tsconfig files setup

The previous tsconfig file caused issues with vite throwing "missing identifiers of modules" errors

* Remove unused React imports

Starting with React 17 the nex JSX transform is being used

src/components/ExtensionCard.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Button from '@mui/material/Button';

src/components/MangaCard.tsx

@@ -6,7 +6,6 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
 import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
 import Typography from '@mui/material/Typography';

src/components/atoms/SortRadioInput.tsx

@@ -8,14 +8,14 @@
 
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
 import ArrowUpward from '@mui/icons-material/ArrowUpward';
-import React from 'react';
+import { memo } from 'react';
 import RadioInput, { RadioInputProps } from '@/components/atoms/RadioInput';
 
 interface IProps extends RadioInputProps {
     sortDescending?: boolean | null | undefined;
 }
 
-const SortRadioInput = React.memo(({ sortDescending, ...rest }: IProps) => (
+const SortRadioInput = memo(({ sortDescending, ...rest }: IProps) => (
     <RadioInput
         checkedIcon={sortDescending ? <ArrowDownward color="primary" /> : <ArrowUpward color="primary" />}
         {...rest}

src/components/library/UpdateChecker.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import CircularProgress from '@mui/material/CircularProgress';

src/components/manga/ResumeFAB.tsx

@@ -6,7 +6,6 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
 import { Link } from 'react-router-dom';
 import { PlayArrow } from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';

src/components/navbar/ReaderNavBar.tsx

@@ -12,7 +12,7 @@ import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import Typography from '@mui/material/Typography';
 import { useLocation, useNavigate } from 'react-router-dom';
 import Slide from '@mui/material/Slide';

src/components/navbar/navigation/DesktopSideBar.tsx

@@ -6,7 +6,6 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
 import { ListItemIcon, Tooltip, styled, ListItemButton } from '@mui/material';
 import { Link, useLocation } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';

src/components/navbar/navigation/MobileBottomBar.tsx

@@ -6,7 +6,6 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
 import { styled, Box, ListItemButton } from '@mui/material';
 import { Link as RRDLink, useLocation } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';

src/components/reader/DoublePage.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
+import { forwardRef } from 'react';
 import { Box, styled } from '@mui/material';
 import { IReaderSettings } from '@/typings';
 
@@ -26,7 +26,7 @@ interface IProps {
     settings: IReaderSettings;
 }
 
-const DoublePage = React.forwardRef((props: IProps, ref: any) => {
+const DoublePage = forwardRef((props: IProps, ref: any) => {
     const { image1src, image2src, index, settings } = props;
 
     return (

src/components/reader/Page.tsx

@@ -6,17 +6,17 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React, { useRef } from 'react';
+import { useState, useEffect, forwardRef, useRef } from 'react';
 import Box from '@mui/material/Box';
 import { IReaderSettings } from '@/typings';
 import SpinnerImage from '@/components/util/SpinnerImage';
 
 function imageStyle(settings: IReaderSettings): any {
-    const [dimensions, setDimensions] = React.useState({
+    const [dimensions, setDimensions] = useState({
         height: window.innerHeight,
         width: window.innerWidth,
     });
-    React.useEffect(() => {
+    useEffect(() => {
         function handleResize() {
             setDimensions({
                 height: window.innerHeight,
@@ -65,7 +65,7 @@ interface IProps {
     settings: IReaderSettings;
 }
 
-const Page = React.forwardRef((props: IProps, ref: any) => {
+const Page = forwardRef((props: IProps, ref: any) => {
     const { src, index, onImageLoad, settings } = props;
 
     const imgRef = useRef<HTMLImageElement>(null);

src/components/reader/PageNumber.tsx

@@ -6,7 +6,6 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
 import { Box } from '@mui/material';
 import { IReaderSettings } from '@/typings';
 

src/components/reader/ReaderSettingsOptions.tsx

@@ -10,7 +10,6 @@ import { List, ListItem, ListItemText, Switch } from '@mui/material';
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { IReaderSettings } from '@/typings';
 

src/components/reader/pager/DoublePagedPager.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { Box } from '@mui/material';
 import { createRoot } from 'react-dom/client';
 import { IReaderProps } from '@/typings';

src/components/reader/pager/HorizontalPager.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { Box } from '@mui/material';
 import { IReaderProps } from '@/typings';
 import Page from '@/components/reader/Page';

src/components/reader/pager/PagedPager.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { Box } from '@mui/material';
 import { IReaderProps } from '@/typings';
 import Page from '@/components/reader/Page';

src/components/reader/pager/VerticalPager.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React, { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { Box } from '@mui/material';
 import { IReaderProps } from '@/typings';
 import Page from '@/components/reader/Page';

src/components/source/SourceMangaGrid.tsx

@@ -6,7 +6,6 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { IMangaCard } from '@/typings';
 import MangaGrid, { IMangaGridProps } from '@/components/MangaGrid';

src/components/source/SourceOptions.tsx

@@ -8,7 +8,7 @@
 
 import FilterListIcon from '@mui/icons-material/FilterList';
 import { Button, Stack, Box } from '@mui/material';
-import React from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ISourceFilters, IState } from '@/typings';
 import OptionsPanel from '@/components/molecules/OptionsPanel';
@@ -143,7 +143,7 @@ export default function SourceOptions({
     update,
 }: IFilters1) {
     const { t } = useTranslation();
-    const [FilterOptions, setFilterOptions] = React.useState(false);
+    const [FilterOptions, setFilterOptions] = useState(false);
 
     function handleReset() {
         resetFilterValue(0);

src/components/sourceConfiguration/EditTextPreference.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import ListItemText from '@mui/material/ListItemText';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';

src/components/sourceConfiguration/TwoStatePreference.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React, { useState, useEffect } from 'react';
+import { createElement, useState, useEffect } from 'react';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
@@ -33,7 +33,7 @@ function TwoSatePreference(props: TwoStatePreferenceProps) {
         <ListItem>
             <ListItemText primary={title} secondary={summary} />
             <ListItemSecondaryAction>
-                {React.createElement(getTwoStateType(type), {
+                {createElement(getTwoStateType(type), {
                     edge: 'end',
                     checked: internalCurrentValue,
                     onChange: () => {

src/components/util/CustomExtensionOutlinedIcon.tsx

@@ -6,7 +6,6 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
 import createSvgIcon from '@mui/material/utils/createSvgIcon';
 
 const d =

src/components/util/EmptyView.tsx

@@ -8,7 +8,7 @@
 
 // adopted from: https://github.com/tachiyomiorg/tachiyomi/blob/master/app/src/main/java/eu/kanade/tachiyomi/widget/EmptyView.kt
 
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
 import { Box, useMediaQuery } from '@mui/material';

src/components/util/ListItemLink.tsx

@@ -6,7 +6,6 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
 import { Link } from 'react-router-dom';
 import { ListItemButton, ListItemButtonProps } from '@mui/material';