@pdfme/ui 1.0.0-beta.1

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

@@ -0,0 +1,91 @@
+import { Template, SchemaForUI, Size } from '@pdfme/common';
+export declare const uuid: () => string;
+export declare const set: <T extends object>(obj: T, path: string | string[], value: any) => void;
+export declare const debounce: <T extends Function>(cb: T, wait?: number) => T;
+export declare const round: (number: number, precision: number) => number;
+export declare const arrayMove: <T>(array: T[], from: number, to: number) => T[];
+export declare const cloneDeep: <T>(value: T) => T;
+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;
+    remove: () => void;
+    esc: () => void;
+    copy: () => void;
+    paste: () => void;
+    redo: () => void;
+    undo: () => void;
+    save: () => void;
+}) => void;
+export declare const destroyShortCuts: () => void;
+export declare const readFiles: (files: FileList | null, type: 'text' | 'dataURL' | 'arrayBuffer') => Promise<string | ArrayBuffer>;
+export declare const getPdfPageSizes: (pdfBlob: Blob) => Promise<{
+    height: number;
+    width: number;
+}[]>;
+export declare const pdf2Pngs: (pdfBlob: Blob, width: number) => Promise<string[]>;
+export declare const b64toBlob: (base64: string) => Blob;
+export declare const templateSchemas2SchemasList: (_template: Template) => Promise<({
+    rotate?: number | undefined;
+    alignment?: "left" | "center" | "right" | undefined;
+    fontSize?: number | undefined;
+    fontName?: string | undefined;
+    fontColor?: string | undefined;
+    backgroundColor?: string | undefined;
+    characterSpacing?: number | undefined;
+    lineHeight?: number | undefined;
+    type: "text";
+    position: {
+        x: number;
+        y: number;
+    };
+    data: string;
+    width: number;
+    height: number;
+    id: string;
+    key: string;
+} | {
+    rotate?: number | undefined;
+    type: "image";
+    position: {
+        x: number;
+        y: number;
+    };
+    data: string;
+    width: number;
+    height: number;
+    id: string;
+    key: string;
+} | {
+    rotate?: number | undefined;
+    type: "qrcode" | "japanpost" | "ean13" | "ean8" | "code39" | "code128" | "nw7" | "itf14" | "upca" | "upce";
+    position: {
+        x: number;
+        y: number;
+    };
+    data: string;
+    width: number;
+    height: number;
+    id: string;
+    key: string;
+})[][]>;
+export declare const fmtTemplate: (template: Template, schemasList: SchemaForUI[][]) => Template;
+export declare const getInitialSchema: () => SchemaForUI;
+export declare const getSampleByType: (type: string) => string;
+export declare const getKeepRatioHeightByWidth: (type: string, width: number) => number;
+export declare const getUniqSchemaKey: (arg: {
+    copiedSchemaKey: string;
+    schema: SchemaForUI[];
+    stackUniqSchemaKeys: 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 {};

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

@@ -0,0 +1,26 @@
+import { RefObject } from 'react';
+import { Template, Size } from '@pdfme/common';
+export declare const usePrevious: <T>(value: T) => T | null;
+declare type UIPreProcessorProps = {
+    template: Template;
+    size: Size;
+    offset?: number;
+};
+export declare const useUIPreProcessor: ({ template, size, offset }: UIPreProcessorProps) => {
+    backgrounds: string[];
+    pageSizes: {
+        width: number;
+        height: number;
+    }[];
+    scale: number;
+    error: Error | null;
+};
+declare type ScrollPageCursorProps = {
+    rootRef: RefObject<HTMLDivElement>;
+    pageSizes: Size[];
+    scale: number;
+    pageCursor: number;
+    onChangePageCursor: (page: number) => void;
+};
+export declare const useScrollPageCursor: ({ rootRef, pageSizes, scale, pageCursor, onChangePageCursor, }: ScrollPageCursorProps) => void;
+export {};

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

@@ -0,0 +1,30 @@
+import { Lang } from '@pdfme/common';
+declare type DictEn = typeof dictEn;
+declare const dictEn: {
+    field: string;
+    fieldName: string;
+    require: string;
+    uniq: string;
+    inputExample: string;
+    edit: string;
+    plsSelect: string;
+    plsInputName: string;
+    plsAddNewField: string;
+    fieldMustUniq: string;
+    notUniq: string;
+    noKeyName: string;
+    fieldsList: string;
+    addNewField: string;
+    editField: string;
+    type: string;
+    previewWarnMsg: string;
+    previewErrMsg: string;
+    goToFirst: string;
+    goToPrevious: string;
+    goToNext: string;
+    goToEnd: string;
+    select: string;
+    errorOccurred: string;
+};
+export declare const curriedI18n: (lang: Lang) => (key: keyof DictEn) => string;
+export {};

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

@@ -0,0 +1,5 @@
+import Designer from './Designer';
+import Form from './Form';
+import Viewer from './Viewer';
+import { BLANK_PDF, Lang, Size, Alignment, SchemaType, schemaTypes, BarCodeType, TextSchema, isTextSchema, ImageSchema, isImageSchema, BarcodeSchema, isBarcodeSchema, Schema, SchemaForUI, Font, BasePdf, Template, CommonProps, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, PreviewReactProps, DesignerProps, DesignerReactProps, checkTemplate, checkUIProps, checkPreviewProps, checkDesignerProps, checkGenerateProps, validateBarcodeInput } from '@pdfme/common';
+export { Designer, Viewer, Form, BLANK_PDF, Lang, Size, Alignment, SchemaType, schemaTypes, BarCodeType, TextSchema, isTextSchema, ImageSchema, isImageSchema, BarcodeSchema, isBarcodeSchema, Schema, SchemaForUI, Font, BasePdf, Template, CommonProps, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, PreviewReactProps, DesignerProps, DesignerReactProps, checkTemplate, checkUIProps, checkPreviewProps, checkDesignerProps, checkGenerateProps, validateBarcodeInput, };

package/dist/types/ui/src/libs/class.d.ts

@@ -0,0 +1,84 @@
+import { Template, Size, UIProps, PreviewProps, UIOptions } from '../../../common/src/type';
+interface CommonConstructor {
+    domContainer: HTMLElement;
+    template: Template;
+    options?: UIOptions;
+}
+export declare type DesignerConstructor = CommonConstructor;
+export declare type PreviewUIConstructor = CommonConstructor & {
+    inputs: {
+        [key: string]: string;
+    }[];
+};
+export declare abstract class BaseUIClass {
+    protected domContainer: HTMLElement | null;
+    protected template: Template;
+    protected size: Size;
+    private readonly lang;
+    private readonly font;
+    private readonly setSize;
+    constructor(props: UIProps);
+    protected getI18n(): (key: "type" | "field" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "previewWarnMsg" | "previewErrMsg" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "select" | "errorOccurred") => string;
+    protected getFont(): Record<string, {
+        fallback?: boolean | undefined;
+        subset?: boolean | undefined;
+        data: ArrayBuffer | Uint8Array;
+    }>;
+    getTemplate(): {
+        sampledata?: Record<string, string>[] | undefined;
+        columns?: string[] | undefined;
+        schemas: Record<string, {
+            rotate?: number | undefined;
+            alignment?: "left" | "center" | "right" | undefined;
+            fontSize?: number | undefined;
+            fontName?: string | undefined;
+            fontColor?: string | undefined;
+            backgroundColor?: string | undefined;
+            characterSpacing?: number | undefined;
+            lineHeight?: number | undefined;
+            type: "text";
+            height: number;
+            width: number;
+            position: {
+                x: number;
+                y: number;
+            };
+        } | {
+            rotate?: number | undefined;
+            type: "image";
+            height: number;
+            width: number;
+            position: {
+                x: number;
+                y: number;
+            };
+        } | {
+            rotate?: number | undefined;
+            type: "qrcode" | "japanpost" | "ean13" | "ean8" | "code39" | "code128" | "nw7" | "itf14" | "upca" | "upce";
+            height: number;
+            width: number;
+            position: {
+                x: number;
+                y: number;
+            };
+        }>[];
+        basePdf: string | ArrayBuffer | Uint8Array;
+    };
+    updateTemplate(template: Template): void;
+    destroy(): void;
+    protected abstract render(): void;
+}
+export declare abstract class PreviewUI extends BaseUIClass {
+    protected inputs: {
+        [key: string]: string;
+    }[];
+    constructor(props: PreviewProps);
+    getInputs(): {
+        [key: string]: string;
+    }[];
+    setInputs(inputs: {
+        [key: string]: string;
+    }[]): void;
+    protected abstract render(): void;
+}
+export {};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const I18nContext: import("react").Context<(key: "type" | "field" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "previewWarnMsg" | "previewErrMsg" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "select" | "errorOccurred") => string>;
+export declare const FontContext: import("react").Context<Record<string, {
+    fallback?: boolean | undefined;
+    subset?: boolean | undefined;
+    data: ArrayBuffer | Uint8Array;
+}>>;

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

@@ -0,0 +1,64 @@
+import { Template } from '../../../common/src/type';
+declare const esc = "esc";
+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;
+}) => void;
+export declare const destroyShortCuts: () => void;
+export declare const readFiles: (files: FileList | null, type: 'text' | 'dataURL' | 'arrayBuffer') => Promise<string | ArrayBuffer>;
+export declare const getPdfPageSizes: (pdfBlob: Blob) => Promise<{
+    height: number;
+    width: number;
+}[]>;
+export declare const pdf2Pngs: (pdfBlob: Blob, width: number) => Promise<string[]>;
+export declare const templateSchemas2SchemasList: (_template: Template) => Promise<({
+    rotate?: number | undefined;
+    alignment?: "left" | "center" | "right" | undefined;
+    fontSize?: number | undefined;
+    fontName?: string | undefined;
+    fontColor?: string | undefined;
+    backgroundColor?: string | undefined;
+    characterSpacing?: number | undefined;
+    lineHeight?: number | undefined;
+    type: "text";
+    height: number;
+    width: number;
+    position: {
+        x: number;
+        y: number;
+    };
+    data: string;
+    id: string;
+    key: string;
+} | {
+    rotate?: number | undefined;
+    type: "image";
+    height: number;
+    width: number;
+    position: {
+        x: number;
+        y: number;
+    };
+    data: string;
+    id: string;
+    key: string;
+} | {
+    rotate?: number | undefined;
+    type: "qrcode" | "japanpost" | "ean13" | "ean8" | "code39" | "code128" | "nw7" | "itf14" | "upca" | "upce";
+    height: number;
+    width: number;
+    position: {
+        x: number;
+        y: number;
+    };
+    data: string;
+    id: string;
+    key: string;
+})[][]>;
+export {};

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

