Sacha Weatherstone
3 years ago
69 changed files with 1744 additions and 1680 deletions
File diff suppressed because it is too large
@ -1,30 +0,0 @@ |
|||||
import type { Group } from "@components/CommandPalette/Index.js"; |
|
||||
import { Combobox } from "@headlessui/react"; |
|
||||
import { ChevronRightIcon } from "lucide-react"; |
|
||||
|
|
||||
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 size={20} /> |
|
||||
<span className="ml-3 flex-auto truncate">{group.label}</span> |
|
||||
{active && ( |
|
||||
<ChevronRightIcon size={16} className="text-textSecondary" /> |
|
||||
)} |
|
||||
</> |
|
||||
)} |
|
||||
</Combobox.Option> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,13 +0,0 @@ |
|||||
import { Mono } from "@components/generic/Mono.js"; |
|
||||
import { TerminalSquareIcon } from "lucide-react"; |
|
||||
|
|
||||
export const NoResults = (): JSX.Element => { |
|
||||
return ( |
|
||||
<div className="py-14 px-14 text-center"> |
|
||||
<TerminalSquareIcon className="mx-auto 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,22 +0,0 @@ |
|||||
import { Combobox } from "@headlessui/react"; |
|
||||
import { SearchIcon } from "lucide-react"; |
|
||||
|
|
||||
export interface SearchBoxProps { |
|
||||
setQuery: (query: string) => void; |
|
||||
} |
|
||||
|
|
||||
export const SearchBox = ({ setQuery }: SearchBoxProps): JSX.Element => { |
|
||||
return ( |
|
||||
<div className="relative"> |
|
||||
<SearchIcon |
|
||||
size={20} |
|
||||
className="pointer-events-none absolute m-3.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,80 +0,0 @@ |
|||||
import type { Group } from "@components/CommandPalette/Index.js"; |
|
||||
import { Combobox } from "@headlessui/react"; |
|
||||
import { ChevronRightIcon } from "lucide-react"; |
|
||||
|
|
||||
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 |
|
||||
size={16} |
|
||||
className="flex-none text-gray-900 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 ? "bg-backgroundPrimary text-gray-900" : "" |
|
||||
}` |
|
||||
} |
|
||||
> |
|
||||
{({ active }) => ( |
|
||||
<> |
|
||||
<command.icon |
|
||||
className={`h-4 flex-none text-gray-900 text-opacity-40 ${ |
|
||||
active ? "text-opacity-100" : "" |
|
||||
}`}
|
|
||||
/> |
|
||||
<span className="ml-3">{command.label}</span> |
|
||||
{active && ( |
|
||||
<ChevronRightIcon |
|
||||
size={16} |
|
||||
className="ml-auto text-gray-400" |
|
||||
/> |
|
||||
)} |
|
||||
</> |
|
||||
)} |
|
||||
</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 |
|
||||
? "bg-backgroundPrimary bg-opacity-5 text-gray-900" |
|
||||
: "" |
|
||||
}` |
|
||||
} |
|
||||
> |
|
||||
{({ active }) => ( |
|
||||
<> |
|
||||
{item.icon} |
|
||||
<span className="ml-3">{item.label}</span> |
|
||||
{active && ( |
|
||||
<ChevronRightIcon |
|
||||
size={16} |
|
||||
className="ml-auto text-gray-400" |
|
||||
/> |
|
||||
)} |
|
||||
</> |
|
||||
)} |
|
||||
</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> |
||||
|
); |
||||
|
}; |
||||
@ -0,0 +1,227 @@ |
|||||
|
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" | "textarea"; |
||||
|
suffix?: string; |
||||
|
} |
||||
|
|
||||
|
interface SelectFieldProps<T> extends BasicFieldProps<T> { |
||||
|
type: "select"; |
||||
|
|
||||
|
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); |
||||
|
return ( |
||||
|
(typeof value === "boolean" && field.invert ? value : !value) || |
||||
|
(typeof value === "number" && |
||||
|
(field.selector && field.invert |
||||
|
? !field.selector === value |
||||
|
: field.selector === value)) |
||||
|
); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
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 "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> |
||||
|
); |
||||
|
} |
||||
|
})} |
||||
|
</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,57 +0,0 @@ |
|||||
import { |
|
||||
Menubar, |
|
||||
MenubarContent, |
|
||||
MenubarItem, |
|
||||
MenubarMenu, |
|
||||
MenubarSeparator, |
|
||||
MenubarShortcut, |
|
||||
MenubarTrigger |
|
||||
} from "@app/components/UI/Menubar.js"; |
|
||||
import { useAppStore } from "@app/core/stores/appStore.js"; |
|
||||
|
|
||||
export const Menu = (): JSX.Element => { |
|
||||
const { darkMode } = useAppStore(); |
|
||||
return ( |
|
||||
<Menubar className="rounded-none dark:bg-slate-900"> |
|
||||
<MenubarMenu> |
|
||||
<MenubarTrigger> |
|
||||
<img |
|
||||
src={darkMode ? "Logo_White.svg" : "Logo_Black.svg"} |
|
||||
className="h-4" |
|
||||
/> |
|
||||
</MenubarTrigger> |
|
||||
<MenubarContent> |
|
||||
<MenubarItem>About Music</MenubarItem> |
|
||||
<MenubarSeparator /> |
|
||||
<MenubarItem> |
|
||||
Preferences... <MenubarShortcut>⌘,</MenubarShortcut> |
|
||||
</MenubarItem> |
|
||||
<MenubarSeparator /> |
|
||||
<MenubarItem> |
|
||||
Hide Music... <MenubarShortcut>⌘H</MenubarShortcut> |
|
||||
</MenubarItem> |
|
||||
<MenubarItem> |
|
||||
Hide Others... <MenubarShortcut>⇧⌘H</MenubarShortcut> |
|
||||
</MenubarItem> |
|
||||
<MenubarShortcut /> |
|
||||
<MenubarItem> |
|
||||
Quit Music <MenubarShortcut>⌘Q</MenubarShortcut> |
|
||||
</MenubarItem> |
|
||||
</MenubarContent> |
|
||||
</MenubarMenu> |
|
||||
<MenubarMenu> |
|
||||
<MenubarTrigger>File</MenubarTrigger> |
|
||||
<MenubarContent> |
|
||||
<MenubarItem> |
|
||||
New Tab <MenubarShortcut>⌘T</MenubarShortcut> |
|
||||
</MenubarItem> |
|
||||
<MenubarItem>New Window</MenubarItem> |
|
||||
<MenubarSeparator /> |
|
||||
<MenubarItem>Share</MenubarItem> |
|
||||
<MenubarSeparator /> |
|
||||
<MenubarItem>Print</MenubarItem> |
|
||||
</MenubarContent> |
|
||||
</MenubarMenu> |
|
||||
</Menubar> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,77 +0,0 @@ |
|||||
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 { Tabs, TabsContent, TabsList, TabsTrigger } from "./UI/Tabs.js"; |
|
||||
import { Subtle } from "./UI/Typography/Subtle.js"; |
|
||||
import { Link } from "./UI/Typography/Link.js"; |
|
||||
|
|
||||
export const NewDevice = () => { |
|
||||
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" |
|
||||
} |
|
||||
]; |
|
||||
|
|
||||
return ( |
|
||||
<div className="m-auto"> |
|
||||
<Tabs defaultValue="HTTP" className="w-[400px]"> |
|
||||
<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> |
|
||||
</> |
|
||||
)} |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
@ -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,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 }; |
||||
@ -1,30 +0,0 @@ |
|||||
import { cn } from "@app/core/utils/cn.js"; |
|
||||
import type { LucideIcon } from "lucide-react"; |
|
||||
|
|
||||
export interface SidebarItemProps { |
|
||||
icon?: LucideIcon; |
|
||||
element?: JSX.Element; |
|
||||
onClick?: () => void; |
|
||||
active?: boolean; |
|
||||
label: string; |
|
||||
} |
|
||||
|
|
||||
export const SidebarItem = ({ |
|
||||
icon: Icon, |
|
||||
element, |
|
||||
onClick, |
|
||||
active, |
|
||||
label |
|
||||
}: SidebarItemProps): JSX.Element => ( |
|
||||
<button |
|
||||
className={cn( |
|
||||
"text-palette-600 flex w-full cursor-pointer items-center space-x-2.5 rounded-xl bg-transparent px-2.5 py-2.5 transition-all duration-300 hover:text-accent", |
|
||||
active && "bg-backgroundPrimary text-accent" |
|
||||
)} |
|
||||
onClick={() => onClick && onClick()} |
|
||||
> |
|
||||
{element} |
|
||||
{Icon && <Icon size={16} />} |
|
||||
<span className="align-middle font-mono text-sm">{label}</span> |
|
||||
</button> |
|
||||
); |
|
||||
@ -1,32 +1,17 @@ |
|||||
import type { LucideIcon } from "lucide-react"; |
import { H4 } from "../Typography/H4.js"; |
||||
|
|
||||
export interface SidebarSectionProps { |
export interface SidebarSectionProps { |
||||
title: string; |
label: string; |
||||
action?: { |
|
||||
icon: LucideIcon; |
|
||||
onClick: () => void; |
|
||||
}; |
|
||||
subheader?: string; |
subheader?: string; |
||||
children: React.ReactNode; |
children: React.ReactNode; |
||||
} |
} |
||||
|
|
||||
export const SidebarSection = ({ |
export const SidebarSection = ({ |
||||
title, |
label: title, |
||||
action, |
|
||||
children |
children |
||||
}: SidebarSectionProps): JSX.Element => ( |
}: SidebarSectionProps): JSX.Element => ( |
||||
<div className="space-y-1.5"> |
<div className="px-4 py-2"> |
||||
<div className="mb-2 flex items-center justify-between px-2"> |
<H4 className="mb-2 ml-2">{title}</H4> |
||||
<div className="font-medium">{title}</div> |
<div className="space-y-1">{children}</div> |
||||
{action && ( |
|
||||
<button |
|
||||
className="transition-all duration-300 hover:text-accent" |
|
||||
onClick={() => action.onClick} |
|
||||
> |
|
||||
<action.icon size={16} /> |
|
||||
</button> |
|
||||
)} |
|
||||
</div> |
|
||||
<ul className="space-y-1">{children}</ul> |
|
||||
</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> |
||||
|
); |
||||
@ -1,9 +1,17 @@ |
|||||
|
import { cn } from "@app/core/utils/cn.js"; |
||||
|
|
||||
export interface H4Props { |
export interface H4Props { |
||||
|
className?: string; |
||||
children: React.ReactNode; |
children: React.ReactNode; |
||||
} |
} |
||||
|
|
||||
export const H4 = ({ children }: H4Props): JSX.Element => ( |
export const H4 = ({ className, children }: H4Props): JSX.Element => ( |
||||
<h4 className="mt-8 scroll-m-20 text-xl font-semibold tracking-tight"> |
<h4 |
||||
|
className={cn( |
||||
|
"scroll-m-20 text-xl font-semibold tracking-tight", |
||||
|
className |
||||
|
)} |
||||
|
> |
||||
{children} |
{children} |
||||
</h4> |
</h4> |
||||
); |
); |
||||
|
|||||
@ -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,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,13 +0,0 @@ |
|||||
export const renderOptions = (enumValue: { |
|
||||
[s: string]: string | number; |
|
||||
}): JSX.Element[] => { |
|
||||
const optionsEnumValues = enumValue |
|
||||
? Object.entries(enumValue).filter((value) => typeof value[1] === "number") |
|
||||
: []; |
|
||||
|
|
||||
return optionsEnumValues.map(([name, value], index) => ( |
|
||||
<option key={index} value={value}> |
|
||||
{name} |
|
||||
</option> |
|
||||
)); |
|
||||
}; |
|
||||
@ -0,0 +1,22 @@ |
|||||
|
import { IsArray, IsBoolean, IsNumber, IsString, IsUrl } from "class-validator"; |
||||
|
|
||||
|
import type { RasterSource } from "@core/stores/appStore.js"; |
||||
|
|
||||
|
export class MapValidation { |
||||
|
@IsArray() |
||||
|
rasterSources: MapValidation_RasterSources[]; |
||||
|
} |
||||
|
|
||||
|
export class MapValidation_RasterSources implements RasterSource { |
||||
|
@IsBoolean() |
||||
|
enabled: boolean; |
||||
|
|
||||
|
@IsString() |
||||
|
title: string; |
||||
|
|
||||
|
@IsUrl() |
||||
|
tiles: string; |
||||
|
|
||||
|
@IsNumber() |
||||
|
tileSize: number; |
||||
|
} |
||||
Loading…
Reference in new issue