@pdfme/ui 1.0.0-beta.1

package/src/components/Root.tsx

@@ -0,0 +1,52 @@
+import type {} from 'css-font-loading-module';
+import React, { useContext, forwardRef, ReactNode, Ref, useEffect } from 'react';
+import { Size } from '@pdfme/common';
+import { RULER_HEIGHT } from '../constants';
+import { FontContext } from '../contexts';
+import Spinner from './Spinner';
+
+type Props = { size: Size; scale: number; children: ReactNode };
+
+const Root = ({ size, scale, children }: Props, ref: Ref<HTMLDivElement>) => {
+  const font = useContext(FontContext);
+
+  useEffect(() => {
+    const fontFaces = Object.entries(font).map((entry) => {
+      const [key, value] = entry;
+      const fontFace = new FontFace(key, value.data);
+
+      return fontFace.load();
+    });
+    Promise.all(fontFaces).then((loadedFontFaces) => {
+      loadedFontFaces.forEach((loadedFontFace) => {
+        if (document && document.fonts && document.fonts.add) {
+          document.fonts.add(loadedFontFace);
+        }
+      });
+    });
+  }, [font]);
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        fontFamily: 'Arial, Helvetica, sans-serif',
+        position: 'relative',
+        background: 'rgb(74, 74, 74)',
+        overflowY: 'auto',
+        ...size,
+      }}
+    >
+      <div
+        style={{
+          width: size.width - RULER_HEIGHT * scale,
+          height: size.height - RULER_HEIGHT * scale,
+        }}
+      >
+        {scale === 0 ? <Spinner /> : children}
+      </div>
+    </div>
+  );
+};
+
+export default forwardRef<HTMLDivElement, Props>(Root);

package/src/components/Schemas/BarcodeSchema.tsx

@@ -0,0 +1,111 @@
+import React, { forwardRef, Ref } from 'react';
+import { validateBarcodeInput, BarCodeType, BarcodeSchema } from '@pdfme/common';
+import { ZOOM } from '../../constants';
+import { SchemaUIProps } from './SchemaUI';
+import ean8 from '../../assets/barcodeExamples/ean8.png';
+import ean13 from '../../assets/barcodeExamples/ean13.png';
+import code39 from '../../assets/barcodeExamples/code39.png';
+import code128 from '../../assets/barcodeExamples/code128.png';
+import nw7 from '../../assets/barcodeExamples/nw7.png';
+import itf14 from '../../assets/barcodeExamples/itf14.png';
+import japanpost from '../../assets/barcodeExamples/japanpost.png';
+import qrcode from '../../assets/barcodeExamples/qrcode.png';
+import upca from '../../assets/barcodeExamples/upca.png';
+import upce from '../../assets/barcodeExamples/upce.png';
+
+type Props = SchemaUIProps & { schema: BarcodeSchema };
+
+const barcodeExampleImageObj: { [key: string]: string } = {
+  qrcode,
+  japanpost,
+  ean13,
+  ean8,
+  code39,
+  code128,
+  nw7,
+  itf14,
+  upca,
+  upce,
+};
+
+const SampleBarcode = ({ schema }: { schema: BarcodeSchema }) => (
+  <img
+    style={{
+      width: schema.width * ZOOM,
+      height: schema.height * ZOOM,
+      position: 'absolute',
+      borderRadius: 0,
+      opacity: 0.5,
+    }}
+    src={barcodeExampleImageObj[schema.type]}
+  />
+);
+
+const ErrorBarcode = () => (
+  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+    <p
+      style={{
+        color: 'white',
+        background: 'red',
+        padding: '0.25rem',
+        fontSize: '12pt',
+        fontWeight: 'bold',
+        borderRadius: 3,
+      }}
+    >
+      ERROR
+    </p>
+  </div>
+);
+
+const ErrorOrSampleBarcode = ({ schema, value }: { schema: BarcodeSchema; value: string }) =>
+  validateBarcodeInput(schema.type as BarCodeType, value) ? (
+    <SampleBarcode schema={schema} />
+  ) : (
+    <ErrorBarcode />
+  );
+
+const BarcodeSchemaUI = (
+  { schema, editable, placeholder, tabIndex, onChange }: Props,
+  ref: Ref<HTMLInputElement>
+) => {
+  const value = schema.data;
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <input
+        ref={ref}
+        disabled={!editable}
+        tabIndex={tabIndex}
+        placeholder={placeholder}
+        style={{
+          textAlign: 'center',
+          position: 'absolute',
+          zIndex: 2,
+          fontSize: 'inherit',
+          height: Number(schema.height) * ZOOM,
+          width: Number(schema.width) * ZOOM,
+          background: editable || value ? 'rgba(255, 255, 255, 0.8)' : 'none',
+          border: 'none',
+        }}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      />
+      {value ? (
+        <ErrorOrSampleBarcode value={value} schema={schema} />
+      ) : (
+        <SampleBarcode schema={schema} />
+      )}
+    </div>
+  );
+};
+
+export default forwardRef<HTMLInputElement, Props>(BarcodeSchemaUI);

