chore: add more field types (#1141)

Adds a number of new field types and capabilities to existing fields.

A massive change with far too many moving pieces to document in a single commit.

packages/ui/components/field/field.tsx

@@ -1,10 +1,12 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { createPortal } from 'react-dom';
 
 import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
+import type { TFieldMetaSchema } from '@documenso/lib/types/field-meta';
+import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
 import type { Field } from '@documenso/prisma/client';
 
 import { cn } from '../../lib/utils';
@@ -22,6 +24,51 @@ export type FieldContainerPortalProps = {
   cardClassName?: string;
 };
 
+const getCardClassNames = (
+  field: Field,
+  parsedField: TFieldMetaSchema | null,
+  isValidating: boolean,
+  checkBoxOrRadio: boolean,
+  cardClassName?: string,
+) => {
+  const baseClasses = 'field-card-container relative z-20 h-full w-full transition-all';
+
+  const insertedClasses =
+    'bg-documenso/20 border-documenso ring-documenso-200 ring-offset-documenso-200 ring-2 ring-offset-2 dark:shadow-none';
+  const nonRequiredClasses =
+    'border-yellow-300 shadow-none ring-2 ring-yellow-100 ring-offset-2 ring-offset-yellow-100 dark:border-2';
+  const validatingClasses = 'border-orange-300 ring-1 ring-orange-300';
+  const requiredClasses =
+    'border-red-500 shadow-none ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 hover:text-red-500';
+  const requiredCheckboxRadioClasses = 'border-dashed border-red-500';
+
+  if (checkBoxOrRadio) {
+    return cn(
+      {
+        [insertedClasses]: field.inserted,
+        'ring-offset-yellow-200 border-dashed border-yellow-300 ring-2 ring-yellow-200 ring-offset-2 dark:shadow-none':
+          !field.inserted && !parsedField?.required,
+        'shadow-none': !field.inserted,
+        [validatingClasses]: !field.inserted && isValidating,
+        [requiredCheckboxRadioClasses]: !field.inserted && parsedField?.required,
+      },
+      cardClassName,
+    );
+  }
+
+  return cn(
+    baseClasses,
+    {
+      [insertedClasses]: field.inserted,
+      [nonRequiredClasses]: !field.inserted && !parsedField?.required,
+      'shadow-none': !field.inserted && checkBoxOrRadio,
+      [validatingClasses]: !field.inserted && isValidating,
+      [requiredClasses]: !field.inserted && parsedField?.required && !checkBoxOrRadio,
+    },
+    cardClassName,
+  );
+};
+
 export function FieldContainerPortal({
   field,
   children,
@@ -29,16 +76,22 @@ export function FieldContainerPortal({
 }: FieldContainerPortalProps) {
   const coords = useFieldPageCoords(field);
 
+  const isCheckboxOrRadioField = field.type === 'CHECKBOX' || field.type === 'RADIO';
+  const isFieldSigned = field.inserted;
+
+  const style = {
+    top: `${coords.y}px`,
+    left: `${coords.x}px`,
+    // height: `${coords.height}px`,
+    // width: `${coords.width}px`,
+    ...((!isCheckboxOrRadioField) && {
+      height: `${coords.height}px`,
+      width: `${coords.width}px`,
+    }),
+  };
+
   return createPortal(
-    <div
-      className={cn('absolute', className)}
-      style={{
-        top: `${coords.y}px`,
-        left: `${coords.x}px`,
-        height: `${coords.height}px`,
-        width: `${coords.width}px`,
-      }}
-    >
+    <div className={cn('absolute', className)} style={style}>
       {children}
     </div>,
     document.body,
@@ -47,7 +100,6 @@ export function FieldContainerPortal({
 
 export function FieldRootContainer({ field, children, cardClassName }: FieldContainerPortalProps) {
   const [isValidating, setIsValidating] = useState(false);
-
   const ref = React.useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -70,19 +122,27 @@ export function FieldRootContainer({ field, children, cardClassName }: FieldCont
     };
   }, []);
 
+  const parsedField = useMemo(
+    () => (field.fieldMeta ? ZFieldMetaSchema.parse(field.fieldMeta) : null),
+    [field.fieldMeta],
+  );
+  const isCheckboxOrRadio = useMemo(
+    () => parsedField?.type === 'checkbox' || parsedField?.type === 'radio',
+    [parsedField],
+  );
+
+  const cardClassNames = useMemo(
+    () => getCardClassNames(field, parsedField, isValidating, isCheckboxOrRadio, cardClassName),
+    [field, parsedField, isValidating, isCheckboxOrRadio, cardClassName],
+  );
+
   return (
     <FieldContainerPortal field={field}>
       <Card
         id={`field-${field.id}`}
-        className={cn(
-          'field-card-container bg-background relative z-20 h-full w-full transition-all',
-          {
-            'border-orange-300 ring-1 ring-orange-300': !field.inserted && isValidating,
-          },
-          cardClassName,
-        )}
         ref={ref}
         data-inserted={field.inserted ? 'true' : 'false'}
+        className={cardClassNames}
       >
         <CardContent className="text-foreground hover:shadow-primary-foreground group flex h-full w-full flex-col items-center justify-center p-2">
           {children}