@@ -0,0 +1,26 @@
+import { RefObject } from 'react';
+import { Template, Size } from '../../../common/src/type';
+export declare const usePrevious: <T>(value: T) => T | null;
+declare type UIPreProcessorProps = {
+    template: Template;
+    size: Size;
+    offset?: number;
+};
+export declare const useUIPreProcessor: ({ template, size, offset }: UIPreProcessorProps) => {
+    backgrounds: string[];
+    pageSizes: {
+        height: number;
+        width: number;
+    }[];
+    scale: number;
+    error: Error | null;
+};
+declare type ScrollPageCursorProps = {
+    rootRef: RefObject<HTMLDivElement>;
+    pageSizes: Size[];
+    scale: number;
+    pageCursor: number;
+    onChangePageCursor: (page: number) => void;
+};
+export declare const useScrollPageCursor: ({ rootRef, pageSizes, scale, pageCursor, onChangePageCursor, }: ScrollPageCursorProps) => void;
+export {};

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

@@ -0,0 +1,30 @@
+import { Lang } from '../../../common/src/type';
+declare type DictEn = typeof dictEn;
+declare const dictEn: {
+    field: string;
+    fieldName: string;
+    require: string;
+    uniq: string;
+    inputExample: string;
+    edit: string;
+    plsSelect: string;
+    plsInputName: string;
+    plsAddNewField: string;
+    fieldMustUniq: string;
+    notUniq: string;
+    noKeyName: string;
+    fieldsList: string;
+    addNewField: string;
+    editField: string;
+    type: string;
+    previewWarnMsg: string;
+    previewErrMsg: string;
+    goToFirst: string;
+    goToPrevious: string;
+    goToNext: string;
+    goToEnd: string;
+    select: string;
+    errorOccurred: string;
+};
+export declare const curriedI18n: (lang: Lang) => (key: keyof DictEn) => string;
+export {};

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

