@servicetitan/dte-pdf-editor 1.5.0 → 1.7.0

package/src/components/pdf-editor/pdf-editor.tsx

@@ -1,30 +1,14 @@
 import { Flex } from '@servicetitan/anvil2';
-import { DragEvent, FC, MouseEvent, ReactNode, useMemo, useRef, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import { FIELD_CONSTANTS, FILLABLE_FIELD_DEFAULT_SIZES } from '../../constants';
-import { useInitializePdfJsWorker } from '../../hooks';
-
-import {
-    ESignFieldType,
-    FieldTypeEnum,
-    FieldTypeOption,
-    PdfField,
-    RecipientInfo,
-    SchemaObject,
-} from '../../interface/types';
-import '../../styles/index.css';
-import {
-    calculateDropCoordinates,
-    extractGroupedFieldsFromDataModel,
-    generateESignPath,
-    generateFillablePath,
-    isDragOverCanvas,
-    mapColorsToRecipients,
-} from '../../utils';
+import { FC, ReactNode, useCallback, useMemo, useRef } from 'react';
+import { useInitializePdfJsWorker, usePdfFieldDnD, usePdfFieldSelection } from '../../hooks';
+import { PdfField, RecipientInfo, SchemaObject } from '../../interface/types';
+import { extractGroupedFieldsFromDataModel, mapColorsToRecipients } from '../../utils';
 import { FieldConfigPanelOverlay } from '../field-config-panel/field-config-panel-overlay';
 import { FieldSidebar } from '../field-sidebar/field-sidebar';
 import { PdfCanvas } from '../pdf-canvas/pdf-canvas';
 
+import '../../styles/index.css';
+
 interface PdfEditorProps {
     pdfUrl: string;
     loading?: boolean;
@@ -46,161 +30,60 @@ export const PdfEditor: FC<PdfEditorProps> = ({
     pdfUrl,
     recipients = [],
 }) => {
-    useInitializePdfJsWorker();
-
-    const dataModelGroups = useMemo(() => {
-        return dataModel ? extractGroupedFieldsFromDataModel(dataModel) : [];
-    }, [dataModel]);
-    const [draggedFieldOption, setDraggedFieldOption] = useState<FieldTypeOption | null>(null);
-    const [selectedFieldId, setSelectedFieldId] = useState<string | null>(null);
     const pdfContainerRef = useRef<HTMLDivElement>(null);
     const pdfWrapperRef = useRef<HTMLDivElement>(null);
+    useInitializePdfJsWorker();
+    const {
+        deleteSelectedField,
+        deselectField,
+        moveField,
+        resizeField,
+        selectField,
+        selectedField,
+        setSelectedFieldId,
+        updateField,
+    } = usePdfFieldSelection(fields, onFieldsChange);
+
+    const pdfFieldDnd = usePdfFieldDnD({
+        fields,
+        recipients,
+        onFieldsChange,
+        pdfWrapperRef,
+        onSelectField: setSelectedFieldId,
+    });
+
+    const dataModelGroups = useMemo(
+        () => (dataModel ? extractGroupedFieldsFromDataModel(dataModel) : []),
+        [dataModel],
+    );
 
-    const handleDragStart = (fieldOption: FieldTypeOption) => {
-        setDraggedFieldOption(fieldOption);
-    };
-
-    const handleDragEnd = () => {
-        setDraggedFieldOption(null);
-    };
-
-    const handleDrop = (e: DragEvent<HTMLDivElement>, pageNumber: number) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        const isExistingField = e.dataTransfer.getData('text/plain') === 'existing-field';
-        if (isExistingField || !draggedFieldOption) {
-            return;
-        }
-
-        const coordinates = calculateDropCoordinates(e, pageNumber, pdfWrapperRef);
-        if (!coordinates) {
-            setDraggedFieldOption(null);
-            return;
-        }
-
-        const newField: PdfField = {
-            id: uuidv4(),
-            type: draggedFieldOption.type,
-            subType: draggedFieldOption.subType,
-            x: coordinates.x,
-            y: coordinates.y,
-            page: pageNumber,
-            label: draggedFieldOption.label,
-            width: FIELD_CONSTANTS.defaultWidth,
-            height: FIELD_CONSTANTS.defaultHeight,
-            path: draggedFieldOption.path,
-        };
-
-        if (draggedFieldOption.type === FieldTypeEnum.eSign) {
-            newField.recipient = recipients[0]?.name ?? '';
-            newField.path = generateESignPath(
-                recipients[0].name!,
-                draggedFieldOption.subType as ESignFieldType,
-            );
-        }
-        if (draggedFieldOption.type === FieldTypeEnum.fillable) {
-            const defaultFieldSizes = FILLABLE_FIELD_DEFAULT_SIZES[newField.subType!];
-            newField.recipient = recipients[0]?.name ?? '';
-            newField.required = false;
-            newField.path = generateFillablePath(recipients[0]?.name ?? '', uuidv4());
-            if (defaultFieldSizes) {
-                newField.width = defaultFieldSizes.width;
-                newField.height = defaultFieldSizes.height;
-            }
-        }
-
-        onFieldsChange([...fields, newField]);
-        setSelectedFieldId(newField.id);
-        setDraggedFieldOption(null);
-    };
-
-    const handleAddNewField = (newField: PdfField) => {
-        onFieldsChange([...fields, newField]);
-    };
-
-    const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
-        if (!draggedFieldOption) {
-            e.dataTransfer.dropEffect = 'none';
-            return;
-        }
-
-        const isOverCanvas = isDragOverCanvas(e, pdfWrapperRef);
-
-        // Only allow a drop if we're over the actual PDF canvas
-        if (isOverCanvas) {
-            e.preventDefault();
-            e.stopPropagation();
-            e.dataTransfer.dropEffect = 'copy';
-        } else {
-            e.dataTransfer.dropEffect = 'none';
-        }
-    };
-
-    const handleFieldClick = (fieldId: string, e: MouseEvent) => {
-        e.stopPropagation();
-        setSelectedFieldId(fieldId);
-    };
-
-    const handleFieldMove = (fieldId: string, newX: number, newY: number, pageNumber: number) => {
-        onFieldsChange(
-            fields.map(f => (f.id === fieldId ? { ...f, x: newX, y: newY, page: pageNumber } : f)),
-        );
-    };
-
-    const handleFieldResize = (
-        fieldId: string,
-        newWidth: number,
-        newHeight: number,
-        pageNumber: number,
-    ) => {
-        onFieldsChange(
-            fields.map(f =>
-                f.id === fieldId
-                    ? { ...f, width: newWidth, height: newHeight, page: pageNumber }
-                    : f,
-            ),
-        );
-    };
-
-    const handleDeleteField = () => {
-        if (selectedFieldId) {
-            onFieldsChange(fields.filter(f => f.id !== selectedFieldId));
-            setSelectedFieldId(null);
-        }
-    };
-
-    const handleFieldConfigChange = (updates: Partial<PdfField>) => {
-        if (selectedFieldId) {
-            onFieldsChange(fields.map(f => (f.id === selectedFieldId ? { ...f, ...updates } : f)));
-        }
-    };
+    const handleAddNewField = useCallback(
+        (field: PdfField) => onFieldsChange([...fields, field]),
+        [fields, onFieldsChange],
+    );
 
     const recipientsColors = mapColorsToRecipients(recipients);
 
-    const selectedField = useMemo(
-        (): PdfField | null => fields.find(f => f.id === selectedFieldId) ?? null,
-        [fields, selectedFieldId],
-    );
-
     return (
         <Flex flex={1} className={`dte-pdf-editor ${loading ? 'skeleton' : ''}`}>
-            <Flex className="dte-pdf-editor-sidebar-container ">
+            {selectedField && (
+                <FieldConfigPanelOverlay
+                    selectedField={selectedField}
+                    onFieldConfigChange={updateField}
+                    onDeleteField={deleteSelectedField}
+                    recipients={recipients}
+                    onDeselectField={deselectField}
+                />
+            )}
+
+            <Flex className="dte-pdf-editor-sidebar-container">
                 <FieldSidebar
                     dataModelGroups={dataModelGroups}
-                    onDragEnd={handleDragEnd}
-                    onDragStart={handleDragStart}
+                    onDragStart={pdfFieldDnd.handleDragStart}
+                    onDragEnd={pdfFieldDnd.handleDragEnd}
                 />
-                {selectedField && (
-                    <FieldConfigPanelOverlay
-                        selectedField={selectedField}
-                        onFieldConfigChange={handleFieldConfigChange}
-                        onDeleteField={handleDeleteField}
-                        recipients={recipients}
-                        onDeselectField={() => setSelectedFieldId(null)}
-                    />
-                )}
             </Flex>
+
             <Flex gap={12} flex={1} className="dte-pdf-editor-content-container skeleton-item">
                 <PdfCanvas
                     pdfUrl={pdfUrl}
@@ -213,12 +96,12 @@ export const PdfEditor: FC<PdfEditorProps> = ({
                     errorPlaceholder={errorPlaceholder}
                     loadingPlaceholder={loadingPlaceholder}
                     handleAddNewField={handleAddNewField}
-                    onDrop={handleDrop}
-                    onDragOver={handleDragOver}
-                    onFieldClick={handleFieldClick}
-                    onFieldMove={handleFieldMove}
-                    onFieldResize={handleFieldResize}
-                    onDeselectField={() => setSelectedFieldId(null)}
+                    onDrop={pdfFieldDnd.handleDrop}
+                    onDragOver={pdfFieldDnd.handleDragOver}
+                    onFieldClick={selectField}
+                    onFieldMove={moveField}
+                    onFieldResize={resizeField}
+                    onDeselectField={deselectField}
                 />
             </Flex>
         </Flex>

package/src/components/pdf-fields-overlay/pdf-overlay-field-fillable.tsx

@@ -45,6 +45,16 @@ export const PdfOverlayFieldFillable: FC<PdfOverlayFieldFillableProps> = ({
                 />
             );
 
+        case 'number':
+            return (
+                <input
+                    type="number"
+                    readOnly
+                    className="dte-pdf-field-fillable"
+                    placeholder={placeholderText}
+                />
+            );
+
         default:
             return (
                 <input

package/src/components/pdf-fields-overlay/pdf-overlay-field.tsx

@@ -67,6 +67,7 @@ export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
 
     return (
         <div
+            title={field.description}
             onClick={e => onFieldClick(field.id, e)}
             draggable
             onDragStart={e => handleDragStart(e, field)}

package/src/components/pdf-view/pdf-view-e-sign.tsx

@@ -1,19 +1,18 @@
 import { FC } from 'react';
-import { DataModelValues, PdfField } from '../../interface/types';
-import { resolvePdfDataValues } from '../../utils';
+import { PdfField } from '../../interface/types';
 
 interface PdfViewESignProps {
     field: PdfField;
-    data?: DataModelValues;
 }
 
-export const PdfViewESign: FC<PdfViewESignProps> = ({ data, field }) => {
-    const resolvedValue = field.path ? resolvePdfDataValues(data, field.path) : '';
-
+export const PdfViewESign: FC<PdfViewESignProps> = ({ field }) => {
     return (
         <span>
             {field.label} {field.required ? '*' : ''}
-            <div className="dte-pdf-field-value">{resolvedValue}</div>
+            <div
+                className="dte-pdf-field-value"
+                style={{ opacity: 0.1, color: '#fff' }}
+            >{`{{${field.path}}}`}</div>
         </span>
     );
 };

package/src/components/pdf-view/pdf-view-fillable.tsx

@@ -97,6 +97,29 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
         );
     }
 
+    if (field.subType === 'number') {
+        return (
+            <input
+                type="number"
+                style={{
+                    background: 'inherit',
+                    width: 'inherit',
+                    height: 'inherit',
+                }}
+                disabled={!isViewByCurrentRecipient}
+                id={field.path}
+                name={field.path}
+                value={resolvedValue ?? ''}
+                onChange={e =>
+                    onDataChange?.({
+                        [field.path!]: e.target.value,
+                    })
+                }
+                placeholder={getFieldPlaceholderText(field)}
+            />
+        );
+    }
+
     return (
         <input
             type="text"

package/src/components/pdf-view/pdf-view.tsx

@@ -79,7 +79,7 @@ export const PdfView: FC<PdfViewProps> = ({
                                         <PdfViewDataModel field={field} data={data} />
                                     )}
                                     {field.type === FieldTypeEnum.eSign && (
-                                        <PdfViewESign field={field} data={data} />
+                                        <PdfViewESign field={field} />
                                     )}
                                     {field.type === FieldTypeEnum.fillable && (
                                         <PdfViewFillable

package/src/constants/field.constants.ts

@@ -30,6 +30,7 @@ export const E_SIGN_FIELD_TYPE_OPTIONS: { name: string; id: ESignFieldType }[] =
 
 export const FILLABLE_FIELD_TYPES: FieldTypeOption[] = [
     { label: 'Text Field', type: FieldTypeEnum.fillable, subType: 'text' },
+    { label: 'Number Field', type: FieldTypeEnum.fillable, subType: 'number' },
     { label: 'Date Field', type: FieldTypeEnum.fillable, subType: 'date' },
     { label: 'Checkbox', type: FieldTypeEnum.fillable, subType: 'checkbox' },
     { label: 'Radio', type: FieldTypeEnum.fillable, subType: 'radio' },

package/src/hooks/index.ts

@@ -2,3 +2,6 @@ export * from './useFieldDrag';
 export * from './useFieldResize';
 export * from './useInitializePdfJsWorker';
 export * from './usePdfDocumentRenderer';
+export * from './usePdfFieldDnD';
+export * from './usePdfFieldSelection';
+export * from './useToggle';

package/src/hooks/usePdfFieldDnD.ts

@@ -0,0 +1,118 @@
+import { DragEvent, RefObject, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { FIELD_CONSTANTS, FILLABLE_FIELD_DEFAULT_SIZES } from '../constants';
+import {
+    ESignFieldType,
+    FieldTypeEnum,
+    FieldTypeOption,
+    PdfField,
+    RecipientInfo,
+} from '../interface/types';
+import {
+    calculateDropCoordinates,
+    generateESignPath,
+    generateFillablePath,
+    isDragOverCanvas,
+} from '../utils';
+
+interface UsePdfFieldDnDProps {
+    fields: PdfField[];
+    recipients: RecipientInfo[];
+    onFieldsChange: (fields: PdfField[]) => void;
+    pdfWrapperRef: RefObject<HTMLDivElement>;
+    onSelectField: (id: string) => void;
+}
+
+export const usePdfFieldDnD = ({
+    fields,
+    onFieldsChange,
+    onSelectField,
+    pdfWrapperRef,
+    recipients,
+}: UsePdfFieldDnDProps) => {
+    const [draggedFieldOption, setDraggedFieldOption] = useState<FieldTypeOption | null>(null);
+
+    const handleDragStart = (fieldOption: FieldTypeOption) => {
+        setDraggedFieldOption(fieldOption);
+    };
+
+    const handleDragEnd = () => {
+        setDraggedFieldOption(null);
+    };
+
+    const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
+        if (!draggedFieldOption) {
+            e.dataTransfer.dropEffect = 'none';
+            return;
+        }
+
+        if (isDragOverCanvas(e, pdfWrapperRef)) {
+            e.preventDefault();
+            e.stopPropagation();
+            e.dataTransfer.dropEffect = 'copy';
+        } else {
+            e.dataTransfer.dropEffect = 'none';
+        }
+    };
+
+    const handleDrop = (e: DragEvent<HTMLDivElement>, pageNumber: number) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (e.dataTransfer.getData('text/plain') === 'existing-field' || !draggedFieldOption) {
+            return;
+        }
+
+        const coordinates = calculateDropCoordinates(e, pageNumber, pdfWrapperRef);
+        if (!coordinates) {
+            setDraggedFieldOption(null);
+            return;
+        }
+
+        const newField: PdfField = {
+            id: uuidv4(),
+            type: draggedFieldOption.type,
+            subType: draggedFieldOption.subType,
+            x: coordinates.x,
+            y: coordinates.y,
+            page: pageNumber,
+            label: draggedFieldOption.label,
+            width: FIELD_CONSTANTS.defaultWidth,
+            height: FIELD_CONSTANTS.defaultHeight,
+            path: draggedFieldOption.path,
+        };
+
+        const recipientName = recipients[0]?.name ?? '';
+
+        if (newField.type === FieldTypeEnum.eSign) {
+            newField.recipient = recipientName;
+            newField.path = generateESignPath(
+                recipientName,
+                draggedFieldOption.subType as ESignFieldType,
+            );
+        }
+
+        if (newField.type === FieldTypeEnum.fillable) {
+            const defaultSize = FILLABLE_FIELD_DEFAULT_SIZES[newField.subType!];
+            newField.recipient = recipientName;
+            newField.required = false;
+            newField.path = generateFillablePath(recipientName, uuidv4());
+
+            if (defaultSize) {
+                newField.width = defaultSize.width;
+                newField.height = defaultSize.height;
+            }
+        }
+
+        onFieldsChange([...fields, newField]);
+        onSelectField(newField.id);
+        setDraggedFieldOption(null);
+    };
+
+    return {
+        handleDragStart,
+        handleDragEnd,
+        handleDragOver,
+        handleDrop,
+    };
+};

package/src/hooks/usePdfFieldSelection.ts

@@ -0,0 +1,55 @@
+import { MouseEvent, useMemo, useState } from 'react';
+import { PdfField } from '../interface/types';
+
+export const usePdfFieldSelection = (
+    fields: PdfField[],
+    onFieldsChange: (fields: PdfField[]) => void,
+) => {
+    const [selectedFieldId, setSelectedFieldId] = useState<string | null>(null);
+
+    const selectedField = useMemo(
+        () => fields.find(f => f.id === selectedFieldId) ?? null,
+        [fields, selectedFieldId],
+    );
+
+    const selectField = (fieldId: string, e?: MouseEvent) => {
+        e?.stopPropagation();
+        setSelectedFieldId(fieldId);
+    };
+
+    const deselectField = () => setSelectedFieldId(null);
+
+    const updateField = (updates: Partial<PdfField>) => {
+        if (!selectedFieldId) {
+            return;
+        }
+        onFieldsChange(fields.map(f => (f.id === selectedFieldId ? { ...f, ...updates } : f)));
+    };
+
+    const deleteSelectedField = () => {
+        if (!selectedFieldId) {
+            return;
+        }
+        onFieldsChange(fields.filter(f => f.id !== selectedFieldId));
+        setSelectedFieldId(null);
+    };
+
+    const moveField = (id: string, x: number, y: number, page: number) => {
+        onFieldsChange(fields.map(f => (f.id === id ? { ...f, x, y, page } : f)));
+    };
+
+    const resizeField = (id: string, width: number, height: number, page: number) => {
+        onFieldsChange(fields.map(f => (f.id === id ? { ...f, width, height, page } : f)));
+    };
+
+    return {
+        selectedField,
+        selectField,
+        deselectField,
+        updateField,
+        deleteSelectedField,
+        moveField,
+        resizeField,
+        setSelectedFieldId,
+    };
+};

package/src/hooks/useToggle.ts

@@ -0,0 +1,26 @@
+import { useCallback, useState } from 'react';
+
+export interface UseToggleReturn {
+    isOpen: boolean;
+    toggle: () => void;
+    open: () => void;
+    close: () => void;
+}
+
+export const useToggle = (initialValue: boolean = false): UseToggleReturn => {
+    const [isOpen, setIsOpen] = useState<boolean>(initialValue);
+
+    const toggle = useCallback(() => {
+        setIsOpen(v => !v);
+    }, []);
+
+    const open = useCallback(() => {
+        setIsOpen(true);
+    }, []);
+
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+
+    return { isOpen, toggle, open, close };
+};

package/src/interface/types.ts

@@ -11,7 +11,7 @@ export enum ESignFieldType {
     fullName = 'fullName',
 }
 
-export type FillableFieldType = 'text' | 'date' | 'checkbox' | 'radio';
+export type FillableFieldType = 'text' | 'date' | 'checkbox' | 'radio' | 'number';
 
 export interface PdfField {
     id: string;
@@ -26,6 +26,7 @@ export interface PdfField {
     required?: boolean;
     path?: string;
     recipient?: string;
+    description?: string;
 }
 
 export interface FieldTypeOption {

package/src/styles/field-config-panel-overlay.css

@@ -12,7 +12,9 @@
     top: 0;
     left: 0;
     bottom: 0;
-    width: 100%;
+    width: calc(
+        var(--layout-sidebar-content-width, 305px) + var(--layout-sidebar-menu-width, 85px) + 1px
+    );
     border-right: 1px solid var(--border-color);
     background-color: var(--white);
     z-index: 1000;

package/src/styles/field-sidebar.css

@@ -3,27 +3,60 @@
 }
 
 .dte-pdf-editor .dte-field-sidebar-menu {
-    width: 85px;
+    width: var(--layout-sidebar-menu-width, 85px);
     padding: var(--spacing-2) var(--spacing-half);
 }
 
 .dte-field-sidebar-menu-item {
+    --sub-item-color: unset;
     cursor: pointer;
 }
 
+.dte-field-sidebar-menu-item:hover {
+    --sub-item-color: var(--menu-hover-color);
+}
+
+.dte-field-sidebar-menu-item.--active {
+    --sub-item-color: var(--menu-active-color);
+}
+
 .dte-field-sidebar-menu-item-text {
     text-align: center;
 }
 
+.dte-field-sidebar-menu-item-text,
+.dte-field-sidebar-menu-item-icon {
+    transition: color 0.2s ease-out;
+    color: var(--sub-item-color);
+}
+
+.dte-field-sidebar-toggler {
+    position: absolute;
+    top: 0;
+    right: -5px;
+    cursor: pointer;
+    background: transparent;
+}
+
 .dte-field-sidebar-content {
     border-left: 1px solid var(--border-color);
     border-right: 1px solid var(--border-color);
-    padding: var(--spacing-2);
     position: relative;
+    width: 0;
+    transition: width 0.3s ease-out;
+}
+
+.dte-field-sidebar-content-inner {
+    width: var(--layout-sidebar-content-width, 305px);
+    min-width: var(--layout-sidebar-content-width, 305px);
     display: flex;
+    padding: var(--spacing-2);
     flex-direction: column;
     overflow-y: auto;
-    width: 305px;
+}
+
+.dte-field-sidebar-content.--open {
+    width: var(--layout-sidebar-content-width, 305px);
 }
 
 .dte-field-sidebar-search {

package/src/styles/field-type-list.css

@@ -1,5 +1,5 @@
 .dte-field-type-group {
-    margin-top: 0.25rem;
+    margin-top: var(--spacing-1);
 }
 
 .dte-field-type-group-header {

package/src/styles/field-type.css

@@ -4,7 +4,14 @@
     gap: 8px;
     padding: 12px;
     background-color: var(--color-neutral-0);
+    border: 1px solid var(--border-color);
     border-radius: 0.375rem;
     cursor: grab;
     user-select: none;
+    margin-top: var(--spacing-1, 8px);
+    transition: box-shadow 0.2s ease-in-out;
+}
+
+.dte-field-type-item:hover {
+    box-shadow: 0 0 2px 0 var(--border-color-active);
 }