Skip to content

Commit 213bf31

Browse files
cardernecarderne
committed
chore(webapp): upgrade @conform-to to v1
Migrate the dashboard form layer from @conform-to 0.9 to the 1.x API. conform 1.x peer-depends on zod ^3.21 || ^4, so it runs on the current zod 3 and unblocks the zod 4 upgrade (conform 0.9 cannot bundle against zod 4, which removed ZodNativeEnum, ZodEffects, and ZodPipeline).
1 parent 0119cf8 commit 213bf31

51 files changed

Lines changed: 778 additions & 760 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.server-changes/conform-v1.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
area: webapp
3+
type: improvement
4+
---
5+
6+
Upgrade the dashboard form layer from `@conform-to` 0.9 to 1.x. conform 1.x supports both zod 3 and zod 4, which unblocks the upcoming zod 4 upgrade.

‎apps/webapp/app/components/Feedback.tsx‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { conform, useForm } from "@conform-to/react";
2-
import { parse } from "@conform-to/zod";
1+
import { getFormProps, getSelectProps, getInputProps, getTextareaProps, useForm } from "@conform-to/react";
2+
import { parseWithZod } from "@conform-to/zod";
33
import { InformationCircleIcon, ArrowUpCircleIcon } from "@heroicons/react/20/solid";
44
import { EnvelopeIcon, ShieldCheckIcon } from "@heroicons/react/24/solid";
55
import { Form, useActionData, useLocation, useNavigation, useSearchParams } from "@remix-run/react";
@@ -34,11 +34,11 @@ export function Feedback({ button, defaultValue = "bug", onOpenChange }: Feedbac
3434
const navigation = useNavigation();
3535
const [type, setType] = useState<FeedbackType>(defaultValue);
3636

37-
const [form, { path, feedbackType, message }] = useForm({
37+
const [form, fields] = useForm({
3838
id: "accept-invite",
39-
lastSubmission: lastSubmission as any,
39+
lastResult: lastSubmission as any,
4040
onValidate({ formData }) {
41-
return parse(formData, { schema });
41+
return parseWithZod(formData, { schema });
4242
},
4343
shouldRevalidate: "onInput",
4444
});
@@ -47,8 +47,7 @@ export function Feedback({ button, defaultValue = "bug", onOpenChange }: Feedbac
4747
if (
4848
navigation.formAction === "/resources/feedback" &&
4949
navigation.state === "loading" &&
50-
form.error === undefined &&
51-
form.errors.length === 0
50+
(form.errors === undefined || form.errors.length === 0)
5251
) {
5352
setOpen(false);
5453
}
@@ -90,9 +89,9 @@ export function Feedback({ button, defaultValue = "bug", onOpenChange }: Feedbac
9089
type === "concurrency" ||
9190
type === "hipaa"
9291
) && <hr className="border-grid-dimmed" />}
93-
<Form method="post" action="/resources/feedback" {...form.props} className="w-full">
92+
<Form method="post" action="/resources/feedback" {...getFormProps(form)} className="w-full">
9493
<Fieldset className="max-w-full gap-y-3">
95-
<input value={location.pathname} {...conform.input(path, { type: "hidden" })} />
94+
<input value={location.pathname} {...getInputProps(fields.path, { type: "hidden" })} />
9695
<InputGroup className="max-w-full">
9796
{type === "feature" && (
9897
<InfoPanel
@@ -149,7 +148,7 @@ export function Feedback({ button, defaultValue = "bug", onOpenChange }: Feedbac
149148
</InfoPanel>
150149
)}
151150
<Select
152-
{...conform.select(feedbackType)}
151+
{...getSelectProps(fields.feedbackType)}
153152
variant="tertiary/medium"
154153
value={type}
155154
defaultValue={type}
@@ -164,14 +163,14 @@ export function Feedback({ button, defaultValue = "bug", onOpenChange }: Feedbac
164163
</SelectItem>
165164
))}
166165
</Select>
167-
<FormError id={feedbackType.errorId}>{feedbackType.error}</FormError>
166+
<FormError id={fields.feedbackType.errorId}>{fields.feedbackType.errors}</FormError>
168167
</InputGroup>
169168
<InputGroup className="max-w-full">
170169
<Label>Message</Label>
171-
<TextArea {...conform.textarea(message)} />
172-
<FormError id={message.errorId}>{message.error}</FormError>
170+
<TextArea {...getTextareaProps(fields.message)} />
171+
<FormError id={fields.message.errorId}>{fields.message.errors}</FormError>
173172
</InputGroup>
174-
<FormError>{form.error}</FormError>
173+
<FormError>{form.errors}</FormError>
175174
<FormButtons
176175
confirmButton={
177176
<Button type="submit" variant="primary/medium">

‎apps/webapp/app/components/billing/BillingAlertsSection.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { conform, list, requestIntent, useFieldList, useForm } from "@conform-to/react";
2-
import { parse } from "@conform-to/zod";
1+
import { getFormProps, getInputProps, useForm, type SubmissionResult } from "@conform-to/react";
2+
import { parseWithZod } from "@conform-to/zod";
33
import { PlusIcon, TrashIcon } from "@heroicons/react/20/solid";
44
import { Form, useActionData, useSearchParams } from "@remix-run/react";
55
import { Fragment, useEffect, useMemo, useRef, useState } from "react";
@@ -62,7 +62,7 @@ export type { BillingAlertsFormData } from "~/components/billing/billingAlertsFo
6262

6363
type BillingAlertsActionData = {
6464
formIntent: "billing-alerts";
65-
submission: ReturnType<typeof parse<typeof billingAlertsSchema>>;
65+
submission: SubmissionResult;
6666
};
6767

6868
type BillingAlertsSectionProps = {
@@ -170,18 +170,18 @@ export function BillingAlertsSection({
170170

171171
const [form, { emails, alertLevels }] = useForm({
172172
id: "billing-alerts",
173-
lastSubmission: lastSubmission as any,
173+
lastResult: lastSubmission as any,
174174
shouldRevalidate: "onInput",
175175
onValidate({ formData }) {
176-
return parse(formData, { schema: billingAlertsSchema });
176+
return parseWithZod(formData, { schema: billingAlertsSchema });
177177
},
178178
defaultValue: {
179179
emails: emailValues,
180180
alertLevels: savedThresholds.map(String),
181181
},
182182
});
183183

184-
const emailFields = useFieldList(form.ref, emails);
184+
const emailFields = emails.getFieldList();
185185

186186
useEffect(() => {
187187
nextThresholdIdRef.current = savedThresholds.length;
@@ -222,7 +222,7 @@ export function BillingAlertsSection({
222222
<TextLink to={docsPath("how-to-reduce-your-spend")}>reduce your compute spend</TextLink>.
223223
</Paragraph>
224224
</div>
225-
<Form method="post" {...form.props}>
225+
<Form method="post" {...getFormProps(form)}>
226226
<input type="hidden" name="intent" value="billing-alerts" />
227227
<Fieldset>
228228
<AnimatedCallout
@@ -322,7 +322,7 @@ export function BillingAlertsSection({
322322
})}
323323
</div>
324324

325-
<FormError id={alertLevels.errorId}>{alertLevels.error}</FormError>
325+
<FormError id={alertLevels.errorId}>{alertLevels.errors}</FormError>
326326

327327
{canAddThreshold && (
328328
<Button
@@ -340,7 +340,7 @@ export function BillingAlertsSection({
340340
<InputGroup fullWidth className="mt-4">
341341
<Label htmlFor={emails.id}>Email addresses</Label>
342342
{emailFields.map((email, index) => {
343-
const { defaultValue: _emailDefaultValue, ...emailInputProps } = conform.input(
343+
const { defaultValue: _emailDefaultValue, ...emailInputProps } = getInputProps(
344344
email,
345345
{ type: "email" }
346346
);
@@ -360,15 +360,15 @@ export function BillingAlertsSection({
360360
emailFields.length === next.length &&
361361
next.every((value) => value !== "")
362362
) {
363-
requestIntent(form.ref.current ?? undefined, list.append(emails.name));
363+
form.insert({ name: emails.name });
364364
return [...next, ""];
365365
}
366366
return next;
367367
});
368368
}}
369369
fullWidth
370370
/>
371-
<FormError id={email.errorId}>{email.error}</FormError>
371+
<FormError id={email.errorId}>{email.errors}</FormError>
372372
</Fragment>
373373
);
374374
})}

‎apps/webapp/app/components/billing/BillingLimitConfigSection.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { conform, useForm, type Submission } from "@conform-to/react";
1+
import { getFormProps, useForm, type SubmissionResult } from "@conform-to/react";
22

3-
import { parse } from "@conform-to/zod";
3+
import { parseWithZod } from "@conform-to/zod";
44
import { Form, useActionData } from "@remix-run/react";
55
import { useEffect, useMemo, useRef, useState } from "react";
66
import { z } from "zod";
@@ -49,7 +49,7 @@ type BillingLimitFormValue = z.infer<typeof billingLimitFormSchema>;
4949

5050
type BillingLimitActionData = {
5151
formIntent: "billing-limit";
52-
submission: Submission<BillingLimitFormValue>;
52+
submission: SubmissionResult;
5353
};
5454

5555
export function isBillingLimitFormDirty(input: {
@@ -156,10 +156,10 @@ export function BillingLimitConfigSection({
156156

157157
const [form, fields] = useForm({
158158
id: "billing-limit",
159-
lastSubmission: lastSubmission as any,
159+
lastResult: lastSubmission as any,
160160
shouldRevalidate: "onInput",
161161
onValidate({ formData }) {
162-
return parse(formData, { schema: billingLimitFormSchema });
162+
return parseWithZod(formData, { schema: billingLimitFormSchema });
163163
},
164164
defaultValue: {
165165
mode: savedMode,
@@ -185,7 +185,7 @@ export function BillingLimitConfigSection({
185185
</Paragraph>
186186
</div>
187187

188-
<Form method="post" {...form.props}>
188+
<Form method="post" {...getFormProps(form)}>
189189
<input type="hidden" name="intent" value="billing-limit" />
190190
<Fieldset>
191191
<input type="hidden" name="mode" value={mode} />
@@ -245,7 +245,7 @@ export function BillingLimitConfigSection({
245245
fullWidth
246246
/>
247247
{fields.amount && (
248-
<FormError id={fields.amount.errorId}>{fields.amount.error}</FormError>
248+
<FormError id={fields.amount.errorId}>{fields.amount.errors}</FormError>
249249
)}
250250
</InputGroup>
251251
)}

‎apps/webapp/app/components/billing/BillingLimitRecoveryPanel.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { conform, useForm } from "@conform-to/react";
2-
import { parse } from "@conform-to/zod";
1+
import { getFormProps, useForm, type SubmissionResult } from "@conform-to/react";
2+
import { parseWithZod } from "@conform-to/zod";
33
import { Form, useActionData, useNavigation } from "@remix-run/react";
44
import { useEffect, useMemo, useRef, useState } from "react";
55
import { z } from "zod";
@@ -38,7 +38,7 @@ export const billingLimitRecoveryFormSchema = z
3838

3939
type BillingLimitRecoveryActionData = {
4040
formIntent: "billing-limit-resolve";
41-
submission: ReturnType<typeof parse<typeof billingLimitRecoveryFormSchema>>;
41+
submission: SubmissionResult;
4242
};
4343

4444
export function BillingLimitRecoveryPanel({
@@ -79,10 +79,10 @@ export function BillingLimitRecoveryPanel({
7979

8080
const [form, fields] = useForm({
8181
id: "billing-limit-resolve",
82-
lastSubmission: recoverySubmission as any,
82+
lastResult: recoverySubmission as any,
8383
shouldRevalidate: "onInput",
8484
onValidate({ formData }) {
85-
return parse(formData, { schema: billingLimitRecoveryFormSchema });
85+
return parseWithZod(formData, { schema: billingLimitRecoveryFormSchema });
8686
},
8787
defaultValue: {
8888
action: "increase",
@@ -142,7 +142,7 @@ export function BillingLimitRecoveryPanel({
142142
)}
143143
</div>
144144

145-
<Form method="post" {...form.props}>
145+
<Form method="post" {...getFormProps(form)}>
146146
<input type="hidden" name="intent" value="billing-limit-resolve" />
147147
<input type="hidden" name="action" value={action} />
148148
<input type="hidden" name="resumeMode" value={resumeMode} />
@@ -185,8 +185,8 @@ export function BillingLimitRecoveryPanel({
185185
/>
186186
</InputGroup>
187187
)}
188-
{action === "increase" && fields.newAmount?.error && (
189-
<FormError id={fields.newAmount?.errorId}>{fields.newAmount.error}</FormError>
188+
{action === "increase" && fields.newAmount?.errors && (
189+
<FormError id={fields.newAmount?.errorId}>{fields.newAmount.errors}</FormError>
190190
)}
191191
</div>
192192

‎apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { conform, list, requestIntent, useFieldList, useForm } from "@conform-to/react";
2-
import { parse } from "@conform-to/zod";
1+
import { getFormProps, getInputProps, useForm } from "@conform-to/react";
2+
import { parseWithZod } from "@conform-to/zod";
33
import {
44
EnvelopeIcon,
55
GlobeAltIcon,
@@ -104,20 +104,21 @@ export function ConfigureErrorAlerts({
104104
existingWebhooks.length > 0 ? [...existingWebhooks.map((w) => w.url), ""] : [""]
105105
);
106106

107-
const [form, { emails, webhooks, slackChannel, slackIntegrationId }] = useForm({
107+
const [form, fields] = useForm<z.infer<typeof ErrorAlertsFormSchema>>({
108108
id: "configure-error-alerts",
109109
onValidate({ formData }) {
110-
return parse(formData, { schema: ErrorAlertsFormSchema });
110+
return parseWithZod(formData, { schema: ErrorAlertsFormSchema });
111111
},
112112
shouldRevalidate: "onSubmit",
113113
defaultValue: {
114114
emails: emailFieldValues.current,
115115
webhooks: webhookFieldValues.current,
116116
},
117117
});
118+
const { emails, webhooks, slackChannel, slackIntegrationId } = fields;
118119

119-
const emailFields = useFieldList(form.ref, emails);
120-
const webhookFields = useFieldList(form.ref, webhooks);
120+
const emailFields = emails.getFieldList();
121+
const webhookFields = webhooks.getFieldList();
121122

122123
return (
123124
<div className="grid h-full grid-rows-[auto_1fr_auto] overflow-hidden">
@@ -135,7 +136,12 @@ export function ConfigureErrorAlerts({
135136
/>
136137
</div>
137138

138-
<fetcher.Form method="post" action={formAction} {...form.props} className="contents">
139+
<fetcher.Form
140+
method="post"
141+
action={formAction}
142+
{...getFormProps(form)}
143+
className="contents"
144+
>
139145
<div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
140146
<Fieldset className="flex flex-col gap-4 p-4">
141147
<div className="flex flex-col">
@@ -155,7 +161,7 @@ export function ConfigureErrorAlerts({
155161
{emailFields.map((emailField, index) => (
156162
<Fragment key={emailField.key}>
157163
<Input
158-
{...conform.input(emailField, { type: "email" })}
164+
{...getInputProps(emailField, { type: "email" })}
159165
placeholder={index === 0 ? "Enter an email address" : "Add another email"}
160166
icon={EnvelopeIcon}
161167
onChange={(e) => {
@@ -164,11 +170,11 @@ export function ConfigureErrorAlerts({
164170
emailFields.length === emailFieldValues.current.length &&
165171
emailFieldValues.current.every((v) => v !== "")
166172
) {
167-
requestIntent(form.ref.current ?? undefined, list.append(emails.name));
173+
form.insert({ name: emails.name });
168174
}
169175
}}
170176
/>
171-
<FormError id={emailField.errorId}>{emailField.error}</FormError>
177+
<FormError id={emailField.errorId}>{emailField.errors}</FormError>
172178
</Fragment>
173179
))}
174180
</InputGroup>
@@ -315,7 +321,7 @@ export function ConfigureErrorAlerts({
315321
{webhookFields.map((webhookField, index) => (
316322
<Fragment key={webhookField.key}>
317323
<Input
318-
{...conform.input(webhookField, { type: "url" })}
324+
{...getInputProps(webhookField, { type: "url" })}
319325
placeholder={
320326
index === 0 ? "https://example.com/webhook" : "Add another webhook URL"
321327
}
@@ -326,18 +332,18 @@ export function ConfigureErrorAlerts({
326332
webhookFields.length === webhookFieldValues.current.length &&
327333
webhookFieldValues.current.every((v) => v !== "")
328334
) {
329-
requestIntent(form.ref.current ?? undefined, list.append(webhooks.name));
335+
form.insert({ name: webhooks.name });
330336
}
331337
}}
332338
/>
333-
<FormError id={webhookField.errorId}>{webhookField.error}</FormError>
339+
<FormError id={webhookField.errorId}>{webhookField.errors}</FormError>
334340
</Fragment>
335341
))}
336342
<Hint>We'll issue POST requests to these URLs with a JSON payload.</Hint>
337343
</InputGroup>
338344
</div>
339345

340-
<FormError>{form.error}</FormError>
346+
<FormError>{form.errors}</FormError>
341347
</Fieldset>
342348
</div>
343349

0 commit comments

Comments
 (0)