@pdfme/ui 2.2.0 → 3.0.0-beta.2

package/src/components/Renderer.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useContext, ReactNode, useRef } from 'react';
+import { ZOOM, UIRenderProps, SchemaForUI, Schema } from '@pdfme/common';
+import { SELECTABLE_CLASSNAME } from '../constants';
+import { RendererRegistry, OptionsContext } from '../contexts';
+
+type RendererProps = Omit<
+  UIRenderProps<Schema>,
+  'value' | 'schema' | 'onChange' | 'rootElement' | 'options'
+> & {
+  schema: SchemaForUI;
+  onChange: (value: string) => void;
+  outline: string;
+  onChangeHoveringSchemaId?: (id: string | null) => void;
+};
+
+const Wrapper = ({
+  children,
+  outline,
+  onChangeHoveringSchemaId,
+  schema,
+}: RendererProps & { children: ReactNode }) => (
+  <div
+    title={schema.key}
+    onMouseEnter={() => onChangeHoveringSchemaId && onChangeHoveringSchemaId(schema.id)}
+    onMouseLeave={() => onChangeHoveringSchemaId && onChangeHoveringSchemaId(null)}
+    className={SELECTABLE_CLASSNAME}
+    id={schema.id}
+    style={{
+      position: 'absolute',
+      cursor: 'pointer',
+      height: schema.height * ZOOM,
+      width: schema.width * ZOOM,
+      top: schema.position.y * ZOOM,
+      left: schema.position.x * ZOOM,
+      transform: `rotate(${schema.rotate ?? 0}deg)`,
+      outline,
+    }}
+  >
+    {children}
+  </div>
+);
+
+const Renderer = (props: RendererProps) => {
+  const rendererRegistry = useContext(RendererRegistry);
+  const options = useContext(OptionsContext);
+
+  const { schema, mode, onChange, stopEditing, tabIndex, placeholder } = props;
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (ref.current && schema.type) {
+      const schemaType = schema.type as string;
+      const render = rendererRegistry[schemaType];
+      if (!render) {
+        console.error(`[@pdfme/ui] Renderer for type ${schema.type} not found.
+Check this document: https://pdfme.com/docs/custom-schemas`);
+        return;
+      }
+
+      ref.current.innerHTML = '';
+
+      const editable = mode === 'form' || mode === 'designer';
+
+      render({
+        value: schema.data,
+        schema,
+        rootElement: ref.current,
+        mode,
+        onChange: editable ? onChange : undefined,
+        stopEditing: editable ? stopEditing : undefined,
+        tabIndex,
+        placeholder,
+        options,
+      });
+    }
+    return () => {
+      if (ref.current) {
+        ref.current.innerHTML = '';
+      }
+    };
+  }, [JSON.stringify(schema), mode, options]);
+
+  return (
+    <Wrapper {...props}>
+      <div style={{ height: '100%', width: '100%' }} ref={ref} />
+    </Wrapper>
+  );
+};
+export default Renderer;

package/src/components/Root.tsx

