@pdfme/ui 0.0.0

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

@@ -0,0 +1,73 @@
+import { Template, BasePdf, SchemaForUI, Size, PluginRegistry } from '@pdfme/common';
+export declare const uuid: () => string;
+export declare const debounce: <T extends (...args: unknown[]) => unknown>(cb: T, wait?: number) => T;
+export declare const round: (number: number, precision: number) => number;
+export declare const flatten: <T>(arr: T[][]) => T[];
+export declare const initShortCuts: (arg: {
+    move: (command: "up" | "down" | "left" | "right", isShift: boolean) => void;
+    remove: () => void;
+    esc: () => void;
+    copy: () => void;
+    paste: () => void;
+    redo: () => void;
+    undo: () => void;
+    save: () => void;
+    selectAll: () => void;
+}) => void;
+export declare const destroyShortCuts: () => void;
+export declare const arrayBufferToBase64: (arrayBuffer: ArrayBuffer) => string;
+export declare const template2SchemasList: (_template: Template) => Promise<{
+    name: string;
+    type: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    width: number;
+    height: number;
+    id: string;
+    content?: string | undefined;
+    rotate?: number | undefined;
+    opacity?: number | undefined;
+    readOnly?: boolean | undefined;
+    required?: boolean | undefined;
+    __bodyRange?: {
+        start: number;
+        end?: number | undefined;
+    } | undefined;
+    __isSplit?: boolean | undefined;
+}[][]>;
+export declare const schemasList2template: (schemasList: SchemaForUI[][], basePdf: BasePdf) => Template;
+export declare const getUniqueSchemaName: (arg: {
+    copiedSchemaName: string;
+    schema: SchemaForUI[];
+    stackUniqueSchemaNames: string[];
+}) => string;
+export declare const moveCommandToChangeSchemasArg: (props: {
+    command: "up" | "down" | "left" | "right";
+    activeSchemas: SchemaForUI[];
+    isShift: boolean;
+    pageSize: Size;
+}) => {
+    key: string;
+    value: number;
+    schemaId: string;
+}[];
+export declare const getPagesScrollTopByIndex: (pageSizes: Size[], index: number, scale: number) => number;
+export declare const changeSchemas: (args: {
+    objs: {
+        key: string;
+        value: unknown;
+        schemaId: string;
+    }[];
+    schemas: SchemaForUI[];
+    basePdf: BasePdf;
+    pluginsRegistry: PluginRegistry;
+    pageSize: {
+        width: number;
+        height: number;
+    };
+    commitSchemas: (newSchemas: SchemaForUI[]) => void;
+}) => void;
+export declare const useMaxZoom: () => number;
+export declare const setFontNameRecursively: (obj: Record<string, unknown>, fontName: string, seen?: WeakSet<WeakKey>) => void;

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

@@ -0,0 +1,46 @@
+import { RefObject } from 'react';
+import { Template, Size, SchemaForUI, ChangeSchemas } from '@pdfme/common';
+export declare const usePrevious: <T>(value: T) => T | null;
+type UIPreProcessorProps = {
+    template: Template;
+    size: Size;
+    zoomLevel: number;
+    maxZoom: number;
+};
+export declare const useUIPreProcessor: ({ template, size, zoomLevel, maxZoom }: UIPreProcessorProps) => {
+    backgrounds: string[];
+    pageSizes: {
+        height: number;
+        width: number;
+    }[];
+    scale: number;
+    error: Error | null;
+    refresh: (template: Template) => Promise<void>;
+};
+type ScrollPageCursorProps = {
+    ref: RefObject<HTMLDivElement>;
+    pageSizes: Size[];
+    scale: number;
+    pageCursor: number;
+    onChangePageCursor: (page: number) => void;
+};
+export declare const useScrollPageCursor: ({ ref, pageSizes, scale, pageCursor, onChangePageCursor, }: ScrollPageCursorProps) => void;
+export declare const useMountStatus: () => boolean;
+interface UseInitEventsParams {
+    pageCursor: number;
+    pageSizes: Size[];
+    activeElements: HTMLElement[];
+    template: Template;
+    schemasList: SchemaForUI[][];
+    changeSchemas: ChangeSchemas;
+    commitSchemas: (newSchemas: SchemaForUI[]) => void;
+    removeSchemas: (ids: string[]) => void;
+    onSaveTemplate: (t: Template) => void;
+    past: React.MutableRefObject<SchemaForUI[][]>;
+    future: React.MutableRefObject<SchemaForUI[][]>;
+    setSchemasList: React.Dispatch<React.SetStateAction<SchemaForUI[][]>>;
+    onEdit: (targets: HTMLElement[]) => void;
+    onEditEnd: () => void;
+}
+export declare const useInitEvents: ({ pageCursor, pageSizes, activeElements, template, schemasList, changeSchemas, commitSchemas, removeSchemas, onSaveTemplate, past, future, setSchemasList, onEdit, onEditEnd, }: UseInitEventsParams) => void;
+export {};

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

