feat: add additional field options (#2154)

2025-11-17 02:01:33 +10:00 · 2025-11-08 23:40:03 +11:00
parent 0977c16e33
commit 9fd9613076
46 changed files with 1017 additions and 328 deletions
--- a/apps/remix/app/components/forms/editor/editor-field-date-form.tsx
+++ b/apps/remix/app/components/forms/editor/editor-field-date-form.tsx
@ -7,6 +7,7 @@ import type { z } from 'zod';
 import {
  DEFAULT_FIELD_FONT_SIZE,
  type TDateFieldMeta as DateFieldMeta,
+  FIELD_DEFAULT_GENERIC_ALIGN,
  ZDateFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import { Form } from '@documenso/ui/primitives/form/form';
@ -39,7 +40,7 @@ export const EditorFieldDateForm = ({
    mode: 'onChange',
    defaultValues: {
      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
-      textAlign: value.textAlign || 'left',
+      textAlign: value.textAlign ?? FIELD_DEFAULT_GENERIC_ALIGN,
    },
  });

--- a/apps/remix/app/components/forms/editor/editor-field-email-form.tsx
+++ b/apps/remix/app/components/forms/editor/editor-field-email-form.tsx
@ -7,6 +7,7 @@ import type { z } from 'zod';
 import {
  DEFAULT_FIELD_FONT_SIZE,
  type TEmailFieldMeta as EmailFieldMeta,
+  FIELD_DEFAULT_GENERIC_ALIGN,
  ZEmailFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import { Form } from '@documenso/ui/primitives/form/form';
@ -39,7 +40,7 @@ export const EditorFieldEmailForm = ({
    mode: 'onChange',
    defaultValues: {
      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
-      textAlign: value.textAlign || 'left',
+      textAlign: value.textAlign ?? FIELD_DEFAULT_GENERIC_ALIGN,
    },
  });

--- a/apps/remix/app/components/forms/editor/editor-field-generic-field-forms.tsx
+++ b/apps/remix/app/components/forms/editor/editor-field-generic-field-forms.tsx
@ -3,6 +3,10 @@ import { useEffect } from 'react';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { type Control, useFormContext } from 'react-hook-form';

+import { FIELD_MIN_LINE_HEIGHT } from '@documenso/lib/types/field-meta';
+import { FIELD_MAX_LINE_HEIGHT } from '@documenso/lib/types/field-meta';
+import { FIELD_MIN_LETTER_SPACING } from '@documenso/lib/types/field-meta';
+import { FIELD_MAX_LETTER_SPACING } from '@documenso/lib/types/field-meta';
 import { cn } from '@documenso/ui/lib/utils';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import {
@ -107,6 +111,119 @@ export const EditorGenericTextAlignField = ({
  );
 };

+export const EditorGenericVerticalAlignField = ({
+  formControl,
+  className,
+}: {
+  formControl: FormControlType;
+  className?: string;
+}) => {
+  const { t } = useLingui();
+
+  return (
+    <FormField
+      control={formControl}
+      name="verticalAlign"
+      render={({ field }) => (
+        <FormItem className={className}>
+          <FormLabel>
+            <Trans>Vertical Align</Trans>
+          </FormLabel>
+          <FormControl>
+            <Select {...field} onValueChange={field.onChange}>
+              <SelectTrigger>
+                <SelectValue placeholder={t`Select vertical align`} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="top">
+                  <Trans>Top</Trans>
+                </SelectItem>
+                <SelectItem value="middle">
+                  <Trans>Middle</Trans>
+                </SelectItem>
+                <SelectItem value="bottom">
+                  <Trans>Bottom</Trans>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
+
+export const EditorGenericLineHeightField = ({
+  formControl,
+  className,
+}: {
+  formControl: FormControlType;
+  className?: string;
+}) => {
+  const { t } = useLingui();
+
+  return (
+    <FormField
+      control={formControl}
+      name="lineHeight"
+      render={({ field }) => (
+        <FormItem className={className}>
+          <FormLabel>
+            <Trans>Line Height</Trans>
+          </FormLabel>
+          <FormControl>
+            <Input
+              type="number"
+              min={FIELD_MIN_LINE_HEIGHT}
+              max={FIELD_MAX_LINE_HEIGHT}
+              className="bg-background"
+              placeholder={t`Line height`}
+              {...field}
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
+
+export const EditorGenericLetterSpacingField = ({
+  formControl,
+  className,
+}: {
+  formControl: FormControlType;
+  className?: string;
+}) => {
+  const { t } = useLingui();
+
+  return (
+    <FormField
+      control={formControl}
+      name="letterSpacing"
+      render={({ field }) => (
+        <FormItem className={className}>
+          <FormLabel>
+            <Trans>Letter Spacing</Trans>
+          </FormLabel>
+          <FormControl>
+            <Input
+              type="number"
+              min={FIELD_MIN_LETTER_SPACING}
+              max={FIELD_MAX_LETTER_SPACING}
+              className="bg-background"
+              placeholder={t`Letter spacing`}
+              {...field}
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
+
 export const EditorGenericRequiredField = ({
  formControl,
  className,
--- a/apps/remix/app/components/forms/editor/editor-field-initials-form.tsx
+++ b/apps/remix/app/components/forms/editor/editor-field-initials-form.tsx
@ -6,6 +6,7 @@ import type { z } from 'zod';

 import {
  DEFAULT_FIELD_FONT_SIZE,
+  FIELD_DEFAULT_GENERIC_ALIGN,
  type TInitialsFieldMeta as InitialsFieldMeta,
  ZInitialsFieldMeta,
 } from '@documenso/lib/types/field-meta';
@ -39,7 +40,7 @@ export const EditorFieldInitialsForm = ({
    mode: 'onChange',
    defaultValues: {
      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
-      textAlign: value.textAlign || 'left',
+      textAlign: value.textAlign ?? FIELD_DEFAULT_GENERIC_ALIGN,
    },
  });

--- a/apps/remix/app/components/forms/editor/editor-field-name-form.tsx
+++ b/apps/remix/app/components/forms/editor/editor-field-name-form.tsx
@ -6,6 +6,7 @@ import type { z } from 'zod';

 import {
  DEFAULT_FIELD_FONT_SIZE,
+  FIELD_DEFAULT_GENERIC_ALIGN,
  type TNameFieldMeta as NameFieldMeta,
  ZNameFieldMeta,
 } from '@documenso/lib/types/field-meta';
@ -39,7 +40,7 @@ export const EditorFieldNameForm = ({
    mode: 'onChange',
    defaultValues: {
      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
-      textAlign: value.textAlign || 'left',
+      textAlign: value.textAlign ?? FIELD_DEFAULT_GENERIC_ALIGN,
    },
  });

--- a/apps/remix/app/components/forms/editor/editor-field-number-form.tsx
+++ b/apps/remix/app/components/forms/editor/editor-field-number-form.tsx
@ -6,6 +6,11 @@ import { useForm, useWatch } from 'react-hook-form';
 import type { z } from 'zod';

 import {
+  DEFAULT_FIELD_FONT_SIZE,
+  FIELD_DEFAULT_GENERIC_ALIGN,
+  FIELD_DEFAULT_GENERIC_VERTICAL_ALIGN,
+  FIELD_DEFAULT_LETTER_SPACING,
+  FIELD_DEFAULT_LINE_HEIGHT,
  type TNumberFieldMeta as NumberFieldMeta,
  ZNumberFieldMeta,
 } from '@documenso/lib/types/field-meta';
@ -31,9 +36,12 @@ import { Separator } from '@documenso/ui/primitives/separator';
 import {
  EditorGenericFontSizeField,
  EditorGenericLabelField,
+  EditorGenericLetterSpacingField,
+  EditorGenericLineHeightField,
  EditorGenericReadOnlyField,
  EditorGenericRequiredField,
  EditorGenericTextAlignField,
+  EditorGenericVerticalAlignField,
 } from './editor-field-generic-field-forms';

 const ZNumberFieldFormSchema = ZNumberFieldMeta.pick({
@ -43,6 +51,9 @@ const ZNumberFieldFormSchema = ZNumberFieldMeta.pick({
  numberFormat: true,
  fontSize: true,
  textAlign: true,
+  lineHeight: true,
+  letterSpacing: true,
+  verticalAlign: true,
  required: true,
  readOnly: true,
  minValue: true,
@ -99,8 +110,11 @@ export const EditorFieldNumberForm = ({
      placeholder: value.placeholder || '',
      value: value.value || '',
      numberFormat: value.numberFormat || null,
-      fontSize: value.fontSize || 14,
-      textAlign: value.textAlign || 'left',
+      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
+      textAlign: value.textAlign ?? FIELD_DEFAULT_GENERIC_ALIGN,
+      lineHeight: value.lineHeight ?? FIELD_DEFAULT_LINE_HEIGHT,
+      letterSpacing: value.letterSpacing ?? FIELD_DEFAULT_LETTER_SPACING,
+      verticalAlign: value.verticalAlign ?? FIELD_DEFAULT_GENERIC_VERTICAL_ALIGN,
      required: value.required || false,
      readOnly: value.readOnly || false,
      minValue: value.minValue,
@ -118,6 +132,10 @@ export const EditorFieldNumberForm = ({
  useEffect(() => {
    const validatedFormValues = ZNumberFieldFormSchema.safeParse(formValues);

+    if (formValues.readOnly && !formValues.value) {
+      void form.trigger('value');
+    }
+
    if (validatedFormValues.success) {
      onValueChange({
        type: 'number',
@ -130,10 +148,12 @@ export const EditorFieldNumberForm = ({
    <Form {...form}>
      <form>
        <fieldset className="flex flex-col gap-2">
-          <div className="flex w-full flex-row gap-x-4">
-            <EditorGenericFontSizeField className="w-full" formControl={form.control} />
+          <EditorGenericFontSizeField className="w-full" formControl={form.control} />

+          <div className="flex w-full flex-row gap-x-4">
            <EditorGenericTextAlignField className="w-full" formControl={form.control} />
+
+            <EditorGenericVerticalAlignField className="w-full" formControl={form.control} />
          </div>

          <EditorGenericLabelField formControl={form.control} />
@ -204,6 +224,12 @@ export const EditorFieldNumberForm = ({
            )}
          />

+          <div className="flex w-full flex-row gap-x-4">
+            <EditorGenericLineHeightField className="w-full" formControl={form.control} />
+
+            <EditorGenericLetterSpacingField className="w-full" formControl={form.control} />
+          </div>
+
          <div className="mt-1">
            <EditorGenericRequiredField formControl={form.control} />
          </div>
--- a/apps/remix/app/components/forms/editor/editor-field-signature-form.tsx
+++ b/apps/remix/app/components/forms/editor/editor-field-signature-form.tsx
@ -5,11 +5,8 @@ import { Trans } from '@lingui/react/macro';
 import { useForm, useWatch } from 'react-hook-form';
 import type { z } from 'zod';

-import {
-  DEFAULT_FIELD_FONT_SIZE,
-  type TSignatureFieldMeta,
-  ZSignatureFieldMeta,
-} from '@documenso/lib/types/field-meta';
+import { DEFAULT_SIGNATURE_TEXT_FONT_SIZE } from '@documenso/lib/constants/pdf';
+import { type TSignatureFieldMeta, ZSignatureFieldMeta } from '@documenso/lib/types/field-meta';
 import { Form } from '@documenso/ui/primitives/form/form';

 import { EditorGenericFontSizeField } from './editor-field-generic-field-forms';
@ -35,7 +32,7 @@ export const EditorFieldSignatureForm = ({
    resolver: zodResolver(ZSignatureFieldFormSchema),
    mode: 'onChange',
    defaultValues: {
-      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
+      fontSize: value.fontSize || DEFAULT_SIGNATURE_TEXT_FONT_SIZE,
    },
  });

--- a/apps/remix/app/components/forms/editor/editor-field-text-form.tsx
+++ b/apps/remix/app/components/forms/editor/editor-field-text-form.tsx
@ -3,11 +3,16 @@ import { useEffect } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { useForm, useWatch } from 'react-hook-form';
-import { z } from 'zod';
+import type { z } from 'zod';

 import {
  DEFAULT_FIELD_FONT_SIZE,
+  FIELD_DEFAULT_GENERIC_ALIGN,
+  FIELD_DEFAULT_GENERIC_VERTICAL_ALIGN,
+  FIELD_DEFAULT_LETTER_SPACING,
+  FIELD_DEFAULT_LINE_HEIGHT,
  type TTextFieldMeta as TextFieldMeta,
+  ZTextFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import {
  Form,
@ -22,32 +27,36 @@ import { Textarea } from '@documenso/ui/primitives/textarea';

 import {
  EditorGenericFontSizeField,
+  EditorGenericLetterSpacingField,
+  EditorGenericLineHeightField,
  EditorGenericReadOnlyField,
  EditorGenericRequiredField,
  EditorGenericTextAlignField,
+  EditorGenericVerticalAlignField,
 } from './editor-field-generic-field-forms';

-const ZTextFieldFormSchema = z
-  .object({
-    label: z.string().optional(),
-    placeholder: z.string().optional(),
-    text: z.string().optional(),
-    characterLimit: z.coerce.number().min(0).optional(),
-    fontSize: z.coerce.number().min(8).max(96).optional(),
-    textAlign: z.enum(['left', 'center', 'right']).optional(),
-    required: z.boolean().optional(),
-    readOnly: z.boolean().optional(),
-  })
-  .refine(
-    (data) => {
-      // A read-only field must have text
-      return !data.readOnly || (data.text && data.text.length > 0);
-    },
-    {
-      message: 'A read-only field must have text',
-      path: ['text'],
-    },
-  );
+const ZTextFieldFormSchema = ZTextFieldMeta.pick({
+  label: true,
+  placeholder: true,
+  text: true,
+  characterLimit: true,
+  fontSize: true,
+  textAlign: true,
+  lineHeight: true,
+  letterSpacing: true,
+  verticalAlign: true,
+  required: true,
+  readOnly: true,
+}).refine(
+  (data) => {
+    // A read-only field must have text
+    return !data.readOnly || (data.text && data.text.length > 0);
+  },
+  {
+    message: 'A read-only field must have text',
+    path: ['text'],
+  },
+);

 type TTextFieldFormSchema = z.infer<typeof ZTextFieldFormSchema>;

@ -73,7 +82,10 @@ export const EditorFieldTextForm = ({
      text: value.text || '',
      characterLimit: value.characterLimit || 0,
      fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
-      textAlign: value.textAlign || 'left',
+      textAlign: value.textAlign ?? FIELD_DEFAULT_GENERIC_ALIGN,
+      lineHeight: value.lineHeight ?? FIELD_DEFAULT_LINE_HEIGHT,
+      letterSpacing: value.letterSpacing ?? FIELD_DEFAULT_LETTER_SPACING,
+      verticalAlign: value.verticalAlign ?? FIELD_DEFAULT_GENERIC_VERTICAL_ALIGN,
      required: value.required || false,
      readOnly: value.readOnly || false,
    },
@ -89,6 +101,10 @@ export const EditorFieldTextForm = ({
  useEffect(() => {
    const validatedFormValues = ZTextFieldFormSchema.safeParse(formValues);

+    if (formValues.readOnly && !formValues.text) {
+      void form.trigger('text');
+    }
+
    if (validatedFormValues.success) {
      onValueChange({
        type: 'text',
@ -101,10 +117,12 @@ export const EditorFieldTextForm = ({
    <Form {...form}>
      <form>
        <fieldset className="flex flex-col gap-2">
-          <div className="flex w-full flex-row gap-x-4">
-            <EditorGenericFontSizeField className="w-full" formControl={form.control} />
+          <EditorGenericFontSizeField className="w-full" formControl={form.control} />

+          <div className="flex w-full flex-row gap-x-4">
            <EditorGenericTextAlignField className="w-full" formControl={form.control} />
+
+            <EditorGenericVerticalAlignField className="w-full" formControl={form.control} />
          </div>

          <FormField
@ -182,17 +200,16 @@ export const EditorFieldTextForm = ({
                </FormLabel>
                <FormControl>
                  <Input
-                    type="number"
-                    min={0}
                    className="bg-background"
-                    placeholder={t`Field character limit`}
+                    placeholder={t`Character limit`}
                    {...field}
+                    value={field.value || ''}
                    onChange={(e) => {
-                      field.onChange(e);
-
                      const values = form.getValues();
                      const characterLimit = parseInt(e.target.value, 10) || 0;

+                      field.onChange(characterLimit || '');
+
                      const textValue = values.text || '';

                      if (characterLimit > 0 && textValue.length > characterLimit) {
@ -206,6 +223,12 @@ export const EditorFieldTextForm = ({
            )}
          />

+          <div className="flex w-full flex-row gap-x-4">
+            <EditorGenericLineHeightField className="w-full" formControl={form.control} />
+
+            <EditorGenericLetterSpacingField className="w-full" formControl={form.control} />
+          </div>
+
          <div className="mt-1">
            <EditorGenericRequiredField formControl={form.control} />
          </div>