feat(web): developer drawer

Move all debug functions into a single developer drawer,

Not the best implementation as there is focus fighting going on between some elements and the drawer but will do for now without state management

web/src/features/dialog/AlertDialog.tsx

@@ -11,34 +11,21 @@ import {
 import { useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import { useNuiEvent } from "../../hooks/useNuiEvent";
-import { debugData } from "../../utils/debugData";
 import { fetchNui } from "../../utils/fetchNui";
 import { useLocales } from "../../providers/LocaleProvider";
 
-interface DialogProps {
+export interface AlertProps {
   header: string;
   content: string;
   centered?: boolean;
   cancel?: boolean;
 }
 
-// debugData<DialogProps>([
-//   {
-//     action: "sendAlert",
-//     data: {
-//       header: "Hello there",
-//       content: "General kenobi  \n Markdown works",
-//       centered: true,
-//       cancel: true,
-//     },
-//   },
-// ]);
-
 const AlertDialog: React.FC = () => {
   const { locale } = useLocales();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const cancelRef = useRef(null);
-  const [dialogData, setDialogData] = useState<DialogProps>({
+  const [dialogData, setDialogData] = useState<AlertProps>({
     header: "",
     content: "",
   });
@@ -48,7 +35,7 @@ const AlertDialog: React.FC = () => {
     fetchNui("closeAlert", button);
   };
 
-  useNuiEvent("sendAlert", (data: DialogProps) => {
+  useNuiEvent("sendAlert", (data: AlertProps) => {
     setDialogData(data);
     onOpen();
   });
@@ -77,7 +64,10 @@ const AlertDialog: React.FC = () => {
                 {locale.ui.cancel}
               </Button>
             )}
-            <Button colorScheme={dialogData.cancel ? "blue" : undefined} onClick={() => closeAlert("confirm")}>
+            <Button
+              colorScheme={dialogData.cancel ? "blue" : undefined}
+              onClick={() => closeAlert("confirm")}
+            >
               {locale.ui.confirm}
             </Button>
           </AlertDialogFooter>

web/src/features/dialog/InputDialog.tsx

@@ -1,54 +1,42 @@
-import { Modal, ModalOverlay, ModalContent, ModalFooter, ModalHeader, ModalBody, Button } from '@chakra-ui/react';
-import React from 'react';
-import { useNuiEvent } from '../../hooks/useNuiEvent';
-import { useKeyPress } from '../../hooks/useKeyPress';
-import { useLocales } from '../../providers/LocaleProvider';
-import { debugData } from '../../utils/debugData';
-import { fetchNui } from '../../utils/fetchNui';
-import { IInput, ICheckbox, ISelect, INumber, ISlider } from '../../interfaces/dialog';
-import InputField from './components/input';
-import CheckboxField from './components/checkbox';
-import SelectField from './components/select';
-import NumberField from './components/number';
-import SliderField from './components/slider';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalBody,
+  Button,
+} from "@chakra-ui/react";
+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,
+} from "../../interfaces/dialog";
+import InputField from "./components/input";
+import CheckboxField from "./components/checkbox";
+import SelectField from "./components/select";
+import NumberField from "./components/number";
+import SliderField from "./components/slider";
 
-interface Props {
+export interface InputProps {
   heading: string;
   rows: Array<IInput | ICheckbox | ISelect | INumber | ISlider>;
 }
 
-// debugData<Props>([
-//   {
-//     action: "openDialog",
-//     data: {
-//       heading: "Police locker",
-//       rows: [
-//         { type: "input", label: "Locker number", placeholder: "420" },
-//         { type: "checkbox", label: "Some checkbox" },
-//         { type: "input", label: "Locker PIN", password: true, icon: "lock" },
-//         { type: "checkbox", label: "Some other checkbox", checked: true },
-//         {
-//           type: "select",
-//           label: "Locker type",
-//           options: [
-//             { value: "option1" },
-//             { value: "option2", label: "Option 2" },
-//             { value: "option3", label: "Option 3" },
-//           ],
-//         },
-//         { type: "number", label: "Number counter", default: 12 },
-//         { type: "slider", label: "Slide bar", min: 10, max: 50, step: 2 },
-//       ],
-//     },
-//   },
-// ]);
-
 const InputDialog: React.FC = () => {
-  const [fields, setFields] = React.useState<Props>({
-    heading: '',
-    rows: [{ type: 'input', label: '' }],
+  const [fields, setFields] = React.useState<InputProps>({
+    heading: "",
+    rows: [{ type: "input", label: "" }],
   });
-  const [inputData, setInputData] = React.useState<Array<string | number | boolean>>([]);
+  const [inputData, setInputData] = React.useState<
+    Array<string | number | boolean>
+  >([]);
   const [passwordStates, setPasswordStates] = React.useState<boolean[]>([]);
   const [visible, setVisible] = React.useState(false);
   const { locale } = useLocales();
@@ -60,7 +48,7 @@ const InputDialog: React.FC = () => {
     });
   };
 
-  useNuiEvent<Props>('openDialog', (data) => {
+  useNuiEvent<InputProps>("openDialog", (data) => {
     setPasswordStates([]);
     setFields(data);
     setInputData([]);
@@ -69,7 +57,7 @@ const InputDialog: React.FC = () => {
 
   const handleClose = () => {
     setVisible(false);
-    fetchNui('inputData');
+    fetchNui("inputData");
   };
 
   const handleChange = (value: string | number | boolean, index: number) => {
@@ -81,38 +69,74 @@ const InputDialog: React.FC = () => {
 
   const handleConfirm = () => {
     setVisible(false);
-    fetchNui('inputData', inputData);
+    fetchNui("inputData", inputData);
   };
 
   return (
     <>
-      <Modal isOpen={visible} onClose={handleClose} isCentered closeOnEsc closeOnOverlayClick={false} size="xs">
+      <Modal
+        isOpen={visible}
+        onClose={handleClose}
+        isCentered
+        closeOnEsc
+        closeOnOverlayClick={false}
+        size="xs"
+      >
         <ModalOverlay />
         <ModalContent
           onKeyDown={(e) => {
-            if (e.key === 'Enter' && visible) return handleConfirm();
+            if (e.key === "Enter" && visible) return handleConfirm();
           }}
         >
           <ModalHeader textAlign="center">{fields.heading}</ModalHeader>
           <ModalBody fontFamily="Poppins" textAlign="left">
-            {fields.rows.map((row: IInput | ICheckbox | ISelect | INumber | ISlider, index) => (
-              <React.Fragment key={`row-${index}`}>
-                {row.type === 'input' && (
-                  <InputField
-                    key={`input-${index}`}
-                    row={row}
-                    index={index}
-                    handleChange={handleChange}
-                    passwordStates={passwordStates}
-                    handlePasswordStates={handlePasswordStates}
-                  />
-                )}
-                {row.type === 'checkbox' && <CheckboxField row={row} index={index} handleChange={handleChange} />}
-                {row.type === 'select' && <SelectField row={row} index={index} handleChange={handleChange} />}
-                {row.type === 'number' && <NumberField row={row} index={index} handleChange={handleChange} />}
-                {row.type === 'slider' && <SliderField row={row} index={index} handleChange={handleChange} />}
-              </React.Fragment>
-            ))}
+            {fields.rows.map(
+              (
+                row: IInput | ICheckbox | ISelect | INumber | ISlider,
+                index
+              ) => (
+                <React.Fragment key={`row-${index}`}>
+                  {row.type === "input" && (
+                    <InputField
+                      key={`input-${index}`}
+                      row={row}
+                      index={index}
+                      handleChange={handleChange}
+                      passwordStates={passwordStates}
+                      handlePasswordStates={handlePasswordStates}
+                    />
+                  )}
+                  {row.type === "checkbox" && (
+                    <CheckboxField
+                      row={row}
+                      index={index}
+                      handleChange={handleChange}
+                    />
+                  )}
+                  {row.type === "select" && (
+                    <SelectField
+                      row={row}
+                      index={index}
+                      handleChange={handleChange}
+                    />
+                  )}
+                  {row.type === "number" && (
+                    <NumberField
+                      row={row}
+                      index={index}
+                      handleChange={handleChange}
+                    />
+                  )}
+                  {row.type === "slider" && (
+                    <SliderField
+                      row={row}
+                      index={index}
+                      handleChange={handleChange}
+                    />
+                  )}
+                </React.Fragment>
+              )
+            )}
           </ModalBody>
           <ModalFooter>
             <Button mr={3} onClick={handleClose}>