@pdfme/ui 5.5.10-dev.11 → 5.5.10-dev.125

package/README.md

@@ -6,4 +6,6 @@ This library provides the following classes, which can be integrated into applic
 - `Form`: A form based on templates for collecting input data.
 - `Viewer`: A viewer for displaying PDF files generated with [@pdfme/generator](https://www.npmjs.com/package/@pdfme/generator) using templates and input data.
 
-For the complete documentation of pdfme, please refer to [this link](https://pdfme.com/docs/getting-started).
+The published `@pdfme/ui` package ships as a standalone bundle, so consumers do not need to install `react` or `react-dom` separately just to use these classes.
+
+For the complete documentation of pdfme, please refer to [this link](https://pdfme.com/docs/getting-started).

package/__mocks__/converter.ts

@@ -0,0 +1,3 @@
+export const pdf2size = async () => [{ width: 210, height: 297 }];
+
+export const pdf2img = async () => [new Uint8Array([137, 80, 78, 71]).buffer];

package/__mocks__/form-render.js

@@ -1,7 +1,7 @@
-const useForm = jest.fn();
-const FormRender = jest.fn();
+const useForm = () => ({});
+const FormRender = () => null;
 
 module.exports = {
   useForm,
   default: FormRender,
-};
+};

package/__mocks__/form-render.ts

@@ -0,0 +1,18 @@
+const formState: Record<string, unknown> = {};
+
+export const useForm = () => ({
+  resetFields: () => {
+    Object.keys(formState).forEach((key) => {
+      delete formState[key];
+    });
+  },
+  setValues: (values: Record<string, unknown>) => {
+    Object.assign(formState, values);
+  },
+  getValues: () => formState,
+  validateFields: () => Promise.resolve(formState),
+});
+
+const FormRender = () => null;
+
+export default FormRender;

package/__mocks__/lucide-react.ts

@@ -0,0 +1,15 @@
+export const Plus = () => 'Plus';
+export const Minus = () => 'Minus';
+export const ChevronLeft = () => 'ChevronLeft';
+export const ChevronRight = () => 'ChevronRight';
+export const ChevronsLeft = () => 'ChevronsLeft';
+export const ChevronsRight = () => 'ChevronsRight';
+export const Ellipsis = () => 'Ellipsis';
+export const X = () => 'X';
+export const Menu = () => 'Menu';
+export const GripVertical = () => 'GripVertical';
+export const CircleAlert = () => 'CircleAlert';
+export const Lock = () => 'Lock';
+export const ArrowLeft = () => 'ArrowLeft';
+export const ArrowRight = () => 'ArrowRight';
+export const LoaderCircle = () => 'LoaderCircle';

package/package.json

@@ -1,78 +1,74 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.5.10-dev.11",
-  "sideEffects": false,
-  "author": "hand-dot",
-  "license": "MIT",
+  "version": "5.5.10-dev.125",
+  "description": "TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!",
   "keywords": [
     "pdf",
-    "pdf-generation",
     "pdf-designer",
+    "pdf-generation",
     "pdf-viewer",
-    "typescript",
-    "react"
+    "react",
+    "typescript"
   ],
-  "description": "TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!",
   "homepage": "https://pdfme.com",
+  "bugs": {
+    "url": "https://github.com/pdfme/pdfme/issues"
+  },
+  "license": "MIT",
+  "author": "hand-dot",
   "repository": {
     "type": "git",
     "url": "git@github.com:pdfme/pdfme.git"
   },
-  "bugs": {
-    "url": "https://github.com/pdfme/pdfme/issues"
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
   },
-  "main": "dist/index.umd.js",
-  "module": "dist/index.es.js",
-  "types": "dist/types/src/index.d.ts",
   "scripts": {
-    "dev": "run-p devBuild:watch devBuildType:watch",
-    "devBuild:watch": "esbuild src/index.ts --bundle --outfile=dist/index.es.js --format=esm --watch",
-    "devBuildType:watch": "tsc --emitDeclarationOnly --watch",
-    "build": "vite build && tsc --emitDeclarationOnly",
+    "dev": "vite build --watch",
+    "build": "vite build && tsc -p tsconfig.build.json",
     "clean": "rimraf dist",
-    "lint": "eslint --ext .ts,.tsx src --config eslint.config.mjs",
-    "test": "jest",
-    "prune": "ts-prune src",
-    "prettier": "prettier --write 'src/**/*.{ts,tsx}'"
+    "lint": "vp lint -c ../../.oxlintrc.json src",
+    "fmt": "vp fmt -c ../../.oxfmtrc.json src --write",
+    "test": "vitest run --config ../../vitest.config.ts"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@pdfme/converter": "*",
     "@scena/react-guides": "^0.28.2",
     "antd": "^5.27.4",
     "dompurify": "^3.3.3",
     "form-render": "^2.5.5",
-    "globrex": "^0.1.2",
     "hotkeys-js": "^4.0.2",
     "lucide-react": "^0.577.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "rc-field-form": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-moveable": "^0.56.0",
-    "react-refresh": "^0.18.0",
     "react-selecto": "^1.12.0"
   },
   "devDependencies": {
     "@pdfme/common": "*",
     "@pdfme/schemas": "*",
     "@testing-library/jest-dom": "^6.8.0",
-    "@testing-library/react": "^12.1.2",
-    "@types/dompurify": "^3.2.0",
-    "@types/jest": "^30.0.0",
-    "@types/react": "^17.0.52",
-    "@types/react-dom": "^17.0.18",
-    "@ungap/structured-clone": "^1.3.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^6.0.1",
     "csstype": "^3.2.3",
-    "esbuild": "^0.27.4",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "is-path-inside": "^4.0.0",
-    "jest-canvas-mock": "^2.3.1",
-    "jest-environment-jsdom": "^30.3.0",
-    "postcss": "^8.5.8",
-    "process": "^0.11.10",
-    "rollup": "^4.59.0",
     "vite": "^7.3.1",
     "vite-plugin-css-injected-by-js": "^4.0.1",
     "vite-tsconfig-paths": "^6.1.1"
@@ -80,48 +76,5 @@
   "peerDependencies": {
     "@pdfme/common": "latest",
     "@pdfme/schemas": "latest"
-  },
-  "jest": {
-    "testEnvironment": "jest-environment-jsdom",
-    "setupFiles": [
-      "jest-canvas-mock"
-    ],
-    "setupFilesAfterEnv": [
-      "./__tests__/test-helpers.js"
-    ],
-    "moduleNameMapper": {
-      "\\.(png|css)$": "<rootDir>/__mocks__/assetsTransformer.js",
-      "^@pdfme/converter$": "<rootDir>/../converter/src/index.node.ts",
-      "^@pdfme/schemas/utils$": "<rootDir>/../schemas/src/utils.ts",
-      "^antd/es/": "antd/lib/",
-      "^form-render/es/": "form-render/lib/",
-      "^rc-picker/es/": "rc-picker/lib/",
-      "^lodash-es$": "lodash",
-      "\\^lucide-react$": "<rootDir>/__mocks__/lucide-react.js"
-    },
-    "resolver": "ts-jest-resolver",
-    "moduleFileExtensions": [
-      "js",
-      "ts",
-      "tsx"
-    ],
-    "transform": {
-      "^.+\\.tsx?$": [
-        "ts-jest",
-        {
-          "tsconfig": "tsconfig.json"
-        }
-      ]
-    },
-    "testMatch": [
-      "**/*.test.ts",
-      "**/*.test.tsx"
-    ],
-    "transformIgnorePatterns": [
-      "/node_modules/(?!lucide-react)"
-    ]
-  },
-  "publishConfig": {
-    "access": "public"
   }
 }

package/src/Designer.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import {
   cloneDeep,
   Template,
@@ -64,7 +63,7 @@ class Designer extends BaseUIClass {
 
   protected render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
-    ReactDOM.render(
+    this.mount(
       <AppContextProvider
         lang={this.getLang()}
         font={this.getFont()}
@@ -99,7 +98,6 @@ class Designer extends BaseUIClass {
           size={this.size}
         />
       </AppContextProvider>,
-      this.domContainer,
     );
   }
 }

package/src/Form.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { PreviewProps } from '@pdfme/common';
 import { PreviewUI } from './class.js';
 import { DESTROYED_ERR_MSG } from './constants.js';
@@ -63,7 +62,7 @@ class Form extends PreviewUI {
 
   protected render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
-    ReactDOM.render(
+    this.mount(
       <AppContextProvider
         lang={this.getLang()}
         font={this.getFont()}
@@ -94,7 +93,6 @@ class Form extends PreviewUI {
           }}
         />
       </AppContextProvider>,
-      this.domContainer,
     );
   }
 }

package/src/Viewer.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { PreviewProps } from '@pdfme/common';
 import { PreviewUI } from './class.js';
 import { DESTROYED_ERR_MSG } from './constants.js';
@@ -32,7 +31,7 @@ class Viewer extends PreviewUI {
 
   protected render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
-    ReactDOM.render(
+    this.mount(
       <AppContextProvider
         lang={this.getLang()}
         font={this.getFont()}
@@ -51,7 +50,6 @@ class Viewer extends PreviewUI {
           }}
         />
       </AppContextProvider>,
-      this.domContainer,
     );
   }
 }

package/src/class.ts

@@ -1,4 +1,5 @@
-import ReactDOM from 'react-dom';
+import { ReactNode } from 'react';
+import { createRoot, Root } from 'react-dom/client';
 import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants.js';
 import { debounce } from './helper.js';
 import {
@@ -19,7 +20,7 @@ import {
   checkPreviewProps,
   pluginRegistry,
 } from '@pdfme/common';
-import { builtInPlugins } from '@pdfme/schemas';
+import { builtInPlugins } from '@pdfme/schemas/builtins';
 
 export abstract class BaseUIClass {
   protected domContainer!: HTMLElement | null;
@@ -28,6 +29,8 @@ export abstract class BaseUIClass {
 
   protected size!: Size;
 
+  private reactRoot: Root | null = null;
+
   private lang: Lang = DEFAULT_LANG;
 
   private font: Font = getDefaultFont();
@@ -65,11 +68,12 @@ export abstract class BaseUIClass {
     this.domContainer = domContainer;
     this.template = cloneDeep(template);
     this.options = options;
+    const container = this.domContainer;
     this.size = {
-      height: this.domContainer.clientHeight || window.innerHeight,
-      width: this.domContainer.clientWidth || window.innerWidth,
+      height: container.clientHeight || window.innerHeight,
+      width: container.clientWidth || window.innerWidth,
     };
-    this.resizeObserver.observe(this.domContainer);
+    this.resizeObserver.observe(container);
 
     const { lang, font } = options;
     if (lang) {
@@ -130,12 +134,19 @@ export abstract class BaseUIClass {
 
   public destroy() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
-    ReactDOM.unmountComponentAtNode(this.domContainer);
+    this.reactRoot?.unmount();
+    this.reactRoot = null;
 
     this.resizeObserver.unobserve(this.domContainer);
     this.domContainer = null;
   }
 
+  protected mount(node: ReactNode) {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    this.reactRoot ??= createRoot(this.domContainer);
+    this.reactRoot.render(node);
+  }
+
   protected abstract render(): void;
 }
 export abstract class PreviewUI extends BaseUIClass {

package/src/components/CtlBar.tsx

@@ -1,7 +1,7 @@
 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
+// Note: In tests, these are replaced via the Vitest lucide-react mock.
 import { Plus, Minus, ChevronLeft, ChevronRight, Ellipsis } from 'lucide-react';
 
 import type { MenuProps } from 'antd';
@@ -60,7 +60,12 @@ type PagerProps = {
 const Pager = ({ pageCursor, pageNum, setPageCursor, style }: PagerProps) => {
   return (
     <div style={{ display: 'flex', alignItems: 'center' }}>
-      <Button className={UI_CLASSNAME + 'page-prev'} type="text" disabled={pageCursor <= 0} onClick={() => setPageCursor(pageCursor - 1)}>
+      <Button
+        className={UI_CLASSNAME + 'page-prev'}
+        type="text"
+        disabled={pageCursor <= 0}
+        onClick={() => setPageCursor(pageCursor - 1)}
+      >
         <ChevronLeft size={16} color={style.textStyle.color} />
       </Button>
       <Text strong style={style.textStyle}>

package/src/components/Designer/PluginIcon.tsx

@@ -11,26 +11,80 @@ interface PluginIconProps {
   styles?: React.CSSProperties;
 }
 
-const SVGIcon = ({ svgString, size, styles, label }: { 
-  svgString: string; 
-  size?: number; 
-  styles?: React.CSSProperties; 
+const SVGIcon = ({
+  svgString,
+  size,
+  styles,
+  label,
+}: {
+  svgString: string;
+  size?: number;
+  styles?: React.CSSProperties;
   label: string;
 }) => {
   const processedSVG = useMemo(() => {
     // First sanitize the SVG string using DOMPurify with SVG profile
     const sanitizedSVG = DOMPurify.sanitize(svgString, {
       USE_PROFILES: { svg: true, svgFilters: true },
-      ALLOWED_TAGS: ['svg', 'path', 'circle', 'rect', 'line', 'polygon', 'polyline', 'ellipse', 'g', 'defs', 'title', 'desc', 'metadata'],
-      ALLOWED_ATTR: ['class', 'id', 'fill', 'stroke', 'stroke-width', 'viewBox', 'width', 'height', 'd', 'cx', 'cy', 'r', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'points', 'rx', 'ry', 'transform'],
+      ALLOWED_TAGS: [
+        'svg',
+        'path',
+        'circle',
+        'rect',
+        'line',
+        'polygon',
+        'polyline',
+        'ellipse',
+        'g',
+        'defs',
+        'title',
+        'desc',
+        'metadata',
+      ],
+      ALLOWED_ATTR: [
+        'class',
+        'id',
+        'fill',
+        'stroke',
+        'stroke-width',
+        'viewBox',
+        'width',
+        'height',
+        'd',
+        'cx',
+        'cy',
+        'r',
+        'x',
+        'y',
+        'x1',
+        'y1',
+        'x2',
+        'y2',
+        'points',
+        'rx',
+        'ry',
+        'transform',
+      ],
       FORBID_TAGS: ['script', 'foreignObject', 'use', 'embed', 'iframe', 'object', 'link', 'style'],
-      FORBID_ATTR: ['onload', 'onerror', 'onclick', 'onmouseover', 'onfocus', 'onblur', 'href', 'xlink:href', 'src', 'action', 'formaction'],
-      KEEP_CONTENT: false
+      FORBID_ATTR: [
+        'onload',
+        'onerror',
+        'onclick',
+        'onmouseover',
+        'onfocus',
+        'onblur',
+        'href',
+        'xlink:href',
+        'src',
+        'action',
+        'formaction',
+      ],
+      KEEP_CONTENT: false,
     });
 
     const parser = new DOMParser();
     const doc = parser.parseFromString(sanitizedSVG, 'image/svg+xml');
-    
+
     const svgElement = doc.querySelector('svg');
     if (!svgElement) {
       return null;
@@ -49,13 +103,7 @@ const SVGIcon = ({ svgString, size, styles, label }: {
     return null;
   }
 
-  return (
-    <div 
-      style={styles} 
-      title={label}
-      dangerouslySetInnerHTML={{ __html: processedSVG }}
-    />
-  );
+  return <div style={styles} title={label} dangerouslySetInnerHTML={{ __html: processedSVG }} />;
 };
 
 const PluginIcon = (props: PluginIconProps) => {

package/src/components/Designer/RightSidebar/DetailView/AlignWidget.tsx

@@ -66,8 +66,7 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
 
     let basePos = min;
     // Define adjust function with consistent parameter usage
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    let adjust = (_size: number): number => 0;
+    let adjust: (size: number) => number = () => 0;
 
     if (['center', 'middle'].includes(type)) {
       basePos = (min + max) / 2;

package/src/components/Designer/RightSidebar/DetailView/WidgetRenderer.tsx

@@ -6,21 +6,22 @@ type Props = PropPanelWidgetProps & {
 };
 
 const WidgetRenderer = (props: Props) => {
-  const { widget, ...otherProps } = props;
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (ref.current) {
-      ref.current.innerHTML = '';
-      widget({ ...otherProps, rootElement: ref.current });
+    const element = ref.current;
+    if (element) {
+      const { widget, ...otherProps } = props;
+      element.innerHTML = '';
+      widget({ ...otherProps, rootElement: element });
     }
 
     return () => {
-      if (ref.current) {
-        ref.current.innerHTML = '';
+      if (element) {
+        element.innerHTML = '';
       }
     };
-  }, [props.activeSchema]);
+  }, [props]);
 
   return <div ref={ref} />;
 };

package/src/components/Designer/RightSidebar/DetailView/index.tsx

@@ -1,5 +1,5 @@
 import { useForm } from 'form-render';
-import React, { useRef, useContext, useState, useEffect, useCallback } from 'react';
+import React, { useRef, useContext, useEffect, useCallback, useMemo } from 'react';
 import type {
   Dict,
   ChangeSchemaItem,
@@ -40,6 +40,8 @@ type DetailViewProps = Pick<
   activeSchema: SchemaForUI;
 };
 
+type WidgetMap = Record<string, (props: PropPanelWidgetProps) => React.JSX.Element>;
+
 const DetailView = (props: DetailViewProps) => {
   const { token } = theme.useToken();
 
@@ -59,12 +61,8 @@ const DetailView = (props: DetailViewProps) => {
     [i18n],
   );
 
-  const [widgets, setWidgets] = useState<{
-    [key: string]: (props: PropPanelWidgetProps) => React.JSX.Element;
-  }>({});
-
-  useEffect(() => {
-    const newWidgets: typeof widgets = {
+  const widgets = useMemo<WidgetMap>(() => {
+    const newWidgets: WidgetMap = {
       AlignWidget: (p) => <AlignWidget {...p} {...props} options={options} />,
       Divider: () => (
         <Divider style={{ marginTop: token.marginXS, marginBottom: token.marginXS }} />
@@ -72,8 +70,11 @@ const DetailView = (props: DetailViewProps) => {
       ButtonGroup: (p) => <ButtonGroupWidget {...p} {...props} options={options} />,
     };
     for (const plugin of pluginsRegistry.values()) {
-      const widgets = plugin.propPanel.widgets || {};
-      Object.entries(widgets).forEach(([widgetKey, widgetValue]) => {
+      const pluginWidgets = (plugin.propPanel.widgets ?? {}) as Record<
+        string,
+        (props: PropPanelWidgetProps) => void
+      >;
+      Object.entries(pluginWidgets).forEach(([widgetKey, widgetValue]) => {
         newWidgets[widgetKey] = (p) => (
           <WidgetRenderer
             {...p}
@@ -86,10 +87,10 @@ const DetailView = (props: DetailViewProps) => {
         );
       });
     }
-    setWidgets(newWidgets);
-  }, [activeSchema, pluginsRegistry, JSON.stringify(options)]);
+    return newWidgets;
+  }, [options, pluginsRegistry, props, token, typedI18n]);
 
-  useEffect(() => form.resetFields(), [activeSchema.id]);
+  useEffect(() => form.resetFields(), [activeSchema.id, form]);
 
   useEffect(() => {
     // Create a type-safe copy of the schema with editable property
@@ -98,7 +99,7 @@ const DetailView = (props: DetailViewProps) => {
     const readOnly = typeof values.readOnly === 'boolean' ? values.readOnly : false;
     values.editable = !readOnly;
     form.setValues(values);
-  }, [activeSchema]);
+  }, [activeSchema, form]);
 
   useEffect(() => {
     uniqueSchemaName.current = (value: string): boolean => {
@@ -114,10 +115,7 @@ const DetailView = (props: DetailViewProps) => {
   }, [schemasList, activeSchema]);
 
   // Reference to a function that validates schema name uniqueness
-  const uniqueSchemaName = useRef(
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    (_unused: string): boolean => true,
-  );
+  const uniqueSchemaName = useRef<(value: string) => boolean>(() => true);
 
   // Use proper type for validator function parameter
   const validateUniqueSchemaName = (_: unknown, value: string): boolean =>

package/src/components/Designer/RightSidebar/ListView/Item.tsx

@@ -46,7 +46,6 @@ interface Props {
 // Using React.memo and forwardRef for optimized rendering
 // Using TypeScript interface for prop validation instead of PropTypes
 const Item = React.memo(
-  /* eslint-disable react/prop-types */
   React.forwardRef<HTMLLIElement, Props>(function Item(
     {
       icon,
@@ -60,12 +59,9 @@ const Item = React.memo(
       onClick,
       onMouseEnter,
       onMouseLeave,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       dragging,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       fadeIn,
       listeners,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       sorting,
       transition,
       transform,
@@ -73,8 +69,10 @@ const Item = React.memo(
     },
     ref,
   ) {
-    /* eslint-enable react/prop-types */
     const i18n = useContext(I18nContext);
+    void dragging;
+    void fadeIn;
+    void sorting;
 
     useEffect(() => {
       if (!dragOverlay) {