@iobroker/adapter-react-v5 7.0.1 → 7.1.0

package/src/icons/IconFx.tsx

@@ -1,36 +1,38 @@
-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
-        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
-        c-1.91,1.388-3.935,3.406-6.121,6.111c-0.711-2.653-1.319-3.889-1.771-4.628c-1.396-2.303-3.664-2.303-4.41-2.303l-0.813,0.013
-        l-23.045,0.544l1.297-5.506c0.828-3.593,1.915-6.436,3.226-8.45c0.638-0.98,1.614-2.148,2.638-2.148
-        c0.387,0,1.152,0.063,2.582,0.36c3.978,0.86,5.465,0.959,6.239,0.959c1.708,0,3.21-0.571,4.347-1.651
-        c1.176-1.119,1.797-2.583,1.797-4.233c0-1.29-0.424-3.156-2.445-4.722c-1.396-1.081-3.311-1.629-5.691-1.629
-        c-3.568,0-7.349,1.141-11.241,3.39c-3.862,2.232-7.038,5.317-9.438,9.171c-2.105,3.379-3.929,8.124-5.555,14.459H21.877
-        l-2.238,8.831h10.186l-7.74,31.116c-1.603,6.443-2.777,8.028-3.098,8.361c-0.875,0.904-2.68,1.094-4.04,1.094
-        c-1.683,0-3.477-0.121-5.349-0.361c-1.286-0.157-2.265-0.234-2.991-0.234c-1.878,0-3.423,0.488-4.59,1.448
-        C0.716,81.858,0,83.403,0,85.14c0,1.357,0.44,3.309,2.539,4.895c1.434,1.08,3.389,1.628,5.813,1.628
-        c6.069,0,11.725-2.411,16.813-7.165c4.947-4.624,8.571-11.413,10.773-20.195l6.119-24.935l20.87,0.354l2.244,9.64l-4.573,6.748
-        c-0.824,1.209-2.051,2.701-3.658,4.441c-0.84,0.92-1.398,1.426-1.721,1.689c-1.316-1.608-2.809-2.424-4.432-2.424
-        c-1.525,0-2.91,0.625-4.002,1.804c-1.036,1.116-1.583,2.514-1.583,4.038c0,1.83,0.783,3.459,2.264,4.709
-        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>;
-
-export default IconFx;
+import React from 'react';
+import type IconProps from './IconProps';
+
+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
+        c-1.91,1.388-3.935,3.406-6.121,6.111c-0.711-2.653-1.319-3.889-1.771-4.628c-1.396-2.303-3.664-2.303-4.41-2.303l-0.813,0.013
+        l-23.045,0.544l1.297-5.506c0.828-3.593,1.915-6.436,3.226-8.45c0.638-0.98,1.614-2.148,2.638-2.148
+        c0.387,0,1.152,0.063,2.582,0.36c3.978,0.86,5.465,0.959,6.239,0.959c1.708,0,3.21-0.571,4.347-1.651
+        c1.176-1.119,1.797-2.583,1.797-4.233c0-1.29-0.424-3.156-2.445-4.722c-1.396-1.081-3.311-1.629-5.691-1.629
+        c-3.568,0-7.349,1.141-11.241,3.39c-3.862,2.232-7.038,5.317-9.438,9.171c-2.105,3.379-3.929,8.124-5.555,14.459H21.877
+        l-2.238,8.831h10.186l-7.74,31.116c-1.603,6.443-2.777,8.028-3.098,8.361c-0.875,0.904-2.68,1.094-4.04,1.094
+        c-1.683,0-3.477-0.121-5.349-0.361c-1.286-0.157-2.265-0.234-2.991-0.234c-1.878,0-3.423,0.488-4.59,1.448
+        C0.716,81.858,0,83.403,0,85.14c0,1.357,0.44,3.309,2.539,4.895c1.434,1.08,3.389,1.628,5.813,1.628
+        c6.069,0,11.725-2.411,16.813-7.165c4.947-4.624,8.571-11.413,10.773-20.195l6.119-24.935l20.87,0.354l2.244,9.64l-4.573,6.748
+        c-0.824,1.209-2.051,2.701-3.658,4.441c-0.84,0.92-1.398,1.426-1.721,1.689c-1.316-1.608-2.809-2.424-4.432-2.424
+        c-1.525,0-2.91,0.625-4.002,1.804c-1.036,1.116-1.583,2.514-1.583,4.038c0,1.83,0.783,3.459,2.264,4.709
+        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>
+);
+
+export default IconFx;

