From 292bd5909945c8565180356d70c51d123921563b Mon Sep 17 00:00:00 2001 From: Sacha Weatherstone Date: Mon, 13 Feb 2023 15:46:45 +1000 Subject: [PATCH] fix import paths, remove old form elements --- package.json | 2 + pnpm-lock.yaml | 108 ++++++++++-------- src/App.tsx | 4 +- src/components/Dashboard.tsx | 6 +- src/components/DeviceSelector.tsx | 4 +- src/components/Dialog/DeviceNameDialog.tsx | 6 +- src/components/Dialog/ImportDialog.tsx | 27 ++--- .../{NewDevice.tsx => NewDeviceDialog.tsx} | 12 +- src/components/Dialog/QRDialog.tsx | 50 ++++---- src/components/Dialog/RebootDialog.tsx | 16 ++- src/components/Dialog/ShutdownDialog.tsx | 29 +++-- src/components/DynamicForm.tsx | 22 +++- src/components/PageComponents/Channel.tsx | 69 ++++++----- .../PageComponents/Config/Bluetooth.tsx | 2 +- .../PageComponents/Config/Device.tsx | 2 +- .../PageComponents/Config/Display.tsx | 5 +- src/components/PageComponents/Config/LoRa.tsx | 2 +- .../PageComponents/Config/Network.tsx | 2 +- .../PageComponents/Config/Position.tsx | 2 +- .../PageComponents/Config/Power.tsx | 2 +- .../PageComponents/Connect/HTTP.tsx | 26 +++-- .../Messages/NewLocationMessage.tsx | 46 -------- .../PageComponents/ModuleConfig/Audio.tsx | 2 +- .../ModuleConfig/CannedMessage.tsx | 2 +- .../ModuleConfig/ExternalNotification.tsx | 2 +- .../PageComponents/ModuleConfig/MQTT.tsx | 2 +- .../PageComponents/ModuleConfig/RangeTest.tsx | 2 +- .../PageComponents/ModuleConfig/Serial.tsx | 2 +- .../ModuleConfig/StoreForward.tsx | 2 +- .../PageComponents/ModuleConfig/Telemetry.tsx | 2 +- src/components/Sidebar.tsx | 7 +- src/components/UI/Checkbox.tsx | 28 +++++ src/components/UI/Input.tsx | 47 ++++++-- src/components/form/BitwiseSelect.tsx | 77 ------------- src/components/form/Checkbox.tsx | 36 ------ src/components/form/FormSection.tsx | 22 ---- src/components/form/IPInput.tsx | 72 ------------ src/components/form/InfoWrapper.tsx | 38 ------ src/components/form/Input.tsx | 72 ------------ src/components/form/Toggle.tsx | 28 ----- src/pages/Channels.tsx | 10 +- src/pages/Config/index.tsx | 8 +- src/pages/Map.tsx | 10 +- src/pages/Messages.tsx | 8 +- src/pages/Peers.tsx | 2 +- 45 files changed, 323 insertions(+), 602 deletions(-) rename src/components/Dialog/{NewDevice.tsx => NewDeviceDialog.tsx} (92%) delete mode 100644 src/components/PageComponents/Messages/NewLocationMessage.tsx create mode 100644 src/components/UI/Checkbox.tsx delete mode 100644 src/components/form/BitwiseSelect.tsx delete mode 100644 src/components/form/Checkbox.tsx delete mode 100644 src/components/form/FormSection.tsx delete mode 100755 src/components/form/IPInput.tsx delete mode 100644 src/components/form/InfoWrapper.tsx delete mode 100644 src/components/form/Input.tsx delete mode 100644 src/components/form/Toggle.tsx diff --git a/package.json b/package.json index 1691c225..0da61189 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,8 @@ "@hookform/error-message": "^2.0.1", "@hookform/resolvers": "^2.9.11", "@meshtastic/meshtasticjs": "2.0.20-1", + "@radix-ui/react-accordion": "^1.1.0", + "@radix-ui/react-checkbox": "^1.0.1", "@radix-ui/react-dialog": "^1.0.2", "@radix-ui/react-label": "^2.0.0", "@radix-ui/react-menubar": "^1.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 942c5d42..dcb16dcb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,8 @@ specifiers: '@hookform/error-message': ^2.0.1 '@hookform/resolvers': ^2.9.11 '@meshtastic/meshtasticjs': 2.0.20-1 + '@radix-ui/react-accordion': ^1.1.0 + '@radix-ui/react-checkbox': ^1.0.1 '@radix-ui/react-dialog': ^1.0.2 '@radix-ui/react-label': ^2.0.0 '@radix-ui/react-menubar': ^1.0.0 @@ -73,7 +75,9 @@ dependencies: '@emeraldpay/hashicon-react': 0.5.2 '@hookform/error-message': 2.0.1_zf7ga3u4zrffjlingb6kh5ipva '@hookform/resolvers': 2.9.11_react-hook-form@7.43.1 - '@meshtastic/meshtasticjs': 2.0.20-1 + '@meshtastic/meshtasticjs': link:../js + '@radix-ui/react-accordion': 1.1.0_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-checkbox': 1.0.1_biqbaboplfbrettd7655fr4n2y '@radix-ui/react-dialog': 1.0.2_zula6vjvt3wdocc4mwcxqa6nzi '@radix-ui/react-label': 2.0.0_biqbaboplfbrettd7655fr4n2y '@radix-ui/react-menubar': 1.0.0_zula6vjvt3wdocc4mwcxqa6nzi @@ -1326,18 +1330,6 @@ packages: to-fast-properties: 2.0.0 dev: true - /@buf/meshtastic_protobufs.bufbuild_es/1.0.0-20230211031647-2cce48659fb1.1_@bufbuild+protobuf@1.0.0: - resolution: {registry: https://buf.build/gen/npm/v1, tarball: https://buf.build/gen/npm/v1/@buf/meshtastic_protobufs.bufbuild_es/1.0.0-20230211031647-2cce48659fb1.1/tarball} - peerDependencies: - '@bufbuild/protobuf': ^1.0.0 - dependencies: - '@bufbuild/protobuf': 1.0.0 - dev: false - - /@bufbuild/protobuf/1.0.0: - resolution: {integrity: sha512-oH3jHBrZ6to8Qf4zLg7O8KqSY42kQZNBRXJRMp5uSi0mqE4L8NbyMnZHeOsbXmTb0xpptRyH11LfS+KeVhXzAA==} - dev: false - /@emeraldpay/hashicon-react/0.5.2: resolution: {integrity: sha512-XCoYKpq8QQOniiSZf5ouzdvXbKfG6q4ICHRqCO/GNofiF0Ra+LR/7+tomHlXVcLPBS9sDAoZQQw/Sr24KRAbJg==} engines: {node: '>=8'} @@ -1725,18 +1717,6 @@ packages: engines: {node: '>=6.0.0'} dev: false - /@meshtastic/meshtasticjs/2.0.20-1: - resolution: {integrity: sha512-ShYcQ0/T4reWHcfgMIGhqjBQIIz4GrTZOJ9p+O9ChXxND+sWdmFe4U3e5sCMnEZW33xbI6bgQhq7De2sjqAzcQ==} - dependencies: - '@buf/meshtastic_protobufs.bufbuild_es': 1.0.0-20230211031647-2cce48659fb1.1_@bufbuild+protobuf@1.0.0 - '@bufbuild/protobuf': 1.0.0 - crc: 4.3.2 - sub-events: 1.9.0 - tslog: 4.7.2 - transitivePeerDependencies: - - buffer - dev: false - /@nodelib/fs.scandir/2.1.5: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -1779,6 +1759,26 @@ packages: '@babel/runtime': 7.20.13 dev: false + /@radix-ui/react-accordion/1.1.0_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-CNN9ZBgCK4i4SX7gFk5s8095j55DUWi85vwRNfkfBLs0QdAG5Tb4ku6sBeugCAiLvsmxw481GyNl+C3stoJVBQ==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.20.13 + '@radix-ui/primitive': 1.0.0 + '@radix-ui/react-collapsible': 1.0.1_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-collection': 1.0.1_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0 + '@radix-ui/react-context': 1.0.0_react@18.2.0 + '@radix-ui/react-direction': 1.0.0_react@18.2.0 + '@radix-ui/react-id': 1.0.0_react@18.2.0 + '@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-arrow/1.0.1_biqbaboplfbrettd7655fr4n2y: resolution: {integrity: sha512-1yientwXqXcErDHEv8av9ZVNEBldH8L9scVR3is20lL+jOCfcJyMFZFEY5cgIrgexsq1qggSXqiEL/d/4f+QXA==} peerDependencies: @@ -1791,6 +1791,44 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: false + /@radix-ui/react-checkbox/1.0.1_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-TisH0B8hWmYP3ONRduYCyN04rR9yLPIw/Rwyn1RoC1suSoGCa8Wn+YPdSSSarSszeIbcg3p2lBkDp2XXit4sZw==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.20.13 + '@radix-ui/primitive': 1.0.0 + '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0 + '@radix-ui/react-context': 1.0.0_react@18.2.0 + '@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0 + '@radix-ui/react-use-previous': 1.0.0_react@18.2.0 + '@radix-ui/react-use-size': 1.0.0_react@18.2.0 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + + /@radix-ui/react-collapsible/1.0.1_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-0maX4q91iYa4gjt3PsNf7dq/yqSR+HGAE8I5p54dQ6gnveS+ETWlMoijxrhmgV1k8svxpm34mQAtqIrJt4XZmA==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.20.13 + '@radix-ui/primitive': 1.0.0 + '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0 + '@radix-ui/react-context': 1.0.0_react@18.2.0 + '@radix-ui/react-id': 1.0.0_react@18.2.0 + '@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0 + '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-collection/1.0.1_biqbaboplfbrettd7655fr4n2y: resolution: {integrity: sha512-uuiFbs+YCKjn3X1DTSx9G7BHApu4GHbi3kgiwsnFUbOKCrwejAJv4eE4Vc8C0Oaxt9T0aV4ox0WCOdx+39Xo+g==} peerDependencies: @@ -4273,16 +4311,6 @@ packages: resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==} dev: true - /crc/4.3.2: - resolution: {integrity: sha512-uGDHf4KLLh2zsHa8D8hIQ1H/HtFQhyHrc0uhHBcoKGol/Xnb+MPYfUMw7cvON6ze/GUESTudKayDcJC5HnJv1A==} - engines: {node: '>=12'} - peerDependencies: - buffer: '>=6.0.3' - peerDependenciesMeta: - buffer: - optional: true - dev: false - /cross-spawn/7.0.3: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'} @@ -6753,11 +6781,6 @@ packages: engines: {node: '>=8'} dev: true - /sub-events/1.9.0: - resolution: {integrity: sha512-dnFBayilG9Ku0k/lNs1Y7WV4kv91+ovCoeBV3uIYrY49DylvBb6z9d9ED2ctcrvX2YlReFalpCgJNtSgmrOaJg==} - engines: {node: '>=10.0.0'} - dev: false - /supercluster/7.1.5: resolution: {integrity: sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==} dependencies: @@ -6974,11 +6997,6 @@ packages: /tslib/2.5.0: resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==} - /tslog/4.7.2: - resolution: {integrity: sha512-NZCunFmbQK25tt+Egv28MLcmbo8M1HgUy6X2hdVbgrAlcR7zRGvPmM8SnpoljXZ48zHRRYWp9vYIHFHKWsR4HA==} - engines: {node: '>=16'} - dev: false - /tsutils/3.21.0_typescript@4.9.5: resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==} engines: {node: '>= 6'} diff --git a/src/App.tsx b/src/App.tsx index 2f91c9c3..c268ac8f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,10 +5,10 @@ import { PageRouter } from "@app/PageRouter.js"; import { CommandPalette } from "@components/CommandPalette.js"; import { DeviceSelector } from "@components/DeviceSelector.js"; import { DialogManager } from "@components/Dialog/DialogManager.js"; -import { Dashboard } from "@app/components/Dashboard.js"; +import { Dashboard } from "@components/Dashboard.js"; import { useDeviceStore } from "@core/stores/deviceStore.js"; import { ThemeController } from "@components/generic/ThemeController.js"; -import { NewDeviceDialog } from "./components/Dialog/NewDevice.js"; +import { NewDeviceDialog } from "@components/Dialog/NewDeviceDialog.js"; export const App = (): JSX.Element => { const { getDevice } = useDeviceStore(); diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx index c6afe68c..53ee5a44 100644 --- a/src/components/Dashboard.tsx +++ b/src/components/Dashboard.tsx @@ -10,11 +10,11 @@ import { UsbIcon, NetworkIcon } from "lucide-react"; -import { Subtle } from "./UI/Typography/Subtle.js"; -import { H3 } from "./UI/Typography/H3.js"; +import { Subtle } from "@components/UI/Typography/Subtle.js"; +import { H3 } from "@components/UI/Typography/H3.js"; import { useDeviceStore } from "@app/core/stores/deviceStore.js"; import { useMemo } from "react"; -import { Separator } from "./UI/Seperator.js"; +import { Separator } from "@components/UI/Seperator.js"; export const Dashboard = () => { const { setConnectDialogOpen } = useAppStore(); diff --git a/src/components/DeviceSelector.tsx b/src/components/DeviceSelector.tsx index 2d2baec9..d93274a0 100644 --- a/src/components/DeviceSelector.tsx +++ b/src/components/DeviceSelector.tsx @@ -10,8 +10,8 @@ import { GithubIcon, TerminalIcon } from "lucide-react"; -import { Separator } from "./UI/Seperator.js"; -import { Code } from "./UI/Typography/Code.js"; +import { Separator } from "@components/UI/Seperator.js"; +import { Code } from "@components/UI/Typography/Code.js"; import { DeviceSelectorButton } from "./DeviceSelectorButton.js"; export const DeviceSelector = (): JSX.Element => { diff --git a/src/components/Dialog/DeviceNameDialog.tsx b/src/components/Dialog/DeviceNameDialog.tsx index c13efc74..b0f55b27 100644 --- a/src/components/Dialog/DeviceNameDialog.tsx +++ b/src/components/Dialog/DeviceNameDialog.tsx @@ -11,7 +11,7 @@ import { Button } from "@components/UI/Button.js"; import { useDevice } from "@app/core/stores/deviceStore.js"; import { useForm } from "react-hook-form"; import { Protobuf } from "@meshtastic/meshtasticjs"; -import { Label } from "../UI/Label.js"; +import { Label } from "@components/UI/Label.js"; export interface User { longName: string; @@ -27,7 +27,7 @@ export const DeviceNameDialog = ({ open, onOpenChange }: DeviceNameDialogProps): JSX.Element => { - const { hardware, nodes, connection, setDialogOpen } = useDevice(); + const { hardware, nodes, connection } = useDevice(); const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum); @@ -45,7 +45,7 @@ export const DeviceNameDialog = ({ ...data }) ); - setDialogOpen("deviceName", false); + onOpenChange(false); }); return ( diff --git a/src/components/Dialog/ImportDialog.tsx b/src/components/Dialog/ImportDialog.tsx index 72490985..b0df5e9a 100644 --- a/src/components/Dialog/ImportDialog.tsx +++ b/src/components/Dialog/ImportDialog.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from "react"; import { toByteArray } from "base64-js"; -import { Checkbox } from "@components/form/Checkbox.js"; -import { Input } from "@components/form/Input.js"; +import { Checkbox } from "@components/UI/Checkbox.js"; +import { Input } from "@components/UI/Input.js"; import { Dialog, DialogContent, @@ -11,9 +11,10 @@ import { DialogTitle } from "@components/UI/Dialog.js"; import { Protobuf } from "@meshtastic/meshtasticjs"; -import { Toggle } from "@components/form/Toggle.js"; +import { Switch } from "@components/UI/Switch.js"; import { Button } from "@components/UI/Button.js"; import { useDevice } from "@core/stores/deviceStore.js"; +import { Label } from "@components/UI/Label.js"; export interface ImportDialogProps { open: boolean; @@ -82,8 +83,8 @@ export const ImportDialog = ({
+ { @@ -94,8 +95,8 @@ export const ImportDialog = ({
- Use Preset? + @@ -121,14 +122,14 @@ export const ImportDialog = ({
{channelSet?.settings.map((channel, index) => ( - + + + ))}
diff --git a/src/components/Dialog/NewDevice.tsx b/src/components/Dialog/NewDeviceDialog.tsx similarity index 92% rename from src/components/Dialog/NewDevice.tsx rename to src/components/Dialog/NewDeviceDialog.tsx index 3b302601..3ba12905 100644 --- a/src/components/Dialog/NewDevice.tsx +++ b/src/components/Dialog/NewDeviceDialog.tsx @@ -1,4 +1,3 @@ -import { Input } from "@components/form/Input.js"; import { Dialog, DialogContent, @@ -6,9 +5,14 @@ import { DialogHeader, DialogTitle } from "@components/UI/Dialog.js"; -import { Tabs, TabsContent, TabsList, TabsTrigger } from "../UI/Tabs.js"; -import { Subtle } from "../UI/Typography/Subtle.js"; -import { Link } from "../UI/Typography/Link.js"; +import { + Tabs, + TabsContent, + TabsList, + TabsTrigger +} from "@components/UI/Tabs.js"; +import { Subtle } from "@components/UI/Typography/Subtle.js"; +import { Link } from "@components/UI/Typography/Link.js"; import { HTTP } from "../PageComponents/Connect/HTTP.js"; import { BLE } from "../PageComponents/Connect/BLE.js"; import { Serial } from "../PageComponents/Connect/Serial.js"; diff --git a/src/components/Dialog/QRDialog.tsx b/src/components/Dialog/QRDialog.tsx index 88c8fc09..97cc6890 100644 --- a/src/components/Dialog/QRDialog.tsx +++ b/src/components/Dialog/QRDialog.tsx @@ -1,8 +1,8 @@ import { useEffect, useState } from "react"; import { fromByteArray } from "base64-js"; import { QRCode } from "react-qrcode-logo"; -import { Checkbox } from "@components/form/Checkbox.js"; -import { Input } from "@components/form/Input.js"; +import { Checkbox } from "@components/UI/Checkbox.js"; +import { Input } from "@components/UI/Input.js"; import { Dialog, DialogContent, @@ -13,6 +13,7 @@ import { } from "@components/UI/Dialog.js"; import { ClipboardIcon } from "lucide-react"; import { Protobuf } from "@meshtastic/meshtasticjs"; +import { Label } from "@components/UI/Label.js"; export interface QRDialogProps { open: boolean; @@ -62,39 +63,44 @@ export const QRDialog = ({
{channels.map((channel) => ( - + + { + if (selectedChannels.includes(channel.index)) { + setSelectedChannels( + selectedChannels.filter((c) => c !== channel.index) + ); + } else { + setSelectedChannels([ + ...selectedChannels, + channel.index + ]); + } + }} + /> + ))}
+ , - action() { + icon: ClipboardIcon, + onClick() { void navigator.clipboard.writeText(QRCodeURL); } }} diff --git a/src/components/Dialog/RebootDialog.tsx b/src/components/Dialog/RebootDialog.tsx index e425da20..bcc3dbca 100644 --- a/src/components/Dialog/RebootDialog.tsx +++ b/src/components/Dialog/RebootDialog.tsx @@ -10,7 +10,7 @@ import { } from "@components/UI/Dialog.js"; import { ClockIcon, RefreshCwIcon } from "lucide-react"; import { Button } from "@components/UI/Button.js"; -import { Input } from "@components/form/Input.js"; +import { Input } from "@components/UI/Input.js"; export interface RebootDialogProps { open: boolean; @@ -21,7 +21,7 @@ export const RebootDialog = ({ open, onOpenChange }: RebootDialogProps): JSX.Element => { - const { connection, setDialogOpen } = useDevice(); + const { connection } = useDevice(); const [time, setTime] = useState(5); @@ -40,21 +40,19 @@ export const RebootDialog = ({ value={time} onChange={(e) => setTime(parseInt(e.target.value))} action={{ - icon: , - action() { - connection - ?.reboot(time * 60) - .then(() => setDialogOpen("reboot", false)); + icon: ClockIcon, + onClick() { + connection?.reboot(time * 60).then(() => onOpenChange(false)); } }} />
diff --git a/src/components/Dialog/ShutdownDialog.tsx b/src/components/Dialog/ShutdownDialog.tsx index 2e635d10..5b77ebb9 100644 --- a/src/components/Dialog/ShutdownDialog.tsx +++ b/src/components/Dialog/ShutdownDialog.tsx @@ -9,7 +9,7 @@ import { } from "@components/UI/Dialog.js"; import { ClockIcon, PowerIcon } from "lucide-react"; import { Button } from "@components/UI/Button.js"; -import { Input } from "@components/form/Input.js"; +import { Input } from "@components/UI/Input.js"; export interface ShutdownDialogProps { open: boolean; @@ -20,7 +20,7 @@ export const ShutdownDialog = ({ open, onOpenChange }: ShutdownDialogProps): JSX.Element => { - const { connection, setDialogOpen } = useDevice(); + const { connection } = useDevice(); const [time, setTime] = useState(5); @@ -39,25 +39,24 @@ export const ShutdownDialog = ({ type="number" value={time} onChange={(e) => setTime(parseInt(e.target.value))} - action={{ - icon: , - action() { - connection - ?.shutdown(time * 60) - .then(() => setDialogOpen("shutdown", false)); - } - }} + suffix="Minutes" /> +
diff --git a/src/components/DynamicForm.tsx b/src/components/DynamicForm.tsx index 3cc27f33..16b4d2c9 100644 --- a/src/components/DynamicForm.tsx +++ b/src/components/DynamicForm.tsx @@ -6,8 +6,8 @@ import { SubmitHandler, useForm } from "react-hook-form"; -import { Input } from "./UI/Input.js"; -import { Label } from "./UI/Label.js"; +import { Input } from "@components/UI/Input.js"; +import { Label } from "@components/UI/Label.js"; import { ErrorMessage } from "@hookform/error-message"; import { Select, @@ -15,10 +15,10 @@ import { SelectItem, SelectTrigger, SelectValue -} from "./UI/Select.js"; -import { Switch } from "./UI/Switch.js"; -import { H4 } from "./UI/Typography/H4.js"; -import { Subtle } from "./UI/Typography/Subtle.js"; +} from "@components/UI/Select.js"; +import { Switch } from "@components/UI/Switch.js"; +import { H4 } from "@components/UI/Typography/H4.js"; +import { Subtle } from "@components/UI/Typography/Subtle.js"; interface DisabledBy { fieldName: Path; @@ -114,6 +114,8 @@ export function DynamicForm({ return ( @@ -129,8 +131,10 @@ export function DynamicForm({ onChange(parseInt(e.target.value))} disabled={fieldWrapperData.disabled} + {...rest} /> )} /> @@ -141,7 +145,13 @@ export function DynamicForm({ { + // } + // }} {...register(field.name)} /> diff --git a/src/components/PageComponents/Channel.tsx b/src/components/PageComponents/Channel.tsx index 06f1b5d0..089134a9 100644 --- a/src/components/PageComponents/Channel.tsx +++ b/src/components/PageComponents/Channel.tsx @@ -2,12 +2,13 @@ import { useEffect, useState } from "react"; import { fromByteArray, toByteArray } from "base64-js"; import { Controller, useForm } from "react-hook-form"; import { ChannelSettingsValidation } from "@app/validation/channelSettings.js"; -import { Input } from "@components/form/Input.js"; -import { Toggle } from "@components/form/Toggle.js"; +import { Input } from "@components/UI/Input.js"; +import { Switch } from "@components/UI/Switch.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { RefreshCwIcon, EyeIcon, EyeOffIcon } from "lucide-react"; import { classValidatorResolver } from "@hookform/resolvers/class-validator"; import { Protobuf } from "@meshtastic/meshtasticjs"; +import { Label } from "@radix-ui/react-label"; export interface SettingsPanelProps { channel: Protobuf.Channel; @@ -94,18 +95,21 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => { name="enabled" control={control} render={({ field: { value, ...rest } }) => ( - + <> + + + )} /> + @@ -131,42 +135,49 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => { */} + : , - action: () => { + icon: pskHidden ? EyeIcon : EyeOffIcon, + onClick: () => { setPskHidden(!pskHidden); } }} - error={errors.psk?.message} + // error={errors.psk?.message} {...register("psk")} /> ( - + <> + + + )} /> ( - + <> + + + )} /> diff --git a/src/components/PageComponents/Config/Bluetooth.tsx b/src/components/PageComponents/Config/Bluetooth.tsx index 736b2b43..4fd8a9c6 100644 --- a/src/components/PageComponents/Config/Bluetooth.tsx +++ b/src/components/PageComponents/Config/Bluetooth.tsx @@ -1,7 +1,7 @@ import type { BluetoothValidation } from "@app/validation/config/bluetooth.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { Protobuf } from "@meshtastic/meshtasticjs"; -import { DynamicForm } from "@app/components/DynamicForm.js"; +import { DynamicForm } from "@components/DynamicForm.js"; export const Bluetooth = (): JSX.Element => { const { config, setWorkingConfig } = useDevice(); diff --git a/src/components/PageComponents/Config/Device.tsx b/src/components/PageComponents/Config/Device.tsx index 8f43ce9b..7bb15c97 100644 --- a/src/components/PageComponents/Config/Device.tsx +++ b/src/components/PageComponents/Config/Device.tsx @@ -1,7 +1,7 @@ import type { DeviceValidation } from "@app/validation/config/device.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { Protobuf } from "@meshtastic/meshtasticjs"; -import { DynamicForm } from "@app/components/DynamicForm.js"; +import { DynamicForm } from "@components/DynamicForm.js"; export const Device = (): JSX.Element => { const { config, setWorkingConfig } = useDevice(); diff --git a/src/components/PageComponents/Config/Display.tsx b/src/components/PageComponents/Config/Display.tsx index dd3fd423..cba020a1 100644 --- a/src/components/PageComponents/Config/Display.tsx +++ b/src/components/PageComponents/Config/Display.tsx @@ -1,7 +1,7 @@ import type { DisplayValidation } from "@app/validation/config/display.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { Protobuf } from "@meshtastic/meshtasticjs"; -import { DynamicForm } from "@app/components/DynamicForm.js"; +import { DynamicForm } from "@components/DynamicForm.js"; export const Display = (): JSX.Element => { const { config, setWorkingConfig } = useDevice(); @@ -30,7 +30,8 @@ export const Display = (): JSX.Element => { type: "number", name: "screenOnSecs", label: "Screen Timeout", - description: "Turn off the display after this long" + description: "Turn off the display after this long", + suffix: "seconds" }, { type: "select", diff --git a/src/components/PageComponents/Config/LoRa.tsx b/src/components/PageComponents/Config/LoRa.tsx index c8662f51..d203c7f6 100644 --- a/src/components/PageComponents/Config/LoRa.tsx +++ b/src/components/PageComponents/Config/LoRa.tsx @@ -1,7 +1,7 @@ import type { LoRaValidation } from "@app/validation/config/lora.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { Protobuf } from "@meshtastic/meshtasticjs"; -import { DynamicForm } from "@app/components/DynamicForm.js"; +import { DynamicForm } from "@components/DynamicForm.js"; export const LoRa = (): JSX.Element => { const { config, setWorkingConfig } = useDevice(); diff --git a/src/components/PageComponents/Config/Network.tsx b/src/components/PageComponents/Config/Network.tsx index eab8f887..576c7933 100644 --- a/src/components/PageComponents/Config/Network.tsx +++ b/src/components/PageComponents/Config/Network.tsx @@ -1,7 +1,7 @@ import type { NetworkValidation } from "@app/validation/config/network.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { Protobuf } from "@meshtastic/meshtasticjs"; -import { DynamicForm } from "@app/components/DynamicForm.js"; +import { DynamicForm } from "@components/DynamicForm.js"; export const Network = (): JSX.Element => { const { config, setWorkingConfig } = useDevice(); diff --git a/src/components/PageComponents/Config/Position.tsx b/src/components/PageComponents/Config/Position.tsx index bee58109..c7859bfd 100644 --- a/src/components/PageComponents/Config/Position.tsx +++ b/src/components/PageComponents/Config/Position.tsx @@ -1,7 +1,7 @@ import type { PositionValidation } from "@app/validation/config/position.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { Protobuf } from "@meshtastic/meshtasticjs"; -import { DynamicForm } from "@app/components/DynamicForm.js"; +import { DynamicForm } from "@components/DynamicForm.js"; export const Position = (): JSX.Element => { const { config, nodes, hardware, setWorkingConfig } = useDevice(); diff --git a/src/components/PageComponents/Config/Power.tsx b/src/components/PageComponents/Config/Power.tsx index a645d0ac..7431ea92 100644 --- a/src/components/PageComponents/Config/Power.tsx +++ b/src/components/PageComponents/Config/Power.tsx @@ -1,7 +1,7 @@ import type { PowerValidation } from "@app/validation/config/power.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { Protobuf } from "@meshtastic/meshtasticjs"; -import { DynamicForm } from "@app/components/DynamicForm.js"; +import { DynamicForm } from "@components/DynamicForm.js"; export const Power = (): JSX.Element => { const { config, setWorkingConfig } = useDevice(); diff --git a/src/components/PageComponents/Connect/HTTP.tsx b/src/components/PageComponents/Connect/HTTP.tsx index f5e4e2d1..8f435d81 100644 --- a/src/components/PageComponents/Connect/HTTP.tsx +++ b/src/components/PageComponents/Connect/HTTP.tsx @@ -1,12 +1,14 @@ import { Controller, useForm, useWatch } from "react-hook-form"; -import { Input } from "@components/form/Input.js"; -import { Toggle } from "@components/form/Toggle.js"; +import { Input } from "@components/UI/Input.js"; +import { Switch } from "@components/UI/Switch.js"; import { Button } from "@components/UI/Button.js"; import { useAppStore } from "@core/stores/appStore.js"; import { useDeviceStore } from "@core/stores/deviceStore.js"; import { subscribeAll } from "@core/subscriptions.js"; import { randId } from "@core/utils/randId.js"; import { IHTTPConnection } from "@meshtastic/meshtasticjs"; +import { Label } from "@components/UI/Label.js"; +import { SelectLabel } from "@components/UI/Select.js"; export const HTTP = (): JSX.Element => { const { addDevice } = useDeviceStore(); @@ -50,8 +52,9 @@ export const HTTP = (): JSX.Element => { // eslint-disable-next-line @typescript-eslint/no-misused-promises
+ { name="tls" control={control} render={({ field: { value, ...rest } }) => ( - + <> + + + )} />
diff --git a/src/components/PageComponents/Messages/NewLocationMessage.tsx b/src/components/PageComponents/Messages/NewLocationMessage.tsx deleted file mode 100644 index 2d5e2ceb..00000000 --- a/src/components/PageComponents/Messages/NewLocationMessage.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { Input } from "@components/form/Input.js"; -import { Button } from "@components/UI/Button.js"; -import { useDevice } from "@core/stores/deviceStore.js"; -import { Protobuf } from "@meshtastic/meshtasticjs"; - -enum LocationType { - MGRS, - LatLng, - DecimalDegrees -} - -export const NewLocationMessage = (): JSX.Element => { - const { connection } = useDevice(); - - return ( -
- { - e.preventDefault(); - }} - > - - - {/* */} - - - -
- ); -}; diff --git a/src/components/PageComponents/ModuleConfig/Audio.tsx b/src/components/PageComponents/ModuleConfig/Audio.tsx index f2a0a79b..0e42bdfb 100644 --- a/src/components/PageComponents/ModuleConfig/Audio.tsx +++ b/src/components/PageComponents/ModuleConfig/Audio.tsx @@ -1,7 +1,7 @@ import type { AudioValidation } from "@app/validation/moduleConfig/audio.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { Protobuf } from "@meshtastic/meshtasticjs"; -import { DynamicForm } from "@app/components/DynamicForm.js"; +import { DynamicForm } from "@components/DynamicForm.js"; export const Audio = (): JSX.Element => { const { moduleConfig, setWorkingModuleConfig } = useDevice(); diff --git a/src/components/PageComponents/ModuleConfig/CannedMessage.tsx b/src/components/PageComponents/ModuleConfig/CannedMessage.tsx index 6c329021..93237ebf 100644 --- a/src/components/PageComponents/ModuleConfig/CannedMessage.tsx +++ b/src/components/PageComponents/ModuleConfig/CannedMessage.tsx @@ -1,7 +1,7 @@ import type { CannedMessageValidation } from "@app/validation/moduleConfig/cannedMessage.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { Protobuf } from "@meshtastic/meshtasticjs"; -import { DynamicForm } from "@app/components/DynamicForm.js"; +import { DynamicForm } from "@components/DynamicForm.js"; export const CannedMessage = (): JSX.Element => { const { moduleConfig, setWorkingModuleConfig } = useDevice(); diff --git a/src/components/PageComponents/ModuleConfig/ExternalNotification.tsx b/src/components/PageComponents/ModuleConfig/ExternalNotification.tsx index 5ac155ce..6517c5b1 100644 --- a/src/components/PageComponents/ModuleConfig/ExternalNotification.tsx +++ b/src/components/PageComponents/ModuleConfig/ExternalNotification.tsx @@ -1,7 +1,7 @@ import type { ExternalNotificationValidation } from "@app/validation/moduleConfig/externalNotification.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { Protobuf } from "@meshtastic/meshtasticjs"; -import { DynamicForm } from "@app/components/DynamicForm.js"; +import { DynamicForm } from "@components/DynamicForm.js"; export const ExternalNotification = (): JSX.Element => { const { moduleConfig, setWorkingModuleConfig } = useDevice(); diff --git a/src/components/PageComponents/ModuleConfig/MQTT.tsx b/src/components/PageComponents/ModuleConfig/MQTT.tsx index b7a8ea28..a9323a3c 100644 --- a/src/components/PageComponents/ModuleConfig/MQTT.tsx +++ b/src/components/PageComponents/ModuleConfig/MQTT.tsx @@ -1,6 +1,6 @@ import type { MQTTValidation } from "@app/validation/moduleConfig/mqtt.js"; import { Protobuf } from "@meshtastic/meshtasticjs"; -import { DynamicForm } from "@app/components/DynamicForm.js"; +import { DynamicForm } from "@components/DynamicForm.js"; import { useDevice } from "@app/core/stores/deviceStore.js"; export const MQTT = (): JSX.Element => { diff --git a/src/components/PageComponents/ModuleConfig/RangeTest.tsx b/src/components/PageComponents/ModuleConfig/RangeTest.tsx index 3a89e93d..92cad6f9 100644 --- a/src/components/PageComponents/ModuleConfig/RangeTest.tsx +++ b/src/components/PageComponents/ModuleConfig/RangeTest.tsx @@ -1,7 +1,7 @@ import type { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { Protobuf } from "@meshtastic/meshtasticjs"; -import { DynamicForm } from "@app/components/DynamicForm.js"; +import { DynamicForm } from "@components/DynamicForm.js"; export const RangeTest = (): JSX.Element => { const { moduleConfig, setWorkingModuleConfig } = useDevice(); diff --git a/src/components/PageComponents/ModuleConfig/Serial.tsx b/src/components/PageComponents/ModuleConfig/Serial.tsx index 0e456929..8ea0c774 100644 --- a/src/components/PageComponents/ModuleConfig/Serial.tsx +++ b/src/components/PageComponents/ModuleConfig/Serial.tsx @@ -1,7 +1,7 @@ import type { SerialValidation } from "@app/validation/moduleConfig/serial.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { Protobuf } from "@meshtastic/meshtasticjs"; -import { DynamicForm } from "@app/components/DynamicForm.js"; +import { DynamicForm } from "@components/DynamicForm.js"; export const Serial = (): JSX.Element => { const { moduleConfig, setWorkingModuleConfig } = useDevice(); diff --git a/src/components/PageComponents/ModuleConfig/StoreForward.tsx b/src/components/PageComponents/ModuleConfig/StoreForward.tsx index 0bbe24f0..a4670f28 100644 --- a/src/components/PageComponents/ModuleConfig/StoreForward.tsx +++ b/src/components/PageComponents/ModuleConfig/StoreForward.tsx @@ -1,7 +1,7 @@ import type { StoreForwardValidation } from "@app/validation/moduleConfig/storeForward.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { Protobuf } from "@meshtastic/meshtasticjs"; -import { DynamicForm } from "@app/components/DynamicForm.js"; +import { DynamicForm } from "@components/DynamicForm.js"; export const StoreForward = (): JSX.Element => { const { moduleConfig, setWorkingModuleConfig } = useDevice(); diff --git a/src/components/PageComponents/ModuleConfig/Telemetry.tsx b/src/components/PageComponents/ModuleConfig/Telemetry.tsx index 49ac76f0..67fbfc4f 100644 --- a/src/components/PageComponents/ModuleConfig/Telemetry.tsx +++ b/src/components/PageComponents/ModuleConfig/Telemetry.tsx @@ -1,7 +1,7 @@ import type { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { Protobuf } from "@meshtastic/meshtasticjs"; -import { DynamicForm } from "@app/components/DynamicForm.js"; +import { DynamicForm } from "@components/DynamicForm.js"; export const Telemetry = (): JSX.Element => { const { moduleConfig, setWorkingModuleConfig } = useDevice(); diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 78a1f2e6..2574476d 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -10,10 +10,9 @@ import { EditIcon, LayoutGrid } from "lucide-react"; -import { Subtle } from "./UI/Typography/Subtle.js"; -import { Button } from "./UI/Button.js"; -import { SidebarSection } from "./UI/Sidebar/SidebarSection.js"; -import { SidebarButton } from "./UI/Sidebar/sidebarButton.js"; +import { Subtle } from "@components/UI/Typography/Subtle.js"; +import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js"; +import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js"; export interface SidebarProps { children?: React.ReactNode; diff --git a/src/components/UI/Checkbox.tsx b/src/components/UI/Checkbox.tsx new file mode 100644 index 00000000..4b64294c --- /dev/null +++ b/src/components/UI/Checkbox.tsx @@ -0,0 +1,28 @@ +import * as React from "react"; +import * as CheckboxPrimitive from "@radix-ui/react-checkbox"; +import { Check } from "lucide-react"; + +import { cn } from "@core/utils/cn.js"; + +const Checkbox = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + +)); +Checkbox.displayName = CheckboxPrimitive.Root.displayName; + +export { Checkbox }; diff --git a/src/components/UI/Input.tsx b/src/components/UI/Input.tsx index cd28433b..c97be80d 100644 --- a/src/components/UI/Input.tsx +++ b/src/components/UI/Input.tsx @@ -1,21 +1,50 @@ import * as React from "react"; import { cn } from "@core/utils/cn.js"; +import type { LucideIcon } from "lucide-react"; export interface InputProps - extends React.InputHTMLAttributes {} + extends React.InputHTMLAttributes { + prefix?: string; + suffix?: string; + action?: { + icon: LucideIcon; + onClick: () => void; + }; +} const Input = React.forwardRef( - ({ className, ...props }, ref) => { + ({ className, prefix, suffix, action, ...props }, ref) => { return ( - + {prefix && ( + + {prefix} + )} - ref={ref} - {...props} - /> + + {suffix && ( +
+ {suffix} +
+ )} + {action && ( + + )} + ); } ); diff --git a/src/components/form/BitwiseSelect.tsx b/src/components/form/BitwiseSelect.tsx deleted file mode 100644 index 89fbe052..00000000 --- a/src/components/form/BitwiseSelect.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import React, { useEffect, useState } from "react"; - -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"; - -export interface BitwiseSelectProps { - label?: string; - description?: string; - error?: string; - selected: number; - decodeEnun: enumLike; - onChange: (value: number) => void; -} - -export const BitwiseSelect = ({ - label, - description, - error, - selected, - decodeEnun, - onChange -}: BitwiseSelectProps): JSX.Element => { - const [decodedSelected, setDecodedSelected] = useState([]); - - const options = Object.entries(decodeEnun) - .filter((value) => typeof value[1] !== "number") - .map((value) => { - return { - value: parseInt(value[0]), - label: value[1] - .toString() - .replace("POS_", "") - .toLowerCase() - .toLocaleUpperCase() //TODO: Investigate - }; - }); - - useEffect(() => { - setDecodedSelected( - bitwiseDecode(selected, Protobuf.Config_PositionConfig_PositionFlags).map( - (flag) => - Protobuf.Config_PositionConfig_PositionFlags[flag] - .replace("POS_", "") - .toLowerCase() - ) - ); - }, [selected]); - - return ( - - {/* { - onChange(bitwiseEncode(value)); - }} - multiple - > - - {decodedSelected.map((option) => ( - {option} - ))} - - - {options.map((option) => ( - - {option.label} - - ))} - - */} - - ); -}; diff --git a/src/components/form/Checkbox.tsx b/src/components/form/Checkbox.tsx deleted file mode 100644 index 21eccbdc..00000000 --- a/src/components/form/Checkbox.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { forwardRef, InputHTMLAttributes } from "react"; - -export interface CheckboxProps extends InputHTMLAttributes { - label: string; -} - -export const Checkbox = forwardRef( - function Input({ label, disabled, ...rest }: CheckboxProps, ref) { - return ( -
-
- -
-
- -
-
- ); - } -); diff --git a/src/components/form/FormSection.tsx b/src/components/form/FormSection.tsx deleted file mode 100644 index 7b558dca..00000000 --- a/src/components/form/FormSection.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { ReactNode } from "react"; - -export interface FormSectionProps { - title: string; - children: ReactNode; -} - -export const FormSection = ({ - title, - children -}: FormSectionProps): JSX.Element => { - return ( -
-

- {title} -

-
- {children} -
-
- ); -}; diff --git a/src/components/form/IPInput.tsx b/src/components/form/IPInput.tsx deleted file mode 100755 index 4c57cd6c..00000000 --- a/src/components/form/IPInput.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { forwardRef, useEffect } from "react"; -import { InfoWrapper } from "@components/form/InfoWrapper.js"; -import { useState } from "react"; -import type { InputProps } from "@components/form/Input.js"; - -export const IPInput = forwardRef(function Input( - { - label, - description, - prefix, - suffix, - action, - error, - disabled, - value, - ...rest - }: InputProps, - ref -) { - const [numericalValue, setNumericalValue] = useState(); - const [facadeInputValue, setFacadeInputValue] = useState(); - - useEffect(() => { - if (typeof value === "number") { - setFacadeInputValue( - value - .toString(16) - .match(/.{1,3}/g) - ?.map((v) => parseInt(v, 10)) - ?.join(".") - ); - } - }, [value]); - - return ( - -
- setNumericalValue(parseInt(e.target.value))} - ref={ref} - hidden - /> - { - setFacadeInputValue(e.target.value); - setNumericalValue( - parseInt( - e.target.value - .split(".") - .map((v) => parseInt(v).toString(16)) - .join(""), - 16 - ) - ); - }} - className={`flex h-10 w-full rounded-md border-none bg-backgroundPrimary px-3 text-sm text-textPrimary focus:outline-none focus:ring-2 focus:ring-accent ${ - prefix ? "rounded-l-none" : "" - } ${action ? "rounded-r-none" : ""} ${ - disabled - ? "cursor-not-allowed text-textSecondary brightness-disabled hover:brightness-disabled" - : "" - }`} - disabled={disabled} - step="any" - {...rest} - /> -
- - ); -}); diff --git a/src/components/form/InfoWrapper.tsx b/src/components/form/InfoWrapper.tsx deleted file mode 100644 index 198e2555..00000000 --- a/src/components/form/InfoWrapper.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { AlertCircleIcon } from "lucide-react"; -import type { ReactNode } from "react"; - -export interface InfoWrapperProps { - label?: string; - description?: string; - error?: string; - children: ReactNode; -} - -export const InfoWrapper = ({ - label, - description, - error, - children -}: InfoWrapperProps): JSX.Element => { - return ( -
- {/* Label */} - {label && ( - - )} - {/* */} - {children} - {error && ( -
- -
- )} - {description && ( -

{description}

- )} - {error &&

{error}

} -
- ); -}; diff --git a/src/components/form/Input.tsx b/src/components/form/Input.tsx deleted file mode 100644 index 1c7a9acf..00000000 --- a/src/components/form/Input.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { forwardRef, InputHTMLAttributes } from "react"; -import { InfoWrapper, InfoWrapperProps } from "@components/form/InfoWrapper.js"; -import { AlertCircleIcon } from "lucide-react"; - -export interface InputProps - extends InputHTMLAttributes, - Omit { - prefix?: string; - suffix?: string; - action?: { - icon: JSX.Element; - action: () => void; - }; -} - -export const Input = forwardRef(function Input( - { - label, - description, - prefix, - suffix, - action, - error, - disabled, - ...rest - }: InputProps, - ref -) { - return ( - -
- {prefix && ( - - {prefix} - - )} - - {suffix && ( -
- {suffix} -
- )} - {action && ( - - )} - {error && ( -
- -
- )} -
- - ); -}); diff --git a/src/components/form/Toggle.tsx b/src/components/form/Toggle.tsx deleted file mode 100644 index 4b1c2d17..00000000 --- a/src/components/form/Toggle.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { Switch } from "../UI/Switch.js"; -import { InfoWrapper } from "./InfoWrapper.js"; - -export interface ToggleProps { - checked: boolean; - label?: string; - description?: string; - disabled?: boolean; - onChange?: (checked: boolean) => void; -} - -export const Toggle = ({ - checked, - label, - description, - disabled, - onChange -}: ToggleProps): JSX.Element => { - return ( - - - - ); -}; diff --git a/src/pages/Channels.tsx b/src/pages/Channels.tsx index eb6d7d18..f7d0b6ce 100644 --- a/src/pages/Channels.tsx +++ b/src/pages/Channels.tsx @@ -1,14 +1,14 @@ -import { Sidebar } from "@app/components/Sidebar.js"; -import { PageLayout } from "@app/components/PageLayout.js"; +import { Sidebar } from "@components/Sidebar.js"; +import { PageLayout } from "@components/PageLayout.js"; import { cn } from "@app/core/utils/cn.js"; import { Channel } from "@components/PageComponents/Channel.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { QrCodeIcon, ImportIcon } from "lucide-react"; import { Protobuf, Types } from "@meshtastic/meshtasticjs"; -import { SidebarSection } from "@app/components/UI/Sidebar/SidebarSection.js"; +import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js"; import { useState } from "react"; -import { Button } from "@app/components/UI/Button.js"; -import { SidebarButton } from "@app/components/UI/Sidebar/sidebarButton.js"; +import { Button } from "@components/UI/Button.js"; +import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js"; export const getChannelName = (channel: Protobuf.Channel) => channel.settings?.name.length diff --git a/src/pages/Config/index.tsx b/src/pages/Config/index.tsx index b40018b0..43912822 100644 --- a/src/pages/Config/index.tsx +++ b/src/pages/Config/index.tsx @@ -1,12 +1,12 @@ -import { Sidebar } from "@app/components/Sidebar.js"; +import { Sidebar } from "@components/Sidebar.js"; import { SettingsIcon, BoxesIcon, SaveIcon } from "lucide-react"; import { DeviceConfig } from "@pages/Config/DeviceConfig.js"; import { ModuleConfig } from "@pages/Config/ModuleConfig.js"; -import { PageLayout } from "@app/components/PageLayout.js"; -import { SidebarSection } from "@app/components/UI/Sidebar/SidebarSection.js"; +import { PageLayout } from "@components/PageLayout.js"; +import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js"; import { useState } from "react"; import { useDevice } from "@app/core/stores/deviceStore.js"; -import { SidebarButton } from "@app/components/UI/Sidebar/sidebarButton.js"; +import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js"; export const ConfigPage = (): JSX.Element => { const { workingConfig, workingModuleConfig, connection } = useDevice(); diff --git a/src/pages/Map.tsx b/src/pages/Map.tsx index 96163747..a0c0894d 100644 --- a/src/pages/Map.tsx +++ b/src/pages/Map.tsx @@ -3,8 +3,8 @@ import { Layer, Map, Marker, Source, useMap } from "react-map-gl"; import { useAppStore } from "@core/stores/appStore.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { Hashicon } from "@emeraldpay/hashicon-react"; -import { Sidebar } from "@app/components/Sidebar.js"; -import { PageLayout } from "@app/components/PageLayout.js"; +import { Sidebar } from "@components/Sidebar.js"; +import { PageLayout } from "@components/PageLayout.js"; import { ZoomInIcon, ZoomOutIcon, @@ -12,9 +12,9 @@ import { MapPinIcon } from "lucide-react"; import { bbox, lineString } from "@turf/turf"; -import { SidebarSection } from "@app/components/UI/Sidebar/SidebarSection.js"; -import { Button } from "@app/components/UI/Button.js"; -import { SidebarButton } from "@app/components/UI/Sidebar/sidebarButton.js"; +import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js"; +import { Button } from "@components/UI/Button.js"; +import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js"; import { Protobuf } from "@meshtastic/meshtasticjs"; export const MapPage = (): JSX.Element => { diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx index 977fd269..76709b06 100644 --- a/src/pages/Messages.tsx +++ b/src/pages/Messages.tsx @@ -1,14 +1,14 @@ -import { Sidebar } from "@app/components/Sidebar.js"; -import { PageLayout } from "@app/components/PageLayout.js"; +import { Sidebar } from "@components/Sidebar.js"; +import { PageLayout } from "@components/PageLayout.js"; import { ChannelChat } from "@components/PageComponents/Messages/ChannelChat.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { Hashicon } from "@emeraldpay/hashicon-react"; import { HashIcon } from "lucide-react"; import { Protobuf, Types } from "@meshtastic/meshtasticjs"; -import { SidebarSection } from "@app/components/UI/Sidebar/SidebarSection.js"; +import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js"; import { useState } from "react"; import { getChannelName } from "./Channels.js"; -import { SidebarButton } from "@app/components/UI/Sidebar/sidebarButton.js"; +import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js"; export const MessagesPage = (): JSX.Element => { const { channels, nodes, hardware } = useDevice(); diff --git a/src/pages/Peers.tsx b/src/pages/Peers.tsx index 01d97dd4..567bec96 100644 --- a/src/pages/Peers.tsx +++ b/src/pages/Peers.tsx @@ -5,7 +5,7 @@ import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { Hashicon } from "@emeraldpay/hashicon-react"; import { Protobuf } from "@meshtastic/meshtasticjs"; -import { Sidebar } from "@app/components/Sidebar.js"; +import { Sidebar } from "@components/Sidebar.js"; export const PeersPage = (): JSX.Element => { const { connection, nodes } = useDevice();