fix: rework fields (#1697)

Rework: - Field styling to improve visibility - Field insertions, better alignment, centering and overflows ## Changes General changes: - Set default text alignment to left if no meta found - Reduce borders and rings around fields to allow smaller fields - Removed lots of redundant duplicated code surrounding field rendering - Make fields more consistent across viewing, editing and signing - Add more transparency to fields to allow users to see under fields - No more optional/required/etc colors when signing, required fields will be highlighted as orange when form is "validating" Highlighted internal changes: - Utilize native PDF fields to insert text, instead of drawing text - Change font auto scaling to only apply to when the height overflows AND no custom font is set ⚠️ Multiline changes: Multi line is enabled for a field under these conditions 1. Field content exceeds field width 2. Field includes a new line 3. Field type is TEXT ## [BEFORE] Field UI Signing ![image](https://github.com/user-attachments/assets/ea002743-faeb-477c-a239-3ed240b54f55) ## [AFTER] Field UI Signing ![image](https://github.com/user-attachments/assets/0f8eb252-4cf3-4d96-8d4f-cd085881b78c) ## [BEFORE] Signing a checkbox ![image](https://github.com/user-attachments/assets/4567d745-e1da-4202-a758-5d3c178c930e) ![image](https://github.com/user-attachments/assets/c25068e7-fe80-40f5-b63a-e8a0d4b38b6c) ## [AFTER] Signing a checkbox ![image](https://github.com/user-attachments/assets/effa5e3d-385a-4c35-bc8a-405386dd27d6) ![image](https://github.com/user-attachments/assets/64be34a9-0b32-424d-9264-15361c03eca5) ## [BEFORE] What a 2nd recipient sees once someone else signed a document ![image](https://github.com/user-attachments/assets/21c21ae2-fc62-4ccc-880a-46aab012aa70) ## [AFTER] What a 2nd recipient sees once someone else signed a document ![image](https://github.com/user-attachments/assets/ae51677b-f1d5-4008-a7fd-756533166542) ## **[BEFORE]** Inserting fields ![image](https://github.com/user-attachments/assets/1a8bb8da-9a15-4deb-bc28-eb349414465c) ## **[AFTER]** Inserting fields ![image](https://github.com/user-attachments/assets/c52c5238-9836-45aa-b8a4-bc24a3462f40) ## Overflows, multilines and field alignments testing Debugging borders: - Red border = The original field placement without any modifications - Blue border = The available space to overflow ### Single line overflows and field alignments This is left aligned fields, overflow will always go to the end of the page and will not wrap ![image](https://github.com/user-attachments/assets/47003658-783e-4f9c-adbf-c4686804d98f) This is center aligned fields, the max width is the closest edge to the page * 2 ![image](https://github.com/user-attachments/assets/05a38093-75d6-4600-bae2-21ecff63e115) This is right aligned text, the width will extend all the way to the left hand side of the page ![image](https://github.com/user-attachments/assets/6a9d84a8-4166-4626-9fb3-1577fac2571e) ### Multiline line overflows and field alignments These are text fields that can be overflowed ![image](https://github.com/user-attachments/assets/f7b5456e-2c49-48b2-8d4c-ab1dc3401644) Another example of left aligned text overflows with more text ![image](https://github.com/user-attachments/assets/3db6b35e-4c8d-4ffe-8036-0da760d9c167)
2026-07-24 08:54:20 +10:00 · 2025-04-23 21:40:42 +10:00
parent b94645a451
commit 193325717d
62 changed files with 1819 additions and 1070 deletions
@@ -0,0 +1,170 @@
+import { useState } from 'react';
+
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { DocumentMeta, Field, Recipient, TemplateMeta } from '@prisma/client';
+import { SigningStatus } from '@prisma/client';
+import { Clock, EyeOffIcon } from 'lucide-react';
+
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import type { DocumentField } from '@documenso/lib/server-only/field/get-fields-for-document';
+import { parseMessageDescriptor } from '@documenso/lib/utils/i18n';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { FieldRootContainer } from '@documenso/ui/components/field/field';
+import { SignatureIcon } from '@documenso/ui/icons/signature';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { PopoverHover } from '@documenso/ui/primitives/popover';
+
+import { getRecipientColorStyles } from '../../lib/recipient-colors';
+import { FieldContent } from '../../primitives/document-flow/field-content';
+
+export type DocumentReadOnlyFieldsProps = {
+  fields: DocumentField[];
+  documentMeta?: DocumentMeta | TemplateMeta;
+
+  showFieldStatus?: boolean;
+
+  /**
+   * Required if you want to show colors.
+   *
+   * Can't derive this from the fields because sometimes recipients don't have fields
+   * yet.
+   */
+  recipientIds?: number[];
+
+  /**
+   * Whether to show the recipient tooltip.
+   *
+   * @default false
+   */
+  showRecipientTooltip?: boolean;
+
+  /**
+   * Whether to color code the recipient fields.
+   *
+   * @default false
+   */
+  showRecipientColors?: boolean;
+};
+
+export const mapFieldsWithRecipients = (
+  fields: Field[],
+  recipients: Recipient[],
+): DocumentField[] => {
+  return fields.map((field) => {
+    const recipient = recipients.find((recipient) => recipient.id === field.recipientId) || {
+      id: field.recipientId,
+      name: 'Unknown',
+      email: 'Unknown',
+      signingStatus: SigningStatus.NOT_SIGNED,
+    };
+
+    return { ...field, recipient, signature: null };
+  });
+};
+
+export const DocumentReadOnlyFields = ({
+  documentMeta,
+  fields,
+  recipientIds = [],
+  showFieldStatus = true,
+  showRecipientTooltip = false,
+  showRecipientColors = false,
+}: DocumentReadOnlyFieldsProps) => {
+  const { _ } = useLingui();
+
+  const [hiddenFieldIds, setHiddenFieldIds] = useState<Record<string, boolean>>({});
+
+  const handleHideField = (fieldId: string) => {
+    setHiddenFieldIds((prev) => ({ ...prev, [fieldId]: true }));
+  };
+
+  return (
+    <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+      {fields.map(
+        (field) =>
+          !hiddenFieldIds[field.secondaryId] && (
+            <FieldRootContainer
+              field={field}
+              key={field.id}
+              color={
+                showRecipientColors
+                  ? getRecipientColorStyles(
+                      Math.max(
+                        recipientIds.findIndex((id) => id === field.recipientId),
+                        0,
+                      ),
+                    )
+                  : undefined
+              }
+            >
+              {showRecipientTooltip && (
+                <div className="absolute -right-3 -top-3">
+                  <PopoverHover
+                    trigger={
+                      <Avatar className="h-6 w-6 border-2 border-solid border-gray-200/50 transition-colors hover:border-gray-200">
+                        <AvatarFallback className="bg-neutral-50 text-xs text-gray-400">
+                          {extractInitials(field.recipient.name || field.recipient.email)}
+                        </AvatarFallback>
+                      </Avatar>
+                    }
+                    contentProps={{
+                      className: 'relative flex w-fit flex-col p-4 text-sm',
+                    }}
+                  >
+                    {showFieldStatus && (
+                      <Badge
+                        className="mx-auto mb-1 py-0.5"
+                        variant={
+                          field.recipient.signingStatus === SigningStatus.SIGNED
+                            ? 'default'
+                            : 'secondary'
+                        }
+                      >
+                        {field.recipient.signingStatus === SigningStatus.SIGNED ? (
+                          <>
+                            <SignatureIcon className="mr-1 h-3 w-3" />
+                            <Trans>Signed</Trans>
+                          </>
+                        ) : (
+                          <>
+                            <Clock className="mr-1 h-3 w-3" />
+                            <Trans>Pending</Trans>
+                          </>
+                        )}
+                      </Badge>
+                    )}
+
+                    <p className="text-center font-semibold">
+                      <span>
+                        {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type])} field
+                      </span>
+                    </p>
+
+                    <p className="text-muted-foreground mt-1 text-center text-xs">
+                      {field.recipient.name
+                        ? `${field.recipient.name} (${field.recipient.email})`
+                        : field.recipient.email}{' '}
+                    </p>
+
+                    <button
+                      className="absolute right-0 top-0 my-1 p-2 focus:outline-none focus-visible:ring-0"
+                      onClick={() => handleHideField(field.secondaryId)}
+                      title="Hide field"
+                    >
+                      <EyeOffIcon className="h-3 w-3" />
+                    </button>
+                  </PopoverHover>
+                </div>
+              )}
+
+              <FieldContent field={field} documentMeta={documentMeta} />
+            </FieldRootContainer>
+          ),
+      )}
+    </ElementVisible>
+  );
+};
@@ -1,71 +1,18 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';

