@iobroker/adapter-react-v5 7.0.2 → 7.1.0

package/src/icons/IconExpert.tsx

@@ -2,17 +2,25 @@ import React from 'react';
 
 import type IconProps from './IconProps';
 
-const ExpertIcon = (props: IconProps) => <svg
-    onClick={e => props.onClick && props.onClick(e)}
-    viewBox="0 0 486 486"
-    width={props.width || (props.fontSize === 'small' ? 16 : 20)}
-    height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
-    xmlns="http://www.w3.org/2000/svg"
-    className={props.className}
-    style={props.style}
->
-    <path fill="currentColor" d="m414.928297,149.715165 c-2.639376,-57.222555 -35.669446,-106.505345 -83.345894,-132.039151 c-3.758948,-2.049842 -7.636885,-3.932022 -11.590542,-5.641125 c-19.303146,-8.394083 -40.607459,-13.050853 -63.004303,-13.050853 c-84.113909,0 -152.791790,65.703174 -157.718988,148.605566 l0.043268,-0.010816 v0.281245 c0,3.061243 -0.146031,16.750306 -0.146031,16.750306 l-2.352723,5.224668 h15.744315 c5.916964,-19.384275 24.078904,-32.635245 45.513024,-32.635245 c26.231510,0 47.573684,21.915481 47.573684,48.146991 c0,26.226103 -21.342174,47.146409 -47.573684,47.146409 c-25.111939,0 -45.734774,-19.735831 -47.443879,-44.658471 h-18.789334 c-0.400232,0 -0.778832,0.638209 -1.162839,0.584122 l-19.762875,55.199753 c-2.774590,7.696379 2.926030,16.214860 11.103771,16.214860 h17.020735 l-0.129805,87.899899 c0,17.356066 14.073071,31.174935 31.429136,31.174935 h56.205745 v82.648189 c0,12.877778 12.937273,22.580734 25.815051,22.580734 h144.597825 c12.877778,0 23.429877,-9.702955 23.429877,-22.580734 v-166.037352 c0,-22.645636 5.976457,-44.761234 16.561008,-64.789128 c11.055093,-20.925714 17.523731,-44.620611 18.129489,-69.792045 c0.027042,-1.260193 0.037858,-2.552839 0.037858,-3.845485 c0,-2.466302 -0.070310,-4.938014 -0.183890,-7.377273 zm-155.393308,-11.731165 h-13.456494 v13.559257 c0,4.732489 -4.267352,8.567157 -8.999842,8.567157 c-4.727079,0 -8.999842,-3.834667 -8.999842,-8.567157 v-13.559257 h-12.185483 c-4.732489,0 -8.567157,-4.267352 -8.567157,-8.999842 c0,-4.727079 3.834667,-8.999842 8.567157,-8.999842 h12.185483 v-12.077311 c0,-4.732489 4.272762,-8.567157 8.999842,-8.567157 c4.732489,0 8.999842,3.834667 8.999842,8.567157 v12.077311 h13.456494 c4.727079,0 8.567157,4.272762 8.567157,8.999842 c0,4.732489 -3.840077,8.999842 -8.567157,8.999842 zm0,0" />
-    <path fill="currentColor" d="m187.695312 285.875c3.9375-3.980469 6.414063-9.449219 6.414063-15.523438 0-12.128906-9.855469-21.980468-21.984375-21.980468-6.007812 0-11.472656 2.410156-15.457031 6.347656-4.023438 4.003906-6.523438 9.539062-6.523438 15.636719 0 12.125 9.855469 21.980469 21.980469 21.980469 6.078125 0 11.585938-2.476563 15.570312-6.460938zm0 0" />
-</svg>;
+const ExpertIcon = (props: IconProps): React.JSX.Element => (
+    <svg
+        onClick={e => props.onClick && props.onClick(e)}
+        viewBox="0 0 486 486"
+        width={props.width || (props.fontSize === 'small' ? 16 : 20)}
+        height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
+        xmlns="http://www.w3.org/2000/svg"
+        className={props.className}
+        style={props.style}
+    >
+        <path
+            fill="currentColor"
+            d="m414.928297,149.715165 c-2.639376,-57.222555 -35.669446,-106.505345 -83.345894,-132.039151 c-3.758948,-2.049842 -7.636885,-3.932022 -11.590542,-5.641125 c-19.303146,-8.394083 -40.607459,-13.050853 -63.004303,-13.050853 c-84.113909,0 -152.791790,65.703174 -157.718988,148.605566 l0.043268,-0.010816 v0.281245 c0,3.061243 -0.146031,16.750306 -0.146031,16.750306 l-2.352723,5.224668 h15.744315 c5.916964,-19.384275 24.078904,-32.635245 45.513024,-32.635245 c26.231510,0 47.573684,21.915481 47.573684,48.146991 c0,26.226103 -21.342174,47.146409 -47.573684,47.146409 c-25.111939,0 -45.734774,-19.735831 -47.443879,-44.658471 h-18.789334 c-0.400232,0 -0.778832,0.638209 -1.162839,0.584122 l-19.762875,55.199753 c-2.774590,7.696379 2.926030,16.214860 11.103771,16.214860 h17.020735 l-0.129805,87.899899 c0,17.356066 14.073071,31.174935 31.429136,31.174935 h56.205745 v82.648189 c0,12.877778 12.937273,22.580734 25.815051,22.580734 h144.597825 c12.877778,0 23.429877,-9.702955 23.429877,-22.580734 v-166.037352 c0,-22.645636 5.976457,-44.761234 16.561008,-64.789128 c11.055093,-20.925714 17.523731,-44.620611 18.129489,-69.792045 c0.027042,-1.260193 0.037858,-2.552839 0.037858,-3.845485 c0,-2.466302 -0.070310,-4.938014 -0.183890,-7.377273 zm-155.393308,-11.731165 h-13.456494 v13.559257 c0,4.732489 -4.267352,8.567157 -8.999842,8.567157 c-4.727079,0 -8.999842,-3.834667 -8.999842,-8.567157 v-13.559257 h-12.185483 c-4.732489,0 -8.567157,-4.267352 -8.567157,-8.999842 c0,-4.727079 3.834667,-8.999842 8.567157,-8.999842 h12.185483 v-12.077311 c0,-4.732489 4.272762,-8.567157 8.999842,-8.567157 c4.732489,0 8.999842,3.834667 8.999842,8.567157 v12.077311 h13.456494 c4.727079,0 8.567157,4.272762 8.567157,8.999842 c0,4.732489 -3.840077,8.999842 -8.567157,8.999842 zm0,0"
+        />
+        <path
+            fill="currentColor"
+            d="m187.695312 285.875c3.9375-3.980469 6.414063-9.449219 6.414063-15.523438 0-12.128906-9.855469-21.980468-21.984375-21.980468-6.007812 0-11.472656 2.410156-15.457031 6.347656-4.023438 4.003906-6.523438 9.539062-6.523438 15.636719 0 12.125 9.855469 21.980469 21.980469 21.980469 6.078125 0 11.585938-2.476563 15.570312-6.460938zm0 0"
+        />
+    </svg>
+);
 
 export default ExpertIcon;

