Replaced Theme with IobTheme

package.json

@@ -29,7 +29,7 @@
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@fnando/sparkline": "^0.3.10",
     "@honkhonk/vite-plugin-svgr": "^1.1.0",
-    "@iobroker/adapter-react-v5": "^4.13.23",
+    "@iobroker/adapter-react-v5": "^5.0.0",
     "@iobroker/admin-component-easy-access": "^0.3.2",
     "@iobroker/dm-utils": "^0.1.9",
     "@iobroker/legacy-testing": "^1.0.12",
@@ -73,7 +73,7 @@
     "date-fns": "^2.30.0",
     "echarts": "^5.5.0",
     "echarts-for-react": "^3.0.2",
-    "eslint": "^9.3.0",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",

packages/admin/src/.eslintrc.js

@@ -94,5 +94,7 @@ module.exports = {
                 requireLast: false,
             },
         }],
+        '@typescript-eslint/type-annotation-spacing': 'error',
+        '@typescript-eslint/consistent-type-imports': 'error',
     },
 };

packages/admin/src/src/App.jsx

@@ -1564,7 +1564,7 @@ class App extends Router {
     /**
      * Get a theme
      * @param {string} name Theme name
-     * @returns {Theme}
+     * @returns {IobTheme}
      */
     static createTheme(name) {
         return Theme(Utils.getThemeName(name));

packages/admin/src/src/Utils.tsx

@@ -667,4 +667,11 @@ class Utils {
     }
 }
 
+declare module '@mui/material/Button' {
+    interface ButtonPropsColorOverrides {
+        grey: true;
+        gray: true;
+    }
+}
+
 export default Utils;

packages/admin/src/src/components/Adapters/AdapterRow.tsx

@@ -2,8 +2,6 @@ import React, { Component } from 'react';
 
 import { type Styles, withStyles } from '@mui/styles';
 
-import { i18n, Utils } from '@iobroker/adapter-react-v5';
-
 import {
     Avatar,
     CardMedia,
@@ -14,7 +12,6 @@ import {
     Tooltip,
     Typography,
     Rating,
-    type Theme,
     Link,
 } from '@mui/material';
 
@@ -44,11 +41,13 @@ import {
     MonetizationOn,
 } from '@mui/icons-material';
 
+import { i18n, type IobTheme, Utils } from '@iobroker/adapter-react-v5';
+
 import IsVisible from '../IsVisible';
 import MaterialDynamicIcon from '../../helpers/MaterialDynamicIcon';
 import sentryIcon from '../../assets/sentry.svg';
 
-const styles = (theme: Theme) => ({
+const styles = (theme: IobTheme) => ({
     smallAvatar: {
         width: theme.spacing(4),
         height: theme.spacing(4),

packages/admin/src/src/components/Adapters/AdaptersUpdater.tsx

@@ -388,7 +388,6 @@ class AdaptersUpdater extends Component<AdaptersUpdaterProps, AdaptersUpdaterSta
                     <Button
                         variant="contained"
                         onClick={() => this.setState({ showNews: null })}
-                        // @ts-expect-error this is fine
                         color="grey"
                         startIcon={<CloseIcon />}
                     >

packages/admin/src/src/components/BaseSettings/BaseSettingsLog.tsx

@@ -19,7 +19,6 @@ import {
     AccordionSummary,
     Typography,
     Fab,
-    type Theme,
 } from '@mui/material';
 
 // Icons
@@ -32,10 +31,10 @@ import {
     Computer as IconSyslog,
     Send as IconStream,
 } from '@mui/icons-material';
-import { withWidth } from '@iobroker/adapter-react-v5';
+import { withWidth, type IobTheme } from '@iobroker/adapter-react-v5';
 import IconSeq from '../../assets/seq.png';
 
-const styles: Styles<any, any> = (theme: Theme) => ({
+const styles: Styles<any, any> = (theme: IobTheme) => ({
     paper: {
         height: '100%',
         maxHeight: '100%',
@@ -96,7 +95,7 @@ interface TransportSettings {
     ssl?: boolean;
 }
 
-interface SettingsLog {
+export interface SettingsLog {
     transport?: Record<string, TransportSettings>;
     level?: string;
     maxDays?: number;
@@ -919,7 +918,6 @@ class BaseSettingsLog extends Component<BaseSettingsLogProps, BaseSettingsLogSta
             </Grid>
             <Toolbar>
                 <Button
-                    // @ts-expect-error grey is a valid color
                     color="grey"
                     className={this.props.classes.addButton}
                     variant="contained"
@@ -930,7 +928,6 @@ class BaseSettingsLog extends Component<BaseSettingsLogProps, BaseSettingsLogSta
                     {this.props.t('File log')}
                 </Button>
                 <Button
-                    // @ts-expect-error grey is a valid color
                     color="grey"
                     className={this.props.classes.addButton}
                     variant="contained"
@@ -941,7 +938,6 @@ class BaseSettingsLog extends Component<BaseSettingsLogProps, BaseSettingsLogSta
                     {this.props.t('Syslog')}
                 </Button>
                 <Button
-                    // @ts-expect-error grey is a valid color
                     color="grey"
                     className={this.props.classes.addButton}
                     variant="contained"
@@ -952,7 +948,6 @@ class BaseSettingsLog extends Component<BaseSettingsLogProps, BaseSettingsLogSta
                     {this.props.t('HTTP log')}
                 </Button>
                 <Button
-                    // @ts-expect-error grey is a valid color
                     color="grey"
                     className={this.props.classes.addButton}
                     variant="contained"
@@ -963,7 +958,6 @@ class BaseSettingsLog extends Component<BaseSettingsLogProps, BaseSettingsLogSta
                     {this.props.t('Stream log')}
                 </Button>
                 <Button
-                    // @ts-expect-error grey is a valid color
                     color="grey"
                     className={this.props.classes.addButton}
                     variant="contained"

packages/admin/src/src/components/BaseSettings/BaseSettingsMultihost.tsx

@@ -6,12 +6,12 @@ import {
     FormControlLabel,
     Checkbox,
     TextField,
-    Paper, type Theme,
+    Paper,
 } from '@mui/material';
 
-import { withWidth } from '@iobroker/adapter-react-v5';
+import { withWidth, type IobTheme } from '@iobroker/adapter-react-v5';
 
-const styles: Styles<any, any> = (theme: Theme) => ({
+const styles: Styles<any, any> = (theme: IobTheme) => ({
     paper: {
         height: '100%',
         maxHeight: '100%',
@@ -31,7 +31,7 @@ const styles: Styles<any, any> = (theme: Theme) => ({
     },
 });
 
-interface MultihostSettings {
+export interface MultihostSettings {
     enabled?: boolean;
     secure?: boolean;
     password?: string;

packages/admin/src/src/components/BaseSettings/BaseSettingsObjects.tsx

@@ -16,13 +16,16 @@ import {
     Paper,
     Switch,
     LinearProgress,
-    type Theme,
 } from '@mui/material';
 
-import { Utils, withWidth, Confirm as DialogConfirm } from '@iobroker/adapter-react-v5';
+import {
+    Utils, withWidth,
+    Confirm as DialogConfirm,
+    type IobTheme,
+} from '@iobroker/adapter-react-v5';
 import { type AdminConnection } from '@iobroker/socket-client';
 
-const styles: Styles<any, any> = (theme: Theme) => ({
+const styles: Styles<any, any> = (theme: IobTheme) => ({
     paper: {
         height: '100%',
         maxHeight: '100%',
@@ -68,7 +71,7 @@ const DEFAULT_JSONL_OPTIONS = {
     },
 };
 
-interface SettingsObjects {
+export interface SettingsObjects {
     type?: 'file' | 'jsonl' | 'redis';
     host?: string;
     port?: number;

packages/admin/src/src/components/BaseSettings/BaseSettingsPlugins.tsx

@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
 import { type Styles, withStyles } from '@mui/styles';
 
-import { Paper, type Theme } from '@mui/material';
+import { Paper } from '@mui/material';
 
-import { Utils, withWidth } from '@iobroker/adapter-react-v5';
+import { Utils, withWidth, type IobTheme } from '@iobroker/adapter-react-v5';
 
 import Editor from '../Editor';
 
-const styles: Styles<any, any> = (theme: Theme) => ({
+const styles: Styles<any, any> = (theme: IobTheme) => ({
     paper: {
         height:    '100%',
         maxHeight: '100%',
@@ -29,7 +29,7 @@ const styles: Styles<any, any> = (theme: Theme) => ({
     },
 });
 
-interface PluginsSettings {
+export interface PluginsSettings {
     [key: string]: any;
 }
 

packages/admin/src/src/components/BaseSettings/BaseSettingsStates.tsx

@@ -16,14 +16,17 @@ import {
     FormGroup,
     Switch,
     LinearProgress,
-    type Theme,
 } from '@mui/material';
 
-import { Confirm as DialogConfirm, Utils, withWidth } from '@iobroker/adapter-react-v5';
+import {
+    Confirm as DialogConfirm, Utils,
+    withWidth,
+    type IobTheme,
+} from '@iobroker/adapter-react-v5';
 
 import { type AdminConnection } from '@iobroker/socket-client';
 
-const styles: Styles<any, any> = (theme: Theme) => ({
+const styles: Styles<any, any> = (theme: IobTheme) => ({
     paper: {
         height: '100%',
         maxHeight: '100%',
@@ -69,7 +72,7 @@ const DEFAULT_JSONL_OPTIONS = {
     },
 };
 
-interface SettingsStates {
+export interface SettingsStates {
     type?: 'file' | 'jsonl' | 'redis';
     host?: string;
     port?: number;

packages/admin/src/src/components/BaseSettings/BaseSettingsSystem.tsx

@@ -1,16 +1,17 @@
 import React, { createRef, Component } from 'react';
 import { type Styles, withStyles } from '@mui/styles';
-import { withWidth } from '@iobroker/adapter-react-v5';
 
 import {
     Grid,
     FormControlLabel,
     Checkbox,
     TextField,
-    Paper, type Theme,
+    Paper,
 } from '@mui/material';
 
-const styles: Styles<any, any> = (theme: Theme) => ({
+import { withWidth, type IobTheme } from '@iobroker/adapter-react-v5';
+
+const styles: Styles<any, any> = (theme: IobTheme) => ({
     paper: {
         height: '100%',
         maxHeight: '100%',
@@ -30,7 +31,7 @@ const styles: Styles<any, any> = (theme: Theme) => ({
     },
 });
 
-interface SystemSettings {
+export interface SystemSettings {
     memoryLimitMB?: number;
     hostname?: string;
     statisticsInterval?: number;

packages/admin/src/src/components/Command.tsx

@@ -7,13 +7,10 @@ import {
     Grid, LinearProgress, Paper, Switch, Typography,
 } from '@mui/material';
 
-import Router from '@iobroker/adapter-react-v5/Components/Router';
-
-import type { Theme } from '@iobroker/adapter-react-v5/types';
-import type { AdminConnection } from '@iobroker/adapter-react-v5';
+import { Router, type AdminConnection, type IobTheme } from '@iobroker/adapter-react-v5';
 import Utils from '../Utils';
 
-const styles: Styles<Theme, any> = (theme: Theme) => ({
+const styles: Styles<IobTheme, any> = (theme: IobTheme) => ({
     log: {
         height: 400,
         width: 860,
@@ -128,7 +125,6 @@ class Command extends Component<CommandProps, CommandState> {
 
         this.setState({ activeCmdId });
 
-        // @ts-expect-error fixed in socket-classes
         this.props.socket.cmdExec(this.props.host.startsWith('system.host.') ? this.props.host : (`system.host.${this.props.host}`), this.props.cmd, activeCmdId)
             .catch(error =>
                 console.log(error));

packages/admin/src/src/components/CustomModal.tsx

@@ -1,9 +1,9 @@
-import React, { Component, useEffect, useState } from 'react';
+import React, { type Component, useEffect, useState } from 'react';
 import { withStyles } from '@mui/styles';
 
 import {
     Dialog, DialogActions, DialogContent,
-    DialogTitle, IconButton, TextField, Button, InputAdornment, type Theme, type Breakpoint,
+    DialogTitle, IconButton, TextField, Button, InputAdornment, type Breakpoint,
 } from '@mui/material';
 
 import {
@@ -12,9 +12,9 @@ import {
     Language as LanguageIcon,
 } from '@mui/icons-material';
 
-import { Utils, I18n } from '@iobroker/adapter-react-v5';
+import { Utils, I18n, type IobTheme } from '@iobroker/adapter-react-v5';
 
-const styles: Record<string, any> = (theme: Theme) => ({
+const styles: Record<string, any> = (theme: IobTheme) => ({
     modalDialog: {
         minWidth: 400,
         maxWidth: 800,
@@ -143,7 +143,6 @@ const CustomModal = ({
                 {I18n.t(titleButtonApply || 'Ok')}
             </Button>}
             <Button
-                // @ts-expect-error grey is valid color
                 color="grey"
                 onClick={onClose}
                 disabled={progress}

packages/admin/src/src/components/CustomPopper.tsx

@@ -7,14 +7,13 @@ import {
     Fade,
     Paper,
     IconButton,
-    type Theme,
 } from '@mui/material';
 
 import { Edit as EditIcon } from '@mui/icons-material';
 
-import { I18n } from '@iobroker/adapter-react-v5';
+import { I18n, type IobTheme } from '@iobroker/adapter-react-v5';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles((theme: IobTheme) => ({
     typography: {
         padding: theme.spacing(2),
     },

packages/admin/src/src/components/Drawer.tsx

@@ -8,7 +8,6 @@ import {
     List,
     Typography,
     SwipeableDrawer,
-    type Theme,
 } from '@mui/material';
 
 import {
@@ -29,9 +28,10 @@ import {
 } from '@mui/icons-material';
 
 import {
-    Utils, I18n, Icon, withWidth, IconLogout as LogoutIcon, type AdminConnection,
+    Utils, I18n, Icon, withWidth,
+    IconLogout as LogoutIcon, type AdminConnection,
+    type IobTheme, type ThemeType,
 } from '@iobroker/adapter-react-v5';
-import type { ThemeType } from '@iobroker/adapter-react-v5/types';
 
 import { getHref } from '@/tabs/CustomTab';
 import BasicUtils from '@/Utils';
@@ -53,7 +53,7 @@ function ucFirst(str: string): string {
     return str.substring(0, 1).toUpperCase() + str.substring(1).toLowerCase();
 }
 
-const styles: Record<string, any> = (theme: Theme) => ({
+const styles: Record<string, any> = (theme: IobTheme) => ({
     root: {
         flexShrink: 0,
         transition: theme.transitions.create('width', {