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/App.tsx

@@ -10,6 +10,8 @@ import { setClipboard } from "./utils/setClipboard";
 import { fetchNui } from "./utils/fetchNui";
 import AlertDialog from "./features/dialog/AlertDialog";
 import ListMenu from "./features/menu/list";
+import Dev from "./features/dev";
+import { isEnvBrowser } from "./utils/misc";
 
 const App: React.FC = () => {
   useNuiEvent("setClipboard", (data: string) => {
@@ -29,6 +31,7 @@ const App: React.FC = () => {
       <AlertDialog />
       <ContextMenu />
       <ListMenu />
+      {isEnvBrowser() && <Dev />}
     </>
   );
 };

web/src/features/dev/debug/alert.ts

@@ -0,0 +1,16 @@
+import { debugData } from "../../../utils/debugData";
+import { AlertProps } from "../../dialog/AlertDialog";
+
+export const debugAlert = () => {
+  debugData<AlertProps>([
+    {
+      action: "sendAlert",
+      data: {
+        header: "Hello there",
+        content: "General kenobi  \n Markdown works",
+        centered: true,
+        cancel: true,
+      },
+    },
+  ]);
+};

web/src/features/dev/debug/context.ts

@@ -0,0 +1,38 @@
+import { ContextMenuProps } from "../../../interfaces/context";
+import { debugData } from "../../../utils/debugData";
+
+export const debugContext = () => {
+  debugData<ContextMenuProps>([
+    {
+      action: "showContext",
+      data: {
+        title: "Vehicle garage",
+        options: [
+          { title: "Empty button" },
+          {
+            title: "Example button",
+            description: "Example button description",
+            icon: "inbox",
+            image: "https://i.imgur.com/YAe7k17.jpeg",
+            metadata: [{ label: "Value 1", value: 300 }],
+          },
+          {
+            title: "Menu button",
+            icon: "bars",
+            menu: "other_example_menu",
+            description: "Takes you to another menu",
+            metadata: ["It also has metadata support"],
+          },
+          {
+            title: "Event button",
+            description: "Open a menu and send event data",
+            icon: "check",
+            arrow: true,
+            event: "some_event",
+            args: { value1: 300, value2: "Other value" },
+          },
+        ],
+      },
+    },
+  ]);
+};

web/src/features/dev/debug/input.ts

@@ -0,0 +1,30 @@
+import { debugData } from "../../../utils/debugData";
+import {InputProps} from "../../dialog/InputDialog";
+
+export const debugInput = () => {
+  debugData<InputProps>([
+  {
+    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 },
+      ],
+    },
+  },
+]);
+}

web/src/features/dev/debug/menu.ts

@@ -0,0 +1,41 @@
+import { debugData } from "../../../utils/debugData";
+import { MenuSettings } from "../../menu/list";
+
+export const debugMenu = () => {
+  debugData<MenuSettings>([
+    {
+      action: "setMenu",
+      data: {
+        //   position: "bottom-left",
+        title: "Vehicle garage",
+        items: [
+          { label: "Option 1", icon: "heart" },
+          {
+            label: "Option 2",
+            icon: "basket-shopping",
+            description: "Tooltip description 1",
+          },
+          {
+            label: "Vehicle class",
+            values: ["Nice", "Super nice", "Extra nice"],
+            icon: "tag",
+            description: "Tooltip description 2",
+          },
+          { label: "Option 1" },
+          { label: "Option 2" },
+          {
+            label: "Vehicle class",
+            values: ["Nice", "Super nice", "Extra nice"],
+            defaultIndex: 1,
+          },
+          { label: "Option 1" },
+          { label: "Option 2" },
+          {
+            label: "Vehicle class",
+            values: ["Nice", "Super nice", "Extra nice"],
+          },
+        ],
+      },
+    },
+  ]);
+};

web/src/features/dev/debug/notification.ts

@@ -0,0 +1,34 @@
+import {
+  CustomNotifiactionProps,
+  NotificationProps,
+} from "../../notifications/NotificationWrapper";
+import { debugData } from "../../../utils/debugData";
+
+export const debugNotification = () => {
+  debugData<NotificationProps>([
+    {
+      action: "notify",
+      data: {
+        description: "Dunak is nerd",
+        title: "Dunak",
+        id: 1,
+      },
+    },
+  ]);
+};
+
+export const debugCustomNotification = () => {
+  debugData<CustomNotifiactionProps>([
+    {
+      action: "customNotify",
+      data: {
+        description: "Dunak is nerd",
+        icon: "basket-shopping",
+        style: {
+          backgroundColor: "#2D3748",
+          color: "white",
+        },
+      },
+    },
+  ]);
+};

