feat: switch to base ui

explodingcamera · explodingcamera · commit 3cdaeb7f5263 · 2026-03-09T12:38:28.000+01:00
Signed-off-by: Henry &lt;mail@henrygressmann.de&gt;
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -17,7 +17,7 @@ path="src/main.rs"
 [dependencies]
 # async/concurrency
 arc-swap="1.8"
-tokio={version="1.49", default-features=false, features=["macros", "rt-multi-thread", "signal"]}
+tokio={version="1.50", default-features=false, features=["macros", "rt-multi-thread", "signal"]}
 tokio-util={version="0.7", features=["io"]}
 futures-lite={version="2.6", default-features=false, features=["alloc"]}
 quick_cache={version="0.6", features=["ahash"]}
@@ -41,7 +41,7 @@ zstd={version="0.13", default-features=false}
 # general
 argh={version="0.1", default-features=false, features=["help"]}
 anyhow={version="1.0"}
-rand={version="0.10.0-rc.9", default-features=false, features=["std", "thread_rng"]}
+rand={version="0.10.0", default-features=false, features=["std", "thread_rng"]}
 chrono={version="0.4", default-features=false, features=["std", "now", "serde"]}
 figment={version="0.10", features=["toml", "env"]}
 tracing={version="0.1", default-features=false, features=["std"]}
@@ -92,8 +92,7 @@ maxminddb={version="0.27", optional=true, features=["simdutf8"]}
 figment={version="*", features=["test"]}
 cookie={version="*", default-features=false}
 tower={version="*", features=["util"]}
-hyper={version="*", features=["full"]}
-axum-test={version="18"}
+axum-test={version="19"}
 
 [features]
 default=["geoip"]
diff --git a/about.toml b/about.toml
@@ -5,6 +5,7 @@ accepted=[
     "ISC",
     "MPL-2.0",
     "BSD-3-Clause",
+    "BSD-2-Clause",
     "Unicode-DFS-2016",
     "Unicode-3.0",
     "OpenSSL",
diff --git a/data/licenses-cargo.json b/data/licenses-cargo.json
diff --git a/data/licenses-npm.json b/data/licenses-npm.json
diff --git a/web/bun.lock b/web/bun.lock
diff --git a/web/package.json b/web/package.json
@@ -9,17 +9,13 @@
 		"typecheck": "bun run --bun tsc --noEmit"
 	},
 	"dependencies": {
-		"@astrojs/react": "4.4.2",
+		"@astrojs/react": "^4.4.2",
+		"@base-ui/react": "^1.2.0",
 		"@explodingcamera/css": "^0.0.4",
 		"@fontsource-variable/outfit": "^5.2.8",
-		"@icons-pack/react-simple-icons": "^13.8.0",
-		"@picocss/pico": "^2.1.1",
-		"@radix-ui/react-accordion": "^1.2.12",
-		"@radix-ui/react-dialog": "^1.1.15",
-		"@radix-ui/react-tabs": "^1.1.13",
-		"@tanstack/react-query": "^5.90.20",
+		"@icons-pack/react-simple-icons": "^13.12.0",
+		"@tanstack/react-query": "^5.90.21",
 		"d3-array": "^3.2.4",
-		"d3-axis": "^3.0.0",
 		"d3-ease": "^3.0.1",
 		"d3-geo": "^3.1.1",
 		"d3-scale": "^4.0.2",
@@ -31,7 +27,7 @@
 		"fets": "^0.8.5",
 		"fuzzysort": "^3.1.0",
 		"little-date": "^1.2.1",
-		"lucide-react": "0.563.0",
+		"lucide-react": "0.577.0",
 		"react": "19.2.4",
 		"react-dom": "19.2.4",
 		"react-tag-autocomplete": "^7.5.1",
@@ -40,26 +36,25 @@
 	},
 	"devDependencies": {
 		"@astrojs/check": "^0.9.6",
-		"@biomejs/biome": "2.3.14",
-		"@types/bun": "^1.3.8",
+		"@biomejs/biome": "2.4.6",
+		"@types/bun": "^1.3.10",
 		"@types/d3-array": "^3.2.2",
-		"@types/d3-axis": "^3.0.6",
 		"@types/d3-ease": "^3.0.2",
 		"@types/d3-geo": "^3.1.0",
 		"@types/d3-scale": "^4.0.9",
 		"@types/d3-selection": "^3.0.11",
 		"@types/d3-shape": "^3.1.8",
 		"@types/d3-transition": "^3.0.9",
 		"@types/d3-zoom": "^3.0.8",
-		"@types/react": "^19.2.13",
+		"@types/react": "^19.2.14",
 		"@types/react-dom": "^19.2.3",
 		"@types/topojson-client": "^3.1.5",
 		"@types/topojson-specification": "^1.0.5",
-		"astro": "5.17.1",
-		"rollup-plugin-license": "^3.6.0",
+		"astro": "5.18.0",
+		"rollup-plugin-license": "^3.7.0",
 		"typescript": "^5.9.3"
 	},