@@ -0,0 +1,3 @@
+import type { Lang, Dict } from '@pdfme/common';
+export declare const getDict: (lang: Lang) => Dict;
+export declare const i18n: (key: keyof Dict, dict?: Dict) => string;

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/dist/types/src/theme.d.ts

@@ -0,0 +1,2 @@
+import type { ThemeConfig } from 'antd';
+export declare const defaultTheme: ThemeConfig;

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

@@ -0,0 +1,19 @@
+import type { SchemaForUI, Size, ChangeSchemas, BasePdf } from '@pdfme/common';
+export type SidebarProps = {
+    height: number;
+    hoveringSchemaId: string | null;
+    onChangeHoveringSchemaId: (id: string | null) => void;
+    size: Size;
+    pageSize: Size;
+    basePdf: BasePdf;
+    activeElements: HTMLElement[];
+    schemas: SchemaForUI[];
+    schemasList: SchemaForUI[][];
+    onSortEnd: (sortedSchemas: SchemaForUI[]) => void;
+    onEdit: (id: string) => void;
+    onEditEnd: () => void;
+    changeSchemas: ChangeSchemas;
+    deselectSchema: () => void;
+    sidebarOpen: boolean;
+    setSidebarOpen: (sidebarOpen: boolean) => void;
+};

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

@@ -0,0 +1,127 @@
+{
+  "name": "@pdfme/ui",
+  "version": "0.0.0",
+  "sideEffects": false,
+  "author": "hand-dot",
+  "license": "MIT",
+  "keywords": [
+    "pdf",
+    "pdf-generation",
+    "pdf-designer",
+    "pdf-viewer",
+    "typescript",
+    "react"
+  ],
+  "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",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:pdfme/pdfme.git"
+  },
+  "bugs": {
+    "url": "https://github.com/pdfme/pdfme/issues"
+  },
+  "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",
+    "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}'"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@pdfme/converter": "*",
+    "@scena/react-guides": "^0.28.2",
+    "antd": "^5.27.4",
+    "dompurify": "^3.2.7",
+    "form-render": "^2.5.5",
+    "globrex": "^0.1.2",
+    "hotkeys-js": "^3.13.15",
+    "lucide-react": "^0.552.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-moveable": "^0.56.0",
+    "react-refresh": "^0.17.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",
+    "@vitejs/plugin-react": "^5.0.4",
+    "csstype": "^3.1.2",
+    "esbuild": "^0.25.10",
+    "eslint-plugin-react": "^7.37.5",
+    "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",
+    "postcss": "^8.5.6",
+    "process": "^0.11.10",
+    "rollup": "^4.44.1",
+    "vite": "^7.1.7",
+    "vite-plugin-css-injected-by-js": "^3.3.0",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "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

@@ -0,0 +1,107 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {
+  cloneDeep,
+  Template,
+  DesignerProps,
+  checkDesignerProps,
+  checkTemplate,
+  PDFME_VERSION,
+} from '@pdfme/common';
+import { BaseUIClass } from './class.js';
+import { DESTROYED_ERR_MSG } from './constants.js';
+import DesignerComponent from './components/Designer/index.js';
+import AppContextProvider from './components/AppContextProvider.js';
+
+class Designer extends BaseUIClass {
+  private onSaveTemplateCallback?: (template: Template) => void;
+  private onChangeTemplateCallback?: (template: Template) => void;
+  private onPageChangeCallback?: (pageInfo: { currentPage: number; totalPages: number }) => void;
+  private pageCursor: number = 0;
+
+  constructor(props: DesignerProps) {
+    super(props);
+    checkDesignerProps(props);
+  }
+
+  public saveTemplate() {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    if (this.onSaveTemplateCallback) {
+      this.onSaveTemplateCallback(this.template);
+    }
+  }
+
+  public updateTemplate(template: Template) {
+    checkTemplate(template);
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    this.template = cloneDeep(template);
+    if (this.onChangeTemplateCallback) {
+      this.onChangeTemplateCallback(template);
+    }
+    this.render();
+  }
+
+  public onSaveTemplate(cb: (template: Template) => void) {
+    this.onSaveTemplateCallback = cb;
+  }
+
+  public onChangeTemplate(cb: (template: Template) => void) {
+    this.onChangeTemplateCallback = cb;
+  }
+
+  public onPageChange(cb: (pageInfo: { currentPage: number; totalPages: number }) => void) {
+    this.onPageChangeCallback = cb;
+  }
+
+  public getPageCursor() {
+    return this.pageCursor;
+  }
+
+  public getTotalPages() {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    return this.template.schemas.length;
+  }
+
+  protected render() {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    ReactDOM.render(
+      <AppContextProvider
+        lang={this.getLang()}
+        font={this.getFont()}
+        plugins={this.getPluginsRegistry()}
+        options={this.getOptions()}
+      >
+        <DesignerComponent
+          template={this.template}
+          onSaveTemplate={(template) => {
+            this.template = template;
+            this.template.pdfmeVersion = PDFME_VERSION;
+            if (this.onSaveTemplateCallback) {
+              this.onSaveTemplateCallback(template);
+            }
+          }}
+          onChangeTemplate={(template) => {
+            this.template = template;
+            this.template.pdfmeVersion = PDFME_VERSION;
+            if (this.onChangeTemplateCallback) {
+              this.onChangeTemplateCallback(template);
+            }
+          }}
+          onPageCursorChange={(newPageCursor: number, totalPages: number) => {
+            this.pageCursor = newPageCursor;
+            if (this.onPageChangeCallback) {
+              this.onPageChangeCallback({
+                currentPage: newPageCursor,
+                totalPages: totalPages,
+              });
+            }
+          }}
+          size={this.size}
+        />
+      </AppContextProvider>,
+      this.domContainer,
+    );
+  }
+}
+
+export default Designer;

