update to react 19 part I

LedFx · Dec 14, 2024 · 94a4d91 · 94a4d91
1 parent d79c320
commit 94a4d91
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 55 deletions.
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
     "axios": "^1.7.8",
     "base32-decode": "^1.0.0",
     "base32-encode": "1.2.0",
-    "chart.js": "4.4.6",
+    "chart.js": "4.4.7",
     "color": "^4.2.3",
     "compare-versions": "^6.1.1",
     "conf": "^13.0.1",
@@ -55,10 +55,10 @@
     "prop-types": "^15.8.1",
     "qrcode": "^1.5.4",
     "qs": "^6.13.1",
-    "react": "^18.2.0",
+    "react": "^19.0.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-chartjs-2": "5.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.0.0",
     "react-dropzone": "^14.3.5",
     "react-easy-crop": "^5.2.0",
     "react-full-screen": "^1.1.1",
@@ -196,9 +196,9 @@
     "@types/node": "^22.10.2",
     "@types/prop-types": "^15.7.11",
     "@types/qrcode": "^1.5.5",
-    "@types/react": "^18.3.12",
+    "@types/react": "^19.0.1",
     "@types/react-beautiful-dnd": "^13.1.8",
-    "@types/react-dom": "^18.2.19",
+    "@types/react-dom": "^19.0.2",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.34",
     "concurrently": "^9.1.0",
@@ -288,4 +288,4 @@
       ]
     }
   }
-}
+}
diff --git a/src/components/Dialogs/AddExistingSegmentDialog.tsx b/src/components/Dialogs/AddExistingSegmentDialog.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { styled } from '@mui/material/styles'
-import PropTypes from 'prop-types'
 import {
   Button,
   DialogTitle,
@@ -34,7 +33,18 @@ const Root = styled('div')(({ theme }) => ({
   }
 }))
 
-function ConfirmationDialogRaw(props: any) {
+interface ConfirmationDialogRawProps {
+  onClose(...args: unknown[]): unknown;
+  open: boolean;
+  value: string;
+  config?: any;
+  classes?: any;
+  id?: string;
+  keepMounted?: boolean;
+  deviceList?: any;
+}
+
+function ConfirmationDialogRaw(props: ConfirmationDialogRawProps) {
   const { onClose, value: valueProp, open, ...other } = props
   const [value, setValue] = React.useState(valueProp)
   const virtuals = useStore((state) => state.virtuals) || {}
@@ -106,17 +116,6 @@ function ConfirmationDialogRaw(props: any) {
   )
 }
 
-ConfirmationDialogRaw.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  open: PropTypes.bool.isRequired,
-  value: PropTypes.string.isRequired,
-  config: PropTypes.any,
-  classes: PropTypes.any,
-  id: PropTypes.string,
-  keepMounted: PropTypes.bool,
-  deviceList: PropTypes.any
-}
-
 function AddExistingSegmentDialog({
   virtual,
   config = {}

diff --git a/src/components/Dialogs/Download.tsx b/src/components/Dialogs/Download.tsx
@@ -1,7 +1,14 @@
-import PropTypes from 'prop-types'
 import { Box, LinearProgress, Typography } from '@mui/material'
 
-export default function LinearProgressWithLabel(props: any) {
+interface LinearProgressWithLabelProps {
+  /**
+   * The value of the progress indicator for the determinate and buffer variants.
+   * Value between 0 and 100.
+   */
+  value: number;
+}
+
+export default function LinearProgressWithLabel(props: LinearProgressWithLabelProps) {
   return (
     <Box sx={{ display: 'flex', alignItems: 'center' }}>
       <Box sx={{ width: '100%', mr: 1 }}>
@@ -15,11 +22,3 @@ export default function LinearProgressWithLabel(props: any) {
     </Box>
   )
 }
-
-LinearProgressWithLabel.propTypes = {
-  /**
-   * The value of the progress indicator for the determinate and buffer variants.
-   * Value between 0 and 100.
-   */
-  value: PropTypes.number.isRequired
-}
diff --git a/src/components/Dialogs/_AddSegmentDialog.tsx b/src/components/Dialogs/_AddSegmentDialog.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { styled } from '@mui/material/styles'
-import PropTypes from 'prop-types'
 import {
   Button,
   DialogTitle,
@@ -33,7 +32,18 @@ const Root = styled('div')(({ theme }) => ({
   }
 }))
 
-function ConfirmationDialogRaw(props: any) {
+interface ConfirmationDialogRawProps {
+  onClose(...args: unknown[]): unknown;
+  open: boolean;
+  value: string;
+  config?: any;
+  classes?: any;
+  id?: string;
+  keepMounted?: boolean;
+  deviceList?: any;
+}
+
+function ConfirmationDialogRaw(props: ConfirmationDialogRawProps) {
   const { onClose, value: valueProp, open, ...other } = props
   const [value, setValue] = React.useState(valueProp)
   const virtuals = useStore((state) => state.virtuals) || {}
@@ -97,16 +107,6 @@ function ConfirmationDialogRaw(props: any) {
   )
 }
 
-ConfirmationDialogRaw.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  open: PropTypes.bool.isRequired,
-  value: PropTypes.string.isRequired,
-  config: PropTypes.any,
-  classes: PropTypes.any,
-  id: PropTypes.string,
-  keepMounted: PropTypes.bool,
-  deviceList: PropTypes.any
-}
 
 export default function ConfirmationDialog({
   virtual,

diff --git a/src/components/Integrations/QLC/DialogAddEventListener.tsx b/src/components/Integrations/QLC/DialogAddEventListener.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { styled } from '@mui/material/styles'
-import PropTypes from 'prop-types'
 import Button from '@mui/material/Button'
 import DialogTitle from '@mui/material/DialogTitle'
 import DialogContent from '@mui/material/DialogContent'
@@ -38,7 +37,13 @@ const Root = styled('div')(({ theme }) => ({
   }
 }))
 
-function ConfirmationDialogRaw(props: any) {
+interface ConfirmationDialogRawProps {
+  onClose(...args: unknown[]): unknown;
+  open: boolean;
+  value: string;
+}
+
+function ConfirmationDialogRaw(props: ConfirmationDialogRawProps) {
   const { onClose, value: valueProp, open, ...other } = props
   const [valueState, setValue] = React.useState(valueProp)
   const [checkButtonType, setButtonType] = React.useState(false)
@@ -461,12 +466,6 @@ function ConfirmationDialogRaw(props: any) {
   )
 }
 
-ConfirmationDialogRaw.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  open: PropTypes.bool.isRequired,
-  value: PropTypes.string.isRequired
-}
-
 export default function ConfirmationDialog({ integration }: any) {
   const [open, setOpen] = React.useState(false)
 

diff --git a/src/components/NoYet.tsx b/src/components/NoYet.tsx
@@ -1,12 +1,13 @@
 import { Card, CardHeader } from '@mui/material'
 import { Info } from '@mui/icons-material'
-import PropTypes from 'prop-types'
 
 interface NoYetProps {
   type?: string
 }
 
-const NoYet: React.FC<NoYetProps> = ({ type = 'Thing' }): JSX.Element => (
+const NoYet: React.FC<NoYetProps> = ({
+  type = 'Thing'
+}: NoYetProps): JSX.Element => (
   <Card>
     <CardHeader
       avatar={<Info />}
@@ -16,8 +17,4 @@ const NoYet: React.FC<NoYetProps> = ({ type = 'Thing' }): JSX.Element => (
   </Card>
 )
 
-NoYet.propTypes = {
-  type: PropTypes.string
-}
-
 export default NoYet