feat: horizontal checkboxes (#1911)

Adds the ability to have checkboxes align horizontally, wrapping when
they would go off the PDF

packages/lib/client-only/hooks/use-element-bounds.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
 
@@ -10,7 +10,7 @@ export const useElementBounds = (elementOrSelector: HTMLElement | string, withSc
     width: 0,
   });
 
-  const calculateBounds = () => {
+  const calculateBounds = useCallback(() => {
     const $el =
       typeof elementOrSelector === 'string'
         ? document.querySelector<HTMLElement>(elementOrSelector)
@@ -32,11 +32,11 @@ export const useElementBounds = (elementOrSelector: HTMLElement | string, withSc
       width,
       height,
     };
-  };
+  }, [elementOrSelector, withScroll]);
 
   useEffect(() => {
     setBounds(calculateBounds());
-  }, [calculateBounds]);
+  }, []);
 
   useEffect(() => {
     const onResize = () => {
@@ -48,7 +48,7 @@ export const useElementBounds = (elementOrSelector: HTMLElement | string, withSc
     return () => {
       window.removeEventListener('resize', onResize);
     };
-  }, [calculateBounds]);
+  }, []);
 
   useEffect(() => {
     const $el =
@@ -69,7 +69,7 @@ export const useElementBounds = (elementOrSelector: HTMLElement | string, withSc
     return () => {
       observer.disconnect();
     };
-  }, [calculateBounds]);
+  }, []);
 
   return bounds;
 };

packages/lib/server-only/pdf/insert-field-in-pdf.ts

@@ -240,35 +240,79 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
       }));
 
       const selected: string[] = fromCheckboxValue(field.customText);
+      const direction = meta.data.direction ?? 'vertical';
 
       const topPadding = 12;
       const leftCheckboxPadding = 8;
       const leftCheckboxLabelPadding = 12;
       const checkboxSpaceY = 13;
 
-      for (const [index, item] of (values ?? []).entries()) {
-        const offsetY = index * checkboxSpaceY + topPadding;
+      if (direction === 'horizontal') {
+        // Horizontal layout: arrange checkboxes side by side with wrapping
+        let currentX = leftCheckboxPadding;
+        let currentY = topPadding;
+        const maxWidth = pageWidth - fieldX - leftCheckboxPadding * 2;
 
-        const checkbox = pdf.getForm().createCheckBox(`checkbox.${field.secondaryId}.${index}`);
+        for (const [index, item] of (values ?? []).entries()) {
+          const checkbox = pdf.getForm().createCheckBox(`checkbox.${field.secondaryId}.${index}`);
 
-        if (selected.includes(item.value)) {
-          checkbox.check();
+          if (selected.includes(item.value)) {
+            checkbox.check();
+          }
+
+          const labelText = item.value.includes('empty-value-') ? '' : item.value;
+          const labelWidth = font.widthOfTextAtSize(labelText, 12);
+          const itemWidth = leftCheckboxLabelPadding + labelWidth + 16; // checkbox + padding + label + margin
+
+          // Check if item fits on current line, if not wrap to next line
+          if (currentX + itemWidth > maxWidth && index > 0) {
+            currentX = leftCheckboxPadding;
+            currentY += checkboxSpaceY;
+          }
+
+          page.drawText(labelText, {
+            x: fieldX + currentX + leftCheckboxLabelPadding,
+            y: pageHeight - (fieldY + currentY),
+            size: 12,
+            font,
+            rotate: degrees(pageRotationInDegrees),
+          });
+
+          checkbox.addToPage(page, {
+            x: fieldX + currentX,
+            y: pageHeight - (fieldY + currentY),
+            height: 8,
+            width: 8,
+          });
+
+          currentX += itemWidth;
         }
+      } else {
+        // Vertical layout: original behavior
+        for (const [index, item] of (values ?? []).entries()) {
+          const offsetY = index * checkboxSpaceY + topPadding;
 
-        page.drawText(item.value.includes('empty-value-') ? '' : item.value, {
-          x: fieldX + leftCheckboxPadding + leftCheckboxLabelPadding,
-          y: pageHeight - (fieldY + offsetY),
-          size: 12,
-          font,
-          rotate: degrees(pageRotationInDegrees),
-        });
+          const checkbox = pdf.getForm().createCheckBox(`checkbox.${field.secondaryId}.${index}`);
 
-        checkbox.addToPage(page, {
-          x: fieldX + leftCheckboxPadding,
-          y: pageHeight - (fieldY + offsetY),
-          height: 8,
-          width: 8,
-        });
+          if (selected.includes(item.value)) {
+            checkbox.check();
+          }
+
+          page.drawText(item.value.includes('empty-value-') ? '' : item.value, {
+            x: fieldX + leftCheckboxPadding + leftCheckboxLabelPadding,
+            y: pageHeight - (fieldY + offsetY),
+            size: 12,
+            font,
+            rotate: degrees(pageRotationInDegrees),
+          });
+
+          checkbox.addToPage(page, {
+            x: fieldX + leftCheckboxPadding,
+            y: pageHeight - (fieldY + offsetY),
+            height: 8,
+            width: 8,
+          });
+        }
       }
     })
     .with({ type: FieldType.RADIO }, (field) => {

packages/lib/server-only/template/create-document-from-template.ts

@@ -228,6 +228,7 @@ const getUpdatedFieldMeta = (field: Field, prefillField?: TFieldMetaPrefillField
         type: 'checkbox',
         label: field.label,
         values: newValues,
+        direction: checkboxMeta.direction ?? 'vertical',
       };
 
       return meta;

packages/lib/types/field-meta.ts

@@ -96,6 +96,7 @@ export const ZCheckboxFieldMeta = ZBaseFieldMeta.extend({
     .optional(),
   validationRule: z.string().optional(),
   validationLength: z.number().optional(),
+  direction: z.enum(['vertical', 'horizontal']).optional().default('vertical'),
 });
 
 export type TCheckboxFieldMeta = z.infer<typeof ZCheckboxFieldMeta>;