@pdfme/schemas 3.0.1 → 3.1.0-dev.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/schemas",
-  "version": "3.0.1",
+  "version": "3.1.0-dev.1",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -21,13 +21,15 @@
   "bugs": {
     "url": "https://github.com/pdfme/pdfme/issues"
   },
+  "type": "module",
   "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"
+      "require": "./dist/cjs/src/index.js",
+      "types": "./dist/types/src/index.d.ts"
     }
   },
   "engines": {
@@ -35,7 +37,7 @@
   },
   "scripts": {
     "develop": "tsc -p tsconfig.esm.json -w",
-    "build": "npm run build:cjs && npm run build:esm",
+    "build": "npm-run-all --parallel build:cjs build:esm",
     "build:cjs": "tsc -p tsconfig.cjs.json",
     "build:esm": "tsc -p tsconfig.esm.json",
     "clean": "rimraf dist",

package/src/barcodes/helper.ts

@@ -1,7 +1,7 @@
 import { b64toUint8Array } from '@pdfme/common';
 import bwipjs, { RenderOptions } from 'bwip-js';
 import { Buffer } from 'buffer';
-import { BARCODE_TYPES } from './constants';
+import { BARCODE_TYPES } from './constants.js';
 import { BarcodeTypes } from './types';
 
 // GTIN-13, GTIN-8, GTIN-12, GTIN-14

package/src/barcodes/index.ts

@@ -1,8 +1,8 @@
-import { pdfRender } from './pdfRender';
-import { getPropPanelByBarcodeType } from './propPanel';
-import { uiRender } from './uiRender';
+import { pdfRender } from './pdfRender.js';
+import { getPropPanelByBarcodeType } from './propPanel.js';
+import { uiRender } from './uiRender.js';
 import type { BarcodeSchema, BarcodeTypes } from './types';
-import { BARCODE_TYPES } from './constants';
+import { BARCODE_TYPES } from './constants.js';
 import { Plugin } from '@pdfme/common';
 
 const schemas = BARCODE_TYPES.reduce(

package/src/barcodes/pdfRender.ts

@@ -1,13 +1,17 @@
 import { PDFRenderProps } from '@pdfme/common';
-import { getCacheKey, convertForPdfLayoutProps } from '../renderUtils';
+import { convertForPdfLayoutProps } from '../renderUtils.js';
 import type { BarcodeSchema } from './types';
-import { createBarCode, validateBarcodeInput } from './helper';
+import { createBarCode, validateBarcodeInput } from './helper.js';
+
+const getBarcodeCacheKey = (schema: BarcodeSchema, value: string) => {
+  return `${schema.type}${schema.backgroundColor}${schema.barColor}${schema.textColor}${value}`;
+};
 
 export const pdfRender = async (arg: PDFRenderProps<BarcodeSchema>) => {
   const { value, schema, pdfDoc, page, _cache } = arg;
   if (!validateBarcodeInput(schema.type, value)) return;
 
-  const inputBarcodeCacheKey = getCacheKey(schema, value);
+  const inputBarcodeCacheKey = getBarcodeCacheKey(schema, value);
   let image = _cache.get(inputBarcodeCacheKey);
   if (!image) {
     const imageBuf = await createBarCode(

package/src/barcodes/propPanel.ts

@@ -1,6 +1,6 @@
 import type { PropPanel } from '@pdfme/common';
 import type { BarcodeSchema } from './types';
-import { DEFAULT_BARCODE_COLOR, DEFAULT_BARCODE_BG_COLOR } from './constants';
+import { DEFAULT_BARCODE_COLOR, DEFAULT_BARCODE_BG_COLOR } from './constants.js';
 
 const defaultColors = {
   backgroundColor: DEFAULT_BARCODE_BG_COLOR,
@@ -140,16 +140,20 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
 export const getPropPanelByBarcodeType = (barcodeType: string): PropPanel<BarcodeSchema> => {
   const barcodeHasText = barcodeType !== 'qrcode' && barcodeType !== 'gs1datamatrix';
 
-  const schema = {
-    barColor: { title: 'Bar Color', type: 'string', widget: 'color' },
-    backgroundColor: { title: 'Background', type: 'string', widget: 'color' },
-    ...(barcodeHasText
-      ? { textColor: { title: 'Text Color', type: 'string', widget: 'color' } }
-      : {}),
-  };
   const defaults = barcodeDefaults.find(({ defaultSchema }) => defaultSchema.type === barcodeType);
 
   if (!defaults) throw new Error(`[@pdfme/schemas] No default for barcode type ${barcodeType}`);
 
-  return { schema, ...defaults };
+  return {
+    schema: ({ i18n }) => {
+      return {
+        barColor: { title: i18n('schemas.barcodes.barColor'), type: 'string', widget: 'color' },
+        backgroundColor: { title: i18n('schemas.bgColor'), type: 'string', widget: 'color' },
+        ...(barcodeHasText
+          ? { textColor: { title: i18n('schemas.textColor'), type: 'string', widget: 'color' } }
+          : {}),
+      };
+    },
+    ...defaults,
+  };
 };

package/src/barcodes/types.ts

@@ -1,5 +1,5 @@
 import { Schema } from '@pdfme/common';
-import { BARCODE_TYPES } from './constants';
+import { BARCODE_TYPES } from './constants.js';
 
 export interface BarcodeSchema extends Schema {
   type: (typeof BARCODE_TYPES)[number];

package/src/barcodes/uiRender.ts

@@ -1,7 +1,8 @@
 import type * as CSS from 'csstype';
 import { UIRenderProps } from '@pdfme/common';
 import type { BarcodeSchema } from './types';
-import { validateBarcodeInput, createBarCode } from './helper';
+import { validateBarcodeInput, createBarCode } from './helper.js';
+import { addAlphaToHex } from '../renderUtils.js';
 
 const fullSize = { width: '100%', height: '100%' };
 
@@ -60,7 +61,8 @@ const createBarcodeImageElm = async (schema: BarcodeSchema, value: string) => {
 };
 
 export const uiRender = async (arg: UIRenderProps<BarcodeSchema>) => {
-  const { value, rootElement, mode, onChange, stopEditing, tabIndex, placeholder, schema } = arg;
+  const { value, rootElement, mode, onChange, stopEditing, tabIndex, placeholder, schema, theme } =
+    arg;
 
   const container = document.createElement('div');
   const containerStyle: CSS.Properties = {
@@ -81,7 +83,7 @@ export const uiRender = async (arg: UIRenderProps<BarcodeSchema>) => {
       textAlign: 'center',
       fontSize: '1rem',
       color: '#000',
-      backgroundColor: editable || value ? 'rgb(242 244 255 / 75%)' : 'none',
+      backgroundColor: editable || value ? addAlphaToHex(theme.colorPrimaryBg, 30) : 'none',
       border: 'none',
       display: 'flex',
       alignItems: 'center',

package/src/image/index.ts

@@ -1,7 +1,7 @@
 import type { Plugin } from '@pdfme/common';
-import { pdfRender } from './pdfRender';
-import { propPanel } from './propPanel';
-import { uiRender } from './uiRender';
+import { pdfRender } from './pdfRender.js';
+import { propPanel } from './propPanel.js';
+import { uiRender } from './uiRender.js';
 import type { ImageSchema } from './types';
 
 const schema: Plugin<ImageSchema> = { pdf: pdfRender, ui: uiRender, propPanel };

package/src/image/pdfRender.ts

@@ -1,6 +1,8 @@
-import type { PDFRenderProps } from '@pdfme/common';
+import type { PDFRenderProps, Schema } from '@pdfme/common';
 import type { ImageSchema } from './types';
-import { getCacheKey, convertForPdfLayoutProps } from '../renderUtils';
+import { convertForPdfLayoutProps } from '../renderUtils.js';
+
+const getCacheKey = (schema: Schema, input: string) => `${schema.type}${input}`;
 
 export const pdfRender = async (arg: PDFRenderProps<ImageSchema>) => {
   const { value, schema, pdfDoc, page, _cache } = arg;

package/src/image/uiRender.ts

@@ -2,6 +2,7 @@ import type { ChangeEvent } from 'react';
 import type * as CSS from 'csstype';
 import type { ImageSchema } from './types';
 import { UIRenderProps, ZOOM } from '@pdfme/common';
+import { addAlphaToHex } from '../renderUtils.js';
 
 const fullSize = { width: '100%', height: '100%' };
 
@@ -34,7 +35,8 @@ const readFile = (input: File | FileList | null): Promise<string | ArrayBuffer>
   });
 
 export const uiRender = async (arg: UIRenderProps<ImageSchema>) => {
-  const { value, rootElement, mode, onChange, stopEditing, tabIndex, placeholder, schema } = arg;
+  const { value, rootElement, mode, onChange, stopEditing, tabIndex, placeholder, schema, theme } =
+    arg;
   const editable = mode === 'form' || mode === 'designer';
 
   const size = { width: schema.width * ZOOM, height: schema.height * ZOOM };
@@ -97,7 +99,7 @@ export const uiRender = async (arg: UIRenderProps<ImageSchema>) => {
       display: editable ? 'flex' : 'none',
       position: 'absolute',
       top: 0,
-      backgroundColor: editable || value ? 'rgb(242 244 255 / 50%)' : 'none',
+      backgroundColor: editable || value ? addAlphaToHex(theme.colorPrimaryBg, 30) : 'none',
       cursor: 'pointer',
     };
     Object.assign(label.style, labelStyle);

package/src/index.ts

@@ -1,7 +1,7 @@
-import text from './text';
-import image from './image';
-import barcodes from './barcodes';
-import { convertForPdfLayoutProps, rotatePoint } from './renderUtils';
+import text from './text/index.js';
+import image from './image/index.js';
+import barcodes from './barcodes/index.js';
+import { convertForPdfLayoutProps, rotatePoint } from './renderUtils.js';
 
 const builtInPlugins = { Text: text };
 

package/src/renderUtils.ts

@@ -61,4 +61,12 @@ export const rotatePoint = (
   return { x, y };
 };
 
-export const getCacheKey = (schema: Schema, input: string) => `${schema.type}${input}`;
+export const addAlphaToHex = (hex: string, alphaPercentage: number) => {
+  if (!/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/i.test(hex)) {
+    throw new Error('Invalid HEX color code');
+  }
+  const alphaValue = Math.round((alphaPercentage / 100) * 255);
+  let alphaHex = alphaValue.toString(16);
+  if (alphaHex.length === 1) alphaHex = '0' + alphaHex;
+  return hex + alphaHex;
+};

package/src/text/helper.ts

@@ -22,7 +22,7 @@ import {
   DYNAMIC_FIT_HORIZONTAL,
   DYNAMIC_FIT_VERTICAL,
   VERTICAL_ALIGN_TOP,
-} from './constants';
+} from './constants.js';
 
 export const getBrowserVerticalFontAdjustments = (
   fontKitFont: FontKitFont,

package/src/text/index.ts

@@ -1,7 +1,7 @@
 import type { Plugin } from '@pdfme/common';
-import { pdfRender } from './pdfRender';
-import { propPanel } from './propPanel';
-import { uiRender } from './uiRender';
+import { pdfRender } from './pdfRender.js';
+import { propPanel } from './propPanel.js';
+import { uiRender } from './uiRender.js';
 import type { TextSchema } from './types';
 
 const schema: Plugin<TextSchema> = { pdf: pdfRender, ui: uiRender, propPanel };

package/src/text/pdfRender.ts

@@ -11,7 +11,7 @@ import {
   DEFAULT_LINE_HEIGHT,
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_FONT_COLOR,
-} from './constants';
+} from './constants.js';
 import {
   calculateDynamicFontSize,
   heightOfFontAtSize,
@@ -19,8 +19,8 @@ import {
   getFontKitFont,
   getSplittedLines,
   widthOfTextAtSize,
-} from './helper';
-import { convertForPdfLayoutProps, rotatePoint } from '../renderUtils';
+} from './helper.js';
+import { convertForPdfLayoutProps, rotatePoint } from '../renderUtils.js';
 
 const hex2rgb = (hex: string) => {
   if (hex.slice(0, 1) === '#') hex = hex.slice(1);

package/src/text/propPanel.ts

@@ -23,10 +23,10 @@ import {
   DEFAULT_DYNAMIC_MAX_FONT_SIZE,
   ALIGN_RIGHT,
   ALIGN_CENTER,
-} from './constants';
+} from './constants.js';
 
 const UseDynamicFontSize = (props: PropPanelWidgetProps) => {
-  const { rootElement, changeSchemas, activeSchema } = props;
+  const { rootElement, changeSchemas, activeSchema, i18n } = props;
 
   const checkbox = document.createElement('input');
   checkbox.type = 'checkbox';
@@ -42,14 +42,14 @@ const UseDynamicFontSize = (props: PropPanelWidgetProps) => {
     changeSchemas([{ key: 'dynamicFontSize', value: val, schemaId: activeSchema.id }]);
   };
   const label = document.createElement('label');
-  label.innerText = 'Dynamic Font Size';
+  label.innerText = i18n('schemas.text.dynamicFontSize') || '';
   label.style.cssText = 'display: flex; width: 100%;';
   label.appendChild(checkbox);
   rootElement.appendChild(label);
 };
 
 export const propPanel: PropPanel<TextSchema> = {
-  schema: ({ options, activeSchema }) => {
+  schema: ({ options, activeSchema, i18n }) => {
     const font = options.font || { [DEFAULT_FONT_NAME]: { data: '', fallback: true } };
     const fontNames = Object.keys(font);
     const fallbackFontName = getFallbackFontName(font);
@@ -58,7 +58,7 @@ export const propPanel: PropPanel<TextSchema> = {
 
     const textSchema: Record<string, PropPanelSchema> = {
       fontName: {
-        title: 'Font Name',
+        title: i18n('schemas.text.fontName'),
         type: 'string',
         widget: 'select',
         default: fallbackFontName,
@@ -66,64 +66,84 @@ export const propPanel: PropPanel<TextSchema> = {
         span: 12,
       },
       fontSize: {
-        title: 'Size',
+        title: i18n('schemas.text.size'),
         type: 'number',
         widget: 'inputNumber',
         span: 6,
         disabled: enableDynamicFont,
       },
-      characterSpacing: { title: 'Spacing', type: 'number', widget: 'inputNumber', span: 6 },
+      characterSpacing: {
+        title: i18n('schemas.text.spacing'),
+        type: 'number',
+        widget: 'inputNumber',
+        span: 6,
+      },
       alignment: {
-        title: 'Text Align',
+        title: i18n('schemas.text.textAlign'),
         type: 'string',
         widget: 'select',
         props: {
           options: [
-            { label: 'Left', value: DEFAULT_ALIGNMENT },
-            { label: 'Center', value: ALIGN_CENTER },
-            { label: 'Right', value: ALIGN_RIGHT },
+            { label: i18n('schemas.left'), value: DEFAULT_ALIGNMENT },
+            { label: i18n('schemas.center'), value: ALIGN_CENTER },
+            { label: i18n('schemas.right'), value: ALIGN_RIGHT },
           ],
         },
         span: 8,
       },
       verticalAlignment: {
-        title: 'Vertical Align',
+        title: i18n('schemas.text.verticalAlign'),
         type: 'string',
         widget: 'select',
         props: {
           options: [
-            { label: 'Top', value: VERTICAL_ALIGN_TOP },
-            { label: 'Middle', value: VERTICAL_ALIGN_MIDDLE },
-            { label: 'Bottom', value: VERTICAL_ALIGN_BOTTOM },
+            { label: i18n('schemas.top'), value: VERTICAL_ALIGN_TOP },
+            { label: i18n('schemas.middle'), value: VERTICAL_ALIGN_MIDDLE },
+            { label: i18n('schemas.bottom'), value: VERTICAL_ALIGN_BOTTOM },
           ],
         },
         span: 8,
       },
-      lineHeight: { title: 'Line Height', type: 'number', widget: 'inputNumber', span: 8 },
-      useDynamicFontSize: { type: 'boolean', widget: 'UseDynamicFontSize', bind: false },
+      lineHeight: {
+        title: i18n('schemas.text.lineHeight'),
+        type: 'number',
+        widget: 'inputNumber',
+        span: 8,
+      },
+      useDynamicFontSize: { type: 'boolean', widget: 'UseDynamicFontSize', bind: false, span: 16 },
       dynamicFontSize: {
         type: 'object',
         widget: 'card',
         column: 3,
         properties: {
-          min: { title: 'Min', type: 'number', widget: 'inputNumber', hidden: !enableDynamicFont },
-          max: { title: 'Max', type: 'number', widget: 'inputNumber', hidden: !enableDynamicFont },
+          min: {
+            title: i18n('schemas.text.min'),
+            type: 'number',
+            widget: 'inputNumber',
+            hidden: !enableDynamicFont,
+          },
+          max: {
+            title: i18n('schemas.text.max'),
+            type: 'number',
+            widget: 'inputNumber',
+            hidden: !enableDynamicFont,
+          },
           fit: {
-            title: 'Fit',
+            title: i18n('schemas.text.fit'),
             type: 'string',
             widget: 'select',
             hidden: !enableDynamicFont,
             props: {
               options: [
-                { label: 'Horizontal', value: DYNAMIC_FIT_HORIZONTAL },
-                { label: 'Vertical', value: DYNAMIC_FIT_VERTICAL },
+                { label: i18n('schemas.horizontal'), value: DYNAMIC_FIT_HORIZONTAL },
+                { label: i18n('schemas.vertical'), value: DYNAMIC_FIT_VERTICAL },
               ],
             },
           },
         },
       },
-      fontColor: { title: 'Font Color', type: 'string', widget: 'color' },
-      backgroundColor: { title: 'Background', type: 'string', widget: 'color' },
+      fontColor: { title: i18n('schemas.textColor'), type: 'string', widget: 'color' },
+      backgroundColor: { title: i18n('schemas.bgColor'), type: 'string', widget: 'color' },
     };
 
     return textSchema;

package/src/text/uiRender.ts

@@ -11,12 +11,13 @@ import {
   DEFAULT_LINE_HEIGHT,
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_FONT_COLOR,
-} from './constants';
+} from './constants.js';
 import {
   calculateDynamicFontSize,
   getFontKitFont,
   getBrowserVerticalFontAdjustments,
-} from './helper';
+} from './helper.js';
+import { addAlphaToHex } from '../renderUtils.js';
 
 const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
   switch (verticalAlignmentValue) {
@@ -33,14 +34,15 @@ const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
 const getBackgroundColor = (
   mode: 'form' | 'viewer' | 'designer',
   value: string,
-  schema: Schema
+  schema: Schema,
+  defaultBackgroundColor: string
 ) => {
   if ((mode === 'form' || mode === 'designer') && value && schema.backgroundColor) {
     return schema.backgroundColor as string;
   } else if (mode === 'viewer') {
     return (schema.backgroundColor as string) ?? 'transparent';
   } else {
-    return 'rgb(242 244 255 / 75%)';
+    return defaultBackgroundColor;
   }
 };
 
@@ -55,6 +57,7 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
     tabIndex,
     placeholder,
     options,
+    theme,
   } = arg;
   const font = options?.font || getDefaultFont();
 
@@ -86,7 +89,12 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
   const containerStyle: CSS.Properties = {
     padding: 0,
     resize: 'none',
-    backgroundColor: getBackgroundColor(mode, value, schema),
+    backgroundColor: getBackgroundColor(
+      mode,
+      value,
+      schema,
+      addAlphaToHex(theme.colorPrimaryBg, 30)
+    ),
     border: 'none',
     display: 'flex',
     flexDirection: 'column',