fix refine type setup

components/author/index.tsx

@@ -44,8 +44,9 @@ export const LastName: React.FC<LastNameProps> = (props) => {
 	return <TagName {...rest}>{lastName}</TagName>;
 };
 
-function useDefaultAvatar() {
+function useDefaultAvatar(): string {
 	const { avatarURL: defaultAvatarUrl } = useSelect((select) => {
+		// @ts-ignore-next-line The type definitions for the block editor store are incomplete.
 		const { getSettings } = select(blockEditorStore);
 		const { __experimentalDiscussionSettings } = getSettings();
 		return __experimentalDiscussionSettings;

components/clipboard-button/index.tsx

@@ -48,7 +48,7 @@ export const ClipboardButton: React.FC<ClipboardButtonProps> = ({
 	const copied = labels.copied ? labels.copied : __('Copied');
 
 	useEffect(() => {
-		let timerId: undefined | number;
+		let timerId: ReturnType<typeof setTimeout>;
 
 		if (hasCopied) {
 			timerId = setTimeout(() => {

components/color-settings/index.tsx

@@ -49,7 +49,7 @@ interface ColorSettingProps {
 	/**
 	 * Callback called when a color is selected.
 	 */
-	onChange: Function;
+	onChange: (color: string) => void;
 }
 
 interface Color {

components/icon-picker/icon-picker-toolbar-button.tsx

@@ -32,14 +32,7 @@ export const IconPickerToolbarButton: React.FC<IconPickerToolbarButtonProps> = (
 				placement: 'bottom-start',
 			}}
 			renderToggle={({ isOpen, onToggle }) => (
-				<ToolbarButton
-					onClick={onToggle}
-					aria-expanded={isOpen}
-					icon={buttonIcon}
-					placeholder={undefined}
-					onPointerEnterCapture={undefined}
-					onPointerLeaveCapture={undefined}
-				>
+				<ToolbarButton onClick={onToggle} aria-expanded={isOpen} icon={buttonIcon}>
 					{buttonLabel}
 				</ToolbarButton>
 			)}

components/icon-picker/icon.tsx

@@ -23,7 +23,6 @@ export const Icon: React.FC<IconProps> = forwardRef<HTMLDivElement, IconProps>(
 		const icon = useIcon(iconSet, name);
 
 		if (!icon || Array.isArray(icon)) {
-			// @ts-ignore -- Types on WP seem to require onPointerEnterCapture and onPointerLeaveCapture
 			return <Spinner />;
 		}
 

components/image/index.tsx

@@ -52,7 +52,7 @@ export const Image: FC<ImageProps> = ({
 	if (isResolvingMedia) {
 		return <Spinner />;
 	}
-	// @ts-ignore-line - The media object is not typed by WordPress currently
+	// @ts-ignore-next-line - The media object is not typed by WordPress currently
 	const imageUrl = media?.media_details?.sizes?.[size]?.source_url ?? media?.source_url;
 	const altText = media?.alt_text;
 

components/is-admin/index.tsx

@@ -1,4 +1,5 @@
 import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 interface IsAdminProps {
 	/**
@@ -20,8 +21,8 @@ interface IsAdminProps {
  * fallback component via the fallback prop.
  */
 export const IsAdmin: React.FC<IsAdminProps> = ({ fallback = null, children }) => {
-	const hasAdminPermissions: boolean = useSelect(
-		(select) => select('core').canUser('read', 'users?roles=1'),
+	const hasAdminPermissions = useSelect(
+		(select) => select(coreStore).canUser('read', 'users?roles=1'),
 		[],
 	);
 	return hasAdminPermissions ? children : fallback;

components/link/index.tsx

@@ -11,6 +11,7 @@ import { __ } from '@wordpress/i18n';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import { FC } from 'react';
 import { Popover, Icon, Tooltip } from '@wordpress/components';
+// @ts-ignore-next-line - The type definitions for the block editor are missing the __experimentalLinkControl import.
 import { __experimentalLinkControl as LinkControl, RichText } from '@wordpress/block-editor';
 
 /**
@@ -112,7 +113,7 @@ interface LinkProps {
  * visuals in the block editor as a whole.
  */
 export const Link: FC<LinkProps> = ({
-	value = undefined,
+	value = '',
 	type = '',
 	opensInNewTab = false,
 	url = undefined,
@@ -129,7 +130,7 @@ export const Link: FC<LinkProps> = ({
 	const openPopover = () => setIsPopoverVisible(true);
 	const closePopover = () => setIsPopoverVisible(false);
 
-	const linkRef = useRef();
+	const linkRef = useRef<HTMLAnchorElement>(null);
 	const popoverRef = useOnClickOutside(closePopover);
 
 	const link = {
@@ -159,6 +160,7 @@ export const Link: FC<LinkProps> = ({
 				__unstablePastePlainText
 				allowedFormats={[]}
 				onClick={openPopover}
+				// @ts-ignore-next-line - The ref is not typed correctly in the RichText component.
 				ref={linkRef}
 				{...rest}
 			/>
@@ -180,6 +182,7 @@ export const Link: FC<LinkProps> = ({
 
 			{isPopoverVisible && (
 				<Popover
+					// @ts-ignore-next-line - In order to support older versions of Gutenberg, we need to pass the anchorRef prop.
 					anchorRef={linkRef.current}
 					anchor={linkRef.current}
 					ref={popoverRef}

components/media-toolbar/index.tsx

@@ -1,4 +1,5 @@
 import { __ } from '@wordpress/i18n';
+// @ts-ignore-next-line - The types for this package are incorrect.
 import { MediaReplaceFlow, MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
 import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 import type { Attachment } from '@wordpress/core-data';
@@ -44,7 +45,7 @@ export const MediaToolbar: React.FC<MediaToolbarProps> = ({
 	const { media } = useMedia(id);
 
 	return (
-		<ToolbarGroup label={__('Media', '10up-block-components')}>
+		<ToolbarGroup>
 			{hasImage ? (
 				<>
 					<MediaReplaceFlow

components/optional/index.ts

@@ -1,3 +1,4 @@
+// @ts-ignore-next-line - The WordPress types are missing the hasFinishedResolution method.
 import { useBlockEditContext } from '@wordpress/block-editor';
 
 interface OptionalProps {

components/post-author/index.tsx

@@ -26,13 +26,15 @@ export const PostAuthor: React.FC<PostAuthorProps> & {
 
 	const [author, hasResolved] = useSelect(
 		(select) => {
+			// @ts-ignore-next-line - The type definitions for the core store are incomplete.
 			const { getEditedEntityRecord, getUser, hasFinishedResolution } = select(coreStore);
 
 			const postQuery = ['postType', postType, postId as number] as const;
 
 			const post = getEditedEntityRecord(...postQuery);
 			const hasResolvedPost = hasFinishedResolution('getEditedEntityRecord', postQuery);
 
+			// @ts-ignore-next-line - The type definitions for the core store are incomplete.
 			const _authorId = hasResolvedPost ? post?.author : undefined;
 
 			const author = getUser(_authorId);

components/post-context/context.ts

@@ -0,0 +1,30 @@
+import { createContext, useContext } from '@wordpress/element';
+
+interface PostContextProps {
+	/**
+	 * The ID of the post.
+	 */
+	postId?: number;
+
+	/**
+	 * The type of the post.
+	 */
+	postType?: string;
+
+	/**
+	 * Whether the post is editable.
+	 */
+	isEditable?: boolean;
+}
+
+export const DEFAULT_POST_CONTEXT = {
+	postId: undefined,
+	postType: undefined,
+	isEditable: undefined,
+};
+
+export const PostContext = createContext<PostContextProps>(DEFAULT_POST_CONTEXT);
+
+export const usePostContext = () => {
+	return useContext(PostContext);
+};

components/post-context/index.tsx

@@ -0,0 +1,42 @@
+import { useMemo } from '@wordpress/element';
+import { PostContext as PostContextContext } from './context';
+
+interface PostContextProps {
+	/**
+	 * The ID of the post.
+	 */
+	postId: number;
+
+	/**
+	 * The type of the post.
+	 */
+	postType: string;
+
+	/**
+	 * Whether the post is editable.
+	 */
+	isEditable?: boolean;
+
+	/**
+	 * The children to render.
+	 */
+	children: React.ReactNode;
+}
+
+export const PostContext = ({
+	children,
+	postId,
+	postType,
+	isEditable = false,
+}: PostContextProps) => {
+	const value = useMemo(
+		() => ({
+			postId,
+			postType,
+			isEditable,
+		}),
+		[postId, postType, isEditable],
+	);
+
+	return <PostContextContext.Provider value={value}>{children}</PostContextContext.Provider>;
+};

components/post-excerpt/index.js → components/post-excerpt/index.tsx

@@ -3,15 +3,29 @@ import { __ } from '@wordpress/i18n';
 import { RichText } from '@wordpress/block-editor';
 import { usePost } from '../../hooks';
 
-export const PostExcerpt = (props) => {
-	const { placeholder = __('Enter excerpt...', 'tenup'), ...rest } = props;
+interface PostExcerptProps {
+	/**
+	 * The placeholder to show when no excerpt is set.
+	 */
+	placeholder?: string;
+
+	/**
+	 * Remaining props to pass to the paragraph element.
+	 */
+	[key: string]: unknown;
+}
+
+export const PostExcerpt = ({
+	placeholder = __('Enter excerpt...', 'tenup'),
+	...rest
+}: PostExcerptProps) => {
 	const { postId, postType, isEditable } = usePost();
 
 	const [rawExcerpt = '', setExcerpt, fullExcerpt] = useEntityProp(
 		'postType',
 		postType,
 		'excerpt',
-		postId,
+		postId as string,
 	);
 
 	if (!isEditable) {
@@ -24,7 +38,7 @@ export const PostExcerpt = (props) => {
 			tagName="p"
 			placeholder={placeholder}
 			value={rawExcerpt}
-			onChange={setExcerpt}
+			onChange={(value: string) => setExcerpt(value)}
 			allowedFormats={[]}
 			{...rest}
 		/>

components/post-featured-image/index.js → components/post-featured-image/index.tsx

@@ -2,23 +2,25 @@ import { useEntityProp } from '@wordpress/core-data';
 import { usePost } from '../../hooks';
 import { Image } from '../image';
 
-export const PostFeaturedImage = (props) => {
+interface PostFeaturedImageProps extends Omit<React.ComponentProps<typeof Image>, 'id' | 'onSelect' | 'canEditImage'> {}
+
+export const PostFeaturedImage = (props: PostFeaturedImageProps) => {
 	const { postId, postType, isEditable } = usePost();
 	const [featuredImage, setFeaturedImage] = useEntityProp(
 		'postType',
 		postType,
 		'featured_media',
-		postId,
+		postId as string,
 	);
 
-	const handleImageSelect = (image) => {
+	const handleImageSelect = (image: { id: string }) => {
 		setFeaturedImage(image.id);
 	};
 
 	return (
 		<Image
 			id={featuredImage}
-			canEditImage={isEditable}
+			canEditImage={isEditable as boolean}
 			onSelect={handleImageSelect}
 			{...props}
 		/>