-	"packageManager": "bun@1.3.8",
+	"packageManager": "bun@1.3.10",
 	"trustedDependencies": [
 		"@biomejs/biome",
 		"esbuild"
diff --git a/web/src/components/daterange/index.tsx b/web/src/components/daterange/index.tsx
@@ -45,10 +45,8 @@ export const DatePickerRange = ({ onSelect }: { onSelect: (range: DateRange) =>
 			</label>
 
 			<div>
-				<Dialog.Close asChild ref={closeRef}>
-					<button className="secondary outline" type="button">
-						Cancel
-					</button>
+				<Dialog.Close ref={closeRef} className="secondary outline">
+					Cancel
 				</Dialog.Close>
 
 				<button type="button" className="secondary" onClick={handleSelect}>
diff --git a/web/src/components/dialog.module.css b/web/src/components/dialog.module.css
@@ -54,6 +54,7 @@
   background-color: white;
   border: none;
   right: 0;
+  top: 0;
   margin: 1rem;
   pointer-events: auto;
   border-radius: 1rem;
diff --git a/web/src/components/dialog.tsx b/web/src/components/dialog.tsx
@@ -1,14 +1,15 @@
-import * as Dia from "@radix-ui/react-dialog";
+import { Dialog as Dia } from "@base-ui/react";
 import { XIcon } from "lucide-react";
 
 import { cls } from "../utils";
 import styles from "./dialog.module.css";
+import type { ReactElement } from "react";
 
 export type DialogProps = {
 	title: string;
 	description?: string;
 	hideDescription?: boolean;
-	trigger: React.ReactNode | (() => React.ReactNode);
+	trigger?: ReactElement | false;
 	children: React.ReactNode;
 	onOpenChange?: (open: boolean) => void;
 	className?: string;
@@ -31,30 +32,30 @@ export const Dialog = ({
 }: DialogProps) => {
 	return (
 		<Dia.Root onOpenChange={onOpenChange}>
-			<Dia.Trigger asChild>{typeof trigger === "function" ? trigger() : trigger}</Dia.Trigger>
+			{trigger && <Dia.Trigger nativeButton={trigger.type === "button"} render={trigger} />}
 			<Dia.Portal>
-				<Dia.Overlay className={styles.overlay} />
-				{showClose && (
-					<Dia.Close asChild>
-						<button type="button" className={styles.close}>
-							<XIcon size="24" />
-						</button>
-					</Dia.Close>
-				)}
+				<Dia.Backdrop className={styles.overlay} />
 
-				<Dia.Content asChild>
-					<article className={cls(styles.content, autoOverflow && styles.autoOverflow, className)}>
-						<Dia.Title className={styles.title} hidden={hideTitle}>
-							{title}
-						</Dia.Title>
-						{description && (
-							<Dia.Description hidden={hideDescription} className={styles.description}>
-								{description}
-							</Dia.Description>
-						)}
-						{children}
-					</article>
-				</Dia.Content>
+				<Dia.Viewport>
+					{showClose && (
+						<Dia.Close className={styles.close}>
+							<XIcon size="24" />
+						</Dia.Close>
+					)}
+					<Dia.Popup>
+						<article className={cls(styles.content, autoOverflow && styles.autoOverflow, className)}>
+							<Dia.Title className={styles.title} hidden={hideTitle}>
+								{title}
+							</Dia.Title>
+							{description && (
+								<Dia.Description hidden={hideDescription} className={styles.description}>
+									{description}
+								</Dia.Description>
+							)}
+							{children}
+						</article>
+					</Dia.Popup>
+				</Dia.Viewport>
 			</Dia.Portal>
 		</Dia.Root>
 	);
diff --git a/web/src/components/dimensions/index.tsx b/web/src/components/dimensions/index.tsx
@@ -1,4 +1,4 @@
-import * as Tabs from "@radix-ui/react-tabs";
+import { Tabs } from "@base-ui/react/tabs";
 import { LinkIcon, PinIcon, SquareArrowOutUpRightIcon } from "lucide-react";
 import styles from "./dimensions.module.css";
 
@@ -95,9 +95,9 @@ export const DimensionDropdown = ({
 				<div>{metricNames[query.metric]}</div>
 			</Tabs.List>
 			{dimensions.map((dimension) => (
-				<Tabs.Content key={dimension} value={dimension} className={styles.tabsContent}>
+				<Tabs.Panel key={dimension} value={dimension} className={styles.tabsContent}>
 					<DimensionTable dimension={dimension} query={query} onSelect={(value) => onSelect(value, dimension)} />
-				</Tabs.Content>
+				</Tabs.Panel>
 			))}
 		</Tabs.Root>
 	);
@@ -116,16 +116,16 @@ export const DimensionTabs = ({
 		<Tabs.Root className={styles.tabs} defaultValue={dimensions[0]}>
 			<Tabs.List className={styles.tabsList}>
 				{Object.entries(dimensions).map(([key, value]) => (
-					<Tabs.Trigger key={key} value={value}>
+					<Tabs.Tab key={key} value={value}>
 						{dimensionNames[value]}
-					</Tabs.Trigger>
+					</Tabs.Tab>
 				))}
 				<div>{metricNames[query.metric]}</div>
 			</Tabs.List>
 			{dimensions.map((dimension) => (
-				<Tabs.Content key={dimension} value={dimension} className={styles.tabsContent}>
+				<Tabs.Panel key={dimension} value={dimension} className={styles.tabsContent}>
 					<DimensionTable dimension={dimension} query={query} onSelect={(value) => onSelect(value, dimension)} />
-				</Tabs.Content>
+				</Tabs.Panel>
 			))}
 		</Tabs.Root>
 	);
diff --git a/web/src/components/dimensions/modal.tsx b/web/src/components/dimensions/modal.tsx
@@ -29,12 +29,12 @@ export const DetailsModal = ({ dimension, query }: { dimension: Dimension; query
 			showClose
 			className={styles.detailsModal}
 			autoOverflow
-			trigger={() => (
+			trigger={
 				<button type="button" className={cls(styles.showMore, (data?.length ?? 0) === 0 && styles.showMoreHidden)}>
 					<ZoomInIcon size={16} />
 					Show details
 				</button>
-			)}
+			}
 		>
 			<div className={styles.dimensionTable} style={{ "--count": data?.length } as React.CSSProperties}>
 				<div className={styles.dimensionHeader}>
diff --git a/web/src/components/graph/graph.tsx b/web/src/components/graph/graph.tsx
@@ -279,13 +279,13 @@ export const LineGraph = ({
 	return (
 		<div ref={containerRef} className={styles.graph} data-tooltip-float={true} data-tooltip-id="graph">
 			<svg ref={svgRef} style={{ display: "block", width: "100%", height: "100%" }}>
+				<title>Graph</title>
 				<defs>
 					<linearGradient id="graphGradient" x1="0" x2="0" y1="0" y2="1">
 						<stop offset="0%" stopColor="rgba(166, 206, 227, 0.4)" />
 						<stop offset="100%" stopColor="rgba(166, 206, 227, 0)" />
 					</linearGradient>
 				</defs>
-				<title>Graph</title>
 				<path id="background" fill="url(#graphGradient)" stroke="none" />
 				<path id="line" fill="none" stroke="#a6cee3" />
 				{/* doted line */}
diff --git a/web/src/components/project/filter.tsx b/web/src/components/project/filter.tsx
@@ -218,10 +218,8 @@ const FilterDialog = ({ onAdd }: { onAdd: (filter: DimensionFilter) => void }) =
 				)}
 
 				<div className="grid">
-					<Dialog.Close asChild ref={closeRef}>
-						<button className="secondary outline" type="button">
-							Cancel
-						</button>
+					<Dialog.Close ref={closeRef} className="secondary outline">
+						Cancel
 					</Dialog.Close>
 					<button type="submit">Add Filter</button>
 				</div>
diff --git a/web/src/components/projects.tsx b/web/src/components/projects.tsx
@@ -3,7 +3,7 @@ import styles from "./projects.module.css";
 
 import { ChevronDownIcon } from "lucide-react";
 
-import * as Accordion from "@radix-ui/react-accordion";
+import { Accordion } from "@base-ui/react/accordion";
 import {
 	type Metric,
 	type ProjectResponse,
@@ -88,7 +88,7 @@ export const Projects = () => {
 			<Suspense>
 				<Accordion.Root
 					className="AccordionRoot"
-					type="multiple"
+					multiple
 					onValueChange={(value) =>
 						setHiddenProjects(data?.projects.map((p) => p.id).filter((id) => !value.includes(id)) ?? [])
 					}
@@ -142,11 +142,11 @@ const Project = ({
 				</div>
 				<SelectMetrics data={stats} metric={metric} setMetric={setMetric} />
 			</div>
-			<Accordion.AccordionContent className={styles.AccordionContent}>
+			<Accordion.Panel className={styles.AccordionContent}>
 				<div className={styles.graph}>
 					<LineGraph title={metricNames[metric]} metric={metric} data={graph ?? []} range={range} />
 				</div>
-			</Accordion.AccordionContent>
+			</Accordion.Panel>
 		</article>
 	);
 };
diff --git a/web/src/components/settings/dialogs.tsx b/web/src/components/settings/dialogs.tsx