@@ -0,0 +1,64 @@
+import { Template } from '../../../common/src/type';
+declare const esc = "esc";
+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;
+}) => void;
+export declare const destroyShortCuts: () => void;
+export declare const readFiles: (files: FileList | null, type: 'text' | 'dataURL' | 'arrayBuffer') => Promise<string | ArrayBuffer>;
+export declare const templateSchemas2SchemasList: (_template: Template) => Promise<({
+    rotate?: number | undefined;
+    alignment?: "left" | "center" | "right" | undefined;
+    fontSize?: number | undefined;
+    fontName?: string | undefined;
+    fontColor?: string | undefined;
+    backgroundColor?: string | undefined;
+    characterSpacing?: number | undefined;
+    lineHeight?: number | undefined;
+    type: "text";
+    height: number;
+    width: number;
+    position: {
+        x: number;
+        y: number;
+    };
+    data: string;
+    id: string;
+    key: string;
+} | {
+    rotate?: number | undefined;
+    type: "image";
+    height: number;
+    width: number;
+    position: {
+        x: number;
+        y: number;
+    };
+    data: string;
+    id: string;
+    key: string;
+} | {
+    rotate?: number | undefined;
+    type: "qrcode" | "japanpost" | "ean13" | "ean8" | "code39" | "code128" | "nw7" | "itf14" | "upca" | "upce";
+    height: number;
+    width: number;
+    position: {
+        x: number;
+        y: number;
+    };
+    data: string;
+    id: string;
+    key: string;
+})[][]>;
+export declare const getPdfPageSizes: (pdfBlob: Blob) => Promise<{
+    height: number;
+    width: number;
+}[]>;
+export declare const pdf2Pngs: (pdfBlob: Blob, width: number) => Promise<string[]>;
+export {};

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@pdfme/ui",
+  "version": "1.0.0-beta.1",
+  "author": "hand-dot",
+  "license": "MIT",
+  "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": "git@github.com:pdfme/pdfme.git",
+  "bugs": {
+    "url": "https://github.com/pdfme/pdfme/issues"
+  },
+  "main": "dist/@pdfme/ui.js",
+  "module": "src/index.ts",
+  "types": "dist/types/index.d.ts",
+  "engines": {
+    "node": ">=14"
+  },
+  "scripts": {
+    "develop": "webpack-dev-server --mode development",
+    "build": "NODE_ENV=production webpack --mode production",
+    "clean": "rimraf dist",
+    "lint": "tsc --noEmit",
+    "test": "jest",
+    "lint:watch": "tsc -w --noEmit",
+    "test:watch": "jest --coverage --watch",
+    "prune": "ts-prune src"
+  },
+  "dependencies": {
+    "@pdfme/common": "^1.0.0-beta.1",
+    "@scena/react-guides": "^0.16.0",
+    "hotkeys-js": "^3.8.7",
+    "pdfjs-dist": "^2.12.313",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-moveable": "^0.30.3",
+    "react-selecto": "^1.12.0",
+    "react-sortable-hoc": "^2.0.0",
+    "worker-loader": "^3.0.8"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@types/css-font-loading-module": "^0.0.7",
+    "@types/pdfjs-dist": "^2.7.4",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.9",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "html-webpack-plugin": "^5.3.2",
+    "jest-canvas-mock": "^2.3.1",
+    "process": "^0.11.10"
+  },
+  "jest": {
+    "setupFiles": [
+      "jest-canvas-mock"
+    ],
+    "moduleNameMapper": {
+      "\\.(png|svg)$": "<rootDir>/../../assetsTransformer.js",
+      "\\.(ttf)$": "<rootDir>/../../fontTransformer.js"
+    },
+    "moduleFileExtensions": [
+      "js",
+      "ts",
+      "tsx"
+    ],
+    "transform": {
+      "^.+\\.ts$": "ts-jest",
+      "^.+\\.tsx$": "ts-jest"
+    },
+    "globals": {
+      "ts-jest": {
+        "tsconfig": "tsconfig.json"
+      }
+    },
+    "testMatch": [
+      "**/*.test.ts",
+      "**/*.test.tsx"
+    ]
+  }
+}

