diff --git a/.trunk/trunk.yaml b/.trunk/trunk.yaml index 66dd75b1..af188608 100644 --- a/.trunk/trunk.yaml +++ b/.trunk/trunk.yaml @@ -10,8 +10,6 @@ lint: enabled: - markdownlint@0.33.0 - prettier@2.8.3 - - oxipng@8.0.0 - - svgo@3.0.2 - git-diff-check - actionlint@1.6.23 - gitleaks@8.15.3 diff --git a/src/App.tsx b/src/App.tsx index a17fe0f7..22d991d0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,5 @@ -import type React from "react"; - import { MapProvider } from "react-map-gl"; - -import { useAppStore } from "@app/core/stores/appStore.js"; +import { useAppStore } from "@core/stores/appStore.js"; import { DeviceWrapper } from "@app/DeviceWrapper.js"; import { PageRouter } from "@app/PageRouter.js"; import { CommandPalette } from "@components/CommandPalette/Index.js"; @@ -12,9 +9,9 @@ import { NewDevice } from "@components/NewDevice.js"; import { Sidebar } from "@components/Sidebar.js"; import { useDeviceStore } from "@core/stores/deviceStore.js"; -import { Drawer } from "./components/Drawer/index.js"; -import { ThemeController } from "./components/generic/ThemeController.js"; -import { BottomNav } from "./Nav/BottomNav.js"; +import { Drawer } from "@components/Drawer/index.js"; +import { ThemeController } from "@components/generic/ThemeController.js"; +import { BottomNav } from "@app/Nav/BottomNav.js"; export const App = (): JSX.Element => { const { getDevice } = useDeviceStore(); diff --git a/src/DeviceWrapper.tsx b/src/DeviceWrapper.tsx index ec8f9d33..311186d2 100644 --- a/src/DeviceWrapper.tsx +++ b/src/DeviceWrapper.tsx @@ -1,10 +1,9 @@ -import type React from "react"; - import { DeviceContext } from "@core/providers/useDevice.js"; import type { Device } from "@core/stores/deviceStore.js"; +import type { ReactNode } from "react"; export interface DeviceWrapperProps { - children: React.ReactNode; + children: ReactNode; device?: Device; } diff --git a/src/Nav/BottomNav.tsx b/src/Nav/BottomNav.tsx index 2fc9a938..f0a30dfe 100644 --- a/src/Nav/BottomNav.tsx +++ b/src/Nav/BottomNav.tsx @@ -1,9 +1,8 @@ -import type React from "react"; - import { GitBranchIcon } from "@primer/octicons-react"; +import type { ReactNode } from "react"; export interface BottomNavProps { - children: React.ReactNode; + children: ReactNode; } export const BottomNav = ({ children }: BottomNavProps): JSX.Element => { diff --git a/src/Nav/NavSpacer.tsx b/src/Nav/NavSpacer.tsx index f5ea7daf..f794cec0 100755 --- a/src/Nav/NavSpacer.tsx +++ b/src/Nav/NavSpacer.tsx @@ -1,5 +1,3 @@ -import type React from "react"; - export const NavSpacer = (): JSX.Element => { return
; }; diff --git a/src/Nav/PageNav.tsx b/src/Nav/PageNav.tsx index 64a9bd04..affff920 100755 --- a/src/Nav/PageNav.tsx +++ b/src/Nav/PageNav.tsx @@ -1,8 +1,6 @@ -import type React from "react"; -import type { SVGProps } from "react"; - -import { useDevice } from "@app/core/providers/useDevice.js"; -import type { Page } from "@app/core/stores/deviceStore.js"; +import type { ComponentType, SVGProps } from "react"; +import { useDevice } from "@core/providers/useDevice.js"; +import type { Page } from "@core/stores/deviceStore.js"; import { BeakerIcon, ChatBubbleBottomCenterTextIcon, @@ -17,7 +15,7 @@ export const PageNav = (): JSX.Element => { interface NavLink { name: string; - icon: React.ComponentType>; + icon: ComponentType>; page: Page; } diff --git a/src/PageRouter.tsx b/src/PageRouter.tsx index d68c8fdd..8fc41e73 100644 --- a/src/PageRouter.tsx +++ b/src/PageRouter.tsx @@ -1,5 +1,3 @@ -import type React from "react"; - import { useDevice } from "@core/providers/useDevice.js"; import { ChannelsPage } from "@pages/Channels.js"; import { ConfigPage } from "@pages/Config/index.js"; diff --git a/src/components/CommandPalette/GroupView.tsx b/src/components/CommandPalette/GroupView.tsx index 03a71fec..1e89bf8d 100644 --- a/src/components/CommandPalette/GroupView.tsx +++ b/src/components/CommandPalette/GroupView.tsx @@ -1,5 +1,3 @@ -import type React from "react"; - import type { Group } from "@components/CommandPalette/Index.js"; import { Combobox } from "@headlessui/react"; import { ChevronRightIcon } from "@heroicons/react/24/outline"; diff --git a/src/components/CommandPalette/Index.tsx b/src/components/CommandPalette/Index.tsx index 60ac4b06..420d1753 100644 --- a/src/components/CommandPalette/Index.tsx +++ b/src/components/CommandPalette/Index.tsx @@ -1,11 +1,8 @@ -import type React from "react"; -import { Fragment, useEffect, useState } from "react"; - +import { ComponentType, Fragment, SVGProps, useEffect, useState } from "react"; import { toast } from "react-hot-toast"; - -import { useDevice } from "@app/core/providers/useDevice.js"; -import { useAppStore } from "@app/core/stores/appStore.js"; -import { useDeviceStore } from "@app/core/stores/deviceStore.js"; +import { useDevice } from "@core/providers/useDevice.js"; +import { useAppStore } from "@core/stores/appStore.js"; +import { useDeviceStore } from "@core/stores/deviceStore.js"; import { GroupView } from "@components/CommandPalette/GroupView.js"; import { NoResults } from "@components/CommandPalette/NoResults.js"; import { PaletteTransition } from "@components/CommandPalette/PaletteTransition.js"; @@ -39,18 +36,17 @@ import { WindowIcon, XCircleIcon } from "@heroicons/react/24/outline"; - -import { Blur } from "../generic/Blur.js"; -import { ThemeController } from "../generic/ThemeController.js"; +import { Blur } from "@components/generic/Blur.js"; +import { ThemeController } from "@components/generic/ThemeController.js"; export interface Group { name: string; - icon: React.ComponentType>; + icon: ComponentType>; commands: Command[]; } export interface Command { name: string; - icon: React.ComponentType>; + icon: ComponentType>; action?: () => void; subItems?: SubItem[]; tags?: string[]; diff --git a/src/components/CommandPalette/NoResults.tsx b/src/components/CommandPalette/NoResults.tsx index 04697b01..b712f075 100644 --- a/src/components/CommandPalette/NoResults.tsx +++ b/src/components/CommandPalette/NoResults.tsx @@ -1,5 +1,3 @@ -import type React from "react"; - import { Mono } from "@components/generic/Mono.js"; import { CommandLineIcon } from "@heroicons/react/24/outline"; diff --git a/src/components/CommandPalette/PaletteTransition.tsx b/src/components/CommandPalette/PaletteTransition.tsx index 84b3a5a7..edb64158 100644 --- a/src/components/CommandPalette/PaletteTransition.tsx +++ b/src/components/CommandPalette/PaletteTransition.tsx @@ -1,10 +1,8 @@ -import type React from "react"; -import { Fragment } from "react"; - +import { Fragment, ReactNode } from "react"; import { Transition } from "@headlessui/react"; export interface PaletteTransitionProps { - children: React.ReactNode; + children: ReactNode; } export const PaletteTransition = ({ diff --git a/src/components/CommandPalette/SearchBox.tsx b/src/components/CommandPalette/SearchBox.tsx index 366261c9..17d08db2 100644 --- a/src/components/CommandPalette/SearchBox.tsx +++ b/src/components/CommandPalette/SearchBox.tsx @@ -1,5 +1,3 @@ -import type React from "react"; - import { Combobox } from "@headlessui/react"; import { MagnifyingGlassIcon } from "@heroicons/react/24/outline"; diff --git a/src/components/CommandPalette/SearchResult.tsx b/src/components/CommandPalette/SearchResult.tsx index 93485362..387b713b 100644 --- a/src/components/CommandPalette/SearchResult.tsx +++ b/src/components/CommandPalette/SearchResult.tsx @@ -1,5 +1,3 @@ -import type React from "react"; - import type { Group } from "@components/CommandPalette/Index.js"; import { Combobox } from "@headlessui/react"; import { ChevronRightIcon } from "@heroicons/react/24/outline"; diff --git a/src/components/DeviceSelector.tsx b/src/components/DeviceSelector.tsx index 945bb5f4..7e00624b 100644 --- a/src/components/DeviceSelector.tsx +++ b/src/components/DeviceSelector.tsx @@ -1,17 +1,15 @@ -import type React from "react"; - -import { useAppStore } from "@app/core/stores/appStore.js"; -import { useDeviceStore } from "@app/core/stores/deviceStore.js"; +import { useAppStore } from "@core/stores/appStore.js"; +import { useDeviceStore } from "@core/stores/deviceStore.js"; import { NavSpacer } from "@app/Nav/NavSpacer.js"; import { PageNav } from "@app/Nav/PageNav.js"; -import { Mono } from "@components/generic/Mono.js"; import { Hashicon } from "@emeraldpay/hashicon-react"; import { PlusIcon } from "@heroicons/react/24/outline"; import { MoonIcon, SunIcon } from "@primer/octicons-react"; export const DeviceSelector = (): JSX.Element => { const { getDevices } = useDeviceStore(); - const { selectedDevice, setSelectedDevice, darkMode, setDarkMode } = useAppStore(); + const { selectedDevice, setSelectedDevice, darkMode, setDarkMode } = + useAppStore(); return (
@@ -55,12 +53,12 @@ export const DeviceSelector = (): JSX.Element => { -
setDarkMode(!darkMode)} className="bg-backgroundPrimary py-5 px-4 hover:brightness-hover active:brightness-press text-textSecondary hover:text-textPrimary">{ - darkMode ? ( - - ) : ( - - )}
+
setDarkMode(!darkMode)} + className="bg-backgroundPrimary py-5 px-4 text-textSecondary hover:text-textPrimary hover:brightness-hover active:brightness-press" + > + {darkMode ? : } +
{ const { channels, config, dialog, setDialogOpen } = useDevice(); diff --git a/src/components/Dialog/ImportDialog.tsx b/src/components/Dialog/ImportDialog.tsx index fc20c466..db3d6ceb 100644 --- a/src/components/Dialog/ImportDialog.tsx +++ b/src/components/Dialog/ImportDialog.tsx @@ -1,20 +1,14 @@ -import type React from "react"; import { useEffect, useState } from "react"; - -import { fromByteArray, toByteArray } from "base64-js"; -import { toast } from "react-hot-toast"; -import { QRCode } from "react-qrcode-logo"; - +import { toByteArray } from "base64-js"; import { Checkbox } from "@components/form/Checkbox.js"; import { Input } from "@components/form/Input.js"; import { Dialog } from "@components/generic/Dialog.js"; -import { ClipboardIcon } from "@heroicons/react/24/outline"; import { Protobuf } from "@meshtastic/meshtasticjs"; -import { Select } from "../form/Select.js"; -import { renderOptions } from "@app/core/utils/selectEnumOptions.js"; -import { Toggle } from "../form/Toggle.js"; -import { Button } from "../form/Button.js"; -import { useDevice } from "@app/core/providers/useDevice.js"; +import { Select } from "@components/form/Select.js"; +import { renderOptions } from "@core/utils/selectEnumOptions.js"; +import { Toggle } from "@components/form/Toggle.js"; +import { Button } from "@components/form/Button.js"; +import { useDevice } from "@core/providers/useDevice.js"; export interface ImportDialogProps { isOpen: boolean; diff --git a/src/components/Dialog/QRDialog.tsx b/src/components/Dialog/QRDialog.tsx index fb25180d..2648fb7f 100644 --- a/src/components/Dialog/QRDialog.tsx +++ b/src/components/Dialog/QRDialog.tsx @@ -1,10 +1,7 @@ -import type React from "react"; import { useEffect, useState } from "react"; - import { fromByteArray } from "base64-js"; import { toast } from "react-hot-toast"; import { QRCode } from "react-qrcode-logo"; - import { Checkbox } from "@components/form/Checkbox.js"; import { Input } from "@components/form/Input.js"; import { Dialog } from "@components/generic/Dialog.js"; diff --git a/src/components/Dialog/RebootDialog.tsx b/src/components/Dialog/RebootDialog.tsx index 385476b9..7ee89420 100644 --- a/src/components/Dialog/RebootDialog.tsx +++ b/src/components/Dialog/RebootDialog.tsx @@ -1,12 +1,9 @@ -import type React from "react"; import { useState } from "react"; - -import { useDevice } from "@app/core/providers/useDevice.js"; +import { useDevice } from "@core/providers/useDevice.js"; import { Dialog } from "@components/generic/Dialog.js"; import { ArrowPathIcon, ClockIcon } from "@heroicons/react/24/outline"; - -import { Button } from "../form/Button.js"; -import { Input } from "../form/Input.js"; +import { Button } from "@components/form/Button.js"; +import { Input } from "@components/form/Input.js"; export interface RebootDialogProps { isOpen: boolean; diff --git a/src/components/Dialog/ShutdownDialog.tsx b/src/components/Dialog/ShutdownDialog.tsx index 74a8bfdf..18b8e1e5 100644 --- a/src/components/Dialog/ShutdownDialog.tsx +++ b/src/components/Dialog/ShutdownDialog.tsx @@ -1,12 +1,9 @@ -import type React from "react"; import { useState } from "react"; - -import { useDevice } from "@app/core/providers/useDevice.js"; +import { useDevice } from "@core/providers/useDevice.js"; import { Dialog } from "@components/generic/Dialog.js"; import { ClockIcon, PowerIcon } from "@heroicons/react/24/outline"; - -import { Button } from "../form/Button.js"; -import { Input } from "../form/Input.js"; +import { Button } from "@components/form/Button.js"; +import { Input } from "@components/form/Input.js"; export interface ShutdownDialogProps { isOpen: boolean; diff --git a/src/components/Drawer/Metrics.tsx b/src/components/Drawer/Metrics.tsx index 405a13a0..6399de81 100644 --- a/src/components/Drawer/Metrics.tsx +++ b/src/components/Drawer/Metrics.tsx @@ -1,7 +1,4 @@ import "chartjs-adapter-date-fns"; - -import type React from "react"; - import { Chart as ChartJS, Filler, @@ -13,8 +10,7 @@ import { Tooltip } from "chart.js"; import { Line } from "react-chartjs-2"; - -import { useDevice } from "@app/core/providers/useDevice.js"; +import { useDevice } from "@core/providers/useDevice.js"; export const Metrics = (): JSX.Element => { const { nodes, hardware } = useDevice(); diff --git a/src/components/Drawer/Sensor.tsx b/src/components/Drawer/Sensor.tsx index 34ad5d6d..fbbfe16d 100644 --- a/src/components/Drawer/Sensor.tsx +++ b/src/components/Drawer/Sensor.tsx @@ -1,7 +1,5 @@ import "chartjs-adapter-date-fns"; -import type React from "react"; - import { Chart as ChartJS, Filler, @@ -14,7 +12,7 @@ import { } from "chart.js"; import { Line } from "react-chartjs-2"; -import { useDevice } from "@app/core/providers/useDevice.js"; +import { useDevice } from "@core/providers/useDevice.js"; export const Sensor = (): JSX.Element => { const { nodes, hardware } = useDevice(); diff --git a/src/components/Drawer/index.tsx b/src/components/Drawer/index.tsx index f3a2a9a2..b222b083 100644 --- a/src/components/Drawer/index.tsx +++ b/src/components/Drawer/index.tsx @@ -1,6 +1,4 @@ -import type React from "react"; import { useState } from "react"; - import { Metrics } from "@components/Drawer/Metrics.js"; import { Notifications } from "@components/Drawer/Notifications.js"; import { Sensor } from "@components/Drawer/Sensor.js"; diff --git a/src/components/NewDevice.tsx b/src/components/NewDevice.tsx index 28fd19f6..dd89eb5d 100644 --- a/src/components/NewDevice.tsx +++ b/src/components/NewDevice.tsx @@ -4,7 +4,7 @@ import { TabbedContent, TabType } from "@components/generic/TabbedContent.js"; import { BLE } from "@components/PageComponents/Connect/BLE.js"; import { HTTP } from "@components/PageComponents/Connect/HTTP.js"; import { Serial } from "@components/PageComponents/Connect/Serial.js"; -import { useAppStore } from "@app/core/stores/appStore.js"; +import { useAppStore } from "@core/stores/appStore.js"; import { MoonIcon, SunIcon } from "@heroicons/react/24/outline"; export const NewDevice = () => { @@ -37,9 +37,7 @@ export const NewDevice = () => { return (
- +
); }; diff --git a/src/components/PageComponents/AppConfig/Map.tsx b/src/components/PageComponents/AppConfig/Map.tsx index 94e62bea..516836f7 100644 --- a/src/components/PageComponents/AppConfig/Map.tsx +++ b/src/components/PageComponents/AppConfig/Map.tsx @@ -1,13 +1,10 @@ -import type React from "react"; - import { Controller, useFieldArray, useForm } from "react-hook-form"; - -import { Button } from "@app/components/form/Button.js"; -import { IconButton } from "@app/components/form/IconButton.js"; -import { InfoWrapper } from "@app/components/form/InfoWrapper.js"; -import { Input } from "@app/components/form/Input.js"; -import { Toggle } from "@app/components/form/Toggle.js"; -import { useAppStore } from "@app/core/stores/appStore.js"; +import { Button } from "@components/form/Button.js"; +import { IconButton } from "@components/form/IconButton.js"; +import { InfoWrapper } from "@components/form/InfoWrapper.js"; +import { Input } from "@components/form/Input.js"; +import { Toggle } from "@components/form/Toggle.js"; +import { useAppStore } from "@core/stores/appStore.js"; import { MapValidation } from "@app/validation/appConfig/map.js"; import { Form } from "@components/form/Form"; import { TrashIcon } from "@heroicons/react/24/outline"; diff --git a/src/components/PageComponents/Channel.tsx b/src/components/PageComponents/Channel.tsx index 499ae450..ddc99c70 100644 --- a/src/components/PageComponents/Channel.tsx +++ b/src/components/PageComponents/Channel.tsx @@ -1,10 +1,7 @@ -import type React from "react"; import { useEffect, useState } from "react"; - import { fromByteArray, toByteArray } from "base64-js"; import { Controller, useForm } from "react-hook-form"; import { toast } from "react-hot-toast"; - import { ChannelSettingsValidation } from "@app/validation/channelSettings.js"; import { Form } from "@components/form/Form"; import { Input } from "@components/form/Input.js"; diff --git a/src/components/PageComponents/Config/Bluetooth.tsx b/src/components/PageComponents/Config/Bluetooth.tsx index 8d4937ba..39431788 100644 --- a/src/components/PageComponents/Config/Bluetooth.tsx +++ b/src/components/PageComponents/Config/Bluetooth.tsx @@ -1,12 +1,8 @@ -import type React from "react"; import { useEffect } from "react"; - import { Controller, useForm, useWatch } from "react-hook-form"; -import { toast } from "react-hot-toast"; - -import { Input } from "@app/components/form/Input.js"; -import { Select } from "@app/components/form/Select.js"; -import { Toggle } from "@app/components/form/Toggle.js"; +import { Input } from "@components/form/Input.js"; +import { Select } from "@components/form/Select.js"; +import { Toggle } from "@components/form/Toggle.js"; import { BluetoothValidation } from "@app/validation/config/bluetooth.js"; import { Form } from "@components/form/Form"; import { useDevice } from "@core/providers/useDevice.js"; @@ -17,17 +13,12 @@ import { Protobuf } from "@meshtastic/meshtasticjs"; export const Bluetooth = (): JSX.Element => { const { config, setWorkingConfig } = useDevice(); - const { - register, - handleSubmit, - formState: { errors, isDirty }, - control, - reset - } = useForm({ - mode: "onChange", - defaultValues: config.bluetooth, - resolver: classValidatorResolver(BluetoothValidation) - }); + const { register, handleSubmit, control, reset } = + useForm({ + mode: "onChange", + defaultValues: config.bluetooth, + resolver: classValidatorResolver(BluetoothValidation) + }); useEffect(() => { reset(config.bluetooth); diff --git a/src/components/PageComponents/Config/Device.tsx b/src/components/PageComponents/Config/Device.tsx index 89b329cb..d59ae960 100644 --- a/src/components/PageComponents/Config/Device.tsx +++ b/src/components/PageComponents/Config/Device.tsx @@ -1,12 +1,8 @@ -import type React from "react"; import { useEffect } from "react"; - import { Controller, useForm } from "react-hook-form"; -import { toast } from "react-hot-toast"; - -import { Input } from "@app/components/form/Input.js"; -import { Select } from "@app/components/form/Select.js"; -import { Toggle } from "@app/components/form/Toggle.js"; +import { Input } from "@components/form/Input.js"; +import { Select } from "@components/form/Select.js"; +import { Toggle } from "@components/form/Toggle.js"; import { DeviceValidation } from "@app/validation/config/device.js"; import { Form } from "@components/form/Form"; import { useDevice } from "@core/providers/useDevice.js"; @@ -16,13 +12,7 @@ import { Protobuf } from "@meshtastic/meshtasticjs"; export const Device = (): JSX.Element => { const { config, setWorkingConfig } = useDevice(); - const { - register, - handleSubmit, - formState: { errors, isDirty }, - control, - reset - } = useForm({ + const { register, handleSubmit, control, reset } = useForm({ mode: "onChange", defaultValues: config.device, resolver: classValidatorResolver(DeviceValidation) @@ -80,14 +70,12 @@ export const Device = (): JSX.Element => { label="Button Pin" description="Button pin override" type="number" - error={errors.buttonGpio?.message} {...register("buttonGpio", { valueAsNumber: true })} /> diff --git a/src/components/PageComponents/Config/Display.tsx b/src/components/PageComponents/Config/Display.tsx index 92d5a671..f3681681 100644 --- a/src/components/PageComponents/Config/Display.tsx +++ b/src/components/PageComponents/Config/Display.tsx @@ -1,12 +1,8 @@ -import type React from "react"; import { useEffect } from "react"; - import { Controller, useForm } from "react-hook-form"; -import { toast } from "react-hot-toast"; - -import { Input } from "@app/components/form/Input.js"; -import { Select } from "@app/components/form/Select.js"; -import { Toggle } from "@app/components/form/Toggle.js"; +import { Input } from "@components/form/Input.js"; +import { Select } from "@components/form/Select.js"; +import { Toggle } from "@components/form/Toggle.js"; import { DisplayValidation } from "@app/validation/config/display.js"; import { Form } from "@components/form/Form"; import { useDevice } from "@core/providers/useDevice.js"; @@ -16,17 +12,13 @@ import { Protobuf } from "@meshtastic/meshtasticjs"; export const Display = (): JSX.Element => { const { config, setWorkingConfig } = useDevice(); - const { - register, - handleSubmit, - formState: { errors, isDirty }, - reset, - control - } = useForm({ - mode: "onChange", - defaultValues: config.display, - resolver: classValidatorResolver(DisplayValidation) - }); + const { register, handleSubmit, reset, control } = useForm( + { + mode: "onChange", + defaultValues: config.display, + resolver: classValidatorResolver(DisplayValidation) + } + ); useEffect(() => { reset(config.display); diff --git a/src/components/PageComponents/Config/LoRa.tsx b/src/components/PageComponents/Config/LoRa.tsx index 658ad989..f944ddf6 100644 --- a/src/components/PageComponents/Config/LoRa.tsx +++ b/src/components/PageComponents/Config/LoRa.tsx @@ -1,13 +1,9 @@ -import type React from "react"; import { useEffect } from "react"; - import { Controller, useForm, useWatch } from "react-hook-form"; -import { toast } from "react-hot-toast"; - -import { FormSection } from "@app/components/form/FormSection.js"; -import { Input } from "@app/components/form/Input.js"; -import { Select } from "@app/components/form/Select.js"; -import { Toggle } from "@app/components/form/Toggle.js"; +import { FormSection } from "@components/form/FormSection.js"; +import { Input } from "@components/form/Input.js"; +import { Select } from "@components/form/Select.js"; +import { Toggle } from "@components/form/Toggle.js"; import { LoRaValidation } from "@app/validation/config/lora.js"; import { Form } from "@components/form/Form"; import { useDevice } from "@core/providers/useDevice.js"; @@ -18,13 +14,7 @@ import { Protobuf } from "@meshtastic/meshtasticjs"; export const LoRa = (): JSX.Element => { const { config, setWorkingConfig } = useDevice(); - const { - register, - handleSubmit, - formState: { errors, isDirty }, - control, - reset - } = useForm({ + const { register, handleSubmit, control, reset } = useForm({ mode: "onChange", defaultValues: config.lora, resolver: classValidatorResolver(LoRaValidation) @@ -81,7 +71,6 @@ export const LoRa = (): JSX.Element => { description="Channel bandwidth in MHz" type="number" suffix="MHz" - error={errors.bandwidth?.message} {...register("bandwidth", { valueAsNumber: true })} @@ -91,7 +80,6 @@ export const LoRa = (): JSX.Element => { description="Indicates the number of chirps per symbol" type="number" suffix="CPS" - error={errors.spreadFactor?.message} {...register("spreadFactor", { valueAsNumber: true })} @@ -100,7 +88,6 @@ export const LoRa = (): JSX.Element => { label="Coding Rate" description="The denominator of the coding rate" type="number" - error={errors.codingRate?.message} {...register("codingRate", { valueAsNumber: true })} @@ -132,14 +119,12 @@ export const LoRa = (): JSX.Element => { label="Transmit Power" description="Max transmit power in dBm" type="number" - error={errors.txPower?.message} {...register("txPower", { valueAsNumber: true })} /> { description="Frequency offset to correct for crystal calibration errors" suffix="Hz" type="number" - error={errors.frequencyOffset?.message} {...register("frequencyOffset", { valueAsNumber: true })} /> { description="Maximum number of hops" suffix="Hops" type="number" - error={errors.hopLimit?.message} {...register("hopLimit", { valueAsNumber: true })} /> diff --git a/src/components/PageComponents/Config/Network.tsx b/src/components/PageComponents/Config/Network.tsx index 9a781d17..68d28f0c 100644 --- a/src/components/PageComponents/Config/Network.tsx +++ b/src/components/PageComponents/Config/Network.tsx @@ -1,15 +1,11 @@ -import type React from "react"; import { useEffect } from "react"; - import { Controller, useForm, useWatch } from "react-hook-form"; -import { toast } from "react-hot-toast"; - -import { FormSection } from "@app/components/form/FormSection.js"; -import { Input } from "@app/components/form/Input.js"; -import { IPInput } from "@app/components/form/IPInput.js"; -import { Select } from "@app/components/form/Select.js"; -import { Toggle } from "@app/components/form/Toggle.js"; -import { renderOptions } from "@app/core/utils/selectEnumOptions.js"; +import { FormSection } from "@components/form/FormSection.js"; +import { Input } from "@components/form/Input.js"; +import { IPInput } from "@components/form/IPInput.js"; +import { Select } from "@components/form/Select.js"; +import { Toggle } from "@components/form/Toggle.js"; +import { renderOptions } from "@core/utils/selectEnumOptions.js"; import { NetworkValidation } from "@app/validation/config/network.js"; import { Form } from "@components/form/Form"; import { useDevice } from "@core/providers/useDevice.js"; @@ -19,17 +15,13 @@ import { Protobuf } from "@meshtastic/meshtasticjs"; export const Network = (): JSX.Element => { const { config, setWorkingConfig } = useDevice(); - const { - register, - handleSubmit, - formState: { errors, isDirty }, - control, - reset - } = useForm({ - mode: "onChange", - defaultValues: config.network, - resolver: classValidatorResolver(NetworkValidation) - }); + const { register, handleSubmit, control, reset } = useForm( + { + mode: "onChange", + defaultValues: config.network, + resolver: classValidatorResolver(NetworkValidation) + } + ); const wifiEnabled = useWatch({ control, @@ -66,19 +58,6 @@ export const Network = (): JSX.Element => { return (
- - - - - - - - - - - - - { @@ -103,7 +81,6 @@ export const Network = (): JSX.Element => { label="PSK" type="password" description="Network password" - error={errors.wifiPsk?.message} disabled={!wifiEnabled} {...register("wifiPsk", { disabled: !wifiEnabled })} /> @@ -138,26 +115,21 @@ export const Network = (): JSX.Element => { @@ -166,13 +138,11 @@ export const Network = (): JSX.Element => { diff --git a/src/components/PageComponents/Config/Position.tsx b/src/components/PageComponents/Config/Position.tsx index 18c30fbe..e0be95fe 100644 --- a/src/components/PageComponents/Config/Position.tsx +++ b/src/components/PageComponents/Config/Position.tsx @@ -1,13 +1,9 @@ -import type React from "react"; import { useEffect } from "react"; - import { Controller, useForm, useWatch } from "react-hook-form"; -import { toast } from "react-hot-toast"; - -import { BitwiseSelect } from "@app/components/form/BitwiseSelect.js"; -import { FormSection } from "@app/components/form/FormSection.js"; -import { Input } from "@app/components/form/Input.js"; -import { Toggle } from "@app/components/form/Toggle.js"; +import { BitwiseSelect } from "@components/form/BitwiseSelect.js"; +import { FormSection } from "@components/form/FormSection.js"; +import { Input } from "@components/form/Input.js"; +import { Toggle } from "@components/form/Toggle.js"; import { PositionValidation } from "@app/validation/config/position.js"; import { Form } from "@components/form/Form"; import { useDevice } from "@core/providers/useDevice.js"; @@ -19,22 +15,17 @@ export const Position = (): JSX.Element => { const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum); - const { - register, - handleSubmit, - formState: { errors, isDirty }, - reset, - control - } = useForm({ - mode: "onChange", - defaultValues: { - fixedAlt: myNode?.data.position?.altitude, - fixedLat: (myNode?.data.position?.latitudeI ?? 0) / 1e7, - fixedLng: (myNode?.data.position?.longitudeI ?? 0) / 1e7, - ...config.position - }, - resolver: classValidatorResolver(PositionValidation) - }); + const { register, handleSubmit, reset, control } = + useForm({ + mode: "onChange", + defaultValues: { + fixedAlt: myNode?.data.position?.altitude, + fixedLat: (myNode?.data.position?.latitudeI ?? 0) / 1e7, + fixedLng: (myNode?.data.position?.longitudeI ?? 0) / 1e7, + ...config.position + }, + resolver: classValidatorResolver(PositionValidation) + }); const fixedPositionEnabled = useWatch({ control, @@ -153,7 +144,6 @@ export const Position = (): JSX.Element => { { suffix="m" label="Altitude" type="number" - error={errors.fixedAlt?.message} disabled={!fixedPositionEnabled} {...register("fixedAlt", { valueAsNumber: true })} /> @@ -188,7 +177,6 @@ export const Position = (): JSX.Element => { suffix="°" label="Latitude" type="number" - error={errors.fixedLat?.message} disabled={!fixedPositionEnabled} {...register("fixedLat", { valueAsNumber: true })} /> @@ -196,7 +184,6 @@ export const Position = (): JSX.Element => { suffix="°" label="Longitude" type="number" - error={errors.fixedLng?.message} disabled={!fixedPositionEnabled} {...register("fixedLng", { valueAsNumber: true })} /> @@ -209,7 +196,6 @@ export const Position = (): JSX.Element => { label="Broadcast Interval" description="How often your position is sent out over the mesh" type="number" - error={errors.positionBroadcastSecs?.message} {...register("positionBroadcastSecs", { valueAsNumber: true })} /> { label="GPS Update Interval" description="How often a GPS fix should be acquired" type="number" - error={errors.gpsUpdateInterval?.message} {...register("gpsUpdateInterval", { valueAsNumber: true })} /> { label="Fix Attempt Duration" description="How long the device will try to get a fix for" type="number" - error={errors.gpsAttemptTime?.message} {...register("gpsAttemptTime", { valueAsNumber: true })} /> @@ -233,14 +217,12 @@ export const Position = (): JSX.Element => { label="RX Pin" description="GPS Module RX pin override" type="number" - error={errors.rxGpio?.message} {...register("rxGpio", { valueAsNumber: true })} /> diff --git a/src/components/PageComponents/Config/Power.tsx b/src/components/PageComponents/Config/Power.tsx index 172fb5bb..f8be2773 100644 --- a/src/components/PageComponents/Config/Power.tsx +++ b/src/components/PageComponents/Config/Power.tsx @@ -1,12 +1,8 @@ -import type React from "react"; import { useEffect } from "react"; - import { Controller, useForm } from "react-hook-form"; -import { toast } from "react-hot-toast"; - -import { FormSection } from "@app/components/form/FormSection.js"; -import { Input } from "@app/components/form/Input.js"; -import { Toggle } from "@app/components/form/Toggle.js"; +import { FormSection } from "@components/form/FormSection.js"; +import { Input } from "@components/form/Input.js"; +import { Toggle } from "@components/form/Toggle.js"; import { PowerValidation } from "@app/validation/config/power.js"; import { Form } from "@components/form/Form"; import { useDevice } from "@core/providers/useDevice.js"; @@ -15,13 +11,7 @@ import { Protobuf } from "@meshtastic/meshtasticjs"; export const Power = (): JSX.Element => { const { config, setWorkingConfig } = useDevice(); - const { - register, - handleSubmit, - formState: { errors, isDirty }, - reset, - control - } = useForm({ + const { register, handleSubmit, reset, control } = useForm({ mode: "onChange", defaultValues: config.power, resolver: classValidatorResolver(PowerValidation) @@ -49,7 +39,6 @@ export const Power = (): JSX.Element => { description="Automatically shutdown node after this long when on battery, 0 for indefinite" suffix="Seconds" type="number" - error={errors.onBatteryShutdownAfterSecs?.message} {...register("onBatteryShutdownAfterSecs", { valueAsNumber: true })} /> { label="ADC Multiplier Override ratio" description="Used for tweaking battery voltage reading" type="number" - error={errors.adcMultiplierOverride?.message} {...register("adcMultiplierOverride", { valueAsNumber: true })} /> @@ -77,7 +65,6 @@ export const Power = (): JSX.Element => { description="Minimum amount of time the device will stay awake for after receiving a packet" suffix="Seconds" type="number" - error={errors.minWakeSecs?.message} {...register("minWakeSecs", { valueAsNumber: true })} /> { description="The device will enter super deep sleep after this time" suffix="Seconds" type="number" - error={errors.meshSdsTimeoutSecs?.message} {...register("meshSdsTimeoutSecs", { valueAsNumber: true })} /> { description="How long the device will be in super deep sleep for" suffix="Seconds" type="number" - error={errors.sdsSecs?.message} {...register("sdsSecs", { valueAsNumber: true })} /> { description="How long the device will be in light sleep for" suffix="Seconds" type="number" - error={errors.lsSecs?.message} {...register("lsSecs", { valueAsNumber: true })} /> @@ -110,7 +94,6 @@ export const Power = (): JSX.Element => { description="If the device does not receive a Bluetooth connection, the BLE radio will be disabled after this long" suffix="Seconds" type="number" - error={errors.waitBluetoothSecs?.message} {...register("waitBluetoothSecs", { valueAsNumber: true })} /> diff --git a/src/components/PageComponents/Config/User.tsx b/src/components/PageComponents/Config/User.tsx index e93e336c..df180c2b 100644 --- a/src/components/PageComponents/Config/User.tsx +++ b/src/components/PageComponents/Config/User.tsx @@ -1,18 +1,14 @@ -import type React from "react"; import { useEffect } from "react"; - import { Controller, useForm } from "react-hook-form"; import { toast } from "react-hot-toast"; import { base16 } from "rfc4648"; - -import { Input } from "@app/components/form/Input.js"; -import { Select } from "@app/components/form/Select.js"; -import { Toggle } from "@app/components/form/Toggle.js"; +import { Input } from "@components/form/Input.js"; +import { Select } from "@components/form/Select.js"; +import { Toggle } from "@components/form/Toggle.js"; import { UserValidation } from "@app/validation/config/user.js"; import { Form } from "@components/form/Form"; import { useDevice } from "@core/providers/useDevice.js"; import { renderOptions } from "@core/utils/selectEnumOptions.js"; -import { ErrorMessage } from "@hookform/error-message"; import { classValidatorResolver } from "@hookform/resolvers/class-validator"; import { Protobuf } from "@meshtastic/meshtasticjs"; @@ -21,13 +17,7 @@ export const User = (): JSX.Element => { const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum); - const { - register, - handleSubmit, - formState: { errors, isDirty }, - reset, - control - } = useForm({ + const { register, handleSubmit, reset, control } = useForm({ defaultValues: myNode?.data.user, resolver: classValidatorResolver(UserValidation) }); @@ -61,12 +51,7 @@ export const User = (): JSX.Element => { }); return ( -
- - - + { label="Device ID" disabled description="Preset unique identifier for this device." - error={errors.id?.message} value={myNode?.data.user?.id} /> diff --git a/src/components/PageComponents/ModuleConfig/RangeTest.tsx b/src/components/PageComponents/ModuleConfig/RangeTest.tsx index 46fb7903..ffebf84b 100644 --- a/src/components/PageComponents/ModuleConfig/RangeTest.tsx +++ b/src/components/PageComponents/ModuleConfig/RangeTest.tsx @@ -1,11 +1,7 @@ -import type React from "react"; import { useEffect } from "react"; - import { Controller, useForm, useWatch } from "react-hook-form"; -import { toast } from "react-hot-toast"; - -import { Input } from "@app/components/form/Input.js"; -import { Toggle } from "@app/components/form/Toggle.js"; +import { Input } from "@components/form/Input.js"; +import { Toggle } from "@components/form/Toggle.js"; import { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest.js"; import { Form } from "@components/form/Form"; import { useDevice } from "@core/providers/useDevice.js"; @@ -13,51 +9,27 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator"; import { Protobuf } from "@meshtastic/meshtasticjs"; export const RangeTest = (): JSX.Element => { - const { moduleConfig, connection, setModuleConfig } = useDevice(); - const { - register, - handleSubmit, - formState: { errors, isDirty }, - reset, - control - } = useForm({ - defaultValues: moduleConfig.rangeTest, - resolver: classValidatorResolver(RangeTestValidation) - }); + const { moduleConfig, setWorkingModuleConfig } = useDevice(); + const { register, handleSubmit, reset, control } = + useForm({ + mode: "onChange", + defaultValues: moduleConfig.rangeTest, + resolver: classValidatorResolver(RangeTestValidation) + }); useEffect(() => { reset(moduleConfig.rangeTest); }, [reset, moduleConfig.rangeTest]); const onSubmit = handleSubmit((data) => { - if (connection) { - void toast.promise( - connection - .setModuleConfig( - new Protobuf.ModuleConfig({ - payloadVariant: { - case: "rangeTest", - value: data - } - }) - ) - .then(() => - setModuleConfig( - new Protobuf.ModuleConfig({ - payloadVariant: { - case: "rangeTest", - value: data - } - }) - ) - ), - { - loading: "Saving...", - success: "Saved Range Test Config, Restarting Node", - error: "No response received" + setWorkingModuleConfig( + new Protobuf.ModuleConfig({ + payloadVariant: { + case: "rangeTest", + value: data } - ); - } + }) + ); }); const moduleEnabled = useWatch({ @@ -67,9 +39,7 @@ export const RangeTest = (): JSX.Element => { }); return ( - + { - const { moduleConfig, connection, setModuleConfig } = useDevice(); - const { - register, - handleSubmit, - formState: { errors, isDirty }, - reset, - control - } = useForm({ + const { moduleConfig, setWorkingModuleConfig } = useDevice(); + const { register, handleSubmit, reset, control } = useForm({ + mode: "onChange", defaultValues: moduleConfig.serial, resolver: classValidatorResolver(SerialValidation) }); @@ -32,34 +23,14 @@ export const Serial = (): JSX.Element => { }, [reset, moduleConfig.serial]); const onSubmit = handleSubmit((data) => { - if (connection) { - void toast.promise( - connection - .setModuleConfig( - new Protobuf.ModuleConfig({ - payloadVariant: { - case: "serial", - value: data - } - }) - ) - .then(() => - setModuleConfig( - new Protobuf.ModuleConfig({ - payloadVariant: { - case: "serial", - value: data - } - }) - ) - ), - { - loading: "Saving...", - success: "Saved Serial Config, Restarting Node", - error: "No response received" + setWorkingModuleConfig( + new Protobuf.ModuleConfig({ + payloadVariant: { + case: "serial", + value: data } - ); - } + }) + ); }); const moduleEnabled = useWatch({ diff --git a/src/components/PageComponents/ModuleConfig/StoreForward.tsx b/src/components/PageComponents/ModuleConfig/StoreForward.tsx index 66f9077f..079d7b9e 100644 --- a/src/components/PageComponents/ModuleConfig/StoreForward.tsx +++ b/src/components/PageComponents/ModuleConfig/StoreForward.tsx @@ -1,11 +1,7 @@ -import type React from "react"; import { useEffect } from "react"; - import { Controller, useForm, useWatch } from "react-hook-form"; -import { toast } from "react-hot-toast"; - -import { Input } from "@app/components/form/Input.js"; -import { Toggle } from "@app/components/form/Toggle.js"; +import { Input } from "@components/form/Input.js"; +import { Toggle } from "@components/form/Toggle.js"; import { StoreForwardValidation } from "@app/validation/moduleConfig/storeForward.js"; import { Form } from "@components/form/Form"; import { useDevice } from "@core/providers/useDevice.js"; @@ -13,51 +9,27 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator"; import { Protobuf } from "@meshtastic/meshtasticjs"; export const StoreForward = (): JSX.Element => { - const { moduleConfig, connection, setModuleConfig } = useDevice(); - const { - register, - handleSubmit, - formState: { errors, isDirty }, - reset, - control - } = useForm({ - defaultValues: moduleConfig.storeForward, - resolver: classValidatorResolver(StoreForwardValidation) - }); + const { moduleConfig, setWorkingModuleConfig } = useDevice(); + const { register, handleSubmit, reset, control } = + useForm({ + mode: "onChange", + defaultValues: moduleConfig.storeForward, + resolver: classValidatorResolver(StoreForwardValidation) + }); useEffect(() => { reset(moduleConfig.storeForward); }, [reset, moduleConfig.storeForward]); const onSubmit = handleSubmit((data) => { - if (connection) { - void toast.promise( - connection - .setModuleConfig( - new Protobuf.ModuleConfig({ - payloadVariant: { - case: "storeForward", - value: data - } - }) - ) - .then(() => - setModuleConfig( - new Protobuf.ModuleConfig({ - payloadVariant: { - case: "storeForward", - value: data - } - }) - ) - ), - { - loading: "Saving...", - success: "Saved Store & Forward Config, Restarting Node", - error: "No response received" + setWorkingModuleConfig( + new Protobuf.ModuleConfig({ + payloadVariant: { + case: "storeForward", + value: data } - ); - } + }) + ); }); const moduleEnabled = useWatch({ diff --git a/src/components/PageComponents/ModuleConfig/Telemetry.tsx b/src/components/PageComponents/ModuleConfig/Telemetry.tsx index fc3c4018..36077b9a 100644 --- a/src/components/PageComponents/ModuleConfig/Telemetry.tsx +++ b/src/components/PageComponents/ModuleConfig/Telemetry.tsx @@ -1,11 +1,7 @@ -import type React from "react"; import { useEffect } from "react"; - import { Controller, useForm } from "react-hook-form"; -import { toast } from "react-hot-toast"; - -import { Input } from "@app/components/form/Input.js"; -import { Toggle } from "@app/components/form/Toggle.js"; +import { Input } from "@components/form/Input.js"; +import { Toggle } from "@components/form/Toggle.js"; import { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.js"; import { Form } from "@components/form/Form"; import { useDevice } from "@core/providers/useDevice.js"; @@ -13,51 +9,27 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator"; import { Protobuf } from "@meshtastic/meshtasticjs"; export const Telemetry = (): JSX.Element => { - const { moduleConfig, connection, setModuleConfig } = useDevice(); - const { - register, - handleSubmit, - formState: { errors, isDirty }, - reset, - control - } = useForm({ - defaultValues: moduleConfig.telemetry, - resolver: classValidatorResolver(TelemetryValidation) - }); + const { moduleConfig, setWorkingModuleConfig } = useDevice(); + const { register, handleSubmit, reset, control } = + useForm({ + mode: "onChange", + defaultValues: moduleConfig.telemetry, + resolver: classValidatorResolver(TelemetryValidation) + }); useEffect(() => { reset(moduleConfig.telemetry); }, [reset, moduleConfig.telemetry]); const onSubmit = handleSubmit((data) => { - if (connection) { - void toast.promise( - connection - .setModuleConfig( - new Protobuf.ModuleConfig({ - payloadVariant: { - case: "telemetry", - value: data - } - }) - ) - .then(() => - setModuleConfig( - new Protobuf.ModuleConfig({ - payloadVariant: { - case: "telemetry", - value: data - } - }) - ) - ), - { - loading: "Saving...", - success: "Saved Telemetry Config, Restarting Node", - error: "No response received" + setWorkingModuleConfig( + new Protobuf.ModuleConfig({ + payloadVariant: { + case: "telemetry", + value: data } - ); - } + }) + ); }); return ( diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 7550568d..6199f407 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -1,7 +1,5 @@ -import type React from "react"; - -import { useDevice } from "@app/core/providers/useDevice.js"; -import { toMGRS } from "@app/core/utils/toMGRS.js"; +import { useDevice } from "@core/providers/useDevice.js"; +import { toMGRS } from "@core/utils/toMGRS.js"; import { BatteryWidget } from "@components/Widgets/BatteryWidget.js"; import { DeviceWidget } from "@components/Widgets/DeviceWidget.js"; import { PeersWidget } from "@components/Widgets/PeersWidget.js"; @@ -10,9 +8,7 @@ import { useAppStore } from "@core/stores/appStore.js"; import { useDeviceStore } from "@core/stores/deviceStore.js"; import { CommandLineIcon } from "@heroicons/react/24/outline"; import { Types } from "@meshtastic/meshtasticjs"; - -import { Input } from "./form/Input.js"; -import { Button } from "./form/Button.js"; +import { Input } from "@components/form/Input.js"; export const Sidebar = (): JSX.Element => { const { removeDevice } = useDeviceStore(); diff --git a/src/components/Widgets/BatteryWidget.tsx b/src/components/Widgets/BatteryWidget.tsx index 80fb575f..a967b29f 100644 --- a/src/components/Widgets/BatteryWidget.tsx +++ b/src/components/Widgets/BatteryWidget.tsx @@ -1,9 +1,6 @@ -import type React from "react"; import { useEffect, useState } from "react"; - import prettyMilliseconds from "pretty-ms"; - -import { useDevice } from "@app/core/providers/useDevice.js"; +import { useDevice } from "@core/providers/useDevice.js"; import { Battery100Icon, ClockIcon } from "@heroicons/react/24/outline"; export interface BatteryWidgetProps { diff --git a/src/components/Widgets/DeviceWidget.tsx b/src/components/Widgets/DeviceWidget.tsx index a5f343c6..10950f57 100644 --- a/src/components/Widgets/DeviceWidget.tsx +++ b/src/components/Widgets/DeviceWidget.tsx @@ -1,5 +1,3 @@ -import type React from "react"; - import { Button } from "@components/form/Button.js"; import { Hashicon } from "@emeraldpay/hashicon-react"; import { XCircleIcon } from "@heroicons/react/24/outline"; @@ -21,7 +19,7 @@ export const DeviceWidget = ({ }: DeviceWidgetProps): JSX.Element => { return (
-
+
diff --git a/src/components/Widgets/PeersWidget.tsx b/src/components/Widgets/PeersWidget.tsx index eec89d92..6d507317 100644 --- a/src/components/Widgets/PeersWidget.tsx +++ b/src/components/Widgets/PeersWidget.tsx @@ -1,6 +1,4 @@ -import type React from "react"; - -import { useDevice } from "@app/core/providers/useDevice.js"; +import { useDevice } from "@core/providers/useDevice.js"; import { IconButton } from "@components/form/IconButton.js"; import { Mono } from "@components/generic/Mono.js"; import { diff --git a/src/components/Widgets/PositionWidget.tsx b/src/components/Widgets/PositionWidget.tsx index 9b466c2b..961d426a 100644 --- a/src/components/Widgets/PositionWidget.tsx +++ b/src/components/Widgets/PositionWidget.tsx @@ -1,5 +1,3 @@ -import type React from "react"; - import { MapPinIcon } from "@heroicons/react/24/outline"; export interface PositionWidgetProps { diff --git a/src/components/form/BitwiseSelect.tsx b/src/components/form/BitwiseSelect.tsx index 532abfe6..4265ac1e 100644 --- a/src/components/form/BitwiseSelect.tsx +++ b/src/components/form/BitwiseSelect.tsx @@ -1,10 +1,6 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; -import { - bitwiseDecode, - bitwiseEncode, - enumLike -} from "@app/core/utils/bitwise.js"; +import { bitwiseDecode, bitwiseEncode, enumLike } from "@core/utils/bitwise.js"; import { InfoWrapper } from "@components/form/InfoWrapper.js"; import { Listbox } from "@headlessui/react"; import { Protobuf } from "@meshtastic/meshtasticjs"; @@ -41,7 +37,7 @@ export const BitwiseSelect = ({ }; }); - React.useEffect(() => { + useEffect(() => { setDecodedSelected( bitwiseDecode(selected, Protobuf.Config_PositionConfig_PositionFlags).map( (flag) => diff --git a/src/components/form/Button.tsx b/src/components/form/Button.tsx index 33ee6f62..f674be69 100644 --- a/src/components/form/Button.tsx +++ b/src/components/form/Button.tsx @@ -1,4 +1,3 @@ -import type React from "react"; import type { ButtonHTMLAttributes } from "react"; export interface ButtonProps extends ButtonHTMLAttributes { diff --git a/src/components/form/Checkbox.tsx b/src/components/form/Checkbox.tsx index 0567738d..21eccbdc 100644 --- a/src/components/form/Checkbox.tsx +++ b/src/components/form/Checkbox.tsx @@ -1,4 +1,3 @@ -import type React from "react"; import { forwardRef, InputHTMLAttributes } from "react"; export interface CheckboxProps extends InputHTMLAttributes { diff --git a/src/components/form/Form.tsx b/src/components/form/Form.tsx index f0bf059a..d5ce214a 100644 --- a/src/components/form/Form.tsx +++ b/src/components/form/Form.tsx @@ -1,8 +1,7 @@ -import type React from "react"; -import type { HTMLProps } from "react"; +import type { FormEvent, HTMLProps } from "react"; export interface FormProps extends HTMLProps { - onSubmit?: (event: React.FormEvent) => Promise; + onSubmit?: (event: FormEvent) => Promise; } export const Form = ({ diff --git a/src/components/form/FormSection.tsx b/src/components/form/FormSection.tsx index 039fac0c..7b558dca 100644 --- a/src/components/form/FormSection.tsx +++ b/src/components/form/FormSection.tsx @@ -1,8 +1,8 @@ -import type React from "react"; +import type { ReactNode } from "react"; export interface FormSectionProps { title: string; - children: React.ReactNode; + children: ReactNode; } export const FormSection = ({ diff --git a/src/components/form/IPInput.tsx b/src/components/form/IPInput.tsx index ba832b81..4c57cd6c 100755 --- a/src/components/form/IPInput.tsx +++ b/src/components/form/IPInput.tsx @@ -1,10 +1,7 @@ -import type React from "react"; -import { forwardRef, InputHTMLAttributes, useEffect } from "react"; - -import { InfoWrapper, InfoWrapperProps } from "@components/form/InfoWrapper.js"; -import { ExclamationCircleIcon } from "@heroicons/react/24/outline"; +import { forwardRef, useEffect } from "react"; +import { InfoWrapper } from "@components/form/InfoWrapper.js"; import { useState } from "react"; -import type { InputProps } from "./Input.js"; +import type { InputProps } from "@components/form/Input.js"; export const IPInput = forwardRef(function Input( { diff --git a/src/components/form/IconButton.tsx b/src/components/form/IconButton.tsx index 37c5b329..d765d9af 100644 --- a/src/components/form/IconButton.tsx +++ b/src/components/form/IconButton.tsx @@ -1,4 +1,3 @@ -import type React from "react"; import type { ButtonHTMLAttributes } from "react"; export interface IconButtonProps diff --git a/src/components/form/InfoWrapper.tsx b/src/components/form/InfoWrapper.tsx index f177c215..d9d0bcc1 100644 --- a/src/components/form/InfoWrapper.tsx +++ b/src/components/form/InfoWrapper.tsx @@ -1,12 +1,11 @@ -import type React from "react"; - import { ExclamationCircleIcon } from "@heroicons/react/24/outline"; +import type { ReactNode } from "react"; export interface InfoWrapperProps { label?: string; description?: string; error?: string; - children: React.ReactNode; + children: ReactNode; } export const InfoWrapper = ({ diff --git a/src/components/form/Input.tsx b/src/components/form/Input.tsx index f7789db6..2cbdd8e2 100644 --- a/src/components/form/Input.tsx +++ b/src/components/form/Input.tsx @@ -1,6 +1,4 @@ -import type React from "react"; import { forwardRef, InputHTMLAttributes } from "react"; - import { InfoWrapper, InfoWrapperProps } from "@components/form/InfoWrapper.js"; import { ExclamationCircleIcon } from "@heroicons/react/24/outline"; diff --git a/src/components/form/Select.tsx b/src/components/form/Select.tsx index ef71a29f..1594f5c6 100644 --- a/src/components/form/Select.tsx +++ b/src/components/form/Select.tsx @@ -1,4 +1,3 @@ -import type React from "react"; import { forwardRef, SelectHTMLAttributes } from "react"; import { InfoWrapper, InfoWrapperProps } from "@components/form/InfoWrapper.js"; diff --git a/src/components/form/Toggle.tsx b/src/components/form/Toggle.tsx index 6f82acfa..d28047bc 100644 --- a/src/components/form/Toggle.tsx +++ b/src/components/form/Toggle.tsx @@ -1,5 +1,3 @@ -import type React from "react"; - import { Switch } from "@headlessui/react"; export interface ToggleProps { diff --git a/src/components/generic/Dialog.tsx b/src/components/generic/Dialog.tsx index e09cb81f..69f8dd98 100644 --- a/src/components/generic/Dialog.tsx +++ b/src/components/generic/Dialog.tsx @@ -1,17 +1,16 @@ -import type React from "react"; - import { IconButton } from "@components/form/IconButton.js"; import { Dialog as DialogUI } from "@headlessui/react"; import { XMarkIcon } from "@heroicons/react/24/outline"; -import { ThemeController } from "./ThemeController.js"; -import { Blur } from "./Blur.js"; +import { ThemeController } from "@components/generic/ThemeController.js"; +import { Blur } from "@components/generic/Blur.js"; +import type { ReactNode } from "react"; export interface DialogProps { title: string; description: string; isOpen: boolean; close: () => void; - children: React.ReactNode; + children: ReactNode; } export const Dialog = ({ diff --git a/src/components/generic/Mono.tsx b/src/components/generic/Mono.tsx index a5e83baf..3c9581f8 100644 --- a/src/components/generic/Mono.tsx +++ b/src/components/generic/Mono.tsx @@ -1,5 +1,3 @@ -import type React from "react"; - export const Mono = ({ children, className, diff --git a/src/components/generic/TabbedContent.tsx b/src/components/generic/TabbedContent.tsx index 9f39e49d..bd439f93 100644 --- a/src/components/generic/TabbedContent.tsx +++ b/src/components/generic/TabbedContent.tsx @@ -1,6 +1,4 @@ -import type React from "react"; import { Fragment } from "react"; - import { Mono } from "@components/generic/Mono"; import { Tab } from "@headlessui/react"; diff --git a/src/components/generic/ThemeController.tsx b/src/components/generic/ThemeController.tsx index d1c39ea9..92ba5b34 100644 --- a/src/components/generic/ThemeController.tsx +++ b/src/components/generic/ThemeController.tsx @@ -1,8 +1,8 @@ -import { useAppStore } from "@app/core/stores/appStore.js"; -import type React from "react"; +import { useAppStore } from "@core/stores/appStore.js"; +import type { ReactNode } from "react"; export interface ThemeControllerProps { - children: React.ReactNode; + children: ReactNode; } export const ThemeController = ({ diff --git a/src/core/utils/selectEnumOptions.tsx b/src/core/utils/selectEnumOptions.tsx index 3a8a118c..926fc115 100644 --- a/src/core/utils/selectEnumOptions.tsx +++ b/src/core/utils/selectEnumOptions.tsx @@ -1,5 +1,3 @@ -import type React from "react"; - export const renderOptions = (enumValue: { [s: string]: string | number; }): JSX.Element[] => { diff --git a/src/index.tsx b/src/index.tsx index 9500e1fe..e6866c91 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,9 +1,6 @@ import "@app/index.css"; import "maplibre-gl/dist/maplibre-gl.css"; - -import type React from "react"; import { StrictMode } from "react"; - import { enableMapSet } from "immer"; import { createRoot } from "react-dom/client"; diff --git a/src/pages/Channels.tsx b/src/pages/Channels.tsx index ad502389..74c0408b 100644 --- a/src/pages/Channels.tsx +++ b/src/pages/Channels.tsx @@ -1,8 +1,5 @@ -import type React from "react"; - -import { TabbedContent, TabType } from "@app/components/generic/TabbedContent"; -import { Channel } from "@app/components/PageComponents/Channel.js"; -import { Button } from "@components/form/Button.js"; +import { TabbedContent, TabType } from "@components/generic/TabbedContent"; +import { Channel } from "@components/PageComponents/Channel.js"; import { useDevice } from "@core/providers/useDevice.js"; import { ArrowDownOnSquareStackIcon, diff --git a/src/pages/Config/AppConfig.tsx b/src/pages/Config/AppConfig.tsx index fcd007aa..6e6e3c5b 100644 --- a/src/pages/Config/AppConfig.tsx +++ b/src/pages/Config/AppConfig.tsx @@ -1,6 +1,4 @@ -import type React from "react"; import { Fragment } from "react"; - import { Map } from "@components/PageComponents/AppConfig/Map.js"; import { Tab } from "@headlessui/react"; diff --git a/src/pages/Config/DeviceConfig.tsx b/src/pages/Config/DeviceConfig.tsx index d141bd6d..3dcadfc0 100644 --- a/src/pages/Config/DeviceConfig.tsx +++ b/src/pages/Config/DeviceConfig.tsx @@ -1,7 +1,5 @@ -import type React from "react"; import { Fragment } from "react"; - -import { Network } from "@app/components/PageComponents/Config/Network.js"; +import { Network } from "@components/PageComponents/Config/Network.js"; import { Bluetooth } from "@components/PageComponents/Config/Bluetooth.js"; import { Device } from "@components/PageComponents/Config/Device.js"; import { Display } from "@components/PageComponents/Config/Display.js"; @@ -12,7 +10,7 @@ import { User } from "@components/PageComponents/Config/User.js"; import { useDevice } from "@core/providers/useDevice.js"; import { Tab } from "@headlessui/react"; import { ChevronRightIcon, HomeIcon } from "@heroicons/react/24/outline"; -import { Button } from "@app/components/form/Button.js"; +import { Button } from "@components/form/Button.js"; import { CheckIcon } from "@primer/octicons-react"; export const DeviceConfig = (): JSX.Element => { diff --git a/src/pages/Config/ModuleConfig.tsx b/src/pages/Config/ModuleConfig.tsx index 6efb9966..c9a1cfb0 100644 --- a/src/pages/Config/ModuleConfig.tsx +++ b/src/pages/Config/ModuleConfig.tsx @@ -1,7 +1,5 @@ -import type React from "react"; import { Fragment } from "react"; - -import { Audio } from "@app/components/PageComponents/ModuleConfig/Audio.js"; +import { Audio } from "@components/PageComponents/ModuleConfig/Audio.js"; import { CannedMessage } from "@components/PageComponents/ModuleConfig/CannedMessage"; import { ExternalNotification } from "@components/PageComponents/ModuleConfig/ExternalNotification.js"; import { MQTT } from "@components/PageComponents/ModuleConfig/MQTT.js"; diff --git a/src/pages/Config/index.tsx b/src/pages/Config/index.tsx index 1935005a..7d6ffa6b 100644 --- a/src/pages/Config/index.tsx +++ b/src/pages/Config/index.tsx @@ -1,8 +1,5 @@ -import type React from "react"; - -import { Button } from "@app/components/form/Button.js"; -import { TabbedContent, TabType } from "@app/components/generic/TabbedContent"; -import { useDevice } from "@app/core/providers/useDevice.js"; +import { TabbedContent, TabType } from "@components/generic/TabbedContent"; +import { useDevice } from "@core/providers/useDevice.js"; import { Cog8ToothIcon, CubeTransparentIcon, diff --git a/src/pages/Extensions/Environment.tsx b/src/pages/Extensions/Environment.tsx index 39b4338b..0a73dac5 100644 --- a/src/pages/Extensions/Environment.tsx +++ b/src/pages/Extensions/Environment.tsx @@ -1,5 +1,3 @@ -import type React from "react"; - import { useDevice } from "@core/providers/useDevice.js"; export const Environment = (): JSX.Element => { diff --git a/src/pages/Extensions/FileBrowser.tsx b/src/pages/Extensions/FileBrowser.tsx index 52924707..70d6c27f 100644 --- a/src/pages/Extensions/FileBrowser.tsx +++ b/src/pages/Extensions/FileBrowser.tsx @@ -1,4 +1,3 @@ -import type React from "react"; import { useEffect, useState } from "react"; export interface File { diff --git a/src/pages/Extensions/Index.tsx b/src/pages/Extensions/Index.tsx index e9a78bc9..a56dbce4 100644 --- a/src/pages/Extensions/Index.tsx +++ b/src/pages/Extensions/Index.tsx @@ -1,6 +1,4 @@ -import type React from "react"; - -import { TabbedContent, TabType } from "@app/components/generic/TabbedContent"; +import { TabbedContent, TabType } from "@components/generic/TabbedContent"; import { useDevice } from "@core/providers/useDevice.js"; import { CloudIcon, diff --git a/src/pages/Map.tsx b/src/pages/Map.tsx index e813e098..21219162 100644 --- a/src/pages/Map.tsx +++ b/src/pages/Map.tsx @@ -1,10 +1,7 @@ -import type React from "react"; - import maplibregl from "maplibre-gl"; import { Layer, Map, Marker, Source } from "react-map-gl"; - -import { MapControlls } from "@app/components/PageComponents/Map/MapControlls.js"; -import { useAppStore } from "@app/core/stores/appStore.js"; +import { MapControlls } from "@components/PageComponents/Map/MapControlls.js"; +import { useAppStore } from "@core/stores/appStore.js"; import { useDevice } from "@core/providers/useDevice.js"; import { Hashicon } from "@emeraldpay/hashicon-react"; import { MapPinIcon } from "@heroicons/react/24/outline"; diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx index fa4f3f63..69517a0d 100644 --- a/src/pages/Messages.tsx +++ b/src/pages/Messages.tsx @@ -1,10 +1,4 @@ -import type React from "react"; - -import { IconButton } from "@app/components/form/IconButton.js"; -import { - TabbedContent, - TabType -} from "@app/components/generic/TabbedContent.js"; +import { TabbedContent, TabType } from "@components/generic/TabbedContent.js"; import { ChannelChat } from "@components/PageComponents/Messages/ChannelChat.js"; import { useDevice } from "@core/providers/useDevice.js"; import { PencilIcon } from "@heroicons/react/24/outline"; diff --git a/src/pages/Peers.tsx b/src/pages/Peers.tsx index e3b932c2..5ce953d3 100644 --- a/src/pages/Peers.tsx +++ b/src/pages/Peers.tsx @@ -1,7 +1,4 @@ -import type React from "react"; - import { base16 } from "rfc4648"; - import { Mono } from "@components/generic/Mono.js"; import { Table } from "@components/generic/Table"; import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.js"; diff --git a/src/validation/appConfig/map.ts b/src/validation/appConfig/map.ts index f591494b..68eac3ed 100644 --- a/src/validation/appConfig/map.ts +++ b/src/validation/appConfig/map.ts @@ -1,6 +1,6 @@ import { IsArray, IsBoolean, IsNumber, IsString } from "class-validator"; -import type { RasterSource } from "@app/core/stores/appStore.js"; +import type { RasterSource } from "@core/stores/appStore.js"; export class MapValidation { @IsArray()