@pdfme/ui 5.3.11-dev.1 → 5.3.11-dev.10

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

@@ -1,11 +1,12 @@
 import { useForm } from 'form-render';
 import React, { useRef, useContext, useState, useEffect } from 'react';
 import type {
-  ChangeSchemaItem,
   Dict,
+  ChangeSchemaItem,
   SchemaForUI,
   PropPanelWidgetProps,
   PropPanelSchema,
+  Schema,
 } from '@pdfme/common';
 import type { SidebarProps } from '../../../../types.js';
 import { Menu } from 'lucide-react';
@@ -44,6 +45,12 @@ const DetailView = (props: DetailViewProps) => {
   const i18n = useContext(I18nContext);
   const pluginsRegistry = useContext(PluginsRegistry);
   const options = useContext(OptionsContext);
+  
+  // Define a type-safe i18n function that accepts string keys
+  const typedI18n = (key: string): string => {
+    // Use a type assertion to handle the union type constraint
+    return typeof i18n === 'function' ? i18n(key as keyof Dict) : key;
+  };
 
   const [widgets, setWidgets] = useState<{
     [key: string]: (props: PropPanelWidgetProps) => React.JSX.Element;
@@ -66,7 +73,7 @@ const DetailView = (props: DetailViewProps) => {
             {...props}
             options={options}
             theme={token}
-            i18n={i18n as (key: keyof Dict | string) => string}
+            i18n={typedI18n}
             widget={widgetValue}
           />
         );
@@ -76,8 +83,11 @@ const DetailView = (props: DetailViewProps) => {
   }, [activeSchema, pluginsRegistry, JSON.stringify(options)]);
 
   useEffect(() => {
-    const values: any = { ...activeSchema };
-    values.editable = !values.readOnly;
+    // Create a type-safe copy of the schema with editable property
+    const values: Record<string, unknown> = { ...activeSchema };
+    // Safely access and set properties
+    const readOnly = typeof values.readOnly === 'boolean' ? values.readOnly : false;
+    values.editable = !readOnly;
     form.setValues(values);
   }, [activeSchema, form]);
 
@@ -96,14 +106,26 @@ const DetailView = (props: DetailViewProps) => {
     };
   }, [schemasList, activeSchema]);
 
-  const uniqueSchemaName = useRef((value: string): boolean => true);
+  // Reference to a function that validates schema name uniqueness
+  const uniqueSchemaName = useRef(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    (_unused: string): boolean => true
+  );
 
-  const validateUniqueSchemaName = (_: any, value: string): boolean =>
-    uniqueSchemaName.current(value);
+  // Use proper type for validator function parameter
+  const validateUniqueSchemaName = (
+    _: unknown, 
+    value: string
+  ): boolean => uniqueSchemaName.current(value);
 