-import type { Field } from '@prisma/client';
+import { type Field, FieldType } from '@prisma/client';
 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 { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';

+import type { RecipientColorStyles } from '../../lib/recipient-colors';
 import { cn } from '../../lib/utils';
-import { Card, CardContent } from '../../primitives/card';
-
-export type FieldRootContainerProps = {
-  field: Field;
-  children: React.ReactNode;
-};

 export type FieldContainerPortalProps = {
  field: Field;
  className?: string;
  children: React.ReactNode;
-  cardClassName?: string;
-};
-
-const getCardClassNames = (
-  field: Field,
-  parsedField: TFieldMetaSchema | null,
-  isValidating: boolean,
-  checkBoxOrRadio: boolean,
-  cardClassName?: string,
-) => {
-  const baseClasses =
-    'field--FieldRootContainer field-card-container relative z-20 h-full w-full transition-all';
-
-  const insertedClasses =
-    'bg-primary/20 border-primary ring-primary/20 ring-offset-primary/20 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({
@@ -76,13 +23,10 @@ export function FieldContainerPortal({
  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`,
@@ -97,7 +41,14 @@ export function FieldContainerPortal({
  );
 }

-export function FieldRootContainer({ field, children, cardClassName }: FieldContainerPortalProps) {
+export type FieldRootContainerProps = {
+  field: Field;
+  color?: RecipientColorStyles;
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function FieldRootContainer({ field, children, color, className }: FieldRootContainerProps) {
  const [isValidating, setIsValidating] = useState(false);
  const ref = React.useRef<HTMLDivElement>(null);

@@ -121,33 +72,26 @@ 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
+      <div
        id={`field-${field.id}`}
        ref={ref}
        data-field-type={field.type}
        data-inserted={field.inserted ? 'true' : 'false'}
-        className={cardClassNames}
+        className={cn(
+          'field--FieldRootContainer field-card-container dark-mode-disabled group relative z-20 flex h-full w-full items-center rounded-[2px] bg-white/90 ring-2 ring-gray-200 transition-all',
+          color?.base,
+          {
+            'px-2': field.type !== FieldType.SIGNATURE && field.type !== FieldType.FREE_SIGNATURE,
+            'justify-center': !field.inserted,
+            'ring-orange-300': isValidating && isFieldUnsignedAndRequired(field),
+          },
+          className,
+        )}
      >
-        <CardContent className="text-foreground hover:shadow-primary-foreground group flex h-full w-full flex-col items-center justify-center p-2">
-          {children}
-        </CardContent>
-      </Card>
+        {children}
+      </div>
    </FieldContainerPortal>
  );
 }