@pdfme/ui 1.0.17 → 1.1.0

package/src/components/Schemas/ImageSchema.tsx

@@ -1,9 +1,9 @@
-import React, { useState, forwardRef, ChangeEvent, useContext, Ref } from 'react';
+import React, { useState, forwardRef, ChangeEvent, Ref } from 'react';
 import { ImageSchema } from '@pdfme/common';
-import { SchemaUIProps } from './SchemaUI';
-import { readFiles } from '../../helper';
-import { ZOOM } from '../../constants';
-import closeIcon from '../../assets/icons/close.svg';
+import { SchemaUIProps } from './SchemaUI.js';
+import { readFiles } from '../../helper.js';
+import { ZOOM } from '../../constants.js';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 
 type Props = SchemaUIProps & { schema: ImageSchema };
 
@@ -55,7 +55,7 @@ const ImageSchemaUI = (props: Props, ref: Ref<HTMLInputElement>) => {
               onChange('');
             }}
           >
-            <img src={closeIcon} alt="Close icon" width={10} />
+            <XMarkIcon width={10} height={10} />
           </button>
         )}
       </div>

package/src/components/Schemas/SchemaUI.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef, RefObject, Ref, ReactNode } from 'react';
 import { SchemaForUI, isTextSchema, isImageSchema, isBarcodeSchema } from '@pdfme/common';
