hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Execute oxfmt (#1166)

Browse Source 
Ran
pnpm oxfmt .

This should get the web repo aligned so that we can better enforce oxfmt going forward.
This commit is contained in:
Austin
2026-06-16 20:30:08 -04:00
committed by GitHub
parent c5690d1edb
commit d2cb51d489
378 changed files with 5548 additions and 1974 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/package.json
+12 -12
View File
@@ -6,14 +6,17 @@
"type": "git",
"url": "git+https://github.com/meshtastic/web.git"
},
"type": "module",
"files": [
"dist",
"!dist/**/*.test.*"
],
"type": "module",
"sideEffects": [
"**/*.css"
],
"main": "./dist/index.js",
"module": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
@@ -21,9 +24,6 @@
},
"./theme/default.css": "./dist/theme/default.css"
},
"main": "./dist/index.js",
"module": "./dist/index.js",
"types": "./dist/index.d.ts",
"scripts": {
"start": "npm run dev",
"dev": "vite dev",
@@ -37,14 +37,6 @@
"format:fix": "prettier --write .",
"test": "vitest"
},
"peerDependencies": {
"@radix-ui/react-slot": ">=1.0.2",
"class-variance-authority": ">=0.7.0",
"react": ">=19",
"react-dom": ">=19",
"tailwind-merge": ">=2.5.0",
"tailwindcss": "^4.1.7"
},
"dependencies": {
"@radix-ui/react-collapsible": "^1.1.13",
"@radix-ui/react-dialog": "^1.1.16",
@@ -72,5 +64,13 @@
"vite-plugin-dts": "^5.0.2",
"vite-plugin-static-copy": "^4.1.1",
"vitest": "^4.1.8"
},
"peerDependencies": {
"@radix-ui/react-slot": ">=1.0.2",
"class-variance-authority": ">=0.7.0",
"react": ">=19",
"react-dom": ">=19",
"tailwind-merge": ">=2.5.0",
"tailwindcss": "^4.1.7"
}
}
packages/ui/src/app.css
+1 -1
View File
@@ -4,4 +4,4 @@ body.dark {
body:not(.dark) {
color-scheme: light;
}
}
packages/ui/src/components/theme-provider.tsx
+5 -2
View File
@@ -36,7 +36,8 @@ export function ThemeProvider({
root.classList.remove("light", "dark");
if (theme === "system") {
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
.matches
? "dark"
: "light";
@@ -67,7 +68,9 @@ export const useTheme = () => {
// If the provider is missing, context will be initialState (setTheme is a no-op)
if (context.setTheme === initialState.setTheme) {
throw new Error("useTheme must be used within a ThemeProvider: provider is missing");
throw new Error(
"useTheme must be used within a ThemeProvider: provider is missing",
);
}
return context;
packages/ui/src/components/ui/badge.tsx
+11 -4
View File
@@ -9,12 +9,14 @@ const badgeVariants = cva(
{
variants: {
variant: {
default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
default:
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
secondary:
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
destructive:
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
outline:
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
},
},
defaultVariants: {
@@ -28,11 +30,16 @@ function Badge({
variant,
asChild = false,
...props
}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
}: React.ComponentProps<"span"> &
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
const Comp = asChild ? Slot : "span";
return (
<Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
<Comp
data-slot="badge"
className={cn(badgeVariants({ variant }), className)}
{...props}
/>
);
}
packages/ui/src/components/ui/button.tsx
+4 -2
View File
@@ -14,8 +14,10 @@ const buttonVariants = cva(
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost:
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
packages/ui/src/components/ui/collapsible.tsx
+15 -3
View File
@@ -1,19 +1,31 @@
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
function Collapsible({
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
}
function CollapsibleTrigger({
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />;
return (
<CollapsiblePrimitive.CollapsibleTrigger
data-slot="collapsible-trigger"
{...props}
/>
);
}
function CollapsibleContent({
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />;
return (
<CollapsiblePrimitive.CollapsibleContent
data-slot="collapsible-content"
{...props}
/>
);
}
export { Collapsible, CollapsibleTrigger, CollapsibleContent };
packages/ui/src/components/ui/dropdown-menu.tsx
+39 -10
View File
@@ -4,20 +4,29 @@ import type * as React from "react";
import { cn } from "@/lib/utils";
function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
function DropdownMenu({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
}
function DropdownMenuPortal({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
return (
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
);
}
function DropdownMenuTrigger({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
return (
<DropdownMenuPrimitive.Trigger
data-slot="dropdown-menu-trigger"
{...props}
/>
);
}
function DropdownMenuContent({
@@ -40,8 +49,12 @@ function DropdownMenuContent({
);
}
function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
function DropdownMenuGroup({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
return (
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
);
}
function DropdownMenuItem({
@@ -96,7 +109,12 @@ function DropdownMenuCheckboxItem({
function DropdownMenuRadioGroup({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
return (
<DropdownMenuPrimitive.RadioGroup
data-slot="dropdown-menu-radio-group"
{...props}
/>
);
}
function DropdownMenuRadioItem({
@@ -134,7 +152,10 @@ function DropdownMenuLabel({
<DropdownMenuPrimitive.Label
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
className={cn(
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
className,
)}
{...props}
/>
);
@@ -153,17 +174,25 @@ function DropdownMenuSeparator({
);
}
function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
function DropdownMenuShortcut({
className,
...props
}: React.ComponentProps<"span">) {
return (
<span
data-slot="dropdown-menu-shortcut"
className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
className={cn(
"text-muted-foreground ml-auto text-xs tracking-widest",
className,
)}
{...props}
/>
);
}
function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
function DropdownMenuSub({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
}
packages/ui/src/components/ui/sheet.tsx
+13 -4
View File
@@ -10,15 +10,21 @@ function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
}
function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
function SheetTrigger({
...props
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
}
function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
function SheetClose({
...props
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
}
function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
function SheetPortal({
...props
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
}
@@ -95,7 +101,10 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
);
}
function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
function SheetTitle({
className,
...props
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
return (
<SheetPrimitive.Title
data-slot="sheet-title"
packages/ui/src/components/ui/sidebar.tsx
+41 -9
View File
@@ -15,7 +15,12 @@ import {
SheetTitle,
} from "@/components/ui/sheet";
import { Skeleton } from "@/components/ui/skeleton";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { useIsMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils";
@@ -91,7 +96,10 @@ function SidebarProvider({
// Adds a keyboard shortcut to toggle the sidebar.
React.useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
if (
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
(event.metaKey || event.ctrlKey)
) {
event.preventDefault();
toggleSidebar();
}
@@ -245,7 +253,11 @@ function Sidebar({
);
}
function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
function SidebarTrigger({
className,
onClick,
...props
}: React.ComponentProps<typeof Button>) {
const { toggleSidebar } = useSidebar();
return (
@@ -306,7 +318,10 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
);
}
function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
function SidebarInput({
className,
...props
}: React.ComponentProps<typeof Input>) {
return (
<Input
data-slot="sidebar-input"
@@ -339,7 +354,10 @@ function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
);
}
function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
function SidebarSeparator({
className,
...props
}: React.ComponentProps<typeof Separator>) {
return (
<Separator
data-slot="sidebar-separator"
@@ -419,7 +437,10 @@ function SidebarGroupAction({
);
}
function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">) {
function SidebarGroupContent({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="sidebar-group-content"
@@ -556,7 +577,10 @@ function SidebarMenuAction({
);
}
function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) {
function SidebarMenuBadge({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="sidebar-menu-badge"
@@ -594,7 +618,12 @@ function SidebarMenuSkeleton({
className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
{...props}
>
{showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
{showIcon && (
<Skeleton
className="size-4 rounded-md"
data-sidebar="menu-skeleton-icon"
/>
)}
<Skeleton
className="h-4 max-w-(--skeleton-width) flex-1"
data-sidebar="menu-skeleton-text"
@@ -623,7 +652,10 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
);
}
function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">) {
function SidebarMenuSubItem({
className,
...props
}: React.ComponentProps<"li">) {
return (
<li
data-slot="sidebar-menu-sub-item"
packages/ui/src/components/ui/tooltip.tsx
+6 -2
View File
@@ -16,7 +16,9 @@ function TooltipProvider({
);
}
function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
function Tooltip({
...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
return (
<TooltipProvider>
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
@@ -24,7 +26,9 @@ function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root
);
}
function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
function TooltipTrigger({
...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
}
packages/ui/src/hooks/use-mobile.ts
+3 -1
View File
@@ -3,7 +3,9 @@ import * as React from "react";
const MOBILE_BREAKPOINT = 768;
export function useIsMobile() {
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
undefined,
);
React.useEffect(() => {
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
packages/ui/src/lib/components/Sidebar/AppSidebar.tsx
+34 -14
View File
@@ -2,7 +2,11 @@ import type { LucideIcon } from "lucide-react";
import { ChevronRight } from "lucide-react";
import type * as React from "react";
import { Badge } from "@/components/ui/badge";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
Sidebar,
SidebarContent,
@@ -65,11 +69,17 @@ const AppSidebar = ({
return (
<Sidebar collapsible="icon" variant="sidebar" {...props}>
<SidebarHeader
className={cn("h-14 mt-2 flex-shrink-0 transition-all duration-300 ease-in-out")}
className={cn(
"h-14 mt-2 flex-shrink-0 transition-all duration-300 ease-in-out",
)}
>
<div className="flex items-center">
{logo && (
<img src={logo.src} alt={logo.alt} className="size-10 flex-shrink-0 rounded-xl" />
<img
src={logo.src}
alt={logo.alt}
className="size-10 flex-shrink-0 rounded-xl"
/>
)}
{title && (
<h2
@@ -140,16 +150,19 @@ const AppSidebar = ({
onClick={subLink.onClick}
isActive={subLink.active}
>
{subLink.icon && <subLink.icon className="size-4" />}
<span>{subLink.name}</span>
{subLink.count !== undefined && subLink.count > 0 && (
<Badge
variant="default"
className="ml-auto bg-blue-500 text-white text-xs"
>
{subLink.count}
</Badge>
{subLink.icon && (
<subLink.icon className="size-4" />
)}
<span>{subLink.name}</span>
{subLink.count !== undefined &&
subLink.count > 0 && (
<Badge
variant="default"
className="ml-auto bg-blue-500 text-white text-xs"
>
{subLink.count}
</Badge>
)}
</SidebarMenuSubButton>
</SidebarMenuSubItem>
))}
@@ -171,7 +184,10 @@ const AppSidebar = ({
{link.icon && <link.icon className="size-5" />}
<span>{link.name}</span>
{link.count !== undefined && link.count > 0 && (
<Badge variant="default" className="ml-auto bg-blue-500 text-white text-xs">
<Badge
variant="default"
className="ml-auto bg-blue-500 text-white text-xs"
>
{link.count}
</Badge>
)}
@@ -184,7 +200,11 @@ const AppSidebar = ({
</SidebarGroup>
{children && (
<div className={cn("flex-1 min-h-0", isCollapsed && "overflow-hidden")}>{children}</div>
<div
className={cn("flex-1 min-h-0", isCollapsed && "overflow-hidden")}
>
{children}
</div>
)}
</SidebarContent>
packages/ui/src/lib/components/theme-toggle.tsx
+9 -3
View File
@@ -21,9 +21,15 @@ export function ThemeToggle() {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("light")}>
Light
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")}>
Dark
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
packages/ui/src/lib/theme/default.css
+1 -1
View File
@@ -121,4 +121,4 @@
body {
@apply bg-background text-foreground;
}
}
}