@pdfme/ui 0.0.0

package/src/class.ts

@@ -0,0 +1,188 @@
+import ReactDOM from 'react-dom';
+import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants.js';
+import { debounce } from './helper.js';
+import {
+  cloneDeep,
+  Template,
+  Size,
+  Lang,
+  Font,
+  UIProps,
+  UIOptions,
+  PluginRegistry,
+  PreviewProps,
+  getDefaultFont,
+  checkUIProps,
+  checkTemplate,
+  checkInputs,
+  checkUIOptions,
+  checkPreviewProps,
+  pluginRegistry,
+} from '@pdfme/common';
+import { builtInPlugins } from '@pdfme/schemas';
+
+export abstract class BaseUIClass {
+  protected domContainer!: HTMLElement | null;
+
+  protected template!: Template;
+
+  protected size!: Size;
+
+  private lang: Lang = DEFAULT_LANG;
+
+  private font: Font = getDefaultFont();
+
+  private pluginsRegistry: PluginRegistry = pluginRegistry(builtInPlugins);
+
+  private options: UIOptions = {};
+
+  private readonly setSize = debounce(() => {
+    if (!this.domContainer) {
+      return;
+    }
+
+    const rect = this.domContainer.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+
+    const visibleWidth = Math.max(0, Math.min(rect.right, vw) - Math.max(rect.left, 0));
+    const visibleHeight = Math.max(0, Math.min(rect.bottom, vh) - Math.max(rect.top, 0));
+
+    this.size = {
+      height: visibleHeight,
+      width: visibleWidth,
+    };
+
+    this.render();
+  }, 100);
+
+  resizeObserver = new ResizeObserver(this.setSize);
+
+  constructor(props: UIProps) {
+    checkUIProps(props);
+
+    const { domContainer, template, options = {}, plugins = {} } = props;
+    this.domContainer = domContainer;
+    this.template = cloneDeep(template);
+    this.options = options;
+    this.size = {
+      height: this.domContainer.clientHeight || window.innerHeight,
+      width: this.domContainer.clientWidth || window.innerWidth,
+    };
+    this.resizeObserver.observe(this.domContainer);
+
+    const { lang, font } = options;
+    if (lang) {
+      this.lang = lang;
+    }
+    if (font) {
+      this.font = font;
+    }
+
+    if (Object.values(plugins).length > 0) {
+      this.pluginsRegistry = pluginRegistry(plugins);
+    }
+  }
+
+  protected getLang() {
+    return this.lang;
+  }
+
+  protected getFont() {
+    return this.font;
+  }
+
+  protected getPluginsRegistry() {
+    return this.pluginsRegistry;
+  }
+
+  public getOptions() {
+    return this.options;
+  }
+
+  public getTemplate() {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+
+    return this.template;
+  }
+
+  public updateTemplate(template: Template) {
+    checkTemplate(template);
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+
+    this.template = cloneDeep(template);
+    this.render();
+  }
+
+  public updateOptions(options: UIOptions) {
+    checkUIOptions(options);
+    const { lang, font } = options || {};
+
+    if (lang) {
+      this.lang = lang;
+    }
+    if (font) {
+      this.font = font;
+    }
+    this.options = Object.assign(this.options, options);
+    this.render();
+  }
+
+  public destroy() {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    ReactDOM.unmountComponentAtNode(this.domContainer);
+
+    this.resizeObserver.unobserve(this.domContainer);
+    this.domContainer = null;
+  }
+
+  protected abstract render(): void;
+}
+export abstract class PreviewUI extends BaseUIClass {
+  protected inputs!: { [key: string]: string }[];
+
+  constructor(props: PreviewProps) {
+    super(props);
+    checkPreviewProps(props);
+    this.inputs = convertToStingObjectArray(cloneDeep(props.inputs));
+  }
+
+  public getInputs() {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+
+    return this.inputs;
+  }
+
+  public setInputs(inputs: { [key: string]: string }[]) {
+    if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+    checkInputs(inputs);
+
+    this.inputs = convertToStingObjectArray(inputs);
+    this.render();
+  }
+
+  protected abstract render(): void;
+}
+
+type DataItem = {
+  [key: string]: string | string[][];
+};
+
+type StringifiedDataItem = {
+  [key: string]: string;
+};
+
+function convertToStingObjectArray(data: DataItem[]): StringifiedDataItem[] {
+  return data.map((item) => {
+    const stringifiedItem: StringifiedDataItem = {};
+    Object.keys(item).forEach((key) => {
+      const value = item[key];
+      if (Array.isArray(value)) {
+        stringifiedItem[key] = JSON.stringify(value);
+      } else {
+        stringifiedItem[key] = value;
+      }
+    });
+    return stringifiedItem;
+  });
+}

