@pdfme/ui 1.0.0-beta.7 → 1.0.0-beta.8

package/dist/types/class.d.ts

@@ -7,7 +7,7 @@ export declare abstract class BaseUIClass {
     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 getI18n(): (key: "type" | "field" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "previewWarnMsg" | "previewErrMsg" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "errorOccurred") => string;
     protected getFont(): Record<string, {
         fallback?: boolean | undefined;
         subset?: boolean | undefined;

package/dist/types/components/Designer/Main/Moveable.d.ts

@@ -25,7 +25,7 @@ declare type Props = {
     onResizeGroupEnd: ((e: OnResizeGroupEnd) => void) & (({ targets }: {
         targets: (HTMLElement | SVGElement)[];
     }) => void);
-    onClick: ((e: OnClick) => void) & (() => void);
+    onClick: (e: OnClick) => void;
 };
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
 export default _default;

package/dist/types/components/Designer/Sidebar/ListView.d.ts

@@ -1,3 +1,3 @@
 import { SidebarProps } from '.';
-declare const ListView: (props: Pick<SidebarProps, 'schemas' | 'onSortEnd' | 'onEdit' | 'size' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'>) => JSX.Element;
+declare const ListView: (props: Pick<SidebarProps, 'scale' | 'schemas' | 'onSortEnd' | 'onEdit' | 'size' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'>) => JSX.Element;
 export default ListView;

package/dist/types/components/Designer/Sidebar/index.d.ts

@@ -1,5 +1,6 @@
 import { SchemaForUI, Size } from '@pdfme/common';
 export declare type SidebarProps = {
+    scale: number;
     height: number;
     hoveringSchemaId: string | null;
     onChangeHoveringSchemaId: (id: string | null) => void;

package/dist/types/constants.d.ts

@@ -3,3 +3,4 @@ export declare const DESTROYED_ERR_MSG = "this instance is already destroyed";
 export declare const ZOOM = 3.7795275591;
 export declare const SELECTABLE_CLASSNAME = "selectable";
 export declare const RULER_HEIGHT = 30;
+export declare const SIDEBAR_WIDTH = 300;

package/dist/types/contexts.d.ts

@@ -1,5 +1,5 @@
 /// <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 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" | "errorOccurred") => string>;
 export declare const FontContext: import("react").Context<Record<string, {
     fallback?: boolean | undefined;
     subset?: boolean | undefined;

package/dist/types/i18n.d.ts

@@ -23,7 +23,6 @@ declare const dictEn: {
     goToPrevious: string;
     goToNext: string;
     goToEnd: string;
-    select: string;
     errorOccurred: string;
 };
 export declare const curriedI18n: (lang: Lang) => (key: keyof DictEn) => string;

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@pdfme/ui",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.8",
   "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",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:pdfme/pdfme.git"
+  },
   "bugs": {
     "url": "https://github.com/pdfme/pdfme/issues"
   },
@@ -16,7 +19,7 @@
     "node": ">=14"
   },
   "scripts": {
-    "develop": "webpack-dev-server --mode development",
+    "develop": "webpack --watch --mode development",
     "build": "NODE_ENV=production webpack --mode production",
     "clean": "rimraf dist",
     "lint": "tsc --noEmit",
@@ -26,7 +29,7 @@
     "prune": "ts-prune src"
   },
   "dependencies": {
-    "@pdfme/common": "^1.0.0-beta.7",
+    "@pdfme/common": "^1.0.0-beta.8",
     "@scena/react-guides": "^0.16.0",
     "hotkeys-js": "^3.8.7",
     "pdfjs-dist": "^2.12.313",
@@ -46,7 +49,6 @@
     "@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"
   },
@@ -80,4 +82,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/Designer.tsx

@@ -5,6 +5,7 @@ import { BaseUIClass } from './class';
 import { DESTROYED_ERR_MSG } from './constants';
 import { I18nContext, FontContext } from './contexts';
 import DesignerComponent from './components/Designer';
+import { cloneDeep } from './helper';
 
 class Designer extends BaseUIClass {
   private onSaveTemplateCallback?: (template: Template) => void;
@@ -26,7 +27,7 @@ class Designer extends BaseUIClass {
 
   public updateTemplate(template: Template) {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
-    this.template = template;
+    this.template = cloneDeep(template);
     if (this.onChangeTemplateCallback) {
       this.onChangeTemplateCallback(template);
     }

package/src/Form.tsx

@@ -11,6 +11,7 @@ class Form extends PreviewUI {
 
   constructor(props: PreviewProps) {
     super(props);
+    this.render();
   }
 
   public onChangeInput(cb: (arg: { index: number; value: string; key: string }) => void) {

package/src/Viewer.tsx

@@ -9,6 +9,7 @@ import Preview from './components/Preview';
 class Viewer extends PreviewUI {
   constructor(props: PreviewProps) {
     super(props);
+    this.render();
   }
 
   protected render() {

package/src/assets/icons/close.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+</svg>

package/src/class.ts

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom';
 import { curriedI18n } from './i18n';
 import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants';
-import { debounce, flatten } from './helper';
+import { debounce, flatten, cloneDeep } from './helper';
 import {
   Template,
   Size,
@@ -76,7 +76,7 @@ export abstract class BaseUIClass {
     const { domContainer, template, options } = props;
     const { lang, font } = options || {};
     this.domContainer = domContainer;
-    this.template = generateColumnsAndSampledataIfNeeded(template);
+    this.template = generateColumnsAndSampledataIfNeeded(cloneDeep(template));
     this.size = {
       height: this.domContainer.clientHeight || window.innerHeight,
       width: this.domContainer.clientWidth || window.innerWidth,
@@ -107,7 +107,7 @@ export abstract class BaseUIClass {
 
   public updateTemplate(template: Template) {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
-    this.template = template;
+    this.template = cloneDeep(template);
     this.render();
   }
 
@@ -127,8 +127,7 @@ export abstract class PreviewUI extends BaseUIClass {
     super(props);
     checkPreviewProps(props);
 
-    this.inputs = props.inputs;
-    this.render();
+    this.inputs = cloneDeep(props.inputs);
   }
 
   public getInputs() {
@@ -139,7 +138,7 @@ export abstract class PreviewUI extends BaseUIClass {
 
   public setInputs(inputs: { [key: string]: string }[]) {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
-    this.inputs = inputs;
+    this.inputs = cloneDeep(inputs);
     this.render();
   }
 

package/src/components/Designer/Main/Moveable.tsx

@@ -25,7 +25,7 @@ type Props = {
     (({ target }: { target: HTMLElement | SVGElement }) => void);
   onResizeGroupEnd: ((e: OnResizeGroupEnd) => void) &
     (({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void);
-  onClick: ((e: OnClick) => void) & (() => void);
+  onClick: (e: OnClick) => void;
 };
 
 const _Moveable = (

package/src/components/Designer/Main/index.tsx

@@ -7,7 +7,7 @@ import React, {
   forwardRef,
   useCallback,
 } from 'react';
-import { OnDrag, OnResize } from 'react-moveable';
+import { OnDrag, OnResize, OnClick } from 'react-moveable';
 import { SchemaForUI, Size } from '@pdfme/common';
 import { ZOOM, RULER_HEIGHT } from '../../../constants';
 import { usePrevious } from '../../../hooks';
@@ -39,7 +39,7 @@ const DeleteButton = ({ activeElements: aes }: { activeElements: HTMLElement[] }
         color: 'white',
         border: 'none',
         fontWeight: 'bold',
-        borderRadius: 3,
+        borderRadius: 2,
         background: 'rgb(68, 170, 255)',
       }}
     >
@@ -201,15 +201,13 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
   const getGuideLines = (guides: GuidesInterface[], index: number) =>
     guides[index] && guides[index].getGuides().map((g) => g * ZOOM);
 
-  const onClickMoveable = () => {
+  const onClickMoveable = (e: OnClick) => {
+    e.inputEvent.stopPropagation();
     setEditing(true);
     const ic = inputRef.current;
     if (!ic) return;
-    ic.disabled = false;
     ic.focus();
-    if (ic.type === 'file') {
-      ic.click();
-    } else {
+    if (ic.type !== 'file') {
       ic.setSelectionRange(ic.value.length, ic.value.length);
     }
   };
@@ -298,7 +296,7 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
         )}
         renderSchema={({ schema }) => (
           <SchemaUI
-            key={schema.key}
+            key={schema.id}
             schema={schema}
             onChangeHoveringSchemaId={onChangeHoveringSchemaId}
             editable={editing && activeElements.map((ae) => ae.id).includes(schema.id)}

package/src/components/Designer/Sidebar/DetailView/ExampleInputEditor.tsx

@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import { readFiles } from '../../../../helper';
 import { I18nContext } from '../../../../contexts';
 import { SidebarProps } from '..';
+import closeIcon from '../../../../assets/icons/close.svg';
 
 const ExampleInputEditor = (props: Pick<SidebarProps, 'changeSchemas' | 'activeSchema'>) => {
   const { changeSchemas, activeSchema } = props;
@@ -9,25 +10,40 @@ const ExampleInputEditor = (props: Pick<SidebarProps, 'changeSchemas' | 'activeS
 
   return (
     <div>
-      <label style={{ marginBottom: 0 }}>{i18n('inputExample')}</label>
+      <label>{i18n('inputExample')}</label>
       {activeSchema.type === 'image' ? (
-        <div style={{ position: 'relative', textAlign: 'center' }}>
+        <div style={{ position: 'relative' }}>
           {activeSchema.data ? (
             <div style={{ margin: '0 auto' }}>
               <button
-                style={{ position: 'absolute', top: 0, left: 0 }}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  color: '#333',
+                  background: '#f2f2f2',
+                  cursor: 'pointer',
+                  borderRadius: 2,
+                  border: '1px solid #767676',
+                  height: 20,
+                  width: 20,
+                }}
                 aria-label="close"
                 onClick={() =>
                   changeSchemas([{ key: 'data', value: '', schemaId: activeSchema.id }])
                 }
               >
-                x
+                <img src={closeIcon} alt="Close icon" width={10} />
               </button>
               <img style={{ maxHeight: 180 }} src={activeSchema.data} alt="Input Example" />
             </div>
           ) : (
             <label>
               <input
+                style={{ color: '#333', background: 'none' }}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                   const { files } = e.target;
                   readFiles(files, 'dataURL').then((result) => {
@@ -50,7 +66,10 @@ const ExampleInputEditor = (props: Pick<SidebarProps, 'changeSchemas' | 'activeS
           }
           style={{
             width: '100%',
-            backgroundColor: activeSchema.data ? '#fff' : '#ffa19b',
+            border: '1px solid #767676',
+            borderRadius: 2,
+            color: '#333',
+            background: activeSchema.data ? 'none' : '#ffa19b',
           }}
           value={activeSchema.data}
         />

package/src/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.tsx

@@ -7,6 +7,14 @@ const inputSetStyle: React.CSSProperties = {
   alignItems: 'center',
 };
 
+const inputStyle: React.CSSProperties = {
+  width: 70,
+  border: '1px solid #767676',
+  borderRadius: 2,
+  color: '#333',
+  background: 'none',
+};
+
 const PositionAndSizeEditor = (
   props: Pick<SidebarProps, 'pageSize' | 'changeSchemas' | 'activeSchema'>
 ) => {
@@ -24,7 +32,7 @@ const PositionAndSizeEditor = (
         <div style={inputSetStyle}>
           <label style={{ width: 17 }}>X</label>
           <input
-            style={{ width: 70 }}
+            style={inputStyle}
             type="number"
             onChange={(e) => {
               const value = Number(e.target.value);
@@ -39,7 +47,7 @@ const PositionAndSizeEditor = (
         <div style={inputSetStyle}>
           <label style={{ width: 17 }}>Y</label>
           <input
-            style={{ width: 70 }}
+            style={inputStyle}
             type="number"
             onChange={(e) => {
               const value = Number(e.target.value);
@@ -63,7 +71,7 @@ const PositionAndSizeEditor = (
         <div style={inputSetStyle}>
           <label style={{ width: 17 }}>W</label>
           <input
-            style={{ width: 70 }}
+            style={inputStyle}
             type="number"
             onChange={(e) => {
               const value = Number(e.target.value);
@@ -78,7 +86,7 @@ const PositionAndSizeEditor = (
         <div style={inputSetStyle}>
           <label style={{ width: 17 }}>H</label>
           <input
-            style={{ width: 70 }}
+            style={inputStyle}
             type="number"
             onChange={(e) => {
               const value = Number(e.target.value);

package/src/components/Designer/Sidebar/DetailView/TextPropEditor.tsx

@@ -4,9 +4,20 @@ import {
   DEFAULT_FONT_SIZE,
   DEFAULT_LINE_HEIGHT,
   DEFAULT_CHARACTER_SPACING,
+  DEFAULT_FONT_COLOR,
 } from '@pdfme/common';
 import { FontContext } from '../../../../contexts';
 import { SidebarProps } from '..';
+import closeIcon from '../../../../assets/icons/close.svg';
+
+const inputStyle = {
+  width: '90%',
+  color: '#333',
+  background: 'none',
+  borderRadius: 2,
+  border: '1px solid #767676',
+};
+const selectStyle = inputStyle;
 
 const NumberInputSet = (props: {
   width: string;
@@ -19,7 +30,7 @@ const NumberInputSet = (props: {
   return (
     <div style={{ width }}>
       <label>{label}</label>
-      <input style={{ width: '100%' }} onChange={onChange} value={value} type="number" />
+      <input style={inputStyle} onChange={onChange} value={value} type="number" />
     </div>
   );
 };
@@ -36,8 +47,20 @@ const ColorInputSet = (props: {
     <div style={{ width: '45%' }}>
       <label>{label}</label>
       <div style={{ display: 'flex' }}>
-        <input onChange={onChange} value={value} type="color" style={{ width: '100%' }} />
-        <button onClick={onClear}>X</button>
+        <input onChange={onChange} value={value || '#ffffff'} type="color" style={inputStyle} />
+        <button
+          onClick={onClear}
+          style={{
+            display: 'flex',
+            background: 'none',
+            alignItems: 'center',
+            borderRadius: 2,
+            border: '1px solid #767676',
+            cursor: 'pointer',
+          }}
+        >
+          <img src={closeIcon} width={10} alt="Close icon" />
+        </button>
       </div>
     </div>
   );
@@ -54,7 +77,7 @@ const SelectSet = (props: {
   return (
     <div style={{ width: '45%' }}>
       <label>{label}:</label>
-      <select style={{ width: '100%' }} onChange={onChange} value={value}>
+      <select style={selectStyle} onChange={onChange} value={value}>
         {options.map((o) => (
           <option key={o} value={o}>
             {o}
@@ -80,6 +103,7 @@ const TextPropEditor = (props: Pick<SidebarProps, 'changeSchemas' | 'activeSchem
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
+          marginBottom: '0.25rem',
         }}
       >
         <SelectSet
@@ -105,6 +129,7 @@ const TextPropEditor = (props: Pick<SidebarProps, 'changeSchemas' | 'activeSchem
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
+          marginBottom: '0.25rem',
         }}
       >
         <NumberInputSet
@@ -154,7 +179,9 @@ const TextPropEditor = (props: Pick<SidebarProps, 'changeSchemas' | 'activeSchem
             changeSchemas([{ key: 'fontColor', value: e.target.value, schemaId: activeSchema.id }])
           }
           onClear={() =>
-            changeSchemas([{ key: 'fontColor', value: '', schemaId: activeSchema.id }])
+            changeSchemas([
+              { key: 'fontColor', value: DEFAULT_FONT_COLOR, schemaId: activeSchema.id },
+            ])
           }
         />
 

package/src/components/Designer/Sidebar/DetailView/TypeAndKeyEditor.tsx

@@ -37,7 +37,13 @@ const TypeAndKeyEditor = (
       <div>
         <label style={{ marginBottom: 0 }}>{i18n('type')}</label>
         <select
-          style={{ width: '100%' }}
+          style={{
+            width: '100%',
+            border: '1px solid #767676',
+            borderRadius: 2,
+            color: '#333',
+            background: 'none',
+          }}
           onChange={(e) =>
             changeSchemas([{ key: 'type', value: e.target.value, schemaId: activeSchema.id }])
           }
@@ -50,7 +56,7 @@ const TypeAndKeyEditor = (
           ))}
         </select>
       </div>
-      <div style={{ width: '100%' }}>
+      <div>
         <label style={{ marginBottom: 0 }}>
           {i18n('fieldName')}
           <u style={{ fontSize: '0.7rem' }}>
@@ -65,9 +71,11 @@ const TypeAndKeyEditor = (
             changeSchemas([{ key: 'key', value: e.target.value, schemaId: activeSchema.id }])
           }
           style={{
-            borderRadius: 2,
+            width: '100%',
             border: '1px solid #767676',
-            backgroundColor: hasSameKey || blankKey ? '#ffa19b' : '#fff',
+            borderRadius: 2,
+            color: '#333',
+            background: hasSameKey || blankKey ? '#ffa19b' : 'none',
           }}
           value={activeSchema.key}
         />

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

@@ -14,25 +14,27 @@ const DetailView = (
   const i18n = useContext(I18nContext);
 
   return (
-    <aside>
+    <div>
       <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
         <p style={{ textAlign: 'center', width: '100%', fontWeight: 'bold' }}>
           {i18n('editField')}
         </p>
       </div>
       <Divider />
-      <TypeAndKeyEditor {...props} />
-      <Divider />
-      <PositionAndSizeEditor {...props} />
-      <Divider />
-      {activeSchema.type === 'text' && (
-        <>
-          <TextPropEditor {...props} />
-          <Divider />
-        </>
-      )}
-      <ExampleInputEditor {...props} />
-    </aside>
+      <div style={{ fontSize: '0.9rem' }}>
+        <TypeAndKeyEditor {...props} />
+        <Divider />
+        <PositionAndSizeEditor {...props} />
+        <Divider />
+        {activeSchema.type === 'text' && (
+          <>
+            <TextPropEditor {...props} />
+            <Divider />
+          </>
+        )}
+        <ExampleInputEditor {...props} />
+      </div>
+    </div>
   );
 };