INCOMPLETE: refactor signature pad and input into a single component

apps/web/src/app/(signing)/sign/[token]/email-field.tsx

@@ -6,8 +6,8 @@ import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
-import { Recipient } from '@documenso/prisma/client';
+import type { Recipient } from '@documenso/prisma/client';
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 

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

@@ -40,10 +40,19 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
   const fieldX = pageWidth * (Number(field.positionX) / 100);
   const fieldY = pageHeight * (Number(field.positionY) / 100);
 
-  const font = await pdf.embedFont(isSignatureField ? fontCaveat : StandardFonts.Helvetica);
+  // const url =
+  //   'https://fonts.gstatic.com/s/dancingscript/v25/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSoHTQ.ttf';
+
+  const url = 'https://fonts.gstatic.com/s/caveat/v18/WnznHAc5bAfYB2QRah7pcpNvOx-pjfJ9SII.ttf';
+  const googleFont = await fetch(url).then(async (res) => res.arrayBuffer());
+
+  const font = await pdf.embedFont(isSignatureField ? googleFont : StandardFonts.Helvetica, {
+    subset: true,
+    features: { liga: false },
+  });
 
   if (field.type === FieldType.SIGNATURE || field.type === FieldType.FREE_SIGNATURE) {
-    await pdf.embedFont(fontCaveat);
+    await pdf.embedFont(googleFont, { subset: true, features: { liga: false } });
   }
 
   const CUSTOM_TEXT = field.customText || field.Signature?.typedSignature || '';

packages/ui/primitives/signature-pad/signature-pad.tsx

@@ -3,10 +3,15 @@
 import type { HTMLAttributes, MouseEvent, PointerEvent, TouchEvent } from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
+import { zodResolver } from '@hookform/resolvers/zod';
 import type { StrokeOptions } from 'perfect-freehand';
 import { getStroke } from 'perfect-freehand';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 
+import { useRequiredSigningContext } from '../../../../apps/web/src/app/(signing)/sign/[token]/provider';
 import { cn } from '../../lib/utils';
+import { Input } from '../input';
 import { getSvgPathFromStroke } from './helper';
 import { Point } from './point';
 
@@ -16,13 +21,28 @@ export type SignaturePadProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'onChang
   onChange?: (_signatureDataUrl: string | null) => void;
   containerClassName?: string;
   clearSignatureClassName?: string;
+  onFormSubmit?: (_data: TSigningpadSchema) => void;
 };
 