package/src/components/Schemas/ImageSchema.tsx

@@ -0,0 +1,81 @@
+import React, { forwardRef, ChangeEvent, useContext, Ref } from 'react';
+import { ImageSchema } from '@pdfme/common';
+import { SchemaUIProps } from './SchemaUI';
+import { readFiles } from '../../helper';
+import { I18nContext } from '../../contexts';
+import { ZOOM } from '../../constants';
+import imageExample from '../../assets/imageExample.png';
+
+type Props = SchemaUIProps & { schema: ImageSchema };
+
+const FilledImage = ({ editable, tabIndex, schema, onChange }: Omit<Props, 'placeholder'>) => (
+  <div style={{ margin: '0 auto' }}>
+    {editable && (
+      <button
+        tabIndex={tabIndex}
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 0,
+        }}
+        onClick={() => onChange('')}
+      >
+        x
+      </button>
+    )}
+    <img
+      style={{ width: schema.width * ZOOM, height: schema.height * ZOOM, borderRadius: 0 }}
+      src={schema.data}
+    />
+  </div>
+);
+
+const BlankImage = (props: Props & { inputRef: Ref<HTMLInputElement> }) => {
+  const { editable, placeholder, tabIndex, schema, onChange, inputRef } = props;
+  const i18n = useContext(I18nContext);
+
+  return editable ? (
+    <label
+      style={{
+        height: Number(schema.height) * ZOOM,
+        width: Number(schema.width) * ZOOM,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <input
+        ref={inputRef}
+        tabIndex={tabIndex}
+        style={{ display: 'none' }}
+        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+          const { files } = event.target;
+          readFiles(files, 'dataURL').then((result) => onChange(result as string));
+        }}
+        type="file"
+        accept="image/jpeg, image/png"
+      />
+      <span style={{ zIndex: 1 }}>{i18n('select')}</span>
+    </label>
+  ) : (
+    <div
+      style={{
+        position: 'absolute',
+        opacity: 0.5,
+        top: 0,
+        left: 0,
+        width: schema.width * ZOOM,
+        height: schema.height * ZOOM,
+        backgroundImage: `url(${placeholder || imageExample})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+      }}
+    ></div>
+  );
+};
+
+const ImageSchemaUI = (props: Props, ref: Ref<HTMLInputElement>) =>
+  props.schema.data ? <FilledImage {...props} /> : <BlankImage {...props} inputRef={ref} />;
+
+export default forwardRef<HTMLInputElement, Props>(ImageSchemaUI);

package/src/components/Schemas/SchemaUI.tsx

@@ -0,0 +1,64 @@
+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';
+
+export interface SchemaUIProps {
+  schema: SchemaForUI;
+  editable: boolean;
+  onChange: (value: string) => void;
+  tabIndex?: number;
+  placeholder?: string;
+}
+
+type Props = SchemaUIProps & {
+  border: string;
+  onChangeHoveringSchemaId?: (id: string | null) => void;
+};
+
+const getBgc = (schema: SchemaForUI) =>
+  schema.type === 'text' && schema.backgroundColor ? schema.backgroundColor : 'transparent';
+
+const Wrapper = ({
+  children,
+  border,
+  onChangeHoveringSchemaId,
+  schema,
+}: Props & { children: ReactNode }) => (
+  <div
+    title={schema.key}
+    onMouseEnter={() => onChangeHoveringSchemaId && onChangeHoveringSchemaId(schema.id)}
+    onMouseLeave={() => onChangeHoveringSchemaId && onChangeHoveringSchemaId(null)}
+    className={SELECTABLE_CLASSNAME}
+    id={schema.id}
+    style={{
+      position: 'absolute',
+      height: schema.height * ZOOM,
+      width: schema.width * ZOOM,
+      top: schema.position.y * ZOOM,
+      left: schema.position.x * ZOOM,
+      border,
+      backgroundColor: getBgc(schema),
+    }}
+  >
+    {children}
+  </div>
+);
+
+const SchemaUI = (props: Props, ref: Ref<HTMLTextAreaElement | HTMLInputElement>) => {
+  const r = {
+    [props.editable ? 'ref' : '']: ref as RefObject<HTMLTextAreaElement | HTMLInputElement>,
+  };
+  const { schema } = props;
+
+  return (
+    <Wrapper {...props}>
+      {isTextSchema(schema) && <TextSchema {...r} {...props} schema={schema} />}
+      {isImageSchema(schema) && <ImageSchema {...r} {...props} schema={schema} />}
+      {isBarcodeSchema(schema) && <BarcodeSchema {...r} {...props} schema={schema} />}
+    </Wrapper>
+  );
+};
+export default forwardRef<HTMLTextAreaElement | HTMLInputElement, Props>(SchemaUI);

package/src/components/Schemas/TextSchema.tsx

@@ -0,0 +1,62 @@
+import React, { forwardRef, Ref } from 'react';
+import {
+  DEFAULT_FONT_SIZE,
+  DEFAULT_ALIGNMENT,
+  DEFAULT_LINE_HEIGHT,
+  DEFAULT_CHARACTER_SPACING,
+  DEFAULT_FONT_COLOR,
+  TextSchema,
+} from '@pdfme/common';
+import { SchemaUIProps } from './SchemaUI';
+import { ZOOM } from '../../constants';
+
+type Props = SchemaUIProps & { schema: TextSchema };
+
+const TextSchemaUI = (
+  { schema, editable, placeholder, tabIndex, onChange }: Props,
+  ref: Ref<HTMLTextAreaElement>
+) => {
+  const style: React.CSSProperties = {
+    resize: 'none',
+    fontFamily: schema.fontName ?? 'inherit',
+    height: schema.height * ZOOM,
+    width: schema.width * ZOOM,
+    textAlign: schema.alignment ?? DEFAULT_ALIGNMENT,
+    fontSize: `${schema.fontSize ?? DEFAULT_FONT_SIZE}pt`,
+    letterSpacing: `${schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}pt`,
+    fontFeatureSettings: `"palt"`,
+    lineHeight: `${schema.lineHeight ?? DEFAULT_LINE_HEIGHT}em`,
+    whiteSpace: 'pre-line',
+    wordBreak: 'break-all',
+    background: 'transparent',
+    border: 'none',
+    color: schema.fontColor ?? DEFAULT_FONT_COLOR,
+  };
+
+  return editable ? (
+    <textarea
+      ref={ref}
+      placeholder={placeholder}
+      tabIndex={tabIndex}
+      style={style}
+      onChange={(e) => onChange(e.target.value)}
+      value={schema.data}
+    ></textarea>
+  ) : (
+    <div style={style}>
+      {/*  Set the letterSpacing of the last character to 0. */}
+      {schema.data.split('').map((l, i) => (
+        <span
+          key={i}
+          style={{
+            letterSpacing: String(schema.data).length === i + 1 ? 0 : 'inherit',
+          }}
+        >
+          {l}
+        </span>
+      ))}
+    </div>
+  );
+};
+
+export default forwardRef<HTMLTextAreaElement, Props>(TextSchemaUI);

package/src/components/Spinner.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+const Spinner = () => (
+  <>
+    <style>
+      {`
+      @keyframes spin {
+        0% { transform: rotate(0deg) }
+        
+        100% { transform: rotate(359deg) }
+      }
+    `}
+    </style>
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div
+        style={{
+          width: 65,
+          height: 65,
+          borderRadius: '50%',
+          border: '4px solid',
+          borderColor: '#4285f4 rgba(0,0,0,0.1) rgba(0,0,0,0.1)',
+          animation: 'spin 1s ease infinite',
+        }}
+      ></div>
+    </div>
+  </>
+);
+
+export default Spinner;

package/src/constants.ts

@@ -0,0 +1,9 @@
+export const DEFAULT_LANG = 'en' as const;
+
+export const DESTROYED_ERR_MSG = 'this instance is already destroyed';
+
+export const ZOOM = 3.7795275591;
+
+export const SELECTABLE_CLASSNAME = 'selectable';
+
+export const RULER_HEIGHT = 30;

package/src/contexts.ts

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