React components (#2759)

ioBroker · Oct 10, 2024 · baac030 · baac030
1 parent 308db4e
commit baac030
Show file tree

Hide file tree

Showing 437 changed files with 50,756 additions and 4,403 deletions.
diff --git a/.github/workflows/test-and-release.yml b/.github/workflows/test-and-release.yml
@@ -48,6 +48,9 @@ jobs:
             - name: 'Build backend'
               run: npm run build:backend -w packages/admin
 
+            - name: 'Build React-Components'
+              run: npm run build -w packages/react-components
+
             - name: 'Build JsonConfig'
               run: npm run build -w packages/jsonConfig
 

diff --git a/README.md b/README.md
@@ -87,6 +87,11 @@ The icons may not be reused in other projects without the proper flaticon licens
 <!--
 	### **WORK IN PROGRESS**
 -->
+### **WORK IN PROGRESS**
+
+-   (@GermanBluefox) Trying to fix a GUI build process
+-   (@GermanBluefox) Changed license icon
+
 ### 7.2.4 (2024-10-08)
 
 -   (@GermanBluefox) Corrected some GUI errors

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "dependencies": {
         "@iobroker/dm-gui-components": "file:packages/dm-gui-components",
         "@iobroker/json-config": "file:packages/jsonConfig",
+        "@iobroker/react-components": "file:packages/react-components",
         "iobroker.admin": "file:packages/admin"
     },
     "devDependencies": {
@@ -15,12 +16,19 @@
         "@alcalzone/release-script-plugin-license": "^3.7.0",
         "@alcalzone/release-script-plugin-lerna": "^3.7.0",
         "@iobroker/build-tools": "^2.0.6",
+        "@iobroker/eslint-config": "^0.1.6",
+        "@emotion/styled": "^11.13.0",
+        "@emotion/react": " ^11.13.3",
+        "@mui/icons-material": "^6.1.2",
+        "@mui/material": "^6.1.2",
+        "@mui/x-data-grid": "^7.18.0",
+        "@mui/x-date-pickers": "^7.18.0",
         "lerna": "^8.1.8"
     },
     "scripts": {
         "build": "npm run clean && lerna run build",
         "clean": "lerna run clean",
-        "install-monorepo": "npm i && npm i -w packages/dm-gui-components && npm i -w packages/jsonConfig && npm i -w packages/admin",
+        "install-monorepo": "npm i && npm i -w packages/react-components && npm i -w packages/dm-gui-components && npm i -w packages/jsonConfig && npm i -w packages/admin",
         "npm": "npm run install-monorepo",
         "start": "npm run start -w packages/admin",
         "release": "release-script -y --noPush --no-update-lockfile",

diff --git a/packages/admin/package.json b/packages/admin/package.json
@@ -52,6 +52,7 @@
         "@iobroker/eslint-config": "^0.1.6",
         "@iobroker/json-config": "file:../jsonConfig",
         "@iobroker/legacy-testing": "^1.0.13",
+        "@iobroker/types": "^7.0.0",
         "@iobroker/testing": "^5.0.0",
         "@types/archiver": "^6.0.2",
         "@types/body-parser": "^1.19.5",
@@ -97,6 +98,7 @@
         "test:gui": "mocha test/*.gui.js --exit",
         "prepublishOnly": "npm run build",
         "build": "npm run build:frontend && npm run build:backend",
+        "tsc:backend": "tsc -p tsconfig.build.json",
         "build:backend": "tsc -p tsconfig.build.json && node tasks --backend-i18n",
         "clean": "rimraf src-admin/build",
         "lint-backend": "eslint -c eslint.config.mjs src",

diff --git a/packages/admin/src-admin/craco.config.js b/packages/admin/src-admin/craco.config.js
@@ -1,6 +1,6 @@
 const path = require('node:path');
 const { ProvidePlugin } = require('webpack');
-const cracoModuleFederation = require('@iobroker/adapter-react-v5/craco-module-federation');
+const cracoModuleFederation = require('@iobroker/react-components/craco-module-federation');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 
 module.exports = {

diff --git a/packages/admin/src-admin/modulefederation.config.js b/packages/admin/src-admin/modulefederation.config.js
@@ -1,4 +1,4 @@
-const { shared } = require('@iobroker/adapter-react-v5/modulefederation.admin.config');
+const { shared } = require('@iobroker/react-components/modulefederation.admin.config');
 
 module.exports = {
     name: 'iobroker_admin',

diff --git a/packages/admin/src-admin/package.json b/packages/admin/src-admin/package.json
@@ -22,6 +22,7 @@
     "dependencies": {
         "@iobroker/dm-gui-components": "file:../../dm-gui-components",
         "@iobroker/json-config": "file:../../jsonConfig",
+        "@iobroker/react-components": "file:../../react-components",
         "http-proxy-middleware": "^3.0.2"
     },
     "devDependencies": {
@@ -33,17 +34,12 @@
         "@fnando/sparkline": "^0.3.10",
         "@foxriver76/iob-component-lib": "^0.1.6",
         "@honkhonk/vite-plugin-svgr": "^1.1.0",
-        "@iobroker/adapter-react-v5": "^7.2.4",
         "@iobroker/admin-component-easy-access": "^1.0.1",
         "@iobroker/dm-utils": "^0.5.0",
         "@iobroker/eslint-config": "^0.1.6",
         "@iobroker/js-controller-common-db": "^7.0.0",
         "@iobroker/socket-client": "^3.1.1",
         "@iobroker/types": "^7.0.0",
-        "@mui/icons-material": "^6.1.2",
-        "@mui/material": "^6.1.2",
-        "@mui/x-data-grid": "^7.18.0",
-        "@mui/x-date-pickers": "^7.18.0",
         "@originjs/vite-plugin-commonjs": "^1.0.3",
         "@react-leaflet/core": "^2.1.0",
         "@sentry/browser": "^8.33.1",
@@ -117,5 +113,5 @@
             }
         ]
     ],
-    "version": "7.2.3"
-}
+    "version": "7.2.4"
+}
diff --git a/packages/admin/src-admin/src/App.tsx b/packages/admin/src-admin/src/App.tsx
@@ -30,7 +30,7 @@ import {
     Box,
 } from '@mui/material';
 