package/public/Designer.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Webpack App</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+  </head>
+  <body style="margin: 0">
+    <div>
+      <a href="./">Back</a>
+      /
+      <button onclick="init()">init</button>
+      /
+      <button onclick="destroy()">destroy</button>
+      /
+      <button onclick="saveTemplate()">saveTemplate</button>
+      /
+      <button onclick="updateTemplate()">updateTemplate</button>
+      /
+      <button onclick="generate()">generate</button>
+      /
+      <label>
+        loadTemplate
+        <input type="file" accept="application/json" onchange="loadTemplate(this.files[0])" />
+      </label>
+    </div>
+    <div id="app"></div>
+    <script src="./helper.js"></script>
+    <script>
+      let editor = null;
+
+      async function init() {
+        const font = await getFont();
+        editor = new Designer({
+          domContainer,
+          template: getTemplate(),
+          options: {
+            font,
+          },
+        });
+
+        editor.onSaveTemplate((t) => {
+          console.log({ ...t });
+          const tj = JSON.stringify(t, null, 2);
+          localStorage.setItem('template', tj);
+        });
+      }
+
+      function destroy() {
+        editor.destroy();
+      }
+
+      function saveTemplate() {
+        editor.saveTemplate();
+      }
+
+      function updateTemplate() {
+        editor.updateTemplate(getSampleTemplate());
+      }
+
+      function loadTemplate(file) {
+        const reader = new FileReader();
+        reader.onload = () => {
+          editor.updateTemplate(JSON.parse(reader.result));
+        };
+        reader.readAsText(file);
+      }
+
+      async function generate() {
+        const font = await getFont();
+        const template = editor.getTemplate();
+        const inputs = template.sampledata;
+        pdfme
+          .generate({
+            inputs,
+            template,
+            options: {
+              font,
+            },
+          })
+          .then((pdf) => {
+            const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
+            window.open(URL.createObjectURL(blob));
+          });
+      }
+
+      window.onload = init;
+    </script>
+  </body>
+</html>