web/src/features/dev/debug/progress.ts

@@ -0,0 +1,26 @@
+import { debugData } from "../../../utils/debugData";
+import { ProgressbarProps } from "../../progress/Progressbar";
+
+export const debugProgressbar = () => {
+  debugData<ProgressbarProps>([
+    {
+      action: "progress",
+      data: {
+        label: "Using Lockpick",
+        duration: 8000,
+      },
+    },
+  ]);
+};
+
+export const debugCircleProgressbar = () => {
+  debugData([
+    {
+      action: "circleProgress",
+      data: {
+        duration: 8000,
+        label: "Using Armour",
+      },
+    },
+  ]);
+};

web/src/features/dev/debug/settings.ts

@@ -0,0 +1,10 @@
+import { debugData } from "../../../utils/debugData";
+
+export const debugSettings = () => {
+  debugData([
+  {
+    action: "openSettings",
+    data: true,
+  },
+]);
+}

web/src/features/dev/debug/textui.ts

@@ -0,0 +1,15 @@
+import { TextUiProps } from "../../textui/TextUI";
+import { debugData } from "../../../utils/debugData";
+
+export const debugTextUI = () => {
+  debugData<TextUiProps>([
+    {
+      action: "textUi",
+      data: {
+        text: "[E] - Access locker inventory  \n [G] - Do something else",
+        position: "right-center",
+        icon: "door-open",
+      },
+    },
+  ]);
+};

web/src/features/dev/index.tsx

@@ -0,0 +1,96 @@
+import {
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+  IconButton,
+  Tooltip,
+  VStack,
+  Divider,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { debugAlert } from "./debug/alert";
+import { debugContext } from "./debug/context";
+import { debugInput } from "./debug/input";
+import { debugMenu } from "./debug/menu";
+import {
+  debugCustomNotification,
+  debugNotification,
+} from "./debug/notification";
+import { debugCircleProgressbar, debugProgressbar } from "./debug/progress";
+import { debugTextUI } from "./debug/textui";
+import { debugSettings } from "./debug/settings";
+
+const Dev: React.FC = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <>
+      <Tooltip label="Developer drawer">
+        <IconButton
+          position="absolute"
+          bottom={0}
+          right={0}
+          mr={20}
+          mb={20}
+          borderRadius="50%"
+          icon={<FontAwesomeIcon icon="wrench" fixedWidth size="lg" />}
+          colorScheme="orange"
+          size="lg"
+          aria-label="Dev tools"
+          onClick={() => onOpen()}
+        />
+      </Tooltip>
+      <Drawer placement="left" onClose={onClose} isOpen={isOpen}>
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerHeader>Developer drawer</DrawerHeader>
+          <DrawerBody>
+            <VStack>
+              <Divider />
+              <Button isFullWidth onClick={() => debugInput()}>
+                Open input dialog
+              </Button>
+              <Button isFullWidth onClick={() => debugAlert()}>
+                Open alert dialog
+              </Button>
+              <Divider />
+              <Button isFullWidth onClick={() => debugContext()}>
+                Open context menu
+              </Button>
+              <Button isFullWidth onClick={() => debugMenu()}>
+                Open list menu
+              </Button>
+              <Divider />
+              <Button isFullWidth onClick={() => debugCustomNotification()}>
+                Send custom notification
+              </Button>
+              <Button isFullWidth onClick={() => debugNotification()}>
+                Send default notification
+              </Button>
+              <Divider />
+              <Button isFullWidth onClick={() => debugProgressbar()}>
+                Activate progress bar
+              </Button>
+              <Button isFullWidth onClick={() => debugCircleProgressbar()}>
+                Activate progress circle
+              </Button>
+              <Divider />
+              <Button isFullWidth onClick={() => debugSettings()}>
+                Open settings page
+              </Button>
+              <Button isFullWidth onClick={() => debugTextUI()}>
+                Show TextUI
+              </Button>
+            </VStack>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+};
+
+export default Dev;

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>