package/src/icons/IconFx.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
 import type IconProps from './IconProps';
 
-const IconFx = (props: IconProps) => <svg
-    xmlns="http://www.w3.org/2000/svg"
-    onClick={e => props.onClick && props.onClick(e)}
-    viewBox="0 0 95 95"
-    width={props.width || (props.fontSize === 'small' ? 16 : 20)}
-    height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
-    className={props.className}
-    style={props.style}
->
-    <path
-        fill="currentColor"
-        d="M93.779,63.676c-0.981-1.082-2.24-1.653-3.639-1.653c-1.145,0-3.953,0.396-5.318,4.062
+const IconFx = (props: IconProps): React.JSX.Element => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        onClick={e => props.onClick && props.onClick(e)}
+        viewBox="0 0 95 95"
+        width={props.width || (props.fontSize === 'small' ? 16 : 20)}
+        height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
+        className={props.className}
+        style={props.style}
+    >
+        <path
+            fill="currentColor"
+            d="M93.779,63.676c-0.981-1.082-2.24-1.653-3.639-1.653c-1.145,0-3.953,0.396-5.318,4.062
         c-0.344,0.922-0.443,1.413-0.907,1.363c-0.786-0.078-3.845-3.346-4.845-8.145l-2.482-11.6c1.961-3.177,3.977-5.629,5.988-7.292
         c1.08-0.882,2.314-1.349,3.808-1.43c3.815-0.26,5.203-0.74,6.14-1.399c1.547-1.115,2.397-2.728,2.397-4.542
         c0-1.596-0.604-3.019-1.75-4.115c-1.106-1.059-2.581-1.618-4.26-1.618c-2.468,0-5.239,1.142-8.474,3.49