package/src/Form.tsx

@@ -0,0 +1,102 @@
+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';
+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;
+  private onPageChangeCallback?: (pageInfo: { currentPage: number; totalPages: number }) => void;
+  private pageCursor: number = 0;
+
+  constructor(props: PreviewProps) {
+    super(props);
+  }
+
+  public onChangeInput(cb: (arg: { index: number; value: string; name: string }) => void) {
+    this.onChangeInputCallback = cb;
+  }
+
+  public onPageChange(cb: (pageInfo: { currentPage: number; totalPages: number }) => void) {
+    this.onPageChangeCallback = cb;
+  }
+
+  public getPageCursor() {
+    return this.pageCursor;
+  }
+
+  public getTotalPages() {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    return this.template.schemas.length;
+  }
+
+  public setInputs(inputs: { [key: string]: string }[]): void {
+    const previousInputs = this.getInputs();
+
+    super.setInputs(inputs);
+
+    const changedInputs: Array<{ index: number; name: string; value: string }> = [];
+
+    inputs.forEach((input, index) => {
+      const prevInput = previousInputs[index] || {};
+
+      const allKeys = new Set([...Object.keys(input), ...Object.keys(prevInput)]);
+
+      allKeys.forEach((name) => {
+        const newValue = input[name];
+        const oldValue = prevInput[name];
+
+        if (newValue !== oldValue) {
+          changedInputs.push({ index, name, value: newValue });
+        }
+      });
+    });
+
+    changedInputs.forEach((input) => {
+      if (this.onChangeInputCallback) {
+        this.onChangeInputCallback(input);
+      }
+    });
+  }
+
+  protected render() {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    ReactDOM.render(
+      <AppContextProvider
+        lang={this.getLang()}
+        font={this.getFont()}
+        plugins={this.getPluginsRegistry()}
+        options={this.getOptions()}
+      >
+        <Preview
+          template={this.template}
+          size={this.size}
+          inputs={this.inputs}
+          onChangeInput={(arg: { index: number; value: string; name: string }) => {
+            const { index, value, name } = arg;
+            if (this.onChangeInputCallback) {
+              this.onChangeInputCallback({ index, value, name });
+            }
+            if (this.inputs && this.inputs[index]) {
+              if (this.inputs[index][name] !== value) {
+                this.inputs[index][name] = value;
+                this.render();
+              }
+            }
+          }}
+          onPageChange={(pageInfo) => {
+            this.pageCursor = pageInfo.currentPage;
+            if (this.onPageChangeCallback) {
+              this.onPageChangeCallback(pageInfo);
+            }
+          }}
+        />
+      </AppContextProvider>,
+      this.domContainer,
+    );
+  }
+}
+
+export default Form;

package/src/Viewer.tsx

@@ -0,0 +1,59 @@
+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';
+import Preview from './components/Preview.js';
+import AppContextProvider from './components/AppContextProvider.js';
+
+class Viewer extends PreviewUI {
+  private onPageChangeCallback?: (pageInfo: { currentPage: number; totalPages: number }) => void;
+  private pageCursor: number = 0;
+
+  constructor(props: PreviewProps) {
+    super(props);
+    console.warn(
+      '[@pdfme/ui] Viewer component is deprecated and will be removed in a future version.',
+    );
+  }
+
+  public onPageChange(cb: (pageInfo: { currentPage: number; totalPages: number }) => void) {
+    this.onPageChangeCallback = cb;
+  }
+
+  public getPageCursor() {
+    return this.pageCursor;
+  }
+
+  public getTotalPages() {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    return this.template.schemas.length;
+  }
+
+  protected render() {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    ReactDOM.render(
+      <AppContextProvider
+        lang={this.getLang()}
+        font={this.getFont()}
+        plugins={this.getPluginsRegistry()}
+        options={this.getOptions()}
+      >
+        <Preview
+          template={this.template}
+          size={this.size}
+          inputs={this.inputs}
+          onPageChange={(pageInfo) => {
+            this.pageCursor = pageInfo.currentPage;
+            if (this.onPageChangeCallback) {
+              this.onPageChangeCallback(pageInfo);
+            }
+          }}
+        />
+      </AppContextProvider>,
+      this.domContainer,
+    );
+  }
+}
+
+export default Viewer;