add stricter rules

apps/analytics-web/app/_actions/actions.ts

@@ -11,7 +11,6 @@ export async function getEvents() {
 
 		return events;
 	} catch (error) {
-		console.error("Error getting events", error);
 		return [];
 	}
 }
@@ -25,7 +24,6 @@ export async function insertEvent(event: EventInsertType) {
 
 		return { data: insertedEvent, error: null };
 	} catch (error) {
-		console.error("Error inserting events", error);
 		return { data: null, error: "Error inserting events" };
 	}
 }

apps/analytics-web/app/_components/analytics/EventsTable/EventsTable.tsx

@@ -44,13 +44,13 @@ export default function EventsTable() {
 			<div className="mt-2 flex items-center justify-between">
 				<div>
 					<h2>Events</h2>
-					{!events.length && <p>Loading...</p>}
+					{events.length === 0 && <p>Loading...</p>}
 				</div>
-				{!!events.length && <ExportButton data={events} filename="events.csv" />}
+				{events.length > 0 && <ExportButton data={events} filename="events.csv" />}
 			</div>
 
 			<div className="mt-2 rounded-md bg-card">
-				{!!events.length && (
+				{events.length > 0 && (
 					<DataTable columns={getColumns(eventTypes, setEventTypes)} data={filteredEvents} pagination={true} />
 				)}
 			</div>

apps/analytics-web/app/_components/analytics/EventsTable/TableFilter.tsx

@@ -32,7 +32,7 @@ const TableFilter = ({ eventTypes, setEventTypes }: TableFilterProps) => {
 
 	return (
 		<DropdownMenu>
-			<DropdownMenuTrigger asChild>
+			<DropdownMenuTrigger asChild={true}>
 				<Button className="text-sm" size={"sm"} variant="outline">
 					Type
 				</Button>
@@ -43,7 +43,7 @@ const TableFilter = ({ eventTypes, setEventTypes }: TableFilterProps) => {
 
 				<div className="space-y-3">
 					<label
-						htmlFor="all-checkbox"
+						for="all-checkbox"
 						className="flex items-center gap-3 rounded-md p-1 pl-2 text-sm transition-colors hover:bg-muted"
 					>
 						<Checkbox
@@ -57,7 +57,7 @@ const TableFilter = ({ eventTypes, setEventTypes }: TableFilterProps) => {
 
 					{options.map((option) => (
 						<label
-							htmlFor={option.text}
+							for={option.text}
 							key={option.text}
 							className="flex items-center gap-3 rounded-md p-1 pl-2 text-sm transition-colors hover:bg-muted"
 						>

apps/analytics-web/app/_components/analytics/cards/TotalAppsCard.tsx

@@ -2,7 +2,7 @@ import type { Event } from "~/app/_actions/actions";
 import { SummaryCard } from "~/components/SummaryCard";
 import { getTotalAppsSetup } from "~/utils/getTotalAppsSetup";
 
-const TotalAppsCard = ({ events }: { events: Event[] }) => {
+export const TotalAppsCard = ({ events }: { events: Event[] }) => {
 	const totalAppsSetup = getTotalAppsSetup(events);
 	return (
 		<SummaryCard
@@ -12,5 +12,3 @@ const TotalAppsCard = ({ events }: { events: Event[] }) => {
 		/>
 	);
 };
-
-export default TotalAppsCard;

apps/analytics-web/app/_components/analytics/cards/TotalDataExported.tsx

@@ -2,7 +2,7 @@ import type { Event } from "~/app/_actions/actions";
 import { SummaryCard } from "~/components/SummaryCard";
 import { getTotalDataExported } from "~/utils/getTotalDataExported";
 
-const TotalDataExported = ({ events }: { events: Event[] }) => {
+export const TotalDataExported = ({ events }: { events: Event[] }) => {
 	const totalDataExported = getTotalDataExported(events);
 	return (
 		<SummaryCard
@@ -12,5 +12,3 @@ const TotalDataExported = ({ events }: { events: Event[] }) => {
 		/>
 	);
 };
-
-export default TotalDataExported;

apps/analytics-web/app/_components/analytics/cards/TotalErrorsCard.tsx

@@ -2,7 +2,7 @@ import type { Event } from "~/app/_actions/actions";
 import { SummaryCard } from "~/components/SummaryCard";
 import { getTotalErrors } from "~/utils/getTotalErrors";
 
-const TotalErrorsCard = ({ events }: { events: Event[] }) => {
+export const TotalErrorsCard = ({ events }: { events: Event[] }) => {
 	const totalErrors = getTotalErrors(events);
 	return (
 		<SummaryCard
@@ -12,5 +12,3 @@ const TotalErrorsCard = ({ events }: { events: Event[] }) => {
 		/>
 	);
 };
-
-export default TotalErrorsCard;

apps/analytics-web/app/_components/users/UserManagementDialog.tsx

@@ -13,7 +13,7 @@ import VerifiedUsersTable from "./UsersTable/UsersTable";
 export default function UserManagementDialog() {
 	return (
 		<Dialog>
-			<DialogTrigger asChild>
+			<DialogTrigger asChild={true}>
 				<Button variant="ghost" size="icon" className="mr-4">
 					<UsersIcon />
 				</Button>

apps/analytics-web/app/_components/users/UsersTable/VerifyUserSwitch.tsx

@@ -6,7 +6,7 @@ type VerifyUserSwitchProps = {
 	verified: boolean;
 };
 
-export default function VerifyUserSwitch({ id, verified: initialVerified }: VerifyUserSwitchProps) {
+export function VerifyUserSwitch({ id, verified: initialVerified }: VerifyUserSwitchProps) {
 	const [localVerified, setLocalVerified] = useState(initialVerified);
 
 	const updateMetadata = async () => {
@@ -21,11 +21,9 @@ export default function VerifyUserSwitch({ id, verified: initialVerified }: Veri
 
 			if (!response.ok) {
 				setLocalVerified(!localVerified);
-				console.error("Database update failed.");
 			}
 		} catch (error) {
 			setLocalVerified;
-			console.error("Error updating database:", error);
 		}
 	};
 

apps/analytics-web/app/api/event/route.test.ts

@@ -1,6 +1,7 @@
 import type { analyticsEvent } from "@codaco/analytics/src";
 import { testApiHandler } from "next-test-api-route-handler";
 import { afterEach, describe, expect, it, vi } from "vitest";
+// biome-ignore lint/style/noNamespaceImport: intended way to import route handler with test framework
 import * as appHandler from "./route";
 
 vi.mock("~/app/_actions/actions", () => {

apps/analytics-web/app/verification/page.tsx

@@ -2,7 +2,7 @@
 import { UserButton, useUser } from "@clerk/nextjs";
 import { redirect } from "next/navigation";
 
-export default function Verification() {
+export function Verification() {
 	const { user } = useUser();
 	const isVerified = user?.publicMetadata?.verified;
 	if (isVerified) {
@@ -16,7 +16,7 @@ export default function Verification() {
 				<p>Please contact the site administrator to be verified.</p>
 			</div>
 
-			<UserButton afterSignOutUrl="/" />
+			<UserButton />
 		</main>
 	);
 }

apps/analytics-web/components/DataTable/column-header.tsx

@@ -27,7 +27,7 @@ export function DataTableColumnHeader<TData, TValue>({
 	return (
 		<div className={cn("flex items-center space-x-2", className)}>
 			<DropdownMenu>
-				<DropdownMenuTrigger asChild>
+				<DropdownMenuTrigger asChild={true}>
 					<Button variant="ghost" size="sm" className="-ml-3 h-8 data-[state=open]:bg-accent">
 						<span>{title}</span>
 						{column.getIsSorted() === "desc" ? (

apps/analytics-web/components/DataTable/data-table.tsx

@@ -52,7 +52,7 @@ export function DataTable<TData, TValue>({ columns, data, pagination }: DataTabl
 					))}
 				</TableHeader>
 				<TableBody>
-					{table.getRowModel().rows?.length ? (
+					{table.getRowModel().rows?.length > 0 ? (
 						table.getRowModel().rows.map((row) => (
 							<TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
 								{row.getVisibleCells().map((cell) => (

apps/analytics-web/components/DialogButton.tsx

@@ -19,7 +19,7 @@ type DialogButtonProps = {
 export function DialogButton({ buttonLabel, title, description, content }: DialogButtonProps) {
 	return (
 		<Dialog>
-			<DialogTrigger asChild>
+			<DialogTrigger asChild={true}>
 				<Button variant="outline">{buttonLabel}</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen overflow-y-auto">

apps/analytics-web/components/ExportButton.tsx

@@ -10,8 +10,8 @@ type ExportButtonProps = {
 	filename: string;
 };
 
-const ExportButton: React.FC<ExportButtonProps> = ({ data, filename }) => {
-	const handleExportCSV = () => {
+export const ExportButton: React.FC<ExportButtonProps> = ({ data, filename }) => {
+	const handleExportCsv = () => {
 		const csvData = Papa.unparse(data);
 
 		const blob = new Blob([csvData], { type: "text/csv;charset=utf-8;" });
@@ -29,10 +29,8 @@ const ExportButton: React.FC<ExportButtonProps> = ({ data, filename }) => {
 	};
 
 	return (
-		<Button onClick={handleExportCSV} size="sm">
+		<Button onClick={handleExportCsv} size="sm">
 			<Download className="mr-2 h-4 w-4" /> Download Data
 		</Button>
 	);
 };
-
-export default ExportButton;

apps/analytics-web/components/ui/button.tsx

@@ -1,6 +1,6 @@
 import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
-import * as React from "react";
+import { forwardRef } from "react";
 
 import { cn } from "~/utils/shadcn";
 
@@ -35,7 +35,7 @@ export type ButtonProps = {
 } & React.ButtonHTMLAttributes<HTMLButtonElement> &
 	VariantProps<typeof buttonVariants>;
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 	({ className, variant, size, asChild = false, ...props }, ref) => {
 		const Comp = asChild ? Slot : "button";
 		return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;

apps/analytics-web/components/ui/card.tsx

@@ -42,4 +42,4 @@ const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
 );
 CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

apps/analytics-web/components/ui/dialog.tsx

@@ -1,8 +1,9 @@
 "use client";
 
+// biome-ignore lint/style/noNamespaceImport: <explanation>
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
-import * as React from "react";
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef, type HTMLAttributes } from "react";
 
 import { cn } from "~/utils/shadcn";
 
@@ -14,9 +15,9 @@ const DialogPortal = DialogPrimitive.Portal;
 
 const DialogClose = DialogPrimitive.Close;
 
-const DialogOverlay = React.forwardRef<
-	React.ElementRef<typeof DialogPrimitive.Overlay>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+const DialogOverlay = forwardRef<
+	ElementRef<typeof DialogPrimitive.Overlay>,
+	ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
 	<DialogPrimitive.Overlay
 		ref={ref}
@@ -29,9 +30,9 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
-const DialogContent = React.forwardRef<
-	React.ElementRef<typeof DialogPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+const DialogContent = forwardRef<
+	ElementRef<typeof DialogPrimitive.Content>,
+	ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
 	<DialogPortal>
 		<DialogOverlay />
@@ -53,19 +54,19 @@ const DialogContent = React.forwardRef<
 ));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+const DialogHeader = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
 	<div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
 );
 DialogHeader.displayName = "DialogHeader";
 
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+const DialogFooter = ({ className, ...props }: 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>
+const DialogTitle = forwardRef<
+	ElementRef<typeof DialogPrimitive.Title>,
+	ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
 	<DialogPrimitive.Title
 		ref={ref}
@@ -75,23 +76,23 @@ const DialogTitle = React.forwardRef<
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
-const DialogDescription = React.forwardRef<
-	React.ElementRef<typeof DialogPrimitive.Description>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+const DialogDescription = forwardRef<
+	ElementRef<typeof DialogPrimitive.Description>,
+	ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
 	<DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
 	Dialog,
-	DialogPortal,
-	DialogOverlay,
 	DialogClose,
-	DialogTrigger,
 	DialogContent,
-	DialogHeader,
+	DialogDescription,
 	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
 	DialogTitle,
-	DialogDescription,
+	DialogTrigger,
 };