Add maps, Bluetooth config & fixes

src/core/providers/useCreateMapbox.ts

@@ -0,0 +1,32 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+
+import { Map, MapOptions } from "maplibre-gl";
+
+export interface useMapboxProps {
+  ref: React.RefObject<HTMLDivElement>;
+  style: string;
+  options?: Partial<MapOptions>;
+}
+
+export function useCreateMapbox({
+  ref,
+  style,
+  options,
+}: useMapboxProps): Map | undefined {
+  const [mapInstance, setMapInstance] = useState<Map>();
+  useEffect(() => {
+    const container = ref.current as HTMLDivElement;
+    if (mapInstance || !container) {
+      return;
+    }
+    const map = new Map({
+      container,
+      style,
+      ...options,
+    });
+    setMapInstance(map);
+  }, []);
+
+  return mapInstance;
+}

src/core/providers/useDevice.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+
+import type { Device } from "../stores/deviceStore.js";
+
+export const DeviceContext = createContext<Device | undefined>(undefined);
+
+export const useDevice = (): Device => {
+  const context = useContext(DeviceContext);
+  if (context === undefined) {
+    throw new Error("useDevice must be used within a ConnectionProvider");
+  }
+  return context;
+};

src/core/providers/useMap.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+
+import type { Map } from "maplibre-gl";
+
+export interface MapContextValue {
+  ref: React.Ref<HTMLDivElement>;
+  map?: Map;
+}
+
+export const MapContext = createContext<MapContextValue>({} as MapContextValue);
+
+export const useMap = (): MapContextValue => {
+  return useContext(MapContext);
+};