migrate to blitzjs

app/core/components/form.tsx

@@ -0,0 +1,84 @@
+import { useState, ReactNode, PropsWithoutRef } from "react"
+import { FormProvider, useForm, UseFormProps } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+
+export interface FormProps<S extends z.ZodType<any, any>>
+	extends Omit<PropsWithoutRef<JSX.IntrinsicElements["form"]>, "onSubmit"> {
+	/** All your form fields */
+	children?: ReactNode
+	/** Text to display in the submit button */
+	submitText?: string
+	schema?: S
+	onSubmit: (values: z.infer<S>) => Promise<void | OnSubmitResult>
+	initialValues?: UseFormProps<z.infer<S>>["defaultValues"]
+}
+
+interface OnSubmitResult {
+	FORM_ERROR?: string
+
+	[prop: string]: any
+}
+
+export const FORM_ERROR = "FORM_ERROR"
+
+export function Form<S extends z.ZodType<any, any>>({
+	children,
+	submitText,
+	schema,
+	initialValues,
+	onSubmit,
+	...props
+}: FormProps<S>) {
+	const ctx = useForm<z.infer<S>>({
+		mode: "onBlur",
+		resolver: schema ? zodResolver(schema) : undefined,
+		defaultValues: initialValues,
+	})
+	const [formError, setFormError] = useState<string | null>(null)
+
+	return (
+		<FormProvider {...ctx}>
+			<form
+				onSubmit={ctx.handleSubmit(async (values) => {
+					const result = (await onSubmit(values)) || {}
+					for (const [key, value] of Object.entries(result)) {
+						if (key === FORM_ERROR) {
+							setFormError(value)
+						} else {
+							ctx.setError(key as any, {
+								type: "submit",
+								message: value,
+							})
+						}
+					}
+				})}
+				className="form"
+				{...props}
+			>
+				{/* Form fields supplied as children are rendered here */}
+				{children}
+
+				{formError && (
+					<div role="alert" style={{ color: "red" }}>
+						{formError}
+					</div>
+				)}
+
+				{submitText && (
+					<button type="submit" disabled={ctx.formState.isSubmitting}>
+						{submitText}
+					</button>
+				)}
+
+				<style global jsx>{`
+					.form > * + * {
+						margin-top: 1rem;
+					}
+				`}</style>
+			</form>
+		</FormProvider>
+	)
+}
+
+export default Form

app/core/components/labeled-text-field.tsx

@@ -0,0 +1,58 @@
+import { forwardRef, PropsWithoutRef } from "react"
+import { useFormContext } from "react-hook-form"
+
+export interface LabeledTextFieldProps extends PropsWithoutRef<JSX.IntrinsicElements["input"]> {
+	/** Field name. */
+	name: string
+	/** Field label. */
+	label: string
+	/** Field type. Doesn't include radio buttons and checkboxes */
+	type?: "text" | "password" | "email" | "number"
+	outerProps?: PropsWithoutRef<JSX.IntrinsicElements["div"]>
+}
+
+export const LabeledTextField = forwardRef<HTMLInputElement, LabeledTextFieldProps>(
+	({ label, outerProps, name, ...props }, ref) => {
+		const {
+			register,
+			formState: { isSubmitting, errors },
+		} = useFormContext()
+		const error = Array.isArray(errors[name])
+			? errors[name].join(", ")
+			: errors[name]?.message || errors[name]
+
+		return (
+			<div {...outerProps}>
+				<label>
+					{label}
+					<input disabled={isSubmitting} {...register(name)} {...props} />
+				</label>
+
+				{error && (
+					<div role="alert" style={{ color: "red" }}>
+						{error}
+					</div>
+				)}
+
+				<style jsx>{`
+					label {
+						display: flex;
+						flex-direction: column;
+						align-items: start;
+						font-size: 1rem;
+					}
+					input {
+						font-size: 1rem;
+						padding: 0.25rem 0.5rem;
+						border-radius: 3px;
+						border: 1px solid purple;
+						appearance: none;
+						margin-top: 0.5rem;
+					}
+				`}</style>
+			</div>
+		)
+	}
+)
+
+export default LabeledTextField