@@ -30,7 +31,8 @@ const IconFx = (props: IconProps) => <svg
         c1.357,1.146,3.034,1.728,4.981,1.728c2.414,0,4.884-0.921,7.344-2.737c2.053-1.519,4.697-4.526,8.074-9.189
         c2.17,6.24,5.248,10.252,6.714,11.927c2.313,2.644,6.049,4.22,9.993,4.22c3.348,0,5.244-1.402,6.916-2.641l0.148-0.109
         c2.926-2.164,3.54-4.545,3.54-6.166C95.174,65.965,94.691,64.679,93.779,63.676z"
-    />
-</svg>;
+        />
+    </svg>
+);
 
 export default IconFx;

package/src/icons/IconInstance.tsx

@@ -2,19 +2,21 @@ import React from 'react';
 import type IconProps from './IconProps';
 
 // Icon copied from https://github.com/FortAwesome/Font-Awesome/blob/0d1f27efb836eb2ab994ba37221849ed64a73e5c/svgs/regular/
-const IconInstance = (props: IconProps) => <svg
-    xmlns="http://www.w3.org/2000/svg"
-    onClick={e => props.onClick && props.onClick(e)}
-    viewBox="0 0 512 512"
-    width={props.width || (props.fontSize === 'small' ? 16 : 20)}
-    height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
-    className={props.className}
-    style={props.style}
->
-    <path
-        fill="currentColor"
-        d="M448 0L320 96v62.06l-83.03 83.03c6.79 4.25 13.27 9.06 19.07 14.87 5.8 5.8 10.62 12.28 14.87 19.07L353.94 192H416l96-128-64-64zM128 278.59L10.92 395.67c-14.55 14.55-14.55 38.15 0 52.71l52.7 52.7c14.56 14.56 38.15 14.56 52.71 0L233.41 384c29.11-29.11 29.11-76.3 0-105.41s-76.3-29.11-105.41 0z"
-    />
-</svg>;
+const IconInstance = (props: IconProps): React.JSX.Element => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        onClick={e => props.onClick && props.onClick(e)}
+        viewBox="0 0 512 512"
+        width={props.width || (props.fontSize === 'small' ? 16 : 20)}
+        height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
+        className={props.className}
+        style={props.style}
+    >
+        <path
+            fill="currentColor"
+            d="M448 0L320 96v62.06l-83.03 83.03c6.79 4.25 13.27 9.06 19.07 14.87 5.8 5.8 10.62 12.28 14.87 19.07L353.94 192H416l96-128-64-64zM128 278.59L10.92 395.67c-14.55 14.55-14.55 38.15 0 52.71l52.7 52.7c14.56 14.56 38.15 14.56 52.71 0L233.41 384c29.11-29.11 29.11-76.3 0-105.41s-76.3-29.11-105.41 0z"
+        />
+    </svg>
+);
 
 export default IconInstance;

package/src/icons/IconLogout.tsx

@@ -1,22 +1,23 @@
 import React from 'react';
 import type IconProps from './IconProps';
 