@@ -32,7 +32,11 @@ const Root = ({ size, scale, children }: Props, ref: Ref<HTMLDivElement>) => {
   return (
     <div
       ref={ref}
-      style={{ position: 'relative', background: 'rgb(74, 74, 74)', overflow: 'overlay', ...size }}
+      style={{
+        position: 'relative',
+        background: 'rgb(74, 74, 74)',
+        ...size,
+      }}
     >
       <div style={{ margin: '0 auto', ...size }}>{scale === 0 ? <Spinner /> : children}</div>
     </div>

package/src/constants.ts

@@ -1,11 +1,11 @@
 export const DEFAULT_LANG = 'en' as const;
 
-export const DESTROYED_ERR_MSG = 'this instance is already destroyed';
-
-export const ZOOM = 3.7795275591;
+export const DESTROYED_ERR_MSG = '[@pdfme/ui] this instance is already destroyed';
 
 export const SELECTABLE_CLASSNAME = 'selectable';
 
 export const RULER_HEIGHT = 30;
 
-export const SIDEBAR_WIDTH = 300;
+export const PAGE_GAP = 10;
+
+export const SIDEBAR_WIDTH = 350;

package/src/contexts.ts

@@ -1,8 +1,15 @@
 import { createContext } from 'react';
 import { curriedI18n } from './i18n';
 import { DEFAULT_LANG } from './constants';
+import builtInRenderer from './builtInRenderer';
+import builtInPropPanel from './builtInPropPanel';
 import { getDefaultFont } from '@pdfme/common';
 
 export const I18nContext = createContext(curriedI18n(DEFAULT_LANG));
 
 export const FontContext = createContext(getDefaultFont());
+
+export const RendererRegistry = createContext(builtInRenderer);
+export const PropPanelRegistry = createContext(builtInPropPanel);
+
+export const OptionsContext = createContext({});

package/src/helper.ts

@@ -5,20 +5,16 @@ import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist/legacy/build/pdf.js
 GlobalWorkerOptions.workerSrc = PDFJSWorker;
 import hotkeys from 'hotkeys-js';
 import {
+  ZOOM,
   getB64BasePdf,
   b64toUint8Array,
+  pt2mm,
   Template,
   SchemaForUI,
   Schema,
-  SchemaType,
-  BarCodeType,
   Size,
-  DEFAULT_ALIGNMENT,
-  DEFAULT_FONT_SIZE,
-  DEFAULT_CHARACTER_SPACING,
-  DEFAULT_LINE_HEIGHT,
 } from '@pdfme/common';
-import { ZOOM, RULER_HEIGHT } from './constants';
+import { RULER_HEIGHT } from './constants';
 
 export const uuid = () =>
   'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
@@ -196,54 +192,6 @@ export const destroyShortCuts = () => {
   hotkeys.unbind(keys.join());
 };
 
-const readFile = (file: File | null, type: 'text' | 'dataURL' | 'arrayBuffer') => {
-  return new Promise<string | ArrayBuffer>((r) => {
-    const fileReader = new FileReader();
-    fileReader.addEventListener('load', (e) => {
-      if (e && e.target && e.target.result && file !== null) {
-        r(e.target.result);
-      }
-    });
-    if (file !== null) {
-      if (type === 'text') {
-        fileReader.readAsText(file);
-      } else if (type === 'dataURL') {
-        fileReader.readAsDataURL(file);
-      } else if (type === 'arrayBuffer') {
-        fileReader.readAsArrayBuffer(file);
-      }
-    }
-  });
-};
-
-export const readFiles = (files: FileList | null, type: 'text' | 'dataURL' | 'arrayBuffer') => {
-  return new Promise<string | ArrayBuffer>((r) => {
-    const fileReader = new FileReader();
-    fileReader.addEventListener('load', (e) => {
-      if (e && e.target && e.target.result && files !== null) {
-        r(e.target.result);
-      }
-    });
-    if (files !== null && files[0]) {
-      readFile(files[0], type).then((data) => r(data));
-    }
-  });
-};
-
-const pt2mm = (pt: number) => {
-  // https://www.ddc.co.jp/words/archives/20090701114500.html
-  const mmRatio = 0.3527;
-
-  return parseFloat(String(pt)) * mmRatio;
-};
-
-export const px2mm = (px: number) => {
-  // http://www.unitconversion.org/typography/millimeters-to-pixels-y-conversion.html
-  const mmRatio = 0.264583333;
-
-  return parseFloat(String(px)) * mmRatio;
-};
-
 export const getPdfPageSizes = async (pdfBlob: Blob) => {
   const url = URL.createObjectURL(pdfBlob);
   const pdfDoc = await getDocument({ url }).promise;
@@ -306,22 +254,22 @@ const sortSchemasList = (template: Template, pageNum: number): SchemaForUI[][] =
     acc.push(
       template.schemas[i]
         ? Object.entries(template.schemas[i])
-          .sort((a, b) => {
-            const aIndex = (template.columns ?? []).findIndex((c) => c === a[0]);
-            const bIndex = (template.columns ?? []).findIndex((c) => c === b[0]);
-
-            return aIndex > bIndex ? 1 : -1;
-          })
-          .map((e) => {
-            const [key, value] = e;
-            const data = template.sampledata?.[0]?.[key] ?? '';
-
-            return Object.assign(value, {
-              key,
-              data,
-              id: uuid(),
-            });
-          })
+            .sort((a, b) => {
+              const aIndex = (template.columns ?? []).findIndex((c) => c === a[0]);
+              const bIndex = (template.columns ?? []).findIndex((c) => c === b[0]);
+
+              return aIndex > bIndex ? 1 : -1;
+            })
+            .map((e) => {
+              const [key, value] = e;
+              const data = template.sampledata?.[0]?.[key] ?? '';
+
+              return Object.assign(value, {
+                key,
+                data,
+                id: uuid(),
+              });
+            })
         : []
     );
 
@@ -397,57 +345,6 @@ export const fmtTemplate = (template: Template, schemasList: SchemaForUI[][]): T
   return schemaAddedTemplate;
 };
 
-export const getInitialSchema = (): SchemaForUI => ({
-  id: uuid(),
-  key: '',
-  data: '',
-  type: 'text',
-  position: { x: 0, y: 0 },
-  width: 35,
-  height: 7,
-  alignment: DEFAULT_ALIGNMENT,
-  fontSize: DEFAULT_FONT_SIZE,
-  characterSpacing: DEFAULT_CHARACTER_SPACING,
-  lineHeight: DEFAULT_LINE_HEIGHT,
-});
-
-export const getSampleByType = (type: SchemaType) => {
-  const defaultValue: { [K in SchemaType]: string } = {
-    text: 'text',
-    image:
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAALuAQMAAADL0wGJAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURbzAw+rv8fKruy0AAAPoSURBVHja7dwxbtwwEEBRCkKwRQodYftcYk+ROkcJz5NTsEuZK/AIKlIQAUEnke0VqQ0pA5zxWvFnZcD2s0CNuENxPOZBc0QDDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PD/+P8bkxvnTzzjTG0M2b5rh08rHNT518aPOnTt63+aGTd23edPJ2h//ax+/oO6Gzx6c78+cuPu7x01vmwx5/6uLnO/PjO+b/rGifvtWH3VnT9vmh/e3eqx/bc9d79af2YwEPDw8P/6r8r1GVt5VcUoZPtXxGhp9rGYEM72vbEBne1hJ5Gb6ayIvwqZppi/CxmgqL8KGaTIrwc3WDfATeV/ffIryr7r+PwNvq/vsIfH17D5/qbw/gb/mLKp/OqnycFPj14yqcJPm4vfp5VJ0cP6jyzqjy9rr2q/Dr4qzBp3V5E1wxp/V3rl8LXn32qF6fAY31Psv2NXi/5lQaH+Vuzak0eLsmPRppVPa3FPiU3QiFFDZmD4FCAh6yxV+Bn7O9isLmx2d/TGHr5rI7obDxtFkcKWyb89M2+U1/sX7Kv7Io8gaxFy5l2D/faRk++3x6PgsalV52+fwUW4j/+eGhDPuneyH/otHmp9jyfHHMLM6n4phZnI/FObA4H4qDWnF+Lo46xXlflG+I864o3xDnbVG+Ic6X9RXSfCrrK6T5WBZASPOhrFCQ5ufyjF+a92XdkjTvyrolad6WdUvS/KawSI7/sQn7JfDl+O+bsF8CX44fN2FvHnNnIT4Nm7BfAl+ON5uwXwJfjA/LCuk2BXvCvN0U7InxflmAtxV1gvx0U2N3luPtdZOlwj/FoR5vbuq85Pi48F6LD0scOk3+sq1cleP9ohlNfkpq/N9pGaMuH7T4ZVqGWYt/nBavyxstftblfaVIWJU/y72yODCfzJH5oMvPh+adLm+PzCdzZD5U/61ClT9Lnvyo8e7QvFHlE3ydj0zOu5ucickhcpgcJofJedUVk8j5b/nGgIeHh4d/I3x/RwLlhgfNH3DavSwGXf7YjT76uqCEQ/P37p9z7uKVmwspd17S7hul3PXK6fbsmnvWhO6GZlMnn3ri8gXN5GzHnX0B35ydj91814CHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHl+d/A9cKjmiL040TAAAAAElFTkSuQmCC',
-    qrcode: 'https://pdfme.com/',
-    japanpost: '6540123789-A-K-Z',
-    ean13: '2112345678900',
-    ean8: '02345673',
-    code39: 'THIS IS CODE 39',
-    code128: 'This is Code 128!',
-    nw7: 'A0123456789B',
-    itf14: '04601234567893',
-    upca: '416000336108',
-    upce: '00123457',
-    gs1datamatrix: '(01)03453120000011(17)191125(10)ABCD1234',
-  };
-  return defaultValue[type];
-};
-
-export const getKeepRatioHeightByWidth = (type: BarCodeType, width: number) => {
-  const ratio: { [K in BarCodeType]: number } = {
-    qrcode: 1,
-    japanpost: 0.09,
-    ean13: 0.4,
-    ean8: 0.5,
-    code39: 0.5,
-    code128: 0.5,
-    nw7: 0.5,
-    itf14: 0.3,
-    upca: 0.4,
-    upce: 0.5,
-    gs1datamatrix: 1,
-  };
-  return width * ratio[type];
-};
-
 export const getUniqSchemaKey = (arg: {
   copiedSchemaKey: string;
   schema: SchemaForUI[];

package/src/hooks.ts

@@ -1,7 +1,7 @@
 import { RefObject, useRef, useState, useCallback, useEffect } from 'react';
-import { Template, Size, getB64BasePdf } from '@pdfme/common';
+import { ZOOM, Template, Size, getB64BasePdf } from '@pdfme/common';
 import { pdf2Pngs, getPdfPageSizes, b64toBlob } from './helper';
-import { ZOOM, RULER_HEIGHT } from './constants';
+import { RULER_HEIGHT } from './constants';
 
 export const usePrevious = <T>(value: T) => {
   const ref = useRef<T | null>(null);
@@ -23,7 +23,7 @@ export const useUIPreProcessor = ({ template, size, zoomLevel }: UIPreProcessorP
   const [scale, setScale] = useState(0);
   const [error, setError] = useState<Error | null>(null);
 
-  const init = async (prop: { template: Template; size: Size; }) => {
+  const init = async (prop: { template: Template; size: Size }) => {
     const { template, size } = prop;
     const _basePdf = await getB64BasePdf(template.basePdf);
     const pdfBlob = b64toBlob(_basePdf);
@@ -44,8 +44,9 @@ export const useUIPreProcessor = ({ template, size, zoomLevel }: UIPreProcessorP
       .then(({ pageSizes, scale, backgrounds }) => {
         setPageSizes(pageSizes), setScale(scale), setBackgrounds(backgrounds);
       })
-      .catch((e: Error) => {
-        setError(e);
+      .catch((err: Error) => {
+        setError(err);
+        console.error(`[@pdfme/ui] ${err}`);
       });
   }, [template, size]);
 

package/src/i18n.ts

@@ -8,13 +8,12 @@ const dictEn = {
   fieldName: 'Name',
   require: 'Required',
   uniq: 'Unique',
-  inputExample: 'Input Example',
   edit: 'Edit',
   plsInputName: 'Please input name',
   fieldMustUniq: 'Name of field is not unique',
   notUniq: '(Not unique name)',
   noKeyName: 'No name',
-  fieldsList: 'List of Fields',
+  fieldsList: 'Field List',
   addNewField: 'Add new field',
   editField: 'Edit Field',
   type: 'Type',
@@ -23,6 +22,9 @@ const dictEn = {
     'Cannot commit the change because the number of items has been changed.',
   commitBulkUpdateFieldName: 'Commit Changes',
   bulkUpdateFieldName: 'Bulk update field names',
+  barColor: 'Bar Color',
+  textColor: 'Text Color',
+  bgColor: 'Background Color',
 };
 
 const dictJa: { [key in keyof DictEn]: string } = {
@@ -31,7 +33,6 @@ const dictJa: { [key in keyof DictEn]: string } = {
   fieldName: '項目名',
   require: '必須',
   uniq: '他の項目名と同一不可',
-  inputExample: '記入例',
   edit: '編集する',
   plsInputName: '項目名を入力してください',
   fieldMustUniq: '他の入力項目名と被っています',
@@ -45,6 +46,9 @@ const dictJa: { [key in keyof DictEn]: string } = {
   errorBulkUpdateFieldName: '項目数が変更されているため変更をコミットできません。',
   commitBulkUpdateFieldName: '変更を反映',
   bulkUpdateFieldName: '項目名を一括変更',
+  barColor: 'バーの色',
+  textColor: 'テキストの色',
+  bgColor: '背景色',
 };
 
 const dictAr: { [key in keyof DictEn]: string } = {
@@ -53,7 +57,6 @@ const dictAr: { [key in keyof DictEn]: string } = {
   fieldName: 'اسم الحقل',
   require: 'مطلوب',
   uniq: 'يجب أن يكون فريداً',
-  inputExample: 'مثال',
   edit: 'تعديل',
   plsInputName: 'الرجاء إدخال الاسم',
   fieldMustUniq: 'يجب أن يكون الحقل فريداً',
@@ -67,6 +70,9 @@ const dictAr: { [key in keyof DictEn]: string } = {
   errorBulkUpdateFieldName: 'لا يمكن تنفيذ التغيير لأنه تم تغيير عدد العناصر.',
   commitBulkUpdateFieldName: 'تنفيذ التغييرات',
   bulkUpdateFieldName: 'تغيير الأسماء',
+  barColor: 'لون الشريط',
+  textColor: 'لون الخط',
+  bgColor: 'لون الخلفية',
 };
 
 const dictTh: { [key in keyof DictEn]: string } = {
@@ -75,7 +81,6 @@ const dictTh: { [key in keyof DictEn]: string } = {
   fieldName: 'ชื่อฟิลด์',
   require: 'จำเป็น',
   uniq: 'ต้องไม่ซ้ำกัน',
-  inputExample: 'ตัวอย่าง',
   edit: 'แก้ไข',
   plsInputName: 'กรุณาใส่ชื่อ',
   fieldMustUniq: 'ชื่อฟิลด์ต้องไม่ซ้ำกัน',
@@ -89,15 +94,42 @@ const dictTh: { [key in keyof DictEn]: string } = {
   errorBulkUpdateFieldName: 'ไม่สามารถยืนยันการแก้ไขได้เนื่องจากจำนวนรายการมีการเปลี่ยนแปลง',
   commitBulkUpdateFieldName: 'ยืนยันการแก้ไข',
   bulkUpdateFieldName: 'แก้ไขชื่อฟิลด์เป็นชุด',
+  barColor: 'สีบาร์',
+  textColor: 'สีข้อความ',
+  bgColor: 'สีพื้นหลัง',
 };
 
-const dictPl: {[key in keyof DictEn]: string} = {
+const dictIt: { [key in keyof DictEn]: string } = {
+  cancel: 'Annulla',
+  field: 'Campo',
+  fieldName: 'Nome',
+  require: 'Richiesto',
+  uniq: 'Univoco',
+  edit: 'Modifica',
+  plsInputName: 'Inserisci il nome per favore',
+  fieldMustUniq: 'Il nome del campo non è univoco',
+  notUniq: '(Nome non univoco)',
+  noKeyName: 'Nessun nome',
+  fieldsList: 'Lista campi',
+  addNewField: 'Aggiungi un campo',
+  editField: 'Modifica campo',
+  type: 'Tipo',
+  errorOccurred: 'Riscontrato errore',
+  errorBulkUpdateFieldName:
+    'Non è possibile salvare le modifiche perché il numero di elementi è cambiato.',
+  commitBulkUpdateFieldName: 'Salva cambiamenti',
+  bulkUpdateFieldName: 'Modifica nomi campi in blocco',
+  barColor: 'Colore barra',
+  textColor: 'Colore testo',
+  bgColor: 'Colore sfondo',
+};
+
+const dictPl: { [key in keyof DictEn]: string } = {
   cancel: 'Anuluj',
   field: 'pole',
   fieldName: 'Klucz pola',
   require: 'wymagany',
   uniq: 'unikalny',
-  inputExample: 'Przykład',
   edit: 'Edytuj',
   plsInputName: 'Wymagane wprowadzenie klucza pola',
   fieldMustUniq: 'Klucz pola nie jest unikalny',
@@ -108,11 +140,13 @@ const dictPl: {[key in keyof DictEn]: string} = {
   editField: 'Edytuj pole',
   type: 'Typ pola',
   errorOccurred: 'Wystąpił błąd',
-  errorBulkUpdateFieldName:
-    'Nie można wprowadzić zmian ponieważ liczba elementów uległa zmianie.',
+  errorBulkUpdateFieldName: 'Nie można wprowadzić zmian ponieważ liczba elementów uległa zmianie.',
   commitBulkUpdateFieldName: 'Zaakceptuj zmiany',
-  bulkUpdateFieldName: 'Masowo aktualizuj klucze pól', 
-}
+  bulkUpdateFieldName: 'Masowo aktualizuj klucze pól',
+  barColor: 'Kolor paska',
+  textColor: 'Kolor tekstu',
+  bgColor: 'Kolor tła',
+};
 
 const i18n = (lang: Lang, key: keyof DictEn) => {
   switch (lang) {
@@ -127,6 +161,9 @@ const i18n = (lang: Lang, key: keyof DictEn) => {
     case 'ja':
       return dictJa[key];
 
+    case 'it':
+      return dictIt[key];
+
     default:
       return dictEn[key];
   }

package/src/index.ts

@@ -2,79 +2,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/src/types.ts

@@ -0,0 +1,36 @@
+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/tsconfig.json

@@ -17,7 +17,8 @@
     "sourceMap": true,
     "baseUrl": "..", 
     "paths": {
-      "@pdfme/common": ["packages/common/src"] 
+      "@pdfme/common": ["packages/common/src"], 
+      "@pdfme/schemas": ["packages/schemas/src"] 
     }
   },
   "baseUrl": ".",

package/webpack.config.js

@@ -30,6 +30,11 @@ const config = {
     globalObject: 'this',
     library: { type: 'umd' },
   },
-  module: { rules: [{ test: /\.tsx?$/, use: 'ts-loader' }] },
+  module: {
+    rules: [
+      { test: /\.tsx?$/, use: 'ts-loader' },
+      { test: /\.css$/i, use: ['style-loader', 'css-loader'] }
+    ]
+  },
 };
 module.exports = config;

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

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

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

@@ -1,31 +0,0 @@
-import React from 'react';
-import { OnDrag, OnResize, OnDragEnd, OnDragGroupEnd, OnResizeEnd, OnResizeGroupEnd, OnClick } from 'react-moveable';
-declare type Props = {
-    target: HTMLElement[];
-    bounds: {
-        left: number;
-        top: number;
-        bottom: number;
-        right: number;
-    };
-    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);
-    onClick: (e: OnClick) => void;
-};
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
-export default _default;

package/dist/types/components/Designer/Sidebar/DetailView/ExampleInputEditor.d.ts

@@ -1,6 +0,0 @@
-import { SchemaForUI } from '@pdfme/common';
-import { SidebarProps } from '..';
-declare const ExampleInputEditor: (props: Pick<SidebarProps, 'changeSchemas'> & {
-    activeSchema: SchemaForUI;
-}) => JSX.Element;
-export default ExampleInputEditor;

package/dist/types/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.d.ts

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