@pdfme/ui 5.3.8-dev.6 → 5.3.8-dev.60

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

@@ -10,8 +10,8 @@ import {
   AlignEndHorizontal,
   AlignVerticalSpaceAround,
   AlignHorizontalSpaceAround,
-} from 'lucide-react'
-import { round } from '../../../../helper';
+} from 'lucide-react';
+import { round } from '../../../../helper.js';
 
 const AlignWidget = (props: PropPanelWidgetProps) => {
   const { activeElements, changeSchemas, schemas, pageSize, schema } = props;
@@ -44,7 +44,7 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
         key: `position.${tgtPos}`,
         value: round(basePos - adjust(as[tgtSize]), 2),
         schemaId: as.id,
-      }))
+      })),
     );
   };
 
@@ -72,7 +72,7 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
         prev += index === 0 ? 0 : ass[index - 1][tgtSize] + unit;
         const value = round(boxPos + prev, 2);
         return { key: `position.${tgtPos}`, value, schemaId: as.id };
-      })
+      }),
     );
   };
   const layoutBtns: {
@@ -80,47 +80,47 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
     icon: React.JSX.Element;
     onClick: () => void;
   }[] = [
-      {
-        id: 'left',
-        icon: <AlignStartVertical size={15} />,
-        onClick: () => align('left')
-      },
-      {
-        id: 'center',
-        icon: <AlignCenterVertical size={15} />,
-        onClick: () => align('center')
-      },
-      {
-        id: 'right',
-        icon: <AlignEndVertical size={15} />,
-        onClick: () => align('right')
-      },
-      {
-        id: 'top',
-        icon: <AlignStartHorizontal size={15} />,
-        onClick: () => align('top')
-      },
-      {
-        id: 'middle',
-        icon: <AlignCenterHorizontal size={15} />,
-        onClick: () => align('middle')
-      },
-      {
-        id: 'bottom',
-        icon: <AlignEndHorizontal size={15} />,
-        onClick: () => align('bottom')
-      },
-      {
-        id: 'vertical',
-        icon: <AlignVerticalSpaceAround size={15} />,
-        onClick: () => distribute('vertical')
-      },
-      {
-        id: 'horizontal',
-        icon: <AlignHorizontalSpaceAround size={15} />,
-        onClick: () => distribute('horizontal')
-      },
-    ];
+    {
+      id: 'left',
+      icon: <AlignStartVertical size={15} />,
+      onClick: () => align('left'),
+    },
+    {
+      id: 'center',
+      icon: <AlignCenterVertical size={15} />,
+      onClick: () => align('center'),
+    },
+    {
+      id: 'right',
+      icon: <AlignEndVertical size={15} />,
+      onClick: () => align('right'),
+    },
+    {
+      id: 'top',
+      icon: <AlignStartHorizontal size={15} />,
+      onClick: () => align('top'),
+    },
+    {
+      id: 'middle',
+      icon: <AlignCenterHorizontal size={15} />,
+      onClick: () => align('middle'),
+    },
+    {
+      id: 'bottom',
+      icon: <AlignEndHorizontal size={15} />,
+      onClick: () => align('bottom'),
+    },
+    {
+      id: 'vertical',
+      icon: <AlignVerticalSpaceAround size={15} />,
+      onClick: () => distribute('vertical'),
+    },
+    {
+      id: 'horizontal',
+      icon: <AlignHorizontalSpaceAround size={15} />,
+      onClick: () => distribute('horizontal'),
+    },
+  ];
 
   return (
     <Form.Item label={schema.title}>

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

@@ -22,7 +22,7 @@ const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
         const oldValue = s[key] ?? false;
         const newValue = type === 'boolean' ? !oldValue : btn.value;
         return { key, value: newValue, schemaId: s.id };
-      })
+      }),
     );
   };
 
@@ -33,7 +33,7 @@ const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
     const ids = activeElements.map((ae) => ae.id);
     const ass = schemas.filter((s) => ids.includes(s.id)) as SchemaForUI[];
     ass.forEach((s: Record<string, any>) => {
-      active = type === 'boolean' ? s[key] ?? false : s[key] === btn.value;
+      active = type === 'boolean' ? (s[key] ?? false) : s[key] === btn.value;
     });
     return active;
   };
