chore(ts): fix build:tsc pipeline in pnpm monorepo

.eslintrc.js

@@ -24,7 +24,10 @@ const eslintConfig = {
 			'error',
 			{
 				// Hate it but this is most reliable way to handle it since its already loaded.
-				ignore: [ 'jquery' ],
+				// @popup-maker/* are pnpm workspace packages — the resolver
+				// can't always follow their symlinks in CI, but they resolve
+				// correctly at runtime via tsconfig paths / webpack aliases.
+				ignore: [ 'jquery', '^@popup-maker/' ],
 			},
 		],
 	},

package.json

@@ -98,6 +98,7 @@
 		"react-dom": "^18.3.1",
 		"rtlcss-webpack-plugin": "^4.0.7",
 		"storybook": "8.6.17",
+		"typescript": "5.7.3",
 		"webpack-bundle-analyzer": "^4.10.2"
 	},
 	"scripts": {

packages/block-editor/package.json

@@ -35,15 +35,19 @@
 		"@popup-maker/i18n": "workspace:*",
 		"@popup-maker/icons": "workspace:*",
 		"@wordpress/a11y": "^4.29.0",
+		"@wordpress/api-fetch": "^7.43.0",
 		"@wordpress/base-styles": "^6.5.0",
 		"@wordpress/block-editor": "^15.2.0",
 		"@wordpress/components": "^30.2.0",
 		"@wordpress/compose": "^7.29.0",
 		"@wordpress/data": "^10.29.0",
+		"@wordpress/edit-post": "^8.43.0",
 		"@wordpress/element": "^6.29.0",
 		"@wordpress/hooks": "^4.29.0",
 		"@wordpress/html-entities": "^4.29.0",
+		"@wordpress/i18n": "^6.17.0",
 		"@wordpress/keycodes": "^4.29.0",
+		"@wordpress/plugins": "^7.43.0",
 		"@wordpress/rich-text": "^7.29.0",
 		"clsx": "2.1.1"
 	},

packages/block-editor/src/formats/popup-trigger/index.tsx

