New form fields

app/components/forms.tsx

@@ -1,16 +1,40 @@
-import { useInputControl } from '@conform-to/react'
+import { FieldMetadata, useInputControl } from '@conform-to/react'
 import { REGEXP_ONLY_DIGITS_AND_CHARS, type OTPInputProps } from 'input-otp'
-import React, { useId } from 'react'
-import { Checkbox, type CheckboxProps } from './ui/checkbox.tsx'
+import React, { useId, useState } from 'react'
+import { Checkbox, type CheckboxProps } from './ui/checkbox'
 import {
 	InputOTP,
 	InputOTPGroup,
 	InputOTPSeparator,
 	InputOTPSlot,
-} from './ui/input-otp.tsx'
-import { Input } from './ui/input.tsx'
-import { Label } from './ui/label.tsx'
-import { Textarea } from './ui/textarea.tsx'
+} from './ui/input-otp'
+import { Input } from './ui/input'
+import { Label } from './ui/label'
+import { Button } from './ui/button'
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from './ui/select'
+import { Textarea } from './ui/textarea'
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+	CommandDialog,
+} from '#app/components/ui/command'
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from '#app/components/ui/popover'
+import { Icon } from '#app/components/ui/icon'
+import { cn } from '#app/utils/misc'
 
 export type ListOfErrors = Array<string | null | undefined> | null | undefined
 
@@ -48,6 +72,7 @@
 	const fallbackId = useId()
 	const id = inputProps.id ?? fallbackId
 	const errorId = errors?.length ? `${id}-error` : undefined
+
 	return (
 		<div className={className}>
 			<Label htmlFor={id} {...labelProps} />
@@ -64,6 +89,58 @@
 	)
 }
 