-// @material-ui/icons
+// @mui/icons-material
 import {
     Menu as MenuIcon,
     Build as BuildIcon,
@@ -53,7 +53,7 @@ import {
     Loader,
     I18n,
     Router,
-    Confirm as ConfirmDialog,
+    DialogConfirm,
     Icon,
     withWidth,
     Theme,
@@ -64,19 +64,8 @@ import {
     type AdminConnection,
     type ThemeType,
     Utils,
-} from '@iobroker/adapter-react-v5';
-
-import enAR from '@iobroker/adapter-react-v5/i18n/en.json';
-import deAR from '@iobroker/adapter-react-v5/i18n/de.json';
-import ruAR from '@iobroker/adapter-react-v5/i18n/ru.json';
-import ptAR from '@iobroker/adapter-react-v5/i18n/pt.json';
-import nlAR from '@iobroker/adapter-react-v5/i18n/nl.json';
-import frAR from '@iobroker/adapter-react-v5/i18n/fr.json';
-import itAR from '@iobroker/adapter-react-v5/i18n/it.json';
-import esAR from '@iobroker/adapter-react-v5/i18n/es.json';
-import plAR from '@iobroker/adapter-react-v5/i18n/pl.json';
-import ukAR from '@iobroker/adapter-react-v5/i18n/uk.json';
-import zhCNAR from '@iobroker/adapter-react-v5/i18n/zh-cn.json';
+    dictionary,
+} from '@iobroker/react-components';
 
 import NotificationsDialog from '@/dialogs/NotificationsDialog';
 import type { AdminGuiConfig, CompactAdapterInfo, CompactHost, NotificationsCount } from '@/types';
@@ -556,19 +545,7 @@ class App extends Router<AppProps, AppState> {
         }
 
         // init translations
-        this.translations = {
-            en: enAR,
-            de: deAR,
-            ru: ruAR,
-            pt: ptAR,
-            nl: nlAR,
-            fr: frAR,
-            it: itAR,
-            es: esAR,
-            pl: plAR,
-            uk: ukAR,
-            'zh-cn': zhCNAR,
-        };
+        this.translations = dictionary;
 
         const translations: Record<ioBroker.Languages, Record<string, string>> = {
             en: enLocal,
@@ -2460,23 +2437,23 @@ class App extends Router<AppProps, AppState> {
         );
     }
 
-    renderConfirmDialog(): JSX.Element | null {
-        /* return <ConfirmDialog
+    renderDialogConfirm(): JSX.Element | null {
+        /* return <DialogConfirm
             onClose={() => this.closeDataNotStoredDialog()}
             open={this.state.dataNotStoredDialog}
             header={I18n.t('Please confirm')}
             onConfirm={() => this.confirmDataNotStored()}
             confirmText={I18n.t('Ok')}
         >
             {I18n.t('Some data are not stored. Discard?')}
-        </ConfirmDialog>; */
+        </DialogConfirm>; */
         return this.state.dataNotStoredDialog ? (
-            <ConfirmDialog
+            <DialogConfirm
                 title={I18n.t('Please confirm')}
                 text={I18n.t('Some data are not stored. Discard?')}
                 ok={I18n.t('Ok')}
                 cancel={I18n.t('Cancel')}
-                onClose={isYes => (isYes ? this.confirmDataNotStored() : this.closeDataNotStoredDialog())}
+                onClose={(isYes: boolean) => (isYes ? this.confirmDataNotStored() : this.closeDataNotStoredDialog())}
             />
         ) : null;
     }
@@ -3126,7 +3103,7 @@ class App extends Router<AppProps, AppState> {
                     </Paper>
                     {this.renderExpertDialog()}
                     {this.getCurrentDialog()}
-                    {this.renderConfirmDialog()}
+                    {this.renderDialogConfirm()}
                     {this.renderCommandDialog()}
                     {this.renderWizardDialog()}
                     {this.showRedirectDialog()}

diff --git a/packages/admin/src-admin/src/Workers/AdaptersWorker.tsx b/packages/admin/src-admin/src/Workers/AdaptersWorker.tsx
@@ -1,4 +1,4 @@
-import { type AdminConnection } from '@iobroker/adapter-react-v5';
+import { type AdminConnection } from '@iobroker/react-components';
 import GenericWorker, { type EventType, type GenericEvent } from './GenericWorker';
 
 export type AdapterEventType = EventType;

diff --git a/packages/admin/src-admin/src/Workers/GenericWorker.tsx b/packages/admin/src-admin/src/Workers/GenericWorker.tsx
@@ -1,4 +1,4 @@
-import type { AdminConnection } from '@iobroker/adapter-react-v5';
+import type { AdminConnection } from '@iobroker/react-components';
 import AdminUtils from '@/helpers/AdminUtils';
 
 export type EventType = 'new' | 'changed' | 'deleted';

diff --git a/packages/admin/src-admin/src/Workers/HostAdapterWorker.tsx b/packages/admin/src-admin/src/Workers/HostAdapterWorker.tsx
@@ -1,4 +1,4 @@
-import { type AdminConnection } from '@iobroker/adapter-react-v5';
+import { type AdminConnection } from '@iobroker/react-components';
 import GenericWorker, { type EventType, type GenericEvent } from './GenericWorker';
 
 export type HostAdapterEventType = EventType;

diff --git a/packages/admin/src-admin/src/Workers/HostsWorker.tsx b/packages/admin/src-admin/src/Workers/HostsWorker.tsx
@@ -1,4 +1,4 @@
-import type { AdminConnection } from '@iobroker/adapter-react-v5';
+import type { AdminConnection } from '@iobroker/react-components';
 import type { FilteredNotificationInformation } from '@iobroker/socket-client';
 import GenericWorker, { type EventType, type GenericEvent } from './GenericWorker';
 

diff --git a/packages/admin/src-admin/src/Workers/InstancesWorker.tsx b/packages/admin/src-admin/src/Workers/InstancesWorker.tsx
@@ -1,4 +1,4 @@
-import { type AdminConnection } from '@iobroker/adapter-react-v5';
+import { type AdminConnection } from '@iobroker/react-components';
 import GenericWorker, { type EventType, type GenericEvent } from './GenericWorker';
 
 export type InstanceEventType = EventType;

diff --git a/packages/admin/src-admin/src/Workers/LogsWorker.tsx b/packages/admin/src-admin/src/Workers/LogsWorker.tsx
@@ -1,4 +1,4 @@
-import { type AdminConnection } from '@iobroker/adapter-react-v5';
+import { type AdminConnection } from '@iobroker/react-components';
 import AdminUtils, { type Style } from '../helpers/AdminUtils';
 
 interface LogLine {

diff --git a/packages/admin/src-admin/src/Workers/ObjectsWorker.tsx b/packages/admin/src-admin/src/Workers/ObjectsWorker.tsx
@@ -1,4 +1,4 @@
-import { type AdminConnection } from '@iobroker/adapter-react-v5';
+import { type AdminConnection } from '@iobroker/react-components';
 import AdminUtils from '../helpers/AdminUtils';
 
 export type ObjectEventType = 'new' | 'changed' | 'deleted';
@@ -86,11 +86,11 @@ export default class ObjectsWorker {
 
         this.promise = this.socket
             .getObjects(update, true)
-            .then(objects => {
+            .then((objects: Record<string, ioBroker.Object>) => {
                 this.objects = objects;
                 return this.objects;
             })
-            .catch(e => window.alert(`Cannot get objects: ${e}`));
+            .catch((e: any) => window.alert(`Cannot get objects: ${e}`));
 
         return this.promise;
     }
@@ -102,7 +102,7 @@ export default class ObjectsWorker {
             if (this.handlers.length) {
                 this.socket
                     .subscribeObject('*', this.objectChangeHandler)
-                    .catch(e => window.alert(`Cannot subscribe on objects: ${e}`));
+                    .catch((e: any) => window.alert(`Cannot subscribe on objects: ${e}`));
 
                 void this.getObjects(true).then(
                     objects => objects && Object.keys(objects).forEach(id => this.objectChangeHandler(id, objects[id])),
@@ -120,7 +120,7 @@ export default class ObjectsWorker {
             if (this.handlers.length === 1 && this.connected) {
                 this.socket
                     .subscribeObject('*', this.objectChangeHandler)
-                    .catch(e => window.alert(`Cannot subscribe on object: ${e}`));
+                    .catch((e: any) => window.alert(`Cannot subscribe on object: ${e}`));
             }
         }
     }
@@ -134,7 +134,7 @@ export default class ObjectsWorker {
         if (!this.handlers.length && this.connected && !doNotUnsubscribe) {
             this.socket
                 .unsubscribeObject('*', this.objectChangeHandler)
-                .catch(e => window.alert(`Cannot unsubscribe on object: ${e}`));
+                .catch((e: any) => window.alert(`Cannot unsubscribe on object: ${e as Error}`));
         }
     }
 }
diff --git a/packages/admin/src-admin/src/components/Adapters/AdapterCategoryRow.tsx b/packages/admin/src-admin/src/components/Adapters/AdapterCategoryRow.tsx
@@ -6,7 +6,7 @@ import { blue, green } from '@mui/material/colors';
 
 import { ChevronRight as ChevronRightIcon, ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
 
-import { type Translate } from '@iobroker/adapter-react-v5';
+import { type Translate } from '@iobroker/react-components';
 
 import MaterialDynamicIcon from '../../helpers/MaterialDynamicIcon';
 

diff --git a/packages/admin/src-admin/src/components/Adapters/AdapterGeneric.tsx b/packages/admin/src-admin/src/components/Adapters/AdapterGeneric.tsx
@@ -39,7 +39,7 @@ import {
     Build as BuildIcon,
 } from '@mui/icons-material';
 
-import { type IobTheme, Utils } from '@iobroker/adapter-react-v5';
+import { type IobTheme, Utils } from '@iobroker/react-components';
 
 import AdapterUpdateDialog from '@/dialogs/AdapterUpdateDialog';
 import CustomModal from '@/components/CustomModal';
@@ -361,9 +361,7 @@ export default abstract class AdapterGeneric<
             >
                 <CloudOffIcon />
             </Tooltip>
-        ) : (
-            <CloudOffIcon opacity={0} />
-        );
+        ) : null;
     }
 
     renderDataSource(): JSX.Element | null {
@@ -402,12 +400,15 @@ export default abstract class AdapterGeneric<
         const adapter = this.props.context.repository[this.props.adapterName];
         const link = extractUrlLink(adapter);
 
-        return (
+        return adapter.licenseInformation?.type ? (
             <Link
                 href={link}
                 target="_blank"
                 rel="noopener"
-                sx={{ color: 'black', '&:hover': { color: 'black' } }}
+                sx={(theme: IobTheme) => ({
+                    color: theme.palette.mode === 'dark' ? 'white' : 'black',
+                    '&:hover': { color: theme.palette.mode === 'dark' ? 'white' : 'black' },
+                })}
             >
                 {adapter.licenseInformation?.type === 'paid' ? (
                     <Tooltip
@@ -430,11 +431,9 @@ export default abstract class AdapterGeneric<
                     >
                         <MonetizationOn opacity={0.5} />
                     </Tooltip>
-                ) : (
-                    <MonetizationOn opacity={0} />
-                )}
+                ) : null}
             </Link>
-        );
+        ) : null;
     }
 
     renderSentryInfo(): JSX.Element | null {
@@ -677,7 +676,8 @@ export default abstract class AdapterGeneric<
                             .getObject(`system.adapter.${this.props.adapterName}`)
                             .then(obj => {
                                 if (obj?.common) {
-                                    (obj.common as ioBroker.AdapterCommon).ignoreVersion = ignoreVersion;
+                                    // @ts-expect-error must be defined
+                                    obj.common.ignoreVersion = ignoreVersion;
                                     this.props.context.socket
                                         .setObject(obj._id, obj)
                                         .catch(error => window.alert(`Cannot write object: ${error}`));

diff --git a/packages/admin/src-admin/src/components/Adapters/AdapterInstallDialog.tsx b/packages/admin/src-admin/src/components/Adapters/AdapterInstallDialog.tsx
@@ -1,7 +1,7 @@
 import React, { Component, type JSX } from 'react';
 import semver from 'semver';
 
-import { type Translate, type AdminConnection, type ThemeType, type IobTheme, I18n } from '@iobroker/adapter-react-v5';
+import { type Translate, type AdminConnection, type ThemeType, type IobTheme, I18n } from '@iobroker/react-components';
 
 import { checkCondition, type CompactInstanceInfo } from '@/dialogs/AdapterUpdateDialog';
 

diff --git a/packages/admin/src-admin/src/components/Adapters/AdapterRow.tsx b/packages/admin/src-admin/src/components/Adapters/AdapterRow.tsx
@@ -88,10 +88,10 @@ class AdapterRow extends AdapterGeneric<AdapterGenericProps, AdapterGenericState
                 )}
                 <TableCell>
                     <div style={this.styles.flex}>
-                        {this.renderConnectionType()}
-                        {this.renderDataSource()}
-                        <div>{this.renderLicenseInfo()}</div>
-                        {this.renderSentryInfo()}
+                        {this.renderConnectionType() || <div style={{ marginLeft: 5, width: 24, height: 24 }} />}
+                        {this.renderDataSource() || <div style={{ width: 24, height: 24 }} />}
+                        {this.renderSentryInfo() || <div style={{ width: 24, height: 24 }} />}
+                        {this.renderLicenseInfo()}
                     </div>
                 </TableCell>
                 <TableCell>{this.renderInstalledVersion(true)}</TableCell>