improve ux for timezones

Author: kentcdodds

app/components/forms.tsx

@@ -68,6 +68,37 @@ export function Field({
 	)
 }
 
+export function SelectField({
+	labelProps,
+	selectProps,
+	errors,
+	className,
+}: {
+	labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
+	selectProps: React.SelectHTMLAttributes<HTMLSelectElement>
+	errors?: ListOfErrors
+	className?: string
+}) {
+	const fallbackId = useId()
+	const id = selectProps.id ?? fallbackId
+	const errorId = errors?.length ? `${id}-error` : undefined
+	return (
+		<div className={className}>
+			<Label htmlFor={id} {...labelProps} />
+			<select
+				id={id}
+				aria-invalid={errorId ? true : undefined}
+				aria-describedby={errorId}
+				className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid"
+				{...selectProps}
+			/>
+			<div className="min-h-[32px] px-4 pb-3 pt-1">
+				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
+			</div>
+		</div>
+	)
+}
+
 export function OTPField({
 	labelProps,
 	inputProps,

app/routes/recipients+/$recipientId_.edit.tsx

@@ -30,7 +30,9 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 	})
 	invariantResponse(recipient, 'Not found', { status: 404 })
 
-	return json({ recipient })
+	const supportedTimeZones = Intl.supportedValuesOf('timeZone')
+
+	return json({ recipient, supportedTimeZones })
 }
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
@@ -44,7 +46,12 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 export default function NoteEdit() {
 	const data = useLoaderData<typeof loader>()
 
-	return <RecipientEditor recipient={data.recipient} />
+	return (
+		<RecipientEditor
+			recipient={data.recipient}
+			supportedTimeZones={data.supportedTimeZones}
+		/>
+	)
 }
 
 export function ErrorBoundary() {

app/routes/recipients+/__editor.tsx

@@ -1,12 +1,17 @@
-import { getFormProps, getInputProps, useForm } from '@conform-to/react'
+import {
+	getFormProps,
+	getInputProps,
+	getSelectProps,
+	useForm,
+} from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type Recipient } from '@prisma/client'
 import { type SerializeFrom } from '@remix-run/node'
 import { Form, useActionData, useFetcher } from '@remix-run/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { floatingToolbarClassName } from '#app/components/floating-toolbar.tsx'
-import { ErrorList, Field } from '#app/components/forms.tsx'
+import { ErrorList, Field, SelectField } from '#app/components/forms.tsx'
 import { Icon } from '#app/components/ui/icon.js'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { useDoubleCheck, useIsPending } from '#app/utils/misc.tsx'
@@ -34,8 +39,10 @@ export const DeleteRecipientSchema = z.object({
 })
 
 export function RecipientEditor({
+	supportedTimeZones,
 	recipient,
 }: {
+	supportedTimeZones: Array<string>
 	recipient?: SerializeFrom<
 		Pick<
 			Recipient,
@@ -105,10 +112,15 @@ export function RecipientEditor({
 						}}
 						errors={fields.scheduleCron.errors}
 					/>
-					<Field
+					<SelectField
 						labelProps={{ children: 'Time Zone' }}
-						inputProps={{
-							...getInputProps(fields.timeZone, { type: 'text' }),
+						selectProps={{
+							...getSelectProps(fields.timeZone),
+							children: supportedTimeZones.map(tz => (
+								<option key={tz} value={tz}>
+									{tz}
+								</option>
+							)),
 						}}
 						errors={fields.timeZone.errors}
 					/>

app/routes/recipients+/new.tsx

@@ -4,6 +4,7 @@ import {
 	json,
 	type LoaderFunctionArgs,
 } from '@remix-run/node'
+import { useLoaderData } from '@remix-run/react'
 import { requireUserId } from '#app/utils/auth.server.ts'
 import { RecipientEditor } from './__editor.tsx'
 
@@ -15,11 +16,16 @@ export const handle: SEOHandle = {
 
 export async function loader({ request }: LoaderFunctionArgs) {
 	await requireUserId(request)
-	return json({})
+	const supportedTimeZones = Intl.supportedValuesOf('timeZone')
+	return json({ supportedTimeZones })
 }
 
 export const meta: MetaFunction = () => {
 	return [{ title: `Create New Recipient | GratiText` }]
 }
 
-export default RecipientEditor
+export default function NewRecipientEditor() {
+	const data = useLoaderData<typeof loader>()
+
+	return <RecipientEditor supportedTimeZones={data.supportedTimeZones} />
+}

package-lock.json

@@ -51,6 +51,7 @@
     "@paralleldrive/cuid2": "^2.2.2",
     "@prisma/client": "^5.15.0",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
@@ -70,6 +71,7 @@
     "class-variance-authority": "^0.7.0",
     "close-with-grace": "^1.3.0",
     "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
     "compression": "^1.7.4",
     "cookie": "^0.6.0",
     "cron-parser": "^4.9.0",