Updated example and packages

Author: GermanBluefox

Diff for: LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2022-2024 bluefox <[email protected]>
+Copyright (c) 2022-2025 bluefox <[email protected]>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

Diff for: README.md

@@ -7,7 +7,7 @@ Build process creates files in directory build.
 All files from `admin/custom` folder must be in adapter admin directory. 
 
 To use this component in admin, add to `jsonConfig.json` file:
-```
+```json
     "myCustomAttribute": {
       "type": "custom",
       "i18n": true,
@@ -17,7 +17,7 @@ To use this component in admin, add to `jsonConfig.json` file:
 ```
 
 Explanation: 
-- `AdminComponentTemplateSet` - is unique name of this set of components (see in `src/modulefederation.config.js => name (line 14)`). It is suggested to use adapter name for it. 
+- `AdminComponentTemplateSet` - is unique name of this set of components (see in `src/modulefederation.config.js => name (line 4)`). It is suggested to use adapter name for it. 
 - `Components` - file name where all components are (`src/Components.jsx`)
 - `ExampleComponent` - name of component in `Components.js`which must be used.
 - `i18n` - if set to `true`, so the admin will load language files from `i18n`directory (in the same directory, where `customComponents.js` is), if set to language object, it will be used directly. Example: `{"easyconfig_text": {"en": "Text"}}`.
@@ -32,7 +32,7 @@ Start in `src`:
 -->
 ## Changelog
 ### **WORK IN PROGRESS**
-* (bluefox) Changed for Admin 7.4.4
+* (bluefox) Updated example and packages
 
 ### 1.0.1 (2024-07-14)
 * (bluefox) Changed for Admin 7
@@ -53,7 +53,7 @@ Start in `src`:
 ## License
 The MIT License (MIT)
 
-Copyright (c) 2022-2024 bluefox <[email protected]>
+Copyright (c) 2022-2025 bluefox <[email protected]>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

Diff for: package.json

@@ -13,15 +13,14 @@
         "2-build": "node tasks --2-build",
         "3-copy": "node tasks --3-copy",
         "npm": "npm i -f && cd src-admin && npm i -f",
-        "update-packages": "ncu --upgrade && cd src && ncu --upgrade && cd .."
+        "update-packages": "npx -y npm-check-updates --upgrade && cd src-admin && npx -y npm-check-updates --upgrade"
     },
     "dependencies": {},
     "devDependencies": {
         "@alcalzone/release-script": "^3.8.0",
         "@alcalzone/release-script-plugin-iobroker": "^3.7.2",
         "@alcalzone/release-script-plugin-license": "^3.7.0",
-        "@iobroker/build-tools": "^2.0.9",
-        "@iobroker/eslint-config": "^1.0.0",
-        "gulp": "^4.0.2"
+        "@iobroker/build-tools": "^2.0.14",
+        "@iobroker/eslint-config": "^1.0.0"
     }
 }

Diff for: src-admin/package.json

@@ -9,20 +9,21 @@
     "dependencies": {},
     "devDependencies": {
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-        "@iobroker/adapter-react-v5": "^7.4.3",
-        "@iobroker/json-config": "^7.4.3",
+        "@iobroker/adapter-react-v5": "^7.4.14",
+        "@iobroker/json-config": "^7.4.14",
+        "@mui/material": "^6.4.0",
         "prop-types": "^15.8.1",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-scripts": "^5.0.1",
         "react-refresh": "^0.16.0",
-        "@originjs/vite-plugin-federation": "^1.3.6",
+        "@originjs/vite-plugin-federation": "^1.3.9",
         "@rollup/plugin-babel": "^6.0.4",
-        "@rollup/plugin-commonjs": "^28.0.1",
-        "@rollup/plugin-node-resolve": "^15.3.0",
-        "@rollup/plugin-replace": "^6.0.1",
-        "@types/react": "^19.0.0",
-        "@types/react-dom": "^19.0.0",
+        "@rollup/plugin-commonjs": "^28.0.2",
+        "@rollup/plugin-node-resolve": "^16.0.0",
+        "@rollup/plugin-replace": "^6.0.2",
+        "@types/react": "^18.3.18",
+        "@types/react-dom": "^18.3.5",
         "@craco/craco": "^7.1.0",
         "craco-esbuild": "^0.6.1",
         "craco-module-federation": "^1.1.0"

Diff for: src-admin/src/App.jsx

@@ -2,7 +2,9 @@
 import React from 'react';
 import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
 
-import { GenericApp, I18n, Loader, ConfigGeneric, AdminConnection } from '@iobroker/adapter-react-v5';
+import { Box } from '@mui/material';
+
+import { GenericApp, I18n, Loader, AdminConnection } from '@iobroker/adapter-react-v5';
 
 import ExampleComponent from './ExampleComponent';
 
@@ -49,9 +51,18 @@ class App extends GenericApp {
                     <Box sx={styles.app}>
                         <div style={styles.item}>
                             <ExampleComponent
-                                socket={this.socket}
-                                themeType={this.state.themeType}
-                                themeName={this.state.themeName}
+                                // Admin will provide the following object to the component
+                                oContext={{
+                                    socket: this.socket,
+                                    themeType: this.state.themeType,
+                                    adapterName: 'example',
+                                    dateFormat: 'DD.MM.YYYY',
+                                    instance: 0,
+                                    isFloatComma: true,
+                                    theme: this.state.theme,
+                                    _themeName: this.state.themeName,
+                                    forceUpdate: () => {},
+                                }}
                                 attr="myCustomAttribute"
                                 data={this.state.data}
                                 onError={() => {}}
@@ -69,4 +80,4 @@ class App extends GenericApp {
     }
 }
 
-export default withStyles(styles)(App);
+export default App;

Diff for: tasks.js

@@ -1,6 +1,4 @@
-const fs = require('node:fs');
-const cp = require('node:child_process');
-const { deleteFoldersRecursive, npmInstall, buildReact, copyFiles } = require('@iobroker/build-tools')
+const { deleteFoldersRecursive, npmInstall, buildReact, copyFiles } = require('@iobroker/build-tools');
 const src = `${__dirname}/src-admin/`;
 
 function clean() {
@@ -18,11 +16,9 @@ function copyAllFiles() {
 if (process.argv.includes('--0-clean')) {
     clean();
 } else if (process.argv.includes('--1-npm')) {
-    npmInstall(src)
-        .catch(e => console.error(`Cannot install npm: ${e}`));
+    npmInstall(src).catch(e => console.error(`Cannot install npm: ${e}`));
 } else if (process.argv.includes('--2-build')) {
-    buildReact(src, { craco: true })
-        .catch(e => console.error(`Cannot build: ${e}`));
+    buildReact(src, { craco: true }).catch(e => console.error(`Cannot build: ${e}`));
 } else if (process.argv.includes('--3-copy')) {
     copyAllFiles();
 } else {
@@ -33,5 +29,5 @@ if (process.argv.includes('--0-clean')) {
         .catch(e => {
             console.error(e);
             process.exit(2);
-        })
+        });
 }