@pdfme/ui 5.3.8-dev.9 → 5.3.9-dev.1

package/dist/types/__tests__/assets/helper.d.ts

@@ -0,0 +1,3 @@
+import { Template } from '@pdfme/common';
+export declare const setupUIMock: () => void;
+export declare const getSampleTemplate: () => Template;

package/dist/types/__tests__/components/Designer.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/__tests__/components/Preview.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/__tests__/helper.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/{Designer.d.ts → src/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 → src/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 → src/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/{class.d.ts → src/class.d.ts}

@@ -12,7 +12,7 @@ export declare abstract class BaseUIClass {
     constructor(props: UIProps);
     protected getLang(): "en" | "zh" | "ja" | "ko" | "ar" | "th" | "pl" | "it" | "de" | "es" | "fr";
     protected getFont(): Record<string, {
-        data: string | ArrayBuffer | Uint8Array;
+        data: string | ArrayBuffer | Uint8Array<ArrayBufferLike>;
         fallback?: boolean | undefined;
         subset?: boolean | undefined;
     }>;
@@ -113,7 +113,7 @@ export declare abstract class BaseUIClass {
             }>>;
             __isSplit: import("zod").ZodOptional<import("zod").ZodBoolean>;
         }, import("zod").ZodTypeAny, "passthrough">>, "many">, "many">;
-        basePdf: import("zod").ZodUnion<[import("zod").ZodUnion<[import("zod").ZodString, import("zod").ZodType<ArrayBuffer, import("zod").ZodTypeDef, ArrayBuffer>, import("zod").ZodType<Uint8Array, import("zod").ZodTypeDef, Uint8Array>]>, import("zod").ZodObject<{
+        basePdf: import("zod").ZodUnion<[import("zod").ZodUnion<[import("zod").ZodString, import("zod").ZodType<ArrayBuffer, import("zod").ZodTypeDef, ArrayBuffer>, import("zod").ZodType<Uint8Array<ArrayBufferLike>, import("zod").ZodTypeDef, Uint8Array<ArrayBufferLike>>]>, import("zod").ZodObject<{
             width: import("zod").ZodNumber;
             height: import("zod").ZodNumber;
             padding: import("zod").ZodTuple<[import("zod").ZodNumber, import("zod").ZodNumber, import("zod").ZodNumber, import("zod").ZodNumber], null>;

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

@@ -0,0 +1,15 @@
+import React, { Ref } from 'react';
+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<GuidesInterface> | undefined;
+    verticalRef: Ref<GuidesInterface> | undefined;
+}) => React.JSX.Element;
+export default _Guides;

package/dist/types/{components → src/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/src/components/Designer/Canvas/Selecto.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+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;
+};
+declare const _Selecto: (props: Props) => React.JSX.Element;
+export default _Selecto;

package/dist/types/{components → src/components}/Designer/LeftSidebar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BasePdf } from '@pdfme/common';
-declare const LeftSidebar: ({ height, scale, basePdf }: {
+declare const LeftSidebar: ({ height, scale, basePdf, }: {
     height: number;
     scale: number;
     basePdf: BasePdf;

package/dist/types/{components → src/components}/Designer/PluginIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Plugin } from "@pdfme/common";
+import { Plugin } from '@pdfme/common';
 interface PluginIconProps {
     plugin: Plugin<any>;
     label: string;

package/dist/types/{components → src/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/src/components/Designer/RightSidebar/ListView/SelectableSortableContainer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+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/src/components/Designer/RightSidebar/ListView/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+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 → src/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/{components → src/components}/Paper.d.ts

@@ -15,6 +15,6 @@ declare const Paper: (props: {
         index: number;
         schema: SchemaForUI;
     }) => ReactNode;
-    hasRulers?: boolean | undefined;
+    hasRulers?: boolean;
 }) => React.JSX.Element | null;
 export default Paper;

package/dist/types/{components → src/components}/Preview.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import { PreviewProps, Size } from '@pdfme/common';
 declare const Preview: ({ template, inputs, size, onChangeInput, }: Omit<PreviewProps, "domContainer"> & {
-    onChangeInput?: ((args: {
+    onChangeInput?: (args: {
         index: number;
         value: string;
         name: string;
-    }) => void) | undefined;
+    }) => void;
     size: Size;
 }) => React.JSX.Element;
 export default Preview;

package/dist/types/src/contexts.d.ts

@@ -0,0 +1,10 @@
+import { Plugins, UIOptions } from '@pdfme/common';
+export declare const I18nContext: import("react").Context<(key: keyof import("@pdfme/common").Dict, dict?: import("@pdfme/common").Dict) => string>;
+export declare const FontContext: import("react").Context<Record<string, {
+    data: string | ArrayBuffer | Uint8Array<ArrayBufferLike>;
+    fallback?: boolean | undefined;
+    subset?: boolean | undefined;
+}>>;
+export declare const PluginsRegistry: import("react").Context<Plugins>;
+export declare const OptionsContext: import("react").Context<UIOptions>;
+export declare const CacheContext: import("react").Context<Map<any, any>>;

package/dist/types/{helper.d.ts → src/helper.d.ts}

@@ -4,9 +4,8 @@ export declare const set: <T extends object>(obj: T, path: string | string[], va
 export declare const debounce: <T extends Function>(cb: T, wait?: number) => T;
 export declare const round: (number: number, precision: number) => number;
 export declare const flatten: <T>(arr: T[][]) => T[];
-declare const esc = "esc";
 export declare const initShortCuts: (arg: {
-    move: (command: 'up' | 'down' | 'left' | 'right', isShift: boolean) => void;
+    move: (command: "up" | "down" | "left" | "right", isShift: boolean) => void;
     remove: () => void;
     esc: () => void;
     copy: () => void;
@@ -46,7 +45,7 @@ export declare const getUniqueSchemaName: (arg: {
     stackUniqueSchemaNames: string[];
 }) => string;
 export declare const moveCommandToChangeSchemasArg: (props: {
-    command: 'up' | 'down' | 'left' | 'right';
+    command: "up" | "down" | "left" | "right";
     activeSchemas: SchemaForUI[];
     isShift: boolean;
     pageSize: Size;
@@ -73,4 +72,3 @@ export declare const changeSchemas: (args: {
     commitSchemas: (newSchemas: SchemaForUI[]) => void;
 }) => void;
 export declare const getMaxZoom: () => number;
-export {};

package/dist/types/src/index.d.ts

@@ -0,0 +1,4 @@
+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.9",
+  "version": "5.3.9-dev.1",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -30,44 +30,46 @@
     "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",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "react-moveable": "^0.30.3",
+    "react-moveable": "^0.56.0",
     "react-selecto": "^1.12.0"
   },
   "devDependencies": {
     "@pdfme/common": "file:../common",
     "@pdfme/schemas": "file:../schemas",
-    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^12.1.2",
+    "@types/jest": "^29.5.14",
     "@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": "^4.0.0",
     "jest-canvas-mock": "^2.3.1",
     "jest-environment-jsdom": "^29.7.0",
     "process": "^0.11.10",
-    "vite": "^5.0.0",
+    "vite": "^6.2.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 +90,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 +110,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;
@@ -47,9 +47,9 @@ class Designer extends BaseUIClass {
   public onChangeTemplate(cb: (template: Template) => void) {
     this.onChangeTemplateCallback = cb;
   }
-  
+
   public getPageCursor() {
-    return this.pageCursor
+    return this.pageCursor;
   }
 
   protected render() {
@@ -78,12 +78,12 @@ class Designer extends BaseUIClass {
             }
           }}
           onPageCursorChange={(newPageCursor: number) => {
-            this.pageCursor = newPageCursor
+            this.pageCursor = newPageCursor;
           }}
           size={this.size}
         />
       </AppContextProvider>,
-      this.domContainer
+      this.domContainer,
     );
   }
 }

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;
@@ -46,8 +46,6 @@ class Form extends PreviewUI {
     });
   }
 
-
-
   protected render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
     ReactDOM.render(
@@ -75,7 +73,7 @@ class Form extends PreviewUI {
           }}
         />
       </AppContextProvider>,
-      this.domContainer
+      this.domContainer,
     );
   }
 }

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) {
@@ -22,7 +22,7 @@ class Viewer extends PreviewUI {
       >
         <Preview template={this.template} size={this.size} inputs={this.inputs} />
       </AppContextProvider>,
-      this.domContainer
+      this.domContainer,
     );
   }
 }

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 = {
@@ -18,7 +18,7 @@ const isObject = (item: any): item is Record<string, any> =>
 
 const deepMerge = <T extends Record<string, any>, U extends Record<string, any>>(
   target: T,
-  source: U
+  source: U,
 ): T & U => {
   let output = { ...target } as T & U;
 

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,13 +1,13 @@
 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,
   left: number,
   height: number,
-  width: number
+  width: number,
 ): React.CSSProperties => ({
   position: 'absolute',
   top,
@@ -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) => (