@@ -43,7 +43,7 @@ const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
 
   const svgIcon = (svgString: string) => {
     const svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(
-      replaceCurrentColor(svgString, token.colorText)
+      replaceCurrentColor(svgString, token.colorText),
     )}`;
     return <img width={17} height={17} src={svgDataUrl} />;
   };

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

@@ -1,20 +1,36 @@
-import FormRender, { useForm } from 'form-render';
+import { useForm } from 'form-render';
 import React, { useRef, useContext, useState, useEffect } from 'react';
-import type { ChangeSchemaItem, Dict, SchemaForUI, PropPanelWidgetProps, PropPanelSchema } from '@pdfme/common';
-import type { SidebarProps } from '../../../../types';
+import type {
+  ChangeSchemaItem,
+  Dict,
+  SchemaForUI,
+  PropPanelWidgetProps,
+  PropPanelSchema,
+} from '@pdfme/common';
+import type { SidebarProps } from '../../../../types.js';
 import { Menu } from 'lucide-react';
-import { I18nContext, PluginsRegistry, OptionsContext } from '../../../../contexts';
-import { getSidebarContentHeight, debounce } from '../../../../helper';
+import { I18nContext, PluginsRegistry, OptionsContext } from '../../../../contexts.js';
+import { getSidebarContentHeight, debounce } from '../../../../helper.js';
 import { theme, Typography, Button, Divider } from 'antd';
-import AlignWidget from './AlignWidget';
-import WidgetRenderer from './WidgetRenderer';
-import ButtonGroupWidget from './ButtonGroupWidget';
-import { InternalNamePath, ValidateErrorEntity } from "rc-field-form/es/interface";
+import AlignWidget from './AlignWidget.js';
+import WidgetRenderer from './WidgetRenderer.js';
+import ButtonGroupWidget from './ButtonGroupWidget.js';
+import { InternalNamePath, ValidateErrorEntity } from 'rc-field-form/es/interface.js';
+
+// Import FormRender as a default import
+import FormRenderComponent from 'form-render';
 
 const { Text } = Typography;
 
-type DetailViewProps = Pick<SidebarProps,
-  'size' | 'schemas' | 'schemasList' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'
+type DetailViewProps = Pick<
+  SidebarProps,
+  | 'size'
+  | 'schemas'
+  | 'schemasList'
+  | 'pageSize'
+  | 'changeSchemas'
+  | 'activeElements'
+  | 'deselectSchema'
 > & {
   activeSchema: SchemaForUI;
 };
@@ -61,11 +77,11 @@ const DetailView = (props: DetailViewProps) => {
 
   useEffect(() => {
     const values: any = { ...activeSchema };
-    values.editable = !(values.readOnly)
+    values.editable = !values.readOnly;
     form.setValues(values);
   }, [activeSchema, form]);
 
-  useEffect(() => form.resetFields(), [activeSchema.id])
+  useEffect(() => form.resetFields(), [activeSchema.id]);
 
   useEffect(() => {
     uniqueSchemaName.current = (value: string): boolean => {
@@ -82,7 +98,8 @@ const DetailView = (props: DetailViewProps) => {
 
   const uniqueSchemaName = useRef((value: string): boolean => true);
 
-  const validateUniqueSchemaName = (_: any, value: string): boolean => uniqueSchemaName.current(value)
+  const validateUniqueSchemaName = (_: any, value: string): boolean =>
+    uniqueSchemaName.current(value);
 
   const handleWatch = debounce((formSchema: any) => {
     const formAndSchemaValuesDiffer = (formValue: any, schemaValue: any): boolean => {
@@ -90,7 +107,7 @@ const DetailView = (props: DetailViewProps) => {
         return JSON.stringify(formValue) !== JSON.stringify(schemaValue);
       }
       return formValue !== schemaValue;
-    }
+    };
 
     let changes: ChangeSchemaItem[] = [];
     for (const key in formSchema) {
@@ -118,15 +135,17 @@ const DetailView = (props: DetailViewProps) => {
 
     if (changes.length) {
       // Only commit these schema changes if they have passed form validation
-      form.validateFields()
+      form
+        .validateFields()
         .then(() => changeSchemas(changes))
         .catch((reason: ValidateErrorEntity) => {
           if (reason.errorFields.length) {
-            changes = changes.filter((change: ChangeSchemaItem) => !reason.errorFields.find((field: {
-              name: InternalNamePath;
-              errors: string[];
-            }) => field.name.includes(change.key)
-            ));
+            changes = changes.filter(
+              (change: ChangeSchemaItem) =>
+                !reason.errorFields.find((field: { name: InternalNamePath; errors: string[] }) =>
+                  field.name.includes(change.key),
+                ),
+            );
           }
           if (changes.length) {
             changeSchemas(changes);
@@ -136,7 +155,7 @@ const DetailView = (props: DetailViewProps) => {
   }, 100);
 
   const activePlugin = Object.values(pluginsRegistry).find(
-    (plugin) => plugin?.propPanel.defaultSchema.type === activeSchema.type
+    (plugin) => plugin?.propPanel.defaultSchema.type === activeSchema.type,
   )!;
 
   const activePropPanelSchema = activePlugin?.propPanel.schema;
@@ -168,14 +187,26 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         type: 'string',
         required: true,
         span: 12,
-        rules: [{
-          validator: validateUniqueSchemaName,
-          message: i18n('validation.uniqueName'),
-        }],
-        props: { autoComplete: "off" }
+        rules: [
+          {
+            validator: validateUniqueSchemaName,
+            message: i18n('validation.uniqueName'),
+          },
+        ],
+        props: { autoComplete: 'off' },
+      },
+      editable: {
+        title: i18n('editable'),
+        type: 'boolean',
+        span: 8,
+        hidden: defaultSchema?.readOnly !== undefined,
+      },
+      required: {
+        title: i18n('required'),
+        type: 'boolean',
+        span: 16,
+        hidden: '{{!formData.editable}}',
       },
-      editable: { title: i18n('editable'), type: 'boolean', span: 8, hidden: defaultSchema?.readOnly !== undefined },
-      required: { title: i18n('required'), type: 'boolean', span: 16, hidden: "{{!formData.editable}}" },
       '-': { type: 'void', widget: 'Divider' },
       align: { title: i18n('align'), type: 'void', widget: 'AlignWidget' },
       position: {
@@ -184,7 +215,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         properties: {
           x: { title: 'X', type: 'number', widget: 'inputNumber', required: true, span: 8, min: 0 },
           y: { title: 'Y', type: 'number', widget: 'inputNumber', required: true, span: 8, min: 0 },
-        }
+        },
       },
       width: {
         title: i18n('width'),
@@ -272,7 +303,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
           overflowX: 'hidden',
         }}
       >
-        <FormRender
+        <FormRenderComponent
           form={form}
           schema={propPanelSchema}
           widgets={widgets}

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useContext } from 'react';
 import { DraggableSyntheticListeners } from '@dnd-kit/core';
-import { I18nContext } from '../../../../contexts';
-import { GripVertical, CircleAlert, Lock } from 'lucide-react'
+import { I18nContext } from '../../../../contexts.js';
+import { GripVertical, CircleAlert, Lock } from 'lucide-react';
 import { Button, Typography } from 'antd';
 
 const { Text } = Typography;
@@ -48,7 +48,7 @@ const Item = React.memo(
         transform,
         ...props
       },
-      ref
+      ref,
     ) => {
       const i18n = useContext(I18nContext);
 
@@ -125,8 +125,8 @@ const Item = React.memo(
           </div>
         </li>
       );
-    }
-  )
+    },
+  ),
 );
 
 export default Item;

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

@@ -16,18 +16,18 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { SchemaForUI } from '@pdfme/common';
-import type { SidebarProps } from '../../../../types';
-import { PluginsRegistry } from '../../../../contexts';
-import Item from './Item';
-import SelectableSortableItem from './SelectableSortableItem';
+import type { SidebarProps } from '../../../../types.js';
+import { PluginsRegistry } from '../../../../contexts.js';
+import Item from './Item.js';
+import SelectableSortableItem from './SelectableSortableItem.js';
 import { theme } from 'antd';
-import PluginIcon from "../../PluginIcon";
+import PluginIcon from '../../PluginIcon.js';
 
 const SelectableSortableContainer = (
   props: Pick<
     SidebarProps,
     'schemas' | 'onEdit' | 'onSortEnd' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'
-  >
+  >,
 ) => {
   const { token } = theme.useToken();
   const { schemas, onEdit, onSortEnd, hoveringSchemaId, onChangeHoveringSchemaId } = props;
@@ -37,7 +37,7 @@ const SelectableSortableContainer = (
   const pluginsRegistry = useContext(PluginsRegistry);
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 15 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
   );
 
   const isItemSelected = (itemId: string): boolean =>
@@ -59,17 +59,25 @@ const SelectableSortableContainer = (
   };
 
   const getPluginIcon = (inSchema: string | SchemaForUI): ReactNode => {
-    const thisSchema = (typeof inSchema === 'string') ? schemas.find((schema) => schema.id === inSchema) : inSchema;
+    const thisSchema =
+      typeof inSchema === 'string' ? schemas.find((schema) => schema.id === inSchema) : inSchema;
 
     const [pluginLabel, activePlugin] = Object.entries(pluginsRegistry).find(
-      ([label, plugin]) => plugin?.propPanel.defaultSchema.type === thisSchema?.type
+      ([label, plugin]) => plugin?.propPanel.defaultSchema.type === thisSchema?.type,
     )!;
 
     if (!activePlugin) {
-      return <></>
+      return <></>;
     }
 
-    return <PluginIcon plugin={activePlugin} label={pluginLabel} size={20} styles={{ marginRight: '0.5rem' }} />
+    return (
+      <PluginIcon
+        plugin={activePlugin}
+        label={pluginLabel}
+        size={20}
+        styles={{ marginRight: '0.5rem' }}
+      />
+    );
   };
 
   return (
@@ -90,7 +98,7 @@ const SelectableSortableContainer = (
                 return ret;
               }
               return ret.filter((schema) => schema !== selectedItem);
-            }, schemas)
+            }, schemas),
           );
         }
       }}
@@ -106,7 +114,7 @@ const SelectableSortableContainer = (
           newSchemas.splice(
             overIndex + 1,
             0,
-            ...selectedSchemas.filter((item) => item.id !== activeId)
+            ...selectedSchemas.filter((item) => item.id !== activeId),
           );
           onSortEnd(newSchemas);
           setSelectedSchemas([]);
@@ -133,8 +141,9 @@ const SelectableSortableContainer = (
                 <SelectableSortableItem
                   key={schema.id}
                   style={{
-                    border: `1px solid ${schema.id === hoveringSchemaId ? token.colorPrimary : 'transparent'
-                      }`,
+                    border: `1px solid ${
+                      schema.id === hoveringSchemaId ? token.colorPrimary : 'transparent'
+                    }`,
                   }}
                   schema={schema}
                   schemas={schemas}
@@ -150,43 +159,43 @@ const SelectableSortableContainer = (
         </div>
         {createPortal(
           <DragOverlay adjustScale>
-            {activeId ? (
-              (() => {
-                const activeSchema = schemas.find((schema) => schema.id === activeId);
-                if (!activeSchema) return null;
-                return (
-                  <>
-                    <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
-                      <Item
-                        icon={getPluginIcon(activeId)}
-                        value={activeSchema.name}
-                        required={activeSchema.required}
-                        readOnly={activeSchema.readOnly}
-                        style={{ background: token.colorPrimary }}
-                        dragOverlay
-                      />
-                    </ul>
-                    <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
-                      {selectedSchemas
-                        .filter((item) => item.id !== activeId)
-                        .map((item) => (
-                          <Item
-                            icon={getPluginIcon(item)}
-                            key={item.id}
-                            value={item.name}
-                            required={item.required}
-                            readOnly={item.readOnly}
-                            style={{ background: token.colorPrimary }}
-                            dragOverlay
-                          />
-                        ))}
-                    </ul>
-                  </>
-                );
-              })()
-            ) : null}
+            {activeId
+              ? (() => {
+                  const activeSchema = schemas.find((schema) => schema.id === activeId);
+                  if (!activeSchema) return null;
+                  return (
+                    <>
+                      <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
+                        <Item
+                          icon={getPluginIcon(activeId)}
+                          value={activeSchema.name}
+                          required={activeSchema.required}
+                          readOnly={activeSchema.readOnly}
+                          style={{ background: token.colorPrimary }}
+                          dragOverlay
+                        />
+                      </ul>
+                      <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
+                        {selectedSchemas
+                          .filter((item) => item.id !== activeId)
+                          .map((item) => (
+                            <Item
+                              icon={getPluginIcon(item)}
+                              key={item.id}
+                              value={item.name}
+                              required={item.required}
+                              readOnly={item.readOnly}
+                              style={{ background: token.colorPrimary }}
+                              dragOverlay
+                            />
+                          ))}
+                      </ul>
+                    </>
+                  );
+                })()
+              : null}
           </DragOverlay>,
-          document.body
+          document.body,
         )}
       </>
     </DndContext>

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

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { SchemaForUI } from '@pdfme/common';
-import { PluginsRegistry, I18nContext } from '../../../../contexts';
-import Item from './Item';
-import { useMountStatus } from '../../../../hooks';
+import { PluginsRegistry, I18nContext } from '../../../../contexts.js';
+import Item from './Item.js';
+import { useMountStatus } from '../../../../hooks.js';
 import { theme } from 'antd';
-import PluginIcon from "../../PluginIcon";
+import PluginIcon from '../../PluginIcon.js';
 
 interface Props {
   isSelected: boolean;
@@ -43,10 +43,9 @@ const SelectableSortableItem = ({
   };
 
   const [pluginLabel, thisPlugin] = Object.entries(pluginsRegistry).find(
-    ([label, plugin]) => plugin?.propPanel.defaultSchema.type === schema.type
+    ([label, plugin]) => plugin?.propPanel.defaultSchema.type === schema.type,
   )!;
 
-
   let status: undefined | 'is-warning' | 'is-danger';
   if (!schema.name) {
     status = 'is-warning';

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

@@ -1,10 +1,10 @@
 import React, { useContext, useState } from 'react';
-import type { SidebarProps } from '../../../../types';
-import { RIGHT_SIDEBAR_WIDTH } from '../../../../constants';
-import { I18nContext } from '../../../../contexts';
-import { getSidebarContentHeight } from '../../../../helper';
+import type { SidebarProps } from '../../../../types.js';
+import { RIGHT_SIDEBAR_WIDTH } from '../../../../constants.js';
+import { I18nContext } from '../../../../contexts.js';
+import { getSidebarContentHeight } from '../../../../helper.js';
 import { theme, Input, Typography, Divider, Button } from 'antd';
-import SelectableSortableContainer from './SelectableSortableContainer';
+import SelectableSortableContainer from './SelectableSortableContainer.js';
 
 const { Text } = Typography;
 const { TextArea } = Input;
@@ -21,7 +21,7 @@ const ListView = (
     | 'hoveringSchemaId'
     | 'onChangeHoveringSchemaId'
     | 'changeSchemas'
-  >
+  >,
 ) => {
   const {
     schemas,
@@ -48,7 +48,7 @@ const ListView = (
           key: 'name',
           value,
           schemaId: schemas[index].id,
-        }))
+        })),
       );
       setIsBulkUpdateFieldNamesMode(false);
     }
@@ -89,7 +89,14 @@ const ListView = (
             onEdit={onEdit}
           />
         )}
-        <div style={{ paddingTop: '0.5rem', display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
+        <div
+          style={{
+            paddingTop: '0.5rem',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+          }}
+        >
           {isBulkUpdateFieldNamesMode ? (
             <>
               <Button size="small" type="text" onClick={commitBulk}>

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { theme, Button } from 'antd';
-import type { SidebarProps } from '../../../types';
-import { RIGHT_SIDEBAR_WIDTH } from '../../../constants';
+import type { SidebarProps } from '../../../types.js';
+import { RIGHT_SIDEBAR_WIDTH } from '../../../constants.js';
 import { ArrowLeft, ArrowRight } from 'lucide-react';
-import ListView from './ListView/index';
-import DetailView from './DetailView/index';
+import ListView from './ListView/index.js';
+import DetailView from './DetailView/index.js';
 
 const Sidebar = (props: SidebarProps) => {
   const { sidebarOpen, setSidebarOpen, activeElements, schemas } = props;