+export function SelectField({
+	labelProps,
+	selectProps,
+	selectOptions,
+	errors,
+	className,
+}: {
+	labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
+	selectProps: {
+		name?: string
+		placeholder?: string
+		disabled?: boolean
+		onValueChange?: (value: string) => void
+	}
+	selectOptions?: { value: string; label: string }[]
+	errors?: ListOfErrors
+	className?: string
+}) {
+	const fallbackId = useId()
+	const id = selectProps.name ?? fallbackId
+	const errorId = errors?.length ? `${id}-error` : undefined
+	const placeholder = selectProps?.placeholder || 'Select'
+
+	return (
+		<div className={className}>
+			<Label htmlFor={id} {...labelProps} />
+			<Select {...selectProps}>
+				<SelectTrigger
+					aria-invalid={errorId ? true : undefined}
+					aria-describedby={errorId}
+				>
+					<SelectValue placeholder={placeholder} />
+				</SelectTrigger>
+				<SelectContent>
+					{selectOptions?.map((option) => (
+						<SelectItem
+							key={`${id}-${option.value}`}
+							value={option.value}
+							className="hover:bg-primary/10"
+						>
+							{option.label}
+						</SelectItem>
+					))}
+				</SelectContent>
+			</Select>
+			<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,
@@ -122,6 +199,7 @@
 	const fallbackId = useId()
 	const id = textareaProps.id ?? textareaProps.name ?? fallbackId
 	const errorId = errors?.length ? `${id}-error` : undefined
+
 	return (
 		<div className={className}>
 			<Label htmlFor={id} {...labelProps} />
@@ -200,3 +278,167 @@
 		</div>
 	)
 }
+
+// Add an input for the type="time" input. Should model the Field component.
+export function TimeField({
+	labelProps,
+	inputProps,
+	errors,
+	className,
+}: {
+	labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
+	inputProps: React.InputHTMLAttributes<HTMLInputElement>
+	errors?: ListOfErrors
+	className?: string
+}) {
+	const fallbackId = useId()
+	const id = inputProps.id ?? fallbackId
+	const errorId = errors?.length ? `${id}-error` : undefined
+
+	return (
+		<div className={className}>
+			<Label htmlFor={id} {...labelProps} />
+			<Input
+				id={id}
+				type="time"
+				aria-invalid={errorId ? true : undefined}
+				aria-describedby={errorId}
+				{...inputProps}
+			/>
+			<div className="min-h-[32px] px-4 pb-3 pt-1">
+				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
+			</div>
+		</div>
+	)
+}
+
+export function NumberField({
+	labelProps,
+	inputProps,
+	errors,
+	className,
+}: {
+	labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
+	inputProps: React.InputHTMLAttributes<HTMLInputElement>
+	errors?: ListOfErrors
+	className?: string
+}) {
+	const fallbackId = useId()
+	const id = inputProps.id ?? fallbackId
+	const errorId = errors?.length ? `${id}-error` : undefined
+
+	return (
+		<div className={className}>
+			<Label htmlFor={id} {...labelProps} />
+			<Input
+				id={id}
+				type="number"
+				aria-invalid={errorId ? true : undefined}
+				aria-describedby={errorId}
+				{...inputProps}
+			/>
+			<div className="min-h-[32px] px-4 pb-3 pt-1">
+				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
+			</div>
+		</div>
+	)
+}
+
+export function ComboboxField({
+	labelProps,
+	buttonProps,
+	comboboxProps,
+	comboboxOptions,
+	errors,
+	className,
+	field,
+}: {
+	labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
+	buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>
+	comboboxProps: {
+		name: string
+		placeholder?: string
+		emptyText?: string | JSX.Element
+	}
+	comboboxOptions: { value: string; label: string }[]
+	errors?: ListOfErrors
+	className?: string
+	field: FieldMetadata<string>
+}) {
+	const [open, setOpen] = useState(false)
+	const control = useInputControl(field)
+	const fallbackId = useId()
+	const id = comboboxProps.name ?? fallbackId
+	const errorId = errors?.length ? `${id}-error` : undefined
+
+	return (
+		<div className={className}>
+			<Label htmlFor={id} {...labelProps} />
+			<Popover open={open} onOpenChange={setOpen}>
+				<PopoverTrigger asChild>
+					<Button
+						{...buttonProps}
+						variant="outline"
+						role="combobox"
+						aria-expanded={open}
+						aria-invalid={errorId ? true : undefined}
+						aria-describedby={errorId}
+						className="w-full justify-between"
+					>
+						{control.value
+							? comboboxOptions.find((option) => option.value === control.value)
+									?.label
+							: comboboxProps.placeholder || 'Select...'}
+						<Icon name="caret-sort" className="ml-2 shrink-0" />
+					</Button>
+				</PopoverTrigger>
+
+				<PopoverContent className="w-[--radix-popover-trigger-width] p-0">
+					<Command
+						filter={(value, search) => {
+							const item = comboboxOptions.find((item) => item.value === value)
+							if (!item) return 0
+							if (item.label.toLowerCase().includes(search.toLowerCase()))
+								return 1
+
+							return 0
+						}}
+					>
+						<CommandInput placeholder="Search..." />
+						<CommandList>
+							<CommandEmpty>
+								{comboboxProps.emptyText || 'No options found.'}
+							</CommandEmpty>
+							<CommandGroup>
+								{comboboxOptions.map((option) => (
+									<CommandItem
+										key={option.value}
+										value={option.value}
+										onSelect={(currentValue) => {
+											control.change(currentValue)
+											setOpen(false)
+										}}
+									>
+										<Icon
+											name="check"
+											className={cn(
+												'mr-2 h-4 w-4',
+												control.value === option.value
+													? 'opacity-100'
+													: 'opacity-0',
+											)}
+										/>
+										{option.label}
+									</CommandItem>
+								))}
+							</CommandGroup>
+						</CommandList>
+					</Command>
+				</PopoverContent>
+			</Popover>
+			<div className="min-h-[32px] px-4 pb-3 pt-1">
+				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
+			</div>
+		</div>
+	)
+}