add prettier for auto formatting (#231)

* [Prettier] Add "prettier"

Makes the formatting of the code consistent.
By using the eslint-plugin-prettier formatting issues will be highlighted as a lint error.
These errors will be auto fixed by running "lint --fix" (which can be done automatically on file save)

* [Prettier] Add "prettier" - Fix formatting

src/components/molecules/DownloadStateIndicator.tsx

@@ -12,7 +12,7 @@ import { Box } from '@mui/system';
 import React from 'react';
 
 interface DownloadStateIndicatorProps {
-    download: IDownloadChapter
+    download: IDownloadChapter;
 }
 
 const DownloadStateIndicator: React.FC<DownloadStateIndicatorProps> = ({ download }) => (
@@ -25,10 +25,7 @@ const DownloadStateIndicator: React.FC<DownloadStateIndicatorProps> = ({ downloa
         }}
     >
         {download.progress !== 0 && (
-            <CircularProgress
-                variant="determinate"
-                value={download.progress * 100}
-            />
+            <CircularProgress variant="determinate" value={download.progress * 100} />
         )}
         <Box
             sx={{

src/components/molecules/OptionsPanel.tsx

@@ -5,22 +5,18 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
-import {
-    Drawer,
-} from '@mui/material';
+import { Drawer } from '@mui/material';
 import { Box } from '@mui/system';
 import React from 'react';
 
 interface IProps {
-    open: boolean
-    onClose: () => void
-    children: React.ReactNode
-    minHeight?: number
+    open: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    minHeight?: number;
 }
 
-const OptionsPanel: React.FC<IProps> = ({
-    open, onClose, children, minHeight,
-}) => (
+const OptionsPanel: React.FC<IProps> = ({ open, onClose, children, minHeight }) => (
     <Drawer
         anchor="bottom"
         open={open}
@@ -34,9 +30,7 @@ const OptionsPanel: React.FC<IProps> = ({
             },
         }}
     >
-        <Box>
-            {children}
-        </Box>
+        <Box>{children}</Box>
     </Drawer>
 );
 

src/components/molecules/OptionsTabs.tsx

@@ -10,26 +10,27 @@ import TabPanel from 'components/util/TabPanel';
 import React, { useState } from 'react';
 import OptionsPanel from 'components/molecules/OptionsPanel';
 
-interface IProps<T = string>{
-    open: boolean
-    onClose: () => void
-    tabs: T[]
-    tabTitle: (key: T) => React.ReactNode
-    tabContent: (key: T) => React.ReactNode
-    minHeight?: number
+interface IProps<T = string> {
+    open: boolean;
+    onClose: () => void;
+    tabs: T[];
+    tabTitle: (key: T) => React.ReactNode;
+    tabContent: (key: T) => React.ReactNode;
+    minHeight?: number;
 }
 
 const OptionsTabs = <T extends string = string>({
-    open, onClose, tabs, tabTitle, tabContent, minHeight,
+    open,
+    onClose,
+    tabs,
+    tabTitle,
+    tabContent,
+    minHeight,
 }: IProps<T>) => {
     const [tabNum, setTabNum] = useState(0);
 
     return (
-        <OptionsPanel
-            open={open}
-            onClose={onClose}
-            minHeight={minHeight}
-        >
+        <OptionsPanel open={open} onClose={onClose} minHeight={minHeight}>
             <Tabs
                 value={tabNum}
                 variant="fullWidth"
@@ -43,9 +44,7 @@ const OptionsTabs = <T extends string = string>({
             </Tabs>
             {tabs.map((tab, tabIndex) => (
                 <TabPanel key={tab} index={tabIndex} currentIndex={tabNum}>
-                    <Stack sx={{ px: 3, py: 1, minHeight }}>
-                        {tabContent(tab)}
-                    </Stack>
+                    <Stack sx={{ px: 3, py: 1, minHeight }}>{tabContent(tab)}</Stack>
                 </TabPanel>
             ))}
         </OptionsPanel>