package/src/icons/IconInstance.tsx

@@ -1,20 +1,22 @@
-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>;
-
-export default IconInstance;
+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): 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,30 +1,32 @@
-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
-        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
-        C5.88,6.549,3.939,8.789,2.531,11.456c-0.299,0.576-0.363,1.195-0.597,1.792c-0.683,1.621-1.429,3.2-1.685,4.992
-        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>;
-
-export default IconLogout;
+import React from 'react';
+import type IconProps from './IconProps';
+
+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
+        C5.88,6.549,3.939,8.789,2.531,11.456c-0.299,0.576-0.363,1.195-0.597,1.792c-0.683,1.621-1.429,3.2-1.685,4.992
+        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>
+);
+
+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>;
-
-export default IconNoIcon;
+import React from 'react';
+import type IconProps from './IconProps';
+
+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 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>;
-
-export default IconOpen;
+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): 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,15 +1,16 @@
-import React from 'react';
-
-export default interface IconProps {
-    /**  The width in pixels or percentage of the icon. */
-    width?: number | string;
-    /**  The height in pixels or percentage of the icon. */
-    height?: number | string;
-    /** Click handler. */
-    onClick?: (e: React.MouseEvent) => void;
-    /** The class name for the SVG element. */
-    className?: string;
-    /** Styles for the SVG element. */
-    style?: React.CSSProperties;
-    fontSize?: 'small';
-}
+import type { CSSProperties, MouseEvent } from 'react';
+
+export default interface IconProps {
+    /**  The width in pixels or percentage of the icon. */
+    width?: number | string;
+    /**  The height in pixels or percentage of the icon. */
+    height?: number | string;
+    /** Click handler. */
+    onClick?: (e: MouseEvent) => void;
+    /** The class name for the SVG element. */
+    className?: string;
+    /** Styles for the SVG element. */
+    style?: CSSProperties;
+    /** The font size of the icon. */
+    fontSize?: 'small';
+}

package/src/icons/IconState.tsx

@@ -1,17 +1,38 @@
-import React 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>;
-
-export default IconState;
+import React, { type JSX } from 'react';
+import type IconProps from './IconProps';
+
+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

@@ -1,55 +1,56 @@
-/**
- * Copyright 2018-2023 Denis Haev (bluefox) <dogafox@gmail.com>
- *
- * MIT License
- *
- **/
-
-html {
-    height: 100%;
-}
-
-body {
-    margin: 0;
-    padding: 0;
-    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%;
-    height: 100%;
-    overflow: hidden;
-}
-
-/* scrollbar */
-::-webkit-scrollbar-track {
-    background-color: #ccc;
-    border-radius: 5px;
-}
-
-::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-    background-color: #ccc;
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: #575757;
-    border-radius: 5px;
-}
-
-#root {
-    height: 100%;
-}
-
-.App {
-    height: 100%;
-}
-
-@keyframes glow {
-    from {
-        background-color: initial;
-    }
-    to {
-        background-color: #58c458;
-    }
-}
+/**
+ * Copyright 2018-2023 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ **/
+
+html {
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    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%;
+    height: 100%;
+    overflow: hidden;
+}
+
+/* scrollbar */
+::-webkit-scrollbar-track {
+    background-color: #ccc;
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+    background-color: #ccc;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #575757;
+    border-radius: 5px;
+}
+
+#root {
+    height: 100%;
+}
+
+.App {
+    height: 100%;
+}
+
+@keyframes glow {
+    from {
+        background-color: initial;
+    }
+    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());
+}