@@ -34,15 +34,15 @@ type Props = {
 const title = __( 'Popup Trigger', 'popup-maker' );
 export const name = `popup-maker/popup-trigger`;
 
-export const TriggerEdit = withSpokenMessages(
+export const TriggerEdit: React.ComponentType< Props > = withSpokenMessages(
 	( {
 		isActive,
 		activeAttributes,
 		value,
 		onChange,
 		onFocus,
 		contentRef,
-	}: Props ) => {
+	}: Props ): JSX.Element => {
 		const [ addingTrigger, setAddingTrigger ] =
 			useState< boolean >( false );
 

packages/block-editor/src/formats/popup-trigger/inline.tsx

@@ -65,7 +65,7 @@ const InlinePopupTriggerUI = ( {
 	stopAddingTrigger,
 	contentRef,
 	focusOnMount,
-}: Props ) => {
+}: Props ): JSX.Element => {
 	// Get dispatch action to change the selection.
 	const { selectionChange } = useDispatch( blockEditorStore );
 

packages/block-editor/src/formats/popup-trigger/trigger-popover/popup-trigger-editor.tsx

@@ -15,7 +15,7 @@ const PopupTriggerEditor = ( {
 	onChangeInputValue,
 	value,
 	...props
-}: Props ) => {
+}: Props ): JSX.Element => {
 	return (
 		<form
 			className={ clsx(

packages/block-editor/src/formats/popup-trigger/trigger-popover/popup-trigger-viewer.tsx

@@ -28,13 +28,14 @@ function PopupView( {
 	);
 
 	const popup = getPopupById( popupId );
-	const label = popup
-		? /* translators: %s = popup title */
-		  sprintf(
-				__( 'Open "%s" popup', 'popup-maker' ),
-				decodeEntities( popup.title.rendered )
-		  )
-		: '';
+	let label = '';
+	if ( popup ) {
+		label = sprintf(
+			/* translators: %s: popup title. */
+			__( 'Open "%s" popup', 'popup-maker' ),
+			decodeEntities( popup.title.rendered )
+		);
+	}
 
 	return (
 		<span className={ spanClassName } role="button" aria-label={ label }>
@@ -59,7 +60,7 @@ export default function PopupTriggerViewer( {
 	onEditTriggerClick,
 	popupId,
 	...props
-}: PopupTriggerViewerProps ) {
+}: PopupTriggerViewerProps ): JSX.Element {
 	return (
 		<div
 			className={ clsx(

packages/block-editor/src/plugins/popup-title-panel.tsx

@@ -50,7 +50,7 @@ function setupSaveSubscription() {
 	let wasSaving = false;
 
 	subscribe( () => {
-		const editor = select( 'core/editor' ) as EditorStore;
+		const editor = select( 'core/editor' ) as unknown as EditorStore;
 
 		const isSaving = editor.isSavingPost();
 		const isAutosaving = editor.isAutosavingPost();
@@ -78,7 +78,14 @@ function setupSaveSubscription() {
 				.catch( ( error ) => {
 					// eslint-disable-next-line no-console
 					console.error( 'Failed to save popup title:', error );
-					dispatch( 'core/notices' ).createErrorNotice(
+					(
+						dispatch( 'core/notices' ) as unknown as {
+							createErrorNotice: (
+								content: string,
+								options: { type: string }
+							) => void;
+						}
+					 ).createErrorNotice(
 						__( 'Failed to save popup title.', 'popup-maker' ),
 						{ type: 'snackbar' }
 					);
@@ -90,7 +97,7 @@ function setupSaveSubscription() {
 /**
  * Popup Title Panel Component.
  */
-const PopupTitlePanel = () => {
+const PopupTitlePanel = (): JSX.Element | null => {
 	const [ localTitle, setLocalTitle ] = useState( '' );
 	const [ isInitialized, setIsInitialized ] = useState( false );
 
@@ -151,7 +158,6 @@ const PopupTitlePanel = () => {
 
 registerPlugin( 'popup-maker-title-panel', {
 	render: PopupTitlePanel,
-	icon: null,
 } );
 
 export default PopupTitlePanel;

packages/components/src/lib/confirm-dialogue/index.tsx

@@ -18,7 +18,7 @@ const ConfirmDialogue = ( {
 	onClose,
 	isDestructive = false,
 	children,
-}: Props ) => {
+}: Props ): JSX.Element | null => {
 	const confirmButtonRef = useRef< HTMLButtonElement | null >( null );
 	const previousFocusRef = useRef< HTMLElement | null >( null );
 

packages/components/src/lib/controlled-tab-panel/index.tsx

@@ -98,4 +98,7 @@ const TabPanel = ( {
 	);
 };
 
-export default withInstanceId( TabPanel );
+const ControlledTabPanel: React.ComponentType< Omit< Props, 'instanceId' > > =
+	withInstanceId( TabPanel );
+
+export default ControlledTabPanel;

packages/components/src/lib/controlled-tab-panel/tab-button.tsx

@@ -16,7 +16,7 @@ const TabButton = ( {
 	children,
 	selected,
 	...rest
-}: Props ) => (
+}: Props ): JSX.Element => (
 	<Button
 		role="tab"
 		tabIndex={ selected ? undefined : -1 }

packages/components/src/lib/cta-select-control/index.tsx

@@ -29,7 +29,7 @@ const CallToActionSelectControl = <
 	placeholder,
 	multiple = false,
 	...inputProps
-}: Props< T > ) => {
+}: Props< T > ): JSX.Element => {
 	const [ queryText, setQueryText ] = useState( '' );
 
 	const updateQueryText = useDebounce( ( text: string ) => {

packages/components/src/lib/device-toggle/index.tsx

@@ -15,7 +15,12 @@ type Props = {
 	onChange?: ( checked: boolean ) => void;
 };
 
-const DeviceToggle = ( { label, icon, isVisible, onChange = noop }: Props ) => {
+const DeviceToggle = ( {
+	label,
+	icon,
+	isVisible,
+	onChange = noop,
+}: Props ): JSX.Element => {
 	const toggleLabel = ! isVisible
 		? /* translators: 1. Device type. */
 		  _x( 'Hide on %1$s', 'Device toggle option', 'popup-maker' )

packages/components/src/lib/entity-select-control/index.tsx

@@ -39,7 +39,7 @@
 	multiple = false,
 	forceRefresh = false,
 	...inputProps
-}: Props< T > ) => {
+}: Props< T > ): JSX.Element => {
 	const [ queryText, setQueryText ] = useState( '' );
 
 	const updateQueryText = useDebounce( ( text: string ) => {
@@ -60,7 +60,7 @@
 				  ) as ObjectOption[] )
 				: [],
 		} ),
 		[ value, entityKind, entityType, forceRefresh ]
 	);
 
 	const { suggestions = [], isSearching = false } = useSelect(
@@ -85,7 +85,7 @@
 				]
 			),
 		} ),
 		[ entityKind, entityType, queryText, forceRefresh ]
 	);
 
 	const findSuggestion = ( _id: number | string ) => {

packages/components/src/lib/field-panel/index.tsx

@@ -10,7 +10,7 @@ type Props = {
 	children: React.ReactNode;
 };
 
-const FieldPanel = ( { title, className, children }: Props ) => {
+const FieldPanel = ( { title, className, children }: Props ): JSX.Element => {
 	return (
 		<Panel
 			header={ title }

packages/components/src/lib/field-row/index.tsx

@@ -14,7 +14,7 @@ const FieldRow = ( {
 	description?: string;
 	className?: clsx.ClassValue;
 	children: JSX.Element;
-} ) => (
+} ): JSX.Element => (
 	<div className={ clsx( [ 'components-field-row', className ] ) }>
 		<div className="components-base-control">
 			<label

packages/components/src/lib/freeform-control/index.tsx

@@ -63,7 +63,9 @@ const {
 // 	return /^\n?$/.test( body.innerText || body.textContent );
 // }
 
-const FreeFormEditControl = < T extends string >( props: Props< T > ) => {
+const FreeFormEditControl = < T extends string >(
+	props: Props< T >
+): JSX.Element => {
 	const instanceId = useInstanceId( FreeFormEditControl );
 	const {
 		label,

packages/components/src/lib/full-screen-panel/index.tsx

@@ -7,7 +7,7 @@ type FullScreenPanelProps = {
 	children: React.ReactNode;
 };
 
-const FullScreenPanel = ( props: FullScreenPanelProps ) => {
+const FullScreenPanel = ( props: FullScreenPanelProps ): JSX.Element => {
 	const { className, children } = props;
 
 	const [ isFull, setIsFull ] = useState( false );

packages/components/src/lib/list-table/index.tsx

@@ -61,7 +61,7 @@ const ListTable = < T extends TableItemBase >( {
 	onSelectItems = () => {},
 	onSort,
 	initialSort,
-}: Props< T > ) => {
+}: Props< T > ): JSX.Element => {
 	const cols = { [ idCol ]: columns[ idCol ] ?? '', ...columns };
 	const colCount = Object.keys( cols ).length;
 

packages/components/src/lib/popup-select-control/index.tsx

@@ -29,7 +29,8 @@ export const PopupSelectControl = ( {
 		} ),
 	],
 	...props
-}: PopupSelectControlProps & Pick< SelectControlProps, 'help' > ) => {
+}: PopupSelectControlProps &
+	Pick< SelectControlProps, 'help' > ): JSX.Element => {
 	return (
 		<SelectControl
 			label={ label }

packages/components/src/lib/radio-buttons-control/index.tsx

@@ -34,7 +34,7 @@ const RadioButtonControl = < T extends string | number = string | number >( {
 	equalWidth = false,
 	spacing,
 	hideLabelFromVision = false,
-}: Props< T > ) => {
+}: Props< T > ): JSX.Element => {
 	const instanceId = useInstanceId( RadioButtonControl );
 
 	return (

packages/components/src/lib/searchable-multicheck-control/index.tsx

@@ -33,7 +33,7 @@ const SearchableMulticheckControl = < T extends string | number >( {
 	options = [],
 	onChange = () => {},
 	className = '',
-}: Props< T > ) => {
+}: Props< T > ): JSX.Element => {
 	const instanceId = useInstanceId( SearchableMulticheckControl );
 
 	const [ searchText, setSearchText ] = useState< string >( '' );

packages/components/src/lib/text-highlight/index.tsx

@@ -36,7 +36,7 @@ export type TextHighlightProps = {
  *
  * @param {TextHighlightProps} props Text highlight props.
  */
-export const TextHighlight = ( props: TextHighlightProps ) => {
+export const TextHighlight = ( props: TextHighlightProps ): JSX.Element => {
 	const { text = '', highlight = '' } = props;
 	// Convert single string to array, trim thim & filters empty|null values.
 	const trimmedHighlightText = (

packages/components/src/lib/url-control/index.tsx

@@ -65,7 +65,7 @@ const URLControl = (
 		className = '',
 	}: Props,
 	ref: React.ForwardedRef< HTMLInputElement | null >
-) => {
+): JSX.Element => {
 	// Set up instance ID & refs.
 	const instanceId = useInstanceId( URLControl );
 	const wrapperRef = useRef< HTMLDivElement | null >( null );

packages/components/src/lib/url-control/suggestion.tsx

@@ -17,7 +17,9 @@ type Props = {
 	[ key: string ]: any;
 };
 
-const Suggestion = forwardRef< HTMLButtonElement, Props >(
+const Suggestion: React.ForwardRefExoticComponent<
+	Props & React.RefAttributes< HTMLButtonElement >
+> = forwardRef< HTMLButtonElement, Props >(
 	(
 		{
 			icon,
@@ -31,7 +33,7 @@ const Suggestion = forwardRef< HTMLButtonElement, Props >(
 			...buttonProps
 		},
 		ref
-	) => {
+	): JSX.Element => {
 		return (
 			<Button
 				type="button"

packages/core-data/src/call-to-actions/actions.ts

@@ -11,7 +11,7 @@ import { DispatchStatus } from '../constants';
 import { fetchFromApi, getErrorMessage } from '../utils';
 import { validateCallToAction } from './validation';
 import { editableEntity } from './utils';
-import type { EditorId, Notice } from '../types';
+import type { EditorId, Notice, WPNotice } from '../types';
 import type {
 	CallToAction,
 	ThunkAction,
@@ -55,10 +55,10 @@ const handleFieldValidationErrors = (
 			const notices = registry
 				.select( noticesStore )
 				.getNotices( NOTICE_CONTEXT );
-			const fieldErrors = notices.filter(
-				( n: Notice ) => n.id?.startsWith( `field-error-${ ctaId }-` )
+			const fieldErrors = notices.filter( ( n: WPNotice ) =>
+				n.id.startsWith( `field-error-${ ctaId }-` )
 			);
-			fieldErrors.forEach( ( n: Notice ) =>
+			fieldErrors.forEach( ( n: WPNotice ) =>
 				registry
 					.dispatch( noticesStore )
 					.removeNotice( n.id, NOTICE_CONTEXT )
@@ -1033,21 +1033,21 @@ const noticeActions = {
 	/**
 	 * Create a notice.
 	 *
-	 * @param {Notice[ 'status' ]}  status  The notice status.
-	 * @param {Notice[ 'content' ]} content The notice content.
-	 * @param {Notice}              options The notice options.
+	 * @param {WPNotice[ 'status' ]}  status  The notice status.
+	 * @param {WPNotice[ 'content' ]} content The notice content.
+	 * @param {Notice}                options The notice options.
 	 * @return {Promise<void>}
 	 */
 	createNotice:
 		(
 			/**
 			 * Notice status.
 			 */
-			status: Notice[ 'status' ] = 'info',
+			status: WPNotice[ 'status' ] = 'info',
 			/**
 			 * Notice content.
 			 */
-			content: Notice[ 'content' ] = '',
+			content: WPNotice[ 'content' ] = '',
 			/**
 			 * Notice options.
 			 */