chore: fix eslint errors on frontend after common eslint config from …

…monorepo root

packages/frontend/package.json

@@ -9,7 +9,7 @@
     "debug": "vite --mode debug",
     "dev": "vite",
     "build": "tsc && vite build --emptyOutDir",
-    "lint": "npx eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "npx eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
     "start": "serve -s dist",
     "loadTranslationTypes": "i18next-resources-for-ts interface -i ./src/public/locales/en -o ./src/@types/resources.d.ts"
   },
@@ -44,10 +44,10 @@
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.1.4",
     "i18next-resources-for-ts": "^1.5.0",
     "locize-cli": "^8.0.0",
     "serve": "^14.2.1",
-    "typescript": "^5.2.2",
-    "vite": "^5.1.4"
+    "typescript": "^5.2.2"
   }
 }

packages/frontend/src/@types/i18n.d.ts

@@ -1,4 +1,4 @@
-import Resources from "./resources";
+import type Resources from "./resources";
 
 declare module "i18next" {
   interface CustomTypeOptions {

packages/frontend/src/ReactApp.tsx

@@ -1,14 +1,18 @@
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
+import React from "react";
 import ReactDOM from "react-dom/client";
 import { type Signal, signal } from "@preact/signals-react";
-import { Outlet, RouteObject, RouterProvider, createBrowserRouter } from "react-router-dom";
+import type { RouteObject} from "react-router-dom";
+import { Outlet, RouterProvider, createBrowserRouter } from "react-router-dom";
 import { CssBaseline } from "@mui/material";
 
-import { NavigationRoutes } from "@org/frontend/config/NavigationRoute.config";
-import { MuiThemeConfig, MuiThemeValue, createTheme } from "@org/frontend/config/MuiTheme.config";
+import type { NavigationRoutes } from "@org/frontend/config/NavigationRoute.config";
+import type { MuiThemeConfig, MuiThemeValue} from "@org/frontend/config/MuiTheme.config";
+import { createTheme } from "@org/frontend/config/MuiTheme.config";
 
 import { Layout } from "@org/frontend/components/layout/Layout";
-import { Provider, Providers } from "@org/frontend/components/providers/Providers";
+import type { Provider} from "@org/frontend/components/providers/Providers";
+import { Providers } from "@org/frontend/components/providers/Providers";
 import { StylesProvider } from "@org/frontend/components/providers/impl/StylesProvider";
 import { ThemeProvider } from "@org/frontend/components/providers/impl/MuiThemeProvider";
 import { QueryClientProvider } from "@org/frontend/components/providers/impl/QueryClientProvider";

packages/frontend/src/app/pages/Home/HomePage.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
-import { PaginationOptions, TODO, User, type UserPageableResponseDto } from "@org/shared";
+import type { PaginationOptions, TODO, User} from "@org/shared";
+import { type UserPageableResponseDto } from "@org/shared";
 import * as icons from "@mui/icons-material";
 import * as mui from "@mui/material";
 

packages/frontend/src/app/pages/Home/UserCreateFormButton.tsx

@@ -1,6 +1,6 @@
 import { Button, Dialog, DialogContent } from "@mui/material";
 import { useState } from "react";
-import { TODO, User } from "@org/shared";
+import type { TODO, User } from "@org/shared";
 import { UserForm } from "@org/frontend/app/pages/Home/UserForm";
 import { Add } from "@mui/icons-material";
 import { apiClient } from "@org/frontend/setup/apiClient.setup";

packages/frontend/src/app/pages/Home/UserForm.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { TextField, Button, Box, Autocomplete, MenuItem, Chip } from "@mui/material";
-import { Role, User } from "@org/shared";
+import type { User } from "@org/shared";
+import { Role } from "@org/shared";
 
 export type UserFormProps = {
   value: User;

packages/frontend/src/app/pages/Login/LoginPage.tsx

@@ -4,7 +4,8 @@ import * as icons from "@mui/icons-material";
 import { Logo } from "@org/frontend/components/semantics";
 import { sigUser } from "@org/frontend/signals/sigUser";
 import { ObjectId, Role, type TODO } from "@org/shared";
-import { ChangeEvent, MouseEvent, useState } from "react";
+import type { ChangeEvent, MouseEvent} from "react";
+import { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 
 interface State {

packages/frontend/src/app/pages/Preferences/PreferencesPage.tsx

@@ -1,12 +1,13 @@
-import {
+import type {
   Breakpoint,
+  SelectChangeEvent} from "@mui/material";
+import {
   Card,
   CardContent,
   FormControl,
   InputLabel,
   MenuItem,
-  Select,
-  SelectChangeEvent,
+  Select
 } from "@mui/material";
 import { sigPreferences } from "@org/frontend/signals/sigPreferences";
 import { type TODO } from "@org/shared";

packages/frontend/src/app/pages/ProtectedRoute.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
 import { Navigate, useLocation } from "react-router-dom";
 import { sigUser } from "@org/frontend/signals/sigUser";
 

packages/frontend/src/app/routes.tsx

@@ -1,6 +1,6 @@
 import * as icons from "@mui/icons-material";
 
-import { NavigationRoutes } from "@org/frontend/config/NavigationRoute.config";
+import type { NavigationRoutes } from "@org/frontend/config/NavigationRoute.config";
 import { HomePage } from "@org/frontend/app/pages/Home";
 
 export const routes: NavigationRoutes = [

packages/frontend/src/app/theme.ts

@@ -1,5 +1,5 @@
 import { colors as muiColors } from "@mui/material";
-import { MuiThemeConfig } from "@org/frontend/config/MuiTheme.config";
+import type { MuiThemeConfig } from "@org/frontend/config/MuiTheme.config";
 
 export const themeColors = {
   primary: muiColors.blue["700"],

packages/frontend/src/components/inputs/InputIconButtonSelect/InputIconButtonSelect.tsx

@@ -1,5 +1,5 @@
 import { Box, IconButton, Menu, MenuItem, Tooltip } from "@mui/material";
-import { TODO } from "@org/shared";
+import type { TODO } from "@org/shared";
 import { useMemo, useState } from "react";
 
 export type InputIconButtonSelectProps<Item = unknown, Value = Item> = {

packages/frontend/src/components/inputs/InputLocaleSelect/InputLocaleSelect.tsx

@@ -3,7 +3,7 @@ import { Typography } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { InputIconButtonSelect } from "@org/frontend/components/inputs/InputIconButtonSelect/InputIconButtonSelect";
 import { sigLocale } from "@org/frontend/signals/sigLocale";
-import { Locale } from "@org/frontend/config/i18n.config";
+import type { Locale } from "@org/frontend/config/i18n.config";
 
 function getLocaleNativeName(locale: Locale) {
   const name: string = new Intl.DisplayNames([locale], {

packages/frontend/src/components/inputs/InputRangeBasic/InputRangeBasic.tsx

@@ -1,5 +1,5 @@
 import { Box, TextField } from "@mui/material";
-import { TODO } from "@org/shared";
+import type { TODO } from "@org/shared";
 
 export type InputRangeProps = {
   value: number;

packages/frontend/src/components/layout/Layout.tsx

@@ -1,5 +1,5 @@
 import { Box, Container, useMediaQuery } from "@mui/material";
-import { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
 import { Sidebar } from "@org/frontend/components/navigation/Sidebar";
 import { Footer, Header } from "@org/frontend/components/semantics";
 import { HorizontalNavVariant, SidebarNavVariant } from "@org/frontend/components/layout/variants";

packages/frontend/src/components/layout/variants/HorizontalNavVariant.tsx

@@ -1,25 +1,28 @@
 import { ChevronRight, ExpandMore } from "@mui/icons-material";
+import type {
+  Breakpoint} from "@mui/material";
 import {
   Box,
-  Breakpoint,
   Container,
   List,
   ListItemButton,
   ListItemIcon,
   ListItemText,
   Stack,
 } from "@mui/material";
-import { TODO } from "@org/shared";
+import type { TODO } from "@org/shared";
 import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
+import type {
+  OriginPosition} from "@org/frontend/components/navigation/ButtonHoverMenu";
 import {
-  ButtonHoverMenu,
-  OriginPosition,
+  ButtonHoverMenu
 } from "@org/frontend/components/navigation/ButtonHoverMenu";
-import {
+import type {
   NavigationRoute,
-  NavigationRouteSingle,
+  NavigationRouteSingle} from "@org/frontend/config/NavigationRoute.config";
+import {
   isAnyRouteActive,
 } from "@org/frontend/config/NavigationRoute.config";
 import { reactServer } from "@org/frontend/setup/reactServer.setup";

packages/frontend/src/components/layout/variants/SidebarNavVariant.tsx

@@ -1,13 +1,14 @@
 import { ExpandLess, ExpandMore } from "@mui/icons-material";
 import { Collapse, Divider, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
-import { TODO } from "@org/shared";
+import type { TODO } from "@org/shared";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Fragment } from "react/jsx-runtime";
-import {
+import type {
   NavigationRoute,
-  NavigationRouteSingle,
+  NavigationRouteSingle} from "@org/frontend/config/NavigationRoute.config";
+import {
   isAnyRouteActive,
 } from "@org/frontend/config/NavigationRoute.config";
 import { reactServer } from "@org/frontend/setup/reactServer.setup";

packages/frontend/src/components/navigation/ButtonHoverMenu/ButtonHoverMenu.tsx

@@ -1,7 +1,8 @@
 import PopupState, { bindHover, bindPopover } from "material-ui-popup-state";
 import HoverPopover from "material-ui-popup-state/HoverPopover";
-import { PopupState as PopupStateProps } from "material-ui-popup-state/hooks";
-import { ReactNode, useId } from "react";
+import type { PopupState as PopupStateProps } from "material-ui-popup-state/hooks";
+import type { ReactNode} from "react";
+import { useId } from "react";
 
 export type OriginPositionX = "left" | "center" | "right";
 

packages/frontend/src/components/navigation/Sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { SwipeableDrawer, useMediaQuery } from "@mui/material";
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 export type SidebarProps = {
   width?: number;

packages/frontend/src/components/providers/impl/MuiThemeProvider.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
 import { Experimental_CssVarsProvider as MuiThemeProvider } from "@mui/material/styles";
 import { reactServer } from "@org/frontend/setup/reactServer.setup";
 

packages/frontend/src/components/providers/impl/QueryClientProvider.tsx

@@ -2,7 +2,7 @@ import {
   QueryClient,
   QueryClientProvider as InternalQueryClientProvider,
 } from "@tanstack/react-query";
-import { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
 
 const queryClient = new QueryClient();
 

packages/frontend/src/components/providers/impl/StylesProvider.tsx

@@ -1,5 +1,5 @@
 import { StylesProvider as InternalStylesProvider } from "@mui/styles";
-import { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
 
 export function StylesProvider({ children }: PropsWithChildren) {
   return <InternalStylesProvider injectFirst>{children}</InternalStylesProvider>;

packages/frontend/src/components/semantics/Datatable/components/DatatableContainer/DatatableContainer.tsx

@@ -1,6 +1,6 @@
 //import { Paper } from "@mui/material";
 import { Card } from "@mui/material";
-import { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
 
 export function DatatableContainer({ children }: PropsWithChildren) {
   //return <Paper>{children}</Paper>;

packages/frontend/src/components/semantics/Datatable/components/DtSortableCell/DtSortableCell.tsx

@@ -1,6 +1,7 @@
 import { TableCell, Box, TableSortLabel } from "@mui/material";
-import { MouseEvent, useCallback, useState } from "react";
-import {
+import type { MouseEvent} from "react";
+import { useCallback, useState } from "react";
+import type {
   DtBaseColumnAlign,
   DtBaseColumnRenderHeader,
 } from "@org/frontend/components/semantics/Datatable/types";

packages/frontend/src/components/semantics/Datatable/impl/ClientDatatable/ClientDatatable.tsx

@@ -7,14 +7,13 @@ import {
   TableBody,
   TablePagination,
 } from "@mui/material";
-import { TODO } from "@org/shared";
-import { Fragment, MouseEvent, useMemo, useState } from "react";
+import type { TODO } from "@org/shared";
+import type { MouseEvent } from "react";
+import { Fragment, useMemo, useState } from "react";
 import { DtSortableCell } from "@org/frontend/components/semantics/Datatable/components/DtSortableCell/DtSortableCell";
-import {
-  DEFAULT_PAGINATION_OPTIONS,
-  DtBaseOrder,
-} from "@org/frontend/components/semantics/Datatable/types";
-import { ClientDatatableProps } from "@org/frontend/components/semantics/Datatable/impl/ClientDatatable/types";
+import type { DtBaseOrder } from "@org/frontend/components/semantics/Datatable/types";
+import { DEFAULT_PAGINATION_OPTIONS } from "@org/frontend/components/semantics/Datatable/types";
+import type { ClientDatatableProps } from "@org/frontend/components/semantics/Datatable/impl/ClientDatatable/types";
 
 export function ClientDatatable<T>({
   data,
@@ -49,6 +48,7 @@ export function ClientDatatable<T>({
       });
     }
     return localData.slice(page * rowsPerPage, (page + 1) * rowsPerPage);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data, paginationOptions, disablePagination, sortData]);
 
   const onSortColumnClick = (id: string, event: MouseEvent<TODO>) => {

packages/frontend/src/components/semantics/Datatable/impl/ClientDatatable/types.ts

@@ -1,4 +1,4 @@
-import { DtBaseColumn } from "@org/frontend/components/semantics/Datatable/types";
+import type { DtBaseColumn } from "@org/frontend/components/semantics/Datatable/types";
 
 export type DtClientColumnSort<T> = (o1: T, o2: T) => number;
 

packages/frontend/src/components/semantics/Datatable/impl/ServerDatatable/ServerDatatable.tsx

@@ -7,10 +7,11 @@ import {
   TableBody,
   TablePagination,
 } from "@mui/material";
-import { TODO } from "@org/shared";
-import { Fragment, MouseEvent, useCallback } from "react";
-import { ServerDatatableProps } from "@org/frontend/components/semantics/Datatable/impl/ServerDatatable/types";
-import { DtBaseSortItem } from "@org/frontend/components/semantics/Datatable/types";
+import type { TODO } from "@org/shared";
+import type { MouseEvent } from "react";
+import { Fragment, useCallback } from "react";
+import type { ServerDatatableProps } from "@org/frontend/components/semantics/Datatable/impl/ServerDatatable/types";
+import type { DtBaseSortItem } from "@org/frontend/components/semantics/Datatable/types";
 import { DtSortableCell } from "@org/frontend/components/semantics/Datatable/components/DtSortableCell";
 
 export function ServerDatatable<T>({
@@ -51,6 +52,7 @@ export function ServerDatatable<T>({
       }
       onPaginationOptionsChange({ ...paginationOptions, order: [`${id} desc`] });
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [paginationOptions, sortData],
   );
 

packages/frontend/src/components/semantics/Datatable/impl/ServerDatatable/types.ts

@@ -1,5 +1,5 @@
-import { PaginationOptions } from "@org/shared";
-import { DtBaseColumn } from "@org/frontend/components/semantics/Datatable/types";
+import type { PaginationOptions } from "@org/shared";
+import type { DtBaseColumn } from "@org/frontend/components/semantics/Datatable/types";
 
 export type DtServerColumn<T> = DtBaseColumn<T> & {
   sort?: string;

packages/frontend/src/components/semantics/Datatable/types.ts

@@ -1,5 +1,5 @@
-import { PaginationOptions } from "@org/shared";
-import { ReactNode } from "react";
+import type { PaginationOptions } from "@org/shared";
+import type { ReactNode } from "react";
 
 export type DtBaseColumnAlign = "left" | "center" | "right";
 export type DtBaseColumnRenderHeader = () => ReactNode;

packages/frontend/src/components/semantics/Footer/Footer.tsx

@@ -1,5 +1,6 @@
-import { Box, Breakpoint, Container, Link, Typography } from "@mui/material";
-import { MuiSxProps } from "@org/frontend/components/semantics/Header";
+import type { Breakpoint} from "@mui/material";
+import { Box, Container, Link, Typography } from "@mui/material";
+import type { MuiSxProps } from "@org/frontend/components/semantics/Header";
 
 export type FooterProps = {
   backgroundColor?: string;

packages/frontend/src/components/semantics/Header/Header.tsx

@@ -1,13 +1,14 @@
 import { Menu } from "@mui/icons-material";
+import type {
+  Breakpoint,
+  SxProps,
+  Theme} from "@mui/material";
 import {
   Box,
   Breadcrumbs,
-  Breakpoint,
   Container,
   IconButton,
   Link,
-  SxProps,
-  Theme,
   useMediaQuery,
 } from "@mui/material";
 import {
@@ -16,7 +17,7 @@ import {
   InputThemeToggle,
 } from "@org/frontend/components/inputs";
 import { useMatches } from "react-router-dom";
-import { TODO } from "@org/shared";
+import type { TODO } from "@org/shared";
 import { sigSidebarOpen } from "@org/frontend/signals/sigSidebarOpen";
 
 export type MuiSxProps = SxProps<Theme>;

packages/frontend/src/config/MuiTheme.config.ts

@@ -1,18 +1,19 @@
-import {
+import type {
   CssVarsTheme,
   PaletteMode,
   PaletteOptions,
   ThemeOptions,
   TypeBackground,
   PaletteColorOptions,
 } from "@mui/material";
+import type {
+  Theme} from "@mui/material/styles";
 import {
-  Theme,
   experimental_extendTheme as extendTheme,
   createTheme as muiCreateTheme,
 } from "@mui/material/styles";
 import { darken, lighten, alpha } from "@mui/material/styles";
-import { ColorPartial, TypeText } from "@mui/material/styles/createPalette";
+import type { ColorPartial, TypeText } from "@mui/material/styles/createPalette";
 
 export type MuiThemeValue = Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme;