refactor(web): move all types into typings folder

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<AlertProps>([

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',

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<InputProps>([

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<MenuSettings>([
@@ -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' },

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<CustomNotificationProps>([
+  debugData<NotificationProps>([
     {
       action: 'notify',
       data: {
         title: 'Success',
         description: 'Notification description',
         type: 'success',
+        id: 'pogchamp',
       },
     },
   ]);
-  debugData<CustomNotificationProps>([
+  debugData<NotificationProps>([
     {
       action: 'notify',
       data: {
-        title: 'Info',
+        title: 'Success',
         description: 'Notification description',
-        type: 'info',
+        type: 'success',
+        id: 'pogchamp',
       },
     },
   ]);
-  debugData<CustomNotificationProps>([
+  debugData<NotificationProps>([
     {
       action: 'notify',
       data: {
@@ -32,7 +34,7 @@ export const debugCustomNotification = () => {
       },
     },
   ]);
-  debugData<CustomNotificationProps>([
+  debugData<NotificationProps>([
     {
       action: 'notify',
       data: {

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<ProgressbarProps>([

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 }>([

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[] }>([

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 = () => {

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

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<IInput | ICheckbox | ISelect | INumber | ISlider | IColorInput | IDateInput | ITextarea | ITimeInput>;
-  options?: {
-    allowCancel?: boolean;
-  };
-}
+import type { InputProps } from '../../typings';
 
 export type FormValues = {
   test: {

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 {

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';

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';

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 {

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';

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';

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';
 

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';
 

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 {

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';

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<{
         <HoverCard.Dropdown className={classes.dropdown}>
           {button.image && <Image src={button.image} />}
           {Array.isArray(button.metadata) ? (
-            button.metadata.map((metadata: string | { label: string; value?: any; progress?: number }, index: number) => (
-              <>
-                <Text key={`context-metadata-${index}`}>
-                  {typeof metadata === 'string' ? `${metadata}` : `${metadata.label}: ${metadata?.value ?? ""}`}
-                </Text>
+            button.metadata.map(
+              (metadata: string | { label: string; value?: any; progress?: number }, index: number) => (
+                <>
+                  <Text key={`context-metadata-${index}`}>
+                    {typeof metadata === 'string' ? `${metadata}` : `${metadata.label}: ${metadata?.value ?? ''}`}
+                  </Text>
 
-                {typeof metadata === 'object' && metadata.progress !== undefined && (
-                  <Progress value={metadata.progress} size="sm" color={button.colorScheme || 'dark.3'} />
-                )}
-              </>
-            ))
+                  {typeof metadata === 'object' && metadata.progress !== undefined && (
+                    <Progress value={metadata.progress} size="sm" color={button.colorScheme || 'dark.3'} />
+                  )}
+                </>
+              )
+            )
           ) : (
             <>
               {typeof button.metadata === 'object' &&

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 {

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<string | { label: string; description: string }>;
-  description?: string;
-  icon?: IconProp;
-  iconColor?: string;
-  defaultIndex?: number;
-  close?: boolean;
-}
-
-export interface MenuSettings {
-  position?: MenuPosition;
-  title: string;
-  canClose?: boolean;
-  items: Array<MenuItem>;
-  startItemIndex?: number;
-}
+import type { MenuPosition, MenuSettings } from '../../../typings';
 
 const useStyles = createStyles((theme, params: { position?: MenuPosition; itemCount: number; selected: number }) => ({
   tooltip: {

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

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<CustomNotificationProps>('notify', (data) => {
+  useNuiEvent<NotificationProps>('notify', (data) => {
     if (!data.title && !data.description) return;
     // Backwards compat with old notifications
     let position = data.position;

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({

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

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;
 

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';
 

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%',