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.

apps/documentation/pages/developers/_meta.json

@@ -5,6 +5,7 @@
     "title": "Development & Deployment"
   },
   "local-development": "Local Development",
+  "developer-mode": "Developer Mode",
   "self-hosting": "Self Hosting",
   "contributing": "Contributing",
   "-- API & Integration Guides": {

apps/documentation/pages/developers/developer-mode/field-coordinates.mdx

@@ -0,0 +1,18 @@
+---
+title: Field Coordinates
+description: Learn how to get the coordinates of a field in a document.
+---
+
+## Field Coordinates
+
+Field coordinates represent the position of a field in a document. They are returned in the `pageX` and `pageY` properties of the field.
+
+To enable field coordinates, you can use the `devmode` query parameter.
+
+```bash
+https://app.documenso.com/documents/<document-id>/edit?devmode=true
+```
+
+You should then see the coordinates on top of each field.
+
+![Field Coordinates](/developer-mode/field-coordinates.webp)

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 && (