biome passing

.vscode/settings.json

@@ -6,5 +6,8 @@
 	"editor.defaultFormatter": "biomejs.biome",
 	"[typescriptreact]": {
 		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[typescript]": {
+		"editor.defaultFormatter": "biomejs.biome"
 	}
 }

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

@@ -26,7 +26,9 @@ export default function EventsTable() {
 
 	useEffect(() => {
 		const eventTypesMap = new Map<string, EventType>();
-		events.forEach((event) => eventTypesMap.set(event.type, { text: event.type, isSelected: true }));
+		for (const event of events) {
+			eventTypesMap.set(event.type, { text: event.type, isSelected: true });
+		}
 
 		setEventTypes([...Array.from(eventTypesMap.values())]);
 	}, [events]);

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

@@ -3,6 +3,6 @@ import { DialogButton } from "~/components/DialogButton";
 
 export function StackTraceDialog({ error }: { error: Event }) {
 	return (
-		<DialogButton buttonLabel="Stack Trace" title="Stack Trace" description={error.message!} content={error.stack} />
+		<DialogButton buttonLabel="Stack Trace" title="Stack Trace" description={error.message} content={error.stack} />
 	);
 }

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

@@ -57,10 +57,15 @@ const TableFilter = ({ eventTypes, setEventTypes }: TableFilterProps) => {
 
 					{options.map((option) => (
 						<label
+							htmlFor={option.text}
 							key={option.text}
 							className="flex items-center gap-3 rounded-md p-1 pl-2 text-sm transition-colors hover:bg-muted"
 						>
-							<Checkbox checked={option.isSelected} onCheckedChange={() => toggleOption(option.text)} />
+							<Checkbox
+								id={option.text}
+								checked={option.isSelected}
+								onCheckedChange={() => toggleOption(option.text)}
+							/>
 							<span>{option.text}</span>
 						</label>
 					))}

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

@@ -9,7 +9,7 @@ export default async function VerifiedUsersTable() {
 	const users = clerkUsers.data.map((user) => {
 		return {
 			id: user.id,
-			fullName: user.firstName + " " + user.lastName,
+			fullName: `${user.firstName} ${user.lastName}`,
 			username: user.username,
 			verified: !!user.publicMetadata.verified,
 		};

apps/analytics-web/components/DialogButton.tsx

@@ -12,7 +12,7 @@ import {
 type DialogButtonProps = {
 	buttonLabel: string;
 	title: string;
-	description: string;
+	description: string | null;
 	content: ReactNode;
 };
 

apps/analytics-web/drizzle.config.ts

@@ -4,11 +4,13 @@ dotenv.config();
 import { defineConfig } from "drizzle-kit";
 
 export default defineConfig({
+	dialect: "postgresql",
 	schema: "./db/schema.ts",
 	out: "./drizzle",
-	driver: "pg",
+	driver: "pglite",
 	dbCredentials: {
-		connectionString: process.env.POSTGRES_URL!,
+		// biome-ignore lint/style/noNonNullAssertion: env variable must be defined
+		url: process.env.POSTGRES_URL!,
 	},
 	verbose: true,
 	strict: true,

apps/documentation/app/[locale]/[project]/_components/InnerLanguageSwitcher.tsx

@@ -11,7 +11,7 @@ type InnerLanguageSwitcherProps = {
 const InnerLanguageSwitcher = async ({ pathSegment, currentLocale, project }: InnerLanguageSwitcherProps) => {
 	const t = await getTranslations("DocPage");
 	const availableLocales = getAvailableLocalesForPath(project, pathSegment);
-	const filePath = `/${project}/` + pathSegment.join("/"); //document file path to navigate to
+	const filePath = `/${project}/${pathSegment.join("/")}`; //document file path to navigate to
 
 	// removes the current locale from availableLocales
 	const supportedLanguages = availableLocales.filter((locale) => locale !== currentLocale);

apps/documentation/app/types.ts

@@ -2,11 +2,13 @@ import { z } from "zod";
 
 export const projects = ["desktop", "fresco"] as const;
 
-export type ProjectsEnum = (typeof projects)[number];
+export type Project = (typeof projects)[number];
 
 export const locales = ["en"] as const;
 
-const Locale = z.enum(locales);
+export const zlocales = z.enum(locales);
+
+export type Locales = typeof locales;
 
 export type Locale = (typeof locales)[number];
 
@@ -16,10 +18,7 @@ export const itemTypes = [
 	"page", // Single page
 ] as const;
 
-const ItemTypesEnum = z.enum(itemTypes);
-
 export const SidebarItemBase = z.object({
-	type: ItemTypesEnum,
 	sourceFile: z.string().optional(),
 	label: z.string(),
 });
@@ -60,13 +59,14 @@ export const SidebarProjectSchema = SidebarItemBase.extend({
 
 export type SidebarProject = z.infer<typeof SidebarProjectSchema>;
 
-export const SidebarLocaleDefinitionSchema = z.record(z.string(), SidebarProjectSchema);
+export const SidebarLocaleDefinitionSchema = z.record(z.enum(projects), SidebarProjectSchema);
 
-export type SidebarLocaleDefinition = z.infer<typeof SidebarLocaleDefinitionSchema>;
+export type SidebarLocaleDefinition = Record<Project, SidebarProject>;
 
-export const SideBarSchema = z.record(Locale, SidebarLocaleDefinitionSchema);
+export const SideBarSchema = z.record(zlocales, SidebarLocaleDefinitionSchema);
 
-export type TSideBar = z.infer<typeof SideBarSchema>;
+// Can't infer this from above because of this: https://github.com/colinhacks/zod/issues/2623
+export type TSideBar = Record<Locale, SidebarLocaleDefinition>;
 
 const metadatatypes = ["folder", "project"] as const;
 

apps/documentation/components/FancyHeading.tsx

@@ -26,6 +26,7 @@ const FancyHeading = (props: HeadingProps) => {
 		const segments = word.split(" ");
 		return segments.map((segment, innerIndex) => (
 			<span
+				// biome-ignore lint/suspicious/noArrayIndexKey: word index won't change
 				key={`${outerIndex}-${innerIndex}`}
 				className="relative -top-[0.75em] -mb-[1em] inline-block overflow-hidden"
 			>
@@ -49,6 +50,7 @@ const FancyHeading = (props: HeadingProps) => {
 					renderWord(word, index)
 				) : (
 					<motion.span
+						// biome-ignore lint/suspicious/noArrayIndexKey: word index won't change
 						key={index}
 						custom={index}
 						variants={variants}

apps/documentation/components/FancyParagraph.tsx

@@ -26,6 +26,7 @@ const FancyParagraph = (props: ParagraphProps) => {
 		const segments = word.split(" ");
 		return segments.map((segment, innerIndex) => (
 			<span
+				// biome-ignore lint/suspicious/noArrayIndexKey: word index won't change
 				key={`${outerIndex}-${innerIndex}`}
 				className="relative -top-[0.75em] -mb-[1em] inline-block overflow-hidden"
 			>
@@ -49,6 +50,7 @@ const FancyParagraph = (props: ParagraphProps) => {
 					renderWord(word, index)
 				) : (
 					<motion.span
+						// biome-ignore lint/suspicious/noArrayIndexKey: word index won't change
 						key={index}
 						custom={index}
 						variants={variants}

apps/documentation/components/ProjectSwitcher.tsx

@@ -4,11 +4,11 @@ import { Heading, Paragraph, Select, SelectContent, SelectGroup, SelectItem, Sel
 import { useLocale, useTranslations } from "next-intl";
 import { usePathname } from "next/navigation";
 import { forwardRef } from "react";
-import { type Locale, type ProjectsEnum, projects } from "~/app/types";
+import { type Locale, type Project, projects } from "~/app/types";
 import { cn } from "~/lib/utils";
 import { useRouter } from "~/navigation";
 
-const getImageForProject = (project: ProjectsEnum) => {
+const getImageForProject = (project: Project) => {
 	if (project === "desktop") {
 		return <img src="/images/desktop.png" alt={project} className="h-10 w-auto" />;
 	}
@@ -21,7 +21,7 @@ const getImageForProject = (project: ProjectsEnum) => {
 const ProjectValue = forwardRef<
 	HTMLDivElement,
 	{
-		project: ProjectsEnum;
+		project: Project;
 		showDescription?: boolean;
 	}
 >(({ project, showDescription }, ref) => {
@@ -51,7 +51,7 @@ export default function ProjectSwitcher() {
 	const router = useRouter();
 	const pathname = usePathname();
 	// biome-ignore lint/style/noNonNullAssertion: path structure is known
-	const project = pathname.split("/")[2]! as ProjectsEnum;
+	const project = pathname.split("/")[2]! as Project;
 	const locale = useLocale() as Locale;
 
 	return (

apps/documentation/components/Sidebar.tsx

@@ -5,7 +5,7 @@ import { useLocale } from "next-intl";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { type RefObject, useEffect, useMemo, useRef, useState } from "react";
-import type { Locale, SidebarPage, TSideBar, SidebarFolder as TSidebarFolder } from "~/app/types";
+import type { Locale, Project, SidebarPage, TSideBar, SidebarFolder as TSidebarFolder } from "~/app/types";
 import { cn } from "~/lib/utils";
 import sidebarData from "~/public/sidebar.json";
 import DocSearchComponent from "./DocSearchComponent";
@@ -27,19 +27,23 @@ const sortSidebarItems = (sidebarItems: (TSidebarFolder | SidebarPage)[]) =>
 		if (a.navOrder !== null && b.navOrder !== null) {
 			return a.navOrder - b.navOrder;
 			// if only 'a' has navOrder, make it first
-		} else if (a.navOrder !== null) {
+		}
+		if (a.navOrder !== null) {
 			return -1;
 			// if only 'b' has navOrder, make it first
-		} else if (b.navOrder !== null) {
+		}
+		if (b.navOrder !== null) {
 			return 1;
-		} else {
-			// If neither has navOrder, sort alphabetically by label
-			return a.label.localeCompare(b.label);
 		}
+		// If neither has navOrder, sort alphabetically by label
+		return a.label.localeCompare(b.label);
 	});
 
+export function processSourceFile(type: "page", locale: Locale, sourceFile: string): string;
+export function processSourceFile(type: "folder", locale: Locale, sourceFile: string | undefined): string | undefined;
+
 // Used by sidebar to process sourceFile values into usable routes
-export const processSourceFile = (type: "folder" | "page", locale: Locale, sourceFile?: string) => {
+export function processSourceFile(type: "folder" | "page", locale: Locale, sourceFile?: string) {
 	if (!sourceFile) return;
 	// We can't use path.sep because the webpack node shim always returns '/'.
 	// Because this might be running on Windows, we need to use a regex to split
@@ -55,15 +59,15 @@ export const processSourceFile = (type: "folder" | "page", locale: Locale, sourc
 			// Process the last item to remove the locale and file extension
 			.map((segment, index, array) => {
 				if (index === array.length - 1) {
-					return segment.split(".")[0]!;
+					return segment.split(".")[0];
 				}
 				return segment;
 			})
 			.join("/");
 	}
 
 	return `/${locale}/${returnPath}`;
-};
+}
 
 const SidebarFolder = ({
 	label,
@@ -192,29 +196,31 @@ const renderSidebarItem = (
 	locale: Locale,
 	sidebarContainerRef: RefObject<HTMLDivElement>,
 ) => {
-	const sourceFile = processSourceFile(item.type, locale, item.sourceFile);
 	if (item.type === "folder") {
+		const sourceFile = processSourceFile(item.type, locale, item.sourceFile);
 		const sortedChildren = sortSidebarItems(Object.values(item.children));
 		return (
 			<SidebarFolder key={item.label} label={item.label} alwaysOpen={item.expanded} href={sourceFile}>
 				{sortedChildren.map((child) => renderSidebarItem(child, locale, sidebarContainerRef))}
 			</SidebarFolder>
 		);
-	} else {
-		return (
-			<SidebarLink sidebarContainerRef={sidebarContainerRef} key={item.label} href={sourceFile!} label={item.label} />
-		);
 	}
+
+	const sourceFile = processSourceFile(item.type, locale, item.sourceFile);
+	return (
+		<SidebarLink sidebarContainerRef={sidebarContainerRef} key={item.label} href={sourceFile} label={item.label} />
+	);
 };
 
 export function Sidebar({ className }: { className?: string }) {
 	const pathname = usePathname();
 	const locale = useLocale() as Locale;
-	const project = pathname.split("/")[2]!;
+	// biome-ignore lint/style/noNonNullAssertion: path structure is known
+	const project = pathname.split("/")[2]! as Project;
 	const typedSidebarData = sidebarData as TSideBar;
 	const sidebarContainerRef = useRef<HTMLDivElement>(null);
 
-	const formattedSidebarData = typedSidebarData[locale]![project]!.children;
+	const formattedSidebarData = typedSidebarData[locale][project].children;
 	const sortedSidebarItems = sortSidebarItems(Object.values(formattedSidebarData));
 
 	return (

apps/documentation/components/ui/sheet.tsx

@@ -56,6 +56,7 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
 		<SheetPortal>
 			<SheetOverlay />
 			<SheetPrimitive.Content
+				// biome-ignore lint/a11y/useSemanticElements: doesn't seem appropriate to use footer here
 				role="contentinfo"
 				ref={ref}
 				className={cn(sheetVariants({ side }), className)}

apps/documentation/hooks/useHighlighted.ts

@@ -8,19 +8,21 @@ const useHighlighted = (id: string): [boolean, React.Dispatch<React.SetStateActi
 
 	useEffect(() => {
 		const handleObserver = (entries: IntersectionObserverEntry[]) => {
-			entries.forEach((entry) => {
+			for (const entry of entries) {
 				if (entry.isIntersecting) {
 					setActiveId(entry.target.id);
 				}
-			});
+			}
 		};
 
 		observer.current = new IntersectionObserver(handleObserver, {
 			rootMargin: "0% 0% -75% 0%",
 		});
 
 		const elements = document.querySelectorAll("h2, h3");
-		elements.forEach((elem) => observer.current?.observe(elem));
+		for (const elem of elements) {
+			observer.current?.observe(elem);
+		}
 
 		return () => observer.current?.disconnect();
 	}, []);

apps/documentation/lib/docs.tsx

@@ -80,6 +80,7 @@ export const processPath = (docPath: string) => {
 		// Process the last item to remove the locale and file extension
 		.map((segment, index, array) => {
 			if (index === array.length - 1) {
+				// biome-ignore lint/style/noNonNullAssertion: we know that the last element is a string
 				return segment.split(".")[0]!;
 			}
 			return segment;
@@ -254,7 +255,7 @@ export async function getDocumentForPath({
 				figcaption: (props) => <figcaption {...props} className="mt-2 text-center text-sm italic" />,
 				img: (props) => (
 					<a href={props.src} target="_blank" rel="noreferrer" className="my-10 w-full px-8">
-						<img alt={props.alt} {...props} className="w-full" />
+						<img {...props} alt={props.alt} className="w-full" />
 					</a>
 				),
 				keyconcept: (props: { title: string; children: ReactNode }) => <KeyConcept {...props} />,

apps/documentation/lib/processPreTags.ts

@@ -1,4 +1,4 @@
-import { toString } from "hast-util-to-string";
+import { toString as hastNodeToString } from "hast-util-to-string";
 import { visit } from "unist-util-visit";
 
 type Tree = {
@@ -21,7 +21,7 @@ const processPreTags = () => {
 			if (!codeElement) return;
 
 			// Extract the text content from the `code` element
-			const rawCodeContent = toString(codeElement);
+			const rawCodeContent = hastNodeToString(codeElement);
 
 			// Add the `raw` property with the extracted content to the `pre` element
 			node.properties = { ...(node.properties || {}), raw: rawCodeContent };

apps/documentation/lib/tableOfContents.ts

@@ -1,6 +1,6 @@
 import type { Nodes, Root } from "hast";
 import { headingRank } from "hast-util-heading-rank";
-import { toString } from "mdast-util-to-string";
+import { toString as hastNodeToString } from "mdast-util-to-string";
 import { visit } from "unist-util-visit";
 import type { VFile } from "vfile";
 
@@ -28,12 +28,12 @@ function getHeadingsForTree(root: Nodes): HeadingNode[] {
 
 	visit(root, "element", (node: SpecialNodes) => {
 		if (headingRank(node) && node.properties.id) {
-			const level = headingRank(node)!;
+			const level = headingRank(node);
 
 			// If this is a level 2 heading, we want to start a new tree
 			if (level === 2) {
 				indexMap.push({
-					value: toString(node),
+					value: hastNodeToString(node),
 					level,
 					id: node.properties.id,
 					children: [],
@@ -46,7 +46,7 @@ function getHeadingsForTree(root: Nodes): HeadingNode[] {
 
 				if (!lastLevel2) {
 					indexMap.push({
-						value: toString(node),
+						value: hastNodeToString(node),
 						level: 2,
 						id: node.properties.id,
 						children: [],
@@ -56,7 +56,7 @@ function getHeadingsForTree(root: Nodes): HeadingNode[] {
 				}
 
 				lastLevel2.children.push({
-					value: toString(node),
+					value: hastNodeToString(node),
 					level,
 					id: node.properties.id,
 					children: [],