Merge branch 'main' into pr/helmet

Author: kentcdodds

.vscode/remix.code-snippets

@@ -77,4 +77,4 @@
 			"}",
 		],
 	},
-}
+}

app/components/ui/button.tsx

@@ -5,7 +5,7 @@ import * as React from 'react'
 import { cn } from '#app/utils/misc.tsx'
 
 const buttonVariants = cva(
-	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors outline-none focus-visible:ring-2 focus-within:ring-2 ring-ring ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+	'inline-flex items-center justify-center rounded-md text-sm font-medium outline-none ring-ring ring-offset-2 ring-offset-background transition-colors focus-within:ring-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',
 	{
 		variants: {
 			variant: {

app/entry.server.tsx

@@ -1,8 +1,8 @@
 import { PassThrough } from 'node:stream'
+import { styleText } from 'node:util'
 import { contentSecurity } from '@nichtsam/helmet/rules/content/index'
 import { createReadableStreamFromReadable } from '@react-router/node'
 import * as Sentry from '@sentry/node'
-import chalk from 'chalk'
 import { isbot } from 'isbot'
 import { renderToPipeableStream } from 'react-dom/server'
 import {
@@ -136,7 +136,7 @@ export function handleError(
 		return
 	}
 	if (error instanceof Error) {
-		console.error(chalk.red(error.stack))
+		console.error(styleText('red', String(error.stack)))
 		void Sentry.captureException(error)
 	} else {
 		console.error(error)

app/routes/settings+/profile.two-factor.verify.tsx

@@ -59,8 +59,6 @@ export async function loader({ request }: Route.LoaderArgs) {
 	const issuer = new URL(getDomainUrl(request)).host
 	const otpUri = getTOTPAuthUri({
 		...verification,
-		// OTP clients break with the `-` in the algorithm name.
-		algorithm: verification.algorithm.replaceAll('-', ''),
 		accountName: user.email,
 		issuer,
 	})

app/utils/db.server.ts

@@ -1,7 +1,7 @@
+import { styleText } from 'node:util'
 import { remember } from '@epic-web/remember'
 // Changed import due to issue: https://github.com/remix-run/react-router/pull/12644
 import { PrismaClient } from '@prisma/client/index.js'
-import chalk from 'chalk'
 
 export const prisma = remember('prisma', () => {
 	// NOTE: if you change anything in this function you'll need to restart
@@ -29,7 +29,7 @@ export const prisma = remember('prisma', () => {
 						: e.duration < logThreshold * 1.4
 							? 'redBright'
 							: 'red'
-		const dur = chalk[color](`${e.duration}ms`)
+		const dur = styleText(color, `${e.duration}ms`)
 		console.info(`prisma:query - ${dur} - ${e.query}`)
 	})
 	void client.$connect()

docs/server-timing.md

@@ -78,7 +78,10 @@ export async function loader({ params }: Route.LoaderArgs) {
 // We have a general headers handler to save you from boilerplating.
 export const headers: HeadersFunction = pipeHeaders
 // this is basically what it does though
-export const headers: Route.HeadersFunction = ({ loaderHeaders, parentHeaders }) => {
+export const headers: Route.HeadersFunction = ({
+	loaderHeaders,
+	parentHeaders,
+}) => {
 	return {
 		'Server-Timing': combineServerTimings(parentHeaders, loaderHeaders), // <-- 4. Send headers
 	}

package-lock.json

@@ -4,8 +4,8 @@
   "sideEffects": false,
   "license": "MIT",
   "epic-stack": {
-    "head": "80b114fc0c1f3d6402627bc030d82e205dc3293c",
-    "date": "2025-02-11T04:40:56Z"
+    "head": "af3a7f9bba62284c17a03dfaecd077d4e88a0ccc",
+    "date": "2025-02-14T21:12:08Z"
   },
   "author": "Kent C. Dodds <[email protected]> (https://kentcdodds.com/)",
   "type": "module",
@@ -50,7 +50,7 @@
     "@epic-web/client-hints": "^1.3.5",
     "@epic-web/invariant": "^1.0.0",
     "@epic-web/remember": "^1.1.0",
-    "@epic-web/totp": "^2.1.1",
+    "@epic-web/totp": "^3.0.0",
     "@mjackson/form-data-parser": "^0.7.0",
     "@nasa-gcn/remix-seo": "^2.0.1",
     "@nichtsam/helmet": "0.2.0",
@@ -77,7 +77,6 @@
     "address": "^2.0.3",
     "bcryptjs": "^2.4.3",
     "better-sqlite3": "^11.8.1",
-    "chalk": "^5.4.1",
     "class-variance-authority": "^0.7.1",
     "close-with-grace": "^2.2.0",
     "clsx": "^2.1.1",

package.json

@@ -1,9 +1,9 @@
 import crypto from 'node:crypto'
+import { styleText } from 'node:util'
 import { helmet } from '@nichtsam/helmet/node-http'
 import { createRequestHandler } from '@react-router/express'
 import * as Sentry from '@sentry/node'
 import { ip as ipAddress } from 'address'
-import chalk from 'chalk'
 import closeWithGrace from 'close-with-grace'
 import compression from 'compression'
 import express from 'express'
@@ -230,9 +230,7 @@ if (!portAvailable && !IS_DEV) {
 const server = app.listen(portToUse, () => {
 	if (!portAvailable) {
 		console.warn(
-			chalk.yellow(
-				`⚠️  Port ${desiredPort} is not available, using ${portToUse} instead.`,
-			),
+			styleText('yellow', `⚠️  Port ${desiredPort} is not available, using ${portToUse} instead.`),
 		)
 	}
 	console.log(`🚀  We have liftoff!`)
@@ -248,9 +246,9 @@ const server = app.listen(portToUse, () => {
 
 	console.log(
 		`
-${chalk.bold('Local:')}            ${chalk.cyan(localUrl)}
-${lanUrl ? `${chalk.bold('On Your Network:')}  ${chalk.cyan(lanUrl)}` : ''}
-${chalk.bold('Press Ctrl+C to stop')}
+${styleText('bold', 'Local:')}            ${styleText('cyan', localUrl)}
+${lanUrl ? `${styleText('bold', 'On Your Network:')}  ${styleText('cyan', lanUrl)}` : ''}
+${styleText('bold', 'Press Ctrl+C to stop')}
 		`.trim(),
 	)
 })
@@ -260,8 +258,8 @@ closeWithGrace(async ({ err }) => {
 		server.close((e) => (e ? reject(e) : resolve('ok')))
 	})
 	if (err) {
-		console.error(chalk.red(err))
-		console.error(chalk.red(err.stack))
+		console.error(styleText('red', String(err)))
+		console.error(styleText('red', String(err.stack)))
 		if (SENTRY_ENABLED) {
 			Sentry.captureException(err)
 			await Sentry.flush(500)