-const IconLogout = (props: IconProps) => <svg
-    xmlns="http://www.w3.org/2000/svg"
-    onClick={e => props.onClick && props.onClick(e)}
-    viewBox="0 0 512 512"
-    width={props.width || (props.fontSize === 'small' ? 16 : 20)}
-    height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
-    className={props.className}
-    style={props.style}
->
-    <path
-        fill="currentColor"
-        d="M510.371,226.513c-1.088-2.603-2.645-4.971-4.629-6.955l-63.979-63.979c-8.341-8.32-21.824-8.32-30.165,0 c-8.341,8.341-8.341,21.845,0,30.165l27.584,27.584H320.013c-11.797,0-21.333,9.557-21.333,21.333s9.536,21.333,21.333,21.333 h119.168l-27.584,27.584c-8.341,8.341-8.341,21.845,0,30.165c4.16,4.181,9.621,6.251,15.083,6.251s10.923-2.069,15.083-6.251 l63.979-63.979c1.984-1.963,3.541-4.331,4.629-6.955C512.525,237.606,512.525,231.718,510.371,226.513z"
-    />
-    <path
-        fill="currentColor"
-        d="M362.68,298.667c-11.797,0-21.333,9.557-21.333,21.333v106.667h-85.333V85.333c0-9.408-6.187-17.728-15.211-20.437
+const IconLogout = (props: IconProps): React.JSX.Element => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        onClick={e => props.onClick && props.onClick(e)}
+        viewBox="0 0 512 512"
+        width={props.width || (props.fontSize === 'small' ? 16 : 20)}
+        height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
+        className={props.className}
+        style={props.style}
+    >
+        <path
+            fill="currentColor"
+            d="M510.371,226.513c-1.088-2.603-2.645-4.971-4.629-6.955l-63.979-63.979c-8.341-8.32-21.824-8.32-30.165,0 c-8.341,8.341-8.341,21.845,0,30.165l27.584,27.584H320.013c-11.797,0-21.333,9.557-21.333,21.333s9.536,21.333,21.333,21.333 h119.168l-27.584,27.584c-8.341,8.341-8.341,21.845,0,30.165c4.16,4.181,9.621,6.251,15.083,6.251s10.923-2.069,15.083-6.251 l63.979-63.979c1.984-1.963,3.541-4.331,4.629-6.955C512.525,237.606,512.525,231.718,510.371,226.513z"
+        />
+        <path
+            fill="currentColor"
+            d="M362.68,298.667c-11.797,0-21.333,9.557-21.333,21.333v106.667h-85.333V85.333c0-9.408-6.187-17.728-15.211-20.437
         l-74.091-22.229h174.635v106.667c0,11.776,9.536,21.333,21.333,21.333s21.333-9.557,21.333-21.333v-128
         C384.013,9.557,374.477,0,362.68,0H21.347c-0.768,0-1.451,0.32-2.197,0.405c-1.003,0.107-1.92,0.277-2.88,0.512
         c-2.24,0.576-4.267,1.451-6.165,2.645c-0.469,0.299-1.045,0.32-1.493,0.661C8.44,4.352,8.376,4.587,8.205,4.715
@@ -24,7 +25,8 @@ const IconLogout = (props: IconProps) => <svg
         c-0.107,0.64,0.085,1.237,0.064,1.856c-0.021,0.427-0.299,0.811-0.299,1.237V448c0,10.176,7.189,18.923,17.152,20.907
         l213.333,42.667c1.387,0.299,2.795,0.427,4.181,0.427c4.885,0,9.685-1.685,13.525-4.843c4.928-4.053,7.808-10.091,7.808-16.491
         v-21.333H362.68c11.797,0,21.333-9.557,21.333-21.333V320C384.013,308.224,374.477,298.667,362.68,298.667z"
-    />
-</svg>;
+        />
+    </svg>
+);
 
 export default IconLogout;

package/src/icons/IconNoIcon.tsx

@@ -1,19 +1,21 @@
 import React from 'react';
 import type IconProps from './IconProps';
 
