chore(web): update react and chakra versions

hopefully nothing broke that I didn't notice prayge

web/package.json

@@ -4,7 +4,7 @@
   "homepage": "web/build",
   "private": true,
   "dependencies": {
-    "@chakra-ui/react": "^1.8.6",
+    "@chakra-ui/react": "2.3.6",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
@@ -17,14 +17,14 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^26.0.24",
     "@types/node": "^16.11.26",
-    "@types/react": "^17.0.43",
+    "@types/react": "^18.0.24",
-    "@types/react-dom": "^17.0.14",
+    "@types/react-dom": "^18.0.8",
     "@vitejs/plugin-react": "^1.3.2",
     "focus-trap-react": "^9.0.2",
     "framer-motion": "^6.2.8",
     "prettier": "^2.7.1",
-    "react": "^17.0.2",
+    "react": "18.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "18.2.0",
     "react-markdown": "^8.0.1",
     "typescript": "^4.6.3",
     "vite": "^2.9.13",

web/src/features/dev/index.tsx

@@ -49,42 +49,42 @@ const Dev: React.FC = () => {
           <DrawerBody>
             <VStack>
               <Divider />
-              <Button isFullWidth onClick={() => debugInput()}>
+              <Button width="full" onClick={() => debugInput()}>
                 Open input dialog
               </Button>
-              <Button isFullWidth onClick={() => debugAlert()}>
+              <Button width="full" onClick={() => debugAlert()}>
                 Open alert dialog
               </Button>
               <Divider />
-              <Button isFullWidth onClick={() => debugContext()}>
+              <Button width="full" onClick={() => debugContext()}>
                 Open context menu
               </Button>
-              <Button isFullWidth onClick={() => debugMenu()}>
+              <Button width="full" onClick={() => debugMenu()}>
                 Open list menu
               </Button>
               <Divider />
-              <Button isFullWidth onClick={() => debugCustomNotification()}>
+              <Button width="full" onClick={() => debugCustomNotification()}>
                 Send custom notification
               </Button>
-              <Button isFullWidth onClick={() => debugNotification()}>
+              <Button width="full" onClick={() => debugNotification()}>
                 Send default notification
               </Button>
               <Divider />
-              <Button isFullWidth onClick={() => debugProgressbar()}>
+              <Button width="full" onClick={() => debugProgressbar()}>
                 Activate progress bar
               </Button>
-              <Button isFullWidth onClick={() => debugCircleProgressbar()}>
+              <Button width="full" onClick={() => debugCircleProgressbar()}>
                 Activate progress circle
               </Button>
               <Divider />
-              <Button isFullWidth onClick={() => debugSettings()}>
+              <Button width="full" onClick={() => debugSettings()}>
                 Open settings page
               </Button>
-              <Button isFullWidth onClick={() => debugTextUI()}>
+              <Button width="full" onClick={() => debugTextUI()}>
                 Show TextUI
               </Button>
               <Divider />
-              <Button isFullWidth onClick={() => debugSkillCheck()}>
+              <Button width="full" onClick={() => debugSkillCheck()}>
                 Run skill check
               </Button>
             </VStack>

web/src/features/dialog/components/fields/number.tsx

@@ -6,6 +6,7 @@ import {
   NumberIncrementStepper,
   NumberDecrementStepper,
   InputLeftElement,
+  InputGroup,
 } from '@chakra-ui/react';
 import { useEffect } from 'react';
 import { INumber } from '../../../../interfaces/dialog';
@@ -26,6 +27,7 @@ const NumberField: React.FC<Props> = (props) => {
   return (
     <Box mb={3}>
       <Label label={props.row.label} description={props.row.description} />
+      <InputGroup>
         <NumberInput
           onChange={(val: string) => props.handleChange(+val, props.index)}
           defaultValue={props.row.default}
@@ -42,6 +44,7 @@ const NumberField: React.FC<Props> = (props) => {
             <NumberDecrementStepper />
           </NumberInputStepper>
         </NumberInput>
+      </InputGroup>
     </Box>
   );
 };

web/src/features/notifications/NotificationWrapper.tsx

@@ -1,4 +1,4 @@
-import { useToast, type ToastPositionWithLogical, Box, HStack, Text } from '@chakra-ui/react';
+import { useToast, type ToastPosition, Box, HStack, Text } from '@chakra-ui/react';
 import { useNuiEvent } from '../../hooks/useNuiEvent';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -7,7 +7,7 @@ export interface NotificationProps {
   title?: string;
   description?: string;
   duration?: number;
-  position?: ToastPositionWithLogical;
+  position?: ToastPosition;
   status?: 'info' | 'warning' | 'success' | 'error';
   id?: number;
 }
@@ -19,7 +19,7 @@ export interface CustomNotificationProps {
   duration?: number;
   icon?: IconProp;
   iconColor?: string;
-  position?: ToastPositionWithLogical;
+  position?: ToastPosition;
   id?: number;
   type?: string;
 }

web/src/features/progress/CircleProgressbar.tsx

@@ -88,7 +88,7 @@ const CircleProgressbar: React.FC = () => {
           >
             <CircularProgressLabel fontFamily="Fira Mono">{value}%</CircularProgressLabel>
           </CircularProgress>
-          <Text fontFamily="Inter" isTruncated fontSize={18} fontWeight="light">
+          <Text fontFamily="Inter" fontSize={18} fontWeight="light">
             {label}
           </Text>
         </Flex>

web/src/features/progress/Progressbar.tsx

@@ -65,8 +65,11 @@ const Progressbar: React.FC = () => {
               }
             />
             <Text
+              maxWidth={350}
               fontFamily="Inter"
-              isTruncated
+              textOverflow="ellipsis"
+              overflow="hidden"
+              whiteSpace="nowrap"
               fontSize={22}
               fontWeight="light"
               position="absolute"

web/src/main.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import { VisibilityProvider } from './providers/VisibilityProvider';
@@ -32,7 +32,8 @@ debugData([
   },
 ]);
 
-ReactDOM.render(
+const root = document.getElementById('root');
+ReactDOM.createRoot(root!).render(
   <React.StrictMode>
     <LocaleProvider>
       <VisibilityProvider>
@@ -41,6 +42,5 @@ ReactDOM.render(
         </ChakraProvider>
       </VisibilityProvider>
     </LocaleProvider>
-  </React.StrictMode>,
+  </React.StrictMode>
-  document.getElementById('root')
 );

web/src/providers/LocaleProvider.tsx

@@ -46,7 +46,7 @@ interface LocaleContextValue {
 
 const LocaleCtx = createContext<LocaleContextValue | null>(null);
 
-const LocaleProvider: React.FC = ({ children }) => {
+const LocaleProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [locale, setLocale] = useState<Locale>({
     language: '',
     ui: {

web/src/providers/VisibilityProvider.tsx

@@ -10,7 +10,7 @@ interface VisibilityProviderValue {
 
 // This should be mounted at the top level of your application, it is currently set to
 // apply a CSS visibility value. If this is non-performant, this should be customized.
-export const VisibilityProvider: React.FC = ({ children }) => {
+export const VisibilityProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [visible, setVisible] = useState(true);
 
   useNuiEvent<boolean>('setVisible', setVisible);

web/src/theme/index.ts

@@ -2,7 +2,6 @@ import { extendTheme, type ThemeConfig } from '@chakra-ui/react';
 
 const config: ThemeConfig = {
   initialColorMode: 'dark',
-  useSystemColorMode: false,
 };
 
 export const theme = extendTheme({