feat: add custom font sizes to fields (#1376)

Adds custom font sizes to fields

https://github.com/user-attachments/assets/1473a4d7-8dc6-4ead-acf5-dd78be7782a0

packages/ui/primitives/document-flow/field-item-advanced-settings.tsx

@@ -13,8 +13,12 @@ import { match } from 'ts-pattern';
 import {
   type TBaseFieldMeta as BaseFieldMeta,
   type TCheckboxFieldMeta as CheckboxFieldMeta,
+  type TDateFieldMeta as DateFieldMeta,
   type TDropdownFieldMeta as DropdownFieldMeta,
+  type TEmailFieldMeta as EmailFieldMeta,
   type TFieldMetaSchema as FieldMeta,
+  type TInitialsFieldMeta as InitialsFieldMeta,
+  type TNameFieldMeta as NameFieldMeta,
   type TNumberFieldMeta as NumberFieldMeta,
   type TRadioFieldMeta as RadioFieldMeta,
   type TTextFieldMeta as TextFieldMeta,
@@ -33,7 +37,11 @@ import {
 } from './document-flow-root';
 import { FieldItem } from './field-item';
 import { CheckboxFieldAdvancedSettings } from './field-items-advanced-settings/checkbox-field';
+import { DateFieldAdvancedSettings } from './field-items-advanced-settings/date-field';
 import { DropdownFieldAdvancedSettings } from './field-items-advanced-settings/dropdown-field';
+import { EmailFieldAdvancedSettings } from './field-items-advanced-settings/email-field';
+import { InitialsFieldAdvancedSettings } from './field-items-advanced-settings/initials-field';
+import { NameFieldAdvancedSettings } from './field-items-advanced-settings/name-field';
 import { NumberFieldAdvancedSettings } from './field-items-advanced-settings/number-field';
 import { RadioFieldAdvancedSettings } from './field-items-advanced-settings/radio-field';
 import { TextFieldAdvancedSettings } from './field-items-advanced-settings/text-field';
@@ -55,10 +63,34 @@ export type FieldMetaKeys =
   | keyof NumberFieldMeta
   | keyof RadioFieldMeta
   | keyof CheckboxFieldMeta
-  | keyof DropdownFieldMeta;
+  | keyof DropdownFieldMeta
+  | keyof InitialsFieldMeta
+  | keyof NameFieldMeta
+  | keyof EmailFieldMeta
+  | keyof DateFieldMeta;
 
 const getDefaultState = (fieldType: FieldType): FieldMeta => {
   switch (fieldType) {
+    case FieldType.INITIALS:
+      return {
+        type: 'initials',
+        fontSize: 14,
+      };
+    case FieldType.NAME:
+      return {
+        type: 'name',
+        fontSize: 14,
+      };
+    case FieldType.EMAIL:
+      return {
+        type: 'email',
+        fontSize: 14,
+      };
+    case FieldType.DATE:
+      return {
+        type: 'date',
+        fontSize: 14,
+      };
     case FieldType.TEXT:
       return {
         type: 'text',
@@ -66,6 +98,7 @@ const getDefaultState = (fieldType: FieldType): FieldMeta => {
         placeholder: '',
         text: '',
         characterLimit: 0,
+        fontSize: 14,
         required: false,
         readOnly: false,
       };
@@ -80,6 +113,7 @@ const getDefaultState = (fieldType: FieldType): FieldMeta => {
         maxValue: 0,
         required: false,
         readOnly: false,
+        fontSize: 14,
       };
     case FieldType.RADIO:
       return {
@@ -180,10 +214,17 @@ export const FieldAdvancedSettings = forwardRef<HTMLDivElement, FieldAdvancedSet
 
     const handleFieldChange = (
       key: FieldMetaKeys,
-      value: string | { checked: boolean; value: string }[] | { value: string }[] | boolean,
+      value:
+        | string
+        | { checked: boolean; value: string }[]
+        | { value: string }[]
+        | boolean
+        | number,
     ) => {
       setFieldState((prevState: FieldMeta) => {
-        if (['characterLimit', 'minValue', 'maxValue', 'validationLength'].includes(key)) {
+        if (
+          ['characterLimit', 'minValue', 'maxValue', 'validationLength', 'fontSize'].includes(key)
+        ) {
           const parsedValue = Number(value);
 
           return {
@@ -232,6 +273,35 @@ export const FieldAdvancedSettings = forwardRef<HTMLDivElement, FieldAdvancedSet
             ))}
 
           {match(field.type)
+            .with(FieldType.INITIALS, () => (
+              <InitialsFieldAdvancedSettings
+                fieldState={fieldState}
+                handleFieldChange={handleFieldChange}
+                handleErrors={setErrors}
+              />
+            ))
+            .with(FieldType.NAME, () => (
+              <NameFieldAdvancedSettings
+                fieldState={fieldState}
+                handleFieldChange={handleFieldChange}
+                handleErrors={setErrors}
+              />
+            ))
+            .with(FieldType.EMAIL, () => (
+              <EmailFieldAdvancedSettings
+                fieldState={fieldState}
+                handleFieldChange={handleFieldChange}
+                handleErrors={setErrors}
+              />
+            ))
+            .with(FieldType.DATE, () => (
+              <DateFieldAdvancedSettings
+                fieldState={fieldState}
+                handleFieldChange={handleFieldChange}
+                handleErrors={setErrors}
+              />
+            ))
+
             .with(FieldType.TEXT, () => (
               <TextFieldAdvancedSettings
                 fieldState={fieldState}
@@ -268,7 +338,6 @@ export const FieldAdvancedSettings = forwardRef<HTMLDivElement, FieldAdvancedSet
               />
             ))
             .otherwise(() => null)}
-
           {errors.length > 0 && (
             <div className="mt-4">
               <ul>