@pdfme/ui 5.5.2-dev.1 → 5.5.2-dev.3

package/dist/types/src/constants.d.ts

@@ -7,3 +7,5 @@ export declare const LEFT_SIDEBAR_WIDTH = 45;
 export declare const RIGHT_SIDEBAR_WIDTH = 400;
 export declare const BACKGROUND_COLOR = "rgb(74, 74, 74)";
 export declare const DEFAULT_MAX_ZOOM = 2;
+export declare const DESIGNER_CLASSNAME = "pdfme-designer-";
+export declare const UI_CLASSNAME = "pdfme-ui-";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.5.2-dev.1",
+  "version": "5.5.2-dev.3",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/components/CtlBar.tsx

@@ -8,6 +8,7 @@ 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;
 
@@ -29,6 +30,7 @@ const Zoom = ({ zoomLevel, setZoomLevel, style }: ZoomProps) => {
   return (
     <div style={{ display: 'flex', alignItems: 'center' }}>
       <Button
+        className={UI_CLASSNAME + 'zoom-out'}
         type="text"
         disabled={minZoom >= nextZoomOut}
         onClick={() => setZoomLevel(nextZoomOut)}
@@ -38,6 +40,7 @@ const Zoom = ({ zoomLevel, setZoomLevel, style }: ZoomProps) => {
         {Math.round(zoomLevel * 100)}%
       </Text>
       <Button
+        className={UI_CLASSNAME + 'zoom-in'}
         type="text"
         disabled={maxZoom < nextZoomIn}
         onClick={() => setZoomLevel(nextZoomIn)}
@@ -57,13 +60,14 @@ type PagerProps = {
 const Pager = ({ pageCursor, pageNum, setPageCursor, style }: PagerProps) => {
   return (
     <div style={{ display: 'flex', alignItems: 'center' }}>
-      <Button type="text" disabled={pageCursor <= 0} onClick={() => setPageCursor(pageCursor - 1)}>
+      <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)}
@@ -80,7 +84,7 @@ type ContextMenuProps = {
 };
 const ContextMenu = ({ items, style }: ContextMenuProps) => (
   <Dropdown menu={{ items }} placement="top" arrow trigger={['click']}>
-    <Button type="text">
+    <Button className={UI_CLASSNAME + 'context-menu'} type="text">
       <Ellipsis size={16} color={style.textStyle.color} />
     </Button>
   </Dropdown>
@@ -139,6 +143,7 @@ const CtlBar = (props: CtlBarProps) => {
   return (
     <div style={{ position: 'absolute', top: 'auto', bottom: '6%', width: size.width }}>
       <div
+        className={UI_CLASSNAME + 'control-bar'}
         style={{
           display: 'flex',
           alignItems: 'center',
@@ -155,14 +160,18 @@ const CtlBar = (props: CtlBarProps) => {
         }}
       >
         {pageNum > 1 && (
-          <Pager
-            style={{ textStyle }}
-            pageCursor={pageCursor}
-            pageNum={pageNum}
-            setPageCursor={setPageCursor}
-          />
+          <div className={UI_CLASSNAME + 'pager'}>
+            <Pager
+              style={{ textStyle }}
+              pageCursor={pageCursor}
+              pageNum={pageNum}
+              setPageCursor={setPageCursor}
+            />
+          </div>
         )}
-        <Zoom style={{ textStyle }} zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
+        <div className={UI_CLASSNAME + 'zoom'}>
+          <Zoom style={{ textStyle }} zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
+        </div>
         {contextMenuItems.length > 0 && (
           <ContextMenu items={contextMenuItems} style={{ textStyle }} />
         )}

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

@@ -22,9 +22,9 @@ import {
 } from '@pdfme/common';
 import { PluginsRegistry } from '../../../contexts.js';
 import { X } from 'lucide-react';
-import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH } from '../../../constants.js';
+import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH, DESIGNER_CLASSNAME } from '../../../constants.js';
 import { usePrevious } from '../../../hooks.js';
-import { uuid, round, flatten } from '../../../helper.js';
+import { round, flatten, uuid } from '../../../helper.js';
 import Paper from '../../Paper.js';
 import Renderer from '../../Renderer.js';
 import Selecto from './Selecto.js';
@@ -52,6 +52,7 @@ const DeleteButton = ({ activeElements: aes }: { activeElements: HTMLElement[] }
   return (
     <Button
       id={DELETE_BTN_ID}
+      className={DESIGNER_CLASSNAME + 'delete-button'}
       style={{
         position: 'absolute',
         zIndex: 1,
@@ -350,6 +351,7 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
 
   return (
     <div
+      className={DESIGNER_CLASSNAME + 'canvas'}
       style={{
         position: 'relative',
         overflow: 'auto',

package/src/components/Designer/LeftSidebar.tsx

@@ -4,7 +4,7 @@ import { theme, Button } from 'antd';
 import { useDraggable } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
 import Renderer from '../Renderer.js';
-import { LEFT_SIDEBAR_WIDTH } from '../../constants.js';
+import { LEFT_SIDEBAR_WIDTH, DESIGNER_CLASSNAME } from '../../constants.js';
 import { setFontNameRecursively } from '../../helper';
 import { OptionsContext, PluginsRegistry } from '../../contexts.js';
 import PluginIcon from './PluginIcon.js';
@@ -83,6 +83,7 @@ const LeftSidebar = ({
 
   return (
     <div
+      className={DESIGNER_CLASSNAME + 'left-sidebar'}
       style={{
         left: 0,
         right: 0,
@@ -98,9 +99,12 @@ const LeftSidebar = ({
       {pluginsRegistry.entries().map(([label, plugin]) => {
         if (!plugin?.propPanel.defaultSchema) return null;
 
+        const pluginType = plugin.propPanel.defaultSchema.type;
+
         return (
           <Draggable key={label} scale={scale} basePdf={basePdf} plugin={plugin}>
             <Button
+              className={DESIGNER_CLASSNAME + 'plugin-' + pluginType}
               onMouseDown={() => setIsDragging(true)}
               style={{ width: 35, height: 35, marginTop: '0.25rem', padding: '0.25rem' }}
             >

package/src/components/Designer/RightSidebar/DetailView/AlignWidget.tsx

@@ -1,6 +1,7 @@
 import { Space, Button, Form } from 'antd';
 import React from 'react';
 import type { PropPanelWidgetProps } from '@pdfme/common';
+import { DESIGNER_CLASSNAME } from '../../../../constants.js';
 import {
   AlignStartVertical,
   AlignStartHorizontal,
@@ -213,6 +214,7 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
       <Space.Compact>
         {layoutBtns.map((btn) => (
           <Button
+            className={DESIGNER_CLASSNAME + 'align-' + btn.id}
             key={btn.id}
             style={{ padding: 7 }}
             disabled={activeElements.length <= 2 && ['vertical', 'horizontal'].includes(btn.id)}

package/src/components/Designer/RightSidebar/DetailView/index.tsx

@@ -13,6 +13,7 @@ import type { SidebarProps } from '../../../../types.js';
 import { Menu } from 'lucide-react';
 import { I18nContext, PluginsRegistry, OptionsContext } from '../../../../contexts.js';
 import { getSidebarContentHeight, debounce } from '../../../../helper.js';
+import { DESIGNER_CLASSNAME } from '../../../../constants.js';
 import { theme, Typography, Button, Divider } from 'antd';
 import AlignWidget from './AlignWidget.js';
 import WidgetRenderer from './WidgetRenderer.js';
@@ -423,9 +424,10 @@ const DetailView = (props: DetailViewProps) => {
   }
 
   return (
-    <div>
+    <div className={DESIGNER_CLASSNAME + 'detail-view'}>
       <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
         <Button
+          className={DESIGNER_CLASSNAME + 'back-button'}
           style={{
             position: 'absolute',
             zIndex: 100,

package/src/components/Designer/RightSidebar/ListView/index.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useState } from 'react';
 import type { SidebarProps } from '../../../../types.js';
-import { RIGHT_SIDEBAR_WIDTH } from '../../../../constants.js';
+import { RIGHT_SIDEBAR_WIDTH, DESIGNER_CLASSNAME } from '../../../../constants.js';
 import { I18nContext } from '../../../../contexts.js';
 import { getSidebarContentHeight } from '../../../../helper.js';
 import { theme, Input, Typography, Divider, Button } from 'antd';
@@ -60,7 +60,7 @@ const ListView = (
   };
 
   return (
-    <div>
+    <div className={DESIGNER_CLASSNAME + 'list-view'}>
       <div style={{ height: headHeight, display: 'flex', alignItems: 'center' }}>
         <Text strong style={{ textAlign: 'center', width: '100%' }}>
           {i18n('fieldsList')}
@@ -99,16 +99,16 @@ const ListView = (
         >
           {isBulkUpdateFieldNamesMode ? (
             <>
-              <Button size="small" type="text" onClick={commitBulk}>
+              <Button className={DESIGNER_CLASSNAME + 'bulk-commit'} size="small" type="text" onClick={commitBulk}>
                 <u> {i18n('commitBulkUpdateFieldName')}</u>
               </Button>
               <span style={{ margin: '0 1rem' }}>/</span>
-              <Button size="small" type="text" onClick={() => setIsBulkUpdateFieldNamesMode(false)}>
+              <Button className={DESIGNER_CLASSNAME + 'bulk-cancel'} size="small" type="text" onClick={() => setIsBulkUpdateFieldNamesMode(false)}>
                 <u> {i18n('cancel')}</u>
               </Button>
             </>
           ) : (
-            <Button size="small" type="text" onClick={startBulk}>
+            <Button className={DESIGNER_CLASSNAME + 'bulk-update'} size="small" type="text" onClick={startBulk}>
               <u> {i18n('bulkUpdateFieldName')}</u>
             </Button>
           )}

package/src/components/Designer/RightSidebar/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { theme, Button } from 'antd';
 import type { SidebarProps } from '../../../types.js';
-import { RIGHT_SIDEBAR_WIDTH } from '../../../constants.js';
+import { RIGHT_SIDEBAR_WIDTH, DESIGNER_CLASSNAME } from '../../../constants.js';
 import { ArrowLeft, ArrowRight } from 'lucide-react';
 import ListView from './ListView/index.js';
 import DetailView from './DetailView/index.js';
@@ -21,6 +21,7 @@ const Sidebar = (props: SidebarProps) => {
 
   return (
     <div
+      className={DESIGNER_CLASSNAME + 'right-sidebar'}
       style={{
         position: 'absolute',
         right: 0,
@@ -31,6 +32,7 @@ const Sidebar = (props: SidebarProps) => {
     >
       <div>
         <Button
+          className={DESIGNER_CLASSNAME + 'sidebar-toggle'}
           style={{
             position: 'absolute',
             display: 'flex',

package/src/components/Root.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, forwardRef, ReactNode, Ref, useEffect } from 'react';
 import { Size } from '@pdfme/common';
 import { FontContext } from '../contexts.js';
-import { BACKGROUND_COLOR } from '../constants.js';
+import { BACKGROUND_COLOR, DESIGNER_CLASSNAME } from '../constants.js';
 import Spinner from './Spinner.js';
 
 type Props = { size: Size; scale: number; children: ReactNode };
@@ -29,8 +29,8 @@ const Root = ({ size, scale, children }: Props, ref: Ref<HTMLDivElement>) => {
   }, [font]);
 
   return (
-    <div ref={ref} style={{ position: 'relative', background: BACKGROUND_COLOR, ...size }}>
-      <div style={{ margin: '0 auto', ...size }}>{scale === 0 ? <Spinner /> : children}</div>
+    <div className={DESIGNER_CLASSNAME + 'root'} ref={ref} style={{ position: 'relative', background: BACKGROUND_COLOR, ...size }}>
+      <div className={DESIGNER_CLASSNAME + 'background'} style={{ margin: '0 auto', ...size }}>{scale === 0 ? <Spinner /> : children}</div>
     </div>
   );
 };

package/src/constants.ts

@@ -15,3 +15,7 @@ export const RIGHT_SIDEBAR_WIDTH = 400;
 export const BACKGROUND_COLOR = 'rgb(74, 74, 74)';
 
 export const DEFAULT_MAX_ZOOM = 2;
+
+export const DESIGNER_CLASSNAME = 'pdfme-designer-';
+
+export const UI_CLASSNAME = 'pdfme-ui-';