refactor(site): restore TypeScript checking in production builds (#2457)

internal/site/package.json

@@ -5,7 +5,7 @@
 	"type": "module",
 	"scripts": {
 		"dev": "vite --host",
-		"build": "lingui extract --overwrite && lingui compile && vite build",
+		"build": "lingui extract --overwrite && lingui compile && tsc -b && vite build",
 		"preview": "vite preview",
 		"sync": "lingui extract --overwrite && lingui compile",
 		"sync_no_compile": "lingui extract --overwrite --clean",
@@ -74,4 +74,4 @@
 	"optionalDependencies": {
 		"@esbuild/linux-arm64": "^0.21.5"
 	}
-}
+}

internal/site/src/components/charts/line-chart.tsx

@@ -10,7 +10,7 @@ import {
 	xAxis,
 } from "@/components/ui/chart"
 import { chartMargin, cn, formatShortDate } from "@/lib/utils"
-import type { ChartData, SystemStatsRecord } from "@/types"
+import type { ChartOptions, SystemStatsRecord } from "@/types"
 import { useYAxisWidth } from "./hooks"
 import type { AxisDomain } from "recharts/types/util/types"
 import { useIntersectionObserver } from "@/lib/use-intersection-observer"
@@ -73,7 +73,7 @@ export default function LineChartDefault({
 	chartProps,
 	connectNulls,
 }: {
-	chartData: ChartData
+	chartData: ChartOptions & { systemStats?: SystemStatsRecord[] }
 	// biome-ignore lint/suspicious/noExplicitAny: accepts different data source types (systemStats or containerData)
 	customData?: any[]
 	max?: number

internal/site/src/components/network-monitors-table/network-monitors-table.tsx

@@ -38,7 +38,7 @@ import { pb } from "@/lib/api"
 import { SystemStatus } from "@/lib/enums"
 import { $allSystemsById, $direction, $textMeasureVersion, $userSettings, getUserChartTime } from "@/lib/stores"
 import { cn, formatShortDate, isVisuallyLonger, matchesFilterGroups, parseFilterGroups, parseSemVer } from "@/lib/utils"
-import type { ChartData, MonitorCertInfo, NetworkMonitorRecord } from "@/types"
+import type { ChartOptions, MonitorCertInfo, NetworkMonitorRecord } from "@/types"
 import { AddMonitorDialog, EditMonitorDialog, SystemMultiSelect } from "./monitor-dialog"
 import {
 	ArrowDownIcon,
@@ -720,7 +720,7 @@ function NetworkMonitorSheetContent({
 		enabled: open,
 	})
 
-	const chartData = useMemo<ChartData>(
+	const chartData = useMemo<ChartOptions>(
 		() => ({
 			agentVersion: parseSemVer(system?.info?.v),
 			orientation: direction === "rtl" ? "right" : "left",

internal/site/src/components/routes/system/charts/monitors-charts.tsx

@@ -5,7 +5,7 @@ import { decimalString, formatMicroseconds, matchesFilterGroups, parseFilterGrou
 import { $monitorFilter } from "@/lib/stores"
 import { useLingui } from "@lingui/react/macro"
 import { ChartCard, FilterBar } from "../chart-card"
-import type { ChartData, MonitorStats, NetworkMonitorRecord, NetworkMonitorStatsRecord } from "@/types"
+import type { ChartOptions, MonitorStats, NetworkMonitorRecord, NetworkMonitorStatsRecord } from "@/types"
 import { useMemo } from "react"
 import { useStore } from "@nanostores/react"
 
@@ -13,7 +13,7 @@ type MonitorChartProps = {
 	monitorStats: NetworkMonitorStatsRecord[]
 	grid?: boolean
 	monitors: NetworkMonitorRecord[]
-	chartData: ChartData
+	chartData: ChartOptions
 	empty: boolean
 	showFilter?: boolean
 	/** Prepended to the chart title, e.g. a target/system name (rendered as "{titlePrefix} — Response"). */
@@ -122,7 +122,7 @@ function MonitorChart({
 interface AvgMinMaxResponseChartProps {
 	monitorStats: NetworkMonitorStatsRecord[]
 	monitor: NetworkMonitorRecord | null
-	chartData: ChartData
+	chartData: ChartOptions
 	empty: boolean
 }
 

internal/site/src/components/systems-table/systems-table.tsx

@@ -1,3 +1,4 @@
+import { useLingui as useLinguiContext } from "@lingui/react"
 import { Trans, useLingui } from "@lingui/react/macro"
 import { useStore } from "@nanostores/react"
 import { subscribeKeys } from "nanostores"
@@ -457,7 +458,7 @@ const AllSystemsTable = memo(
 )
 
 function SystemsTableHead({ table }: { table: TableType<SystemRecord> }) {
-	const { t } = useLingui()
+	useLinguiContext()
 	return (
 		<TableHeader className="sticky top-0 z-50 w-full border-b-2">
 			{table.getHeaderGroups().map((headerGroup) => (

internal/site/src/components/ui/collapsible.tsx

@@ -1,4 +1,4 @@
-import { ChevronDownIcon, HourglassIcon } from "lucide-react"
+import { ChevronDownIcon } from "lucide-react"
 import * as React from "react"
 import { cn } from "@/lib/utils"
 import { Button } from "./button"

internal/site/src/components/ui/input-tags.tsx

@@ -3,9 +3,8 @@ import * as React from "react"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
-import type { InputProps } from "./input"
 
-type InputTagsProps = Omit<InputProps, "value" | "onChange"> & {
+type InputTagsProps = Omit<React.ComponentPropsWithoutRef<"input">, "value" | "onChange"> & {
 	value: string[]
 	onChange: React.Dispatch<React.SetStateAction<string[]>>
 }

internal/site/src/lib/wifi.test.ts

@@ -7,7 +7,10 @@ const system = (wf?: SystemInfo["wf"], status: "up" | "down" = "up") => ({ statu
 
 test("current state gates panel, not retained history", () => {
 	expect(connectedWiFi(system())).toEqual([])
-	expect(connectedWiFi(system(null))).toEqual([])
+	const nullWifi = system()
+	// Exercise malformed stored data without widening the normal wire type.
+	Reflect.set(nullWifi.info, "wf", null)
+	expect(connectedWiFi(nullWifi)).toEqual([])
 	expect(connectedWiFi(system({}))).toEqual([])
 	expect(connectedWiFi(system({ wlan0: { r: -50 } }, "down"))).toEqual([])
 	expect(connectedWiFi(system({ wlan0: { r: -50 } }))).toHaveLength(1)

internal/site/src/types.d.ts

@@ -428,14 +428,17 @@ export interface SemVer {
 	patch: number
 }
 
-export interface ChartData {
+export interface ChartOptions {
 	agentVersion: SemVer
-	systemStats?: SystemStatsRecord[]
-	containerData?: ChartDataContainer[]
 	orientation: "right" | "left"
 	chartTime: ChartTimes
 }
 
+export interface ChartData extends ChartOptions {
+	systemStats: SystemStatsRecord[]
+	containerData: ChartDataContainer[]
+}
+
 export interface AlertInfo {
 	name: () => string
 	unit: string