-import { ZOOM, SELECTABLE_CLASSNAME } from '../../constants';
-import TextSchema from './TextSchema';
-import ImageSchema from './ImageSchema';
-import BarcodeSchema from './BarcodeSchema';
+import { ZOOM, SELECTABLE_CLASSNAME } from '../../constants.js';
+import TextSchema from './TextSchema.js';
+import ImageSchema from './ImageSchema.js';
+import BarcodeSchema from './BarcodeSchema.js';
 
 export interface SchemaUIProps {
   schema: SchemaForUI;

package/src/components/Schemas/TextSchema.tsx

@@ -7,8 +7,8 @@ import {
   DEFAULT_FONT_COLOR,
   TextSchema,
 } from '@pdfme/common';
-import { SchemaUIProps } from './SchemaUI';
-import { ZOOM } from '../../constants';
+import { SchemaUIProps } from './SchemaUI.js';
+import { ZOOM } from '../../constants.js';
 
 type Props = SchemaUIProps & { schema: TextSchema };
 
@@ -20,7 +20,7 @@ const TextSchemaUI = (
     padding: 0,
     resize: 'none',
     position: 'absolute',
-    fontFamily: schema.fontName ?? 'inherit',
+    fontFamily: schema.fontName ? `'${schema.fontName}'` : 'inherit',
     height: schema.height * ZOOM,
     // Increase the width by 1 point. (0.75 pixels)
     width: (schema.width + (schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING) * 0.75) * ZOOM,

package/src/components/UnitPager.tsx

@@ -1,9 +1,10 @@
-import React, { useContext } from 'react';
-import left from '../assets/icons/left.svg';
-import right from '../assets/icons/right.svg';
-import doubleLeft from '../assets/icons/double-left.svg';
-import doubleRight from '../assets/icons/double-right.svg';
-import { I18nContext } from '../contexts';
+import React from 'react';
+import {
+  ChevronLeftIcon,
+  ChevronDoubleLeftIcon,
+  ChevronRightIcon,
+  ChevronDoubleRightIcon,
+} from '@heroicons/react/24/outline';
 import { Size } from '@pdfme/common';
 
 const buttonHeight = 38;
@@ -38,8 +39,6 @@ type Props = {
 };
 
 const UnitPager = ({ size, unitCursor, unitNum, setUnitCursor }: Props) => {
-  const i18n = useContext(I18nContext);
-
   if (unitNum <= 1) return <></>;
 
   return (
@@ -62,14 +61,14 @@ const UnitPager = ({ size, unitCursor, unitNum, setUnitCursor }: Props) => {
               disabled={unitCursor <= 0}
               onClick={() => setUnitCursor(0)}
             >
-              <img src={doubleLeft} alt={i18n('goToFirst')} style={{ width: 20 }} />
+              <ChevronDoubleLeftIcon width={20} height={20} color={'#fff'} />
             </button>
             <button
               style={{ paddingLeft: '0.5rem', ...btnStyle }}
               disabled={unitCursor <= 0}
               onClick={() => setUnitCursor(unitCursor - 1)}
             >
-              <img src={left} alt={i18n('goToPrevious')} style={{ width: 20 }} />
+              <ChevronLeftIcon width={20} height={20} color={'#fff'} />
             </button>
             <strong style={{ color: 'white', fontSize: '0.9rem' }}>
               {unitCursor + 1}/{unitNum}
@@ -88,14 +87,14 @@ const UnitPager = ({ size, unitCursor, unitNum, setUnitCursor }: Props) => {
               disabled={unitCursor + 1 >= unitNum}
               onClick={() => setUnitCursor(unitCursor + 1)}
             >
-              <img src={right} alt={i18n('goToNext')} style={{ width: 20 }} />
+              <ChevronRightIcon width={20} height={20} color={'#fff'} />
             </button>
             <button
               style={{ paddingRight: '0.5rem', ...btnStyle }}
               disabled={unitCursor + 1 >= unitNum}
               onClick={() => setUnitCursor(unitNum - 1)}
             >
-              <img src={doubleRight} alt={i18n('goToFirst')} style={{ width: 20 }} />
+              <ChevronDoubleRightIcon width={20} height={20} color={'#fff'} />
             </button>
           </div>
         )}

package/src/contexts.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
-import { curriedI18n } from './i18n';
-import { DEFAULT_LANG } from './constants';
+import { curriedI18n } from './i18n.js';
+import { DEFAULT_LANG } from './constants.js';
 import { getDefaultFont } from '@pdfme/common';
 
 export const I18nContext = createContext(curriedI18n(DEFAULT_LANG));

package/src/helper.ts

@@ -1,5 +1,5 @@
 // @ts-ignore
-import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.entry';
+import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.entry.js';
 import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist/legacy/build/pdf.js';
 GlobalWorkerOptions.workerSrc = PDFJSWorker;
 import hotkeys from 'hotkeys-js';
@@ -15,7 +15,7 @@ import {
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_LINE_HEIGHT,
 } from '@pdfme/common';
-import { ZOOM, RULER_HEIGHT } from './constants';
+import { ZOOM, RULER_HEIGHT } from './constants.js';
 
 export const uuid = () =>
   'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {

package/src/hooks.ts

@@ -1,7 +1,7 @@
 import { RefObject, useRef, useState, useCallback, useEffect } from 'react';
 import { Template, Size, getB64BasePdf } from '@pdfme/common';
-import { pdf2Pngs, getPdfPageSizes, b64toBlob } from './helper';
-import { ZOOM, RULER_HEIGHT } from './constants';
+import { pdf2Pngs, getPdfPageSizes, b64toBlob } from './helper.js';
+import { ZOOM, RULER_HEIGHT } from './constants.js';
 
 export const usePrevious = <T>(value: T) => {
   const ref = useRef<T | null>(null);

package/src/i18n.ts

@@ -1,5 +1,5 @@
 import { Lang } from '@pdfme/common';
-import { DEFAULT_LANG } from './constants';
+import { DEFAULT_LANG } from './constants.js';
 
 type DictEn = typeof dictEn;
 
@@ -11,9 +11,7 @@ const dictEn = {
   uniq: 'Unique',
   inputExample: 'Input Example',
   edit: 'Edit',
-  plsSelect: 'Please select',
   plsInputName: 'Please input name',
-  plsAddNewField: 'Please add new field',
   fieldMustUniq: 'Name of field is not unique',
   notUniq: '(Not unique name)',
   noKeyName: 'No name',
@@ -21,13 +19,6 @@ const dictEn = {
   addNewField: 'Add new field',
   editField: 'Edit Field',
   type: 'Type',
-  goToFirst: 'Go to first',
-  goToPrevious: 'Back',
-  goToNext: 'Next',
-  goToEnd: 'Go to end',
-  select: 'Select',
-  zoomIn: 'Zoom in',
-  zoomOut: 'Zoom out',
   errorOccurred: 'An error occurred',
   errorBulkUpdateFieldName:
     'Cannot commit the change because the number of items has been changed.',
@@ -43,9 +34,7 @@ const dictJa: { [key in keyof DictEn]: string } = {
   uniq: '他の項目名と同一不可',
   inputExample: '記入例',
   edit: '編集する',
-  plsSelect: '選択してください',
   plsInputName: '項目名を入力してください',
-  plsAddNewField: '入力項目を追加してください',
   fieldMustUniq: '他の入力項目名と被っています',
   notUniq: '(他の項目名と重複しています)',
   noKeyName: '項目名なし',
@@ -53,13 +42,6 @@ const dictJa: { [key in keyof DictEn]: string } = {
   addNewField: '入力項目を追加',
   editField: '入力項目を編集',
   type: 'タイプ',
-  goToFirst: '最初に戻る',
-  goToPrevious: '1つ戻る',
-  goToNext: '1つ進む',
-  goToEnd: '最後に進む',
-  select: '選択',
-  zoomIn: '拡大',
-  zoomOut: '縮小',
   errorOccurred: 'エラーが発生しました',
   errorBulkUpdateFieldName: '項目数が変更されているため変更をコミットできません。',
   commitBulkUpdateFieldName: '変更を反映',

package/src/index.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 };
 

package/tsconfig.cjs.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base",
+  "compilerOptions": {
+    "jsx": "react",
+    "module": "commonjs",
+    "outDir": "./dist/cjs",
+    "declaration": true,
+    "declarationDir": "dist/types"
+  }
+}

package/tsconfig.esm.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base",
+  "compilerOptions": {
+    "jsx": "react",
+    "module": "ESNext",
+    "outDir": "./dist/esm",
+    "declaration": true,
+    "declarationDir": "dist/types"
+  }
+}