FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-17 06:56: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",
"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-dom": "^17.0.14",
"@types/react": "^18.0.24",
"@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-dom": "^17.0.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-markdown": "^8.0.1",
"typescript": "^4.6.3",
"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>
<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>

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

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

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

@@ -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>

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

@@ -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"

8
web/src/main.tsx
View File

@@ -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>,
document.getElementById('root')
</React.StrictMode>
);

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

@@ -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: {

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
// 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);

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

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