Browse Source
* WIP Layout Refactor * New Connection Dialog * WIP form overhaul * Fix remaining config pagespull/101/head
Sacha Weatherstone
3 years ago
committed by
GitHub
GitHub
121 changed files with 5376 additions and 4719 deletions
File diff suppressed because it is too large
@ -1,20 +0,0 @@ |
|||||
import { GitBranchIcon } from "@primer/octicons-react"; |
|
||||
import type { ReactNode } from "react"; |
|
||||
|
|
||||
export interface BottomNavProps { |
|
||||
children: ReactNode; |
|
||||
} |
|
||||
|
|
||||
export const BottomNav = ({ children }: BottomNavProps): JSX.Element => { |
|
||||
return ( |
|
||||
<div className="flex bg-backgroundPrimary"> |
|
||||
<div className="flex h-8 cursor-pointer select-none gap-1 bg-accent px-1 text-textPrimary hover:brightness-hover active:brightness-press"> |
|
||||
<GitBranchIcon className="my-auto w-4" /> |
|
||||
<span className="my-auto font-mono text-sm"> |
|
||||
{process.env.COMMIT_HASH} |
|
||||
</span> |
|
||||
</div> |
|
||||
{children} |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,37 +0,0 @@ |
|||||
import { Button } from "@app/components/form/Button.js"; |
|
||||
import { ChevronRightIcon, HomeIcon } from "@primer/octicons-react"; |
|
||||
|
|
||||
export interface NavBarProps { |
|
||||
breadcrumb: string[]; |
|
||||
actions?: { |
|
||||
label: string; |
|
||||
onClick: () => void; |
|
||||
}[]; |
|
||||
} |
|
||||
|
|
||||
export const NavBar = ({ breadcrumb, actions }: NavBarProps): JSX.Element => { |
|
||||
return ( |
|
||||
<div className="flex rounded-md bg-backgroundSecondary p-2"> |
|
||||
<ol className="my-auto ml-2 flex gap-4 text-textSecondary"> |
|
||||
<li className="cursor-pointer hover:brightness-disabled"> |
|
||||
<HomeIcon className="h-5 w-5 flex-shrink-0" /> |
|
||||
</li> |
|
||||
{breadcrumb.map((breadcrumb, index) => ( |
|
||||
<li key={index} className="my-auto flex gap-4"> |
|
||||
<ChevronRightIcon className="h-5 w-5 flex-shrink-0 brightness-disabled" /> |
|
||||
<span className="cursor-pointer text-sm font-medium hover:brightness-disabled"> |
|
||||
{breadcrumb} |
|
||||
</span> |
|
||||
</li> |
|
||||
))} |
|
||||
</ol> |
|
||||
<div className="ml-auto"> |
|
||||
{actions?.map((Action, index) => ( |
|
||||
<Button key={index} onClick={Action.onClick}> |
|
||||
{Action.label} |
|
||||
</Button> |
|
||||
))} |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,3 +0,0 @@ |
|||||
export const NavSpacer = (): JSX.Element => { |
|
||||
return <div className="h-1 w-10 rounded-full bg-accentMuted" />; |
|
||||
}; |
|
||||
@ -1,69 +0,0 @@ |
|||||
import type { ComponentType, SVGProps } from "react"; |
|
||||
import { useDevice } from "@core/providers/useDevice.js"; |
|
||||
import type { Page } from "@core/stores/deviceStore.js"; |
|
||||
import { |
|
||||
BeakerIcon, |
|
||||
ChatBubbleBottomCenterTextIcon, |
|
||||
Cog8ToothIcon, |
|
||||
MapIcon, |
|
||||
Square3Stack3DIcon, |
|
||||
UsersIcon |
|
||||
} from "@heroicons/react/24/outline"; |
|
||||
|
|
||||
export const PageNav = (): JSX.Element => { |
|
||||
const { activePage, setActivePage } = useDevice(); |
|
||||
|
|
||||
interface NavLink { |
|
||||
name: string; |
|
||||
icon: ComponentType<SVGProps<SVGSVGElement>>; |
|
||||
page: Page; |
|
||||
} |
|
||||
|
|
||||
const pages: NavLink[] = [ |
|
||||
{ |
|
||||
name: "Messages", |
|
||||
icon: ChatBubbleBottomCenterTextIcon, |
|
||||
page: "messages" |
|
||||
}, |
|
||||
{ |
|
||||
name: "Map", |
|
||||
icon: MapIcon, |
|
||||
page: "map" |
|
||||
}, |
|
||||
{ |
|
||||
name: "Config", |
|
||||
icon: Cog8ToothIcon, |
|
||||
page: "config" |
|
||||
}, |
|
||||
{ |
|
||||
name: "Channels", |
|
||||
icon: Square3Stack3DIcon, |
|
||||
page: "channels" |
|
||||
}, |
|
||||
{ |
|
||||
name: "Peers", |
|
||||
icon: UsersIcon, |
|
||||
page: "peers" |
|
||||
} |
|
||||
]; |
|
||||
|
|
||||
return ( |
|
||||
<div className="flex text-textPrimary"> |
|
||||
{pages.map((Link) => ( |
|
||||
<div |
|
||||
key={Link.name} |
|
||||
onClick={() => { |
|
||||
setActivePage(Link.page); |
|
||||
}} |
|
||||
className={`border-x-4 border-backgroundPrimary bg-backgroundPrimary py-5 px-4 hover:brightness-hover active:brightness-press ${ |
|
||||
Link.page === activePage |
|
||||
? "border-l-accent text-textPrimary" |
|
||||
: "text-textSecondary hover:text-textPrimary" |
|
||||
}`}
|
|
||||
> |
|
||||
<Link.icon className="w-4" /> |
|
||||
</div> |
|
||||
))} |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,28 +0,0 @@ |
|||||
import type { Group } from "@components/CommandPalette/Index.js"; |
|
||||
import { Combobox } from "@headlessui/react"; |
|
||||
import { ChevronRightIcon } from "@heroicons/react/24/outline"; |
|
||||
|
|
||||
export interface GroupViewProps { |
|
||||
group: Group; |
|
||||
} |
|
||||
|
|
||||
export const GroupView = ({ group }: GroupViewProps): JSX.Element => { |
|
||||
return ( |
|
||||
<Combobox.Option |
|
||||
value={group.label} |
|
||||
className={({ active }) => |
|
||||
`flex cursor-default select-none items-center rounded-md px-3 py-2 ${ |
|
||||
active ? "bg-backgroundPrimary text-textPrimary" : "" |
|
||||
}` |
|
||||
} |
|
||||
> |
|
||||
{({ active }) => ( |
|
||||
<> |
|
||||
<group.icon className="h-6 w-6" /> |
|
||||
<span className="ml-3 flex-auto truncate">{group.label}</span> |
|
||||
{active && <ChevronRightIcon className="h-5 text-textSecondary" />} |
|
||||
</> |
|
||||
)} |
|
||||
</Combobox.Option> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,13 +0,0 @@ |
|||||
import { Mono } from "@components/generic/Mono.js"; |
|
||||
import { CommandLineIcon } from "@heroicons/react/24/outline"; |
|
||||
|
|
||||
export const NoResults = (): JSX.Element => { |
|
||||
return ( |
|
||||
<div className="py-14 px-14 text-center"> |
|
||||
<CommandLineIcon className="mx-auto h-6 text-textSecondary" /> |
|
||||
<Mono className="tracking-tighter"> |
|
||||
Query does not match any avaliable commands |
|
||||
</Mono> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,40 +0,0 @@ |
|||||
import { Fragment, ReactNode } from "react"; |
|
||||
import { Transition } from "@headlessui/react"; |
|
||||
|
|
||||
export interface PaletteTransitionProps { |
|
||||
children: ReactNode; |
|
||||
} |
|
||||
|
|
||||
export const PaletteTransition = ({ |
|
||||
children |
|
||||
}: PaletteTransitionProps): JSX.Element => { |
|
||||
return ( |
|
||||
<> |
|
||||
<Transition.Child |
|
||||
as={Fragment} |
|
||||
enter="ease-out duration-200" |
|
||||
enterFrom="opacity-0" |
|
||||
enterTo="opacity-100" |
|
||||
leave="ease-in duration-100" |
|
||||
leaveFrom="opacity-100" |
|
||||
leaveTo="opacity-0" |
|
||||
> |
|
||||
<div className="bg-gray-500 fixed inset-0 bg-opacity-25 transition-opacity" /> |
|
||||
</Transition.Child> |
|
||||
|
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20"> |
|
||||
<Transition.Child |
|
||||
as={Fragment} |
|
||||
enter="ease-out duration-200" |
|
||||
enterFrom="opacity-0 scale-95" |
|
||||
enterTo="opacity-100 scale-100" |
|
||||
leave="ease-in duration-100" |
|
||||
leaveFrom="opacity-100 scale-100" |
|
||||
leaveTo="opacity-0 scale-95" |
|
||||
> |
|
||||
{children} |
|
||||
</Transition.Child> |
|
||||
</div> |
|
||||
</> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,19 +0,0 @@ |
|||||
import { Combobox } from "@headlessui/react"; |
|
||||
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline"; |
|
||||
|
|
||||
export interface SearchBoxProps { |
|
||||
setQuery: (query: string) => void; |
|
||||
} |
|
||||
|
|
||||
export const SearchBox = ({ setQuery }: SearchBoxProps): JSX.Element => { |
|
||||
return ( |
|
||||
<div className="relative"> |
|
||||
<MagnifyingGlassIcon className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-textSecondary" /> |
|
||||
<Combobox.Input |
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-sm text-textPrimary placeholder-textSecondary focus:ring-0" |
|
||||
placeholder="Search..." |
|
||||
onChange={(event) => setQuery(event.target.value)} |
|
||||
/> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,71 +0,0 @@ |
|||||
import type { Group } from "@components/CommandPalette/Index.js"; |
|
||||
import { Combobox } from "@headlessui/react"; |
|
||||
import { ChevronRightIcon } from "@heroicons/react/24/outline"; |
|
||||
|
|
||||
export interface SearchResultProps { |
|
||||
group: Group; |
|
||||
} |
|
||||
|
|
||||
export const SearchResult = ({ group }: SearchResultProps): JSX.Element => { |
|
||||
return ( |
|
||||
<div className="rounded-md border-2 border-backgroundPrimary py-2"> |
|
||||
<div className="flex items-center px-3 py-2"> |
|
||||
<group.icon className="text-gray-900 h-6 w-6 flex-none text-opacity-40" /> |
|
||||
<span className="ml-3 flex-auto truncate">{group.label}</span> |
|
||||
</div> |
|
||||
{group.commands.map((command, index) => ( |
|
||||
<div key={index}> |
|
||||
<Combobox.Option |
|
||||
value={command} |
|
||||
className={({ active }) => |
|
||||
`mr-2 ml-4 flex cursor-pointer select-none items-center rounded-md px-3 py-1 ${ |
|
||||
active ? "text-gray-900 bg-backgroundPrimary" : "" |
|
||||
}` |
|
||||
} |
|
||||
> |
|
||||
{({ active }) => ( |
|
||||
<> |
|
||||
<command.icon |
|
||||
className={`text-gray-900 h-4 flex-none text-opacity-40 ${ |
|
||||
active ? "text-opacity-100" : "" |
|
||||
}`}
|
|
||||
/> |
|
||||
<span className="ml-3">{command.label}</span> |
|
||||
{active && ( |
|
||||
<ChevronRightIcon className="text-gray-400 ml-auto h-4" /> |
|
||||
)} |
|
||||
</> |
|
||||
)} |
|
||||
</Combobox.Option> |
|
||||
{command.subItems && ( |
|
||||
<div className=" ml-9 border-l"> |
|
||||
{command.subItems?.map((item, index) => ( |
|
||||
<Combobox.Option |
|
||||
key={index} |
|
||||
value={item} |
|
||||
className={({ active }) => |
|
||||
`mx-2 flex cursor-pointer select-none items-center rounded-md px-3 py-1 ${ |
|
||||
active |
|
||||
? "text-gray-900 bg-backgroundPrimary bg-opacity-5" |
|
||||
: "" |
|
||||
}` |
|
||||
} |
|
||||
> |
|
||||
{({ active }) => ( |
|
||||
<> |
|
||||
{item.icon} |
|
||||
<span className="ml-3">{item.label}</span> |
|
||||
{active && ( |
|
||||
<ChevronRightIcon className="text-gray-400 ml-auto h-4" /> |
|
||||
)} |
|
||||
</> |
|
||||
)} |
|
||||
</Combobox.Option> |
|
||||
))} |
|
||||
</div> |
|
||||
)} |
|
||||
</div> |
|
||||
))} |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
@ -0,0 +1,104 @@ |
|||||
|
import { useAppStore } from "@app/core/stores/appStore.js"; |
||||
|
import { Button } from "@components/UI/Button.js"; |
||||
|
import { |
||||
|
PlusIcon, |
||||
|
ListPlusIcon, |
||||
|
UsersIcon, |
||||
|
MapPinIcon, |
||||
|
CalendarIcon, |
||||
|
BluetoothIcon, |
||||
|
UsbIcon, |
||||
|
NetworkIcon |
||||
|
} from "lucide-react"; |
||||
|
import { Subtle } from "./UI/Typography/Subtle.js"; |
||||
|
import { H3 } from "./UI/Typography/H3.js"; |
||||
|
import { useDeviceStore } from "@app/core/stores/deviceStore.js"; |
||||
|
import { useMemo } from "react"; |
||||
|
import { Separator } from "./UI/Seperator.js"; |
||||
|
|
||||
|
export const Dashboard = () => { |
||||
|
const { setConnectDialogOpen } = useAppStore(); |
||||
|
const { getDevices } = useDeviceStore(); |
||||
|
|
||||
|
const devices = useMemo(() => getDevices(), [getDevices]); |
||||
|
|
||||
|
return ( |
||||
|
<div className="flex flex-col gap-3 p-3"> |
||||
|
<div className="flex items-center justify-between"> |
||||
|
<div className="space-y-1"> |
||||
|
<H3>Connected Devices</H3> |
||||
|
<Subtle>Manage, connect and disconnect devices</Subtle> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<Separator /> |
||||
|
|
||||
|
<div className="flex h-[450px] rounded-md border border-dashed border-slate-200 p-3 dark:border-slate-700"> |
||||
|
{devices.length ? ( |
||||
|
<ul role="list" className="grow divide-y divide-gray-200"> |
||||
|
{devices.map((device) => { |
||||
|
return ( |
||||
|
<li key={device.id}> |
||||
|
<div className="px-4 py-4 sm:px-6"> |
||||
|
<div className="flex items-center justify-between"> |
||||
|
<p className="truncate text-sm font-medium text-accent"> |
||||
|
{device.nodes.filter( |
||||
|
(n) => n.data.num === device.hardware.myNodeNum |
||||
|
)[0]?.data.user?.longName ?? "UNK"} |
||||
|
</p> |
||||
|
<div className="inline-flex w-24 justify-center gap-2 rounded-full bg-slate-100 py-1 text-xs font-semibold text-slate-900 transition-colors hover:bg-slate-700 hover:text-slate-50"> |
||||
|
{device.connection?.connType === "ble" && ( |
||||
|
<> |
||||
|
<BluetoothIcon size={16} /> |
||||
|
BLE |
||||
|
</> |
||||
|
)} |
||||
|
{device.connection?.connType === "serial" && ( |
||||
|
<> |
||||
|
<UsbIcon size={16} /> |
||||
|
Serial |
||||
|
</> |
||||
|
)} |
||||
|
{device.connection?.connType === "http" && ( |
||||
|
<> |
||||
|
<NetworkIcon size={16} /> |
||||
|
Network |
||||
|
</> |
||||
|
)} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="mt-2 sm:flex sm:justify-between"> |
||||
|
<div className="flex gap-2 text-sm text-gray-500"> |
||||
|
<UsersIcon |
||||
|
size={20} |
||||
|
className="text-gray-400" |
||||
|
aria-hidden="true" |
||||
|
/> |
||||
|
{device.nodes.length === 0 |
||||
|
? 0 |
||||
|
: device.nodes.length - 1} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
); |
||||
|
})} |
||||
|
</ul> |
||||
|
) : ( |
||||
|
<div className="m-auto flex flex-col gap-3 text-center"> |
||||
|
<ListPlusIcon size={48} className="mx-auto text-textSecondary" /> |
||||
|
<H3>No Devices</H3> |
||||
|
<Subtle>Connect atleast one device to get started</Subtle> |
||||
|
<Button |
||||
|
className="gap-2" |
||||
|
onClick={() => setConnectDialogOpen(true)} |
||||
|
> |
||||
|
<PlusIcon size={16} /> |
||||
|
New Connection |
||||
|
</Button> |
||||
|
</div> |
||||
|
)} |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
@ -1,69 +1,84 @@ |
|||||
import { useAppStore } from "@core/stores/appStore.js"; |
import { useAppStore } from "@core/stores/appStore.js"; |
||||
import { useDeviceStore } from "@core/stores/deviceStore.js"; |
import { useDeviceStore } from "@core/stores/deviceStore.js"; |
||||
import { NavSpacer } from "@app/Nav/NavSpacer.js"; |
|
||||
import { PageNav } from "@app/Nav/PageNav.js"; |
|
||||
import { Hashicon } from "@emeraldpay/hashicon-react"; |
import { Hashicon } from "@emeraldpay/hashicon-react"; |
||||
import { PlusIcon } from "@heroicons/react/24/outline"; |
import { |
||||
import { MoonIcon, SunIcon } from "@primer/octicons-react"; |
PlusIcon, |
||||
|
HomeIcon, |
||||
|
LanguagesIcon, |
||||
|
SunIcon, |
||||
|
MoonIcon, |
||||
|
GithubIcon, |
||||
|
TerminalIcon |
||||
|
} from "lucide-react"; |
||||
|
import { Separator } from "./UI/Seperator.js"; |
||||
|
import { Code } from "./UI/Typography/Code.js"; |
||||
|
import { DeviceSelectorButton } from "./DeviceSelectorButton.js"; |
||||
|
|
||||
export const DeviceSelector = (): JSX.Element => { |
export const DeviceSelector = (): JSX.Element => { |
||||
const { getDevices } = useDeviceStore(); |
const { getDevices } = useDeviceStore(); |
||||
const { selectedDevice, setSelectedDevice, darkMode, setDarkMode } = |
const { |
||||
useAppStore(); |
selectedDevice, |
||||
|
setSelectedDevice, |
||||
|
darkMode, |
||||
|
setDarkMode, |
||||
|
setCommandPaletteOpen, |
||||
|
setConnectDialogOpen |
||||
|
} = useAppStore(); |
||||
|
|
||||
return ( |
return ( |
||||
<div className="flex h-full w-14 items-center gap-3 bg-backgroundPrimary pt-3 [writing-mode:vertical-rl]"> |
<nav className="flex flex-col justify-between border-r-[0.5px] border-slate-300 bg-transparent pt-2 dark:border-slate-700"> |
||||
<div className="flex items-center gap-3"> |
<div className="flex flex-col overflow-y-hidden"> |
||||
<span className="flex font-bold text-textPrimary"> |
<ul className="flex w-20 grow flex-col items-center space-y-4 bg-transparent py-4 px-5"> |
||||
|
<DeviceSelectorButton |
||||
|
active={selectedDevice === 0} |
||||
|
onClick={() => { |
||||
|
setSelectedDevice(0); |
||||
|
}} |
||||
|
> |
||||
|
<HomeIcon /> |
||||
|
</DeviceSelectorButton> |
||||
{getDevices().map((device) => ( |
{getDevices().map((device) => ( |
||||
<div |
<DeviceSelectorButton |
||||
key={device.id} |
key={device.id} |
||||
onClick={() => { |
onClick={() => { |
||||
setSelectedDevice(device.id); |
setSelectedDevice(device.id); |
||||
}} |
}} |
||||
className={`cursor-pointer border-x-4 border-backgroundPrimary bg-backgroundPrimary py-3 px-2 hover:brightness-hover active:brightness-press ${ |
active={selectedDevice === device.id} |
||||
selectedDevice === device.id ? "border-l-accent" : "" |
|
||||
}`}
|
|
||||
> |
> |
||||
<Hashicon |
<Hashicon |
||||
size={32} |
size={24} |
||||
value={device.hardware.myNodeNum.toString()} |
value={device.hardware.myNodeNum.toString()} |
||||
/> |
/> |
||||
</div> |
</DeviceSelectorButton> |
||||
))} |
))} |
||||
<div |
<Separator /> |
||||
onClick={() => { |
<button |
||||
setSelectedDevice(0); |
onClick={() => setConnectDialogOpen(true)} |
||||
}} |
className="transition-all duration-300 hover:text-accent" |
||||
className={`cursor-pointer border-x-4 border-backgroundPrimary bg-backgroundPrimary py-4 px-3 hover:brightness-hover active:brightness-press ${ |
|
||||
selectedDevice === 0 ? "border-l-accent" : "" |
|
||||
}`}
|
|
||||
> |
> |
||||
<PlusIcon className="w-6" /> |
<PlusIcon /> |
||||
</div> |
</button> |
||||
</span> |
</ul> |
||||
</div> |
</div> |
||||
|
<div className="flex w-20 flex-col items-center space-y-5 bg-transparent px-5 pb-5"> |
||||
{selectedDevice !== 0 && ( |
<button |
||||
<> |
className="transition-all hover:text-accent" |
||||
<NavSpacer /> |
onClick={() => setDarkMode(!darkMode)} |
||||
<PageNav /> |
> |
||||
</> |
{darkMode ? <SunIcon /> : <MoonIcon />} |
||||
)} |
</button> |
||||
|
<button |
||||
<NavSpacer /> |
className="transition-all hover:text-accent" |
||||
|
onClick={() => setCommandPaletteOpen(true)} |
||||
<div |
> |
||||
onClick={() => setDarkMode(!darkMode)} |
<TerminalIcon /> |
||||
className="bg-backgroundPrimary py-5 px-4 text-textSecondary hover:text-textPrimary hover:brightness-hover active:brightness-press" |
</button> |
||||
> |
<button className="transition-all hover:text-accent"> |
||||
{darkMode ? <SunIcon className="w-4" /> : <MoonIcon className="w-4" />} |
<LanguagesIcon /> |
||||
|
</button> |
||||
|
<Separator /> |
||||
|
<Code>{process.env.COMMIT_HASH}</Code> |
||||
</div> |
</div> |
||||
|
</nav> |
||||
<img |
|
||||
src={darkMode ? "Logo_White.svg" : "Logo_Black.svg"} |
|
||||
className="mt-auto px-2 py-3" |
|
||||
/> |
|
||||
</div> |
|
||||
); |
); |
||||
}; |
}; |
||||
|
|||||
@ -0,0 +1,22 @@ |
|||||
|
import { cn } from "@app/core/utils/cn.js"; |
||||
|
|
||||
|
export interface DeviceSelectorButtonProps { |
||||
|
active: boolean; |
||||
|
onClick: () => void; |
||||
|
children?: React.ReactNode; |
||||
|
} |
||||
|
|
||||
|
export const DeviceSelectorButton = ({ |
||||
|
active, |
||||
|
onClick, |
||||
|
children |
||||
|
}: DeviceSelectorButtonProps): JSX.Element => ( |
||||
|
<li className="aspect-w-1 aspect-h-1 relative w-full" onClick={onClick}> |
||||
|
{active && ( |
||||
|
<div className="absolute -left-2 h-10 w-1.5 rounded-full bg-accent" /> |
||||
|
)} |
||||
|
<div className="flex aspect-square cursor-pointer flex-col items-center justify-center"> |
||||
|
{children} |
||||
|
</div> |
||||
|
</li> |
||||
|
); |
||||
@ -0,0 +1,74 @@ |
|||||
|
import { Input } from "@components/UI/Input.js"; |
||||
|
import { |
||||
|
Dialog, |
||||
|
DialogContent, |
||||
|
DialogDescription, |
||||
|
DialogFooter, |
||||
|
DialogHeader, |
||||
|
DialogTitle |
||||
|
} from "@components/UI/Dialog.js"; |
||||
|
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"; |
||||
|
|
||||
|
export interface User { |
||||
|
longName: string; |
||||
|
shortName: string; |
||||
|
} |
||||
|
|
||||
|
export interface DeviceNameDialogProps { |
||||
|
open: boolean; |
||||
|
onOpenChange: (open: boolean) => void; |
||||
|
} |
||||
|
|
||||
|
export const DeviceNameDialog = ({ |
||||
|
open, |
||||
|
onOpenChange |
||||
|
}: DeviceNameDialogProps): JSX.Element => { |
||||
|
const { hardware, nodes, connection, setDialogOpen } = useDevice(); |
||||
|
|
||||
|
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum); |
||||
|
|
||||
|
const { register, handleSubmit } = useForm<User>({ |
||||
|
values: { |
||||
|
longName: myNode?.data.user?.longName ?? "Unknown", |
||||
|
shortName: myNode?.data.user?.shortName ?? "Unknown" |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
const onSubmit = handleSubmit((data) => { |
||||
|
connection?.setOwner( |
||||
|
new Protobuf.User({ |
||||
|
...myNode?.data.user, |
||||
|
...data |
||||
|
}) |
||||
|
); |
||||
|
setDialogOpen("deviceName", false); |
||||
|
}); |
||||
|
|
||||
|
return ( |
||||
|
<Dialog open={open} onOpenChange={onOpenChange}> |
||||
|
<DialogContent> |
||||
|
<DialogHeader> |
||||
|
<DialogTitle>Change Device Name</DialogTitle> |
||||
|
<DialogDescription> |
||||
|
The Device will restart once the config is saved. |
||||
|
</DialogDescription> |
||||
|
</DialogHeader> |
||||
|
<div className="gap-4"> |
||||
|
<form onSubmit={onSubmit}> |
||||
|
<Label>Long Name</Label> |
||||
|
<Input {...register("longName")} /> |
||||
|
<Label>Short Name</Label> |
||||
|
<Input maxLength={4} {...register("shortName")} /> |
||||
|
</form> |
||||
|
</div> |
||||
|
<DialogFooter> |
||||
|
<Button onClick={() => onSubmit()}>Save</Button> |
||||
|
</DialogFooter> |
||||
|
</DialogContent> |
||||
|
</Dialog> |
||||
|
); |
||||
|
}; |
||||
@ -1,41 +1,48 @@ |
|||||
import { useDevice } from "@core/providers/useDevice.js"; |
import { useDevice } from "@core/stores/deviceStore.js"; |
||||
import { QRDialog } from "@components/Dialog/QRDialog.js"; |
import { QRDialog } from "@components/Dialog/QRDialog.js"; |
||||
import { RebootDialog } from "@components/Dialog/RebootDialog.js"; |
import { RebootDialog } from "@components/Dialog/RebootDialog.js"; |
||||
import { ShutdownDialog } from "@components/Dialog/ShutdownDialog.js"; |
import { ShutdownDialog } from "@components/Dialog/ShutdownDialog.js"; |
||||
import { ImportDialog } from "@components/Dialog/ImportDialog.js"; |
import { ImportDialog } from "@components/Dialog/ImportDialog.js"; |
||||
|
import { DeviceNameDialog } from "./DeviceNameDialog.js"; |
||||
|
|
||||
export const DialogManager = (): JSX.Element => { |
export const DialogManager = (): JSX.Element => { |
||||
const { channels, config, dialog, setDialogOpen } = useDevice(); |
const { channels, config, dialog, setDialogOpen } = useDevice(); |
||||
return ( |
return ( |
||||
<> |
<> |
||||
<QRDialog |
<QRDialog |
||||
isOpen={dialog.QR} |
open={dialog.QR} |
||||
close={() => { |
onOpenChange={(open) => { |
||||
setDialogOpen("QR", false); |
setDialogOpen("QR", open); |
||||
}} |
}} |
||||
channels={channels.map((ch) => ch.config)} |
channels={channels.map((ch) => ch.config)} |
||||
loraConfig={config.lora} |
loraConfig={config.lora} |
||||
/> |
/> |
||||
<ImportDialog |
<ImportDialog |
||||
isOpen={dialog.import} |
open={dialog.import} |
||||
close={() => { |
onOpenChange={(open) => { |
||||
setDialogOpen("import", false); |
setDialogOpen("import", open); |
||||
}} |
}} |
||||
channels={channels.map((ch) => ch.config)} |
channels={channels.map((ch) => ch.config)} |
||||
loraConfig={config.lora} |
loraConfig={config.lora} |
||||
/> |
/> |
||||
<ShutdownDialog |
<ShutdownDialog |
||||
isOpen={dialog.shutdown} |
open={dialog.shutdown} |
||||
close={() => { |
onOpenChange={() => { |
||||
setDialogOpen("shutdown", false); |
setDialogOpen("shutdown", false); |
||||
}} |
}} |
||||
/> |
/> |
||||
<RebootDialog |
<RebootDialog |
||||
isOpen={dialog.reboot} |
open={dialog.reboot} |
||||
close={() => { |
onOpenChange={() => { |
||||
setDialogOpen("reboot", false); |
setDialogOpen("reboot", false); |
||||
}} |
}} |
||||
/> |
/> |
||||
|
<DeviceNameDialog |
||||
|
open={dialog.deviceName} |
||||
|
onOpenChange={(open) => { |
||||
|
setDialogOpen("deviceName", open); |
||||
|
}} |
||||
|
/> |
||||
</> |
</> |
||||
); |
); |
||||
}; |
}; |
||||
|
|||||
@ -0,0 +1,97 @@ |
|||||
|
import { Input } from "@components/form/Input.js"; |
||||
|
import { |
||||
|
Dialog, |
||||
|
DialogContent, |
||||
|
DialogDescription, |
||||
|
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 { HTTP } from "../PageComponents/Connect/HTTP.js"; |
||||
|
import { BLE } from "../PageComponents/Connect/BLE.js"; |
||||
|
import { Serial } from "../PageComponents/Connect/Serial.js"; |
||||
|
|
||||
|
const tabs = [ |
||||
|
{ |
||||
|
label: "HTTP", |
||||
|
element: HTTP, |
||||
|
disabled: false, |
||||
|
disabledMessage: "Unsuported connection method" |
||||
|
}, |
||||
|
{ |
||||
|
label: "Bluetooth", |
||||
|
element: BLE, |
||||
|
disabled: !navigator.bluetooth, |
||||
|
disabledMessage: |
||||
|
"Web Bluetooth is currently only supported by Chromium-based browsers", |
||||
|
disabledLink: |
||||
|
"https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility" |
||||
|
}, |
||||
|
{ |
||||
|
label: "Serial", |
||||
|
element: Serial, |
||||
|
disabled: !navigator.serial, |
||||
|
disabledMessage: |
||||
|
"WebSerial is currently only supported by Chromium based browsers: https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility" |
||||
|
} |
||||
|
]; |
||||
|
export interface NewDeviceProps { |
||||
|
open: boolean; |
||||
|
onOpenChange: (open: boolean) => void; |
||||
|
} |
||||
|
|
||||
|
export const NewDeviceDialog = ({ |
||||
|
open, |
||||
|
onOpenChange |
||||
|
}: NewDeviceProps): JSX.Element => { |
||||
|
return ( |
||||
|
<Dialog open={open} onOpenChange={onOpenChange}> |
||||
|
<DialogContent> |
||||
|
<DialogHeader> |
||||
|
<DialogTitle>Connect New Device</DialogTitle> |
||||
|
</DialogHeader> |
||||
|
<Tabs defaultValue="HTTP"> |
||||
|
<TabsList> |
||||
|
{tabs.map((tab) => ( |
||||
|
<TabsTrigger value={tab.label} disabled={tab.disabled}> |
||||
|
{tab.label} |
||||
|
</TabsTrigger> |
||||
|
))} |
||||
|
</TabsList> |
||||
|
{tabs.map((tab) => ( |
||||
|
<TabsContent value={tab.label}> |
||||
|
{tab.disabled ? ( |
||||
|
<p className="text-sm text-slate-500 dark:text-slate-400"> |
||||
|
{tab.disabledMessage} |
||||
|
</p> |
||||
|
) : ( |
||||
|
<tab.element /> |
||||
|
)} |
||||
|
</TabsContent> |
||||
|
))} |
||||
|
</Tabs> |
||||
|
|
||||
|
{(!navigator.bluetooth || !navigator.serial) && ( |
||||
|
<> |
||||
|
<Subtle> |
||||
|
Web Bluetooth and Web Serial are currently only supported by |
||||
|
Chromium-based browsers. |
||||
|
</Subtle> |
||||
|
<Subtle> |
||||
|
Read more: |
||||
|
<Link href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility"> |
||||
|
Web Bluetooth |
||||
|
</Link> |
||||
|
|
||||
|
<Link href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility"> |
||||
|
Web Serial |
||||
|
</Link> |
||||
|
</Subtle> |
||||
|
</> |
||||
|
)} |
||||
|
</DialogContent> |
||||
|
</Dialog> |
||||
|
); |
||||
|
}; |
||||
@ -1,56 +1,64 @@ |
|||||
import { useState } from "react"; |
import { useState } from "react"; |
||||
import { useDevice } from "@core/providers/useDevice.js"; |
import { useDevice } from "@core/stores/deviceStore.js"; |
||||
import { Dialog } from "@components/generic/Dialog.js"; |
import { |
||||
import { ArrowPathIcon, ClockIcon } from "@heroicons/react/24/outline"; |
Dialog, |
||||
import { Button } from "@components/form/Button.js"; |
DialogContent, |
||||
|
DialogDescription, |
||||
|
DialogFooter, |
||||
|
DialogHeader, |
||||
|
DialogTitle |
||||
|
} 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/form/Input.js"; |
||||
|
|
||||
export interface RebootDialogProps { |
export interface RebootDialogProps { |
||||
isOpen: boolean; |
open: boolean; |
||||
close: () => void; |
onOpenChange: (open: boolean) => void; |
||||
} |
} |
||||
|
|
||||
export const RebootDialog = ({ |
export const RebootDialog = ({ |
||||
isOpen, |
open, |
||||
close |
onOpenChange |
||||
}: RebootDialogProps): JSX.Element => { |
}: RebootDialogProps): JSX.Element => { |
||||
const { connection, setDialogOpen } = useDevice(); |
const { connection, setDialogOpen } = useDevice(); |
||||
|
|
||||
const [time, setTime] = useState<number>(5); |
const [time, setTime] = useState<number>(5); |
||||
|
|
||||
return ( |
return ( |
||||
<Dialog |
<Dialog open={open} onOpenChange={onOpenChange}> |
||||
title={"Schedule Reboot"} |
<DialogContent> |
||||
description={"Reboot the connected node after x minutes."} |
<DialogHeader> |
||||
isOpen={isOpen} |
<DialogTitle>Schedule Reboot</DialogTitle> |
||||
close={close} |
<DialogDescription> |
||||
> |
Reboot the connected node after x minutes. |
||||
<div className="flex gap-2 p-4"> |
</DialogDescription> |
||||
<Input |
</DialogHeader> |
||||
type="number" |
<div className="flex gap-2 p-4"> |
||||
value={time} |
<Input |
||||
onChange={(e) => setTime(parseInt(e.target.value))} |
type="number" |
||||
action={{ |
value={time} |
||||
icon: <ClockIcon className="w-4" />, |
onChange={(e) => setTime(parseInt(e.target.value))} |
||||
action() { |
action={{ |
||||
connection |
icon: <ClockIcon size={16} />, |
||||
?.reboot(time * 60) |
action() { |
||||
.then(() => setDialogOpen("reboot", false)); |
connection |
||||
} |
?.reboot(time * 60) |
||||
}} |
.then(() => setDialogOpen("reboot", false)); |
||||
/> |
} |
||||
<Button |
}} |
||||
className="w-24" |
/> |
||||
onClick={() => { |
<Button |
||||
connection?.reboot(2).then(() => setDialogOpen("reboot", false)); |
className="w-24" |
||||
}} |
onClick={() => { |
||||
> |
connection?.reboot(2).then(() => setDialogOpen("reboot", false)); |
||||
<span> |
}} |
||||
<ArrowPathIcon className="w-4" /> |
> |
||||
</span> |
<RefreshCwIcon size={16} /> |
||||
Now |
Now |
||||
</Button> |
</Button> |
||||
</div> |
</div> |
||||
|
</DialogContent> |
||||
</Dialog> |
</Dialog> |
||||
); |
); |
||||
}; |
}; |
||||
|
|||||
@ -1,56 +1,66 @@ |
|||||
import { useState } from "react"; |
import { useState } from "react"; |
||||
import { useDevice } from "@core/providers/useDevice.js"; |
import { useDevice } from "@core/stores/deviceStore.js"; |
||||
import { Dialog } from "@components/generic/Dialog.js"; |
import { |
||||
import { ClockIcon, PowerIcon } from "@heroicons/react/24/outline"; |
Dialog, |
||||
import { Button } from "@components/form/Button.js"; |
DialogContent, |
||||
|
DialogDescription, |
||||
|
DialogHeader, |
||||
|
DialogTitle |
||||
|
} 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/form/Input.js"; |
||||
|
|
||||
export interface ShutdownDialogProps { |
export interface ShutdownDialogProps { |
||||
isOpen: boolean; |
open: boolean; |
||||
close: () => void; |
onOpenChange: (open: boolean) => void; |
||||
} |
} |
||||
|
|
||||
export const ShutdownDialog = ({ |
export const ShutdownDialog = ({ |
||||
isOpen, |
open, |
||||
close |
onOpenChange |
||||
}: ShutdownDialogProps): JSX.Element => { |
}: ShutdownDialogProps): JSX.Element => { |
||||
const { connection, setDialogOpen } = useDevice(); |
const { connection, setDialogOpen } = useDevice(); |
||||
|
|
||||
const [time, setTime] = useState<number>(5); |
const [time, setTime] = useState<number>(5); |
||||
|
|
||||
return ( |
return ( |
||||
<Dialog |
<Dialog open={open} onOpenChange={onOpenChange}> |
||||
title={"Schedule Shutdown"} |
<DialogContent> |
||||
description={"Turn off the connected node after x minutes."} |
<DialogHeader> |
||||
isOpen={isOpen} |
<DialogTitle>Schedule Shutdown</DialogTitle> |
||||
close={close} |
<DialogDescription> |
||||
> |
Turn off the connected node after x minutes. |
||||
<div className="flex gap-2 p-4"> |
</DialogDescription> |
||||
<Input |
</DialogHeader> |
||||
type="number" |
|
||||
value={time} |
<div className="flex gap-2 p-4"> |
||||
onChange={(e) => setTime(parseInt(e.target.value))} |
<Input |
||||
action={{ |
type="number" |
||||
icon: <ClockIcon className="w-4" />, |
value={time} |
||||
action() { |
onChange={(e) => setTime(parseInt(e.target.value))} |
||||
|
action={{ |
||||
|
icon: <ClockIcon size={16} />, |
||||
|
action() { |
||||
|
connection |
||||
|
?.shutdown(time * 60) |
||||
|
.then(() => setDialogOpen("shutdown", false)); |
||||
|
} |
||||
|
}} |
||||
|
/> |
||||
|
<Button |
||||
|
className="w-24" |
||||
|
onClick={() => { |
||||
connection |
connection |
||||
?.shutdown(time * 60) |
?.shutdown(2) |
||||
.then(() => setDialogOpen("shutdown", false)); |
.then(() => setDialogOpen("shutdown", false)); |
||||
} |
}} |
||||
}} |
> |
||||
/> |
<PowerIcon size={16} /> |
||||
<Button |
<span>Now</span> |
||||
className="w-24" |
</Button> |
||||
onClick={() => { |
</div> |
||||
connection |
</DialogContent> |
||||
?.shutdown(2) |
|
||||
.then(() => setDialogOpen("shutdown", false)); |
|
||||
}} |
|
||||
> |
|
||||
<PowerIcon className="w-4" /> |
|
||||
<span>Now</span> |
|
||||
</Button> |
|
||||
</div> |
|
||||
</Dialog> |
</Dialog> |
||||
); |
); |
||||
}; |
}; |
||||
|
|||||
@ -1,134 +0,0 @@ |
|||||
import "chartjs-adapter-date-fns"; |
|
||||
import { |
|
||||
Chart as ChartJS, |
|
||||
Filler, |
|
||||
Legend, |
|
||||
LinearScale, |
|
||||
LineElement, |
|
||||
PointElement, |
|
||||
TimeSeriesScale, |
|
||||
Tooltip |
|
||||
} from "chart.js"; |
|
||||
import { Line } from "react-chartjs-2"; |
|
||||
import { useDevice } from "@core/providers/useDevice.js"; |
|
||||
|
|
||||
export const Metrics = (): JSX.Element => { |
|
||||
const { nodes, hardware } = useDevice(); |
|
||||
|
|
||||
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum); |
|
||||
|
|
||||
ChartJS.register( |
|
||||
LinearScale, |
|
||||
PointElement, |
|
||||
LineElement, |
|
||||
Tooltip, |
|
||||
Filler, |
|
||||
Legend, |
|
||||
TimeSeriesScale |
|
||||
); |
|
||||
|
|
||||
return ( |
|
||||
<div className="flex h-full w-full flex-grow"> |
|
||||
<Line |
|
||||
className="h-full w-full flex-grow" |
|
||||
options={{ |
|
||||
responsive: true, |
|
||||
maintainAspectRatio: false, |
|
||||
interaction: { |
|
||||
mode: "index", |
|
||||
intersect: false |
|
||||
}, |
|
||||
line: { |
|
||||
datasets: { |
|
||||
tension: 0.5 |
|
||||
} |
|
||||
}, |
|
||||
scales: { |
|
||||
x: { |
|
||||
type: "timeseries", |
|
||||
ticks: { |
|
||||
display: false |
|
||||
} |
|
||||
}, |
|
||||
y: { |
|
||||
ticks: { |
|
||||
display: false |
|
||||
} |
|
||||
}, |
|
||||
y1: { |
|
||||
display: false |
|
||||
}, |
|
||||
y2: { |
|
||||
display: false |
|
||||
}, |
|
||||
y3: { |
|
||||
display: false |
|
||||
} |
|
||||
}, |
|
||||
plugins: {} |
|
||||
}} |
|
||||
data={{ |
|
||||
labels: [], |
|
||||
datasets: [ |
|
||||
{ |
|
||||
fill: true, |
|
||||
label: "airUtilTx", |
|
||||
yAxisID: "y", |
|
||||
data: myNode?.deviceMetrics.map((metric) => { |
|
||||
return { |
|
||||
x: metric.timestamp, |
|
||||
y: metric.metric.airUtilTx |
|
||||
}; |
|
||||
}), |
|
||||
backgroundColor: "rgba(102, 126, 234, 0.25)", |
|
||||
borderColor: "rgba(102, 126, 234, 1)", |
|
||||
pointBackgroundColor: "rgba(102, 126, 234, 1)" |
|
||||
}, |
|
||||
{ |
|
||||
fill: true, |
|
||||
label: "channelUtilization", |
|
||||
yAxisID: "y1", |
|
||||
data: myNode?.deviceMetrics.map((metric) => { |
|
||||
return { |
|
||||
x: metric.timestamp, |
|
||||
y: metric.metric.channelUtilization |
|
||||
}; |
|
||||
}), |
|
||||
backgroundColor: "rgba(237, 100, 166, 0.25)", |
|
||||
borderColor: "rgba(237, 100, 166, 1)", |
|
||||
pointBackgroundColor: "rgba(237, 100, 166, 1)" |
|
||||
}, |
|
||||
{ |
|
||||
fill: true, |
|
||||
label: "batteryLevel", |
|
||||
yAxisID: "y2", |
|
||||
data: myNode?.deviceMetrics.map((metric) => { |
|
||||
return { |
|
||||
x: metric.timestamp, |
|
||||
y: metric.metric.batteryLevel |
|
||||
}; |
|
||||
}), |
|
||||
backgroundColor: "rgba(113, 234, 102, 0.25)", |
|
||||
borderColor: "rgba(113, 234, 102, 1)", |
|
||||
pointBackgroundColor: "rgba(113, 234, 102, 1)" |
|
||||
}, |
|
||||
{ |
|
||||
fill: true, |
|
||||
label: "voltage", |
|
||||
yAxisID: "y3", |
|
||||
data: myNode?.deviceMetrics.map((metric) => { |
|
||||
return { |
|
||||
x: metric.timestamp, |
|
||||
y: metric.metric.voltage |
|
||||
}; |
|
||||
}), |
|
||||
backgroundColor: "rgba(234, 166, 102, 0.25)", |
|
||||
borderColor: "rgba(234, 166, 102, 1)", |
|
||||
pointBackgroundColor: "rgba(234, 166, 102, 1)" |
|
||||
} |
|
||||
] |
|
||||
}} |
|
||||
/> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,3 +0,0 @@ |
|||||
export const Notifications = (): JSX.Element => { |
|
||||
return <div></div>; |
|
||||
}; |
|
||||
@ -1,170 +0,0 @@ |
|||||
import "chartjs-adapter-date-fns"; |
|
||||
|
|
||||
import { |
|
||||
Chart as ChartJS, |
|
||||
Filler, |
|
||||
Legend, |
|
||||
LinearScale, |
|
||||
LineElement, |
|
||||
PointElement, |
|
||||
TimeSeriesScale, |
|
||||
Tooltip |
|
||||
} from "chart.js"; |
|
||||
import { Line } from "react-chartjs-2"; |
|
||||
|
|
||||
import { useDevice } from "@core/providers/useDevice.js"; |
|
||||
|
|
||||
export const Sensor = (): JSX.Element => { |
|
||||
const { nodes, hardware } = useDevice(); |
|
||||
|
|
||||
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum); |
|
||||
|
|
||||
ChartJS.register( |
|
||||
LinearScale, |
|
||||
PointElement, |
|
||||
LineElement, |
|
||||
Tooltip, |
|
||||
Filler, |
|
||||
Legend, |
|
||||
TimeSeriesScale |
|
||||
); |
|
||||
|
|
||||
return ( |
|
||||
<div className="flex h-full w-full flex-grow"> |
|
||||
<Line |
|
||||
className="h-full w-full flex-grow" |
|
||||
options={{ |
|
||||
responsive: true, |
|
||||
maintainAspectRatio: false, |
|
||||
interaction: { |
|
||||
mode: "index", |
|
||||
intersect: false |
|
||||
}, |
|
||||
line: { |
|
||||
datasets: { |
|
||||
tension: 0.5 |
|
||||
} |
|
||||
}, |
|
||||
scales: { |
|
||||
x: { |
|
||||
type: "timeseries", |
|
||||
ticks: { |
|
||||
display: false |
|
||||
} |
|
||||
}, |
|
||||
y: { |
|
||||
ticks: { |
|
||||
display: false |
|
||||
} |
|
||||
}, |
|
||||
y1: { |
|
||||
display: false |
|
||||
}, |
|
||||
y2: { |
|
||||
display: false |
|
||||
}, |
|
||||
y3: { |
|
||||
display: false |
|
||||
}, |
|
||||
y4: { |
|
||||
display: false |
|
||||
}, |
|
||||
y5: { |
|
||||
display: false |
|
||||
} |
|
||||
}, |
|
||||
plugins: {} |
|
||||
}} |
|
||||
data={{ |
|
||||
labels: [], |
|
||||
datasets: [ |
|
||||
{ |
|
||||
fill: true, |
|
||||
label: "barometricPressure", |
|
||||
yAxisID: "y", |
|
||||
data: myNode?.environmentMetrics.map((metric) => { |
|
||||
return { |
|
||||
x: metric.timestamp, |
|
||||
y: metric.metric.barometricPressure |
|
||||
}; |
|
||||
}), |
|
||||
backgroundColor: "rgba(102, 126, 234, 0.25)", |
|
||||
borderColor: "rgba(102, 126, 234, 1)", |
|
||||
pointBackgroundColor: "rgba(102, 126, 234, 1)" |
|
||||
}, |
|
||||
{ |
|
||||
fill: true, |
|
||||
label: "current", |
|
||||
yAxisID: "y1", |
|
||||
data: myNode?.environmentMetrics.map((metric) => { |
|
||||
return { |
|
||||
x: metric.timestamp, |
|
||||
y: metric.metric.current |
|
||||
}; |
|
||||
}), |
|
||||
backgroundColor: "rgba(237, 100, 166, 0.25)", |
|
||||
borderColor: "rgba(237, 100, 166, 1)", |
|
||||
pointBackgroundColor: "rgba(237, 100, 166, 1)" |
|
||||
}, |
|
||||
{ |
|
||||
fill: true, |
|
||||
label: "gasResistance", |
|
||||
yAxisID: "y2", |
|
||||
data: myNode?.environmentMetrics.map((metric) => { |
|
||||
return { |
|
||||
x: metric.timestamp, |
|
||||
y: metric.metric.gasResistance |
|
||||
}; |
|
||||
}), |
|
||||
backgroundColor: "rgba(113, 234, 102, 0.25)", |
|
||||
borderColor: "rgba(113, 234, 102, 1)", |
|
||||
pointBackgroundColor: "rgba(113, 234, 102, 1)" |
|
||||
}, |
|
||||
{ |
|
||||
fill: true, |
|
||||
label: "relativeHumidity", |
|
||||
yAxisID: "y3", |
|
||||
data: myNode?.environmentMetrics.map((metric) => { |
|
||||
return { |
|
||||
x: metric.timestamp, |
|
||||
y: metric.metric.relativeHumidity |
|
||||
}; |
|
||||
}), |
|
||||
backgroundColor: "rgba(234, 166, 102, 0.25)", |
|
||||
borderColor: "rgba(234, 166, 102, 1)", |
|
||||
pointBackgroundColor: "rgba(234, 166, 102, 1)" |
|
||||
}, |
|
||||
{ |
|
||||
fill: true, |
|
||||
label: "temperature", |
|
||||
yAxisID: "y4", |
|
||||
data: myNode?.environmentMetrics.map((metric) => { |
|
||||
return { |
|
||||
x: metric.timestamp, |
|
||||
y: metric.metric.temperature |
|
||||
}; |
|
||||
}), |
|
||||
backgroundColor: "rgba(38, 255, 212, 0.25)", |
|
||||
borderColor: "rgba(38, 255, 212, 1)", |
|
||||
pointBackgroundColor: "rgba(38, 255, 212, 1)" |
|
||||
}, |
|
||||
{ |
|
||||
fill: true, |
|
||||
label: "voltage", |
|
||||
yAxisID: "y5", |
|
||||
data: myNode?.environmentMetrics.map((metric) => { |
|
||||
return { |
|
||||
x: metric.timestamp, |
|
||||
y: metric.metric.voltage |
|
||||
}; |
|
||||
}), |
|
||||
backgroundColor: "rgba(247, 255, 15, 0.25)", |
|
||||
borderColor: "rgba(247, 255, 15, 1)", |
|
||||
pointBackgroundColor: "rgba(247, 255, 15, 1)" |
|
||||
} |
|
||||
] |
|
||||
}} |
|
||||
/> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,66 +0,0 @@ |
|||||
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"; |
|
||||
import type { TabType } from "@components/generic/TabbedContent.js"; |
|
||||
import { Tab } from "@headlessui/react"; |
|
||||
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline"; |
|
||||
|
|
||||
export const Drawer = (): JSX.Element => { |
|
||||
const [drawerOpen, setDrawerOpen] = useState(false); |
|
||||
|
|
||||
const tabs: TabType[] = [ |
|
||||
{ label: "Notifications", element: Notifications }, |
|
||||
{ label: "Metrics", element: Metrics }, |
|
||||
{ label: "Sensor", element: Sensor } |
|
||||
]; |
|
||||
return ( |
|
||||
<Tab.Group as="div"> |
|
||||
<Tab.List className="flex w-full"> |
|
||||
{tabs.map((tab, index) => ( |
|
||||
<Tab key={index}> |
|
||||
{({ selected }) => ( |
|
||||
<div |
|
||||
onClick={() => { |
|
||||
setDrawerOpen(true); |
|
||||
}} |
|
||||
className={`flex h-full cursor-pointer border-b-4 px-1 first:pl-2 last:pr-2 hover:text-textPrimary ${ |
|
||||
selected |
|
||||
? "border-accent text-textPrimary" |
|
||||
: "border-backgroundPrimary text-textSecondary" |
|
||||
}`}
|
|
||||
> |
|
||||
<span className="m-auto select-none">{tab.label}</span> |
|
||||
</div> |
|
||||
)} |
|
||||
</Tab> |
|
||||
))} |
|
||||
|
|
||||
<div className="ml-auto flex h-8"> |
|
||||
<div |
|
||||
onClick={() => { |
|
||||
setDrawerOpen(!drawerOpen); |
|
||||
}} |
|
||||
className="flex cursor-pointer px-2" |
|
||||
> |
|
||||
<div className="m-auto text-textSecondary"> |
|
||||
{drawerOpen ? ( |
|
||||
<ChevronDownIcon className="h-4" /> |
|
||||
) : ( |
|
||||
<ChevronUpIcon className="h-4" /> |
|
||||
)} |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</Tab.List> |
|
||||
|
|
||||
<Tab.Panels className={`${drawerOpen ? "flex" : "hidden"}`}> |
|
||||
{tabs.map((tab, index) => ( |
|
||||
<Tab.Panel key={index} className="flex h-40 flex-grow"> |
|
||||
{tab.element} |
|
||||
</Tab.Panel> |
|
||||
))} |
|
||||
</Tab.Panels> |
|
||||
</Tab.Group> |
|
||||
); |
|
||||
}; |
|
||||
@ -0,0 +1,238 @@ |
|||||
|
import { |
||||
|
Controller, |
||||
|
DeepPartial, |
||||
|
FieldValues, |
||||
|
Path, |
||||
|
SubmitHandler, |
||||
|
useForm |
||||
|
} from "react-hook-form"; |
||||
|
import { Input } from "./UI/Input.js"; |
||||
|
import { Label } from "./UI/Label.js"; |
||||
|
import { ErrorMessage } from "@hookform/error-message"; |
||||
|
import { |
||||
|
Select, |
||||
|
SelectContent, |
||||
|
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"; |
||||
|
|
||||
|
interface DisabledBy<T> { |
||||
|
fieldName: Path<T>; |
||||
|
selector?: number; |
||||
|
invert?: boolean; |
||||
|
} |
||||
|
|
||||
|
interface BasicFieldProps<T> { |
||||
|
name: Path<T>; |
||||
|
label: string; |
||||
|
description?: string; |
||||
|
active?: boolean; |
||||
|
required?: boolean; |
||||
|
disabledBy?: DisabledBy<T>[]; |
||||
|
} |
||||
|
|
||||
|
interface InputFieldProps<T> extends BasicFieldProps<T> { |
||||
|
type: "text" | "number" | "password"; |
||||
|
suffix?: string; |
||||
|
} |
||||
|
|
||||
|
interface SelectFieldProps<T> extends BasicFieldProps<T> { |
||||
|
type: "select" | "multiSelect"; |
||||
|
|
||||
|
enumValue: { |
||||
|
[s: string]: string | number; |
||||
|
}; |
||||
|
formatEnumName?: boolean; |
||||
|
} |
||||
|
|
||||
|
interface ToggleFieldProps<T> extends BasicFieldProps<T> { |
||||
|
type: "toggle"; |
||||
|
} |
||||
|
|
||||
|
export interface FormProps<T extends FieldValues> { |
||||
|
onSubmit: SubmitHandler<T>; |
||||
|
defaultValues?: DeepPartial<T>; |
||||
|
fieldGroups: { |
||||
|
label: string; |
||||
|
description: string; |
||||
|
fields: (InputFieldProps<T> | SelectFieldProps<T> | ToggleFieldProps<T>)[]; |
||||
|
}[]; |
||||
|
} |
||||
|
|
||||
|
export function DynamicForm<T extends FieldValues>({ |
||||
|
fieldGroups, |
||||
|
onSubmit, |
||||
|
defaultValues |
||||
|
}: FormProps<T>) { |
||||
|
const { register, handleSubmit, control, getValues } = useForm<T>({ |
||||
|
mode: "onChange", |
||||
|
defaultValues: defaultValues |
||||
|
}); |
||||
|
|
||||
|
const isDisabled = (disabledBy?: DisabledBy<T>[]): boolean => { |
||||
|
if (!disabledBy) return false; |
||||
|
|
||||
|
return disabledBy.some((field) => { |
||||
|
const value = getValues(field.fieldName); |
||||
|
if (typeof value === "boolean") return field.invert ? value : !value; |
||||
|
if (typeof value === "number") |
||||
|
return field.invert |
||||
|
? field.selector !== value |
||||
|
: field.selector === value; |
||||
|
return false; |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<form |
||||
|
className="space-y-8 divide-y divide-gray-200" |
||||
|
onChange={handleSubmit(onSubmit)} |
||||
|
> |
||||
|
{fieldGroups.map((fieldGroup) => ( |
||||
|
<div className="space-y-8 divide-y divide-gray-200 sm:space-y-5"> |
||||
|
<div> |
||||
|
<H4 className="font-medium">{fieldGroup.label}</H4> |
||||
|
<Subtle>{fieldGroup.description}</Subtle> |
||||
|
</div> |
||||
|
|
||||
|
{fieldGroup.fields.map((field) => { |
||||
|
const fieldWrapperData: FieldWrapperProps = { |
||||
|
label: field.label, |
||||
|
description: field.description, |
||||
|
disabled: isDisabled(field.disabledBy) |
||||
|
}; |
||||
|
|
||||
|
switch (field.type) { |
||||
|
case "text": |
||||
|
return ( |
||||
|
<FieldWrapper {...fieldWrapperData}> |
||||
|
<Input |
||||
|
disabled={fieldWrapperData.disabled} |
||||
|
{...register(field.name)} |
||||
|
/> |
||||
|
</FieldWrapper> |
||||
|
); |
||||
|
case "number": |
||||
|
return ( |
||||
|
<FieldWrapper {...fieldWrapperData}> |
||||
|
<Input |
||||
|
type="number" |
||||
|
disabled={fieldWrapperData.disabled} |
||||
|
{...register(field.name)} |
||||
|
/> |
||||
|
</FieldWrapper> |
||||
|
); |
||||
|
case "password": |
||||
|
return ( |
||||
|
<FieldWrapper {...fieldWrapperData}> |
||||
|
<Input |
||||
|
type="password" |
||||
|
disabled={fieldWrapperData.disabled} |
||||
|
{...register(field.name)} |
||||
|
/> |
||||
|
</FieldWrapper> |
||||
|
); |
||||
|
case "toggle": |
||||
|
return ( |
||||
|
<FieldWrapper {...fieldWrapperData}> |
||||
|
<Controller |
||||
|
name={field.name} |
||||
|
control={control} |
||||
|
render={({ field: { value, onChange, ...rest } }) => ( |
||||
|
<Switch |
||||
|
checked={value} |
||||
|
onCheckedChange={onChange} |
||||
|
disabled={fieldWrapperData.disabled} |
||||
|
{...rest} |
||||
|
/> |
||||
|
)} |
||||
|
/> |
||||
|
</FieldWrapper> |
||||
|
); |
||||
|
case "select": |
||||
|
const optionsEnumValues = field.enumValue |
||||
|
? Object.entries(field.enumValue).filter( |
||||
|
(value) => typeof value[1] === "number" |
||||
|
) |
||||
|
: []; |
||||
|
return ( |
||||
|
<FieldWrapper {...fieldWrapperData}> |
||||
|
<Controller |
||||
|
name={field.name} |
||||
|
control={control} |
||||
|
render={({ field: { value, onChange, ...rest } }) => ( |
||||
|
<Select |
||||
|
onValueChange={(e) => onChange(parseInt(e))} |
||||
|
disabled={fieldWrapperData.disabled} |
||||
|
value={value?.toString()} |
||||
|
{...rest} |
||||
|
> |
||||
|
<SelectTrigger> |
||||
|
<SelectValue /> |
||||
|
</SelectTrigger> |
||||
|
<SelectContent> |
||||
|
{optionsEnumValues.map(([name, value], index) => ( |
||||
|
<SelectItem key={index} value={value.toString()}> |
||||
|
{field.formatEnumName |
||||
|
? name |
||||
|
.replace(/_/g, " ") |
||||
|
.toLowerCase() |
||||
|
.split(" ") |
||||
|
.map( |
||||
|
(s) => |
||||
|
s.charAt(0).toUpperCase() + |
||||
|
s.substring(1) |
||||
|
) |
||||
|
.join(" ") |
||||
|
: name} |
||||
|
</SelectItem> |
||||
|
))} |
||||
|
</SelectContent> |
||||
|
</Select> |
||||
|
)} |
||||
|
/> |
||||
|
</FieldWrapper> |
||||
|
); |
||||
|
case "multiSelect": |
||||
|
return <FieldWrapper {...fieldWrapperData}>tmp</FieldWrapper>; |
||||
|
} |
||||
|
})} |
||||
|
</div> |
||||
|
))} |
||||
|
</form> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
interface FieldWrapperProps { |
||||
|
label: string; |
||||
|
description?: string; |
||||
|
disabled?: boolean; |
||||
|
children?: React.ReactNode; |
||||
|
} |
||||
|
|
||||
|
const FieldWrapper = ({ |
||||
|
label, |
||||
|
description, |
||||
|
disabled, |
||||
|
children |
||||
|
}: FieldWrapperProps): JSX.Element => ( |
||||
|
<div className="pt-6 sm:pt-5"> |
||||
|
<div role="group" aria-labelledby="label-notifications"> |
||||
|
<div className="sm:grid sm:grid-cols-3 sm:items-baseline sm:gap-4"> |
||||
|
<Label>{label}</Label> |
||||
|
<div className="sm:col-span-2"> |
||||
|
<div className="max-w-lg"> |
||||
|
<p className="text-sm text-gray-500">{description}</p> |
||||
|
<div className="mt-4 space-y-4"> |
||||
|
<div className="flex items-center">{children}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
@ -1,43 +0,0 @@ |
|||||
import React from "react"; |
|
||||
|
|
||||
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 "@core/stores/appStore.js"; |
|
||||
import { MoonIcon, SunIcon } from "@heroicons/react/24/outline"; |
|
||||
|
|
||||
export const NewDevice = () => { |
|
||||
const { darkMode, setDarkMode } = useAppStore(); |
|
||||
|
|
||||
const tabs: TabType[] = [ |
|
||||
{ |
|
||||
label: "Bluetooth", |
|
||||
element: BLE, |
|
||||
disabled: !navigator.bluetooth, |
|
||||
disabledMessage: |
|
||||
"Web Bluetooth is currently only supported by Chromium-based browsers", |
|
||||
disabledLink: |
|
||||
"https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility" |
|
||||
}, |
|
||||
{ |
|
||||
label: "HTTP", |
|
||||
element: HTTP, |
|
||||
disabled: false, |
|
||||
disabledMessage: "Unsuported connection method" |
|
||||
}, |
|
||||
{ |
|
||||
label: "Serial", |
|
||||
element: Serial, |
|
||||
disabled: !navigator.serial, |
|
||||
disabledMessage: |
|
||||
"WebSerial is currently only supported by Chromium based browsers: https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility" |
|
||||
} |
|
||||
]; |
|
||||
|
|
||||
return ( |
|
||||
<div className="m-auto h-96 w-96"> |
|
||||
<TabbedContent tabs={tabs} /> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,118 +0,0 @@ |
|||||
import { Controller, useFieldArray, useForm } from "react-hook-form"; |
|
||||
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"; |
|
||||
import { classValidatorResolver } from "@hookform/resolvers/class-validator"; |
|
||||
|
|
||||
export const Map = (): JSX.Element => { |
|
||||
const { rasterSources, setRasterSources } = useAppStore(); |
|
||||
|
|
||||
const { |
|
||||
register, |
|
||||
handleSubmit, |
|
||||
formState: { errors, isDirty }, |
|
||||
control, |
|
||||
reset |
|
||||
} = useForm<MapValidation>({ |
|
||||
defaultValues: { |
|
||||
// wmsSources: wmsSources ?? [
|
|
||||
// {
|
|
||||
// url: "",
|
|
||||
// tileSize: 512,
|
|
||||
// type: "raster"
|
|
||||
// }
|
|
||||
// ]
|
|
||||
}, |
|
||||
resolver: classValidatorResolver(MapValidation) |
|
||||
}); |
|
||||
|
|
||||
const { fields, append, remove, insert } = useFieldArray({ |
|
||||
control, |
|
||||
name: "rasterSources" |
|
||||
}); |
|
||||
|
|
||||
const onSubmit = handleSubmit((data) => { |
|
||||
setRasterSources(data.rasterSources); |
|
||||
}); |
|
||||
|
|
||||
// useEffect(() => {
|
|
||||
// reset(rasterSources);
|
|
||||
// }, [reset, rasterSources]);
|
|
||||
|
|
||||
return ( |
|
||||
<Form onSubmit={onSubmit}> |
|
||||
<InfoWrapper label="WMS Sources"> |
|
||||
<div className="flex flex-col gap-2"> |
|
||||
{fields.map((field, index) => ( |
|
||||
<div key={field.id} className="flex w-full gap-2"> |
|
||||
<Controller |
|
||||
name={`rasterSources.${index}.enabled`} |
|
||||
control={control} |
|
||||
render={({ field: { value, ...rest } }) => ( |
|
||||
<Toggle checked={value} {...rest} /> |
|
||||
)} |
|
||||
/> |
|
||||
<Input |
|
||||
placeholder="Name" |
|
||||
error={ |
|
||||
errors.rasterSources |
|
||||
? errors.rasterSources[index]?.title?.message |
|
||||
: undefined |
|
||||
} |
|
||||
{...register(`rasterSources.${index}.title`)} |
|
||||
/> |
|
||||
<Input |
|
||||
placeholder="Tile Size" |
|
||||
type="number" |
|
||||
error={ |
|
||||
errors.rasterSources |
|
||||
? errors.rasterSources[index]?.tileSize?.message |
|
||||
: undefined |
|
||||
} |
|
||||
{...register(`rasterSources.${index}.tileSize`, { |
|
||||
valueAsNumber: true |
|
||||
})} |
|
||||
/> |
|
||||
<Input |
|
||||
placeholder="URL" |
|
||||
error={ |
|
||||
errors.rasterSources |
|
||||
? errors.rasterSources[index]?.tiles?.message |
|
||||
: undefined |
|
||||
} |
|
||||
{...register(`rasterSources.${index}.tiles`)} |
|
||||
/> |
|
||||
<IconButton |
|
||||
className="shrink-0" |
|
||||
icon={<TrashIcon className="w-4" />} |
|
||||
onClick={() => { |
|
||||
remove(index); |
|
||||
}} |
|
||||
/> |
|
||||
</div> |
|
||||
))} |
|
||||
<Button |
|
||||
onClick={() => { |
|
||||
append({ |
|
||||
enabled: true, |
|
||||
title: "", |
|
||||
tiles: [ |
|
||||
"https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015" |
|
||||
], |
|
||||
tileSize: 512 |
|
||||
}); |
|
||||
}} |
|
||||
> |
|
||||
New Source |
|
||||
</Button> |
|
||||
</div> |
|
||||
</InfoWrapper> |
|
||||
</Form> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,230 +1,97 @@ |
|||||
import { useEffect } from "react"; |
import type { PositionValidation } from "@app/validation/config/position.js"; |
||||
import { Controller, useForm, useWatch } from "react-hook-form"; |
import { useDevice } from "@core/stores/deviceStore.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"; |
|
||||
import { classValidatorResolver } from "@hookform/resolvers/class-validator"; |
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs"; |
import { Protobuf } from "@meshtastic/meshtasticjs"; |
||||
|
import { DynamicForm } from "@app/components/DynamicForm.js"; |
||||
|
|
||||
export const Position = (): JSX.Element => { |
export const Position = (): JSX.Element => { |
||||
const { config, nodes, hardware, setWorkingConfig } = useDevice(); |
const { config, nodes, hardware, setWorkingConfig } = useDevice(); |
||||
|
|
||||
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum); |
const onSubmit = (data: PositionValidation) => { |
||||
|
|
||||
const { register, handleSubmit, reset, control } = |
|
||||
useForm<PositionValidation>({ |
|
||||
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, |
|
||||
name: "fixedPosition", |
|
||||
defaultValue: false |
|
||||
}); |
|
||||
|
|
||||
useEffect(() => { |
|
||||
reset({ |
|
||||
fixedAlt: myNode?.data.position?.altitude, |
|
||||
fixedLat: (myNode?.data.position?.latitudeI ?? 0) / 1e7, |
|
||||
fixedLng: (myNode?.data.position?.longitudeI ?? 0) / 1e7, |
|
||||
...config.position |
|
||||
}); |
|
||||
}, [reset, config.position, myNode?.data.position]); |
|
||||
|
|
||||
const onSubmit = handleSubmit((data) => { |
|
||||
const { fixedAlt, fixedLat, fixedLng, ...rest } = data; |
|
||||
|
|
||||
const configHasChanged = !Protobuf.Config_PositionConfig.equals( |
|
||||
config.position, |
|
||||
new Protobuf.Config_PositionConfig(rest) |
|
||||
); |
|
||||
|
|
||||
setWorkingConfig( |
setWorkingConfig( |
||||
new Protobuf.Config({ |
new Protobuf.Config({ |
||||
payloadVariant: { |
payloadVariant: { |
||||
case: "position", |
case: "position", |
||||
value: rest |
value: data |
||||
} |
} |
||||
}) |
}) |
||||
); |
); |
||||
|
}; |
||||
// if (connection) {
|
|
||||
// void toast.promise(
|
|
||||
// connection
|
|
||||
// .setPosition(
|
|
||||
// new Protobuf.Position({
|
|
||||
// altitude: fixedAlt,
|
|
||||
// latitudeI: fixedLat * 1e7,
|
|
||||
// longitudeI: fixedLng * 1e7
|
|
||||
// })
|
|
||||
// )
|
|
||||
// .then(() => reset({ ...data })),
|
|
||||
// {
|
|
||||
// loading: "Saving...",
|
|
||||
// success: "Saved Position Config, Restarting Node",
|
|
||||
// error: "No response received"
|
|
||||
// }
|
|
||||
// );
|
|
||||
// if (configHasChanged) {
|
|
||||
// void toast.promise(
|
|
||||
// connection
|
|
||||
// .setConfig(
|
|
||||
// new Protobuf.Config({
|
|
||||
// payloadVariant: {
|
|
||||
// case: "position",
|
|
||||
// value: rest
|
|
||||
// }
|
|
||||
// })
|
|
||||
// )
|
|
||||
// .then(() =>
|
|
||||
// setConfig(
|
|
||||
// new Protobuf.Config({
|
|
||||
// payloadVariant: {
|
|
||||
// case: "position",
|
|
||||
// value: rest
|
|
||||
// }
|
|
||||
// })
|
|
||||
// )
|
|
||||
// ),
|
|
||||
// {
|
|
||||
// loading: "Saving...",
|
|
||||
// success: "Saved Position Config, Restarting Node",
|
|
||||
// error: "No response received"
|
|
||||
// }
|
|
||||
// );
|
|
||||
// }
|
|
||||
// }
|
|
||||
}); |
|
||||
|
|
||||
return ( |
return ( |
||||
<Form onSubmit={onSubmit}> |
<DynamicForm<PositionValidation> |
||||
<Controller |
onSubmit={onSubmit} |
||||
name="gpsEnabled" |
defaultValues={config.position} |
||||
control={control} |
fieldGroups={[ |
||||
render={({ field: { value, ...rest } }) => ( |
{ |
||||
<Toggle |
label: "Position settings", |
||||
label="GPS Enabled" |
description: "Settings for the position module", |
||||
description="Enable the internal GPS module" |
fields: [ |
||||
checked={value} |
{ |
||||
{...rest} |
type: "toggle", |
||||
/> |
name: "positionBroadcastSmartEnabled", |
||||
)} |
label: "Enable Smart Position", |
||||
/> |
description: |
||||
<Controller |
"Only send position when there has been a meaningful change in location" |
||||
name="positionBroadcastSmartEnabled" |
}, |
||||
control={control} |
{ |
||||
render={({ field: { value, ...rest } }) => ( |
type: "toggle", |
||||
<Toggle |
name: "fixedPosition", |
||||
label="Enable Smart Position" |
label: "Fixed Position", |
||||
description="Only send position when there has been a meaningful change in location" |
description: |
||||
checked={value} |
"Don't report GPS position, but a manually-specified one" |
||||
{...rest} |
}, |
||||
/> |
{ |
||||
)} |
type: "toggle", |
||||
/> |
name: "gpsEnabled", |
||||
<Controller |
label: "GPS Enabled", |
||||
name="positionFlags" |
description: "Enable the internal GPS module" |
||||
control={control} |
}, |
||||
render={({ field, fieldState }): JSX.Element => { |
{ |
||||
const { value, onChange } = field; |
type: "multiSelect", |
||||
const { error } = fieldState; |
name: "positionFlags", |
||||
|
label: "Position Flags", |
||||
return ( |
description: "Configuration options for Position messages", |
||||
<BitwiseSelect |
enumValue: Protobuf.Config_PositionConfig_PositionFlags |
||||
label="Position Flags" |
}, |
||||
description="Configuration options for POSITION messages" |
{ |
||||
selected={value} |
type: "number", |
||||
decodeEnun={Protobuf.Config_PositionConfig_PositionFlags} |
name: "rxGpio", |
||||
onChange={onChange} |
label: "Receive Pin", |
||||
/> |
description: "GPS Module RX pin override" |
||||
); |
}, |
||||
}} |
{ |
||||
/> |
type: "number", |
||||
<FormSection title="Fixed Position"> |
name: "txGpio", |
||||
<Controller |
label: "Transmit Pin", |
||||
name="fixedPosition" |
description: "GPS Module TX pin override" |
||||
control={control} |
} |
||||
render={({ field: { value, ...rest } }) => ( |
] |
||||
<Toggle |
}, |
||||
label="Enabled" |
{ |
||||
description="Don't report GPS position, but a manually-specified one" |
label: "Intervals", |
||||
checked={value} |
description: "How often to send position updates", |
||||
{...rest} |
fields: [ |
||||
/> |
{ |
||||
)} |
type: "number", |
||||
/> |
name: "positionBroadcastSecs", |
||||
{fixedPositionEnabled && ( |
label: "Broadcast Interval", |
||||
<> |
description: "How often your position is sent out over the mesh" |
||||
<Input |
}, |
||||
suffix="m" |
{ |
||||
label="Altitude" |
type: "number", |
||||
type="number" |
name: "gpsUpdateInterval", |
||||
disabled={!fixedPositionEnabled} |
label: "GPS Update Interval", |
||||
{...register("fixedAlt", { valueAsNumber: true })} |
description: "How often a GPS fix should be acquired" |
||||
/> |
}, |
||||
<Input |
{ |
||||
suffix="°" |
type: "number", |
||||
label="Latitude" |
name: "gpsAttemptTime", |
||||
type="number" |
label: "Fix Attempt Duration", |
||||
disabled={!fixedPositionEnabled} |
description: "How long the device will try to get a fix for" |
||||
{...register("fixedLat", { valueAsNumber: true })} |
} |
||||
/> |
] |
||||
<Input |
} |
||||
suffix="°" |
]} |
||||
label="Longitude" |
/> |
||||
type="number" |
|
||||
disabled={!fixedPositionEnabled} |
|
||||
{...register("fixedLng", { valueAsNumber: true })} |
|
||||
/> |
|
||||
</> |
|
||||
)} |
|
||||
</FormSection> |
|
||||
<FormSection title="Intervals"> |
|
||||
<Input |
|
||||
suffix="Seconds" |
|
||||
label="Broadcast Interval" |
|
||||
description="How often your position is sent out over the mesh" |
|
||||
type="number" |
|
||||
{...register("positionBroadcastSecs", { valueAsNumber: true })} |
|
||||
/> |
|
||||
<Input |
|
||||
suffix="Seconds" |
|
||||
label="GPS Update Interval" |
|
||||
description="How often a GPS fix should be acquired" |
|
||||
type="number" |
|
||||
{...register("gpsUpdateInterval", { valueAsNumber: true })} |
|
||||
/> |
|
||||
<Input |
|
||||
suffix="Seconds" |
|
||||
label="Fix Attempt Duration" |
|
||||
description="How long the device will try to get a fix for" |
|
||||
type="number" |
|
||||
{...register("gpsAttemptTime", { valueAsNumber: true })} |
|
||||
/> |
|
||||
</FormSection> |
|
||||
<Input |
|
||||
label="RX Pin" |
|
||||
description="GPS Module RX pin override" |
|
||||
type="number" |
|
||||
{...register("rxGpio", { valueAsNumber: true })} |
|
||||
/> |
|
||||
<Input |
|
||||
label="TX Pin" |
|
||||
description="GPS Module TX pin override" |
|
||||
type="number" |
|
||||
{...register("txGpio", { valueAsNumber: true })} |
|
||||
/> |
|
||||
</Form> |
|
||||
); |
); |
||||
}; |
}; |
||||
|
|||||
@ -1,105 +0,0 @@ |
|||||
import { useEffect } from "react"; |
|
||||
import { Controller, useForm } from "react-hook-form"; |
|
||||
import { toast } from "react-hot-toast"; |
|
||||
import { base16 } from "rfc4648"; |
|
||||
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 { classValidatorResolver } from "@hookform/resolvers/class-validator"; |
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs"; |
|
||||
|
|
||||
export const User = (): JSX.Element => { |
|
||||
const { hardware, nodes, connection } = useDevice(); |
|
||||
|
|
||||
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum); |
|
||||
|
|
||||
const { register, handleSubmit, reset, control } = useForm<UserValidation>({ |
|
||||
defaultValues: myNode?.data.user, |
|
||||
resolver: classValidatorResolver(UserValidation) |
|
||||
}); |
|
||||
|
|
||||
useEffect(() => { |
|
||||
reset({ |
|
||||
longName: myNode?.data.user?.longName, |
|
||||
shortName: myNode?.data.user?.shortName, |
|
||||
isLicensed: myNode?.data.user?.isLicensed |
|
||||
}); |
|
||||
}, [reset, myNode]); |
|
||||
|
|
||||
const onSubmit = handleSubmit((data) => { |
|
||||
if (connection && myNode?.data.user) { |
|
||||
void toast.promise( |
|
||||
connection |
|
||||
.setOwner( |
|
||||
new Protobuf.User({ |
|
||||
...myNode.data.user, |
|
||||
...data |
|
||||
}) |
|
||||
) |
|
||||
.then(() => reset({ ...data })), |
|
||||
{ |
|
||||
loading: "Saving...", |
|
||||
success: "Saved User, Restarting Node", |
|
||||
error: "No response received" |
|
||||
} |
|
||||
); |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
return ( |
|
||||
<Form onSubmit={onSubmit}> |
|
||||
<Input |
|
||||
label="Device Name" |
|
||||
description="Personalised name for this device." |
|
||||
{...register("longName")} |
|
||||
/> |
|
||||
<Input |
|
||||
label="Short Name" |
|
||||
description="Shown on small screens." |
|
||||
maxLength={4} |
|
||||
{...register("shortName")} |
|
||||
/> |
|
||||
<Controller |
|
||||
name="isLicensed" |
|
||||
control={control} |
|
||||
render={({ field: { value, ...rest } }) => ( |
|
||||
<Toggle |
|
||||
label="Licenced Operator?" |
|
||||
description="Remove bandwidth restrictions in certain regions (HAM license required)" |
|
||||
checked={value} |
|
||||
{...rest} |
|
||||
/> |
|
||||
)} |
|
||||
/> |
|
||||
<Input |
|
||||
label="Mac Address" |
|
||||
description="Hardware address for this node." |
|
||||
disabled |
|
||||
value={ |
|
||||
base16 |
|
||||
.stringify(myNode?.data.user?.macaddr ?? []) |
|
||||
.match(/.{1,2}/g) |
|
||||
?.join(":") ?? "" |
|
||||
} |
|
||||
/> |
|
||||
<Input |
|
||||
label="Device ID" |
|
||||
disabled |
|
||||
description="Preset unique identifier for this device." |
|
||||
value={myNode?.data.user?.id} |
|
||||
/> |
|
||||
<Select |
|
||||
label="Hardware" |
|
||||
description="Hardware model of this device." |
|
||||
disabled |
|
||||
value={myNode?.data.user?.hwModel} |
|
||||
> |
|
||||
{renderOptions(Protobuf.HardwareModel)} |
|
||||
</Select> |
|
||||
</Form> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,77 +0,0 @@ |
|||||
import { useEffect } from "react"; |
|
||||
|
|
||||
import { useMap } from "react-map-gl"; |
|
||||
|
|
||||
import { useDevice } from "@core/providers/useDevice.js"; |
|
||||
import { |
|
||||
MagnifyingGlassMinusIcon, |
|
||||
MagnifyingGlassPlusIcon, |
|
||||
ShareIcon |
|
||||
} from "@heroicons/react/24/outline"; |
|
||||
import { bbox, lineString } from "@turf/turf"; |
|
||||
|
|
||||
export const MapControlls = (): JSX.Element => { |
|
||||
const { current: map } = useMap(); |
|
||||
const { nodes } = useDevice(); |
|
||||
|
|
||||
const getBBox = () => { |
|
||||
const nodesWithPosition = nodes.filter((n) => n.data.position?.latitudeI); |
|
||||
if (!nodesWithPosition.length) return; |
|
||||
const line = lineString( |
|
||||
nodesWithPosition.map((n) => [ |
|
||||
(n.data.position?.latitudeI ?? 0) / 1e7, |
|
||||
(n.data.position?.longitudeI ?? 0) / 1e7 |
|
||||
]) |
|
||||
); |
|
||||
const bounds = bbox(line); |
|
||||
const center = map?.cameraForBounds( |
|
||||
[ |
|
||||
[bounds[1], bounds[0]], |
|
||||
[bounds[3], bounds[2]] |
|
||||
], |
|
||||
{ padding: { top: 10, bottom: 10, left: 10, right: 10 } } |
|
||||
); |
|
||||
if (center) map?.easeTo(center); |
|
||||
else if (nodesWithPosition.length === 1) |
|
||||
map?.easeTo({ |
|
||||
zoom: 12, |
|
||||
center: [ |
|
||||
(nodesWithPosition[0].data.position?.longitudeI ?? 0) / 1e7, |
|
||||
(nodesWithPosition[0].data.position?.latitudeI ?? 0) / 1e7 |
|
||||
] |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
useEffect(() => { |
|
||||
getBBox(); |
|
||||
}, []); |
|
||||
|
|
||||
return ( |
|
||||
<div className="absolute right-0 top-0 z-10 m-2 "> |
|
||||
<div className="divide-y-2 divide-backgroundSecondary overflow-hidden rounded-md bg-backgroundPrimary text-textSecondary"> |
|
||||
<div |
|
||||
className="hover:bg-orange-200 cursor-pointer p-3 hover:text-accent" |
|
||||
onClick={() => { |
|
||||
map?.zoomIn(); |
|
||||
}} |
|
||||
> |
|
||||
<MagnifyingGlassPlusIcon className="h-4 w-4" /> |
|
||||
</div> |
|
||||
<div |
|
||||
className="hover:bg-orange-200 cursor-pointer p-3 hover:text-accent" |
|
||||
onClick={() => { |
|
||||
map?.zoomOut(); |
|
||||
}} |
|
||||
> |
|
||||
<MagnifyingGlassMinusIcon className="h-4 w-4" /> |
|
||||
</div> |
|
||||
<div |
|
||||
className="hover:bg-orange-200 cursor-pointer p-3 hover:text-accent" |
|
||||
onClick={() => getBBox()} |
|
||||
> |
|
||||
<ShareIcon className="h-4 w-4" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,70 +1,94 @@ |
|||||
import { useDevice } from "@core/providers/useDevice.js"; |
import { useDevice } from "@core/stores/deviceStore.js"; |
||||
import { toMGRS } from "@core/utils/toMGRS.js"; |
import type { Page } from "@core/stores/deviceStore.js"; |
||||
import { BatteryWidget } from "@components/Widgets/BatteryWidget.js"; |
import { |
||||
import { DeviceWidget } from "@components/Widgets/DeviceWidget.js"; |
LucideIcon, |
||||
import { PeersWidget } from "@components/Widgets/PeersWidget.js"; |
MapIcon, |
||||
import { PositionWidget } from "@components/Widgets/PositionWidget.js"; |
MessageSquareIcon, |
||||
import { useAppStore } from "@core/stores/appStore.js"; |
SettingsIcon, |
||||
import { useDeviceStore } from "@core/stores/deviceStore.js"; |
LayersIcon, |
||||
import { CommandLineIcon } from "@heroicons/react/24/outline"; |
UsersIcon, |
||||
import { Types } from "@meshtastic/meshtasticjs"; |
EditIcon, |
||||
import { Input } from "@components/form/Input.js"; |
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"; |
||||
|
|
||||
export const Sidebar = (): JSX.Element => { |
export interface SidebarProps { |
||||
const { removeDevice } = useDeviceStore(); |
children?: React.ReactNode; |
||||
const { connection, hardware, nodes, status, currentMetrics } = useDevice(); |
} |
||||
const { selectedDevice, setSelectedDevice, setCommandPaletteOpen } = |
|
||||
useAppStore(); |
export const Sidebar = ({ children }: SidebarProps): JSX.Element => { |
||||
|
const { hardware, nodes } = useDevice(); |
||||
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum); |
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum); |
||||
|
const { activePage, setActivePage, setDialogOpen } = useDevice(); |
||||
|
|
||||
|
interface NavLink { |
||||
|
name: string; |
||||
|
icon: LucideIcon; |
||||
|
page: Page; |
||||
|
} |
||||
|
|
||||
|
const pages: NavLink[] = [ |
||||
|
{ |
||||
|
name: "Messages", |
||||
|
icon: MessageSquareIcon, |
||||
|
page: "messages" |
||||
|
}, |
||||
|
{ |
||||
|
name: "Map", |
||||
|
icon: MapIcon, |
||||
|
page: "map" |
||||
|
}, |
||||
|
{ |
||||
|
name: "Config", |
||||
|
icon: SettingsIcon, |
||||
|
page: "config" |
||||
|
}, |
||||
|
{ |
||||
|
name: "Channels", |
||||
|
icon: LayersIcon, |
||||
|
page: "channels" |
||||
|
}, |
||||
|
{ |
||||
|
name: "Peers", |
||||
|
icon: UsersIcon, |
||||
|
page: "peers" |
||||
|
} |
||||
|
]; |
||||
|
|
||||
return ( |
return ( |
||||
<div className="bg-slate-50 relative flex w-72 flex-shrink-0 flex-col gap-2 p-2"> |
<div className="min-w-[280px] max-w-min flex-col border-r-[0.5px] border-slate-300 bg-transparent dark:border-slate-700"> |
||||
<DeviceWidget |
<div className="flex justify-between px-8 py-6"> |
||||
name={ |
<div> |
||||
nodes.find((n) => n.data.num === hardware.myNodeNum)?.data.user |
<span className="text-lg font-medium"> |
||||
?.longName ?? "UNK" |
{myNode?.data.user?.shortName ?? "UNK"} |
||||
} |
</span> |
||||
nodeNum={hardware.myNodeNum.toString()} |
<Subtle>{myNode?.data.user?.longName ?? "UNK"}</Subtle> |
||||
disconnected={status === Types.DeviceStatusEnum.DEVICE_DISCONNECTED} |
</div> |
||||
disconnect={() => { |
<button |
||||
void connection?.disconnect(); |
className="transition-all hover:text-accent" |
||||
setSelectedDevice(0); |
onClick={() => setDialogOpen("deviceName", true)} |
||||
removeDevice(selectedDevice ?? 0); |
> |
||||
}} |
<EditIcon size={16} /> |
||||
reconnect={() => { |
</button> |
||||
void connection?.disconnect(); |
</div> |
||||
}} |
|
||||
/> |
|
||||
|
|
||||
<div className="flex flex-grow flex-col gap-3"> |
<SidebarSection label="Navigation"> |
||||
<BatteryWidget |
{pages.map((link) => ( |
||||
batteryLevel={currentMetrics.batteryLevel} |
<SidebarButton |
||||
voltage={currentMetrics.voltage} |
key={link.page} |
||||
/> |
label={link.name} |
||||
<PeersWidget |
icon={link.icon} |
||||
peers={nodes |
onClick={() => { |
||||
.map((n) => n.data) |
setActivePage(link.page); |
||||
.filter((n) => n.num !== hardware.myNodeNum)} |
|
||||
/> |
|
||||
<PositionWidget |
|
||||
grid={toMGRS( |
|
||||
myNode?.data.position?.latitudeI, |
|
||||
myNode?.data.position?.longitudeI |
|
||||
)} |
|
||||
/> |
|
||||
<div className="mt-auto"> |
|
||||
<Input |
|
||||
placeholder={"Search for a command"} |
|
||||
onClick={() => setCommandPaletteOpen(true)} |
|
||||
action={{ |
|
||||
icon: <CommandLineIcon className="w-4" />, |
|
||||
action() { |
|
||||
setCommandPaletteOpen(true); |
|
||||
} |
|
||||
}} |
}} |
||||
|
active={link.page === activePage} |
||||
/> |
/> |
||||
</div> |
))} |
||||
</div> |
</SidebarSection> |
||||
|
{children} |
||||
</div> |
</div> |
||||
); |
); |
||||
}; |
}; |
||||
|
|||||
@ -0,0 +1,42 @@ |
|||||
|
import { LucideIcon, AlignLeftIcon } from "lucide-react"; |
||||
|
|
||||
|
export interface PageLayoutProps { |
||||
|
label: string; |
||||
|
children: React.ReactNode; |
||||
|
actions?: { |
||||
|
icon: LucideIcon; |
||||
|
onClick: () => void; |
||||
|
}[]; |
||||
|
} |
||||
|
|
||||
|
export const PageLayout = ({ |
||||
|
label: title, |
||||
|
actions, |
||||
|
children |
||||
|
}: PageLayoutProps): JSX.Element => { |
||||
|
return ( |
||||
|
<div className="relative flex h-full w-full flex-col"> |
||||
|
<div className="flex h-14 shrink-0 border-b-[0.5px] border-slate-300 dark:border-slate-700 md:h-16 md:px-4"> |
||||
|
<button className="pl-4 transition-all hover:text-accent md:hidden"> |
||||
|
<AlignLeftIcon /> |
||||
|
</button> |
||||
|
<div className="flex flex-1 items-center justify-between px-4 md:px-0"> |
||||
|
<div className="flex w-full items-center"> |
||||
|
<span className="w-full text-lg font-medium">{title}</span> |
||||
|
<div className="flex justify-end space-x-4"> |
||||
|
{actions?.map((action) => ( |
||||
|
<button |
||||
|
className="transition-all hover:text-accent" |
||||
|
onClick={action.onClick} |
||||
|
> |
||||
|
<action.icon /> |
||||
|
</button> |
||||
|
))} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
{children} |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
@ -0,0 +1,53 @@ |
|||||
|
import * as React from "react"; |
||||
|
import { VariantProps, cva } from "class-variance-authority"; |
||||
|
|
||||
|
import { cn } from "@core/utils/cn.js"; |
||||
|
|
||||
|
const buttonVariants = cva( |
||||
|
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-800", |
||||
|
{ |
||||
|
variants: { |
||||
|
variant: { |
||||
|
default: |
||||
|
"bg-slate-900 text-white hover:bg-slate-700 dark:bg-slate-50 dark:text-slate-900", |
||||
|
destructive: |
||||
|
"bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600", |
||||
|
outline: |
||||
|
"bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-100", |
||||
|
subtle: |
||||
|
"bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-100", |
||||
|
ghost: |
||||
|
"bg-transparent hover:bg-slate-100 dark:hover:bg-slate-800 dark:text-slate-100 dark:hover:text-slate-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent", |
||||
|
link: "bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover:bg-transparent" |
||||
|
}, |
||||
|
size: { |
||||
|
default: "h-10 py-2 px-4", |
||||
|
sm: "h-9 px-2 rounded-md", |
||||
|
lg: "h-11 px-8 rounded-md" |
||||
|
} |
||||
|
}, |
||||
|
defaultVariants: { |
||||
|
variant: "default", |
||||
|
size: "default" |
||||
|
} |
||||
|
} |
||||
|
); |
||||
|
|
||||
|
export interface ButtonProps |
||||
|
extends React.ButtonHTMLAttributes<HTMLButtonElement>, |
||||
|
VariantProps<typeof buttonVariants> {} |
||||
|
|
||||
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( |
||||
|
({ className, variant, size, ...props }, ref) => { |
||||
|
return ( |
||||
|
<button |
||||
|
className={cn(buttonVariants({ variant, size, className }))} |
||||
|
ref={ref} |
||||
|
{...props} |
||||
|
/> |
||||
|
); |
||||
|
} |
||||
|
); |
||||
|
Button.displayName = "Button"; |
||||
|
|
||||
|
export { Button, buttonVariants }; |
||||
@ -0,0 +1,156 @@ |
|||||
|
import * as React from "react"; |
||||
|
import type { DialogProps } from "@radix-ui/react-dialog"; |
||||
|
import { Command as CommandPrimitive } from "cmdk"; |
||||
|
import { Search } from "lucide-react"; |
||||
|
|
||||
|
import { cn } from "@core/utils/cn.js"; |
||||
|
import { Dialog, DialogContent } from "@components/UI/Dialog.js"; |
||||
|
|
||||
|
const Command = React.forwardRef< |
||||
|
React.ElementRef<typeof CommandPrimitive>, |
||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<CommandPrimitive |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"flex h-full w-full flex-col overflow-hidden rounded-lg bg-white dark:bg-slate-800", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
Command.displayName = CommandPrimitive.displayName; |
||||
|
|
||||
|
interface CommandDialogProps extends DialogProps {} |
||||
|
|
||||
|
const CommandDialog = ({ children, ...props }: CommandDialogProps) => { |
||||
|
return ( |
||||
|
<Dialog {...props}> |
||||
|
<DialogContent className="overflow-hidden p-0 shadow-2xl [&_[dialog-overlay]]:bg-red-100"> |
||||
|
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-slate-500 [&_[cmdk-group]]:px-2 [&_[cmdk-group]_+[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"> |
||||
|
{children} |
||||
|
</Command> |
||||
|
</DialogContent> |
||||
|
</Dialog> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
const CommandInput = React.forwardRef< |
||||
|
React.ElementRef<typeof CommandPrimitive.Input>, |
||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<div |
||||
|
className="flex items-center border-b border-b-slate-100 px-4 dark:border-b-slate-700" |
||||
|
cmdk-input-wrapper="" |
||||
|
> |
||||
|
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" /> |
||||
|
<CommandPrimitive.Input |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-slate-400 disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-50", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
</div> |
||||
|
)); |
||||
|
|
||||
|
CommandInput.displayName = CommandPrimitive.Input.displayName; |
||||
|
|
||||
|
const CommandList = React.forwardRef< |
||||
|
React.ElementRef<typeof CommandPrimitive.List>, |
||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<CommandPrimitive.List |
||||
|
ref={ref} |
||||
|
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
|
||||
|
CommandList.displayName = CommandPrimitive.List.displayName; |
||||
|
|
||||
|
const CommandEmpty = React.forwardRef< |
||||
|
React.ElementRef<typeof CommandPrimitive.Empty>, |
||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> |
||||
|
>((props, ref) => ( |
||||
|
<CommandPrimitive.Empty |
||||
|
ref={ref} |
||||
|
className="py-6 text-center text-sm" |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
|
||||
|
CommandEmpty.displayName = CommandPrimitive.Empty.displayName; |
||||
|
|
||||
|
const CommandGroup = React.forwardRef< |
||||
|
React.ElementRef<typeof CommandPrimitive.Group>, |
||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<CommandPrimitive.Group |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"overflow-hidden py-3 px-2 text-slate-700 dark:text-slate-400 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-slate-900 [&_[cmdk-group-heading]]:dark:text-slate-300", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
|
||||
|
CommandGroup.displayName = CommandPrimitive.Group.displayName; |
||||
|
|
||||
|
const CommandSeparator = React.forwardRef< |
||||
|
React.ElementRef<typeof CommandPrimitive.Separator>, |
||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<CommandPrimitive.Separator |
||||
|
ref={ref} |
||||
|
className={cn("-mx-1 h-px bg-slate-100 dark:bg-slate-700", className)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
CommandSeparator.displayName = CommandPrimitive.Separator.displayName; |
||||
|
|
||||
|
const CommandItem = React.forwardRef< |
||||
|
React.ElementRef<typeof CommandPrimitive.Item>, |
||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<CommandPrimitive.Item |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"relative flex cursor-default select-none items-center rounded-md py-1.5 px-2 text-sm font-medium outline-none aria-selected:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:aria-selected:bg-slate-700", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
|
||||
|
CommandItem.displayName = CommandPrimitive.Item.displayName; |
||||
|
|
||||
|
const CommandShortcut = ({ |
||||
|
className, |
||||
|
...props |
||||
|
}: React.HTMLAttributes<HTMLSpanElement>) => { |
||||
|
return ( |
||||
|
<span |
||||
|
className={cn( |
||||
|
"ml-auto text-xs tracking-widest text-slate-500", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
); |
||||
|
}; |
||||
|
CommandShortcut.displayName = "CommandShortcut"; |
||||
|
|
||||
|
export { |
||||
|
Command, |
||||
|
CommandDialog, |
||||
|
CommandInput, |
||||
|
CommandList, |
||||
|
CommandEmpty, |
||||
|
CommandGroup, |
||||
|
CommandItem, |
||||
|
CommandShortcut, |
||||
|
CommandSeparator |
||||
|
}; |
||||
@ -0,0 +1,128 @@ |
|||||
|
import * as React from "react"; |
||||
|
import * as DialogPrimitive from "@radix-ui/react-dialog"; |
||||
|
import { X } from "lucide-react"; |
||||
|
|
||||
|
import { cn } from "@core/utils/cn.js"; |
||||
|
|
||||
|
const Dialog = DialogPrimitive.Root; |
||||
|
|
||||
|
const DialogTrigger = DialogPrimitive.Trigger; |
||||
|
|
||||
|
const DialogPortal = ({ |
||||
|
className, |
||||
|
children, |
||||
|
...props |
||||
|
}: DialogPrimitive.DialogPortalProps) => ( |
||||
|
<DialogPrimitive.Portal className={cn(className)} {...props}> |
||||
|
<div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center"> |
||||
|
{children} |
||||
|
</div> |
||||
|
</DialogPrimitive.Portal> |
||||
|
); |
||||
|
DialogPortal.displayName = DialogPrimitive.Portal.displayName; |
||||
|
|
||||
|
const DialogOverlay = React.forwardRef< |
||||
|
React.ElementRef<typeof DialogPrimitive.Overlay>, |
||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> |
||||
|
>(({ className, children, ...props }, ref) => ( |
||||
|
<DialogPrimitive.Overlay |
||||
|
className={cn( |
||||
|
"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-opacity animate-in fade-in", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
ref={ref} |
||||
|
/> |
||||
|
)); |
||||
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; |
||||
|
|
||||
|
const DialogContent = React.forwardRef< |
||||
|
React.ElementRef<typeof DialogPrimitive.Content>, |
||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> |
||||
|
>(({ className, children, ...props }, ref) => ( |
||||
|
<DialogPortal> |
||||
|
<DialogOverlay /> |
||||
|
<DialogPrimitive.Content |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"fixed z-50 grid w-full scale-100 gap-4 bg-white p-6 opacity-100 animate-in fade-in-90 slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0", |
||||
|
"dark:bg-slate-900", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
> |
||||
|
{children} |
||||
|
<DialogPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=open]:bg-slate-800"> |
||||
|
<X className="h-4 w-4" /> |
||||
|
<span className="sr-only">Close</span> |
||||
|
</DialogPrimitive.Close> |
||||
|
</DialogPrimitive.Content> |
||||
|
</DialogPortal> |
||||
|
)); |
||||
|
DialogContent.displayName = DialogPrimitive.Content.displayName; |
||||
|
|
||||
|
const DialogHeader = ({ |
||||
|
className, |
||||
|
...props |
||||
|
}: React.HTMLAttributes<HTMLDivElement>) => ( |
||||
|
<div |
||||
|
className={cn( |
||||
|
"flex flex-col space-y-2 text-center sm:text-left", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
); |
||||
|
DialogHeader.displayName = "DialogHeader"; |
||||
|
|
||||
|
const DialogFooter = ({ |
||||
|
className, |
||||
|
...props |
||||
|
}: React.HTMLAttributes<HTMLDivElement>) => ( |
||||
|
<div |
||||
|
className={cn( |
||||
|
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
); |
||||
|
DialogFooter.displayName = "DialogFooter"; |
||||
|
|
||||
|
const DialogTitle = React.forwardRef< |
||||
|
React.ElementRef<typeof DialogPrimitive.Title>, |
||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<DialogPrimitive.Title |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"text-lg font-semibold text-slate-900", |
||||
|
"dark:text-slate-50", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
DialogTitle.displayName = DialogPrimitive.Title.displayName; |
||||
|
|
||||
|
const DialogDescription = React.forwardRef< |
||||
|
React.ElementRef<typeof DialogPrimitive.Description>, |
||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<DialogPrimitive.Description |
||||
|
ref={ref} |
||||
|
className={cn("text-sm text-slate-500", "dark:text-slate-400", className)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
DialogDescription.displayName = DialogPrimitive.Description.displayName; |
||||
|
|
||||
|
export { |
||||
|
Dialog, |
||||
|
DialogTrigger, |
||||
|
DialogContent, |
||||
|
DialogHeader, |
||||
|
DialogFooter, |
||||
|
DialogTitle, |
||||
|
DialogDescription |
||||
|
}; |
||||
@ -0,0 +1,24 @@ |
|||||
|
import * as React from "react"; |
||||
|
|
||||
|
import { cn } from "@core/utils/cn.js"; |
||||
|
|
||||
|
export interface InputProps |
||||
|
extends React.InputHTMLAttributes<HTMLInputElement> {} |
||||
|
|
||||
|
const Input = React.forwardRef<HTMLInputElement, InputProps>( |
||||
|
({ className, ...props }, ref) => { |
||||
|
return ( |
||||
|
<input |
||||
|
className={cn( |
||||
|
"flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900", |
||||
|
className |
||||
|
)} |
||||
|
ref={ref} |
||||
|
{...props} |
||||
|
/> |
||||
|
); |
||||
|
} |
||||
|
); |
||||
|
Input.displayName = "Input"; |
||||
|
|
||||
|
export { Input }; |
||||
@ -0,0 +1,21 @@ |
|||||
|
import * as React from "react"; |
||||
|
import * as LabelPrimitive from "@radix-ui/react-label"; |
||||
|
|
||||
|
import { cn } from "@core/utils/cn.js"; |
||||
|
|
||||
|
const Label = React.forwardRef< |
||||
|
React.ElementRef<typeof LabelPrimitive.Root>, |
||||
|
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<LabelPrimitive.Root |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
Label.displayName = LabelPrimitive.Root.displayName; |
||||
|
|
||||
|
export { Label }; |
||||
@ -0,0 +1,234 @@ |
|||||
|
import * as React from "react"; |
||||
|
import * as MenubarPrimitive from "@radix-ui/react-menubar"; |
||||
|
import { Check, ChevronRight, Circle } from "lucide-react"; |
||||
|
|
||||
|
import { cn } from "@core/utils/cn.js"; |
||||
|
|
||||
|
const MenubarMenu = MenubarPrimitive.Menu; |
||||
|
|
||||
|
const MenubarGroup = MenubarPrimitive.Group; |
||||
|
|
||||
|
const MenubarPortal = MenubarPrimitive.Portal; |
||||
|
|
||||
|
const MenubarSub = MenubarPrimitive.Sub; |
||||
|
|
||||
|
const MenubarRadioGroup = MenubarPrimitive.RadioGroup; |
||||
|
|
||||
|
const Menubar = React.forwardRef< |
||||
|
React.ElementRef<typeof MenubarPrimitive.Root>, |
||||
|
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<MenubarPrimitive.Root |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"flex h-10 items-center space-x-1 rounded-md border border-slate-300 bg-white p-1 dark:border-slate-700 dark:bg-slate-800", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
Menubar.displayName = MenubarPrimitive.Root.displayName; |
||||
|
|
||||
|
const MenubarTrigger = React.forwardRef< |
||||
|
React.ElementRef<typeof MenubarPrimitive.Trigger>, |
||||
|
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<MenubarPrimitive.Trigger |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"flex cursor-default select-none items-center rounded-[0.2rem] py-1.5 px-3 text-sm font-medium outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-700 dark:data-[state=open]:bg-slate-700", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName; |
||||
|
|
||||
|
const MenubarSubTrigger = React.forwardRef< |
||||
|
React.ElementRef<typeof MenubarPrimitive.SubTrigger>, |
||||
|
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & { |
||||
|
inset?: boolean; |
||||
|
} |
||||
|
>(({ className, inset, children, ...props }, ref) => ( |
||||
|
<MenubarPrimitive.SubTrigger |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"flex cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm font-medium outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-700 dark:data-[state=open]:bg-slate-700", |
||||
|
inset && "pl-8", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
> |
||||
|
{children} |
||||
|
<ChevronRight className="ml-auto h-4 w-4" /> |
||||
|
</MenubarPrimitive.SubTrigger> |
||||
|
)); |
||||
|
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName; |
||||
|
|
||||
|
const MenubarSubContent = React.forwardRef< |
||||
|
React.ElementRef<typeof MenubarPrimitive.SubContent>, |
||||
|
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<MenubarPrimitive.SubContent |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 shadow-md animate-in slide-in-from-left-1 dark:border-slate-700 dark:bg-slate-800", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName; |
||||
|
|
||||
|
const MenubarContent = React.forwardRef< |
||||
|
React.ElementRef<typeof MenubarPrimitive.Content>, |
||||
|
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content> |
||||
|
>( |
||||
|
( |
||||
|
{ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, |
||||
|
ref |
||||
|
) => ( |
||||
|
<MenubarPrimitive.Portal> |
||||
|
<MenubarPrimitive.Content |
||||
|
ref={ref} |
||||
|
align={align} |
||||
|
alignOffset={alignOffset} |
||||
|
sideOffset={sideOffset} |
||||
|
className={cn( |
||||
|
"z-50 min-w-[12rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md animate-in slide-in-from-top-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
</MenubarPrimitive.Portal> |
||||
|
) |
||||
|
); |
||||
|
MenubarContent.displayName = MenubarPrimitive.Content.displayName; |
||||
|
|
||||
|
const MenubarItem = React.forwardRef< |
||||
|
React.ElementRef<typeof MenubarPrimitive.Item>, |
||||
|
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & { |
||||
|
inset?: boolean; |
||||
|
} |
||||
|
>(({ className, inset, ...props }, ref) => ( |
||||
|
<MenubarPrimitive.Item |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700", |
||||
|
inset && "pl-8", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
MenubarItem.displayName = MenubarPrimitive.Item.displayName; |
||||
|
|
||||
|
const MenubarCheckboxItem = React.forwardRef< |
||||
|
React.ElementRef<typeof MenubarPrimitive.CheckboxItem>, |
||||
|
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem> |
||||
|
>(({ className, children, checked, ...props }, ref) => ( |
||||
|
<MenubarPrimitive.CheckboxItem |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700", |
||||
|
className |
||||
|
)} |
||||
|
checked={checked} |
||||
|
{...props} |
||||
|
> |
||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> |
||||
|
<MenubarPrimitive.ItemIndicator> |
||||
|
<Check className="h-4 w-4" /> |
||||
|
</MenubarPrimitive.ItemIndicator> |
||||
|
</span> |
||||
|
{children} |
||||
|
</MenubarPrimitive.CheckboxItem> |
||||
|
)); |
||||
|
MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName; |
||||
|
|
||||
|
const MenubarRadioItem = React.forwardRef< |
||||
|
React.ElementRef<typeof MenubarPrimitive.RadioItem>, |
||||
|
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem> |
||||
|
>(({ className, children, ...props }, ref) => ( |
||||
|
<MenubarPrimitive.RadioItem |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
> |
||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> |
||||
|
<MenubarPrimitive.ItemIndicator> |
||||
|
<Circle className="h-2 w-2 fill-current" /> |
||||
|
</MenubarPrimitive.ItemIndicator> |
||||
|
</span> |
||||
|
{children} |
||||
|
</MenubarPrimitive.RadioItem> |
||||
|
)); |
||||
|
MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName; |
||||
|
|
||||
|
const MenubarLabel = React.forwardRef< |
||||
|
React.ElementRef<typeof MenubarPrimitive.Label>, |
||||
|
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & { |
||||
|
inset?: boolean; |
||||
|
} |
||||
|
>(({ className, inset, ...props }, ref) => ( |
||||
|
<MenubarPrimitive.Label |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"px-2 py-1.5 text-sm font-semibold text-slate-900 dark:text-slate-300", |
||||
|
inset && "pl-8", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
MenubarLabel.displayName = MenubarPrimitive.Label.displayName; |
||||
|
|
||||
|
const MenubarSeparator = React.forwardRef< |
||||
|
React.ElementRef<typeof MenubarPrimitive.Separator>, |
||||
|
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<MenubarPrimitive.Separator |
||||
|
ref={ref} |
||||
|
className={cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-700", className)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName; |
||||
|
|
||||
|
const MenubarShortcut = ({ |
||||
|
className, |
||||
|
...props |
||||
|
}: React.HTMLAttributes<HTMLSpanElement>) => { |
||||
|
return ( |
||||
|
<span |
||||
|
className={cn( |
||||
|
"ml-auto text-xs tracking-widest text-slate-500", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
); |
||||
|
}; |
||||
|
MenubarShortcut.displayname = "MenubarShortcut"; |
||||
|
|
||||
|
export { |
||||
|
Menubar, |
||||
|
MenubarMenu, |
||||
|
MenubarTrigger, |
||||
|
MenubarContent, |
||||
|
MenubarItem, |
||||
|
MenubarSeparator, |
||||
|
MenubarLabel, |
||||
|
MenubarCheckboxItem, |
||||
|
MenubarRadioGroup, |
||||
|
MenubarRadioItem, |
||||
|
MenubarPortal, |
||||
|
MenubarSubContent, |
||||
|
MenubarSubTrigger, |
||||
|
MenubarGroup, |
||||
|
MenubarSub, |
||||
|
MenubarShortcut |
||||
|
}; |
||||
@ -0,0 +1,29 @@ |
|||||
|
import * as React from "react"; |
||||
|
import * as PopoverPrimitive from "@radix-ui/react-popover"; |
||||
|
|
||||
|
import { cn } from "@core/utils/cn.js"; |
||||
|
|
||||
|
const Popover = PopoverPrimitive.Root; |
||||
|
|
||||
|
const PopoverTrigger = PopoverPrimitive.Trigger; |
||||
|
|
||||
|
const PopoverContent = React.forwardRef< |
||||
|
React.ElementRef<typeof PopoverPrimitive.Content>, |
||||
|
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> |
||||
|
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( |
||||
|
<PopoverPrimitive.Portal> |
||||
|
<PopoverPrimitive.Content |
||||
|
ref={ref} |
||||
|
align={align} |
||||
|
sideOffset={sideOffset} |
||||
|
className={cn( |
||||
|
"z-50 w-72 rounded-md border border-slate-100 bg-white p-4 shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-800", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
</PopoverPrimitive.Portal> |
||||
|
)); |
||||
|
PopoverContent.displayName = PopoverPrimitive.Content.displayName; |
||||
|
|
||||
|
export { Popover, PopoverTrigger, PopoverContent }; |
||||
@ -0,0 +1,111 @@ |
|||||
|
import * as React from "react"; |
||||
|
import * as SelectPrimitive from "@radix-ui/react-select"; |
||||
|
import { Check, ChevronDown } from "lucide-react"; |
||||
|
|
||||
|
import { cn } from "@core/utils/cn.js"; |
||||
|
|
||||
|
const Select = SelectPrimitive.Root; |
||||
|
|
||||
|
const SelectGroup = SelectPrimitive.Group; |
||||
|
|
||||
|
const SelectValue = SelectPrimitive.Value; |
||||
|
|
||||
|
const SelectTrigger = React.forwardRef< |
||||
|
React.ElementRef<typeof SelectPrimitive.Trigger>, |
||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> |
||||
|
>(({ className, children, ...props }, ref) => ( |
||||
|
<SelectPrimitive.Trigger |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"border-slate-300 placeholder:text-slate-400 focus:ring-slate-400 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 flex h-10 w-full items-center justify-between rounded-md border bg-transparent py-2 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
> |
||||
|
{children} |
||||
|
<ChevronDown className="h-4 w-4 opacity-50" /> |
||||
|
</SelectPrimitive.Trigger> |
||||
|
)); |
||||
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName; |
||||
|
|
||||
|
const SelectContent = React.forwardRef< |
||||
|
React.ElementRef<typeof SelectPrimitive.Content>, |
||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> |
||||
|
>(({ className, children, ...props }, ref) => ( |
||||
|
<SelectPrimitive.Portal> |
||||
|
<SelectPrimitive.Content |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"border-slate-100 bg-white text-slate-700 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400 relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md animate-in fade-in-80", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
> |
||||
|
<SelectPrimitive.Viewport className="p-1"> |
||||
|
{children} |
||||
|
</SelectPrimitive.Viewport> |
||||
|
</SelectPrimitive.Content> |
||||
|
</SelectPrimitive.Portal> |
||||
|
)); |
||||
|
SelectContent.displayName = SelectPrimitive.Content.displayName; |
||||
|
|
||||
|
const SelectLabel = React.forwardRef< |
||||
|
React.ElementRef<typeof SelectPrimitive.Label>, |
||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<SelectPrimitive.Label |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"text-slate-900 dark:text-slate-300 py-1.5 pr-2 pl-8 text-sm font-semibold", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
SelectLabel.displayName = SelectPrimitive.Label.displayName; |
||||
|
|
||||
|
const SelectItem = React.forwardRef< |
||||
|
React.ElementRef<typeof SelectPrimitive.Item>, |
||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> |
||||
|
>(({ className, children, ...props }, ref) => ( |
||||
|
<SelectPrimitive.Item |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"focus:bg-slate-100 dark:focus:bg-slate-700 relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm font-medium outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
> |
||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> |
||||
|
<SelectPrimitive.ItemIndicator> |
||||
|
<Check className="h-4 w-4" /> |
||||
|
</SelectPrimitive.ItemIndicator> |
||||
|
</span> |
||||
|
|
||||
|
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText> |
||||
|
</SelectPrimitive.Item> |
||||
|
)); |
||||
|
SelectItem.displayName = SelectPrimitive.Item.displayName; |
||||
|
|
||||
|
const SelectSeparator = React.forwardRef< |
||||
|
React.ElementRef<typeof SelectPrimitive.Separator>, |
||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<SelectPrimitive.Separator |
||||
|
ref={ref} |
||||
|
className={cn("bg-slate-100 dark:bg-slate-700 -mx-1 my-1 h-px", className)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
SelectSeparator.displayName = SelectPrimitive.Separator.displayName; |
||||
|
|
||||
|
export { |
||||
|
Select, |
||||
|
SelectGroup, |
||||
|
SelectValue, |
||||
|
SelectTrigger, |
||||
|
SelectContent, |
||||
|
SelectLabel, |
||||
|
SelectItem, |
||||
|
SelectSeparator |
||||
|
}; |
||||
@ -0,0 +1,29 @@ |
|||||
|
import * as React from "react"; |
||||
|
import * as SeparatorPrimitive from "@radix-ui/react-separator"; |
||||
|
|
||||
|
import { cn } from "@core/utils/cn.js"; |
||||
|
|
||||
|
const Separator = React.forwardRef< |
||||
|
React.ElementRef<typeof SeparatorPrimitive.Root>, |
||||
|
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> |
||||
|
>( |
||||
|
( |
||||
|
{ className, orientation = "horizontal", decorative = true, ...props }, |
||||
|
ref |
||||
|
) => ( |
||||
|
<SeparatorPrimitive.Root |
||||
|
ref={ref} |
||||
|
decorative={decorative} |
||||
|
orientation={orientation} |
||||
|
className={cn( |
||||
|
"bg-slate-200 dark:bg-slate-700", |
||||
|
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
) |
||||
|
); |
||||
|
Separator.displayName = SeparatorPrimitive.Root.displayName; |
||||
|
|
||||
|
export { Separator }; |
||||
@ -0,0 +1,17 @@ |
|||||
|
import { H4 } from "../Typography/H4.js"; |
||||
|
|
||||
|
export interface SidebarSectionProps { |
||||
|
label: string; |
||||
|
subheader?: string; |
||||
|
children: React.ReactNode; |
||||
|
} |
||||
|
|
||||
|
export const SidebarSection = ({ |
||||
|
label: title, |
||||
|
children |
||||
|
}: SidebarSectionProps): JSX.Element => ( |
||||
|
<div className="px-4 py-2"> |
||||
|
<H4 className="mb-2 ml-2">{title}</H4> |
||||
|
<div className="space-y-1">{children}</div> |
||||
|
</div> |
||||
|
); |
||||
@ -0,0 +1,29 @@ |
|||||
|
import type { LucideIcon } from "lucide-react"; |
||||
|
import { Button } from "../Button.js"; |
||||
|
|
||||
|
export interface SidebarButtonProps { |
||||
|
label: string; |
||||
|
active?: boolean; |
||||
|
icon?: LucideIcon; |
||||
|
element?: JSX.Element; |
||||
|
onClick?: () => void; |
||||
|
} |
||||
|
|
||||
|
export const SidebarButton = ({ |
||||
|
label, |
||||
|
active, |
||||
|
icon: Icon, |
||||
|
element, |
||||
|
onClick |
||||
|
}: SidebarButtonProps): JSX.Element => ( |
||||
|
<Button |
||||
|
onClick={onClick} |
||||
|
variant={active ? "subtle" : "ghost"} |
||||
|
size="sm" |
||||
|
className="w-full justify-start gap-2" |
||||
|
> |
||||
|
{Icon && <Icon size={16} />} |
||||
|
{element && element} |
||||
|
{label} |
||||
|
</Button> |
||||
|
); |
||||
@ -0,0 +1,27 @@ |
|||||
|
import * as React from "react"; |
||||
|
import * as SwitchPrimitives from "@radix-ui/react-switch"; |
||||
|
|
||||
|
import { cn } from "@core/utils/cn.js"; |
||||
|
|
||||
|
const Switch = React.forwardRef< |
||||
|
React.ElementRef<typeof SwitchPrimitives.Root>, |
||||
|
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<SwitchPrimitives.Root |
||||
|
className={cn( |
||||
|
"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-slate-900 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=unchecked]:bg-slate-700 dark:data-[state=checked]:bg-slate-400", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
ref={ref} |
||||
|
> |
||||
|
<SwitchPrimitives.Thumb |
||||
|
className={cn( |
||||
|
"pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-5" |
||||
|
)} |
||||
|
/> |
||||
|
</SwitchPrimitives.Root> |
||||
|
)); |
||||
|
Switch.displayName = SwitchPrimitives.Root.displayName; |
||||
|
|
||||
|
export { Switch }; |
||||
@ -0,0 +1,53 @@ |
|||||
|
import * as React from "react"; |
||||
|
import * as TabsPrimitive from "@radix-ui/react-tabs"; |
||||
|
|
||||
|
import { cn } from "@core/utils/cn.js"; |
||||
|
|
||||
|
const Tabs = TabsPrimitive.Root; |
||||
|
|
||||
|
const TabsList = React.forwardRef< |
||||
|
React.ElementRef<typeof TabsPrimitive.List>, |
||||
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<TabsPrimitive.List |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"inline-flex items-center justify-center rounded-md bg-slate-100 p-1 dark:bg-slate-800", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
TabsList.displayName = TabsPrimitive.List.displayName; |
||||
|
|
||||
|
const TabsTrigger = React.forwardRef< |
||||
|
React.ElementRef<typeof TabsPrimitive.Trigger>, |
||||
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<TabsPrimitive.Trigger |
||||
|
className={cn( |
||||
|
"inline-flex min-w-[100px] items-center justify-center rounded-[0.185rem] px-3 py-1.5 text-sm font-medium text-slate-700 transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm dark:text-slate-200 dark:data-[state=active]:bg-slate-900 dark:data-[state=active]:text-slate-100", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
ref={ref} |
||||
|
/> |
||||
|
)); |
||||
|
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName; |
||||
|
|
||||
|
const TabsContent = React.forwardRef< |
||||
|
React.ElementRef<typeof TabsPrimitive.Content>, |
||||
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<TabsPrimitive.Content |
||||
|
className={cn( |
||||
|
"mt-2 rounded-md border border-slate-200 p-6 dark:border-slate-700", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
ref={ref} |
||||
|
/> |
||||
|
)); |
||||
|
TabsContent.displayName = TabsPrimitive.Content.displayName; |
||||
|
|
||||
|
export { Tabs, TabsList, TabsTrigger, TabsContent }; |
||||
@ -0,0 +1,128 @@ |
|||||
|
import * as React from "react"; |
||||
|
import * as ToastPrimitives from "@radix-ui/react-toast"; |
||||
|
import { VariantProps, cva } from "class-variance-authority"; |
||||
|
import { X } from "lucide-react"; |
||||
|
|
||||
|
import { cn } from "@core/utils/cn.js"; |
||||
|
|
||||
|
const ToastProvider = ToastPrimitives.Provider; |
||||
|
|
||||
|
const ToastViewport = React.forwardRef< |
||||
|
React.ElementRef<typeof ToastPrimitives.Viewport>, |
||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<ToastPrimitives.Viewport |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"fixed top-0 z-50 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:bottom-0 sm:right-0 sm:flex-col md:max-w-[420px]", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
ToastViewport.displayName = ToastPrimitives.Viewport.displayName; |
||||
|
|
||||
|
const toastVariants = cva( |
||||
|
"data-[swipe=move]:transition-none grow-1 group relative pointer-events-auto flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full mt-4 data-[state=closed]:slide-out-to-right-full dark:border-slate-700 last:mt-0 sm:last:mt-4", |
||||
|
{ |
||||
|
variants: { |
||||
|
variant: { |
||||
|
default: |
||||
|
"bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700", |
||||
|
destructive: |
||||
|
"group destructive bg-red-600 text-white border-red-600 dark:border-red-600" |
||||
|
} |
||||
|
}, |
||||
|
defaultVariants: { |
||||
|
variant: "default" |
||||
|
} |
||||
|
} |
||||
|
); |
||||
|
|
||||
|
const Toast = React.forwardRef< |
||||
|
React.ElementRef<typeof ToastPrimitives.Root>, |
||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & |
||||
|
VariantProps<typeof toastVariants> |
||||
|
>(({ className, variant, ...props }, ref) => { |
||||
|
return ( |
||||
|
<ToastPrimitives.Root |
||||
|
ref={ref} |
||||
|
className={cn(toastVariants({ variant }), className)} |
||||
|
{...props} |
||||
|
/> |
||||
|
); |
||||
|
}); |
||||
|
Toast.displayName = ToastPrimitives.Root.displayName; |
||||
|
|
||||
|
const ToastAction = React.forwardRef< |
||||
|
React.ElementRef<typeof ToastPrimitives.Action>, |
||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<ToastPrimitives.Action |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-slate-200 bg-transparent px-3 text-sm font-medium transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-red-100 group-[.destructive]:hover:border-slate-50 group-[.destructive]:hover:bg-red-100 group-[.destructive]:hover:text-red-600 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-slate-700 dark:hover:text-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=open]:bg-slate-800", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
ToastAction.displayName = ToastPrimitives.Action.displayName; |
||||
|
|
||||
|
const ToastClose = React.forwardRef< |
||||
|
React.ElementRef<typeof ToastPrimitives.Close>, |
||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<ToastPrimitives.Close |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
"absolute top-2 right-2 rounded-md p-1 text-slate-500 opacity-0 transition-opacity hover:text-slate-900 focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:hover:text-slate-50", |
||||
|
className |
||||
|
)} |
||||
|
toast-close="" |
||||
|
{...props} |
||||
|
> |
||||
|
<X className="h-4 w-4" /> |
||||
|
</ToastPrimitives.Close> |
||||
|
)); |
||||
|
ToastClose.displayName = ToastPrimitives.Close.displayName; |
||||
|
|
||||
|
const ToastTitle = React.forwardRef< |
||||
|
React.ElementRef<typeof ToastPrimitives.Title>, |
||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<ToastPrimitives.Title |
||||
|
ref={ref} |
||||
|
className={cn("text-sm font-semibold", className)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
ToastTitle.displayName = ToastPrimitives.Title.displayName; |
||||
|
|
||||
|
const ToastDescription = React.forwardRef< |
||||
|
React.ElementRef<typeof ToastPrimitives.Description>, |
||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description> |
||||
|
>(({ className, ...props }, ref) => ( |
||||
|
<ToastPrimitives.Description |
||||
|
ref={ref} |
||||
|
className={cn("text-sm opacity-90", className)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
ToastDescription.displayName = ToastPrimitives.Description.displayName; |
||||
|
|
||||
|
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>; |
||||
|
|
||||
|
type ToastActionElement = React.ReactElement<typeof ToastAction>; |
||||
|
|
||||
|
export { |
||||
|
type ToastProps, |
||||
|
type ToastActionElement, |
||||
|
ToastProvider, |
||||
|
ToastViewport, |
||||
|
Toast, |
||||
|
ToastTitle, |
||||
|
ToastDescription, |
||||
|
ToastClose, |
||||
|
ToastAction |
||||
|
}; |
||||
@ -0,0 +1,29 @@ |
|||||
|
import * as React from "react"; |
||||
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip"; |
||||
|
|
||||
|
import { cn } from "@core/utils/cn.js"; |
||||
|
|
||||
|
const TooltipProvider = TooltipPrimitive.Provider; |
||||
|
|
||||
|
const Tooltip = ({ ...props }) => <TooltipPrimitive.Root {...props} />; |
||||
|
Tooltip.displayName = TooltipPrimitive.Tooltip.displayName; |
||||
|
|
||||
|
const TooltipTrigger = TooltipPrimitive.Trigger; |
||||
|
|
||||
|
const TooltipContent = React.forwardRef< |
||||
|
React.ElementRef<typeof TooltipPrimitive.Content>, |
||||
|
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> |
||||
|
>(({ className, sideOffset = 4, ...props }, ref) => ( |
||||
|
<TooltipPrimitive.Content |
||||
|
ref={ref} |
||||
|
sideOffset={sideOffset} |
||||
|
className={cn( |
||||
|
"z-50 overflow-hidden rounded-md border border-slate-100 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400", |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
)); |
||||
|
TooltipContent.displayName = TooltipPrimitive.Content.displayName; |
||||
|
|
||||
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }; |
||||
@ -0,0 +1,9 @@ |
|||||
|
export interface BlockquoteProps { |
||||
|
children: React.ReactNode; |
||||
|
} |
||||
|
|
||||
|
export const BlockQuote = ({ children }: BlockquoteProps): JSX.Element => ( |
||||
|
<blockquote className="mt-6 border-l-2 border-slate-300 pl-6 italic text-slate-800 dark:border-slate-600 dark:text-slate-200"> |
||||
|
{children} |
||||
|
</blockquote> |
||||
|
); |
||||
@ -0,0 +1,9 @@ |
|||||
|
export interface CodeProps { |
||||
|
children: React.ReactNode; |
||||
|
} |
||||
|
|
||||
|
export const Code = ({ children }: CodeProps): JSX.Element => ( |
||||
|
<code className="relative rounded bg-slate-100 py-[0.2rem] px-[0.3rem] font-mono text-sm font-semibold text-slate-900 dark:bg-slate-800 dark:text-slate-400"> |
||||
|
{children} |
||||
|
</code> |
||||
|
); |
||||
@ -0,0 +1,9 @@ |
|||||
|
export interface H1Props { |
||||
|
children: React.ReactNode; |
||||
|
} |
||||
|
|
||||
|
export const H1 = ({ children }: H1Props): JSX.Element => ( |
||||
|
<h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"> |
||||
|
{children} |
||||
|
</h1> |
||||
|
); |
||||
@ -0,0 +1,9 @@ |
|||||
|
export interface H2Props { |
||||
|
children: React.ReactNode; |
||||
|
} |
||||
|
|
||||
|
export const H2 = ({ children }: H2Props): JSX.Element => ( |
||||
|
<h2 className="scroll-m-20 border-b border-b-slate-200 pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0 dark:border-b-slate-700"> |
||||
|
{children} |
||||
|
</h2> |
||||
|
); |
||||
@ -0,0 +1,9 @@ |
|||||
|
export interface H3Props { |
||||
|
children: React.ReactNode; |
||||
|
} |
||||
|
|
||||
|
export const H3 = ({ children }: H3Props): JSX.Element => ( |
||||
|
<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight"> |
||||
|
{children} |
||||
|
</h3> |
||||
|
); |
||||
@ -0,0 +1,17 @@ |
|||||
|
import { cn } from "@app/core/utils/cn.js"; |
||||
|
|
||||
|
export interface H4Props { |
||||
|
className?: string; |
||||
|
children: React.ReactNode; |
||||
|
} |
||||
|
|
||||
|
export const H4 = ({ className, children }: H4Props): JSX.Element => ( |
||||
|
<h4 |
||||
|
className={cn( |
||||
|
"scroll-m-20 text-xl font-semibold tracking-tight", |
||||
|
className |
||||
|
)} |
||||
|
> |
||||
|
{children} |
||||
|
</h4> |
||||
|
); |
||||
@ -0,0 +1,15 @@ |
|||||
|
export interface LinkProps { |
||||
|
href: string; |
||||
|
children: React.ReactNode; |
||||
|
} |
||||
|
|
||||
|
export const Link = ({ href, children }: LinkProps): JSX.Element => ( |
||||
|
<a |
||||
|
href={href} |
||||
|
target={"_blank"} |
||||
|
rel="noopener noreferrer" |
||||
|
className="font-medium text-slate-900 underline underline-offset-4 dark:text-slate-50" |
||||
|
> |
||||
|
{children} |
||||
|
</a> |
||||
|
); |
||||
@ -0,0 +1,7 @@ |
|||||
|
export interface PProps { |
||||
|
children: React.ReactNode; |
||||
|
} |
||||
|
|
||||
|
export const P = ({ children }: PProps): JSX.Element => ( |
||||
|
<p className="leading-7 [&:not(:first-child)]:mt-6">{children}</p> |
||||
|
); |
||||
@ -0,0 +1,7 @@ |
|||||
|
export interface SubtleProps { |
||||
|
children: React.ReactNode; |
||||
|
} |
||||
|
|
||||
|
export const Subtle = ({ children }: SubtleProps): JSX.Element => ( |
||||
|
<p className="text-sm text-slate-500 dark:text-slate-400">{children}</p> |
||||
|
); |
||||
@ -1,77 +0,0 @@ |
|||||
import { useEffect, useState } from "react"; |
|
||||
import prettyMilliseconds from "pretty-ms"; |
|
||||
import { useDevice } from "@core/providers/useDevice.js"; |
|
||||
import { Battery100Icon, ClockIcon } from "@heroicons/react/24/outline"; |
|
||||
|
|
||||
export interface BatteryWidgetProps { |
|
||||
batteryLevel: number; |
|
||||
voltage: number; |
|
||||
} |
|
||||
|
|
||||
export const BatteryWidget = ({ |
|
||||
batteryLevel, |
|
||||
voltage |
|
||||
}: BatteryWidgetProps): JSX.Element => { |
|
||||
const { nodes, hardware } = useDevice(); |
|
||||
|
|
||||
const [timeRemaining, setTimeRemaining] = useState("Unknown"); |
|
||||
|
|
||||
useEffect(() => { |
|
||||
const stats = nodes.find( |
|
||||
(n) => n.data.num === hardware.myNodeNum |
|
||||
)?.deviceMetrics; |
|
||||
|
|
||||
if (stats) { |
|
||||
let currentStat: number | undefined = undefined; |
|
||||
let currentTime = new Date(); |
|
||||
let previousStat: number | undefined = undefined; |
|
||||
let previousTime = new Date(); |
|
||||
for (const stat of [...stats].reverse()) { |
|
||||
if (stat.metric.batteryLevel) { |
|
||||
if (!currentStat) { |
|
||||
currentStat = stat.metric.batteryLevel; |
|
||||
currentTime = stat.timestamp; |
|
||||
} else { |
|
||||
previousStat = stat.metric.batteryLevel; |
|
||||
previousTime = stat.timestamp; |
|
||||
break; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
if (currentStat && previousStat) { |
|
||||
const timeDiff = currentTime.getTime() - previousTime.getTime(); |
|
||||
const statDiff = Math.abs(currentStat - previousStat); |
|
||||
if (statDiff !== 0) { |
|
||||
//convert to ms/%
|
|
||||
const msPerPercent = timeDiff / statDiff; |
|
||||
const formatted = prettyMilliseconds( |
|
||||
(100 - currentStat) * msPerPercent |
|
||||
); |
|
||||
setTimeRemaining(formatted); |
|
||||
} |
|
||||
} else setTimeRemaining("Unknown"); |
|
||||
} |
|
||||
}, [hardware.myNodeNum, nodes]); |
|
||||
|
|
||||
return ( |
|
||||
<div className="flex gap-3 overflow-hidden rounded-lg bg-backgroundPrimary p-3 text-textSecondary"> |
|
||||
<div className="rounded-md bg-accent p-3 text-textPrimary"> |
|
||||
<Battery100Icon className="h-6" /> |
|
||||
</div> |
|
||||
<div> |
|
||||
<p className="truncate text-sm font-medium">Battery State</p> |
|
||||
<div className="flex gap-1"> |
|
||||
<p className="text-xl font-semibold">{batteryLevel}%</p> |
|
||||
<div className="flex text-sm font-semibold"> |
|
||||
<ClockIcon |
|
||||
className="h-5 w-5 flex-shrink-0 self-center" |
|
||||
aria-hidden="true" |
|
||||
/> |
|
||||
<span className="my-auto">{timeRemaining}</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,39 +0,0 @@ |
|||||
import { Button } from "@components/form/Button.js"; |
|
||||
import { Hashicon } from "@emeraldpay/hashicon-react"; |
|
||||
import { XCircleIcon } from "@heroicons/react/24/outline"; |
|
||||
|
|
||||
export interface DeviceWidgetProps { |
|
||||
name: string; |
|
||||
nodeNum: string; |
|
||||
disconnected: boolean; |
|
||||
disconnect: () => void; |
|
||||
reconnect: () => void; |
|
||||
} |
|
||||
|
|
||||
export const DeviceWidget = ({ |
|
||||
name, |
|
||||
nodeNum, |
|
||||
disconnected, |
|
||||
disconnect, |
|
||||
reconnect |
|
||||
}: DeviceWidgetProps): JSX.Element => { |
|
||||
return ( |
|
||||
<div className="relative flex shrink-0 flex-col overflow-hidden rounded-md text-sm text-textPrimary"> |
|
||||
<div className="flex bg-backgroundPrimary p-3"> |
|
||||
<div> |
|
||||
<Hashicon size={96} value={nodeNum} /> |
|
||||
</div> |
|
||||
<div className="flex w-full flex-col"> |
|
||||
<span className="ml-auto whitespace-nowrap text-xl font-bold"> |
|
||||
{name} |
|
||||
</span> |
|
||||
<div className="my-auto ml-auto"> |
|
||||
<Button onClick={disconnected ? reconnect : disconnect} size="sm"> |
|
||||
<span>{disconnected ? "Reconnect" : "Disconnect"}</span> |
|
||||
</Button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,44 +0,0 @@ |
|||||
import { useDevice } from "@core/providers/useDevice.js"; |
|
||||
import { IconButton } from "@components/form/IconButton.js"; |
|
||||
import { Mono } from "@components/generic/Mono.js"; |
|
||||
import { |
|
||||
EllipsisHorizontalIcon, |
|
||||
UserGroupIcon |
|
||||
} from "@heroicons/react/24/outline"; |
|
||||
import type { Protobuf } from "@meshtastic/meshtasticjs"; |
|
||||
|
|
||||
export interface PeersWidgetProps { |
|
||||
peers: Protobuf.NodeInfo[]; |
|
||||
} |
|
||||
|
|
||||
export const PeersWidget = ({ peers }: PeersWidgetProps): JSX.Element => { |
|
||||
const { setActivePage } = useDevice(); |
|
||||
|
|
||||
return ( |
|
||||
<div className="flex gap-3 overflow-hidden rounded-lg bg-backgroundPrimary p-3 text-textSecondary"> |
|
||||
<div className="rounded-md bg-accent p-3"> |
|
||||
<UserGroupIcon className="h-6 text-textPrimary" /> |
|
||||
</div> |
|
||||
<div> |
|
||||
<p className="truncate text-sm font-medium">Peers</p> |
|
||||
<div className="flex gap-1"> |
|
||||
{peers.length > 0 ? ( |
|
||||
<p className="text-lg font-semibold"> |
|
||||
{`${peers.length} ${peers.length > 1 ? "Peers" : "Peer"}`} |
|
||||
</p> |
|
||||
) : ( |
|
||||
<Mono className="m-auto">None Discovered.</Mono> |
|
||||
)} |
|
||||
</div> |
|
||||
</div> |
|
||||
<IconButton |
|
||||
className="my-auto ml-auto" |
|
||||
size="sm" |
|
||||
onClick={() => { |
|
||||
setActivePage("peers"); |
|
||||
}} |
|
||||
icon={<EllipsisHorizontalIcon className="h-4" />} |
|
||||
/> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,21 +0,0 @@ |
|||||
import { MapPinIcon } from "@heroicons/react/24/outline"; |
|
||||
|
|
||||
export interface PositionWidgetProps { |
|
||||
grid: string; |
|
||||
} |
|
||||
|
|
||||
export const PositionWidget = ({ grid }: PositionWidgetProps): JSX.Element => { |
|
||||
return ( |
|
||||
<div className="flex gap-3 overflow-hidden rounded-lg bg-backgroundPrimary p-3 text-textSecondary"> |
|
||||
<div className="rounded-md bg-accent p-3 text-textPrimary"> |
|
||||
<MapPinIcon className="text-white h-6" /> |
|
||||
</div> |
|
||||
<div> |
|
||||
<p className="truncate text-sm font-medium">Current Location</p> |
|
||||
<div className="flex gap-1"> |
|
||||
<p className="text-lg font-semibold">{grid}</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,35 +0,0 @@ |
|||||
import type { ButtonHTMLAttributes, ComponentType, SVGProps } from "react"; |
|
||||
|
|
||||
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { |
|
||||
size?: "sm" | "md" | "lg"; |
|
||||
} |
|
||||
|
|
||||
export const Button = ({ |
|
||||
size = "md", |
|
||||
children, |
|
||||
disabled, |
|
||||
className, |
|
||||
...rest |
|
||||
}: ButtonProps): JSX.Element => { |
|
||||
return ( |
|
||||
<button |
|
||||
className={`flex w-full select-none rounded-md bg-accentMuted px-3 text-textPrimary hover:brightness-hover focus:outline-none active:brightness-press ${ |
|
||||
size === "sm" |
|
||||
? "h-8 text-sm" |
|
||||
: size === "md" |
|
||||
? "h-10 text-sm" |
|
||||
: "h-10 text-base" |
|
||||
} ${ |
|
||||
disabled |
|
||||
? "cursor-not-allowed text-textSecondary brightness-disabled hover:brightness-disabled" |
|
||||
: "" |
|
||||
} ${className}`}
|
|
||||
disabled={disabled} |
|
||||
{...rest} |
|
||||
> |
|
||||
<div className="m-auto flex shrink-0 items-center gap-2 font-medium"> |
|
||||
{children} |
|
||||
</div> |
|
||||
</button> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,22 +0,0 @@ |
|||||
import type { FormEvent, HTMLProps } from "react"; |
|
||||
|
|
||||
export interface FormProps extends HTMLProps<HTMLFormElement> { |
|
||||
onSubmit?: (event: FormEvent<HTMLFormElement>) => Promise<void>; |
|
||||
} |
|
||||
|
|
||||
export const Form = ({ |
|
||||
children, |
|
||||
onSubmit, |
|
||||
...props |
|
||||
}: FormProps): JSX.Element => { |
|
||||
return ( |
|
||||
<form |
|
||||
className="w-full rounded-md bg-backgroundSecondary px-2" |
|
||||
onSubmit={onSubmit} |
|
||||
onChange={onSubmit} |
|
||||
{...props} |
|
||||
> |
|
||||
<div className="flex flex-col gap-3 p-4">{children}</div> |
|
||||
</form> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,31 +0,0 @@ |
|||||
import type { ButtonHTMLAttributes } from "react"; |
|
||||
|
|
||||
export interface IconButtonProps |
|
||||
extends ButtonHTMLAttributes<HTMLButtonElement> { |
|
||||
size?: "sm" | "md" | "lg"; |
|
||||
icon?: JSX.Element; |
|
||||
} |
|
||||
|
|
||||
export const IconButton = ({ |
|
||||
size = "md", |
|
||||
icon, |
|
||||
disabled, |
|
||||
className, |
|
||||
...rest |
|
||||
}: IconButtonProps): JSX.Element => { |
|
||||
return ( |
|
||||
<button |
|
||||
className={`flex rounded-md bg-accentMuted text-textPrimary hover:brightness-hover focus:outline-none active:brightness-press ${ |
|
||||
size === "sm" ? "h-8 w-8" : size === "md" ? "h-10 w-10" : "h-12 w-12" |
|
||||
} ${ |
|
||||
disabled |
|
||||
? "cursor-not-allowed text-textSecondary brightness-disabled hover:brightness-disabled" |
|
||||
: "" |
|
||||
} ${className ?? ""}`}
|
|
||||
disabled={disabled} |
|
||||
{...rest} |
|
||||
> |
|
||||
<div className="m-auto">{icon}</div> |
|
||||
</button> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,61 +0,0 @@ |
|||||
import { forwardRef, SelectHTMLAttributes } from "react"; |
|
||||
|
|
||||
import { InfoWrapper, InfoWrapperProps } from "@components/form/InfoWrapper.js"; |
|
||||
|
|
||||
export interface SelectProps |
|
||||
extends SelectHTMLAttributes<HTMLSelectElement>, |
|
||||
Omit<InfoWrapperProps, "children"> { |
|
||||
options?: string[]; |
|
||||
action?: { |
|
||||
icon: JSX.Element; |
|
||||
action: () => void; |
|
||||
}; |
|
||||
} |
|
||||
|
|
||||
export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Input( |
|
||||
{ |
|
||||
label, |
|
||||
description, |
|
||||
options, |
|
||||
action, |
|
||||
disabled, |
|
||||
error, |
|
||||
children, |
|
||||
...rest |
|
||||
}: SelectProps, |
|
||||
ref |
|
||||
) { |
|
||||
return ( |
|
||||
<InfoWrapper label={label} description={description} error={error}> |
|
||||
<div className="flex rounded-md"> |
|
||||
<select |
|
||||
ref={ref} |
|
||||
className={`flex h-10 w-full rounded-md border-transparent bg-backgroundPrimary px-3 text-sm text-textPrimary focus:border-transparent focus:outline-none focus:ring-2 focus:ring-accent ${ |
|
||||
action ? "rounded-r-none" : "" |
|
||||
} ${ |
|
||||
disabled |
|
||||
? "cursor-not-allowed text-textSecondary brightness-disabled hover:brightness-disabled" |
|
||||
: "" |
|
||||
}`}
|
|
||||
disabled={disabled} |
|
||||
{...rest} |
|
||||
> |
|
||||
{options && |
|
||||
options.map((option, index) => ( |
|
||||
<option key={index}>{option}</option> |
|
||||
))} |
|
||||
{children} |
|
||||
</select> |
|
||||
{action && ( |
|
||||
<button |
|
||||
type="button" |
|
||||
onClick={action.action} |
|
||||
className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md bg-backgroundPrimary px-4 py-2 text-sm font-medium text-textSecondary brightness-hover hover:brightness-hover focus:outline-none focus:ring-2 focus:ring-accent active:brightness-press" |
|
||||
> |
|
||||
{action.icon} |
|
||||
</button> |
|
||||
)} |
|
||||
</div> |
|
||||
</InfoWrapper> |
|
||||
); |
|
||||
}); |
|
||||
@ -1,48 +0,0 @@ |
|||||
import { IconButton } from "@components/form/IconButton.js"; |
|
||||
import { Dialog as DialogUI } from "@headlessui/react"; |
|
||||
import { XMarkIcon } from "@heroicons/react/24/outline"; |
|
||||
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: ReactNode; |
|
||||
} |
|
||||
|
|
||||
export const Dialog = ({ |
|
||||
title, |
|
||||
description, |
|
||||
isOpen, |
|
||||
close, |
|
||||
children |
|
||||
}: DialogProps): JSX.Element => { |
|
||||
return ( |
|
||||
<DialogUI open={isOpen} onClose={close}> |
|
||||
<ThemeController> |
|
||||
<Blur /> |
|
||||
<div className="fixed inset-0 flex items-center justify-center p-4"> |
|
||||
<DialogUI.Panel> |
|
||||
<div className="flex bg-backgroundPrimary px-4 py-5 sm:px-6"> |
|
||||
<div> |
|
||||
<h1 className="text-lg font-bold text-textPrimary">{title}</h1> |
|
||||
<h5 className="text-sm text-textSecondary">{description}</h5> |
|
||||
</div> |
|
||||
<IconButton |
|
||||
onClick={close} |
|
||||
className="my-auto ml-auto" |
|
||||
size="sm" |
|
||||
icon={<XMarkIcon className="h-4" />} |
|
||||
/> |
|
||||
</div> |
|
||||
|
|
||||
<div className="bg-backgroundSecondary p-4">{children}</div> |
|
||||
</DialogUI.Panel> |
|
||||
</div> |
|
||||
</ThemeController> |
|
||||
</DialogUI> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,97 +0,0 @@ |
|||||
import { Fragment } from "react"; |
|
||||
import { Mono } from "@components/generic/Mono"; |
|
||||
import { Tab } from "@headlessui/react"; |
|
||||
|
|
||||
export interface TabType { |
|
||||
label: string; |
|
||||
icon?: JSX.Element; |
|
||||
element: () => JSX.Element; |
|
||||
disabled?: boolean; |
|
||||
disabledMessage?: string; |
|
||||
disabledLink?: string; |
|
||||
} |
|
||||
|
|
||||
export interface TabbedCOntentAction { |
|
||||
icon: JSX.Element; |
|
||||
action: () => void; |
|
||||
} |
|
||||
|
|
||||
export interface TabbedContentProps { |
|
||||
tabs: TabType[]; |
|
||||
actions?: TabbedCOntentAction[]; |
|
||||
} |
|
||||
|
|
||||
export const TabbedContent = ({ |
|
||||
tabs, |
|
||||
actions |
|
||||
}: TabbedContentProps): JSX.Element => { |
|
||||
return ( |
|
||||
<Tab.Group as="div" className="flex flex-grow flex-col"> |
|
||||
<Tab.List className="flex bg-backgroundPrimary"> |
|
||||
{tabs.map((entry, index) => ( |
|
||||
<Tab key={index} disabled={entry.disabled}> |
|
||||
{({ selected }) => ( |
|
||||
<div |
|
||||
className={`flex h-10 gap-3 truncate border-b-4 px-3 text-sm font-medium ${ |
|
||||
selected |
|
||||
? "border-accent text-textPrimary" |
|
||||
: "border-backgroundPrimary text-textSecondary hover:text-textPrimary" |
|
||||
} ${ |
|
||||
entry.disabled |
|
||||
? "cursor-not-allowed hover:text-textSecondary" |
|
||||
: "cursor-pointer bg-backgroundPrimary hover:brightness-hover active:brightness-press" |
|
||||
} |
|
||||
`}
|
|
||||
> |
|
||||
{entry.icon && ( |
|
||||
<div className="text-slate-500 m-auto">{entry.icon}</div> |
|
||||
)} |
|
||||
<span className="m-auto">{entry.label}</span> |
|
||||
</div> |
|
||||
)} |
|
||||
</Tab> |
|
||||
))} |
|
||||
<div className="ml-auto flex"> |
|
||||
{actions?.map((action, index) => ( |
|
||||
<div |
|
||||
key={index} |
|
||||
className="my-auto cursor-pointer bg-backgroundPrimary p-3 text-textSecondary hover:brightness-hover active:brightness-press" |
|
||||
onClick={action.action} |
|
||||
> |
|
||||
{action.icon} |
|
||||
</div> |
|
||||
))} |
|
||||
</div> |
|
||||
</Tab.List> |
|
||||
<Tab.Panels as={Fragment}> |
|
||||
{tabs.map((entry, index) => ( |
|
||||
<Tab.Panel key={index} className="m-2 flex flex-grow"> |
|
||||
{!entry.disabled ? ( |
|
||||
<entry.element /> |
|
||||
) : ( |
|
||||
<div> |
|
||||
<Mono> |
|
||||
{entry.disabledMessage || "This tab is disabled"}.{" "} |
|
||||
{entry.disabledLink && ( |
|
||||
<> |
|
||||
Click{" "} |
|
||||
<a |
|
||||
className="underline" |
|
||||
target="_blank" |
|
||||
rel="noreferrer" |
|
||||
href={entry.disabledLink} |
|
||||
> |
|
||||
here |
|
||||
</a>{" "} |
|
||||
for more information. |
|
||||
</> |
|
||||
)} |
|
||||
</Mono> |
|
||||
</div> |
|
||||
)} |
|
||||
</Tab.Panel> |
|
||||
))} |
|
||||
</Tab.Panels> |
|
||||
</Tab.Group> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,49 +0,0 @@ |
|||||
import { Fragment } from "react"; |
|
||||
import { Mono } from "@components/generic/Mono"; |
|
||||
import { Tab } from "@headlessui/react"; |
|
||||
|
|
||||
export interface TabType { |
|
||||
label: string; |
|
||||
element: () => JSX.Element; |
|
||||
disabled?: boolean; |
|
||||
} |
|
||||
|
|
||||
export interface TabbedContentProps { |
|
||||
tabs: TabType[]; |
|
||||
} |
|
||||
|
|
||||
export const VerticalTabbedContent = ({ |
|
||||
tabs |
|
||||
}: TabbedContentProps): JSX.Element => { |
|
||||
return ( |
|
||||
<Tab.Group as="div" className="flex w-full gap-3"> |
|
||||
<Tab.List className="flex w-44 flex-col"> |
|
||||
{tabs.map((tab, index) => ( |
|
||||
<Tab key={index} as={Fragment}> |
|
||||
{({ selected }) => ( |
|
||||
<div |
|
||||
className={`flex cursor-pointer items-center border-l-4 p-4 text-sm font-medium ${ |
|
||||
selected |
|
||||
? "border-accent bg-accentMuted bg-opacity-10 text-textPrimary" |
|
||||
: "border-backgroundPrimary text-textSecondary" |
|
||||
}`}
|
|
||||
> |
|
||||
{tab.label} |
|
||||
<span className="ml-auto rounded-full bg-accent px-3 text-textPrimary"> |
|
||||
3 |
|
||||
</span> |
|
||||
</div> |
|
||||
)} |
|
||||
</Tab> |
|
||||
))} |
|
||||
</Tab.List> |
|
||||
<Tab.Panels as={Fragment}> |
|
||||
{tabs.map((tab, index) => ( |
|
||||
<Tab.Panel key={index} as={Fragment}> |
|
||||
<tab.element /> |
|
||||
</Tab.Panel> |
|
||||
))} |
|
||||
</Tab.Panels> |
|
||||
</Tab.Group> |
|
||||
); |
|
||||
}; |
|
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue