@iobroker/gui-components 8.0.2 → 10.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iobroker/gui-components",
-  "version": "8.0.2",
-  "description": "React components to develop ioBroker interfaces with react.",
+  "version": "10.0.1",
+  "description": "Shared React components (React 19 / MUI 9) to develop ioBroker interfaces. Successor of @iobroker/adapter-react-v5.",
   "author": {
     "name": "bluefox",
     "email": "dogafox@gmail.com"
@@ -9,22 +9,22 @@
   "scripts": {
     "prepublishOnly": "npm run build",
     "build:ts": "tsc -p tsconfig.build.json",
-    "build": "node tasks --0-clean && node tasks --2-copy && node tasks --3-patchReadme && npm run build:ts",
+    "build": "node tasks.ts --0-clean && node tasks.ts --2-copy && node tasks.ts --3-patchReadme && npm run build:ts",
     "release": "release-script --noPush --yes --lf",
     "release-patch": "release-script patch --yes --lf",
     "release-minor": "release-script minor --yes --lf",
     "release-major": "release-script major --yes --lf",
     "update-packages": "npx -y npm-check-updates --upgrade",
-    "0-clean": "node tasks --0-clean",
+    "0-clean": "node tasks.ts --0-clean",
     "1-build": "tsc -p tsconfig.build.json",
-    "2-copy": "node tasks --2-copy",
-    "3-patchReadme": "node tasks --3-patchReadme",
-    "npm": "npm i -f",
+    "2-copy": "node tasks.ts --2-copy",
+    "3-patchReadme": "node tasks.ts --3-patchReadme",
+    "npm": "npm i",
     "lint": "eslint -c eslint.config.mjs src"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ioBroker/gui-components.git"
+    "url": "git+https://github.com/ioBroker/adapter-react-v5.git"
   },
   "publishConfig": {
     "access": "public"
@@ -41,46 +41,61 @@
     "i18n/",
     "index.css",
     "LICENSE",
-    "tasksExample.js",
+    "tasksExample.ts",
     "craco-module-federation.js",
     "modulefederation.admin.config.d.ts",
     "modulefederation.admin.config.js"
   ],
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/ioBroker/gui-components/issues"
+    "url": "https://github.com/ioBroker/adapter-react-v5/issues"
   },
-  "homepage": "https://github.com/ioBroker/gui-components#readme",
+  "homepage": "https://github.com/ioBroker/adapter-react-v5#readme",
   "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@iobroker/js-controller-common": "^7.0.8-alpha.7-20250928-40cb80c18",
-    "@iobroker/js-controller-common-db": "^7.0.8-alpha.7-20250928-40cb80c18",
-    "@iobroker/socket-client": "5.0.2",
-    "@iobroker/type-detector": "^4.5.1",
-    "@iobroker/types": "^7.0.8-alpha.7-20250928-40cb80c18",
-    "@mui/icons-material": "^6.5.0",
-    "@mui/material": "^6.5.0",
-    "@sentry/browser": "^10.8.0",
-    "cronstrue": "^2.61.0",
-    "file-selector": "^2.1.2",
+    "@iobroker/js-controller-common": "^7.2.2",
+    "@iobroker/js-controller-common-db": "^7.2.2",
+    "@iobroker/socket-client": "^5.2.1",
+    "@iobroker/type-detector": "^5.0.15",
+    "@iobroker/types": "^7.2.2",
+    "@sentry/browser": "^10.68.0",
+    "cronstrue": "^3.24.0",
+    "file-selector": "^4.0.2",
     "react-color": "^2.19.3",
-    "react-colorful": "^5.6.1",
+    "react-colorful": "^5.8.0",
     "react-cropper": "^2.3.3",
-    "react-dropzone": "^14.3.8",
-    "react-icons": "^5.4.0",
-    "react-inlinesvg": "^4.2.0"
+    "react-dropzone": "^19.1.1",
+    "react-icons": "^5.7.0",
+    "react-inlinesvg": "^4.5.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.0.0"
   },
   "devDependencies": {
-    "@alcalzone/release-script": "^5.0.0",
-    "@alcalzone/release-script-plugin-license": "^4.0.0",
-    "@iobroker/build-tools": "^2.0.15",
-    "@iobroker/eslint-config": "^2.2.0",
-    "@types/node": "^22.15.30",
-    "@types/react": "^18.3.23",
+    "@alcalzone/release-script": "^5.2.1",
+    "@alcalzone/release-script-plugin-license": "^5.2.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@iobroker/build-tools": "^3.0.1",
+    "@iobroker/eslint-config": "^2.3.4",
+    "@mui/icons-material": "^9.2.0",
+    "@mui/material": "^9.2.0",
+    "@types/node": "^26.1.1",
+    "@types/react": "^19.2.17",
     "@types/react-color": "^3.0.13",
-    "ajv": "^8.17.1",
+    "@types/react-dom": "^19.2.3",
+    "ajv": "^8.20.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "ts-node": "^10.9.2",
-    "typescript": "~5.9.3"
+    "typescript": "~6.0.3"
+  },
+  "overrides": {
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3"
   }
 }