-const IconNoIcon = (props: IconProps) => <svg
-    xmlns="http://www.w3.org/2000/svg"
-    onClick={e => props.onClick && props.onClick(e)}
-    viewBox="0 0 512 512"
-    width={props.width || (props.fontSize === 'small' ? 16 : 20)}
-    height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
-    className={props.className}
-    style={props.style}
->
-    <path
-        fill="#EE3333"
-        d="M256,0C114.844,0,0,114.844,0,256s114.844,256,256,256s256-114.844,256-256S397.156,0,256,0z M256,448 c-105.865,0-192-86.135-192-192c0-40.406,12.25-78.604,35.542-111.198l267.656,267.656C334.604,435.75,296.406,448,256,448z M412.458,367.198L144.802,99.542C177.396,76.25,215.594,64,256,64c105.865,0,192,86.135,192,192 C448,296.406,435.75,334.604,412.458,367.198z"
-    />
-</svg>;
+const IconNoIcon = (props: IconProps): React.JSX.Element => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        onClick={e => props.onClick && props.onClick(e)}
+        viewBox="0 0 512 512"
+        width={props.width || (props.fontSize === 'small' ? 16 : 20)}
+        height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
+        className={props.className}
+        style={props.style}
+    >
+        <path
+            fill="#EE3333"
+            d="M256,0C114.844,0,0,114.844,0,256s114.844,256,256,256s256-114.844,256-256S397.156,0,256,0z M256,448 c-105.865,0-192-86.135-192-192c0-40.406,12.25-78.604,35.542-111.198l267.656,267.656C334.604,435.75,296.406,448,256,448z M412.458,367.198L144.802,99.542C177.396,76.25,215.594,64,256,64c105.865,0,192,86.135,192,192 C448,296.406,435.75,334.604,412.458,367.198z"
+        />
+    </svg>
+);
 
 export default IconNoIcon;

package/src/icons/IconOpen.tsx

@@ -1,17 +1,22 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import type IconProps from './IconProps';
 
 // Icon copied from https://github.com/FortAwesome/Font-Awesome/blob/0d1f27efb836eb2ab994ba37221849ed64a73e5c/svgs/regular/
-const IconOpen = (props: IconProps) => <svg
-    xmlns="http://www.w3.org/2000/svg"
-    onClick={e => props.onClick && props.onClick(e)}
-    viewBox="0 0 650 512"
-    width={props.width || (props.fontSize === 'small' ? 16 : 20)}
-    height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
-    className={props.className}
-    style={props.style}
->
-    <path fill="currentColor" d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z" />
-</svg>;
+const IconOpen = (props: IconProps): JSX.Element => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        onClick={e => props.onClick && props.onClick(e)}
+        viewBox="0 0 650 512"
+        width={props.width || (props.fontSize === 'small' ? 16 : 20)}
+        height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
+        className={props.className}
+        style={props.style}
+    >
+        <path
+            fill="currentColor"
+            d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"
+        />
+    </svg>
+);
 
 export default IconOpen;

package/src/icons/IconProps.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { CSSProperties, MouseEvent } from 'react';
 
 export default interface IconProps {
     /**  The width in pixels or percentage of the icon. */
@@ -6,10 +6,11 @@ export default interface IconProps {
     /**  The height in pixels or percentage of the icon. */
     height?: number | string;
     /** Click handler. */
-    onClick?: (e: React.MouseEvent) => void;
+    onClick?: (e: MouseEvent) => void;
     /** The class name for the SVG element. */
     className?: string;
     /** Styles for the SVG element. */
-    style?: React.CSSProperties;
+    style?: CSSProperties;
+    /** The font size of the icon. */
     fontSize?: 'small';
 }

package/src/icons/IconState.tsx

@@ -1,17 +1,38 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import type IconProps from './IconProps';
 
-const IconState = (props: IconProps) => <svg
-    xmlns="http://www.w3.org/2000/svg"
-    onClick={e => props.onClick && props.onClick(e)}
-    viewBox="0 0 320 320"
-    width={props.width || (props.fontSize === 'small' ? 16 : 20)}
-    height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
-    className={props.className}
-    style={props.style}
->
-    <rect fill="none" rx="32" height="272" width="267" y="25" x="25" strokeWidth="15" stroke="currentColor" />
-    <ellipse fill="none" ry="54" rx="54" cy="160" cx="160" fillOpacity="null" strokeOpacity="null" strokeWidth="15" stroke="currentColor" />
-</svg>;
+const IconState = (props: IconProps): JSX.Element => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        onClick={e => props.onClick && props.onClick(e)}
+        viewBox="0 0 320 320"
+        width={props.width || (props.fontSize === 'small' ? 16 : 20)}
+        height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}
+        className={props.className}
+        style={props.style}
+    >
+        <rect
+            fill="none"
+            rx="32"
+            height="272"
+            width="267"
+            y="25"
+            x="25"
+            strokeWidth="15"
+            stroke="currentColor"
+        />
+        <ellipse
+            fill="none"
+            ry="54"
+            rx="54"
+            cy="160"
+            cx="160"
+            fillOpacity="null"
+            strokeOpacity="null"
+            strokeWidth="15"
+            stroke="currentColor"
+        />
+    </svg>
+);
 
 export default IconState;

