From 829bec2592a1c3a413b1f401fe0e9e3b4ef8daff Mon Sep 17 00:00:00 2001 From: Luke <39926192+LukeWasTakenn@users.noreply.github.com> Date: Wed, 15 Feb 2023 13:00:09 +0100 Subject: [PATCH] refactor(web): move all types into typings folder --- web/src/features/dev/debug/alert.ts | 2 +- web/src/features/dev/debug/context.ts | 24 +++++++++--------- web/src/features/dev/debug/input.ts | 2 +- web/src/features/dev/debug/menu.ts | 4 +-- web/src/features/dev/debug/notification.ts | 16 ++++++------ web/src/features/dev/debug/progress.ts | 2 +- web/src/features/dev/debug/radial.ts | 2 +- web/src/features/dev/debug/skillcheck.ts | 2 +- web/src/features/dev/debug/textui.ts | 2 +- web/src/features/dialog/AlertDialog.tsx | 14 +---------- web/src/features/dialog/InputDialog.tsx | 22 ++-------------- .../dialog/components/fields/checkbox.tsx | 2 +- .../dialog/components/fields/color.tsx | 2 +- .../dialog/components/fields/date.tsx | 2 +- .../dialog/components/fields/input.tsx | 2 +- .../dialog/components/fields/number.tsx | 2 +- .../dialog/components/fields/select.tsx | 2 +- .../dialog/components/fields/slider.tsx | 2 +- .../dialog/components/fields/textarea.tsx | 2 +- .../dialog/components/fields/time.tsx | 2 +- web/src/features/menu/context/ContextMenu.tsx | 2 +- .../menu/context/components/ContextButton.tsx | 24 ++++++++++-------- web/src/features/menu/list/ListItem.tsx | 2 +- web/src/features/menu/list/index.tsx | 25 +------------------ web/src/features/menu/radial/index.tsx | 13 +++------- .../notifications/NotificationWrapper.tsx | 18 +++---------- .../features/progress/CircleProgressbar.tsx | 8 +----- web/src/features/progress/Progressbar.tsx | 6 +---- web/src/features/skillcheck/index.tsx | 15 +---------- web/src/features/skillcheck/indicator.tsx | 2 +- web/src/features/textui/TextUI.tsx | 14 ++--------- web/src/typings/alert.ts | 12 +++++++++ web/src/{interfaces => typings}/context.ts | 0 web/src/{interfaces => typings}/dialog.ts | 8 ++++++ web/src/typings/index.ts | 9 +++++++ web/src/typings/menu.ts | 24 ++++++++++++++++++ web/src/typings/notifications.ts | 15 +++++++++++ web/src/typings/progress.ts | 11 ++++++++ web/src/typings/radial.ts | 6 +++++ web/src/typings/skillcheck.ts | 13 ++++++++++ web/src/typings/textui.ts | 12 +++++++++ web/vite.config.ts | 1 + 42 files changed, 181 insertions(+), 169 deletions(-) create mode 100644 web/src/typings/alert.ts rename web/src/{interfaces => typings}/context.ts (100%) rename web/src/{interfaces => typings}/dialog.ts (87%) create mode 100644 web/src/typings/index.ts create mode 100644 web/src/typings/menu.ts create mode 100644 web/src/typings/notifications.ts create mode 100644 web/src/typings/progress.ts create mode 100644 web/src/typings/radial.ts create mode 100644 web/src/typings/skillcheck.ts create mode 100644 web/src/typings/textui.ts diff --git a/web/src/features/dev/debug/alert.ts b/web/src/features/dev/debug/alert.ts index b0e96b3..2fcb5b8 100644 --- a/web/src/features/dev/debug/alert.ts +++ b/web/src/features/dev/debug/alert.ts @@ -1,5 +1,5 @@ import { debugData } from '../../../utils/debugData'; -import { AlertProps } from '../../dialog/AlertDialog'; +import { AlertProps } from '../../../typings'; export const debugAlert = () => { debugData([ diff --git a/web/src/features/dev/debug/context.ts b/web/src/features/dev/debug/context.ts index 0a031b0..cfefefb 100644 --- a/web/src/features/dev/debug/context.ts +++ b/web/src/features/dev/debug/context.ts @@ -1,4 +1,4 @@ -import { ContextMenuProps } from '../../../interfaces/context'; +import { ContextMenuProps } from '../../../typings'; import { debugData } from '../../../utils/debugData'; export const debugContext = () => { @@ -16,22 +16,22 @@ export const debugContext = () => { colorScheme: 'blue', metadata: [ { - ["label"]: "Body", - ["value"]: "55%", - ["progress"]: 55 + ['label']: 'Body', + ['value']: '55%', + ['progress']: 55, }, { - ["label"]: "Engine", - ["value"]: "100%", - ["progress"]: 100 + ['label']: 'Engine', + ['value']: '100%', + ['progress']: 100, }, { - ["label"]: "Oil", - ["progress"]: 11 + ['label']: 'Oil', + ['progress']: 11, }, { - ["label"]: "Fuel", - ["progress"]: 87 + ['label']: 'Fuel', + ['progress']: 87, }, ], }, @@ -56,7 +56,7 @@ export const debugContext = () => { progress: 80, icon: 'car-side', metadata: [{ label: 'Durability', value: '80%' }], - colorScheme: 'blue' + colorScheme: 'blue', }, { title: 'Menu button', diff --git a/web/src/features/dev/debug/input.ts b/web/src/features/dev/debug/input.ts index 5b3afae..35424c3 100644 --- a/web/src/features/dev/debug/input.ts +++ b/web/src/features/dev/debug/input.ts @@ -1,5 +1,5 @@ import { debugData } from '../../../utils/debugData'; -import { InputProps } from '../../dialog/InputDialog'; +import type { InputProps } from '../../../typings'; export const debugInput = () => { debugData([ diff --git a/web/src/features/dev/debug/menu.ts b/web/src/features/dev/debug/menu.ts index 1a0a1ec..e583e2d 100644 --- a/web/src/features/dev/debug/menu.ts +++ b/web/src/features/dev/debug/menu.ts @@ -1,5 +1,5 @@ import { debugData } from '../../../utils/debugData'; -import { MenuSettings } from '../../menu/list'; +import { MenuSettings } from '../../../typings'; export const debugMenu = () => { debugData([ @@ -34,7 +34,7 @@ export const debugMenu = () => { icon: 'car-side', description: 'Durability: 80%', colorScheme: 'blue', - iconColor: '#55778d' + iconColor: '#55778d', }, { label: 'Option 1' }, { label: 'Option 2' }, diff --git a/web/src/features/dev/debug/notification.ts b/web/src/features/dev/debug/notification.ts index 43d77ad..6cbef40 100644 --- a/web/src/features/dev/debug/notification.ts +++ b/web/src/features/dev/debug/notification.ts @@ -1,28 +1,30 @@ -import { CustomNotificationProps } from '../../notifications/NotificationWrapper'; +import { NotificationProps } from '../../../typings'; import { debugData } from '../../../utils/debugData'; export const debugCustomNotification = () => { - debugData([ + debugData([ { action: 'notify', data: { title: 'Success', description: 'Notification description', type: 'success', + id: 'pogchamp', }, }, ]); - debugData([ + debugData([ { action: 'notify', data: { - title: 'Info', + title: 'Success', description: 'Notification description', - type: 'info', + type: 'success', + id: 'pogchamp', }, }, ]); - debugData([ + debugData([ { action: 'notify', data: { @@ -32,7 +34,7 @@ export const debugCustomNotification = () => { }, }, ]); - debugData([ + debugData([ { action: 'notify', data: { diff --git a/web/src/features/dev/debug/progress.ts b/web/src/features/dev/debug/progress.ts index 4409bfb..116501d 100644 --- a/web/src/features/dev/debug/progress.ts +++ b/web/src/features/dev/debug/progress.ts @@ -1,5 +1,5 @@ import { debugData } from '../../../utils/debugData'; -import { ProgressbarProps } from '../../progress/Progressbar'; +import { ProgressbarProps } from '../../../typings'; export const debugProgressbar = () => { debugData([ diff --git a/web/src/features/dev/debug/radial.ts b/web/src/features/dev/debug/radial.ts index d50d1e8..48dcd08 100644 --- a/web/src/features/dev/debug/radial.ts +++ b/web/src/features/dev/debug/radial.ts @@ -1,5 +1,5 @@ import { debugData } from '../../../utils/debugData'; -import type { MenuItem } from '../../menu/radial'; +import type { MenuItem } from '../../../typings'; export const debugRadial = () => { debugData<{ items: MenuItem[]; sub?: boolean }>([ diff --git a/web/src/features/dev/debug/skillcheck.ts b/web/src/features/dev/debug/skillcheck.ts index 3e689b2..a5bcc5b 100644 --- a/web/src/features/dev/debug/skillcheck.ts +++ b/web/src/features/dev/debug/skillcheck.ts @@ -1,5 +1,5 @@ import { debugData } from '../../../utils/debugData'; -import { GameDifficulty } from '../../skillcheck'; +import { GameDifficulty } from '../../../typings'; export const debugSkillCheck = () => { debugData<{ difficulty: GameDifficulty | GameDifficulty[]; inputs?: string[] }>([ diff --git a/web/src/features/dev/debug/textui.ts b/web/src/features/dev/debug/textui.ts index de97806..a40c8db 100644 --- a/web/src/features/dev/debug/textui.ts +++ b/web/src/features/dev/debug/textui.ts @@ -1,4 +1,4 @@ -import { TextUiProps } from '../../textui/TextUI'; +import { TextUiProps } from '../../../typings'; import { debugData } from '../../../utils/debugData'; export const debugTextUI = () => { diff --git a/web/src/features/dialog/AlertDialog.tsx b/web/src/features/dialog/AlertDialog.tsx index d111841..e92aceb 100644 --- a/web/src/features/dialog/AlertDialog.tsx +++ b/web/src/features/dialog/AlertDialog.tsx @@ -5,19 +5,7 @@ import { useNuiEvent } from '../../hooks/useNuiEvent'; import { fetchNui } from '../../utils/fetchNui'; import { useLocales } from '../../providers/LocaleProvider'; import remarkGfm from 'remark-gfm'; - -export interface AlertProps { - header: string; - content: string; - centered?: boolean; - size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'; - overflow?: boolean; - cancel?: boolean; - labels?: { - cancel?: string; - confirm?: string; - }; -} +import type { AlertProps } from '../../typings'; const AlertDialog: React.FC = () => { const { locale } = useLocales(); diff --git a/web/src/features/dialog/InputDialog.tsx b/web/src/features/dialog/InputDialog.tsx index dc563cc..11d9321 100644 --- a/web/src/features/dialog/InputDialog.tsx +++ b/web/src/features/dialog/InputDialog.tsx @@ -3,18 +3,7 @@ import React from 'react'; import { useNuiEvent } from '../../hooks/useNuiEvent'; import { useLocales } from '../../providers/LocaleProvider'; import { fetchNui } from '../../utils/fetchNui'; -import { - IInput, - ICheckbox, - ISelect, - INumber, - ISlider, - IColorInput, - OptionValue, - IDateInput, - ITextarea, - ITimeInput, -} from '../../interfaces/dialog'; +import { OptionValue } from '../../typings'; import InputField from './components/fields/input'; import CheckboxField from './components/fields/checkbox'; import SelectField from './components/fields/select'; @@ -25,14 +14,7 @@ import ColorField from './components/fields/color'; import DateField from './components/fields/date'; import TextareaField from './components/fields/textarea'; import TimeField from './components/fields/time'; - -export interface InputProps { - heading: string; - rows: Array; - options?: { - allowCancel?: boolean; - }; -} +import type { InputProps } from '../../typings'; export type FormValues = { test: { diff --git a/web/src/features/dialog/components/fields/checkbox.tsx b/web/src/features/dialog/components/fields/checkbox.tsx index c6496bc..aadeaf2 100644 --- a/web/src/features/dialog/components/fields/checkbox.tsx +++ b/web/src/features/dialog/components/fields/checkbox.tsx @@ -1,5 +1,5 @@ import { Checkbox } from '@mantine/core'; -import { ICheckbox } from '../../../../interfaces/dialog'; +import { ICheckbox } from '../../../../typings/dialog'; import { UseFormRegisterReturn } from 'react-hook-form'; interface Props { diff --git a/web/src/features/dialog/components/fields/color.tsx b/web/src/features/dialog/components/fields/color.tsx index 81b4c65..4579cc8 100644 --- a/web/src/features/dialog/components/fields/color.tsx +++ b/web/src/features/dialog/components/fields/color.tsx @@ -1,4 +1,4 @@ -import { IColorInput } from '../../../../interfaces/dialog'; +import { IColorInput } from '../../../../typings/dialog'; import { Control, useController } from 'react-hook-form'; import { FormValues } from '../../InputDialog'; import { ColorInput } from '@mantine/core'; diff --git a/web/src/features/dialog/components/fields/date.tsx b/web/src/features/dialog/components/fields/date.tsx index 2e316b4..1208b29 100644 --- a/web/src/features/dialog/components/fields/date.tsx +++ b/web/src/features/dialog/components/fields/date.tsx @@ -1,4 +1,4 @@ -import { IDateInput } from '../../../../interfaces/dialog'; +import { IDateInput } from '../../../../typings/dialog'; import { Control, useController } from 'react-hook-form'; import { FormValues } from '../../InputDialog'; import { DatePicker, DateRangePicker, TimeInput } from '@mantine/dates'; diff --git a/web/src/features/dialog/components/fields/input.tsx b/web/src/features/dialog/components/fields/input.tsx index 065de23..bcf4678 100644 --- a/web/src/features/dialog/components/fields/input.tsx +++ b/web/src/features/dialog/components/fields/input.tsx @@ -1,7 +1,7 @@ import { createStyles, PasswordInput, TextInput } from '@mantine/core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React from 'react'; -import { IInput } from '../../../../interfaces/dialog'; +import { IInput } from '../../../../typings/dialog'; import { UseFormRegisterReturn } from 'react-hook-form'; interface Props { diff --git a/web/src/features/dialog/components/fields/number.tsx b/web/src/features/dialog/components/fields/number.tsx index d526dd3..6ea06d2 100644 --- a/web/src/features/dialog/components/fields/number.tsx +++ b/web/src/features/dialog/components/fields/number.tsx @@ -1,5 +1,5 @@ import { NumberInput } from '@mantine/core'; -import { INumber } from '../../../../interfaces/dialog'; +import { INumber } from '../../../../typings/dialog'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Control, useController } from 'react-hook-form'; import { FormValues } from '../../InputDialog'; diff --git a/web/src/features/dialog/components/fields/select.tsx b/web/src/features/dialog/components/fields/select.tsx index ac2c50b..9ba1af6 100644 --- a/web/src/features/dialog/components/fields/select.tsx +++ b/web/src/features/dialog/components/fields/select.tsx @@ -1,5 +1,5 @@ import { MultiSelect, Select } from '@mantine/core'; -import { ISelect } from '../../../../interfaces/dialog'; +import { ISelect } from '../../../../typings/dialog'; import { Control, useController } from 'react-hook-form'; import { FormValues } from '../../InputDialog'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; diff --git a/web/src/features/dialog/components/fields/slider.tsx b/web/src/features/dialog/components/fields/slider.tsx index 84f16e6..183a9f9 100644 --- a/web/src/features/dialog/components/fields/slider.tsx +++ b/web/src/features/dialog/components/fields/slider.tsx @@ -1,5 +1,5 @@ import { Box, Slider, Text } from '@mantine/core'; -import { ISlider } from '../../../../interfaces/dialog'; +import { ISlider } from '../../../../typings/dialog'; import { Control, useController } from 'react-hook-form'; import { FormValues } from '../../InputDialog'; diff --git a/web/src/features/dialog/components/fields/textarea.tsx b/web/src/features/dialog/components/fields/textarea.tsx index bc1b12a..2fbbd3b 100644 --- a/web/src/features/dialog/components/fields/textarea.tsx +++ b/web/src/features/dialog/components/fields/textarea.tsx @@ -1,6 +1,6 @@ import { Textarea } from '@mantine/core'; import { UseFormRegisterReturn } from 'react-hook-form'; -import { ITextarea } from '../../../../interfaces/dialog'; +import { ITextarea } from '../../../../typings/dialog'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React from 'react'; diff --git a/web/src/features/dialog/components/fields/time.tsx b/web/src/features/dialog/components/fields/time.tsx index 4b92965..d92f304 100644 --- a/web/src/features/dialog/components/fields/time.tsx +++ b/web/src/features/dialog/components/fields/time.tsx @@ -1,7 +1,7 @@ import { TimeInput } from '@mantine/dates'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Control, useController } from 'react-hook-form'; -import { ITimeInput } from '../../../../interfaces/dialog'; +import { ITimeInput } from '../../../../typings/dialog'; import { FormValues } from '../../InputDialog'; interface Props { diff --git a/web/src/features/menu/context/ContextMenu.tsx b/web/src/features/menu/context/ContextMenu.tsx index 52356be..79e59d5 100644 --- a/web/src/features/menu/context/ContextMenu.tsx +++ b/web/src/features/menu/context/ContextMenu.tsx @@ -1,7 +1,7 @@ import { useNuiEvent } from '../../../hooks/useNuiEvent'; import { Box, Stack, Text, Flex } from '@mantine/core'; import { useEffect, useState } from 'react'; -import { ContextMenuProps } from '../../../interfaces/context'; +import { ContextMenuProps } from '../../../typings'; import ContextButton from './components/ContextButton'; import { fetchNui } from '../../../utils/fetchNui'; import ReactMarkdown from 'react-markdown'; diff --git a/web/src/features/menu/context/components/ContextButton.tsx b/web/src/features/menu/context/components/ContextButton.tsx index 6680727..3dd25d6 100644 --- a/web/src/features/menu/context/components/ContextButton.tsx +++ b/web/src/features/menu/context/components/ContextButton.tsx @@ -1,7 +1,7 @@ import { Button, Box, Group, Stack, Text, Progress, HoverCard, Image, createStyles } from '@mantine/core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import ReactMarkdown from 'react-markdown'; -import { Option, ContextMenuProps } from '../../../../interfaces/context'; +import { Option, ContextMenuProps } from '../../../../typings'; import { fetchNui } from '../../../../utils/fetchNui'; const openMenu = (id: string | undefined) => { @@ -90,17 +90,19 @@ const ContextButton: React.FC<{ {button.image && } {Array.isArray(button.metadata) ? ( - button.metadata.map((metadata: string | { label: string; value?: any; progress?: number }, index: number) => ( - <> - - {typeof metadata === 'string' ? `${metadata}` : `${metadata.label}: ${metadata?.value ?? ""}`} - + button.metadata.map( + (metadata: string | { label: string; value?: any; progress?: number }, index: number) => ( + <> + + {typeof metadata === 'string' ? `${metadata}` : `${metadata.label}: ${metadata?.value ?? ''}`} + - {typeof metadata === 'object' && metadata.progress !== undefined && ( - - )} - - )) + {typeof metadata === 'object' && metadata.progress !== undefined && ( + + )} + + ) + ) ) : ( <> {typeof button.metadata === 'object' && diff --git a/web/src/features/menu/list/ListItem.tsx b/web/src/features/menu/list/ListItem.tsx index 51caa9a..373630a 100644 --- a/web/src/features/menu/list/ListItem.tsx +++ b/web/src/features/menu/list/ListItem.tsx @@ -2,7 +2,7 @@ import { Box, Group, Stack, Text, Progress } from '@mantine/core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React, { forwardRef } from 'react'; import CustomCheckbox from './CustomCheckbox'; -import type { MenuItem } from './index'; +import type { MenuItem } from '../../../typings'; import { createStyles } from '@mantine/core'; interface Props { diff --git a/web/src/features/menu/list/index.tsx b/web/src/features/menu/list/index.tsx index db28f45..e062ea4 100644 --- a/web/src/features/menu/list/index.tsx +++ b/web/src/features/menu/list/index.tsx @@ -4,33 +4,10 @@ import { useNuiEvent } from '../../../hooks/useNuiEvent'; import ListItem from './ListItem'; import Header from './Header'; import FocusTrap from 'focus-trap-react'; -import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { fetchNui } from '../../../utils/fetchNui'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React from 'react'; - -type MenuPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; - -export interface MenuItem { - label: string; - progress?: number; - colorScheme?: string; - checked?: boolean; - values?: Array; - description?: string; - icon?: IconProp; - iconColor?: string; - defaultIndex?: number; - close?: boolean; -} - -export interface MenuSettings { - position?: MenuPosition; - title: string; - canClose?: boolean; - items: Array; - startItemIndex?: number; -} +import type { MenuPosition, MenuSettings } from '../../../typings'; const useStyles = createStyles((theme, params: { position?: MenuPosition; itemCount: number; selected: number }) => ({ tooltip: { diff --git a/web/src/features/menu/radial/index.tsx b/web/src/features/menu/radial/index.tsx index 0356010..d387586 100644 --- a/web/src/features/menu/radial/index.tsx +++ b/web/src/features/menu/radial/index.tsx @@ -1,15 +1,10 @@ import { Box, createStyles } from '@mantine/core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { useState } from 'react'; import { useNuiEvent } from '../../../hooks/useNuiEvent'; import { fetchNui } from '../../../utils/fetchNui'; import ScaleFade from '../../../transitions/ScaleFade'; - -export interface MenuItem { - icon: IconProp; - label: string; -} +import type { RadialMenuItem } from '../../../typings'; const useStyles = createStyles((theme) => ({ wrapper: { @@ -61,12 +56,12 @@ const degToRad = (deg: number) => deg * (Math.PI / 180); const RadialMenu: React.FC = () => { const { classes } = useStyles(); const [visible, setVisible] = useState(false); - const [menu, setMenu] = useState<{ items: MenuItem[]; sub?: boolean }>({ + const [menu, setMenu] = useState<{ items: RadialMenuItem[]; sub?: boolean }>({ items: [], sub: false, }); - useNuiEvent('openRadialMenu', async (data: { items: MenuItem[]; sub?: boolean } | false) => { + useNuiEvent('openRadialMenu', async (data: { items: RadialMenuItem[]; sub?: boolean } | false) => { if (!data) return setVisible(false); if (visible) { setVisible(false); @@ -76,7 +71,7 @@ const RadialMenu: React.FC = () => { setVisible(true); }); - useNuiEvent('refreshItems', (data: MenuItem[]) => { + useNuiEvent('refreshItems', (data: RadialMenuItem[]) => { setMenu({ ...menu, items: data }); }); diff --git a/web/src/features/notifications/NotificationWrapper.tsx b/web/src/features/notifications/NotificationWrapper.tsx index 45a69f8..b64ad86 100644 --- a/web/src/features/notifications/NotificationWrapper.tsx +++ b/web/src/features/notifications/NotificationWrapper.tsx @@ -1,22 +1,10 @@ import { useNuiEvent } from '../../hooks/useNuiEvent'; -import { IconProp } from '@fortawesome/fontawesome-svg-core'; -import { toast, Toaster, ToastPosition } from 'react-hot-toast'; +import { toast, Toaster } from 'react-hot-toast'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import ReactMarkdown from 'react-markdown'; import { Avatar, createStyles, Group, Stack, Box, Text, keyframes } from '@mantine/core'; import React from 'react'; - -export interface CustomNotificationProps { - style?: React.CSSProperties; - description?: string; - title?: string; - duration?: number; - icon?: IconProp; - iconColor?: string; - position?: ToastPosition | 'top' | 'bottom'; - id?: number | string; - type?: string; -} +import type { NotificationProps } from '../../typings'; const useStyles = createStyles((theme) => ({ container: { @@ -117,7 +105,7 @@ const exitAnimationBottom = keyframes({ const Notifications: React.FC = () => { const { classes } = useStyles(); - useNuiEvent('notify', (data) => { + useNuiEvent('notify', (data) => { if (!data.title && !data.description) return; // Backwards compat with old notifications let position = data.position; diff --git a/web/src/features/progress/CircleProgressbar.tsx b/web/src/features/progress/CircleProgressbar.tsx index b74b966..8f5bd0d 100644 --- a/web/src/features/progress/CircleProgressbar.tsx +++ b/web/src/features/progress/CircleProgressbar.tsx @@ -3,13 +3,7 @@ import { RingProgress, Text, useMantineTheme, keyframes, Stack, createStyles } f import { useNuiEvent } from '../../hooks/useNuiEvent'; import { fetchNui } from '../../utils/fetchNui'; import ScaleFade from '../../transitions/ScaleFade'; - -export interface CircleProgressbarProps { - label?: string; - duration: number; - position?: 'middle' | 'bottom'; - percent?: boolean; -} +import type { CircleProgressbarProps } from '../../typings'; // 33.5 is the r of the circle const progressCircle = keyframes({ diff --git a/web/src/features/progress/Progressbar.tsx b/web/src/features/progress/Progressbar.tsx index d016b45..ebc2d19 100644 --- a/web/src/features/progress/Progressbar.tsx +++ b/web/src/features/progress/Progressbar.tsx @@ -3,11 +3,7 @@ import { Box, Text, createStyles } from '@mantine/core'; import { useNuiEvent } from '../../hooks/useNuiEvent'; import { fetchNui } from '../../utils/fetchNui'; import ScaleFade from '../../transitions/ScaleFade'; - -export interface ProgressbarProps { - label: string; - duration: number; -} +import type { ProgressbarProps } from '../../typings'; const useStyles = createStyles((theme) => ({ container: { diff --git a/web/src/features/skillcheck/index.tsx b/web/src/features/skillcheck/index.tsx index 0b0984e..6760b56 100644 --- a/web/src/features/skillcheck/index.tsx +++ b/web/src/features/skillcheck/index.tsx @@ -3,20 +3,7 @@ import { useNuiEvent } from '../../hooks/useNuiEvent'; import Indicator from './indicator'; import { fetchNui } from '../../utils/fetchNui'; import { Box, createStyles } from '@mantine/core'; - -interface CustomGameDifficulty { - areaSize: number; - speedMultiplier: number; -} - -export type GameDifficulty = 'easy' | 'medium' | 'hard' | CustomGameDifficulty; - -export interface SkillCheckProps { - angle: number; - difficultyOffset: number; - difficulty: GameDifficulty; - key: string; -} +import type { SkillCheckProps, GameDifficulty } from '../../typings'; export const circleCircumference = 2 * 50 * Math.PI; diff --git a/web/src/features/skillcheck/indicator.tsx b/web/src/features/skillcheck/indicator.tsx index 1ba7375..333050e 100644 --- a/web/src/features/skillcheck/indicator.tsx +++ b/web/src/features/skillcheck/indicator.tsx @@ -1,5 +1,5 @@ import { useCallback, useEffect, useState } from 'react'; -import { SkillCheckProps } from './index'; +import type { SkillCheckProps } from '../../typings'; import { useInterval } from '@mantine/hooks'; import { circleCircumference } from './index'; diff --git a/web/src/features/textui/TextUI.tsx b/web/src/features/textui/TextUI.tsx index d4131f5..f316e50 100644 --- a/web/src/features/textui/TextUI.tsx +++ b/web/src/features/textui/TextUI.tsx @@ -3,21 +3,11 @@ import { useNuiEvent } from '../../hooks/useNuiEvent'; import { Box, createStyles, Group } from '@mantine/core'; import ReactMarkdown from 'react-markdown'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { IconProp } from '@fortawesome/fontawesome-svg-core'; import ScaleFade from '../../transitions/ScaleFade'; import remarkGfm from 'remark-gfm'; +import type { TextUiProps, TextUiPosition } from '../../typings'; -type Position = 'right-center' | 'left-center' | 'top-center'; - -export interface TextUiProps { - text: string; - position?: Position; - icon?: IconProp; - iconColor?: string; - style?: React.CSSProperties; -} - -const useStyles = createStyles((theme, params: { position?: Position }) => ({ +const useStyles = createStyles((theme, params: { position?: TextUiPosition }) => ({ wrapper: { height: '100%', width: '100%', diff --git a/web/src/typings/alert.ts b/web/src/typings/alert.ts new file mode 100644 index 0000000..f187c53 --- /dev/null +++ b/web/src/typings/alert.ts @@ -0,0 +1,12 @@ +export interface AlertProps { + header: string; + content: string; + centered?: boolean; + size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'; + overflow?: boolean; + cancel?: boolean; + labels?: { + cancel?: string; + confirm?: string; + }; +} diff --git a/web/src/interfaces/context.ts b/web/src/typings/context.ts similarity index 100% rename from web/src/interfaces/context.ts rename to web/src/typings/context.ts diff --git a/web/src/interfaces/dialog.ts b/web/src/typings/dialog.ts similarity index 87% rename from web/src/interfaces/dialog.ts rename to web/src/typings/dialog.ts index a072255..86a5358 100644 --- a/web/src/interfaces/dialog.ts +++ b/web/src/typings/dialog.ts @@ -1,5 +1,13 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'; +export interface InputProps { + heading: string; + rows: Array; + options?: { + allowCancel?: boolean; + }; +} + type BaseField = { type: T; label: string; diff --git a/web/src/typings/index.ts b/web/src/typings/index.ts new file mode 100644 index 0000000..f91ba80 --- /dev/null +++ b/web/src/typings/index.ts @@ -0,0 +1,9 @@ +export * from './alert'; +export * from './context'; +export * from './dialog'; +export * from './menu'; +export * from './notifications'; +export * from './progress'; +export * from './radial'; +export * from './skillcheck'; +export * from './textui'; diff --git a/web/src/typings/menu.ts b/web/src/typings/menu.ts new file mode 100644 index 0000000..c76f70e --- /dev/null +++ b/web/src/typings/menu.ts @@ -0,0 +1,24 @@ +import { IconProp } from '@fortawesome/fontawesome-svg-core'; + +export type MenuPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; + +export interface MenuItem { + label: string; + progress?: number; + colorScheme?: string; + checked?: boolean; + values?: Array; + description?: string; + icon?: IconProp; + iconColor?: string; + defaultIndex?: number; + close?: boolean; +} + +export interface MenuSettings { + position?: MenuPosition; + title: string; + canClose?: boolean; + items: Array; + startItemIndex?: number; +} diff --git a/web/src/typings/notifications.ts b/web/src/typings/notifications.ts new file mode 100644 index 0000000..6edfdd3 --- /dev/null +++ b/web/src/typings/notifications.ts @@ -0,0 +1,15 @@ +import React from 'react'; +import { ToastPosition } from 'react-hot-toast'; +import { IconProp } from '@fortawesome/fontawesome-svg-core'; + +export interface NotificationProps { + style?: React.CSSProperties; + description?: string; + title?: string; + duration?: number; + icon?: IconProp; + iconColor?: string; + position?: ToastPosition | 'top' | 'bottom'; + id?: number | string; + type?: string; +} diff --git a/web/src/typings/progress.ts b/web/src/typings/progress.ts new file mode 100644 index 0000000..6779f2a --- /dev/null +++ b/web/src/typings/progress.ts @@ -0,0 +1,11 @@ +export interface CircleProgressbarProps { + label?: string; + duration: number; + position?: 'middle' | 'bottom'; + percent?: boolean; +} + +export interface ProgressbarProps { + label: string; + duration: number; +} diff --git a/web/src/typings/radial.ts b/web/src/typings/radial.ts new file mode 100644 index 0000000..72c0bda --- /dev/null +++ b/web/src/typings/radial.ts @@ -0,0 +1,6 @@ +import { IconProp } from '@fortawesome/fontawesome-svg-core'; + +export interface RadialMenuItem { + icon: IconProp; + label: string; +} diff --git a/web/src/typings/skillcheck.ts b/web/src/typings/skillcheck.ts new file mode 100644 index 0000000..8b52ad2 --- /dev/null +++ b/web/src/typings/skillcheck.ts @@ -0,0 +1,13 @@ +interface CustomGameDifficulty { + areaSize: number; + speedMultiplier: number; +} + +export type GameDifficulty = 'easy' | 'medium' | 'hard' | CustomGameDifficulty; + +export interface SkillCheckProps { + angle: number; + difficultyOffset: number; + difficulty: GameDifficulty; + key: string; +} diff --git a/web/src/typings/textui.ts b/web/src/typings/textui.ts new file mode 100644 index 0000000..8638bb8 --- /dev/null +++ b/web/src/typings/textui.ts @@ -0,0 +1,12 @@ +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import React from 'react'; + +export type TextUiPosition = 'right-center' | 'left-center' | 'top-center'; + +export interface TextUiProps { + text: string; + position?: TextUiPosition; + icon?: IconProp; + iconColor?: string; + style?: React.CSSProperties; +} diff --git a/web/vite.config.ts b/web/vite.config.ts index ec11930..807a659 100644 --- a/web/vite.config.ts +++ b/web/vite.config.ts @@ -1,5 +1,6 @@ import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; +const path = require("path"); // https://vitejs.dev/config/ export default defineConfig({