Skip to content

Commit 1692e10

Browse files
carerecarere
committed
refactor: validation on change & blur for field, on submit for form
1 parent 98aba2d commit 1692e10

Some content is hidden

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

54 files changed

+805
-226
lines changed

‎packages/app-builder/src/components/Auth/ResetPassword.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,13 @@ export function ResetPassword() {
5858
form.handleSubmit();
5959
}}
6060
>
61-
<form.Field name="email">
61+
<form.Field
62+
name="email"
63+
validators={{
64+
onBlur: resetPasswordFormSchema.shape.email,
65+
onChange: resetPasswordFormSchema.shape.email,
66+
}}
67+
>
6268
{(field) => (
6369
<div className="flex flex-col items-start gap-2">
6470
<FormLabel name={field.name} valid={field.state.meta.errors.length === 0}>

‎packages/app-builder/src/components/Auth/SignInWithEmailAndPassword.tsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,13 @@ export function SignInWithEmailAndPassword({
8989
form.handleSubmit();
9090
}}
9191
>
92-
<form.Field name="credentials.email">
92+
<form.Field
93+
name="credentials.email"
94+
validators={{
95+
onBlur: emailAndPasswordFormSchema.shape.credentials.shape.email,
96+
onChange: emailAndPasswordFormSchema.shape.credentials.shape.email,
97+
}}
98+
>
9399
{(field) => (
94100
<div className="flex flex-col items-start gap-2">
95101
<FormLabel name={field.name} valid={field.state.meta.errors.length === 0}>
@@ -109,7 +115,13 @@ export function SignInWithEmailAndPassword({
109115
</div>
110116
)}
111117
</form.Field>
112-
<form.Field name="credentials.password">
118+
<form.Field
119+
name="credentials.password"
120+
validators={{
121+
onBlur: emailAndPasswordFormSchema.shape.credentials.shape.password,
122+
onChange: emailAndPasswordFormSchema.shape.credentials.shape.password,
123+
}}
124+
>
113125
{(field) => (
114126
<div className="flex flex-col items-start gap-2">
115127
<FormLabel name={field.name} valid={field.state.meta.errors.length === 0}>

‎packages/app-builder/src/components/Auth/SignUpWithEmailAndPassword.tsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,13 @@ export function SignUpWithEmailAndPassword({ signUp }: { signUp: () => void }) {
6666

6767
return (
6868
<form className="flex w-full flex-col gap-4" onSubmit={handleSubmit(form)}>
69-
<form.Field name="credentials.email">
69+
<form.Field
70+
name="credentials.email"
71+
validators={{
72+
onBlur: emailAndPasswordFormSchema.shape.credentials.shape.email,
73+
onChange: emailAndPasswordFormSchema.shape.credentials.shape.email,
74+
}}
75+
>
7076
{(field) => (
7177
<div className="flex flex-col items-start gap-2">
7278
<FormLabel name={field.name} valid={field.state.meta.errors.length === 0}>
@@ -85,7 +91,13 @@ export function SignUpWithEmailAndPassword({ signUp }: { signUp: () => void }) {
8591
</div>
8692
)}
8793
</form.Field>
88-
<form.Field name="credentials.password">
94+
<form.Field
95+
name="credentials.password"
96+
validators={{
97+
onBlur: emailAndPasswordFormSchema.shape.credentials.shape.password,
98+
onChange: emailAndPasswordFormSchema.shape.credentials.shape.password,
99+
}}
100+
>
89101
{(field) => (
90102
<div className="flex flex-col items-start gap-2">
91103
<FormLabel name={field.name} valid={field.state.meta.errors.length === 0}>

‎packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/home.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -568,8 +568,6 @@ function ManualTriggerScenarioExecutionForm({
568568
},
569569
defaultValues: { iterationId },
570570
validators: {
571-
onChangeAsync: scenarioExecutionSchema,
572-
onBlurAsync: scenarioExecutionSchema,
573571
onSubmitAsync: scenarioExecutionSchema,
574572
},
575573
});

‎packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/decision.tsx

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -228,8 +228,6 @@ function EditScoreThresholds() {
228228
scoreDeclineThreshold: iteration.scoreDeclineThreshold ?? 0,
229229
} as z.infer<typeof schema>,
230230
validators: {
231-
onChange: schema,
232-
onBlur: schema,
233231
onSubmit: schema,
234232
},
235233
onSubmit: ({ value, formApi }) => {
@@ -263,7 +261,13 @@ function EditScoreThresholds() {
263261
>
264262
<div className="grid grid-cols-[max-content_auto] items-center gap-x-1 gap-y-2 lg:gap-x-2 lg:gap-y-4">
265263
<OutcomeBadge size="md" outcome="approve" className="w-full justify-center" />
266-
<form.Field name="scoreReviewThreshold">
264+
<form.Field
265+
name="scoreReviewThreshold"
266+
validators={{
267+
onChange: schema._def.schema.shape.scoreReviewThreshold,
268+
onBlur: schema._def.schema.shape.scoreReviewThreshold,
269+
}}
270+
>
267271
{(field) => (
268272
<div className="flex flex-row flex-wrap items-center gap-1 lg:gap-2">
269273
<FormLabel name={field.name} className="sr-only">
@@ -296,7 +300,13 @@ function EditScoreThresholds() {
296300
</form.Field>
297301

298302
<OutcomeBadge size="md" outcome="review" className="w-full justify-center" />
299-
<form.Field name="scoreBlockAndReviewThreshold">
303+
<form.Field
304+
name="scoreBlockAndReviewThreshold"
305+
validators={{
306+
onChange: schema._def.schema.shape.scoreBlockAndReviewThreshold,
307+
onBlur: schema._def.schema.shape.scoreBlockAndReviewThreshold,
308+
}}
309+
>
300310
{(field) => (
301311
<div className="flex flex-row flex-wrap items-center gap-1 lg:gap-2">
302312
<FormLabel name={field.name} className="sr-only">
@@ -333,7 +343,13 @@ function EditScoreThresholds() {
333343
</form.Field>
334344

335345
<OutcomeBadge size="md" outcome="block_and_review" className="w-full justify-center" />
336-
<form.Field name="scoreDeclineThreshold">
346+
<form.Field
347+
name="scoreDeclineThreshold"
348+
validators={{
349+
onChange: schema._def.schema.shape.scoreDeclineThreshold,
350+
onBlur: schema._def.schema.shape.scoreDeclineThreshold,
351+
}}
352+
>
337353
{(field) => (
338354
<div className="flex flex-row flex-wrap items-center gap-1 lg:gap-2">
339355
<FormLabel name={field.name} className="sr-only">

‎packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/rules.$ruleId.tsx

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -201,8 +201,6 @@ export default function RuleDetail() {
201201
}
202202
},
203203
validators: {
204-
onChange: editRuleFormSchema,
205-
onBlur: editRuleFormSchema,
206204
onSubmit: editRuleFormSchema,
207205
},
208206
defaultValues: rule as EditRuleForm,
@@ -246,7 +244,13 @@ export default function RuleDetail() {
246244
},
247245
)}
248246
>
249-
<form.Field name="name">
247+
<form.Field
248+
name="name"
249+
validators={{
250+
onChange: editRuleFormSchema.shape.name,
251+
onBlur: editRuleFormSchema.shape.name,
252+
}}
253+
>
250254
{(field) => (
251255
<div className="flex w-full flex-col gap-1">
252256
<input
@@ -312,7 +316,13 @@ export default function RuleDetail() {
312316
</div>
313317
<div className="flex flex-col gap-8">
314318
<div className="border-grey-90 flex flex-col items-start gap-6 border-b pb-6">
315-
<form.Field name="description">
319+
<form.Field
320+
name="description"
321+
validators={{
322+
onChange: editRuleFormSchema.shape.description,
323+
onBlur: editRuleFormSchema.shape.description,
324+
}}
325+
>
316326
{(field) => (
317327
<div ref={descriptionRef} className="flex w-full flex-col gap-1">
318328
<textarea
@@ -328,7 +338,13 @@ export default function RuleDetail() {
328338
</div>
329339
)}
330340
</form.Field>
331-
<form.Field name="ruleGroup">
341+
<form.Field
342+
name="ruleGroup"
343+
validators={{
344+
onChange: editRuleFormSchema.shape.ruleGroup,
345+
onBlur: editRuleFormSchema.shape.ruleGroup,
346+
}}
347+
>
332348
{(field) => (
333349
<div className="flex flex-col gap-2">
334350
<FieldRuleGroup
@@ -347,7 +363,13 @@ export default function RuleDetail() {
347363
<div className="flex flex-col gap-2">
348364
<span className="text-s font-medium">{t('scenarios:edit_rule.formula')}</span>
349365
<div className="bg-grey-100 border-grey-90 rounded-md border p-6">
350-
<form.Field name="formula">
366+
<form.Field
367+
name="formula"
368+
validators={{
369+
onChange: editRuleFormSchema.shape.formula,
370+
onBlur: editRuleFormSchema.shape.formula,
371+
}}
372+
>
351373
{(field) => (
352374
<FieldAstFormula
353375
type="rule"
@@ -366,7 +388,13 @@ export default function RuleDetail() {
366388
<span className="bg-grey-95 text-grey-50 text-s inline-flex rounded p-2 font-medium">
367389
{t('scenarios:edit_rule.score_heading')}
368390
</span>
369-
<form.Field name="scoreModifier">
391+
<form.Field
392+
name="scoreModifier"
393+
validators={{
394+
onChange: editRuleFormSchema.shape.scoreModifier,
395+
onBlur: editRuleFormSchema.shape.scoreModifier,
396+
}}
397+
>
370398
{(field) => (
371399
<div className="flex flex-col gap-1">
372400
<FormInput

‎packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/sanctions.$sanctionId.tsx

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -244,8 +244,6 @@ export default function SanctionDetail() {
244244
}
245245
},
246246
validators: {
247-
onChange: editSanctionFormSchema,
248-
onBlur: editSanctionFormSchema,
249247
onSubmit: editSanctionFormSchema,
250248
},
251249
defaultValues: {
@@ -320,7 +318,13 @@ export default function SanctionDetail() {
320318
},
321319
)}
322320
>
323-
<form.Field name="name">
321+
<form.Field
322+
name="name"
323+
validators={{
324+
onChange: editSanctionFormSchema.shape.name,
325+
onBlur: editSanctionFormSchema.shape.name,
326+
}}
327+
>
324328
{(field) => (
325329
<div className="flex w-full flex-col gap-1">
326330
<input
@@ -359,7 +363,13 @@ export default function SanctionDetail() {
359363
</div>
360364
<div className="flex flex-col gap-8">
361365
<div className="border-grey-90 flex flex-col items-start gap-6 border-b pb-6">
362-
<form.Field name="description">
366+
<form.Field
367+
name="description"
368+
validators={{
369+
onChange: editSanctionFormSchema.shape.description,
370+
onBlur: editSanctionFormSchema.shape.description,
371+
}}
372+
>
363373
{(field) => (
364374
<div ref={descriptionRef} className="flex w-full flex-col gap-1">
365375
<textarea
@@ -375,7 +385,13 @@ export default function SanctionDetail() {
375385
</div>
376386
)}
377387
</form.Field>
378-
<form.Field name="ruleGroup">
388+
<form.Field
389+
name="ruleGroup"
390+
validators={{
391+
onChange: editSanctionFormSchema.shape.ruleGroup,
392+
onBlur: editSanctionFormSchema.shape.ruleGroup,
393+
}}
394+
>
379395
{(field) => (
380396
<div className="flex flex-col gap-2">
381397
<FieldRuleGroup
@@ -409,7 +425,13 @@ export default function SanctionDetail() {
409425
/>
410426
</span>
411427
</Callout>
412-
<form.Field name="triggerRule">
428+
<form.Field
429+
name="triggerRule"
430+
validators={{
431+
onChange: editSanctionFormSchema.shape.triggerRule,
432+
onBlur: editSanctionFormSchema.shape.triggerRule,
433+
}}
434+
>
413435
{(field) => (
414436
<FieldAstFormula
415437
type="sanction"
@@ -426,7 +448,13 @@ export default function SanctionDetail() {
426448
<div className="bg-grey-100 border-grey-90 flex flex-col gap-2 rounded-md border p-4">
427449
<div className="text-s flex items-center">
428450
{t('scenarios:edit_sanction.consideration_matchings')}
429-
<form.Field name="threshold">
451+
<form.Field
452+
name="threshold"
453+
validators={{
454+
onChange: editSanctionFormSchema.shape.threshold,
455+
onBlur: editSanctionFormSchema.shape.threshold,
456+
}}
457+
>
430458
{(field) => (
431459
<div className="flex flex-col gap-1">
432460
<FormInput

‎packages/app-builder/src/routes/_builder+/settings+/data-display.tsx

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,20 @@ export default function DataDisplaySettings() {
160160
<Button type="submit">{t('common:save')}</Button>
161161
</div>
162162
{dataModelWithTableOptions.map((tableModelWithOptions) => (
163-
<form.Field key={tableModelWithOptions.id} name={tableModelWithOptions.id}>
163+
<form.Field
164+
key={tableModelWithOptions.id}
165+
name={tableModelWithOptions.id}
166+
validators={{
167+
onChange:
168+
createTableOptionSchema(dataModelWithTableOptions).shape[
169+
tableModelWithOptions.id
170+
],
171+
onBlur:
172+
createTableOptionSchema(dataModelWithTableOptions).shape[
173+
tableModelWithOptions.id
174+
],
175+
}}
176+
>
164177
{(field) => {
165178
return (
166179
<CollapsiblePaper.Container defaultOpen={false}>

‎packages/app-builder/src/routes/ressources+/cases+/add-comment.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,8 +140,6 @@ export function AddComment({ caseId }: { caseId: string }) {
140140
});
141141
},
142142
validators: {
143-
onChange: schema,
144-
onMount: schema,
145143
onSubmit: schema,
146144
},
147145
});

‎packages/app-builder/src/routes/ressources+/cases+/add-rule-snooze.tsx

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -175,8 +175,6 @@ function AddRuleSnoozeContent({
175175
}
176176
},
177177
validators: {
178-
onChange: addRuleSnoozeFormSchema,
179-
onBlur: addRuleSnoozeFormSchema,
180178
onSubmit: addRuleSnoozeFormSchema,
181179
},
182180
});
@@ -203,7 +201,13 @@ function AddRuleSnoozeContent({
203201
</p>
204202
</ModalV2.Description>
205203

206-
<form.Field name="comment">
204+
<form.Field
205+
name="comment"
206+
validators={{
207+
onBlur: addRuleSnoozeFormSchema.shape.comment,
208+
onChange: addRuleSnoozeFormSchema.shape.comment,
209+
}}
210+
>
207211
{(field) => (
208212
<div className="row-span-full grid grid-rows-subgrid gap-2">
209213
<FormLabel name={field.name}>
@@ -223,7 +227,13 @@ function AddRuleSnoozeContent({
223227
</form.Field>
224228

225229
<div className="grid w-full grid-cols-2 grid-rows-[repeat(3,_max-content)] gap-2">
226-
<form.Field name="durationValue">
230+
<form.Field
231+
name="durationValue"
232+
validators={{
233+
onBlur: addRuleSnoozeFormSchema.shape.durationValue,
234+
onChange: addRuleSnoozeFormSchema.shape.durationValue,
235+
}}
236+
>
227237
{(field) => (
228238
<div className="row-span-full grid grid-rows-subgrid gap-2">
229239
<FormLabel name={field.name} valid={field.state.meta.errors.length === 0}>
@@ -243,7 +253,13 @@ function AddRuleSnoozeContent({
243253
)}
244254
</form.Field>
245255

246-
<form.Field name="durationUnit">
256+
<form.Field
257+
name="durationUnit"
258+
validators={{
259+
onBlur: addRuleSnoozeFormSchema.shape.durationUnit,
260+
onChange: addRuleSnoozeFormSchema.shape.durationUnit,
261+
}}
262+
>
247263
{(field) => (
248264
<div className="row-span-full grid grid-rows-subgrid gap-2">
249265
<FormLabel name={field.name}>

0 commit comments

Comments
 (0)