package/src/components/AppContextProvider.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { ConfigProvider as ThemeConfigProvider } from 'antd';
+import { I18nContext, FontContext, PluginsRegistry, OptionsContext } from '../contexts.js';
+import { i18n, getDict } from '../i18n.js';
+import { defaultTheme } from '../theme.js';
+import type { Dict, Font, Lang, UIOptions, PluginRegistry } from '@pdfme/common';
+
+type Props = {
+  children: React.ReactNode;
+  lang: Lang;
+  font: Font;
+  plugins: PluginRegistry;
+  options: UIOptions;
+};
+
+const isObject = (item: unknown): item is Record<string, unknown> =>
+  Boolean(item) && typeof item === 'object' && !Array.isArray(item);
+
+const deepMerge = <T extends Record<string, unknown>, U extends Record<string, unknown>>(
+  target: T,
+  source: U,
+): T & U => {
+  let output = { ...target } as T & U;
+
+  if (isObject(target) && isObject(source)) {
+    Object.keys(source).forEach((key) => {
+      const sourceValue = source[key];
+      if (isObject(sourceValue)) {
+        if (!(key in target)) {
+          Object.assign(output, { [key]: sourceValue });
+        } else {
+          const targetValue = target[key];
+          if (isObject(targetValue)) {
+            // Using Record<string, unknown> for recursive type
+            (output as Record<string, unknown>)[key] = deepMerge(targetValue, sourceValue);
+          } else {
+            Object.assign(output, { [key]: sourceValue });
+          }
+        }
+      } else {
+        Object.assign(output, { [key]: sourceValue });
+      }
+    });
+  }
+  return output;
+};
+
+const AppContextProvider = ({ children, lang, font, plugins, options }: Props) => {
+  let theme = defaultTheme;
+  if (options.theme) {
+    theme = deepMerge(
+      theme as unknown as Record<string, unknown>,
+      options.theme as unknown as Record<string, unknown>,
+    ) as typeof theme;
+  }
+
+  let dict = getDict(lang);
+  if (options.labels) {
+    dict = deepMerge(
+      dict as unknown as Record<string, unknown>,
+      options.labels as unknown as Record<string, unknown>,
+    ) as typeof dict;
+  }
+
+  return (
+    <ThemeConfigProvider theme={theme}>
+      <I18nContext.Provider value={(key: keyof Dict) => i18n(key, dict)}>
+        <FontContext.Provider value={font}>
+          <PluginsRegistry.Provider value={plugins}>
+            <OptionsContext.Provider value={options}>{children}</OptionsContext.Provider>
+          </PluginsRegistry.Provider>
+        </FontContext.Provider>
+      </I18nContext.Provider>
+    </ThemeConfigProvider>
+  );
+};
+
+export default AppContextProvider;

package/src/components/CtlBar.tsx