package/public/Form.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Webpack App</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+  </head>
+  <body style="margin: 0">
+    <div>
+      <a href="./">Back</a>
+      /
+      <button onclick="init()">init</button>
+      /
+      <button onclick="destroy()">destroy</button>
+      /
+      <button onclick="getInputs()">getInputs</button>
+      /
+      <button onclick="setInputs()">setInputs</button>
+      /
+      <button onclick="generate()">generate</button>
+    </div>
+    <div id="app"></div>
+    <script src="./helper.js"></script>
+    <script>
+      let form = null;
+
+      async function init() {
+        const font = await getFont();
+        form = new pdfme.Form({
+          domContainer,
+          template: getTemplate(),
+          inputs: [
+            { field1: 'bb', field2: 'aaaaaaaaaaaa' },
+            { field1: 'bb', field2: 'aaaaaaaaaaaa' },
+            { field1: 'bb', field2: 'aaaaaaaaaaaa' },
+          ],
+          options: {
+            font,
+          },
+        });
+      }
+
+      function destroy() {
+        form.destroy();
+      }
+
+      function getInputs() {
+        console.log(form.getInputs());
+      }
+
+      function setInputs() {
+        form.setInputs([{ field1: 'wwwww', field2: 'wwwww' }]);
+      }
+
+      async function generate() {
+        const font = await getFont();
+        pdfme
+          .generate({
+            inputs: form.getInputs(),
+            template: getTemplate(),
+            options: {
+              font,
+            },
+          })
+          .then((pdf) => {
+            const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
+            window.open(URL.createObjectURL(blob));
+          });
+      }
+
+      window.onload = init;
+    </script>
+  </body>
+</html>