Convert React to TypeScript

Author: GermanBluefox

src-editor/package.json

@@ -5,39 +5,38 @@
     "dependencies": {
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "@craco/craco": "^7.1.0",
+        "@devbookhq/splitter": "^1.4.2",
         "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-        "@icons/material": "^0.4.1",
-        "@iobroker/adapter-react-v5": "^7.2.3",
+        "@iobroker/adapter-react-v5": "^7.3.1",
         "@iobroker/type-detector": "^4.0.1",
-        "@mui/icons-material": "^6.1.2",
-        "@devbookhq/splitter": "^1.4.2",
-        "@mui/material": "^6.1.2",
-        "@mui/x-date-pickers": "^7.19.0",
-        "@sentry/browser": "^8.33.1",
+        "@mui/icons-material": "^6.1.7",
+        "@mui/material": "^6.1.7",
+        "@mui/x-date-pickers": "^7.22.2",
+        "@sentry/browser": "^8.38.0",
         "craco-module-federation": "^1.1.0",
         "lodash": "^4.17.21",
         "monaco-editor": "~0.52.0",
-        "openai": "^4.67.1",
+        "openai": "^4.72.0",
         "react": "^18.3.1",
-        "react-ace": "^12.0.0",
+        "react-ace": "^13.0.0",
         "react-bem-helper": "^1.4.1",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
         "react-dnd-touch-backend": "^16.0.1",
         "react-dom": "^18.3.1",
-        "react-dropzone": "^14.2.9",
+        "react-dropzone": "^14.3.5",
         "react-fullscreen": "^0.1.0",
-        "react-i18next": "^15.0.2",
+        "react-i18next": "^15.1.1",
         "react-icons": "^5.3.0",
-        "react-inlinesvg": "^4.1.3",
+        "react-inlinesvg": "^4.1.5",
         "react-json-view": "^1.21.3",
         "react-monaco-editor": "^0.56.2",
         "react-scripts": "^5.0.1",
         "react-splitter-layout": "^4.0.0",
         "react-text-mask": "^5.5.0",
         "react-treeview-mui": "^0.1.2",
         "reactour": "^1.19.4",
-        "sass": "^1.79.4",
+        "sass": "^1.81.0",
         "styled-components": "^6.1.13",
         "suncalc2": "^1.8.1"
     },

src-editor/src/Dialogs/AddNewScript.tsx

@@ -21,6 +21,7 @@ import ImgJS from '../assets/tileJS.png';
 import ImgTS from '../assets/tileTS.png';
 import ImgBlockly from '../assets/tileBlockly.png';
 import ImgRules from '../assets/tileRules.png';
+import {ScriptType} from "@/types";
 
 const styles: Record<string, React.CSSProperties> = {
     card: {
@@ -44,7 +45,7 @@ const styles: Record<string, React.CSSProperties> = {
 };
 
 interface DialogAddNewProps {
-    onClose: (type?: 'TypeScript/ts' | 'Javascript/js' | 'Blockly' | 'Rules') => void;
+    onClose: (type?: ScriptType) => void;
 }
 
 class DialogAddNew extends React.Component<DialogAddNewProps> {

src-editor/src/Dialogs/New.tsx

@@ -16,20 +16,20 @@ import {
 import { Check as IconOk, Cancel as IconCancel } from '@mui/icons-material';
 
 import { I18n } from '@iobroker/adapter-react-v5';
+import type { ScriptType } from '@/types';
 
 interface DialogNewProps {
     onClose: () => void;
-    onAdd: (id: string, name: string, instance: number, type: string) => void;
+    onAdd: (id: string, name: string, instance?: number, type?: ScriptType) => void;
     name: string;
     title: string;
     parent: string;
-    instance: number;
-    instances: number[];
+    instance?: number;
+    instances?: number[];
     parents: { id: string; name: string }[];
-    existingItems: string[];
-    folder: boolean;
-    type: string;
-    source: string;
+    existingItems?: string[];
+    folder?: boolean;
+    type?: ScriptType;
 }
 
 interface DialogNewState {
@@ -189,7 +189,7 @@ class DialogNew extends React.Component<DialogNewProps, DialogNewState> {
                                     onChange={e => this.setState({ instance: parseInt(e.target.value as string, 10) })}
                                     inputProps={{ name: 'instance', id: 'instance' }}
                                 >
-                                    {this.props.instances.map(instance => (
+                                    {this.props.instances?.map(instance => (
                                         <MenuItem
                                             key={`instance${instance}`}
                                             value={instance}

src-editor/src/Dialogs/Rename.tsx

@@ -19,18 +19,18 @@ import { I18n } from '@iobroker/adapter-react-v5';
 
 interface DialogRenameProps {
     onClose: () => void;
-    onRename: (oldId: string, newId: string, newName: string, instance: number) => void;
+    onRename: (oldId: string, newId: string, newName: string, instance: number | null) => void;
     name: string;
     id: string;
-    instance: number;
+    instance: number | null;
     instances: number[];
     folder: boolean;
 }
 
 interface DialogRenameState {
     name: string;
     id: string;
-    instance: number;
+    instance: number | null;
     prefix: string;
 }