@pdfme/ui 2.2.0 → 3.0.0-beta.2

package/dist/types/i18n.d.ts

@@ -1,12 +1,11 @@
 import { Lang } from '@pdfme/common';
-declare type DictEn = typeof dictEn;
+type DictEn = typeof dictEn;
 declare const dictEn: {
     cancel: string;
     field: string;
     fieldName: string;
     require: string;
     uniq: string;
-    inputExample: string;
     edit: string;
     plsInputName: string;
     fieldMustUniq: string;
@@ -20,6 +19,9 @@ declare const dictEn: {
     errorBulkUpdateFieldName: string;
     commitBulkUpdateFieldName: string;
     bulkUpdateFieldName: string;
+    barColor: string;
+    textColor: string;
+    bgColor: string;
 };
 export declare const curriedI18n: (lang: Lang) => (key: keyof DictEn) => string;
 export {};

package/dist/types/index.d.ts

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

package/dist/types/types.d.ts

@@ -0,0 +1,25 @@
+import type { UIRenderProps, SchemaForUI, Size, Schema, ChangeSchemas, PropPanel } from '@pdfme/common';
+export type SidebarProps = {
+    height: number;
+    hoveringSchemaId: string | null;
+    onChangeHoveringSchemaId: (id: string | null) => void;
+    size: Size;
+    pageSize: Size;
+    activeElements: HTMLElement[];
+    schemas: SchemaForUI[];
+    onSortEnd: (sortedSchemas: SchemaForUI[]) => void;
+    onEdit: (id: string) => void;
+    onEditEnd: () => void;
+    changeSchemas: ChangeSchemas;
+    addSchema: () => void;
+    deselectSchema: () => void;
+    sidebarOpen: boolean;
+    setSidebarOpen: (sidebarOpen: boolean) => void;
+};
+export type UIRender = (arg: UIRenderProps<Schema>) => Promise<void>;
+export interface UIRenderer {
+    [key: string]: UIRender | undefined;
+}
+export interface PropPanelObject {
+    [key: string]: PropPanel<Schema> | undefined;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "2.2.0",
+  "version": "3.0.0-beta.2",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -35,36 +35,43 @@
     "test": "jest",
     "lint:watch": "tsc -w --noEmit",
     "test:watch": "jest --coverage --watch",
-    "prune": "ts-prune src"
+    "prune": "ts-prune src",
+    "prettier": "prettier --write 'src/**/*.{ts,tsx}'"
   },
   "dependencies": {
-    "@dnd-kit/core": "^5.0.1",
-    "@dnd-kit/sortable": "^6.0.0",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/sortable": "^7.0.2",
     "@heroicons/react": "^2.0.13",
     "@scena/react-guides": "^0.16.0",
+    "antd": "^5.9.4",
+    "form-render": "^2.2.16",
     "hotkeys-js": "^3.8.7",
     "pdfjs-dist": "2.12.313",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "react-moveable": "^0.30.3",
     "react-selecto": "^1.12.0"
   },
   "devDependencies": {
     "@pdfme/common": "file:../common",
+    "@pdfme/schemas": "file:../schemas",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@types/pdfjs-dist": "^2.10.378",
     "@types/react": "^17.0.52",
     "@types/react-dom": "^17.0.18",
+    "css-loader": "^6.8.1",
+    "csstype": "^3.1.2",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "jest-canvas-mock": "^2.3.1",
     "process": "^0.11.10",
+    "style-loader": "^3.3.3",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1"
   },
   "peerDependencies": {
-    "@pdfme/common": "^2.1.0"
+    "@pdfme/common": "latest"
   },
   "jest": {
     "setupFiles": [
@@ -74,7 +81,11 @@
       "./__tests__/test-helpers.js"
     ],
     "moduleNameMapper": {
-      "\\.(png)$": "<rootDir>/../../assetsTransformer.js"
+      "\\.(png|css)$": "<rootDir>/../../assetsTransformer.js",
+      "^antd/es/": "antd/lib/",
+      "^form-render/es/": "form-render/lib/",
+      "^rc-picker/es/": "rc-picker/lib/",
+      "^lodash-es$": "lodash"
     },
     "resolver": "ts-jest-resolver",
     "moduleFileExtensions": [

package/src/Designer.tsx

@@ -1,20 +1,56 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { ConfigProvider, ThemeConfig } from 'antd';
 import { Template, DesignerProps, checkDesignerProps, checkTemplate } from '@pdfme/common';
+import type { PropPanelObject } from './types';
 import { BaseUIClass } from './class';
 import { DESTROYED_ERR_MSG } from './constants';
-import { I18nContext, FontContext } from './contexts';
+import {
+  I18nContext,
+  FontContext,
+  RendererRegistry,
+  PropPanelRegistry,
+  OptionsContext,
+} from './contexts';
 import DesignerComponent from './components/Designer/index';
 import { cloneDeep } from './helper';
+import builtInPropPanel from './builtInPropPanel';
+
+// TODO Custom Design for UI #243
+// - https://github.com/pdfme/pdfme/issues/243
+// - https://ant.design/docs/react/customize-theme
+const theme: ThemeConfig = {
+  token: {
+    fontSize: 12,
+  },
+  components: {
+    Form: {
+      itemMarginBottom: 8,
+      verticalLabelPadding: '0 0 2px',
+    },
+  },
+};
 
 class Designer extends BaseUIClass {
   private onSaveTemplateCallback?: (template: Template) => void;
   private onChangeTemplateCallback?: (template: Template) => void;
 
+  private propPanelRegistry: PropPanelObject = builtInPropPanel;
+
   constructor(props: DesignerProps) {
     super(props);
     checkDesignerProps(props);
 
+    const { plugins = {} } = props;
+
+    const customPropPanel = Object.entries(plugins).reduce(
+      (acc, [key, { propPanel }]) => Object.assign(acc, { [key]: propPanel }),
+      {} as PropPanelObject
+    );
+    if (Object.keys(customPropPanel).length > 0) {
+      this.propPanelRegistry = customPropPanel;
+    }
+
     this.render();
   }
 
@@ -43,29 +79,41 @@ class Designer extends BaseUIClass {
     this.onChangeTemplateCallback = cb;
   }
 
+  protected getPropPanelRegistry() {
+    return this.propPanelRegistry;
+  }
+
   protected render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
     ReactDOM.render(
-      <I18nContext.Provider value={this.getI18n()}>
-        <FontContext.Provider value={this.getFont()}>
-          <DesignerComponent
-            template={this.template}
-            onSaveTemplate={(template) => {
-              this.template = template;
-              if (this.onSaveTemplateCallback) {
-                this.onSaveTemplateCallback(template);
-              }
-            }}
-            onChangeTemplate={(template) => {
-              this.template = template;
-              if (this.onChangeTemplateCallback) {
-                this.onChangeTemplateCallback(template);
-              }
-            }}
-            size={this.size}
-          />
-        </FontContext.Provider>
-      </I18nContext.Provider>,
+      <ConfigProvider theme={theme}>
+        <I18nContext.Provider value={this.getI18n()}>
+          <FontContext.Provider value={this.getFont()}>
+            <RendererRegistry.Provider value={this.getRendererRegistry()}>
+              <PropPanelRegistry.Provider value={this.getPropPanelRegistry()}>
+                <OptionsContext.Provider value={this.getOptions()}>
+                  <DesignerComponent
+                    template={this.template}
+                    onSaveTemplate={(template) => {
+                      this.template = template;
+                      if (this.onSaveTemplateCallback) {
+                        this.onSaveTemplateCallback(template);
+                      }
+                    }}
+                    onChangeTemplate={(template) => {
+                      this.template = template;
+                      if (this.onChangeTemplateCallback) {
+                        this.onChangeTemplateCallback(template);
+                      }
+                    }}
+                    size={this.size}
+                  />
+                </OptionsContext.Provider>
+              </PropPanelRegistry.Provider>
+            </RendererRegistry.Provider>
+          </FontContext.Provider>
+        </I18nContext.Provider>
+      </ConfigProvider>,
       this.domContainer
     );
   }

package/src/Form.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { PreviewProps } from '@pdfme/common';
 import { PreviewUI } from './class';
 import { DESTROYED_ERR_MSG } from './constants';
-import { I18nContext, FontContext } from './contexts';
+import { I18nContext, FontContext, RendererRegistry, OptionsContext } from './contexts';
 import Preview from './components/Preview';
 
 class Form extends PreviewUI {
@@ -23,19 +23,23 @@ class Form extends PreviewUI {
     ReactDOM.render(
       <I18nContext.Provider value={this.getI18n()}>
         <FontContext.Provider value={this.getFont()}>
-          <Preview
-            template={this.template}
-            size={this.size}
-            inputs={this.inputs}
-            onChangeInput={(arg: { index: number; value: string; key: string }) => {
-              const { index, value, key } = arg;
-              if (this.onChangeInputCallback) {
-                this.onChangeInputCallback({ index, value, key });
-              }
-              this.inputs[index][key] = value;
-              this.render();
-            }}
-          />
+          <RendererRegistry.Provider value={this.getRendererRegistry()}>
+            <OptionsContext.Provider value={this.getOptions()}>
+              <Preview
+                template={this.template}
+                size={this.size}
+                inputs={this.inputs}
+                onChangeInput={(arg: { index: number; value: string; key: string }) => {
+                  const { index, value, key } = arg;
+                  if (this.onChangeInputCallback) {
+                    this.onChangeInputCallback({ index, value, key });
+                  }
+                  this.inputs[index][key] = value;
+                  this.render();
+                }}
+              />
+            </OptionsContext.Provider>
+          </RendererRegistry.Provider>
         </FontContext.Provider>
       </I18nContext.Provider>,
       this.domContainer

package/src/Viewer.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { PreviewProps } from '@pdfme/common';
 import { PreviewUI } from './class';
 import { DESTROYED_ERR_MSG } from './constants';
-import { I18nContext, FontContext } from './contexts';
+import { I18nContext, FontContext, RendererRegistry, OptionsContext } from './contexts';
 import Preview from './components/Preview';
 
 class Viewer extends PreviewUI {
@@ -17,7 +17,11 @@ class Viewer extends PreviewUI {
     ReactDOM.render(
       <I18nContext.Provider value={this.getI18n()}>
         <FontContext.Provider value={this.getFont()}>
-          <Preview template={this.template} size={this.size} inputs={this.inputs} />
+          <RendererRegistry.Provider value={this.getRendererRegistry()}>
+            <OptionsContext.Provider value={this.getOptions()}>
+              <Preview template={this.template} size={this.size} inputs={this.inputs} />
+            </OptionsContext.Provider>
+          </RendererRegistry.Provider>
         </FontContext.Provider>
       </I18nContext.Provider>,
       this.domContainer

package/src/builtInPropPanel.ts

@@ -0,0 +1,5 @@
+import { text } from '@pdfme/schemas';
+import type { PropPanelObject } from './types';
+
+const propPanel: PropPanelObject = { text: text.propPanel };
+export default propPanel;

package/src/builtInRenderer.ts

@@ -0,0 +1,5 @@
+import { text } from '@pdfme/schemas';
+import type { UIRenderer, UIRender } from './types';
+
+const renderer: UIRenderer = { text: text.ui as UIRender };
+export default renderer;

package/src/class.ts

@@ -1,7 +1,9 @@
 import ReactDOM from 'react-dom';
+import type { UIRenderer } from './types';
 import { curriedI18n } from './i18n';
 import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants';
 import { debounce, flatten, cloneDeep } from './helper';
+import builtInRenderer from './builtInRenderer';
 import {
   Template,
   Size,
@@ -65,6 +67,10 @@ export abstract class BaseUIClass {
 
   private font: Font = getDefaultFont();
 
+  private rendererRegistry: UIRenderer = builtInRenderer;
+
+  private options = {};
+
   private readonly setSize = debounce(() => {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
     this.size = {
@@ -79,22 +85,31 @@ export abstract class BaseUIClass {
   constructor(props: UIProps) {
     checkUIProps(props);
 
-    const { domContainer, template, options } = props;
-    const { lang, font } = options || {};
+    const { domContainer, template, options = {}, plugins = {} } = props;
     this.domContainer = domContainer;
     this.template = generateColumnsAndSampledataIfNeeded(cloneDeep(template));
+    this.options = options;
     this.size = {
       height: this.domContainer!.clientHeight || window.innerHeight,
       width: this.domContainer!.clientWidth || window.innerWidth,
     };
     this.resizeObserver.observe(this.domContainer!);
 
+    const { lang, font } = options;
     if (lang) {
       this.lang = lang;
     }
     if (font) {
       this.font = font;
     }
+
+    const customRenderer = Object.entries(plugins).reduce(
+      (acc, [key, { ui }]) => Object.assign(acc, { [key]: ui }),
+      {} as UIRenderer
+    );
+    if (Object.keys(customRenderer).length > 0) {
+      this.rendererRegistry = customRenderer;
+    }
   }
 
   protected getI18n() {
@@ -105,6 +120,14 @@ export abstract class BaseUIClass {
     return this.font;
   }
 
+  protected getRendererRegistry() {
+    return this.rendererRegistry;
+  }
+
+  protected getOptions() {
+    return this.options;
+  }
+
   public getTemplate() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
 

package/src/components/CtlBar/index.tsx

@@ -18,15 +18,15 @@ const CtlBar = (props: Props) => {
   const { size, pageCursor, pageNum, setPageCursor, zoomLevel, setZoomLevel } = props;
   const width = pageNum > 1 ? barWidth : barWidth / 2;
   return (
-    <div style={{ position: 'absolute', width: '100%', minHeight: size.height }}>
+    <div style={{ position: 'absolute', top: 'auto', bottom: '6%', width: size.width }}>
       <div
         style={{
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          position: 'sticky',
+          gap: '15px',
+          position: 'relative',
           zIndex: 1,
-          top: '90%',
           left: `calc(50% - ${width / 2}px)`,
           width,
           background: '#777777e6',
@@ -35,10 +35,7 @@ const CtlBar = (props: Props) => {
         }}
       >
         {pageNum > 1 && (
-          <>
-            <Pager pageCursor={pageCursor} pageNum={pageNum} setPageCursor={setPageCursor} />
-            <strong style={{ color: 'white', fontSize: '0.9rem', padding: 0 }}>|</strong>
-          </>
+          <Pager pageCursor={pageCursor} pageNum={pageNum} setPageCursor={setPageCursor} />
         )}
         <Zoom zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
       </div>

package/src/components/Designer/{Main → Canvas}/Guides.tsx

@@ -1,7 +1,7 @@
 import React, { Ref } from 'react';
 import Guides from '@scena/react-guides';
-import { Size } from '@pdfme/common';
-import { ZOOM, RULER_HEIGHT } from '../../../constants';
+import { ZOOM, Size } from '@pdfme/common';
+import { RULER_HEIGHT } from '../../../constants';
 
 const _Guides = ({
   paperSize,

package/src/components/Designer/{Main → Canvas}/Moveable.tsx

@@ -1,13 +1,5 @@
 import React, { forwardRef, Ref } from 'react';
-import Moveable, {
-  OnDrag,
-  OnResize,
-  OnDragEnd,
-  OnDragGroupEnd,
-  OnResizeEnd,
-  OnResizeGroupEnd,
-  OnClick,
-} from 'react-moveable';
+import Moveable, { OnDrag, OnResize, OnRotate, OnRotateEnd, OnClick } from 'react-moveable';
 
 type Props = {
   target: HTMLElement[];
@@ -15,16 +7,16 @@ type Props = {
   horizontalGuidelines: number[];
   verticalGuidelines: number[];
   keepRatio: boolean;
-  onDrag: ((e: OnDrag) => void) & (({ target, left, top }: OnDrag) => void);
-  onDragEnd: ((e: OnDragEnd) => void) &
-    (({ target }: { target: HTMLElement | SVGElement }) => void);
-  onDragGroupEnd: ((e: OnDragGroupEnd) => void) &
-    (({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void);
-  onResize: ((e: OnResize) => void) & (({ target, width, height, direction }: OnResize) => void);
-  onResizeEnd: ((e: OnResizeEnd) => void) &
-    (({ target }: { target: HTMLElement | SVGElement }) => void);
-  onResizeGroupEnd: ((e: OnResizeGroupEnd) => void) &
-    (({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void);
+  rotatable: boolean;
+  onDrag: ({ target, left, top }: OnDrag) => void;
+  onDragEnd: ({ target }: { target: HTMLElement | SVGElement }) => void;
+  onDragGroupEnd: ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void;
+  onRotate: ({ target, rotate }: OnRotate) => void;
+  onRotateEnd: ({ target }: OnRotateEnd) => void;
+  onRotateGroupEnd: ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void;
+  onResize: ({ target, width, height, direction }: OnResize) => void;
+  onResizeEnd: ({ target }: { target: HTMLElement | SVGElement }) => void;
+  onResizeGroupEnd: ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void;
   onClick: (e: OnClick) => void;
 };
 
@@ -35,9 +27,13 @@ const _Moveable = (
     horizontalGuidelines,
     verticalGuidelines,
     keepRatio,
+    rotatable,
     onDrag,
     onDragEnd,
     onDragGroupEnd,
+    onRotate,
+    onRotateEnd,
+    onRotateGroupEnd,
     onResize,
     onResizeEnd,
     onResizeGroupEnd,
@@ -51,8 +47,10 @@ const _Moveable = (
     snappable
     snapCenter
     draggable
+    rotatable={rotatable}
     resizable
     throttleDrag={1}
+    throttleRotate={1}
     throttleResize={1}
     ref={ref}
     target={target}
@@ -60,6 +58,12 @@ const _Moveable = (
     horizontalGuidelines={horizontalGuidelines}
     verticalGuidelines={verticalGuidelines}
     keepRatio={keepRatio}
+    onRotate={onRotate}
+    onRotateEnd={onRotateEnd}
+    onRotateGroup={({ events }) => {
+      events.forEach(onRotate);
+    }}
+    onRotateGroupEnd={onRotateGroupEnd}
     onDrag={onDrag}
     onDragGroup={({ events }) => {
       events.forEach(onDrag);