-  const handleWatch = debounce((formSchema: any) => {
-    const formAndSchemaValuesDiffer = (formValue: any, schemaValue: any): boolean => {
-      if (typeof formValue === 'object') {
+  // Use explicit type for debounce function that matches the expected signature
+  const handleWatch = debounce(function(...args: unknown[]) {
+    const formSchema = args[0] as Record<string, unknown>;
+    const formAndSchemaValuesDiffer = (
+      formValue: unknown, 
+      schemaValue: unknown
+    ): boolean => {
+      if (typeof formValue === 'object' && formValue !== null) {
         return JSON.stringify(formValue) !== JSON.stringify(schemaValue);
       }
       return formValue !== schemaValue;
@@ -114,7 +136,7 @@ const DetailView = (props: DetailViewProps) => {
       if (['id', 'content'].includes(key)) continue;
 
       let value = formSchema[key];
-      if (formAndSchemaValuesDiffer(value, (activeSchema as any)[key])) {
+      if (formAndSchemaValuesDiffer(value, (activeSchema as Record<string, unknown>)[key])) {
         // FIXME memo: https://github.com/pdfme/pdfme/pull/367#issuecomment-1857468274
         if (value === null && ['rotate', 'opacity'].includes(key)) {
           value = undefined;
@@ -154,28 +176,98 @@ const DetailView = (props: DetailViewProps) => {
     }
   }, 100);
 
+  // Find the active plugin with proper type safety
   const activePlugin = Object.values(pluginsRegistry).find(
-    (plugin) => plugin?.propPanel.defaultSchema.type === activeSchema.type,
-  )!;
+    (plugin) => {
+      if (!plugin || typeof plugin !== 'object') return false;
+      if (!plugin.propPanel || typeof plugin.propPanel !== 'object') return false;
+      if (!plugin.propPanel.defaultSchema || typeof plugin.propPanel.defaultSchema !== 'object') return false;
+      
+      const defaultSchema = plugin.propPanel.defaultSchema as Record<string, unknown>;
+      return 'type' in defaultSchema && 
+             typeof defaultSchema.type === 'string' && 
+             defaultSchema.type === activeSchema.type;
+    }
+  );
 
-  const activePropPanelSchema = activePlugin?.propPanel.schema;
+  // Safely access the propPanel schema
+  const activePropPanelSchema = activePlugin?.propPanel?.schema;
   if (!activePropPanelSchema) {
     console.error(`[@pdfme/ui] No propPanel.schema for ${activeSchema.type}.
 Check this document: https://pdfme.com/docs/custom-schemas`);
   }
 
-  const typeOptions = Object.entries(pluginsRegistry).map(([label, value]) => ({
-    label,
-    value: value?.propPanel.defaultSchema.type,
-  }));
-  const defaultSchema = activePlugin.propPanel.defaultSchema;
+  // Create type-safe options for the type dropdown
+  // Create a type-safe options array for the dropdown
+  const typeOptions: Array<{ label: string; value: string | undefined }> = [];
+  
+  // Safely populate the options array
+  Object.entries(pluginsRegistry).forEach(([label, value]) => {
+    // Skip invalid plugins
+    if (!value || typeof value !== 'object') {
+      typeOptions.push({ label, value: undefined });
+      return;
+    }
+    
+    if (!('propPanel' in value) || 
+        !value.propPanel || 
+        typeof value.propPanel !== 'object') {
+      typeOptions.push({ label, value: undefined });
+      return;
+    }
+    
+    if (!('defaultSchema' in value.propPanel) || 
+        !value.propPanel.defaultSchema || 
+        typeof value.propPanel.defaultSchema !== 'object') {
+      typeOptions.push({ label, value: undefined });
+      return;
+    }
+    
+    // Safely extract the type
+    const defaultSchema = value.propPanel.defaultSchema as Record<string, unknown>;
+    let schemaType: string | undefined = undefined;
+    
+    if ('type' in defaultSchema && typeof defaultSchema.type === 'string') {
+      schemaType = defaultSchema.type;
+    }
+    
+    typeOptions.push({ label, value: schemaType });
+  });
+  // Create a safe empty schema as fallback
+  const emptySchema: Record<string, unknown> = {};
+  
+  // Safely access the default schema with proper null checking
+  const defaultSchema: Record<string, unknown> = 
+    activePlugin?.propPanel?.defaultSchema ? 
+    // Create a safe copy of the schema
+    (() => {
+      // First check if the defaultSchema is an object
+      if (typeof activePlugin.propPanel.defaultSchema !== 'object' || 
+          activePlugin.propPanel.defaultSchema === null) {
+        return emptySchema;
+      }
+      
+      // Create a safe copy
+      const result: Record<string, unknown> = {};
+      
+      // Only copy properties that exist on the object
+      for (const key in activePlugin.propPanel.defaultSchema) {
+        if (Object.prototype.hasOwnProperty.call(activePlugin.propPanel.defaultSchema, key)) {
+          result[key] = (activePlugin.propPanel.defaultSchema as Record<string, unknown>)[key];
+        }
+      }
+      
+      return result;
+    })() : 
+    emptySchema;
 
+  // Create a type-safe schema object
   const propPanelSchema: PropPanelSchema = {
     type: 'object',
     column: 2,
     properties: {
       type: {
-        title: i18n('type'),
+        title: typedI18n('type'),
         type: 'string',
         widget: 'select',
         props: { options: typeOptions },
@@ -183,32 +275,32 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         span: 12,
       },
       name: {
-        title: i18n('fieldName'),
+        title: typedI18n('fieldName'),
         type: 'string',
         required: true,
         span: 12,
         rules: [
           {
             validator: validateUniqueSchemaName,
-            message: i18n('validation.uniqueName'),
+            message: typedI18n('validation.uniqueName'),
           },
         ],
         props: { autoComplete: 'off' },
       },
       editable: {
-        title: i18n('editable'),
+        title: typedI18n('editable'),
         type: 'boolean',
         span: 8,
-        hidden: defaultSchema?.readOnly !== undefined,
+        hidden: typeof defaultSchema.readOnly !== 'undefined',
       },
       required: {
-        title: i18n('required'),
+        title: typedI18n('required'),
         type: 'boolean',
         span: 16,
         hidden: '{{!formData.editable}}',
       },
       '-': { type: 'void', widget: 'Divider' },
-      align: { title: i18n('align'), type: 'void', widget: 'AlignWidget' },
+      align: { title: typedI18n('align'), type: 'void', widget: 'AlignWidget' },
       position: {
         type: 'object',
         widget: 'card',
@@ -218,7 +310,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         },
       },
       width: {
-        title: i18n('width'),
+        title: typedI18n('width'),
         type: 'number',
         widget: 'inputNumber',
         required: true,
@@ -226,7 +318,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         props: { min: 0 },
       },
       height: {
-        title: i18n('height'),
+        title: typedI18n('height'),
         type: 'number',
         widget: 'inputNumber',
         required: true,
@@ -234,46 +326,65 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         props: { min: 0 },
       },
       rotate: {
-        title: i18n('rotate'),
+        title: typedI18n('rotate'),
         type: 'number',
         widget: 'inputNumber',
-        disabled: defaultSchema?.rotate === undefined,
+        disabled: typeof defaultSchema.rotate === 'undefined',
         max: 360,
         props: { min: 0 },
         span: 6,
       },
       opacity: {
-        title: i18n('opacity'),
+        title: typedI18n('opacity'),
         type: 'number',
         widget: 'inputNumber',
-        disabled: defaultSchema?.opacity === undefined,
+        disabled: typeof defaultSchema.opacity === 'undefined',
         props: { step: 0.1, min: 0, max: 1 },
         span: 6,
       },
     },
   };
 
+  // Create a safe copy of the properties
+  const safeProperties = { ...propPanelSchema.properties };
+  
   if (typeof activePropPanelSchema === 'function') {
-    const { schemasList: _, ...propPanelProps } = props;
+    // Create a new object without the schemasList property
+    const { size, schemas, pageSize, changeSchemas, activeElements, deselectSchema, activeSchema } = props;
+    const propPanelProps = { size, schemas, pageSize, changeSchemas, activeElements, deselectSchema, activeSchema };
 
-    const apps =
-      activePropPanelSchema({
-        ...propPanelProps,
-        options,
-        theme: token,
-        i18n: i18n as (key: keyof Dict | string) => string,
-      }) || {};
+    // Use the typedI18n function to avoid type issues
+    const functionResult = activePropPanelSchema({
+      ...propPanelProps,
+      options,
+      theme: token,
+      i18n: typedI18n,
+    });
+    
+    // Safely handle the result
+    const apps = functionResult && typeof functionResult === 'object' ? functionResult : {};
+    
+    // Create a divider if needed
+    const dividerObj = Object.keys(apps).length === 0 ? {} : { '--': { type: 'void', widget: 'Divider' } };
+    
+    // Assign properties safely - use type assertion to satisfy TypeScript
     propPanelSchema.properties = {
-      ...propPanelSchema.properties,
-      ...(Object.keys(apps).length === 0 ? {} : { '--': { type: 'void', widget: 'Divider' } }),
-      ...apps,
+      ...safeProperties,
+      ...(dividerObj as Record<string, Partial<Schema>>),
+      ...(apps as Record<string, Partial<Schema>>),
     };
   } else {
-    const apps = activePropPanelSchema || {};
+    // Handle non-function case
+    const apps = activePropPanelSchema && typeof activePropPanelSchema === 'object' ? activePropPanelSchema : {};
+    
+    // Create a divider if needed
+    const dividerObj = Object.keys(apps).length === 0 ? {} : { '--': { type: 'void', widget: 'Divider' } };
+    
+    // Assign properties safely - use type assertion to satisfy TypeScript
     propPanelSchema.properties = {
-      ...propPanelSchema.properties,
-      ...(Object.keys(apps).length === 0 ? {} : { '--': { type: 'void', widget: 'Divider' } }),
-      ...apps,
+      ...safeProperties,
+      ...(dividerObj as Record<string, Partial<Schema>>),
+      ...(apps as Record<string, Partial<Schema>>),
     };
   }
 
@@ -292,7 +403,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
           icon={<Menu strokeWidth={1.5} size={20} />}
         />
         <Text strong style={{ textAlign: 'center', width: '100%' }}>
-          {i18n('editField')}
+          {typedI18n('editField')}
         </Text>
       </div>
       <Divider style={{ marginTop: token.marginXS, marginBottom: token.marginXS }} />

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

@@ -6,28 +6,49 @@ import { Button, Typography } from 'antd';
 
 const { Text } = Typography;
 
+// Define prop types for Item component
 interface Props {
+  /** Content to display in the item */
   value: React.ReactNode;
+  /** Optional icon to display */
   icon?: React.ReactNode;
+  /** Custom styles for the item */
   style?: React.CSSProperties;
+  /** Status indicator for the item */
   status?: 'is-warning' | 'is-danger';
+  /** Title attribute for the item */
   title?: string;
+  /** Whether the item is required */
   required?: boolean;
+  /** Whether the item is read-only */
   readOnly?: boolean;
+  /** Whether the item is being dragged as an overlay */
   dragOverlay?: boolean;
+  /** Click handler for the item */
   onClick?: () => void;
+  /** Mouse enter handler */
   onMouseEnter?: () => void;
+  /** Mouse leave handler */
   onMouseLeave?: () => void;
+  /** Whether the item is currently being dragged */
   dragging?: boolean;
+  /** Whether items are being sorted */
   sorting?: boolean;
+  /** CSS transition value */
   transition?: string;
+  /** Transform data for the item */
   transform?: { x: number; y: number; scaleX: number; scaleY: number } | null;
+  /** Whether to fade the item in */
   fadeIn?: boolean;
+  /** Drag listeners from dnd-kit */
   listeners?: DraggableSyntheticListeners;
 }
+// Using React.memo and forwardRef for optimized rendering
+// Using TypeScript interface for prop validation instead of PropTypes
 const Item = React.memo(
+  /* eslint-disable react/prop-types */
   React.forwardRef<HTMLLIElement, Props>(
-    (
+    function Item(
       {
         icon,
         value,
@@ -40,16 +61,20 @@ const Item = React.memo(
         onClick,
         onMouseEnter,
         onMouseLeave,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         dragging,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         fadeIn,
         listeners,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         sorting,
         transition,
         transform,
         ...props
       },
       ref,
-    ) => {
+    ) {
+    /* eslint-enable react/prop-types */
       const i18n = useContext(I18nContext);
 
       useEffect(() => {
@@ -129,4 +154,7 @@ const Item = React.memo(
   ),
 );
 
+// Set display name for debugging
+Item.displayName = 'Item';
+
 export default Item;

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

@@ -59,12 +59,31 @@ const SelectableSortableContainer = (
   };
 
   const getPluginIcon = (inSchema: string | SchemaForUI): ReactNode => {
+    // Get schema by ID or use directly
     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,
-    )!;
+    
+    if (!thisSchema) return <></>;
+    
+    // Safely extract schema type
+    const schemaType = typeof thisSchema.type === 'string' ? thisSchema.type : '';
+    
+    // Find matching plugin with type-safe approach
+    const pluginEntry = Object.entries(pluginsRegistry).find(
+      ([, plugin]) => {
+        if (!plugin || typeof plugin !== 'object') return false;
+        if (!plugin.propPanel || typeof plugin.propPanel !== 'object') return false;
+        if (!plugin.propPanel.defaultSchema || typeof plugin.propPanel.defaultSchema !== 'object') return false;
+        
+        // Use Record<string, unknown> to safely access properties
+        const defaultSchema = plugin.propPanel.defaultSchema as Record<string, unknown>;
+        return 'type' in defaultSchema && 
+               typeof defaultSchema.type === 'string' && 
+               defaultSchema.type === schemaType;
+      }
+    );
+    
+    const [pluginLabel, activePlugin] = pluginEntry || ['', undefined];
 
     if (!activePlugin) {
       return <></>;

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

@@ -39,12 +39,28 @@ const SelectableSortableItem = ({
 
   const newListeners = {
     ...listeners,
-    onClick: (event: any) => onSelect(schema.id, event.shiftKey),
+    onClick: (event: React.MouseEvent) => onSelect(schema.id, event.shiftKey),
   };
 
-  const [pluginLabel, thisPlugin] = Object.entries(pluginsRegistry).find(
-    ([label, plugin]) => plugin?.propPanel.defaultSchema.type === schema.type,
-  )!;
+  // Safely extract schema type
+  const schemaType = typeof schema.type === 'string' ? schema.type : '';
+  
+  // Find matching plugin with type-safe approach
+  const pluginEntry = Object.entries(pluginsRegistry).find(
+    ([, plugin]) => {
+      if (!plugin || typeof plugin !== 'object') return false;
+      if (!plugin.propPanel || typeof plugin.propPanel !== 'object') return false;
+      if (!plugin.propPanel.defaultSchema || typeof plugin.propPanel.defaultSchema !== 'object') return false;
+      
+      // Use Record<string, unknown> to safely access properties
+      const defaultSchema = plugin.propPanel.defaultSchema as Record<string, unknown>;
+      return 'type' in defaultSchema && 
+             typeof defaultSchema.type === 'string' && 
+             defaultSchema.type === schemaType;
+    }
+  );
+  
+  const [pluginLabel, thisPlugin] = pluginEntry || ['', undefined];
 
   let status: undefined | 'is-warning' | 'is-danger';
   if (!schema.name) {

package/src/components/Designer/index.tsx

@@ -24,7 +24,7 @@ import {
   template2SchemasList,
   getPagesScrollTopByIndex,
   changeSchemas as _changeSchemas,
-  getMaxZoom,
+  useMaxZoom,
 } from '../../helper.js';
 import { useUIPreProcessor, useScrollPageCursor, useInitEvents } from '../../hooks.js';
 import Root from '../Root.js';
@@ -64,7 +64,7 @@ const TemplateEditor = ({
   const i18n = useContext(I18nContext);
   const pluginsRegistry = useContext(PluginsRegistry);
   const options = useContext(OptionsContext);
-  const maxZoom = getMaxZoom();
+  const maxZoom = useMaxZoom();
 
   const [hoveringSchemaId, setHoveringSchemaId] = useState<string | null>(null);
   const [activeElements, setActiveElements] = useState<HTMLElement[]>([]);
@@ -227,12 +227,13 @@ const TemplateEditor = ({
     onChangeTemplate(newTemplate);
     await updateTemplate(newTemplate);
     void refresh(newTemplate);
-    setTimeout(
-      () =>
-        canvasRef.current &&
-        ((canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, newPageCursor, scale)),
-        0),
-    );
+    
+    // Use setTimeout to update scroll position after render
+    setTimeout(() => {
+      if (canvasRef.current) {
+        canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, newPageCursor, scale);
+      }
+    }, 0);
   };
 
   const handleRemovePage = () => {
@@ -262,6 +263,7 @@ const TemplateEditor = ({
   };
 
   if (error) {
+    // Pass the error directly to ErrorScreen
     return <ErrorScreen size={size} error={error} />;
   }
   const pageManipulation = isBlankPdf(template.basePdf)
@@ -309,6 +311,7 @@ const TemplateEditor = ({
             pageNum={schemasList.length}
             setPageCursor={(p) => {
               if (!canvasRef.current) return;
+              // Update scroll position and state
               canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
               setPageCursor(p);
               onEditEnd();
@@ -331,7 +334,9 @@ const TemplateEditor = ({
             onSortEnd={onSortEnd}
             onEdit={(id) => {
               const editingElem = document.getElementById(id);
-              editingElem && onEdit([editingElem]);
+              if (editingElem) {
+                onEdit([editingElem]);
+              }
             }}
             onEditEnd={onEditEnd}
             deselectSchema={onEditEnd}

package/src/components/Preview.tsx

@@ -17,10 +17,10 @@ import Paper from './Paper.js';
 import Renderer from './Renderer.js';
 import { useUIPreProcessor, useScrollPageCursor } from '../hooks.js';
 import { FontContext } from '../contexts.js';
-import { template2SchemasList, getPagesScrollTopByIndex, getMaxZoom } from '../helper.js';
+import { template2SchemasList, getPagesScrollTopByIndex, useMaxZoom } from '../helper.js';
 import { theme } from 'antd';
 
-const _cache = new Map();
+const _cache = new Map<string | number, unknown>();
 
 const Preview = ({
   template,
@@ -34,7 +34,7 @@ const Preview = ({
   const { token } = theme.useToken();
 
   const font = useContext(FontContext);
-  const maxZoom = getMaxZoom();
+  const maxZoom = useMaxZoom();
 
   const containerRef = useRef<HTMLDivElement>(null);
   const paperRefs = useRef<HTMLDivElement[]>([]);
@@ -98,7 +98,7 @@ const Preview = ({
   const handleChangeInput = ({ name, value }: { name: string; value: string }) =>
     onChangeInput && onChangeInput({ index: unitCursor, name, value });
 
-  const handleOnChangeRenderer = (args: { key: string; value: any }[], schema: SchemaForUI) => {
+  const handleOnChangeRenderer = (args: { key: string; value: unknown }[], schema: SchemaForUI) => {
     let isNeedInit = false;
     args.forEach(({ key: _key, value }) => {
       if (_key === 'content') {
@@ -112,7 +112,7 @@ const Preview = ({
         const targetSchema = schemasList[pageCursor].find((s) => s.id === schema.id) as SchemaForUI;
         if (!targetSchema) return;
 
-        // @ts-ignore
+        // @ts-expect-error Dynamic property assignment
         targetSchema[_key] = value as string;
       }
     });