package/src/index.css

@@ -12,7 +12,8 @@ html {
 body {
     margin: 0;
     padding: 0;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+        'Droid Sans', 'Helvetica Neue', sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     width: 100%;
@@ -52,4 +53,4 @@ body {
     to {
         background-color: #58c458;
     }
-}
+}

package/tasks.js

@@ -0,0 +1,91 @@
+/**
+ * Copyright 2024 bluefox <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ **/
+'use strict';
+
+const fs = require('node:fs');
+const { deleteFoldersRecursive, npmInstall, buildReact, copyFiles } = require('@iobroker/build-tools');
+
+const SRC = 'src';
+
+function copyAllFiles() {
+    deleteFoldersRecursive('admin', ['.png', '.json', 'i18n']);
+
+    copyFiles(
+        [
+            `${SRC}/build/*`,
+            `!${SRC}/build/index.html`,
+            `!${SRC}/build/static/js/main.*.chunk.js`,
+            `!${SRC}/build/static/media/*.svg`,
+            `!${SRC}/build/static/media/*.txt`,
+            `!${SRC}/build/i18n/*`,
+            `!${SRC}/build/i18n`,
+        ],
+        'admin',
+    );
+
+    copyFiles(`${SRC}/build/index.html`, 'admin');
+
+    copyFiles(`${SRC}/build/static/js/main.*.chunk.js`, 'admin/static/js');
+}
+
+function clean() {
+    deleteFoldersRecursive('admin', ['.png', '.json', 'i18n']);
+    deleteFoldersRecursive(`${SRC}/build`);
+}
+
+function installNpmLocal() {
+    if (fs.existsSync(`${SRC}/node_modules`)) {
+        return Promise.resolve();
+    }
+    return npmInstall(`${__dirname.replace(/\\/g, '/')}/${SRC}/`);
+}
+
+function patchFiles() {
+    if (fs.existsSync(`${__dirname}/admin/index.html`)) {
+        let code = fs.readFileSync(`${__dirname}/admin/index.html`).toString('utf8');
+        code = code.replace(
+            /<script>var script=document\.createElement\("script"\).+?<\/script>/,
+            `<script type="text/javascript" src="./../../lib/js/socket.io.js"></script>`,
+        );
+
+        fs.writeFileSync(`${__dirname}/admin/index.html`, code);
+    }
+    if (fs.existsSync(`${__dirname}/${SRC}/build/index.html`)) {
+        let code = fs.readFileSync(`${__dirname}/${SRC}/build/index.html`).toString('utf8');
+        code = code.replace(
+            /<script>var script=document\.createElement\("script"\).+?<\/script>/,
+            `<script type="text/javascript" src="./../../lib/js/socket.io.js"></script>`,
+        );
+
+        fs.writeFileSync(`${SRC}/build/index.html`, code);
+    }
+}
+
+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 => {
+        console.error(`Cannot install: ${e}`);
+        process.exit(1);
+    });
+} else if (process.argv.find(arg => arg === '--2-build')) {
+    buildReact(SRC, { rootDir: __dirname }).catch(e => {
+        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 }))
+        .then(() => copyAllFiles())
+        .then(() => patchFiles());
+}

package/types.d.ts

