@servicetitan/dte-pdf-editor 1.4.0 → 1.5.0

package/src/components/{data-model-field-type-list.tsx → field-sidebar/data-model-field-type-list.tsx}

@@ -1,6 +1,6 @@
 import { Flex, Text } from '@servicetitan/anvil2';
 import { FC, Fragment, useMemo } from 'react';
-import { DataModelFieldGroup, FieldTypeOption } from '../interface/pdf-editor';
+import { DataModelFieldGroup, FieldTypeOption } from '../../interface/types';
 import { FieldType } from './field-type';
 
 interface DataModelFieldTypeListProps {
@@ -25,11 +25,11 @@ export const DataModelFieldTypeList: FC<DataModelFieldTypeListProps> = ({
         return dataModelGroups
             .map(group => ({
                 ...group,
-                fieldTypes: group.fields.filter(({ label }) =>
+                fields: group.fields.filter(({ label }) =>
                     label.toLowerCase().includes(searchLower),
                 ),
             }))
-            .filter(group => group.fieldTypes.length > 0);
+            .filter(group => group.fields.length > 0);
     }, [dataModelGroups, searchText]);
     return (
         <Fragment>

package/src/components/{e-sign-field-type-list.tsx → field-sidebar/e-sign-field-type-list.tsx}

@@ -1,6 +1,6 @@
 import { FC, Fragment } from 'react';
-import { E_SIGN_FIELD_TYPES } from '../constants';
-import { FieldTypeOption } from '../interface/pdf-editor';
+import { E_SIGN_FIELD_TYPES } from '../../constants';
+import { FieldTypeOption } from '../../interface/types';
 import { FieldType } from './field-type';
 
 interface ESignFieldTypeListProps {

package/src/components/{field-sidebar.tsx → field-sidebar/field-sidebar.tsx}

@@ -4,7 +4,7 @@ import IconPhotoSizeSelectSmall from '@servicetitan/anvil2/assets/icons/material
 import IconEstimate from '@servicetitan/anvil2/assets/icons/st/estimate.svg';
 
 import { FC, useState } from 'react';
-import { DataModelFieldGroup, FieldTypeEnum, FieldTypeOption } from '../interface/pdf-editor';
+import { DataModelFieldGroup, FieldTypeEnum, FieldTypeOption } from '../../interface/types';
 import { DataModelFieldTypeList } from './data-model-field-type-list';
 import { ESignFieldTypeList } from './e-sign-field-type-list';
 import { FillableFieldTypeList } from './fillable-field-type-list';

package/src/components/{fillable-field-type-list.tsx → field-sidebar/fillable-field-type-list.tsx}

@@ -1,6 +1,6 @@
 import { FC, Fragment, useMemo } from 'react';
-import { FILLABLE_FIELD_TYPES } from '../constants';
-import { FieldTypeOption } from '../interface/pdf-editor';
+import { FILLABLE_FIELD_TYPES } from '../../constants';
+import { FieldTypeOption } from '../../interface/types';
 import { FieldType } from './field-type';
 
 interface FillableFieldTypeListProps {

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './pdf-editor/pdf-editor';
+export * from './pdf-view/pdf-view';

package/src/components/{pdf-canvas.tsx → pdf-canvas/pdf-canvas.tsx}

@@ -1,9 +1,9 @@
 import { Flex } from '@servicetitan/anvil2';
 import { DragEvent, FC, MouseEvent, ReactNode, RefObject, useState } from 'react';
-import { BASE_PAGE_WIDTH } from '../constants';
-import { PdfField } from '../interface/pdf-editor';
+import { BASE_PAGE_WIDTH } from '../../constants';
+import { PdfField } from '../../interface/types';
+import { PdfFieldsOverlay } from '../pdf-fields-overlay/pdf-fields-overlay';
 import { PdfDocumentRenderer } from './pdf-document-renderer';
-import { PdfFieldOverlay } from './pdf-field-overlay';
 
 interface PdfCanvasProps {
     pdfUrl: string;
@@ -11,10 +11,11 @@ interface PdfCanvasProps {
     loadingPlaceholder?: ReactNode;
     fields: PdfField[];
     loading: boolean;
-    selectedField: string | null;
+    selectedField: PdfField | null;
     pdfContainerRef: RefObject<HTMLDivElement>;
     pdfWrapperRef: RefObject<HTMLDivElement>;
     recipientsColors: Record<string, string>;
+    handleAddNewField(field: PdfField): void;
     onDragOver(e: DragEvent<HTMLDivElement>): void;
     onDrop(e: DragEvent<HTMLDivElement>, pageNumber: number): void;
     onFieldClick(fieldId: string, e: MouseEvent): void;
@@ -26,6 +27,7 @@ interface PdfCanvasProps {
 export const PdfCanvas: FC<PdfCanvasProps> = ({
     errorPlaceholder,
     fields,
+    handleAddNewField,
     loading,
     loadingPlaceholder,
     onDeselectField,
@@ -65,14 +67,15 @@ export const PdfCanvas: FC<PdfCanvasProps> = ({
                     onDocumentLoadSuccess={onDocumentLoadSuccess}
                 />
                 {isPdfLoaded && fields && (
-                    <PdfFieldOverlay
+                    <PdfFieldsOverlay
                         fields={fields}
+                        handleAddNewField={handleAddNewField}
                         pdfWrapperRef={pdfWrapperRef}
                         recipientsColors={recipientsColors}
                         selectedField={selectedField ?? null}
-                        onFieldClick={onFieldClick ?? (() => {})}
-                        onFieldMove={onFieldMove ?? (() => {})}
-                        onFieldResize={onFieldResize ?? (() => {})}
+                        onFieldClick={onFieldClick}
+                        onFieldMove={onFieldMove}
+                        onFieldResize={onFieldResize}
                     />
                 )}
             </div>

package/src/components/{pdf-document-renderer.tsx → pdf-canvas/pdf-document-renderer.tsx}

@@ -2,10 +2,7 @@ import { DragEvent, FC, ReactNode } from 'react';
 import { Document, Page } from 'react-pdf';
 import 'react-pdf/dist/Page/AnnotationLayer.css';
 import 'react-pdf/dist/Page/TextLayer.css';
-import { usePdfDocumentRenderer } from '../hooks';
-import { initializePdfJsWorker } from '../utils';
-
-initializePdfJsWorker();
+import { useInitializePdfJsWorker, usePdfDocumentRenderer } from '../../hooks';
 
 interface PdfDocumentRendererProps {
     pdfUrl: string;
@@ -28,6 +25,8 @@ export const PdfDocumentRenderer: FC<PdfDocumentRendererProps> = ({
     pageWidth,
     pdfUrl,
 }) => {
+    useInitializePdfJsWorker();
+
     const { handleDocumentLoadSuccess: handleLoadSuccess, pages } = usePdfDocumentRenderer();
 
     const handleDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {

package/src/components/{pdf-editor.tsx → pdf-editor/pdf-editor.tsx}

@@ -1,36 +1,29 @@
 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 { FIELD_CONSTANTS, FILLABLE_FIELD_DEFAULT_SIZES } from '../../constants';
+import { useInitializePdfJsWorker } from '../../hooks';
 
 import {
     ESignFieldType,
     FieldTypeEnum,
     FieldTypeOption,
     PdfField,
+    RecipientInfo,
     SchemaObject,
-} from '../interface/pdf-editor';
-import '../styles/index.css';
+} from '../../interface/types';
+import '../../styles/index.css';
 import {
     calculateDropCoordinates,
     extractGroupedFieldsFromDataModel,
     generateESignPath,
     generateFillablePath,
-    initializePdfJsWorker,
     isDragOverCanvas,
     mapColorsToRecipients,
-} from '../utils';
-import { FieldConfigPanelOverlay } from './field-config-panel-overlay';
-import { FieldSidebar } from './field-sidebar';
-import { PdfCanvas } from './pdf-canvas';
-
-initializePdfJsWorker();
-
-export interface RecipientInfo {
-    id: number;
-    name: string;
-    displayName: string;
-}
+} 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';
 
 interface PdfEditorProps {
     pdfUrl: string;
@@ -53,11 +46,13 @@ export const PdfEditor: FC<PdfEditorProps> = ({
     pdfUrl,
     recipients = [],
 }) => {
+    useInitializePdfJsWorker();
+
     const dataModelGroups = useMemo(() => {
         return dataModel ? extractGroupedFieldsFromDataModel(dataModel) : [];
     }, [dataModel]);
     const [draggedFieldOption, setDraggedFieldOption] = useState<FieldTypeOption | null>(null);
-    const [selectedField, setSelectedField] = useState<string | null>(null);
+    const [selectedFieldId, setSelectedFieldId] = useState<string | null>(null);
     const pdfContainerRef = useRef<HTMLDivElement>(null);
     const pdfWrapperRef = useRef<HTMLDivElement>(null);
 
@@ -116,10 +111,14 @@ export const PdfEditor: FC<PdfEditorProps> = ({
         }
 
         onFieldsChange([...fields, newField]);
-        setSelectedField(newField.id);
+        setSelectedFieldId(newField.id);
         setDraggedFieldOption(null);
     };
 
+    const handleAddNewField = (newField: PdfField) => {
+        onFieldsChange([...fields, newField]);
+    };
+
     const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
         if (!draggedFieldOption) {
             e.dataTransfer.dropEffect = 'none';
@@ -140,7 +139,7 @@ export const PdfEditor: FC<PdfEditorProps> = ({
 
     const handleFieldClick = (fieldId: string, e: MouseEvent) => {
         e.stopPropagation();
-        setSelectedField(fieldId);
+        setSelectedFieldId(fieldId);
     };
 
     const handleFieldMove = (fieldId: string, newX: number, newY: number, pageNumber: number) => {
@@ -165,22 +164,25 @@ export const PdfEditor: FC<PdfEditorProps> = ({
     };
 
     const handleDeleteField = () => {
-        if (selectedField) {
-            onFieldsChange(fields.filter(f => f.id !== selectedField));
-            setSelectedField(null);
+        if (selectedFieldId) {
+            onFieldsChange(fields.filter(f => f.id !== selectedFieldId));
+            setSelectedFieldId(null);
         }
     };
 
     const handleFieldConfigChange = (updates: Partial<PdfField>) => {
-        if (selectedField) {
-            onFieldsChange(fields.map(f => (f.id === selectedField ? { ...f, ...updates } : f)));
+        if (selectedFieldId) {
+            onFieldsChange(fields.map(f => (f.id === selectedFieldId ? { ...f, ...updates } : f)));
         }
     };
 
-    const selectedFieldData = fields.find(f => f.id === selectedField) ?? null;
-
     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 ">
@@ -189,13 +191,13 @@ export const PdfEditor: FC<PdfEditorProps> = ({
                     onDragEnd={handleDragEnd}
                     onDragStart={handleDragStart}
                 />
-                {selectedFieldData && (
+                {selectedField && (
                     <FieldConfigPanelOverlay
-                        selectedField={selectedFieldData}
+                        selectedField={selectedField}
                         onFieldConfigChange={handleFieldConfigChange}
                         onDeleteField={handleDeleteField}
                         recipients={recipients}
-                        onDeselectField={() => setSelectedField(null)}
+                        onDeselectField={() => setSelectedFieldId(null)}
                     />
                 )}
             </Flex>
@@ -210,12 +212,13 @@ export const PdfEditor: FC<PdfEditorProps> = ({
                     pdfWrapperRef={pdfWrapperRef}
                     errorPlaceholder={errorPlaceholder}
                     loadingPlaceholder={loadingPlaceholder}
+                    handleAddNewField={handleAddNewField}
                     onDrop={handleDrop}
                     onDragOver={handleDragOver}
                     onFieldClick={handleFieldClick}
                     onFieldMove={handleFieldMove}
                     onFieldResize={handleFieldResize}
-                    onDeselectField={() => setSelectedField(null)}
+                    onDeselectField={() => setSelectedFieldId(null)}
                 />
             </Flex>
         </Flex>

package/src/components/pdf-fields-overlay/add-handle.tsx

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+
+interface AddHandleProps {
+    onClick(): void;
+}
+export const AddHandle: FC<AddHandleProps> = ({ onClick }) => {
+    return (
+        <button className="dte-add-field-button" onClick={onClick} title="Add Field to This Group">
+            +
+        </button>
+    );
+};

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

@@ -0,0 +1,44 @@
+import { FC, MouseEvent, RefObject } from 'react';
+import { PdfField } from '../../interface/types';
+import { PdfOverlayField } from './pdf-overlay-field';
+
+interface PdfFieldsOverlayProps {
+    fields: PdfField[];
+    selectedField: PdfField | null;
+    pdfWrapperRef: RefObject<HTMLDivElement>;
+    recipientsColors: Record<string, string>;
+    handleAddNewField(field: PdfField): void;
+    onFieldClick(fieldId: string, e: MouseEvent): void;
+    onFieldMove(fieldId: string, newX: number, newY: number, pageNumber: number): void;
+    onFieldResize(fieldId: string, newWidth: number, newHeight: number, pageNumber: number): void;
+}
+
+export const PdfFieldsOverlay: FC<PdfFieldsOverlayProps> = ({
+    fields,
+    handleAddNewField,
+    onFieldClick,
+    onFieldMove,
+    onFieldResize,
+    pdfWrapperRef,
+    recipientsColors,
+    selectedField,
+}) => {
+    return (
+        <div className="dte-pdf-field-overlay skeleton-item">
+            {fields.map(field => (
+                <PdfOverlayField
+                    key={field.id}
+                    field={field}
+                    handleAddNewField={handleAddNewField}
+                    onFieldMove={onFieldMove}
+                    onFieldClick={onFieldClick}
+                    pdfWrapperRef={pdfWrapperRef}
+                    onFieldResize={onFieldResize}
+                    isSelected={selectedField?.id === field.id}
+                    recipientsColors={recipientsColors}
+                    isSameGroup={selectedField?.path === field.path}
+                />
+            ))}
+        </div>
+    );
+};

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

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { PdfField } from '../../interface/types';
+
+interface PdfOverlayFieldDataModelProps {
+    field: PdfField;
+}
+
+export const PdfOverlayFieldDataModel: FC<PdfOverlayFieldDataModelProps> = ({ field }) => {
+    return (
+        <span>
+            {field.label ? field.label : field.path}
+            {field.required ? '*' : ''}
+        </span>
+    );
+};

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

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { PdfField } from '../../interface/types';
+
+interface PdfOverlayFieldESignProps {
+    field: PdfField;
+}
+
+export const PdfOverlayFieldESign: FC<PdfOverlayFieldESignProps> = ({ field }) => {
+    return (
+        <span>
+            {field.label} {field.required ? '*' : ''}
+            <div className="dte-pdf-field-value">{field.path}</div>
+        </span>
+    );
+};

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

@@ -0,0 +1,58 @@
+import { FC, Fragment } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { PdfField } from '../../interface/types';
+import { getFieldPlaceholderText } from '../../utils';
+import { AddHandle } from './add-handle';
+
+interface PdfOverlayFieldFillableProps {
+    field: PdfField;
+    handleAddNewField(field: PdfField): void;
+}
+
+export const PdfOverlayFieldFillable: FC<PdfOverlayFieldFillableProps> = ({
+    field,
+    handleAddNewField,
+}) => {
+    const placeholderText = getFieldPlaceholderText(field);
+
+    switch (field.subType) {
+        case 'checkbox':
+            return <input type="checkbox" readOnly className="dte-pdf-field-fillable" />;
+
+        case 'radio':
+            return (
+                <Fragment>
+                    <input type="radio" readOnly className="dte-pdf-field-fillable" />
+                    <AddHandle
+                        onClick={() =>
+                            handleAddNewField({
+                                ...field,
+                                x: field.x + field.width + 15,
+                                id: uuidv4(),
+                            })
+                        }
+                    />
+                </Fragment>
+            );
+
+        case 'date':
+            return (
+                <input
+                    type="date"
+                    readOnly
+                    className="dte-pdf-field-fillable"
+                    placeholder={placeholderText}
+                />
+            );
+
+        default:
+            return (
+                <input
+                    type="text"
+                    readOnly
+                    placeholder={placeholderText}
+                    className="dte-pdf-field-fillable"
+                />
+            );
+    }
+};

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

@@ -0,0 +1,86 @@
+import { FC, MouseEvent, RefObject, useMemo } from 'react';
+import { useFieldDrag, useFieldResize } from '../../hooks';
+import { FieldTypeEnum, PdfField } from '../../interface/types';
+import { getFieldBackgroundColor, getPagePosition } from '../../utils';
+import { PdfOverlayFieldDataModel } from './pdf-overlay-field-data-model';
+import { PdfOverlayFieldESign } from './pdf-overlay-field-e-sign';
+import { PdfOverlayFieldFillable } from './pdf-overlay-field-fillable';
+import { ResizeHandle } from './resize-handle';
+
+interface PdfOverlayFieldProps {
+    field: PdfField;
+    isSelected: boolean;
+    isSameGroup: boolean;
+    recipientsColors: Record<string, string>;
+    pdfWrapperRef: RefObject<HTMLDivElement>;
+    handleAddNewField(field: PdfField): void;
+    onFieldClick(fieldId: string, e: MouseEvent): void;
+    onFieldMove(fieldId: string, newX: number, newY: number, pageNumber: number): void;
+    onFieldResize(fieldId: string, newWidth: number, newHeight: number, pageNumber: number): void;
+}
+
+export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
+    field,
+    handleAddNewField,
+    isSameGroup,
+    isSelected,
+    onFieldClick,
+    onFieldMove,
+    onFieldResize,
+    pdfWrapperRef,
+    recipientsColors,
+}) => {
+    const { draggingFieldIdRef, handleDrag, handleDragEnd, handleDragStart } = useFieldDrag({
+        pdfWrapperRef,
+        onFieldMove,
+    });
+    const isDragging = draggingFieldIdRef.current === field.id;
+
+    const { handleResizeStart } = useFieldResize({
+        pdfWrapperRef,
+        onFieldResize,
+    });
+
+    const pagePos = useMemo(() => {
+        return getPagePosition(field.page, pdfWrapperRef);
+    }, [field.page, pdfWrapperRef]);
+
+    const style = useMemo(() => {
+        const bgColor = getFieldBackgroundColor(field.recipient, recipientsColors);
+        return {
+            left: pagePos.left + field.x,
+            top: pagePos.top + field.y,
+            width: field.width,
+            height: field.height,
+            backgroundColor: bgColor,
+        };
+    }, [
+        field.recipient,
+        field.x,
+        field.y,
+        field.width,
+        field.height,
+        recipientsColors,
+        pagePos.left,
+        pagePos.top,
+    ]);
+
+    return (
+        <div
+            onClick={e => onFieldClick(field.id, e)}
+            draggable
+            onDragStart={e => handleDragStart(e, field)}
+            onDrag={e => handleDrag(e, field)}
+            onDragEnd={handleDragEnd}
+            className={`dte-pdf-field ${isSelected ? '--selected' : '--unselected'} ${isDragging ? '--dragging' : ''} ${isSameGroup ? '--colored' : ''}`}
+            style={style}
+        >
+            {field.type === FieldTypeEnum.eSign && <PdfOverlayFieldESign field={field} />}
+            {field.type === FieldTypeEnum.dataModel && <PdfOverlayFieldDataModel field={field} />}
+            {field.type === FieldTypeEnum.fillable && (
+                <PdfOverlayFieldFillable field={field} handleAddNewField={handleAddNewField} />
+            )}
+            {isSelected && <ResizeHandle handleResizeStart={e => handleResizeStart(e, field)} />}
+        </div>
+    );
+};

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

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { DataModelValues, PdfField } from '../../interface/types';
+import { resolvePdfDataValues } from '../../utils';
+
+interface PdfViewDataModelProps {
+    field: PdfField;
+    data?: DataModelValues;
+}
+
+export const PdfViewDataModel: FC<PdfViewDataModelProps> = ({ data, field }) => {
+    const resolvedValue = field.path ? resolvePdfDataValues(data, field.path) : '';
+    return <div className="dte-pdf-field-value">{resolvedValue ?? ''}</div>;
+};

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

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

package/src/components/{pdf-view-fields.tsx → pdf-view/pdf-view-fillable.tsx}

@@ -1,34 +1,15 @@
 import { FC } from 'react';
-import { DataModelValues, PdfField } from '../interface/pdf-editor';
-import { getFieldPlaceholderText, resolvePdfDataValues } from '../utils';
+import { DataModelValues, PdfField } from '../../interface/types';
+import { getFieldPlaceholderText } from '../../utils';
 
-interface BaseFieldViewProps {
+interface PdfViewFillableProps {
     field: PdfField;
     data?: DataModelValues;
-}
-
-export const ViewDataModel: FC<BaseFieldViewProps> = ({ data, field }) => {
-    const resolvedValue = field.path ? resolvePdfDataValues(data, field.path) : '';
-    return <div className="dte-pdf-field-value">{resolvedValue ?? ''}</div>;
-};
-
-export const ViewEsign: FC<BaseFieldViewProps> = ({ data, field }) => {
-    const resolvedValue = field.path ? resolvePdfDataValues(data, field.path) : '';
-
-    return (
-        <span>
-            {field.label} {field.required ? '*' : ''}
-            <div className="dte-pdf-field-value">{resolvedValue}</div>
-        </span>
-    );
-};
-
-interface FillableFieldViewProps extends BaseFieldViewProps {
     fillingBy?: string[];
     onDataChange?(changedData: { [path: string]: string | boolean }): void;
 }
 
-export const FillableFieldView: FC<FillableFieldViewProps> = ({
+export const PdfViewFillable: FC<PdfViewFillableProps> = ({
     data,
     field,
     fillingBy,
@@ -78,12 +59,13 @@ export const FillableFieldView: FC<FillableFieldViewProps> = ({
                 <input
                     style={{ width: 'inherit', height: 'inherit', margin: 0 }}
                     type="radio"
-                    checked={resolvedValue ?? false}
+                    value={field.id}
+                    checked={resolvedValue === field.id}
                     disabled={!isViewByCurrentRecipient}
                     name={field.path}
-                    onChange={e =>
+                    onChange={() =>
                         onDataChange?.({
-                            [field.path!]: e!.target.value,
+                            [field.path!]: field.id,
                         })
                     }
                 />

package/src/components/{pdf-view.tsx → pdf-view/pdf-view.tsx}

@@ -1,11 +1,12 @@
 import { Flex } from '@servicetitan/anvil2';
 import { FC, ReactNode, useRef, useState } from 'react';
-import { BASE_PAGE_WIDTH } from '../constants';
-import { DataModelValues, FieldTypeEnum, PdfField } from '../interface/pdf-editor';
-import { getFieldBackgroundColor, getPagePosition, mapColorsToRecipients } from '../utils';
-import { PdfDocumentRenderer } from './pdf-document-renderer';
-import { RecipientInfo } from './pdf-editor';
-import { FillableFieldView, ViewDataModel, ViewEsign } from './pdf-view-fields';
+import { BASE_PAGE_WIDTH } from '../../constants';
+import { DataModelValues, FieldTypeEnum, PdfField, RecipientInfo } from '../../interface/types';
+import { getFieldBackgroundColor, getPagePosition, mapColorsToRecipients } from '../../utils';
+import { PdfDocumentRenderer } from '../pdf-canvas/pdf-document-renderer';
+import { PdfViewDataModel } from './pdf-view-data-model';
+import { PdfViewESign } from './pdf-view-e-sign';
+import { PdfViewFillable } from './pdf-view-fillable';
 
 interface PdfViewProps {
     fields: PdfField[];
@@ -75,13 +76,13 @@ export const PdfView: FC<PdfViewProps> = ({
                                     }}
                                 >
                                     {field.type === FieldTypeEnum.dataModel && (
-                                        <ViewDataModel field={field} data={data} />
+                                        <PdfViewDataModel field={field} data={data} />
                                     )}
                                     {field.type === FieldTypeEnum.eSign && (
-                                        <ViewEsign field={field} data={data} />
+                                        <PdfViewESign field={field} data={data} />
                                     )}
                                     {field.type === FieldTypeEnum.fillable && (
-                                        <FillableFieldView
+                                        <PdfViewFillable
                                             data={data}
                                             field={field}
                                             fillingBy={fillingBy}

package/src/constants/field.constants.ts

@@ -3,13 +3,13 @@ import {
     FieldTypeEnum,
     FieldTypeOption,
     FillableFieldType,
-} from '../interface/pdf-editor';
+} from '../interface/types';
 
 export const FIELD_CONSTANTS = {
     defaultWidth: 200,
     defaultHeight: 25,
-    minWidth: 20,
-    minHeight: 20,
+    minWidth: 10,
+    minHeight: 10,
     dropOffsetX: 75,
     dropOffsetY: 15,
 } as const;