@pdfme/ui 1.0.18 → 1.1.0

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}

@@ -8,49 +8,49 @@ export declare abstract class BaseUIClass {
     private readonly setSize;
     resizeObserver: ResizeObserver;
     constructor(props: UIProps);
-    protected getI18n(): (key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "select" | "zoomIn" | "zoomOut" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string;
+    protected getI18n(): (key: "type" | "require" | "cancel" | "field" | "fieldName" | "uniq" | "inputExample" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string;
     protected getFont(): Record<string, {
         fallback?: boolean | undefined;
         subset?: boolean | undefined;
         data: ArrayBuffer | Uint8Array;
     }>;
     getTemplate(): {
-        sampledata?: Record<string, string>[] | undefined;
         columns?: string[] | undefined;
+        sampledata?: Record<string, string>[] | undefined;
         schemas: Record<string, {
-            rotate?: number | undefined;
-            alignment?: "left" | "center" | "right" | undefined;
+            backgroundColor?: string | undefined;
             fontSize?: number | undefined;
+            lineHeight?: number | undefined;
+            rotate?: number | undefined;
+            alignment?: "center" | "left" | "right" | 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;
             };
-            width: number;
-            height: number;
         } | {
             rotate?: number | undefined;
             type: "image";
+            height: number;
+            width: number;
             position: {
                 x: number;
                 y: number;
             };
-            width: number;
-            height: number;
         } | {
             rotate?: number | undefined;
             type: "qrcode" | "japanpost" | "ean13" | "ean8" | "code39" | "code128" | "nw7" | "itf14" | "upca" | "upce";
+            height: number;
+            width: number;
             position: {
                 x: number;
                 y: number;
             };
-            width: number;
-            height: number;
         }>[];
         basePdf: string | ArrayBuffer | Uint8Array;
     };

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare type Props = {
     pageCursor: number;
     pageNum: number;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare type Props = {
     zoomLevel: number;
     setZoomLevel: (zoom: number) => void;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Size } from '@pdfme/common';
 declare type Props = {
     size: Size;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Size } from '@pdfme/common';
 declare const Mask: ({ width, height }: Size) => JSX.Element;
 export default Mask;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { OnDragStart as _OnDragStart, OnSelect as _OnSelect } from 'react-selecto';
 declare const _Selecto: ({ container, continueSelect, onDragStart, onSelect, }: {
     container: HTMLElement | null;

package/dist/types/{components → src/components}/Designer/Sidebar/DetailView/ExampleInputEditor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
 declare const ExampleInputEditor: (props: Pick<SidebarProps, 'changeSchemas'> & {

package/dist/types/{components → src/components}/Designer/Sidebar/DetailView/PositionAndSizeEditor.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { SchemaForUI } from '@pdfme/common';
-import { SidebarProps } from '..';
+import { SidebarProps } from '../index.js';
 declare const PositionAndSizeEditor: (props: Pick<SidebarProps, 'pageSize' | 'schemas' | 'changeSchemas' | 'activeElements'> & {
     activeSchema: SchemaForUI;
 }) => JSX.Element;

package/dist/types/{components → src/components}/Designer/Sidebar/DetailView/TextPropEditor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
 declare const TextPropEditor: (props: Pick<SidebarProps, 'changeSchemas'> & {

package/dist/types/{components → src/components}/Designer/Sidebar/DetailView/TypeAndKeyEditor.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { SchemaForUI } from '@pdfme/common';
-import { SidebarProps } from '..';
+import { SidebarProps } from '../index.js';
 declare const TypeAndKeyEditor: (props: Pick<SidebarProps, 'schemas' | 'changeSchemas'> & {
     activeSchema: SchemaForUI;
 }) => JSX.Element;

package/dist/types/{components → src/components}/Designer/Sidebar/DetailView/index.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { SchemaForUI } from '@pdfme/common';
-import { SidebarProps } from '..';
+import { SidebarProps } from '../index.js';
 declare const DetailView: (props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements'> & {
     activeSchema: SchemaForUI;
 }) => JSX.Element;

package/dist/types/{components → src/components}/Designer/Sidebar/ListView/SelectableSortableContainer.d.ts

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

package/dist/types/{components → src/components}/Designer/Sidebar/ListView/index.d.ts

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

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SchemaForUI, Size } from '@pdfme/common';
 export declare type SidebarProps = {
     height: number;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DesignerReactProps, Template } from '@pdfme/common';
 declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplate, }: {
     options?: {
@@ -9,86 +10,86 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
         lang?: "en" | "ja" | undefined;
     } | undefined;
     template: {
-        sampledata?: Record<string, string>[] | undefined;
         columns?: string[] | undefined;
+        sampledata?: Record<string, string>[] | undefined;
         schemas: Record<string, {
-            rotate?: number | undefined;
-            alignment?: "left" | "center" | "right" | undefined;
+            backgroundColor?: string | undefined;
             fontSize?: number | undefined;
+            lineHeight?: number | undefined;
+            rotate?: number | undefined;
+            alignment?: "center" | "left" | "right" | 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;
             };
-            width: number;
-            height: number;
         } | {
             rotate?: number | undefined;
             type: "image";
+            height: number;
+            width: number;
             position: {
                 x: number;
                 y: number;
             };
-            width: number;
-            height: number;
         } | {
             rotate?: number | undefined;
             type: "qrcode" | "japanpost" | "ean13" | "ean8" | "code39" | "code128" | "nw7" | "itf14" | "upca" | "upce";
+            height: number;
+            width: number;
             position: {
                 x: number;
                 y: number;
             };
-            width: number;
-            height: number;
         }>[];
         basePdf: string | ArrayBuffer | Uint8Array;
     };
     size: {
-        width: number;
         height: number;
+        width: number;
     };
     onSaveTemplate: (args_0: {
-        sampledata?: Record<string, string>[] | undefined;
         columns?: string[] | undefined;
+        sampledata?: Record<string, string>[] | undefined;
         schemas: Record<string, {
-            rotate?: number | undefined;
-            alignment?: "left" | "center" | "right" | undefined;
+            backgroundColor?: string | undefined;
             fontSize?: number | undefined;
+            lineHeight?: number | undefined;
+            rotate?: number | undefined;
+            alignment?: "center" | "left" | "right" | 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;
             };
-            width: number;
-            height: number;
         } | {
             rotate?: number | undefined;
             type: "image";
+            height: number;
+            width: number;
             position: {
                 x: number;
                 y: number;
             };
-            width: number;
-            height: number;
         } | {
             rotate?: number | undefined;
             type: "qrcode" | "japanpost" | "ean13" | "ean8" | "code39" | "code128" | "nw7" | "itf14" | "upca" | "upce";
+            height: number;
+            width: number;
             position: {
                 x: number;
                 y: number;
             };
-            width: number;
-            height: number;
         }>[];
         basePdf: string | ArrayBuffer | Uint8Array;
     }, ...args_1: unknown[]) => void;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const Divider: () => JSX.Element;
 export default Divider;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Size } from '@pdfme/common';
 declare const Error: ({ size, error }: {
     size: Size;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PreviewReactProps } from '@pdfme/common';
 declare const Preview: ({ template, inputs, size, onChangeInput }: PreviewReactProps) => JSX.Element;
 export default Preview;

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

@@ -1,15 +1,15 @@
 import React from 'react';
-import { SchemaUIProps } from './SchemaUI';
+import { SchemaUIProps } from './SchemaUI.js';
 declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
     schema: {
         rotate?: number | undefined;
         type: "qrcode" | "japanpost" | "ean13" | "ean8" | "code39" | "code128" | "nw7" | "itf14" | "upca" | "upce";
+        height: number;
+        width: number;
         position: {
             x: number;
             y: number;
         };
-        width: number;
-        height: number;
     };
 } & React.RefAttributes<HTMLInputElement>>;
 export default _default;

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

@@ -1,15 +1,15 @@
 import React from 'react';
-import { SchemaUIProps } from './SchemaUI';
+import { SchemaUIProps } from './SchemaUI.js';
 declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
     schema: {
         rotate?: number | undefined;
         type: "image";
+        height: number;
+        width: number;
         position: {
             x: number;
             y: number;
         };
-        width: number;
-        height: number;
     };
 } & React.RefAttributes<HTMLInputElement>>;
 export default _default;

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

@@ -10,5 +10,5 @@ export interface SchemaUIProps {
 declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
     border: string;
     onChangeHoveringSchemaId?: ((id: string | null) => void) | undefined;
-} & React.RefAttributes<HTMLTextAreaElement | HTMLInputElement>>;
+} & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 export default _default;

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

@@ -1,22 +1,22 @@
 import React from 'react';
-import { SchemaUIProps } from './SchemaUI';
+import { SchemaUIProps } from './SchemaUI.js';
 declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
     schema: {
-        rotate?: number | undefined;
-        alignment?: "left" | "center" | "right" | undefined;
+        backgroundColor?: string | undefined;
         fontSize?: number | undefined;
+        lineHeight?: number | undefined;
+        rotate?: number | undefined;
+        alignment?: "center" | "left" | "right" | 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;
         };
-        width: number;
-        height: number;
     };
 } & React.RefAttributes<HTMLTextAreaElement>>;
 export default _default;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const Spinner: () => JSX.Element;
 export default Spinner;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Size } from '@pdfme/common';
 declare type Props = {
     size: Size;

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

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

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

@@ -27,48 +27,48 @@ export declare const getPdfPageSizes: (pdfBlob: Blob) => Promise<{
 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;
+    backgroundColor?: string | undefined;
     fontSize?: number | undefined;
+    lineHeight?: number | undefined;
+    rotate?: number | undefined;
+    alignment?: "center" | "left" | "right" | undefined;
     fontName?: string | undefined;
     fontColor?: string | undefined;
-    backgroundColor?: string | undefined;
     characterSpacing?: number | undefined;
-    lineHeight?: number | undefined;
     type: "text";
+    data: string;
+    key: string;
+    id: string;
+    height: number;
+    width: number;
     position: {
         x: number;
         y: number;
     };
-    data: string;
-    width: number;
-    height: number;
-    id: string;
-    key: string;
 } | {
     rotate?: number | undefined;
     type: "image";
+    data: string;
+    key: string;
+    id: string;
+    height: number;
+    width: number;
     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";
+    data: string;
+    key: string;
+    id: string;
+    height: number;
+    width: number;
     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;

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

@@ -9,8 +9,8 @@ declare type UIPreProcessorProps = {
 export declare const useUIPreProcessor: ({ template, size, zoomLevel }: UIPreProcessorProps) => {
     backgrounds: string[];
     pageSizes: {
-        width: number;
         height: number;
+        width: number;
     }[];
     scale: number;
     error: Error | null;

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

@@ -8,9 +8,7 @@ declare const dictEn: {
     uniq: string;
     inputExample: string;
     edit: string;
-    plsSelect: string;
     plsInputName: string;
-    plsAddNewField: string;
     fieldMustUniq: string;
     notUniq: string;
     noKeyName: string;
@@ -18,13 +16,6 @@ declare const dictEn: {
     addNewField: string;
     editField: string;
     type: string;
-    goToFirst: string;
-    goToPrevious: string;
-    goToNext: string;
-    goToEnd: string;
-    select: string;
-    zoomIn: string;
-    zoomOut: string;
     errorOccurred: string;
     errorBulkUpdateFieldName: string;
     commitBulkUpdateFieldName: string;

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

@@ -1,6 +1,6 @@
-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 };
 export type { Lang, Size, Alignment, SchemaType, BarCodeType, TextSchema, ImageSchema, BarcodeSchema, Schema, SchemaForUI, Font, BasePdf, Template, CommonProps, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, DesignerProps, } from '@pdfme/common';
 export { BLANK_PDF, isTextSchema, isImageSchema, isBarcodeSchema, checkTemplate, checkUIProps, checkPreviewProps, checkDesignerProps, checkGenerateProps, validateBarcodeInput, } from '@pdfme/common';

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@pdfme/ui",
-  "version": "1.0.18",
+  "version": "1.1.0",
+  "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
   "keywords": [
@@ -20,16 +21,26 @@
   "bugs": {
     "url": "https://github.com/pdfme/pdfme/issues"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/types/index.d.ts",
+  "main": "dist/cjs/src/index.js",
+  "module": "dist/esm/src/index.js",
+  "types": "dist/types/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/src/index.js",
+      "require": "./dist/cjs/src/index.js"
+    }
+  },
   "engines": {
     "node": ">=14"
   },
   "scripts": {
-    "develop": "webpack --watch --mode development",
-    "build": "NODE_ENV=production webpack --mode production",
+    "develop": "tsc -w",
+    "build": "npm run build:cjs && npm run build:esm && npm run copy-images",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "build:esm": "tsc -p tsconfig.esm.json",
     "clean": "rimraf dist",
+    "copy-images": "npm run copyBarcodeExamples",
+    "copyBarcodeExamples": "copyfiles src/assets/barcodeExamples/*.png dist/cjs && copyfiles src/assets/barcodeExamples/*.png dist/esm",
     "lint": "tsc --noEmit",
     "test": "jest",
     "lint:watch": "tsc -w --noEmit",
@@ -39,6 +50,7 @@
   "dependencies": {
     "@dnd-kit/core": "^5.0.1",
     "@dnd-kit/sortable": "^6.0.0",
+    "@heroicons/react": "^2.0.13",
     "@pdfme/common": "^1.0.0",
     "@scena/react-guides": "^0.16.0",
     "hotkeys-js": "^3.8.7",
@@ -56,6 +68,7 @@
     "@types/pdfjs-dist": "^2.7.4",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.9",
+    "copyfiles": "^2.4.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "jest-canvas-mock": "^2.3.1",
@@ -66,9 +79,9 @@
       "jest-canvas-mock"
     ],
     "moduleNameMapper": {
-      "\\.(png|svg)$": "<rootDir>/../../assetsTransformer.js",
-      "\\.(ttf)$": "<rootDir>/../../fontTransformer.js"
+      "\\.(png)$": "<rootDir>/../../assetsTransformer.js"
     },
+    "resolver": "ts-jest-resolver",
     "moduleFileExtensions": [
       "js",
       "ts",
@@ -80,7 +93,7 @@
     },
     "globals": {
       "ts-jest": {
-        "tsconfig": "tsconfig.json"
+        "tsconfig": "tsconfig.esm.json"
       }
     },
     "testMatch": [

package/src/Designer.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Template, DesignerProps, checkDesignerProps, checkTemplate } from '@pdfme/common';
-import { BaseUIClass } from './class';
-import { DESTROYED_ERR_MSG } from './constants';
-import { I18nContext, FontContext } from './contexts';
-import DesignerComponent from './components/Designer';
-import { cloneDeep } from './helper';
+import { BaseUIClass } from './class.js';
+import { DESTROYED_ERR_MSG } from './constants.js';
+import { I18nContext, FontContext } from './contexts.js';
+import DesignerComponent from './components/Designer/index.js';
+import { cloneDeep } from './helper.js';
 
 class Designer extends BaseUIClass {
   private onSaveTemplateCallback?: (template: Template) => void;