@@ -0,0 +1,141 @@
+import type { JSX, CSSProperties } from 'react';
+import type { Theme as MuiTheme, Palette as MuiPalette } from '@mui/material/styles';
+import type { AdminConnection, Connection } from '@iobroker/socket-client';
+import type LegacyConnection from './LegacyConnection';
+
+export type Translate = (key: string, ...args: (string | number | boolean)[]) => string;
+
+/**
+ * Properties for the connection to the admin or web instance.
+ */
+export interface ConnectionProps {
+    /** The socket name. */
+    name?: string;
+    /** State IDs to always automatically subscribe to. */
+    autoSubscribes?: string[];
+    /** Automatically subscribe to logging. */
+    autoSubscribeLog?: boolean;
+    /** The protocol to use for the socket.io connection. */
+    protocol?: string;
+    /** The host name to use for the socket.io connection. */
+    host?: string;
+    /** The port to use for the socket.io connection. */
+    port?: string | number;
+    /** The socket.io connection timeout. */
+    ioTimeout?: number;
+    /** Flag to indicate if all objects should be loaded or not. Default true (not loaded) */
+    doNotLoadAllObjects?: boolean;
+    /** Flag to indicate if AccessControlList for current user will be loaded or not. Default true (not loaded) */
+    doNotLoadACL?: boolean;
+    /** Progress callback. */
+    onProgress?: (progress: number) => void;
+    /** Ready callback. */
+    onReady?: (objects: Record<string, ioBroker.Object>) => void;
+    /** Log callback. */
+    onLog?: (text: string) => void;
+    /** Error callback. */
+    onError?: (error: any) => void;
+    /** Object change callback. */
+    onObjectChange?: ioBroker.ObjectChangeHandler;
+    /** Language callback */
+    onLanguage?: (lang: ioBroker.Languages) => void;
+}
+
+export interface OldObject {
+    _id: string;
+    type: string;
+}
+
+export type ObjectChangeHandler = (
+    id: string,
+    obj: ioBroker.Object | null | undefined,
+    oldObj: OldObject,
+) => void | Promise<void>;
+
+export type ThemeName = 'dark' | 'light' | 'colored' | 'blue' | 'PT' | 'DX';
+export type ThemeType = 'dark' | 'light';
+
+export interface GenericAppProps {
+    /** Adapter instance number if known, else will be determined from url */
+    instance?: number;
+    /** The name of the adapter. */
+    adapterName?: string;
+    /** Should the bottom buttons be shown (default: true). */
+    bottomButtons?: boolean;
+    /** Additional translations. */
+    translations?: { [lang in ioBroker.Languages]?: Record<string, string> };
+    /** Fields that should be encrypted/decrypted. */
+    encryptedFields?: string[];
+    /** Socket.io configuration. */
+    socket?: ConnectionProps;
+    /** Desired connection object */
+    Connection?: LegacyConnection | Connection | AdminConnection;
+    /** sentry DNS */
+    sentryDSN?: string;
+    /** Callback if user changes the theme. Call it to trigger change */
+    onThemeChange?: (newThemeName: ThemeName) => void;
+    classes?: Record<string, string>;
+}
+
+export interface GenericAppSettings extends GenericAppProps {
+    /** Don't load all objects on start-up. */
+    doNotLoadAllObjects?: boolean;
+}
+
+interface Palette extends MuiPalette {
+    mode: ThemeType;
+    expert: string;
+    grey: {
+        main: string;
+        dark: string;
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        A100: string;
+        A200: string;
+        A400: string;
+        A700: string;
+    };
+}
+
+export interface IobTheme extends MuiTheme {
+    name: ThemeName;
+    palette: Palette;
+    toolbar: CSSProperties;
+    saveToolbar: {
+        background: string;
+        button: CSSProperties;
+    };
+}
+
+export type Width = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface GenericAppState {
+    loaded: boolean;
+    themeType: ThemeType;
+    themeName: ThemeName;
+    theme: IobTheme;
+    expertMode: boolean;
+    selectedTab: string;
+    selectedTabNum: number | undefined;
+    native: Record<string, any>;
+    errorText: string | JSX.Element;
+    changed: boolean;
+    connected: boolean;
+    isConfigurationError: string;
+    toast: string | JSX.Element;
+    bottomButtons: boolean;
+    width: Width;
+    confirmClose: boolean;
+    _alert: boolean;
+    _alertType: 'info' | 'warning' | 'error' | 'success';
+    _alertMessage: string | JSX.Element;
+    common?: Record<string, any>;
+}