+const ZSigningpadSchema = z.union([
+  z.object({
+    signatureDataUrl: z.string().min(1),
+    signatureText: z.null().or(z.string().max(0)),
+  }),
+  z.object({
+    signatureDataUrl: z.null().or(z.string().max(0)),
+    signatureText: z.string().trim().min(1),
+  }),
+]);
+
+export type TSigningpadSchema = z.infer<typeof ZSigningpadSchema>;
+
 export const SignaturePad = ({
   className,
   containerClassName,
   defaultValue,
   clearSignatureClassName,
+  onFormSubmit,
   onChange,
   ...props
 }: SignaturePadProps) => {
@@ -31,6 +51,26 @@ export const SignaturePad = ({
   const [isPressed, setIsPressed] = useState(false);
   const [points, setPoints] = useState<Point[]>([]);
 
+  const { signature, setSignature } = useRequiredSigningContext();
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { isSubmitting },
+  } = useForm<TSigningpadSchema>({
+    mode: 'onChange',
+    defaultValues: {
+      signatureDataUrl: signature || null,
+      signatureText: '',
+    },
+    resolver: zodResolver(ZSigningpadSchema),
+  });
+
+  const signatureDataUrl = watch('signatureDataUrl');
+  const signatureText = watch('signatureText');
+
   const perfectFreehandOptions = useMemo(() => {
     const size = $el.current ? Math.min($el.current.height, $el.current.width) * 0.03 : 10;
 
@@ -206,28 +246,92 @@ export const SignaturePad = ({
   }, [defaultValue]);
 
   return (
-    <div className={cn('relative block', containerClassName)}>
+    <form onSubmit={handleSubmit(onFormSubmit ?? (() => undefined))}>
-      <canvas
+      <div className={cn('relative block', containerClassName)}>
-        ref={$el}
+        <canvas
-        className={cn('relative block dark:invert', className)}
+          ref={$el}
-        style={{ touchAction: 'none' }}
+          className={cn('relative block dark:invert', className)}
-        onPointerMove={(event) => onMouseMove(event)}
+          style={{ touchAction: 'none' }}
-        onPointerDown={(event) => onMouseDown(event)}
+          onPointerMove={(event) => onMouseMove(event)}
-        onPointerUp={(event) => onMouseUp(event)}
+          onPointerDown={(event) => onMouseDown(event)}
-        onPointerLeave={(event) => onMouseLeave(event)}
+          onPointerUp={(event) => onMouseUp(event)}
-        onPointerEnter={(event) => onMouseEnter(event)}
+          onPointerLeave={(event) => onMouseLeave(event)}
-        {...props}
+          onPointerEnter={(event) => onMouseEnter(event)}
-      />
+          {...props}
+        />
 
-      <div className={cn('absolute bottom-4 right-4', clearSignatureClassName)}>
+        <div className="flex h-44 items-center justify-center pb-6">
-        <button
+          {!signatureText && signature && (
-          type="button"
+            <SignaturePad
-          className="focus-visible:ring-ring ring-offset-background text-muted-foreground rounded-full p-0 text-xs focus-visible:outline-none focus-visible:ring-2"
+              className="h-44 w-full"
-          onClick={() => onClearClick()}
+              defaultValue={signature ?? undefined}
+              onChange={(value) => {
+                setSignature(value);
+              }}
+            />
+          )}
+
+          {signatureText && (
+            <p
+              className={cn(
+                'text-foreground text-4xl font-semibold [font-family:var(--font-caveat)]',
+              )}
+            >
+              {signatureText}
+            </p>
+          )}
+        </div>
+
+        <div
+          className="absolute inset-x-0 bottom-0 flex cursor-auto items-end justify-between px-4 pb-1 pt-2"
+          onClick={(e) => e.stopPropagation()}
         >
-          Clear Signature
+          <Input
-        </button>
+            id="signatureText"
+            className="text-foreground placeholder:text-muted-foreground border-none bg-transparent p-0 text-sm focus-visible:bg-transparent focus-visible:outline-none focus-visible:ring-0"
+            placeholder="Draw or type name here"
+            // disabled={isSubmitting || signature !== null}
+            disabled={isSubmitting}
+            {...register('signatureText', {
+              onChange: (e) => {
+                if (e.target.value !== '') {
+                  setValue('signatureDataUrl', null);
+                }
+
+                setValue('signatureText', e.target.value);
+              },
+
+              onBlur: (e) => {
+                if (e.target.value === '') {
+                  return setValue('signatureText', '');
+                }
+
+                setSignature(e.target.value.trimStart());
+              },
+            })}
+          />
+
+          {/* <div className="absolute bottom-3 right-4">
+                        <button
+                          type="button"
+                          className="focus-visible:ring-ring ring-offset-background text-muted-foreground rounded-full p-0 text-xs focus-visible:outline-none focus-visible:ring-2"
+                          onClick={() => console.log('clear')}
+                        >
+                          Clear Signature
+                        </button>
+                      </div> */}
+        </div>
+
+        <div className={cn('absolute bottom-4 right-4', clearSignatureClassName)}>
+          <button
+            type="button"
+            className="focus-visible:ring-ring ring-offset-background text-muted-foreground rounded-full p-0 text-xs focus-visible:outline-none focus-visible:ring-2"
+            onClick={() => onClearClick()}
+          >
+            Clear Signature
+          </button>
+        </div>
       </div>
-    </div>
+    </form>
   );
 };