package/tasksExample.ts

@@ -0,0 +1,93 @@
+/**
+ * Copyright 2024-2026 bluefox <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ * Example of a build script for an adapter GUI that uses `@iobroker/gui-components`.
+ * Copy this file into the root of your adapter as `tasks.ts`.
+ *
+ * The GUI sources are expected in the `src` directory and are built with vite
+ * into `src/build` (see `build.outDir` in `src/vite.config.ts`).
+ * The result is copied into the `admin` directory of the adapter.
+ *
+ * It is executed directly by node (>= 22.18 / >= 23.6), which strips the types at load time,
+ * so it must stay CommonJS and use only erasable TypeScript syntax: the `typeof import(...)`
+ * annotations provide full typings while `require()` keeps `__dirname` available.
+ */
+'use strict';
+
+const fs: typeof import('node:fs') = require('node:fs');
+const {
+    deleteFoldersRecursive,
+    npmInstall,
+    buildReact,
+    copyFiles,
+}: typeof import('@iobroker/build-tools') = require('@iobroker/build-tools');
+
+const SRC = 'src';
+
+/** Inline script in index.html that loads socket.io from the admin instance */
+const SOCKET_IO_LOADER =
+    /<script>\s*(?:var|const|let)\s+script\s*=\s*document\.createElement\(["']script["']\)[\s\S]*?<\/script>/;
+
+function copyAllFiles(): void {
+    deleteFoldersRecursive('admin', ['.png', '.json', 'i18n']);
+
+    copyFiles([`${SRC}/build/**/*`, `!${SRC}/build/**/*.map`], 'admin');
+}
+
+function clean(): void {
+    deleteFoldersRecursive('admin', ['.png', '.json', 'i18n']);
+    deleteFoldersRecursive(`${SRC}/build`);
+}
+
+function installNpmLocal(): Promise<void> {
+    if (fs.existsSync(`${SRC}/node_modules`)) {
+        return Promise.resolve();
+    }
+    return npmInstall(`${__dirname.replace(/\\/g, '/')}/${SRC}/`);
+}
+
+/**
+ * In the development mode socket.io is loaded from the admin instance on port 8081.
+ * In the production build it must be loaded from the admin instance that serves the GUI.
+ */
+function patchFiles(): void {
+    for (const file of [`${__dirname}/admin/index.html`, `${__dirname}/${SRC}/build/index.html`]) {
+        if (fs.existsSync(file)) {
+            const code = fs.readFileSync(file).toString('utf8');
+            fs.writeFileSync(
+                file,
+                code.replace(
+                    SOCKET_IO_LOADER,
+                    `<script type="text/javascript" src="./../../lib/js/socket.io.js"></script>`,
+                ),
+            );
+        }
+    }
+}
+
+if (process.argv.find(arg => arg === '--0-clean')) {
+    clean();
+} else if (process.argv.find(arg => arg === '--1-npm')) {
+    npmInstall(`${__dirname.replace(/\\/g, '/')}/${SRC}/`).catch((e: unknown) => {
+        console.error(`Cannot install: ${e}`);
+        process.exit(1);
+    });
+} else if (process.argv.find(arg => arg === '--2-build')) {
+    buildReact(SRC, { rootDir: __dirname, vite: true }).catch((e: unknown) => {
+        console.error(`Cannot build: ${e}`);
+        process.exit(1);
+    });
+} else if (process.argv.find(arg => arg === '--3-copy')) {
+    copyAllFiles();
+} else if (process.argv.find(arg => arg === '--4-patch')) {
+    patchFiles();
+} else {
+    clean();
+
+    installNpmLocal()
+        .then(() => buildReact(SRC, { rootDir: __dirname, vite: true }))
+        .then(() => copyAllFiles())
+        .then(() => patchFiles());
+}