feat: add initials field type (#1279)

Adds a new field type that enables document recipients to add
their `initials` on the document.

packages/ui/primitives/document-flow/add-fields.tsx

@@ -10,6 +10,7 @@ import {
   CheckSquare,
   ChevronDown,
   ChevronsUpDown,
+  Contact,
   Disc,
   Hash,
   Info,
@@ -650,6 +651,32 @@ export const AddFieldsFormPartial = ({
                     </Card>
                   </button>
 
+                  <button
+                    type="button"
+                    className="group h-full w-full"
+                    onClick={() => setSelectedField(FieldType.INITIALS)}
+                    onMouseDown={() => setSelectedField(FieldType.INITIALS)}
+                    data-selected={selectedField === FieldType.INITIALS ? true : undefined}
+                  >
+                    <Card
+                      className={cn(
+                        'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
+                        // selectedSignerStyles.borderClass,
+                      )}
+                    >
+                      <CardContent className="flex flex-col items-center justify-center px-6 py-4">
+                        <p
+                          className={cn(
+                            'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
+                          )}
+                        >
+                          <Contact className="h-4 w-4" />
+                          Initials
+                        </p>
+                      </CardContent>
+                    </Card>
+                  </button>
+
                   <button
                     type="button"
                     className="group h-full w-full"
@@ -663,7 +690,7 @@ export const AddFieldsFormPartial = ({
                         // selectedSignerStyles.borderClass,
                       )}
                     >
-                      <CardContent className="p-4">
+                      <CardContent className="flex flex-col items-center justify-center px-6 py-4">
                         <p
                           className={cn(
                             'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',

packages/ui/primitives/document-flow/field-icon.tsx

@@ -1,4 +1,14 @@
-import { CalendarDays, CheckSquare, ChevronDown, Disc, Hash, Mail, Type, User } from 'lucide-react';
+import {
+  CalendarDays,
+  CheckSquare,
+  ChevronDown,
+  Contact,
+  Disc,
+  Hash,
+  Mail,
+  Type,
+  User,
+} from 'lucide-react';
 
 import type { TFieldMetaSchema as FieldMetaType } from '@documenso/lib/types/field-meta';
 import { FieldType } from '@documenso/prisma/client';
@@ -13,6 +23,7 @@ type FieldIconProps = {
 };
 
 const fieldIcons = {
+  [FieldType.INITIALS]: { icon: Contact, label: 'Initials' },
   [FieldType.EMAIL]: { icon: Mail, label: 'Email' },
   [FieldType.NAME]: { icon: User, label: 'Name' },
   [FieldType.DATE]: { icon: CalendarDays, label: 'Date' },
@@ -46,9 +57,11 @@ export const FieldIcon = ({
 
     if (fieldMeta && (type === 'TEXT' || type === 'NUMBER')) {
       if (type === 'TEXT' && 'text' in fieldMeta && fieldMeta.text && !fieldMeta.label) {
-        label = fieldMeta.text.length > 10 ? fieldMeta.text.substring(0, 10) + '...' : fieldMeta.text;
+        label =
+          fieldMeta.text.length > 10 ? fieldMeta.text.substring(0, 10) + '...' : fieldMeta.text;
       } else if (fieldMeta.label) {
-        label = fieldMeta.label.length > 10 ? fieldMeta.label.substring(0, 10) + '...' : fieldMeta.label;
+        label =
+          fieldMeta.label.length > 10 ? fieldMeta.label.substring(0, 10) + '...' : fieldMeta.label;
       } else {
         label = fieldIcons[type]?.label;
       }
@@ -58,7 +71,7 @@ export const FieldIcon = ({
 
     return (
       <div className="text-field-card-foreground flex items-center justify-center gap-x-1.5 text-sm">
-        <Icon className='h-4 w-4' /> {label}
+        <Icon className="h-4 w-4" /> {label}
       </div>
     );
   }

packages/ui/primitives/document-flow/types.ts

@@ -46,6 +46,7 @@ export type TDocumentFlowFormSchema = z.infer<typeof ZDocumentFlowFormSchema>;
 export const FRIENDLY_FIELD_TYPE: Record<FieldType, string> = {
   [FieldType.SIGNATURE]: 'Signature',
   [FieldType.FREE_SIGNATURE]: 'Free Signature',
+  [FieldType.INITIALS]: 'Initials',
   [FieldType.TEXT]: 'Text',
   [FieldType.DATE]: 'Date',
   [FieldType.EMAIL]: 'Email',