chore: format

kentcdodds · kentcdodds · commit c6a7fc23403f · 2025-05-05T10:55:34.000-06:00
diff --git a/app/components/error-boundary.tsx b/app/components/error-boundary.tsx
@@ -41,7 +41,7 @@ export function GeneralErrorBoundary({
 	}, [error, isResponse])
 
 	return (
-		<div className="container flex items-center justify-center p-20 text-h2">
+		<div className="text-h2 container flex items-center justify-center p-20">
 			{isResponse
 				? (statusHandlers?.[error.status] ?? defaultStatusHandler)({
 						error,
diff --git a/app/components/forms.tsx b/app/components/forms.tsx
@@ -26,7 +26,7 @@ export function ErrorList({
 	return (
 		<ul id={id} className="flex flex-col gap-1">
 			{errorsToRender.map((e) => (
-				<li key={e} className="text-[10px] text-foreground-destructive">
+				<li key={e} className="text-foreground-destructive text-[10px]">
 					{e}
 				</li>
 			))}
@@ -57,7 +57,7 @@ export function Field({
 				aria-describedby={errorId}
 				{...inputProps}
 			/>
-			<div className="min-h-[32px] px-4 pb-3 pt-1">
+			<div className="min-h-[32px] px-4 pt-1 pb-3">
 				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
 			</div>
 		</div>
@@ -101,7 +101,7 @@ export function OTPField({
 					<InputOTPSlot index={5} />
 				</InputOTPGroup>
 			</InputOTP>
-			<div className="min-h-[32px] px-4 pb-3 pt-1">
+			<div className="min-h-[32px] px-4 pt-1 pb-3">
 				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
 			</div>
 		</div>
@@ -131,7 +131,7 @@ export function TextareaField({
 				aria-describedby={errorId}
 				{...textareaProps}
 			/>
-			<div className="min-h-[32px] px-4 pb-3 pt-1">
+			<div className="min-h-[32px] px-4 pt-1 pb-3">
 				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
 			</div>
 		</div>
@@ -191,10 +191,10 @@ export function CheckboxField({
 				<label
 					htmlFor={id}
 					{...labelProps}
-					className="self-center text-body-xs text-muted-foreground"
+					className="text-body-xs text-muted-foreground self-center"
 				/>
 			</div>
-			<div className="px-4 pb-3 pt-1">
+			<div className="px-4 pt-1 pb-3">
 				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
 			</div>
 		</div>
diff --git a/app/routes/$.tsx b/app/routes/$.tsx
@@ -32,7 +32,7 @@ export function ErrorBoundary() {
 					<div className="flex flex-col gap-6">
 						<div className="flex flex-col gap-3">
 							<h1>We can't find this page:</h1>
-							<pre className="whitespace-pre-wrap break-all text-body-lg">
+							<pre className="text-body-lg break-all whitespace-pre-wrap">
 								{location.pathname}
 							</pre>
 						</div>
diff --git a/app/routes/_auth+/forgot-password.tsx b/app/routes/_auth+/forgot-password.tsx
@@ -131,15 +131,15 @@ export default function ForgotPasswordRoute() {
 	})
 
 	return (
-		<div className="container pb-32 pt-20">
+		<div className="container pt-20 pb-32">
 			<div className="flex flex-col justify-center">
 				<div className="text-center">
 					<h1 className="text-h1">Forgot Password</h1>
-					<p className="mt-3 text-body-md text-muted-foreground">
+					<p className="text-body-md text-muted-foreground mt-3">
 						No worries, we'll send you reset instructions.
 					</p>
 				</div>
-				<div className="mx-auto mt-16 min-w-full max-w-sm sm:min-w-[368px]">
+				<div className="mx-auto mt-16 max-w-sm min-w-full sm:min-w-[368px]">
 					<forgotPassword.Form method="POST" {...getFormProps(form)}>
 						<HoneypotInputs />
 						<div>
@@ -174,7 +174,7 @@ export default function ForgotPasswordRoute() {
 					</forgotPassword.Form>
 					<Link
 						to="/login"
-						className="mt-11 text-center text-body-sm font-bold"
+						className="text-body-sm mt-11 text-center font-bold"
 					>
 						Back to Login
 					</Link>
diff --git a/app/routes/_auth+/login.tsx b/app/routes/_auth+/login.tsx
@@ -99,7 +99,7 @@ export default function LoginPage({ actionData }: Route.ComponentProps) {
 	})
 
 	return (
-		<div className="flex min-h-full flex-col justify-center pb-32 pt-20">
+		<div className="flex min-h-full flex-col justify-center pt-20 pb-32">
 			<div className="mx-auto w-full max-w-md">
 				<div className="flex flex-col gap-3 text-center">
 					<h1 className="text-h1">Welcome back!</h1>
diff --git a/app/routes/_auth+/onboarding.tsx b/app/routes/_auth+/onboarding.tsx
@@ -151,7 +151,7 @@ export default function OnboardingRoute({
 	})
 
 	return (
-		<div className="container flex min-h-full flex-col justify-center pb-32 pt-20">
+		<div className="container flex min-h-full flex-col justify-center pt-20 pb-32">
 			<div className="mx-auto w-full max-w-lg">
 				<div className="flex flex-col gap-3 text-center">
 					<h1 className="text-h1">Welcome aboard {loaderData.email}!</h1>
@@ -162,7 +162,7 @@ export default function OnboardingRoute({
 				<Spacer size="xs" />
 				<Form
 					method="POST"
-					className="mx-auto min-w-full max-w-sm sm:min-w-[368px]"
+					className="mx-auto max-w-sm min-w-full sm:min-w-[368px]"
 					{...getFormProps(form)}
 				>
 					<HoneypotInputs />
diff --git a/app/routes/_auth+/reset-password.tsx b/app/routes/_auth+/reset-password.tsx
@@ -96,15 +96,15 @@ export default function ResetPasswordPage({
 	})
 
 	return (
-		<div className="container flex flex-col justify-center pb-32 pt-20">
+		<div className="container flex flex-col justify-center pt-20 pb-32">
 			<div className="text-center">
 				<h1 className="text-h1">Password Reset</h1>
-				<p className="mt-3 text-body-md text-muted-foreground">
+				<p className="text-body-md text-muted-foreground mt-3">
 					Hi, {loaderData.resetPasswordUsername}. No worries. It happens all the
 					time.
 				</p>
 			</div>
-			<div className="mx-auto mt-16 min-w-full max-w-sm sm:min-w-[368px]">
+			<div className="mx-auto mt-16 max-w-sm min-w-full sm:min-w-[368px]">
 				<Form method="POST" {...getFormProps(form)}>
 					<Field
 						labelProps={{
diff --git a/app/routes/_auth+/verify.tsx b/app/routes/_auth+/verify.tsx
@@ -49,7 +49,7 @@ export default function VerifyRoute({ actionData }: Route.ComponentProps) {
 	const checkEmail = (
 		<>
 			<h1 className="text-h1">Check your email</h1>
-			<p className="mt-3 text-body-md text-muted-foreground">
+			<p className="text-body-md text-muted-foreground mt-3">
 				We've sent you a code to verify your email address.
 			</p>
 		</>
@@ -62,7 +62,7 @@ export default function VerifyRoute({ actionData }: Route.ComponentProps) {
 		'2fa': (
 			<>
 				<h1 className="text-h1">Check your 2FA app</h1>
-				<p className="mt-3 text-body-md text-muted-foreground">
+				<p className="text-body-md text-muted-foreground mt-3">
 					Please enter your 2FA code to verify your identity.
 				</p>
 			</>
@@ -85,7 +85,7 @@ export default function VerifyRoute({ actionData }: Route.ComponentProps) {
 	})
 
 	return (
-		<main className="container flex flex-col justify-center pb-32 pt-20">
+		<main className="container flex flex-col justify-center pt-20 pb-32">
 			<div className="text-center">
 				{type ? headings[type] : 'Invalid Verification Type'}
 			</div>
diff --git a/app/routes/_marketing+/index.tsx b/app/routes/_marketing+/index.tsx
@@ -34,10 +34,10 @@ export default function Index() {
 				<div className="flex max-w-md flex-col items-center text-center xl:order-2 xl:items-start xl:text-left">
 					<a
 						href="https://www.epicweb.dev/stack"
-						className="animate-slide-top [animation-fill-mode:backwards] xl:animate-slide-left xl:[animation-delay:0.5s] xl:[animation-fill-mode:backwards]"
+						className="animate-slide-top xl:animate-slide-left [animation-fill-mode:backwards] xl:[animation-delay:0.5s] xl:[animation-fill-mode:backwards]"
 					>
 						<svg
-							className="size-20 text-foreground xl:-mt-4"
+							className="text-foreground size-20 xl:-mt-4"
 							xmlns="http://www.w3.org/2000/svg"
 							fill="none"
 							viewBox="0 0 65 65"
@@ -50,13 +50,13 @@ export default function Index() {
 					</a>
 					<h1
 						data-heading
-						className="mt-8 animate-slide-top text-4xl font-medium text-foreground [animation-delay:0.3s] [animation-fill-mode:backwards] md:text-5xl xl:mt-4 xl:animate-slide-left xl:text-6xl xl:[animation-delay:0.8s] xl:[animation-fill-mode:backwards]"
+						className="animate-slide-top text-foreground xl:animate-slide-left mt-8 text-4xl font-medium [animation-delay:0.3s] [animation-fill-mode:backwards] md:text-5xl xl:mt-4 xl:text-6xl xl:[animation-delay:0.8s] xl:[animation-fill-mode:backwards]"
 					>
 						<a href="https://www.epicweb.dev/stack">The Epic Stack</a>
 					</h1>
 					<p
 						data-paragraph
-						className="mt-6 animate-slide-top text-xl/7 text-muted-foreground [animation-delay:0.8s] [animation-fill-mode:backwards] xl:mt-8 xl:animate-slide-left xl:text-xl/6 xl:leading-10 xl:[animation-delay:1s] xl:[animation-fill-mode:backwards]"
+						className="animate-slide-top text-muted-foreground xl:animate-slide-left mt-6 text-xl/7 [animation-delay:0.8s] [animation-fill-mode:backwards] xl:mt-8 xl:text-xl/6 xl:leading-10 xl:[animation-delay:1s] xl:[animation-fill-mode:backwards]"
 					>
 						Check the{' '}
 						<a
@@ -84,7 +84,7 @@ export default function Index() {
 									<TooltipTrigger asChild>
 										<a
 											href={logo.href}
-											className="grid size-20 place-items-center rounded-2xl bg-violet-600/10 p-4 transition hover:-rotate-6 hover:bg-violet-600/15 dark:bg-violet-200 dark:hover:bg-violet-100 sm:size-24"
+											className="grid size-20 place-items-center rounded-2xl bg-violet-600/10 p-4 transition hover:-rotate-6 hover:bg-violet-600/15 sm:size-24 dark:bg-violet-200 dark:hover:bg-violet-100"
 										>
 											<img src={logo.src} alt="" />
 										</a>
diff --git a/app/routes/admin+/cache.tsx b/app/routes/admin+/cache.tsx
@@ -122,7 +122,7 @@ export default function CacheAdminRoute({ loaderData }: Route.ComponentProps) {
 								defaultValue: query,
 							}}
 						/>
-						<div className="flex h-16 w-14 items-center text-lg font-medium text-muted-foreground">
+						<div className="text-muted-foreground flex h-16 w-14 items-center text-lg font-medium">
 							<span title="Total results shown">
 								{loaderData.cacheKeys.sqlite.length +
 									loaderData.cacheKeys.lru.length}
diff --git a/app/routes/settings+/profile.connections.tsx b/app/routes/settings+/profile.connections.tsx
@@ -133,7 +133,7 @@ export default function Connections({ loaderData }: Route.ComponentProps) {
 			) : (
 				<p>You don't have any connections yet.</p>
 			)}
-			<div className="mt-5 flex flex-col gap-5 border-b-2 border-t-2 border-border py-3">
+			<div className="border-border mt-5 flex flex-col gap-5 border-t-2 border-b-2 py-3">
 				{providerNames.map((providerName) => (
 					<ProviderConnectionForm
 						key={providerName}
diff --git a/app/routes/settings+/profile.passkeys.tsx b/app/routes/settings+/profile.passkeys.tsx
@@ -139,7 +139,7 @@ export default function Passkeys({ loaderData }: Route.ComponentProps) {
 			</div>
 
 			{error ? (
-				<div className="rounded-lg bg-destructive/15 p-4 text-destructive">
+				<div className="bg-destructive/15 text-destructive rounded-lg p-4">
 					{error}
 				</div>
 			) : null}
@@ -149,7 +149,7 @@ export default function Passkeys({ loaderData }: Route.ComponentProps) {
 					{loaderData.passkeys.map((passkey) => (
 						<li
 							key={passkey.id}
-							className="flex items-center justify-between gap-4 rounded-lg border border-muted-foreground p-4"
+							className="border-muted-foreground flex items-center justify-between gap-4 rounded-lg border p-4"
 						>
 							<div className="flex flex-col gap-2">
 								<div className="flex items-center gap-2">
@@ -160,7 +160,7 @@ export default function Passkeys({ loaderData }: Route.ComponentProps) {
 											: 'Security Key'}
 									</span>
 								</div>
-								<div className="text-sm text-muted-foreground">
+								<div className="text-muted-foreground text-sm">
 									Registered {formatDistanceToNow(new Date(passkey.createdAt))}{' '}
 									ago
 								</div>
@@ -182,7 +182,7 @@ export default function Passkeys({ loaderData }: Route.ComponentProps) {
 					))}
 				</ul>
 			) : (
-				<div className="text-center text-muted-foreground">
+				<div className="text-muted-foreground text-center">
 					No passkeys registered yet
 				</div>
 			)}
diff --git a/app/routes/settings+/profile.tsx b/app/routes/settings+/profile.tsx
@@ -48,7 +48,7 @@ export default function EditUserProfile() {
 		.filter(Boolean)
 
 	return (
-		<div className="m-auto mb-24 mt-16 max-w-3xl">
+		<div className="m-auto mt-16 mb-24 max-w-3xl">
 			<div className="container">
 				<ul className="flex gap-3">
 					<li>
@@ -74,7 +74,7 @@ export default function EditUserProfile() {
 				</ul>
 			</div>
 			<Spacer size="xs" />
-			<main className="mx-auto bg-muted px-6 py-8 md:container md:rounded-3xl">
+			<main className="bg-muted mx-auto px-6 py-8 md:container md:rounded-3xl">
 				<Outlet />
 			</main>
 		</div>
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
@@ -1,5 +1,5 @@
 @import 'tailwindcss';
-@import "tw-animate-css";
+@import 'tw-animate-css';
 
 @custom-variant dark (&:is(.dark *));
 
@@ -143,7 +143,7 @@
 	--text-button: 0.75rem;
 	--text-button--line-height: 1rem;
 	--text-button--font-weight: 700;
-	--animate-roll-reveal: roll-reveal 0.4s cubic-bezier(.22, 1.28, .54, .99);
+	--animate-roll-reveal: roll-reveal 0.4s cubic-bezier(0.22, 1.28, 0.54, 0.99);
 	--animate-slide-left: slide-left 0.3s ease-out;
 	--animate-slide-top: slide-top 0.3s ease-out;
 	--animate-caret-blink: caret-blink 1.25s ease-out infinite;
@@ -185,7 +185,6 @@
 	}
 
 	@keyframes caret-blink {
-
 		0%,
 		70%,
 		100% {
@@ -203,21 +202,19 @@
 	margin-inline: auto;
 	padding-inline: 2rem;
 
-	@media(width >=1400px) {
+	@media (width >=1400px) {
 		& {
 			max-width: 1400px;
 		}
 	}
 }
 
-
 @layer base {
-
 	*,
 	::after,
 	::before,
 	::backdrop,
 	::file-selector-button {
 		border-color: hsl(var(--border));
 	}
-}
+}
diff --git a/docs/features.md b/docs/features.md
@@ -9,7 +9,8 @@ Here are a few things you get today:
   [LiteFS](https://fly.io/docs/litefs/)
 - Healthcheck endpoint for
   [Fly backups region fallbacks](https://fly.io/docs/reference/configuration/#services-http_checks)
-- [Grafana](https://fly-metrics.net/) dashboards of the running app via Fly Metrics
+- [Grafana](https://fly-metrics.net/) dashboards of the running app via Fly
+  Metrics
 - [GitHub Actions](https://github.com/features/actions) with testing and deploy
   on merge for both production and staging environments
 - Email/Password Authentication with
diff --git a/docs/routing.md b/docs/routing.md
@@ -9,10 +9,10 @@ of the app. Specifically "hybrid routes."
 
 We'll defer to the `remix-flat-routes` documentation for specifics, but an
 important thing for you to know as you get used to this convention is you can
-always run `npx react-router routes` from the root of the app and it will output the
-routes of your application in a JSX-like output that will reveal the routes that
-will be generated based on your current file structure. Here's an example of the
-Epic Stack routes at the time of this writing:
+always run `npx react-router routes` from the root of the app and it will output
+the routes of your application in a JSX-like output that will reveal the routes
+that will be generated based on your current file structure. Here's an example
+of the Epic Stack routes at the time of this writing:
 
 ```
 app/routes
