hanzoai/esign
2
0
Fork 0
mirror of https://github.com/hanzoai/sign.git synced 2026-10-21 01:21:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): bind the shared field inputs through the form they render in

Browse Source 
The field editor's shared inputs — font size, alignment, line height, label,
required, read-only — took a `Control<any>` so one component could serve
every field form. react-hook-form 7.88 types a control's `validate` option
by the form's field names, and a function over "fontSize" | "textAlign" is
not a function over any string, so no form's control was a `Control<any>`
any more: 26 errors, one per shared input per form.

The inputs now read the form from the <Form> they render inside, as
Controller does when it is not handed a control. Every one of them already
did through FormMessage, and every form renders them inside its own <Form>,
so the control each one binds to is the one it was handed before. The
`Control<any>`, its eslint-disable and the formControl prop go.

Two forms spelled their values as the schema's output, `useForm<T>`. Under
@hookform/resolvers 5 a zod resolver takes the schema's input and returns
its output, so they now let the resolver type them. zod 4 types a coerced
number's input as unknown; the field meta and the checkbox form say number,
the type these forms were written against, which changes no parse.

Co-authored-by: Hanzo Dev <[email protected]>
This commit is contained in:
zeekay
2026-09-19 04:19:22 -07:00
co-authored by Hanzo Dev
parent fe36557515
commit 5938f042a2
12 changed files with 68 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/remix/app/components/forms/editor/editor-field-checkbox-form.tsx
+10 -10
View File
@@ -55,7 +55,7 @@ const ZCheckboxFieldFormSchema = ZCheckboxFieldMeta.pick({
fontSize: true,
})
.extend({
validationLength: z.coerce.number().optional(),
validationLength: z.coerce.number<number>().optional(),
})
.refine(
(data) => {
@@ -88,7 +88,7 @@ export const EditorFieldCheckboxForm = ({
},
onValueChange,
}: EditorFieldCheckboxFormProps) => {
const form = useForm<TCheckboxFieldFormSchema>({
const form = useForm({
resolver: zodResolver(ZCheckboxFieldFormSchema),
mode: 'onChange',
defaultValues: {
@@ -172,7 +172,7 @@ export const EditorFieldCheckboxForm = ({
<Form {...form}>
<form>
<fieldset className="flex flex-col gap-2">
<EditorGenericFontSizeField formControl={form.control} />
<EditorGenericFontSizeField />
<FormField
control={form.control}
@@ -186,7 +186,7 @@ export const EditorFieldCheckboxForm = ({
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger
data-testid="field-form-direction"
className="w-full bg-background text-muted-foreground"
className="bg-background text-muted-foreground w-full"
>
<SelectValue placeholder={t`Select direction`} />
</SelectTrigger>
@@ -219,7 +219,7 @@ export const EditorFieldCheckboxForm = ({
<Select {...field} onValueChange={field.onChange}>
<SelectTrigger
data-testid="field-form-validationRule"
className="w-full bg-background text-muted-foreground"
className="bg-background text-muted-foreground w-full"
>
<SelectValue placeholder={t`Select at least`} />
</SelectTrigger>
@@ -268,7 +268,7 @@ export const EditorFieldCheckboxForm = ({
>
<SelectTrigger
data-testid="field-form-validationLength"
className="mt-5 w-full bg-background text-muted-foreground"
className="bg-background text-muted-foreground mt-5 w-full"
>
<SelectValue placeholder={t`Pick a number`} />
</SelectTrigger>
@@ -289,13 +289,13 @@ export const EditorFieldCheckboxForm = ({
</div>
<div className="mt-1">
<EditorGenericRequiredField formControl={form.control} />
<EditorGenericRequiredField />
</div>
<EditorGenericReadOnlyField formControl={form.control} />
<EditorGenericReadOnlyField />
<section className="space-y-2">
<div className="-mx-4 mb-4 mt-2">
<div className="-mx-4 mt-2 mb-4">
<Separator />
</div>
@@ -320,7 +320,7 @@ export const EditorFieldCheckboxForm = ({
<FormControl>
<Checkbox
data-testid={`field-form-values-${index}-checked`}
className="h-5 w-5 border-foreground/30 data-[state=checked]:bg-primary"
className="border-foreground/30 data-[state=checked]:bg-primary h-5 w-5"
checked={field.value}
onCheckedChange={field.onChange}
/>
apps/remix/app/components/forms/editor/editor-field-date-form.tsx
+2 -2
View File
@@ -66,9 +66,9 @@ export const EditorFieldDateForm = ({
<Form {...form}>
<form>
<fieldset className="flex flex-col gap-2">
<EditorGenericFontSizeField formControl={form.control} />
<EditorGenericFontSizeField />
<EditorGenericTextAlignField formControl={form.control} />
<EditorGenericTextAlignField />
</fieldset>
</form>
</Form>
apps/remix/app/components/forms/editor/editor-field-dropdown-form.tsx
+5 -5
View File
@@ -159,7 +159,7 @@ export const EditorFieldDropdownForm = ({
<Form {...form}>
<form>
<fieldset className="flex flex-col gap-2">
<EditorGenericFontSizeField formControl={form.control} />
<EditorGenericFontSizeField />
{/* Todo: Envelopes This is buggy. */}
<FormField
@@ -178,7 +178,7 @@ export const EditorFieldDropdownForm = ({
>
<SelectTrigger
data-testid="field-form-defaultValue"
className="w-full bg-background text-muted-foreground"
className="bg-background text-muted-foreground w-full"
>
<SelectValue placeholder={t`Default Value`} />
</SelectTrigger>
@@ -203,13 +203,13 @@ export const EditorFieldDropdownForm = ({
/>
<div className="mt-1">
<EditorGenericRequiredField formControl={form.control} />
<EditorGenericRequiredField />
</div>
<EditorGenericReadOnlyField formControl={form.control} />
<EditorGenericReadOnlyField />
<section className="space-y-2">
<div className="-mx-4 mb-4 mt-2">
<div className="-mx-4 mt-2 mb-4">
<Separator />
</div>
apps/remix/app/components/forms/editor/editor-field-email-form.tsx
+2 -2
View File
@@ -66,9 +66,9 @@ export const EditorFieldEmailForm = ({
<Form {...form}>
<form>
<fieldset className="flex flex-col gap-2">
<EditorGenericFontSizeField formControl={form.control} />
<EditorGenericFontSizeField />
<EditorGenericTextAlignField formControl={form.control} />
<EditorGenericTextAlignField />
</fieldset>
</form>
</Form>
apps/remix/app/components/forms/editor/editor-field-generic-field-forms.tsx
+13 -71
View File
@@ -1,7 +1,7 @@
import { useEffect } from 'react';
import { Trans, useLingui } from '@lingui/react/macro';
import { type Control, useFormContext } from 'react-hook-form';
import { useFormContext } from 'react-hook-form';
import { FIELD_MIN_LINE_HEIGHT } from '@hanzo/esign-lib/types/field-meta';
import { FIELD_MAX_LINE_HEIGHT } from '@hanzo/esign-lib/types/field-meta';
@@ -25,23 +25,14 @@ import {
SelectValue,
} from '@hanzo/esign-ui/primitives/select';
// Can't seem to get the non-any type to work with correct types.
// Eg Control<{ fontSize?: number } doesn't seem to work when there are required items.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type FormControlType = Control<any>;
// Each field binds by name to the form of the <Form> it renders inside, so one component
// serves every field form that has that name.
export const EditorGenericFontSizeField = ({
formControl,
className,
}: {
formControl: FormControlType;
className?: string;
}) => {
export const EditorGenericFontSizeField = ({ className }: { className?: string }) => {
const { t } = useLingui();
return (
<FormField
control={formControl}
name="fontSize"
render={({ field }) => (
<FormItem className={className}>
@@ -69,18 +60,11 @@ export const EditorGenericFontSizeField = ({
);
};
export const EditorGenericTextAlignField = ({
formControl,
className,
}: {
formControl: FormControlType;
className?: string;
}) => {
export const EditorGenericTextAlignField = ({ className }: { className?: string }) => {
const { t } = useLingui();
return (
<FormField
control={formControl}
name="textAlign"
render={({ field }) => (
<FormItem className={className}>
@@ -112,18 +96,11 @@ export const EditorGenericTextAlignField = ({
);
};
export const EditorGenericVerticalAlignField = ({
formControl,
className,
}: {
formControl: FormControlType;
className?: string;
}) => {
export const EditorGenericVerticalAlignField = ({ className }: { className?: string }) => {
const { t } = useLingui();
return (
<FormField
control={formControl}
name="verticalAlign"
render={({ field }) => (
<FormItem className={className}>
@@ -155,18 +132,11 @@ export const EditorGenericVerticalAlignField = ({
);
};
export const EditorGenericLineHeightField = ({
formControl,
className,
}: {
formControl: FormControlType;
className?: string;
}) => {
export const EditorGenericLineHeightField = ({ className }: { className?: string }) => {
const { t } = useLingui();
return (
<FormField
control={formControl}
name="lineHeight"
render={({ field }) => (
<FormItem className={className}>
@@ -191,18 +161,11 @@ export const EditorGenericLineHeightField = ({
);
};
export const EditorGenericLetterSpacingField = ({
formControl,
className,
}: {
formControl: FormControlType;
className?: string;
}) => {
export const EditorGenericLetterSpacingField = ({ className }: { className?: string }) => {
const { t } = useLingui();
return (
<FormField
control={formControl}
name="letterSpacing"
render={({ field }) => (
<FormItem className={className}>
@@ -227,13 +190,7 @@ export const EditorGenericLetterSpacingField = ({
);
};
export const EditorGenericRequiredField = ({
formControl,
className,
}: {
formControl: FormControlType;
className?: string;
}) => {
export const EditorGenericRequiredField = ({ className }: { className?: string }) => {
const { watch, setValue } = useFormContext();
const readOnly = watch('readOnly');
@@ -246,7 +203,6 @@ export const EditorGenericRequiredField = ({
return (
<FormField
control={formControl}
name="required"
render={({ field }) => (
<FormItem className={cn('flex items-center space-x-2', className)}>
@@ -259,7 +215,7 @@ export const EditorGenericRequiredField = ({
onCheckedChange={field.onChange}
/>
<label className="ml-2 text-sm text-muted-foreground" htmlFor="field-required">
<label className="text-muted-foreground ml-2 text-sm" htmlFor="field-required">
<Trans>Required Field</Trans>
</label>
</div>
@@ -271,13 +227,7 @@ export const EditorGenericRequiredField = ({
);
};
export const EditorGenericReadOnlyField = ({
formControl,
className,
}: {
formControl: FormControlType;
className?: string;
}) => {
export const EditorGenericReadOnlyField = ({ className }: { className?: string }) => {
const { watch, setValue } = useFormContext();
const required = watch('required');
@@ -290,7 +240,6 @@ export const EditorGenericReadOnlyField = ({
return (
<FormField
control={formControl}
name="readOnly"
render={({ field }) => (
<FormItem className={cn('flex items-center space-x-2', className)}>
@@ -303,7 +252,7 @@ export const EditorGenericReadOnlyField = ({
onCheckedChange={field.onChange}
/>
<label className="ml-2 text-sm text-muted-foreground" htmlFor="field-read-only">
<label className="text-muted-foreground ml-2 text-sm" htmlFor="field-read-only">
<Trans>Read Only</Trans>
</label>
</div>
@@ -315,18 +264,11 @@ export const EditorGenericReadOnlyField = ({
);
};
export const EditorGenericLabelField = ({
formControl,
className,
}: {
formControl: FormControlType;
className?: string;
}) => {
export const EditorGenericLabelField = ({ className }: { className?: string }) => {
const { t } = useLingui();
return (
<FormField
control={formControl}
name="label"
render={({ field }) => (
<FormItem className={className}>
apps/remix/app/components/forms/editor/editor-field-initials-form.tsx
+2 -2
View File
@@ -66,9 +66,9 @@ export const EditorFieldInitialsForm = ({
<Form {...form}>
<form>
<fieldset className="flex flex-col gap-2">
<EditorGenericFontSizeField formControl={form.control} />
<EditorGenericFontSizeField />
<EditorGenericTextAlignField formControl={form.control} />
<EditorGenericTextAlignField />
</fieldset>
</form>
</Form>
apps/remix/app/components/forms/editor/editor-field-name-form.tsx
+2 -2
View File
@@ -66,9 +66,9 @@ export const EditorFieldNameForm = ({
<Form {...form}>
<form>
<fieldset className="flex flex-col gap-2">
<EditorGenericFontSizeField formControl={form.control} />
<EditorGenericFontSizeField />
<EditorGenericTextAlignField formControl={form.control} />
<EditorGenericTextAlignField />
</fieldset>
</form>
</Form>
apps/remix/app/components/forms/editor/editor-field-number-form.tsx
+11 -11
View File
@@ -102,7 +102,7 @@ export const EditorFieldNumberForm = ({
}: EditorFieldNumberFormProps) => {
const { t } = useLingui();
const form = useForm<TNumberFieldFormSchema>({
const form = useForm({
resolver: zodResolver(ZNumberFieldFormSchema),
mode: 'onChange',
defaultValues: {
@@ -148,15 +148,15 @@ export const EditorFieldNumberForm = ({
<Form {...form}>
<form>
<fieldset className="flex flex-col gap-2">
<EditorGenericFontSizeField className="w-full" formControl={form.control} />
<EditorGenericFontSizeField className="w-full" />
<div className="flex w-full flex-row gap-x-4">
<EditorGenericTextAlignField className="w-full" formControl={form.control} />
<EditorGenericTextAlignField className="w-full" />
<EditorGenericVerticalAlignField className="w-full" formControl={form.control} />
<EditorGenericVerticalAlignField className="w-full" />
</div>
<EditorGenericLabelField formControl={form.control} />
<EditorGenericLabelField />
<FormField
control={form.control}
@@ -215,7 +215,7 @@ export const EditorFieldNumberForm = ({
>
<SelectTrigger
data-testid="field-form-numberFormat"
className="w-full bg-background text-muted-foreground"
className="bg-background text-muted-foreground w-full"
>
<SelectValue placeholder={t`Field format`} />
</SelectTrigger>
@@ -238,20 +238,20 @@ export const EditorFieldNumberForm = ({
/>
<div className="flex w-full flex-row gap-x-4">
<EditorGenericLineHeightField className="w-full" formControl={form.control} />
<EditorGenericLineHeightField className="w-full" />
<EditorGenericLetterSpacingField className="w-full" formControl={form.control} />
<EditorGenericLetterSpacingField className="w-full" />
</div>
<div className="mt-1">
<EditorGenericRequiredField formControl={form.control} />
<EditorGenericRequiredField />
</div>
<EditorGenericReadOnlyField formControl={form.control} />
<EditorGenericReadOnlyField />
{/* Validation section */}
<section className="space-y-2">
<div className="-mx-4 mb-4 mt-2">
<div className="-mx-4 mt-2 mb-4">
<Separator />
</div>
apps/remix/app/components/forms/editor/editor-field-radio-form.tsx
+7 -7
View File
@@ -74,7 +74,7 @@ export const EditorFieldRadioForm = ({
}: EditorFieldRadioFormProps) => {
const { t } = useLingui();
const form = useForm<TRadioFieldFormSchema>({
const form = useForm({
resolver: zodResolver(ZRadioFieldFormSchema),
mode: 'onChange',
defaultValues: {
@@ -128,7 +128,7 @@ export const EditorFieldRadioForm = ({
<Form {...form}>
<form>
<fieldset className="flex flex-col gap-2">
<EditorGenericFontSizeField formControl={form.control} />
<EditorGenericFontSizeField />
<FormField
control={form.control}
@@ -142,7 +142,7 @@ export const EditorFieldRadioForm = ({
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger
data-testid="field-form-direction"
className="w-full bg-background text-muted-foreground"
className="bg-background text-muted-foreground w-full"
>
<SelectValue placeholder={t`Select direction`} />
</SelectTrigger>
@@ -161,12 +161,12 @@ export const EditorFieldRadioForm = ({
)}
/>
<EditorGenericRequiredField formControl={form.control} />
<EditorGenericRequiredField />
<EditorGenericReadOnlyField formControl={form.control} />
<EditorGenericReadOnlyField />
<section className="space-y-2">
<div className="-mx-4 mb-4 mt-2">
<div className="-mx-4 mt-2 mb-4">
<Separator />
</div>
@@ -191,7 +191,7 @@ export const EditorFieldRadioForm = ({
<FormControl>
<Checkbox
data-testid={`field-form-values-${index}-checked`}
className="h-5 w-5 border-foreground/30 data-[state=checked]:bg-primary"
className="border-foreground/30 data-[state=checked]:bg-primary h-5 w-5"
checked={field.value}
onCheckedChange={(value) => {
// Uncheck all other values.
apps/remix/app/components/forms/editor/editor-field-signature-form.tsx
+1 -1
View File
@@ -59,7 +59,7 @@ export const EditorFieldSignatureForm = ({
<form>
<fieldset className="flex flex-col gap-2">
<div>
<EditorGenericFontSizeField formControl={form.control} />
<EditorGenericFontSizeField />
<p className="text-muted-foreground mt-0.5 text-xs">
<Trans>The typed signature font size</Trans>
</p>
apps/remix/app/components/forms/editor/editor-field-text-form.tsx
+8 -8
View File
@@ -73,7 +73,7 @@ export const EditorFieldTextForm = ({
}: EditorFieldTextFormProps) => {
const { t } = useLingui();
const form = useForm<TTextFieldFormSchema>({
const form = useForm({
resolver: zodResolver(ZTextFieldFormSchema),
mode: 'onChange',
defaultValues: {
@@ -117,12 +117,12 @@ export const EditorFieldTextForm = ({
<Form {...form}>
<form>
<fieldset className="flex flex-col gap-2">
<EditorGenericFontSizeField className="w-full" formControl={form.control} />
<EditorGenericFontSizeField className="w-full" />
<div className="flex w-full flex-row gap-x-4">
<EditorGenericTextAlignField className="w-full" formControl={form.control} />
<EditorGenericTextAlignField className="w-full" />
<EditorGenericVerticalAlignField className="w-full" formControl={form.control} />
<EditorGenericVerticalAlignField className="w-full" />
</div>
<FormField
@@ -230,16 +230,16 @@ export const EditorFieldTextForm = ({
/>
<div className="flex w-full flex-row gap-x-4">
<EditorGenericLineHeightField className="w-full" formControl={form.control} />
<EditorGenericLineHeightField className="w-full" />
<EditorGenericLetterSpacingField className="w-full" formControl={form.control} />
<EditorGenericLetterSpacingField className="w-full" />
</div>
<div className="mt-1">
<EditorGenericRequiredField formControl={form.control} />
<EditorGenericRequiredField />
</div>
<EditorGenericReadOnlyField formControl={form.control} />
<EditorGenericReadOnlyField />
</fieldset>
</form>
</Form>
packages/lib/types/field-meta.ts
+5 -5
View File
@@ -28,12 +28,12 @@ export type GenericTextFieldTypeMetas =
| TNumberFieldMeta;
const ZFieldMetaLineHeight = z.coerce
.number()
.number<number>()
.min(FIELD_MIN_LINE_HEIGHT)
.max(FIELD_MAX_LINE_HEIGHT)
.describe('The line height of the text');
const ZFieldMetaLetterSpacing = z.coerce
.number()
.number<number>()
.min(FIELD_MIN_LETTER_SPACING)
.max(FIELD_MAX_LETTER_SPACING)
.describe('The spacing between each character');
@@ -86,7 +86,7 @@ export type TDateFieldMeta = z.infer<typeof ZDateFieldMeta>;
export const ZTextFieldMeta = ZBaseFieldMeta.extend({
type: z.literal('text'),
text: z.string().optional(),
characterLimit: z.coerce.number({ error: 'Value must be a number' }).min(0).optional(),
characterLimit: z.coerce.number<number>({ error: 'Value must be a number' }).min(0).optional(),
textAlign: ZFieldTextAlignSchema.optional(),
lineHeight: ZFieldMetaLineHeight.nullish(),
letterSpacing: ZFieldMetaLetterSpacing.nullish(),
@@ -99,8 +99,8 @@ export const ZNumberFieldMeta = ZBaseFieldMeta.extend({
type: z.literal('number'),
numberFormat: z.string().nullish(),
value: z.string().optional(),
minValue: z.coerce.number().nullish(),
maxValue: z.coerce.number().nullish(),
minValue: z.coerce.number<number>().nullish(),
maxValue: z.coerce.number<number>().nullish(),
textAlign: ZFieldTextAlignSchema.optional(),
lineHeight: ZFieldMetaLineHeight.nullish(),
letterSpacing: ZFieldMetaLetterSpacing.nullish(),