FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-18 23:46:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(web): update react and chakra versions

Browse Source 
hopefully nothing broke that I didn't notice prayge
This commit is contained in:
Luke
2022-10-27 16:44:21 +02:00
parent 646473f755
commit a1d2607286
11 changed files with 1783 additions and 2752 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/package.json
View File

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

4442
web/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

22
web/src/features/dev/index.tsx
View File

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

35
web/src/features/dialog/components/fields/number.tsx
View File

@@ -6,6 +6,7 @@ import {
NumberIncrementStepper, NumberIncrementStepper,
NumberDecrementStepper, NumberDecrementStepper,
InputLeftElement, InputLeftElement,
InputGroup,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { INumber } from '../../../../interfaces/dialog'; import { INumber } from '../../../../interfaces/dialog';
@@ -26,22 +27,24 @@ const NumberField: React.FC<Props> = (props) => {
return ( return (
<Box mb={3}> <Box mb={3}>
<Label label={props.row.label} description={props.row.description} /> <Label label={props.row.label} description={props.row.description} />
<NumberInput <InputGroup>
onChange={(val: string) => props.handleChange(+val, props.index)} <NumberInput
defaultValue={props.row.default} onChange={(val: string) => props.handleChange(+val, props.index)}
min={props.row.min} defaultValue={props.row.default}
max={props.row.max} min={props.row.min}
isDisabled={props.row.disabled} max={props.row.max}
> isDisabled={props.row.disabled}
{props.row.icon && ( >
<InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} fixedWidth />} /> {props.row.icon && (
)} <InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} fixedWidth />} />
<NumberInputField placeholder={props.row.placeholder} pl={props.row.icon ? '40px' : undefined} /> )}
<NumberInputStepper> <NumberInputField placeholder={props.row.placeholder} pl={props.row.icon ? '40px' : undefined} />
<NumberIncrementStepper /> <NumberInputStepper>
<NumberDecrementStepper /> <NumberIncrementStepper />
</NumberInputStepper> <NumberDecrementStepper />
</NumberInput> </NumberInputStepper>
</NumberInput>
</InputGroup>
</Box> </Box>
); );
}; };

6
web/src/features/notifications/NotificationWrapper.tsx
View File

@@ -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 { useNuiEvent } from '../../hooks/useNuiEvent';
import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -7,7 +7,7 @@ export interface NotificationProps {
title?: string; title?: string;
description?: string; description?: string;
duration?: number; duration?: number;
position?: ToastPositionWithLogical; position?: ToastPosition;
status?: 'info' | 'warning' | 'success' | 'error'; status?: 'info' | 'warning' | 'success' | 'error';
id?: number; id?: number;
} }
@@ -19,7 +19,7 @@ export interface CustomNotificationProps {
duration?: number; duration?: number;
icon?: IconProp; icon?: IconProp;
iconColor?: string; iconColor?: string;
position?: ToastPositionWithLogical; position?: ToastPosition;
id?: number; id?: number;
type?: string; type?: string;
} }

2
web/src/features/progress/CircleProgressbar.tsx
View File

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

5
web/src/features/progress/Progressbar.tsx
View File

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

8
web/src/main.tsx
View File

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

2
web/src/providers/LocaleProvider.tsx
View File

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

2
web/src/providers/VisibilityProvider.tsx
View File

@@ -10,7 +10,7 @@ interface VisibilityProviderValue {
// This should be mounted at the top level of your application, it is currently set to // 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. // 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); const [visible, setVisible] = useState(true);
useNuiEvent<boolean>('setVisible', setVisible); useNuiEvent<boolean>('setVisible', setVisible);

1
web/src/theme/index.ts
View File

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