@@ -0,0 +1,183 @@
+import React, { useContext } from 'react';
+import { Size } from '@pdfme/common';
+// Import icons from lucide-react
+// Note: In tests, these will be mocked by the mock file in __mocks__/lucide-react.js
+import { Plus, Minus, ChevronLeft, ChevronRight, Ellipsis } from 'lucide-react';
+
+import type { MenuProps } from 'antd';
+import { theme, Typography, Button, Dropdown } from 'antd';
+import { I18nContext } from '../contexts.js';
+import { useMaxZoom } from '../helper.js';
+import { UI_CLASSNAME } from '../constants.js';
+
+const { Text } = Typography;
+
+type TextStyle = { color: string; fontSize: number; margin: number };
+type ZoomProps = {
+  zoomLevel: number;
+  setZoomLevel: (zoom: number) => void;
+  style: { textStyle: TextStyle };
+};
+
+const Zoom = ({ zoomLevel, setZoomLevel, style }: ZoomProps) => {
+  const zoomStep = 0.25;
+  const maxZoom = useMaxZoom();
+  const minZoom = 0.25;
+
+  const nextZoomOut = zoomLevel - zoomStep;
+  const nextZoomIn = zoomLevel + zoomStep;
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <Button
+        className={UI_CLASSNAME + 'zoom-out'}
+        type="text"
+        disabled={minZoom >= nextZoomOut}
+        onClick={() => setZoomLevel(nextZoomOut)}
+        icon={<Minus size={16} color={style.textStyle.color} />}
+      />
+      <Text strong style={style.textStyle}>
+        {Math.round(zoomLevel * 100)}%
+      </Text>
+      <Button
+        className={UI_CLASSNAME + 'zoom-in'}
+        type="text"
+        disabled={maxZoom < nextZoomIn}
+        onClick={() => setZoomLevel(nextZoomIn)}
+        icon={<Plus size={16} color={style.textStyle.color} />}
+      />
+    </div>
+  );
+};
+
+type PagerProps = {
+  pageCursor: number;
+  pageNum: number;
+  setPageCursor: (page: number) => void;
+  style: { textStyle: TextStyle };
+};
+
+const Pager = ({ pageCursor, pageNum, setPageCursor, style }: PagerProps) => {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <Button className={UI_CLASSNAME + 'page-prev'} type="text" disabled={pageCursor <= 0} onClick={() => setPageCursor(pageCursor - 1)}>
+        <ChevronLeft size={16} color={style.textStyle.color} />
+      </Button>
+      <Text strong style={style.textStyle}>
+        {pageCursor + 1}/{pageNum}
+      </Text>
+      <Button
+        className={UI_CLASSNAME + 'page-next'}
+        type="text"
+        disabled={pageCursor + 1 >= pageNum}
+        onClick={() => setPageCursor(pageCursor + 1)}
+      >
+        <ChevronRight size={16} color={style.textStyle.color} />
+      </Button>
+    </div>
+  );
+};
+
+type ContextMenuProps = {
+  items: MenuProps['items'];
+  style: { textStyle: TextStyle };
+};
+const ContextMenu = ({ items, style }: ContextMenuProps) => (
+  <Dropdown menu={{ items }} placement="top" arrow trigger={['click']}>
+    <Button className={UI_CLASSNAME + 'context-menu'} type="text">
+      <Ellipsis size={16} color={style.textStyle.color} />
+    </Button>
+  </Dropdown>
+);
+
+type CtlBarProps = {
+  size: Size;
+  pageCursor: number;
+  pageNum: number;
+  setPageCursor: (page: number) => void;
+  zoomLevel: number;
+  setZoomLevel: (zoom: number) => void;
+  addPageAfter?: () => void;
+  removePage?: () => void;
+};
+
+const CtlBar = (props: CtlBarProps) => {
+  const { token } = theme.useToken();
+  const i18n = useContext(I18nContext);
+
+  const {
+    size,
+    pageCursor,
+    pageNum,
+    setPageCursor,
+    zoomLevel,
+    setZoomLevel,
+    addPageAfter,
+    removePage,
+  } = props;
+
+  const contextMenuItems: MenuProps['items'] = [];
+  if (addPageAfter) {
+    contextMenuItems.push({
+      key: '1',
+      label: <div onClick={addPageAfter}>{i18n('addPageAfter')}</div>,
+    });
+  }
+  if (removePage && pageNum > 1 && pageCursor !== 0) {
+    contextMenuItems.push({
+      key: '2',
+      label: <div onClick={removePage}>{i18n('removePage')}</div>,
+    });
+  }
+
+  const barWidth = 300;
+  const contextMenuWidth = contextMenuItems.length > 0 ? 50 : 0;
+  const width = (pageNum > 1 ? barWidth : barWidth / 2) + contextMenuWidth;
+
+  const textStyle = {
+    color: token.colorWhite,
+    fontSize: token.fontSize,
+    margin: token.marginXS,
+  };
+
+  return (
+    <div style={{ position: 'absolute', top: 'auto', bottom: '6%', width: size.width }}>
+      <div
+        className={UI_CLASSNAME + 'control-bar'}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-evenly',
+          position: 'relative',
+          zIndex: 1,
+          left: `calc(50% - ${width / 2}px)`,
+          width,
+          height: 40,
+          boxSizing: 'border-box',
+          padding: token.paddingSM,
+          borderRadius: token.borderRadius,
+          backgroundColor: token.colorBgMask,
+        }}
+      >
+        {pageNum > 1 && (
+          <div className={UI_CLASSNAME + 'pager'}>
+            <Pager
+              style={{ textStyle }}
+              pageCursor={pageCursor}
+              pageNum={pageNum}
+              setPageCursor={setPageCursor}
+            />
+          </div>
+        )}
+        <div className={UI_CLASSNAME + 'zoom'}>
+          <Zoom style={{ textStyle }} zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
+        </div>
+        {contextMenuItems.length > 0 && (
+          <ContextMenu items={contextMenuItems} style={{ textStyle }} />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CtlBar;

package/src/components/Designer/Canvas/Guides.tsx

@@ -0,0 +1,49 @@
+import React, { Ref } from 'react';
+import GuidesComponent from '@scena/react-guides';
+import { ZOOM, Size } from '@pdfme/common';
+import { RULER_HEIGHT } from '../../../constants.js';
+
+const guideStyle = (
+  top: number,
+  left: number,
+  height: number,
+  width: number,
+): React.CSSProperties => ({
+  position: 'absolute',
+  top,
+  left,
+  height,
+  width,
+  background: '#333333',
+});
+
+const _Guides = ({
+  paperSize,
+  horizontalRef,
+  verticalRef,
+}: {
+  paperSize: Size;
+  horizontalRef: Ref<GuidesComponent> | undefined;
+  verticalRef: Ref<GuidesComponent> | undefined;
+}) => (
+  <>
+    <div
+      className="ruler-container"
+      style={guideStyle(-RULER_HEIGHT, -RULER_HEIGHT, RULER_HEIGHT, RULER_HEIGHT)}
+    />
+    <GuidesComponent
+      zoom={ZOOM}
+      style={guideStyle(-RULER_HEIGHT, 0, RULER_HEIGHT, paperSize.width)}
+      type="horizontal"
+      ref={horizontalRef}
+    />
+    <GuidesComponent
+      zoom={ZOOM}
+      style={guideStyle(0, -RULER_HEIGHT, paperSize.height, RULER_HEIGHT)}
+      type="vertical"
+      ref={verticalRef}
+    />
+  </>
+);
+
+export default _Guides;

package/src/components/Designer/Canvas/Mask.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Size } from '@pdfme/common';
+import { RULER_HEIGHT } from '../../../constants.js';
+import { theme } from 'antd';
+
+const Mask = ({ width, height }: Size) => (
+  <div
+    style={{
+      position: 'absolute',
+      top: -RULER_HEIGHT,
+      left: -RULER_HEIGHT,
+      zIndex: 100,
+      width,
+      height,
+      background: theme.useToken().token.colorBgMask,
+    }}
+  />
+);
+
+export default Mask;

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

@@ -0,0 +1,91 @@
+import React, { useEffect, forwardRef, Ref, useRef } from 'react';
+import MoveableComponent, {
+  OnDrag,
+  OnRotate,
+  OnRotateEnd,
+  OnClick,
+  OnResize,
+} from 'react-moveable';
+import { uuid } from '../../../helper.js';
+import { theme } from 'antd';
+
+type Props = {
+  target: HTMLElement[];
+  bounds: { left: number; top: number; bottom: number; right: number };
+  horizontalGuidelines: number[];
+  verticalGuidelines: number[];
+  keepRatio: boolean;
+  rotatable: boolean;
+  onDrag: ({ target, left, top }: OnDrag) => void;
+  onDragEnd: ({ target }: { target: HTMLElement | SVGElement }) => void;
+  onDragGroupEnd: ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void;
+  onRotate: ({ target, rotate }: OnRotate) => void;
+  onRotateEnd: ({ target }: OnRotateEnd) => void;
+  onRotateGroupEnd: ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void;
+  onResize: ({ target, width, height, direction }: OnResize) => void;
+  onResizeEnd: ({ target }: { target: HTMLElement | SVGElement }) => void;
+  onResizeGroupEnd: ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void;
+  onClick: (e: OnClick) => void;
+};
+
+const baseClassName = 'pdfme-moveable';
+
+const Moveable = (props: Props, ref: Ref<MoveableComponent>) => {
+  const { token } = theme.useToken();
+  const instanceId = useRef(uuid());
+  const uniqueClassName = `${baseClassName}-${instanceId.current}`;
+
+  useEffect(() => {
+    const containerElement = document.querySelector(`.${uniqueClassName}`);
+    const moveableLines = document.querySelectorAll(`.${uniqueClassName} .moveable-line`);
+    if (containerElement instanceof HTMLElement) {
+      containerElement.style.setProperty('--moveable-color', token.colorPrimary);
+      moveableLines.forEach((e) => {
+        if (e instanceof HTMLElement) {
+          e.style.setProperty('--moveable-color', token.colorPrimary);
+        }
+      });
+    }
+  }, [props.target, token.colorPrimary, uniqueClassName]);
+
+  return (
+    <MoveableComponent
+      className={uniqueClassName}
+      rootContainer={document ? document.body : undefined}
+      snappable
+      draggable
+      rotatable={props.rotatable}
+      resizable
+      throttleDrag={1}
+      throttleRotate={1}
+      throttleResize={1}
+      ref={ref}
+      target={props.target}
+      bounds={props.bounds}
+      horizontalGuidelines={props.horizontalGuidelines}
+      verticalGuidelines={props.verticalGuidelines}
+      keepRatio={props.keepRatio}
+      onRotate={props.onRotate}
+      onRotateEnd={props.onRotateEnd}
+      onRotateGroup={({ events }: { events: OnRotate[] }) => {
+        events.forEach(props.onRotate);
+      }}
+      onRotateGroupEnd={props.onRotateGroupEnd}
+      onDrag={props.onDrag}
+      onDragGroup={({ events }: { events: OnDrag[] }) => {
+        events.forEach(props.onDrag);
+      }}
+      onDragEnd={props.onDragEnd}
+      onDragGroupEnd={props.onDragGroupEnd}
+      onResize={props.onResize}
+      onResizeGroup={({ events }: { events: OnResize[] }) => {
+        events.forEach(props.onResize);
+      }}
+      onResizeEnd={props.onResizeEnd}
+      onResizeGroupEnd={props.onResizeGroupEnd}
+      onClick={props.onClick}
+    />
+  );
+};
+
+export default forwardRef<MoveableComponent, Props>(Moveable);

package/src/components/Designer/Canvas/Padding.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import type * as CSS from 'csstype';
+import { ZOOM, BasePdf, isBlankPdf } from '@pdfme/common';
+import { theme } from 'antd';
+
+const getPaddingStyle = (i: number, p: number, color: string): CSS.Properties => {
+  const style: CSS.Properties = {
+    position: 'absolute',
+    background: color,
+    opacity: 0.25,
+    pointerEvents: 'none',
+  };
+  switch (i) {
+    case 0:
+      style.top = 0;
+      style.height = `${p * ZOOM}px`;
+      style.left = 0;
+      style.right = 0;
+      break;
+    case 1:
+      style.right = 0;
+      style.width = `${p * ZOOM}px`;
+      style.top = 0;
+      style.bottom = 0;
+      break;
+    case 2:
+      style.bottom = 0;
+      style.height = `${p * ZOOM}px`;
+      style.left = 0;
+      style.right = 0;
+      break;
+    case 3:
+      style.left = 0;
+      style.width = `${p * ZOOM}px`;
+      style.top = 0;
+      style.bottom = 0;
+      break;
+    default:
+      break;
+  }
+
+  return style;
+};
+
+const Padding = ({ basePdf }: { basePdf: BasePdf }) => {
+  return (
+    <>
+      {isBlankPdf(basePdf) &&
+        basePdf.padding.map((p, i) => (
+          <div key={String(i)} style={getPaddingStyle(i, p, theme.useToken().token.colorError)} />
+        ))}
+    </>
+  );
+};
+
+export default Padding;