[ESLint] Prefer named exports (#427)

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
     extends: ['airbnb', 'airbnb-typescript', 'prettier'],
-    plugins: ['unused-imports', '@typescript-eslint', 'no-relative-import-paths', 'prettier', 'header'],
+    plugins: ['unused-imports', 'eslint-plugin-import', '@typescript-eslint', 'no-relative-import-paths', 'prettier', 'header'],
     parserOptions: {
         project: ['./tsconfig.json', './tsconfig.node.json', './tools/scripts/tsconfig.json'],
     },
@@ -10,6 +10,9 @@ module.exports = {
             rules: {
                 'unused-imports/no-unused-imports': 'error',
 
+                'import/prefer-default-export': 'off',
+                'import/no-default-export': 'error',
+
                 'header/header': [
                     'error',
                     'block', // comment type

src/App.tsx

@@ -12,33 +12,33 @@ import React from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { loadErrorMessages, loadDevMessages } from '@apollo/client/dev';
 import { __DEV__ } from '@apollo/client/utilities/globals';
-import AppContext from '@/components/context/AppContext';
-import Browse from '@/screens/Browse';
-import DownloadQueue from '@/screens/DownloadQueue';
-import Extensions from '@/screens/Extensions';
-import Library from '@/screens/Library';
-import Manga from '@/screens/Manga';
-import Reader from '@/screens/Reader';
-import SearchAll from '@/screens/SearchAll';
-import Settings from '@/screens/Settings';
-import About from '@/screens/settings/About';
-import Backup from '@/screens/settings/Backup';
-import Categories from '@/screens/settings/Categories';
-import DefaultReaderSettings from '@/screens/settings/DefaultReaderSettings';
-import SourceConfigure from '@/screens/SourceConfigure';
-import SourceMangas from '@/screens/SourceMangas';
-import Sources from '@/screens/Sources';
-import Updates from '@/screens/Updates';
+import { AppContext } from '@/components/context/AppContext';
+import { Browse } from '@/screens/Browse';
+import { DownloadQueue } from '@/screens/DownloadQueue';
+import { Extensions } from '@/screens/Extensions';
+import { Library } from '@/screens/Library';
+import { Manga } from '@/screens/Manga';
+import { Reader } from '@/screens/Reader';
+import { SearchAll } from '@/screens/SearchAll';
+import { Settings } from '@/screens/Settings';
+import { About } from '@/screens/settings/About';
+import { Backup } from '@/screens/settings/Backup';
+import { Categories } from '@/screens/settings/Categories';
+import { DefaultReaderSettings } from '@/screens/settings/DefaultReaderSettings';
+import { SourceConfigure } from '@/screens/SourceConfigure';
+import { SourceMangas } from '@/screens/SourceMangas';
+import { Sources } from '@/screens/Sources';
+import { Updates } from '@/screens/Updates';
 import '@/i18n';
-import LibrarySettings from '@/screens/settings/LibrarySettings';
-import DefaultNavBar from '@/components/navbar/DefaultNavBar';
+import { LibrarySettings } from '@/screens/settings/LibrarySettings';
+import { DefaultNavBar } from '@/components/navbar/DefaultNavBar';
 
 if (__DEV__) {
     // Adds messages only in a dev environment
     loadDevMessages();
     loadErrorMessages();
 }
-const App: React.FC = () => (
+export const App: React.FC = () => (
     <AppContext>
         <CssBaseline />
         <DefaultNavBar />
@@ -91,5 +91,3 @@ const App: React.FC = () => (
         </Routes>
     </AppContext>
 );
-
-export default App;

src/components/ExtensionCard.tsx

@@ -15,7 +15,7 @@ import Typography from '@mui/material/Typography';
 import { Box } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { PartialExtension, TranslationKey } from '@/typings';
-import requestManager from '@/lib/requests/RequestManager.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
 
 interface IProps {
     extension: PartialExtension;
@@ -60,7 +60,7 @@ const INSTALLED_STATE_TO_TRANSLATION_KEY_MAP: { [installedState in InstalledStat
     [InstalledState.INSTALLING]: 'extension.state.label.installing',
 } as const;
 
-export default function ExtensionCard(props: IProps) {
+export function ExtensionCard(props: IProps) {
     const { t } = useTranslation();
 
     const {

src/components/MangaCard.tsx

@@ -12,9 +12,9 @@ import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
 import { Avatar, Box, CardContent, styled } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import requestManager from '@/lib/requests/RequestManager.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
-import SpinnerImage from '@/components/util/SpinnerImage';
+import { SpinnerImage } from '@/components/util/SpinnerImage';
 import { TPartialManga } from '@/typings.ts';
 
 const BottomGradient = styled('div')({
@@ -71,7 +71,7 @@ interface IProps {
     inLibraryIndicator?: boolean;
 }
 
-const MangaCard = (props: IProps) => {
+export const MangaCard = (props: IProps) => {
     const { t } = useTranslation();
 
     const {
@@ -259,5 +259,3 @@ const MangaCard = (props: IProps) => {
         </Card>
     );
 };
-
-export default MangaCard;

src/components/MangaGrid.tsx

@@ -11,11 +11,11 @@ import Grid, { GridTypeMap } from '@mui/material/Grid';
 import { Box, Typography } from '@mui/material';
 import { GridItemProps, VirtuosoGrid, VirtuosoGridHandle } from 'react-virtuoso';
 import { useNavigate, useLocation } from 'react-router-dom';
-import EmptyView from '@/components/util/EmptyView';
-import LoadingPlaceholder from '@/components/util/LoadingPlaceholder';
-import MangaCard from '@/components/MangaCard';
+import { EmptyView } from '@/components/util/EmptyView';
+import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
+import { MangaCard } from '@/components/MangaCard';
 import { GridLayout } from '@/components/context/LibraryOptionsContext';
-import useLocalStorage from '@/util/useLocalStorage';
+import { useLocalStorage } from '@/util/useLocalStorage';
 import { TPartialManga } from '@/typings.ts';
 
 const GridContainer = React.forwardRef<HTMLDivElement, GridTypeMap['props']>(({ children, ...props }, ref) => (
@@ -162,7 +162,7 @@ export interface IMangaGridProps {
     inLibraryIndicator?: boolean;
 }
 
-const MangaGrid: React.FC<IMangaGridProps> = (props) => {
+export const MangaGrid: React.FC<IMangaGridProps> = (props) => {
     const {
         mangas,
         isLoading,
@@ -256,5 +256,3 @@ MangaGrid.defaultProps = {
     message: '',
     messageExtra: undefined,
 };
-
-export default MangaGrid;

src/components/SourceCard.tsx

@@ -16,7 +16,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { ISource } from '@/typings';
-import requestManager from '@/lib/requests/RequestManager.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { translateExtensionLanguage } from '@/screens/util/Extensions';
 import { SourceContentType } from '@/screens/SourceMangas';
 
@@ -42,7 +42,7 @@ interface IProps {
     source: ISource;
 }
 
-const SourceCard: React.FC<IProps> = (props: IProps) => {
+export const SourceCard: React.FC<IProps> = (props: IProps) => {
     const { t } = useTranslation();
 
     const {
@@ -137,5 +137,3 @@ const SourceCard: React.FC<IProps> = (props: IProps) => {
         </Card>
     );
 };
-
-export default SourceCard;

src/components/atoms/CheckboxInput.tsx

@@ -13,8 +13,6 @@ interface IProps extends CheckboxProps {
     label?: string;
 }
 
-const CheckboxInput: React.FC<IProps> = ({ label, sx, ...rest }) => (
+export const CheckboxInput: React.FC<IProps> = ({ label, sx, ...rest }) => (
     <FormControlLabel control={<Checkbox {...rest} />} label={label} sx={sx} />
 );
-
-export default CheckboxInput;

src/components/atoms/RadioInput.tsx

@@ -13,8 +13,6 @@ export interface RadioInputProps extends RadioProps {
     label?: string;
 }
 
-const RadioInput: React.FC<RadioInputProps> = ({ label, sx, ...rest }) => (
+export const RadioInput: React.FC<RadioInputProps> = ({ label, sx, ...rest }) => (
     <FormControlLabel control={<Radio {...rest} />} label={label} sx={sx} />
 );
-
-export default RadioInput;

src/components/atoms/SortRadioInput.tsx

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

src/components/atoms/ThreeStateCheckbox.tsx

@@ -28,7 +28,7 @@ export interface ThreeStateCheckboxProps extends Omit<CheckboxProps, 'checked' |
  * When checked is false, checkbox contains cross
  * When checked is null or undefined, checkbox is empty
  */
-const ThreeStateCheckbox: React.FC<ThreeStateCheckboxProps> = ({ checked, onChange, ...rest }) => {
+export const ThreeStateCheckbox: React.FC<ThreeStateCheckboxProps> = ({ checked, onChange, ...rest }) => {
     const handleChange = useCallback(() => {
         if (onChange) {
             const newState = nextState(checked);
@@ -46,4 +46,3 @@ const ThreeStateCheckbox: React.FC<ThreeStateCheckboxProps> = ({ checked, onChan
         />
     );
 };
-export default ThreeStateCheckbox;

src/components/atoms/ThreeStateCheckboxInput.tsx

@@ -8,14 +8,12 @@
 
 import { FormControlLabel } from '@mui/material';
 import React from 'react';
-import ThreeStateCheckbox, { ThreeStateCheckboxProps } from '@/components/atoms/ThreeStateCheckbox';
+import { ThreeStateCheckbox, ThreeStateCheckboxProps } from '@/components/atoms/ThreeStateCheckbox';
 
 interface IProps extends ThreeStateCheckboxProps {
     label?: string;
 }
 
-const ThreeStateCheckboxInput: React.FC<IProps> = ({ label, sx, ...rest }) => (
+export const ThreeStateCheckboxInput: React.FC<IProps> = ({ label, sx, ...rest }) => (
     <FormControlLabel control={<ThreeStateCheckbox {...rest} />} label={label} sx={sx} />
 );
-
-export default ThreeStateCheckboxInput;

src/components/context/AppContext.tsx

@@ -11,17 +11,17 @@ import React, { useMemo } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
-import createTheme from '@/theme';
-import useLocalStorage from '@/util/useLocalStorage';
-import DarkTheme from '@/components/context/DarkTheme';
-import NavBarContextProvider from '@/components/navbar/NavBarContextProvider';
-import LibraryOptionsContextProvider from '@/components/library/LibraryOptionsProvider';
+import { createTheme } from '@/theme';
+import { useLocalStorage } from '@/util/useLocalStorage';
+import { DarkTheme } from '@/components/context/DarkTheme';
+import { NavBarContextProvider } from '@/components/navbar/NavBarContextProvider';
+import { LibraryOptionsContextProvider } from '@/components/library/LibraryOptionsProvider';
 
 interface Props {
     children: React.ReactNode;
 }
 
-const AppContext: React.FC<Props> = ({ children }) => {
+export const AppContext: React.FC<Props> = ({ children }) => {
     const [darkTheme, setDarkTheme] = useLocalStorage<boolean>('darkTheme', true);
 
     const darkThemeContext = useMemo(
@@ -50,5 +50,3 @@ const AppContext: React.FC<Props> = ({ children }) => {
         </Router>
     );
 };
-
-export default AppContext;

src/components/context/DarkTheme.tsx

@@ -13,9 +13,7 @@ type ContextType = {
     setDarkTheme: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const DarkTheme = React.createContext<ContextType>({
+export const DarkTheme = React.createContext<ContextType>({
     darkTheme: true,
     setDarkTheme: (): void => {},
 });
-
-export default DarkTheme;

src/components/context/LibraryOptionsContext.tsx

@@ -34,13 +34,11 @@ export const DefaultLibraryOptions: LibraryOptions = {
     showTabSize: false,
 };
 
-const LibraryOptionsContext = React.createContext<ContextType>({
+export const LibraryOptionsContext = React.createContext<ContextType>({
     options: DefaultLibraryOptions,
     setOptions: () => {},
 });
 
-export default LibraryOptionsContext;
-
 export function useLibraryOptionsContext() {
     return useContext(LibraryOptionsContext);
 }

src/components/context/NavbarContext.tsx

@@ -27,7 +27,7 @@ type ContextType = {
     setOverride: React.Dispatch<React.SetStateAction<INavbarOverride>>;
 };
 
-const NavBarContext = React.createContext<ContextType>({
+export const NavBarContext = React.createContext<ContextType>({
     defaultBackTo: undefined,
     setDefaultBackTo: (): void => {},
     title: 'Tachidesk',
@@ -38,8 +38,6 @@ const NavBarContext = React.createContext<ContextType>({
     setOverride: (): void => {},
 });
 
-export default NavBarContext;
-
 export const useNavBarContext = () => useContext(NavBarContext);
 
 export const useSetDefaultBackTo = (value: string) => {

src/components/globalUpdate/CheckboxContainer.ts

@@ -8,7 +8,6 @@
 
 import { styled } from '@mui/material';
 
-// eslint-disable-next-line import/prefer-default-export
 export const CheckboxContainer = styled('div')({
     display: 'flex',
     flexDirection: 'column',

src/components/globalUpdate/GlobalUpdateSettings.tsx

@@ -12,7 +12,6 @@ import { useTranslation } from 'react-i18next';
 import { GlobalUpdateSettingsCategories } from '@/components/globalUpdate/GlobalUpdateSettingsCategories.tsx';
 import { GlobalUpdateSettingsEntries } from '@/components/globalUpdate/GlobalUpdateSettingsEntries.tsx';
 
-// eslint-disable-next-line import/prefer-default-export
 export const GlobalUpdateSettings = () => {
     const { t } = useTranslation();
 

src/components/globalUpdate/GlobalUpdateSettingsCategories.tsx

@@ -17,11 +17,11 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import { t as translate } from 'i18next';
-import ThreeStateCheckboxInput from '@/components/atoms/ThreeStateCheckboxInput.tsx';
-import makeToast from '@/components/util/Toast.tsx';
+import { ThreeStateCheckboxInput } from '@/components/atoms/ThreeStateCheckboxInput.tsx';
+import { makeToast } from '@/components/util/Toast.tsx';
 import { IncludeInUpdate } from '@/lib/graphql/generated/graphql.ts';
 import { TCategory } from '@/typings.ts';
-import requestManager from '@/lib/requests/RequestManager.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { CheckboxContainer } from '@/components/globalUpdate/CheckboxContainer.ts';
 
 const booleanToIncludeInStatus = (status: boolean | null | undefined): IncludeInUpdate => {
@@ -78,7 +78,6 @@ const getCategoryUpdateInfo = (
     return categories.map((category) => category.name).join(', ');
 };
 
-// eslint-disable-next-line import/prefer-default-export
 export const GlobalUpdateSettingsCategories = () => {
     const { t } = useTranslation();