@pdfme/ui 5.3.8-dev.4 → 5.3.8-dev.42

package/dist/types/Designer.d.ts

@@ -1,5 +1,5 @@
 import { Template, DesignerProps } from '@pdfme/common';
-import { BaseUIClass } from './class';
+import { BaseUIClass } from './class.js';
 declare class Designer extends BaseUIClass {
     private onSaveTemplateCallback?;
     private onChangeTemplateCallback?;

package/dist/types/Form.d.ts

@@ -1,5 +1,5 @@
 import { PreviewProps } from '@pdfme/common';
-import { PreviewUI } from './class';
+import { PreviewUI } from './class.js';
 declare class Form extends PreviewUI {
     private onChangeInputCallback?;
     constructor(props: PreviewProps);

package/dist/types/Viewer.d.ts

@@ -1,5 +1,5 @@
 import { PreviewProps } from '@pdfme/common';
-import { PreviewUI } from './class';
+import { PreviewUI } from './class.js';
 declare class Viewer extends PreviewUI {
     constructor(props: PreviewProps);
     protected render(): void;

package/dist/types/components/Designer/Canvas/Guides.d.ts

@@ -1,9 +1,15 @@
 import React, { Ref } from 'react';
-import Guides from '@scena/react-guides';
 import { Size } from '@pdfme/common';
+interface GuidesInterface {
+    getGuides(): number[];
+    scroll(pos: number): void;
+    scrollGuides(pos: number): void;
+    loadGuides(guides: number[]): void;
+    resize(): void;
+}
 declare const _Guides: ({ paperSize, horizontalRef, verticalRef, }: {
     paperSize: Size;
-    horizontalRef: Ref<Guides> | undefined;
-    verticalRef: Ref<Guides> | undefined;
+    horizontalRef: Ref<GuidesInterface> | undefined;
+    verticalRef: Ref<GuidesInterface> | undefined;
 }) => React.JSX.Element;
 export default _Guides;

package/dist/types/components/Designer/Canvas/Moveable.d.ts

@@ -1,5 +1,52 @@
 import React from 'react';
-import { OnDrag, OnResize, OnRotate, OnRotateEnd, OnClick } from 'react-moveable';
+interface OnDrag {
+    target: HTMLElement | SVGElement;
+    left: number;
+    top: number;
+    beforeDelta: any;
+    beforeDist: any;
+    beforeTranslate: any;
+    delta: any;
+    dist: any;
+    transform: any;
+    translate: any;
+}
+interface OnResize {
+    target: HTMLElement | SVGElement;
+    width: number;
+    height: number;
+    direction: string;
+    offsetWidth: number;
+    offsetHeight: number;
+    dist: any;
+    delta: any;
+    transform: any;
+    translate: any;
+}
+interface OnRotate {
+    target: HTMLElement | SVGElement;
+    rotate: number;
+    beforeDist: any;
+    beforeDelta: any;
+    beforeRotate: any;
+    dist: any;
+    delta: any;
+    transform: any;
+}
+interface OnRotateEnd {
+    target: HTMLElement | SVGElement;
+}
+interface OnClick {
+    inputEvent: MouseEvent;
+    inputTarget: any;
+    isTarget: boolean;
+    containsTarget: boolean;
+    isDouble: boolean;
+    datas: any;
+    targets: any[];
+    clientX: number;
+    clientY: number;
+}
 type Props = {
     target: HTMLElement[];
     bounds: {

package/dist/types/components/Designer/Canvas/Selecto.d.ts

@@ -1,10 +1,21 @@
 import React from 'react';
-import { OnDragStart as _OnDragStart, OnSelect as _OnSelect } from 'react-selecto';
+interface OnDragStart {
+    inputEvent: MouseEvent;
+    stop: () => void;
+    isTrusted: boolean;
+}
+interface OnSelect {
+    selected: Element[];
+    added: Element[];
+    removed: Element[];
+    inputEvent: MouseEvent;
+    rect: DOMRect;
+}
 type Props = {
     container: HTMLElement | null;
     continueSelect: boolean;
-    onDragStart: (e: _OnDragStart) => void;
-    onSelect: (e: _OnSelect) => void;
+    onDragStart: (e: OnDragStart) => void;
+    onSelect: (e: OnSelect) => void;
 };
 declare const _Selecto: (props: Props) => React.JSX.Element;
 export default _Selecto;

package/dist/types/components/Designer/RightSidebar/DetailView/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { SchemaForUI } from '@pdfme/common';
-import type { SidebarProps } from '../../../../types';
+import type { SidebarProps } from '../../../../types.js';
 type DetailViewProps = Pick<SidebarProps, 'size' | 'schemas' | 'schemasList' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'> & {
     activeSchema: SchemaForUI;
 };

package/dist/types/components/Designer/RightSidebar/ListView/SelectableSortableContainer.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { SidebarProps } from '../../../../types';
+import type { SidebarProps } from '../../../../types.js';
 declare const SelectableSortableContainer: (props: Pick<SidebarProps, 'schemas' | 'onEdit' | 'onSortEnd' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'>) => React.JSX.Element;
 export default SelectableSortableContainer;

package/dist/types/components/Designer/RightSidebar/ListView/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { SidebarProps } from '../../../../types';
+import type { SidebarProps } from '../../../../types.js';
 declare const ListView: (props: Pick<SidebarProps, 'schemas' | 'onSortEnd' | 'onEdit' | 'size' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId' | 'changeSchemas'>) => React.JSX.Element;
 export default ListView;

package/dist/types/components/Designer/RightSidebar/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { SidebarProps } from '../../../types';
+import type { SidebarProps } from '../../../types.js';
 declare const Sidebar: (props: SidebarProps) => React.JSX.Element;
 export default Sidebar;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-import Designer from './Designer';
-import Form from './Form';
-import Viewer from './Viewer';
+import Designer from './Designer.js';
+import Form from './Form.js';
+import Viewer from './Viewer.js';
 export { Designer, Viewer, Form };

package/eslint.config.mjs

@@ -0,0 +1,41 @@
+import { fileURLToPath } from 'url';
+import { dirname, resolve } from 'path';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Import the root config
+const rootConfigPath = resolve(__dirname, '../../eslint.config.mjs');
+const rootConfig = await import(rootConfigPath);
+
+export default [
+  ...rootConfig.default,
+  {
+    files: ['src/**/*.ts', 'src/**/*.tsx'],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.json'],
+        tsconfigRootDir: __dirname,
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    plugins: {
+      react: reactPlugin,
+      'react-hooks': reactHooksPlugin,
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      ...reactPlugin.configs.recommended.rules,
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+    },
+  },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.3.8-dev.4",
+  "version": "5.3.8-dev.42",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -30,17 +30,17 @@
     "devBuildType:watch": "tsc --emitDeclarationOnly --watch",
     "build": "vite build && tsc --emitDeclarationOnly",
     "clean": "rimraf dist",
-    "lint": "eslint --ext .ts,.tsx src",
+    "lint": "eslint --ext .ts,.tsx src --config eslint.config.mjs --no-error-on-unmatched-pattern",
     "test": "jest",
     "prune": "ts-prune src",
     "prettier": "prettier --write 'src/**/*.{ts,tsx}'"
   },
   "dependencies": {
-    "@pdfme/converter": "*",
     "@dnd-kit/core": "^6.0.8",
-    "@dnd-kit/sortable": "^7.0.2",
-    "@scena/react-guides": "^0.16.0",
-    "antd": "^5.9.4",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@pdfme/converter": "*",
+    "@scena/react-guides": "^0.28.2",
+    "antd": "^5.24.2",
     "form-render": "^2.2.16",
     "hotkeys-js": "^3.8.7",
     "lucide-react": "^0.460.0",
@@ -56,18 +56,19 @@
     "@testing-library/react": "^12.1.2",
     "@types/react": "^17.0.52",
     "@types/react-dom": "^17.0.18",
+    "@ungap/structured-clone": "^1.3.0",
     "@vitejs/plugin-react": "^4.2.0",
-    "css-loader": "^6.8.1",
     "csstype": "^3.1.2",
-    "esbuild": "^0.19.5",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "esbuild": "^0.25.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "is-path-inside": "^3.0.3",
     "jest-canvas-mock": "^2.3.1",
     "jest-environment-jsdom": "^29.7.0",
     "process": "^0.11.10",
     "vite": "^5.0.0",
     "vite-plugin-css-injected-by-js": "^3.3.0",
-    "vite-tsconfig-paths": "^4.2.1"
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
     "@pdfme/common": "latest",
@@ -88,7 +89,8 @@
       "^antd/es/": "antd/lib/",
       "^form-render/es/": "form-render/lib/",
       "^rc-picker/es/": "rc-picker/lib/",
-      "^lodash-es$": "lodash"
+      "^lodash-es$": "lodash",
+      "\\^lucide-react$": "<rootDir>/__mocks__/lucide-react.js"
     },
     "resolver": "ts-jest-resolver",
     "moduleFileExtensions": [
@@ -107,6 +109,9 @@
     "testMatch": [
       "**/*.test.ts",
       "**/*.test.tsx"
+    ],
+    "transformIgnorePatterns": [
+      "/node_modules/(?!lucide-react)"
     ]
   },
   "publishConfig": {

package/src/Designer.tsx

@@ -8,10 +8,10 @@ import {
   checkTemplate,
   PDFME_VERSION,
 } from '@pdfme/common';
-import { BaseUIClass } from './class';
+import { BaseUIClass } from './class.js';
 import { DESTROYED_ERR_MSG } from './constants.js';
-import DesignerComponent from './components/Designer/index';
-import AppContextProvider from './components/AppContextProvider';
+import DesignerComponent from './components/Designer/index.js';
+import AppContextProvider from './components/AppContextProvider.js';
 
 class Designer extends BaseUIClass {
   private onSaveTemplateCallback?: (template: Template) => void;

package/src/Form.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { PreviewProps } from '@pdfme/common';
-import { PreviewUI } from './class';
+import { PreviewUI } from './class.js';
 import { DESTROYED_ERR_MSG } from './constants.js';
-import AppContextProvider from './components/AppContextProvider';
-import Preview from './components/Preview';
+import AppContextProvider from './components/AppContextProvider.js';
+import Preview from './components/Preview.js';
 
 class Form extends PreviewUI {
   private onChangeInputCallback?: (arg: { index: number; value: string; name: string }) => void;

package/src/Viewer.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { PreviewProps } from '@pdfme/common';
-import { PreviewUI } from './class';
+import { PreviewUI } from './class.js';
 import { DESTROYED_ERR_MSG } from './constants.js';
-import Preview from './components/Preview';
-import AppContextProvider from './components/AppContextProvider';
+import Preview from './components/Preview.js';
+import AppContextProvider from './components/AppContextProvider.js';
 
 class Viewer extends PreviewUI {
   constructor(props: PreviewProps) {

package/src/components/AppContextProvider.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ConfigProvider as ThemeConfigProvider } from 'antd';
-import { I18nContext, FontContext, PluginsRegistry, OptionsContext } from '../contexts';
-import { i18n, getDict } from '../i18n';
-import { defaultTheme } from '../theme';
+import { I18nContext, FontContext, PluginsRegistry, OptionsContext } from '../contexts.js';
+import { i18n, getDict } from '../i18n.js';
+import { defaultTheme } from '../theme.js';
 import type { Dict, Plugins, Font, Lang, UIOptions } from '@pdfme/common';
 
 type Props = {

package/src/components/CtlBar.tsx

@@ -1,11 +1,13 @@
 import React, { useContext } from 'react';
 import { Size } from '@pdfme/common';
+// Import icons from lucide-react
+// Note: In tests, these will be mocked by the mock file in __mocks__/lucide-react.js
 import { Plus, Minus, ChevronLeft, ChevronRight, Ellipsis } from 'lucide-react';
 
 import type { MenuProps } from 'antd';
 import { theme, Typography, Button, Dropdown } from 'antd';
-import { I18nContext } from '../contexts';
-import { getMaxZoom } from "../helper";
+import { I18nContext } from '../contexts.js';
+import { getMaxZoom } from "../helper.js";
 
 const { Text } = Typography;
 

package/src/components/Designer/Canvas/Guides.tsx

@@ -1,7 +1,7 @@
 import React, { Ref } from 'react';
-import Guides from '@scena/react-guides';
+import GuidesComponent from '@scena/react-guides';
 import { ZOOM, Size } from '@pdfme/common';
-import { RULER_HEIGHT } from '../../../constants';
+import { RULER_HEIGHT } from '../../../constants.js';
 
 const guideStyle = (
   top: number,
@@ -17,31 +17,40 @@ const guideStyle = (
   background: '#333333',
 });
 
+// Define the interface for the Guides component
+interface GuidesInterface {
+  getGuides(): number[];
+  scroll(pos: number): void;
+  scrollGuides(pos: number): void;
+  loadGuides(guides: number[]): void;
+  resize(): void;
+}
+
 const _Guides = ({
   paperSize,
   horizontalRef,
   verticalRef,
 }: {
   paperSize: Size;
-  horizontalRef: Ref<Guides> | undefined;
-  verticalRef: Ref<Guides> | undefined;
+  horizontalRef: Ref<GuidesInterface> | undefined;
+  verticalRef: Ref<GuidesInterface> | undefined;
 }) => (
   <>
     <div
       className="ruler-container"
       style={guideStyle(-RULER_HEIGHT, -RULER_HEIGHT, RULER_HEIGHT, RULER_HEIGHT)}
     />
-    <Guides
+    <GuidesComponent
       zoom={ZOOM}
       style={guideStyle(-RULER_HEIGHT, 0, RULER_HEIGHT, paperSize.width)}
       type="horizontal"
-      ref={horizontalRef}
+      ref={horizontalRef as any}
     />
-    <Guides
+    <GuidesComponent
       zoom={ZOOM}
       style={guideStyle(0, -RULER_HEIGHT, paperSize.height, RULER_HEIGHT)}
       type="vertical"
-      ref={verticalRef}
+      ref={verticalRef as any}
     />
   </>
 );

package/src/components/Designer/Canvas/Mask.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Size } from '@pdfme/common';
-import { RULER_HEIGHT } from '../../../constants';
+import { RULER_HEIGHT } from '../../../constants.js';
 import { theme } from 'antd';
 
 const Mask = ({ width, height }: Size) => (

package/src/components/Designer/Canvas/Moveable.tsx

@@ -1,7 +1,65 @@
 import React, { useEffect, forwardRef, Ref } from 'react';
-import Moveable, { OnDrag, OnResize, OnRotate, OnRotateEnd, OnClick } from 'react-moveable';
+import MoveableComponent from 'react-moveable';
 import { theme } from 'antd';
 
+// Define the types locally since they're not exported properly
+interface OnDrag {
+  target: HTMLElement | SVGElement;
+  left: number;
+  top: number;
+  // Add additional properties that might be used in the original library
+  beforeDelta: any;
+  beforeDist: any;
+  beforeTranslate: any;
+  delta: any;
+  dist: any;
+  transform: any;
+  translate: any;
+}
+
+interface OnResize {
+  target: HTMLElement | SVGElement;
+  width: number;
+  height: number;
+  direction: string;
+  // Add additional properties that might be used in the original library
+  offsetWidth: number;
+  offsetHeight: number;
+  dist: any;
+  delta: any;
+  transform: any;
+  translate: any;
+}
+
+interface OnRotate {
+  target: HTMLElement | SVGElement;
+  rotate: number;
+  // Add additional properties that might be used in the original library
+  beforeDist: any;
+  beforeDelta: any;
+  beforeRotate: any;
+  dist: any;
+  delta: any;
+  transform: any;
+}
+
+interface OnRotateEnd {
+  target: HTMLElement | SVGElement;
+}
+
+interface OnClick {
+  inputEvent: MouseEvent;
+  // Add additional properties that might be used in the original library
+  inputTarget: any;
+  isTarget: boolean;
+  containsTarget: boolean;
+  isDouble: boolean;
+  datas: any;
+  targets: any[];
+  clientX: number;
+  clientY: number;
+}
+
 type Props = {
   target: HTMLElement[];
   bounds: { left: number; top: number; bottom: number; right: number };
@@ -39,7 +97,8 @@ const _Moveable = (props: Props, ref: Ref<any>) => {
   }, [props.target]);
 
   return (
-    <Moveable
+    // @ts-ignore
+    <MoveableComponent
       style={{ zIndex: 1 }}
       className={className}
       rootContainer={document ? document.body : undefined}
@@ -59,18 +118,18 @@ const _Moveable = (props: Props, ref: Ref<any>) => {
       keepRatio={props.keepRatio}
       onRotate={props.onRotate}
       onRotateEnd={props.onRotateEnd}
-      onRotateGroup={({ events }) => {
+      onRotateGroup={({ events }: { events: any[] }) => {
         events.forEach(props.onRotate);
       }}
       onRotateGroupEnd={props.onRotateGroupEnd}
       onDrag={props.onDrag}
-      onDragGroup={({ events }) => {
+      onDragGroup={({ events }: { events: any[] }) => {
         events.forEach(props.onDrag);
       }}
       onDragEnd={props.onDragEnd}
       onDragGroupEnd={props.onDragGroupEnd}
       onResize={props.onResize}
-      onResizeGroup={({ events }) => {
+      onResizeGroup={({ events }: { events: any[] }) => {
         events.forEach(props.onResize);
       }}
       onResizeEnd={props.onResizeEnd}

package/src/components/Designer/Canvas/Selecto.tsx

@@ -1,13 +1,28 @@
 import React, { useEffect } from 'react';
-import Selecto, { OnDragStart as _OnDragStart, OnSelect as _OnSelect } from 'react-selecto';
-import { SELECTABLE_CLASSNAME } from '../../../constants';
+import SelectoComponent from 'react-selecto';
+import { SELECTABLE_CLASSNAME } from '../../../constants.js';
 import { theme } from 'antd';
 
+// Define the types locally to match what's expected in Canvas/index.tsx
+interface OnDragStart {
+  inputEvent: MouseEvent;
+  stop: () => void;
+  isTrusted: boolean;
+}
+
+interface OnSelect {
+  selected: Element[];
+  added: Element[];
+  removed: Element[];
+  inputEvent: MouseEvent;
+  rect: DOMRect;
+}
+
 type Props = {
   container: HTMLElement | null;
   continueSelect: boolean;
-  onDragStart: (e: _OnDragStart) => void;
-  onSelect: (e: _OnSelect) => void;
+  onDragStart: (e: OnDragStart) => void;
+  onSelect: (e: OnSelect) => void;
 };
 
 const className = 'pdfme-selecto';
@@ -24,7 +39,7 @@ const _Selecto = (props: Props) => {
   }, [props.container]);
 
   return (
-    <Selecto
+    <SelectoComponent
       className={className}
       selectFromInside={false}
       selectByClick
@@ -34,7 +49,7 @@ const _Selecto = (props: Props) => {
       container={props.container}
       continueSelect={props.continueSelect}
       onDragStart={props.onDragStart}
-      onSelect={props.onSelect}
+      onSelect={(e: any) => props.onSelect(e as OnSelect)}
     />
   );
 };

package/src/components/Designer/Canvas/index.tsx

@@ -10,22 +10,74 @@ import React, {
   useCallback,
 } from 'react';
 import { theme, Button } from 'antd';
-import { OnDrag, OnResize, OnClick, OnRotate } from 'react-moveable';
 import { ZOOM, SchemaForUI, Size, ChangeSchemas, BasePdf, isBlankPdf, replacePlaceholders } from '@pdfme/common';
-import { PluginsRegistry } from '../../../contexts';
+import { PluginsRegistry } from '../../../contexts.js';
 import { X } from 'lucide-react';
-import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH } from '../../../constants';
-import { usePrevious } from '../../../hooks';
-import { uuid, round, flatten } from '../../../helper';
-import Paper from '../../Paper';
-import Renderer from '../../Renderer';
-import Selecto from './Selecto';
-import Moveable from './Moveable';
-import Guides from './Guides';
-import Mask from './Mask';
-import Padding from './Padding';
-import StaticSchema from '../../StaticSchema';
+import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH } from '../../../constants.js';
+import { usePrevious } from '../../../hooks.js';
+import { uuid, round, flatten } from '../../../helper.js';
+import Paper from '../../Paper.js';
+import Renderer from '../../Renderer.js';
+import Selecto from './Selecto.js';
+import Moveable from './Moveable.js';
+import Guides from './Guides.js';
+import Mask from './Mask.js';
+import Padding from './Padding.js';
+import StaticSchema from '../../StaticSchema.js';
+
+// Define the interfaces locally since they're not exported properly
+interface OnDrag {
+  target: HTMLElement | SVGElement;
+  left: number;
+  top: number;
+  // Add additional properties that might be used in the original library
+  beforeDelta: any;
+  beforeDist: any;
+  beforeTranslate: any;
+  delta: any;
+  dist: any;
+  transform: any;
+  translate: any;
+}
+
+interface OnResize {
+  target: HTMLElement | SVGElement;
+  width: number;
+  height: number;
+  direction: string;
+  // Add additional properties that might be used in the original library
+  offsetWidth: number;
+  offsetHeight: number;
+  dist: any;
+  delta: any;
+  transform: any;
+  translate: any;
+}
 
+interface OnRotate {
+  target: HTMLElement | SVGElement;
+  rotate: number;
+  // Add additional properties that might be used in the original library
+  beforeDist: any;
+  beforeDelta: any;
+  beforeRotate: any;
+  dist: any;
+  delta: any;
+  transform: any;
+}
+
+interface OnClick {
+  inputEvent: MouseEvent;
+  // Add additional properties that might be used in the original library
+  inputTarget: any;
+  isTarget: boolean;
+  containsTarget: boolean;
+  isDouble: boolean;
+  datas: any;
+  targets: any[];
+  clientX: number;
+  clientY: number;
+}
 
 const mm2px = (mm: number) => mm * 3.7795275591;
 
@@ -357,7 +409,9 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
           if (paperRefs.current[pageCursor] === inputEvent.target) {
             onEdit([]);
           }
-          if (inputEvent.target?.id === DELETE_BTN_ID) {
+          // Check if the target is an HTMLElement and has an id property
+          const targetElement = inputEvent.target as HTMLElement;
+          if (targetElement && targetElement.id === DELETE_BTN_ID) {
             removeSchemas(activeElements.map((ae) => ae.id));
           }
         }}