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/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",
+      },
+    },
+  ]);
+};