feat: show field coordinates in devmode (#1802)

Show the fields coordinates when the `devmode` search param is present.
It's meant to help API users understand where to position the fields.

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

@@ -166,7 +166,6 @@ export const AddFieldsFormPartial = ({
 
   const [selectedField, setSelectedField] = useState<FieldType | null>(null);
   const [selectedSigner, setSelectedSigner] = useState<Recipient | null>(null);
-  const [showRecipientsSelector, setShowRecipientsSelector] = useState(false);
   const [lastActiveField, setLastActiveField] = useState<TAddFieldsFormSchema['fields'][0] | null>(
     null,
   );

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

@@ -6,6 +6,7 @@ import { FieldType } from '@prisma/client';
 import { CopyPlus, Settings2, SquareStack, Trash } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { Rnd } from 'react-rnd';
+import { useSearchParams } from 'react-router';
 
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import type { TFieldMetaSchema } from '@documenso/lib/types/field-meta';
@@ -69,6 +70,7 @@ export const FieldItem = ({
   onFieldDeactivate,
 }: FieldItemProps) => {
   const { _ } = useLingui();
+  const [searchParams] = useSearchParams();
 
   const [coords, setCoords] = useState({
     pageX: 0,
@@ -81,6 +83,8 @@ export const FieldItem = ({
 
   const signerStyles = useRecipientColors(recipientIndex);
 
+  const isDevMode = searchParams.get('devmode') === 'true';
+
   const advancedField = [
     'NUMBER',
     'RADIO',
@@ -303,6 +307,12 @@ export const FieldItem = ({
               (field.signerEmail?.charAt(1)?.toUpperCase() ?? '')}
           </div>
         </div>
+
+        {isDevMode && (
+          <div className="text-muted-foreground absolute -top-6 left-0 right-0 text-center text-[10px]">
+            {`x: ${field.pageX.toFixed(2)}, y: ${field.pageY.toFixed(2)}`}
+          </div>
+        )}
       </div>
 
       {!disabled && settingsActive && (