Fix components TS errors

projects/js-packages/ai-client/changelog/fix-components-ts-errors

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fix TS errors.

projects/js-packages/ai-client/src/components/message/index.tsx

@@ -169,6 +169,7 @@
 	);
 	const element = createInterpolateElement( message, {
 		link: (
+			// @ts-expect-error TS says the `children` is missing but it's passed dynamically by createInterpolateElement
 			<ExternalLink href="https://jetpack.com/redirect/?source=ai-assistant-fair-usage-policy" />
 		),
 	} );

projects/js-packages/ai-client/tsconfig.json

@@ -2,8 +2,8 @@
 	"extends": "jetpack-js-tools/tsconfig.tsc.json",
 	"include": [ "./src/**/*" ],
 	"compilerOptions": {
-		"typeRoots": [ "./node_modules/@types/", "src/*" ],
 		"sourceMap": false,
+		"rootDir": "./",
 		"outDir": "./build/",
 		"target": "esnext"
 	}

projects/js-packages/components/changelog/fix-components-ts-errors

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fix TS errors.

projects/js-packages/components/components/boost-score-graph/stories/index.stories.tsx

@@ -161,7 +161,7 @@ const meta: Meta< typeof BoostScoreGraph > = {
 	argTypes: {
 		startDate: { control: 'date' },
 		endDate: { control: 'date' },
-		title: { control: 'string', defaultValue: 'Title' },
+		title: { control: 'text', defaultValue: 'Title' },
 		isPlaceholder: { control: 'boolean', defaultValue: false },
 	},
 	decorators: [

projects/js-packages/components/components/button/index.tsx

@@ -5,15 +5,14 @@
 import { forwardRef } from 'react';
 import styles from './style.module.scss';
 import type { ButtonProps } from './types.ts';
-import type { ReactNode } from 'react';
 
 /**
  * Button component
  *
  * @param {ButtonProps} props - Component Props
- * @return {ReactNode} Rendered button
+ * @return Rendered button
  */
-const Button = forwardRef< HTMLInputElement, ButtonProps >( ( props, ref ) => {
+const Button = forwardRef< typeof WPButton, ButtonProps >( ( props, ref ) => {
 	const {
 		children,
 		variant = 'primary',
@@ -41,8 +40,6 @@
 		[ styles[ 'is-icon-button' ] ]: Boolean( icon ) && ! children,
 	} );
 
-	componentProps.ref = ref;
-
 	const externalIconSize = size === 'normal' ? 20 : 16;
 	const externalIcon = isExternalLink && (
 		<>
@@ -65,6 +62,7 @@
 		children?.[ 0 ]?.props?.className !== 'components-tooltip';
 
 	return (
+		// @ts-expect-error WPButton types are a mess.
 		<WPButton
 			target={ externalTarget }
 			variant={ variant }
@@ -75,6 +73,7 @@
 			aria-disabled={ disabled }
 			isDestructive={ isDestructive }
 			text={ text }
+			ref={ ref }
 			{ ...componentProps }
 		>
 			{ isLoading && <Spinner /> }

projects/js-packages/components/components/button/types.ts

@@ -14,6 +14,7 @@ type JetpackButtonBaseProps = {
 	weight?: 'bold' | 'regular';
 	fullWidth?: boolean;
 	ref?: ForwardedRef< unknown >;
+	href?: string;
 };
 
 type WPButtonProps = Omit< ComponentProps< typeof Button >, 'size' | 'variant' >;

projects/js-packages/components/components/copy-to-clipboard/index.tsx

@@ -4,7 +4,7 @@
 import Button from '../button/index.tsx';
 import { ClipboardIcon, CheckmarkIcon } from '../icons/index.tsx';
 import { CopyToClipboardProps } from './types.ts';
-import type { FC, ReactNode } from 'react';
+import type { ComponentType, FC, ReactNode } from 'react';
 
 export const CopyToClipboard: FC< CopyToClipboardProps > = ( {
 	buttonStyle = 'icon',
@@ -16,7 +16,7 @@
 
 	const copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();
 
-	const copyRef = useCopyToClipboard( textToCopy, () => {
+	const copyRef = useCopyToClipboard< HTMLButtonElement >( textToCopy, () => {
 		if ( copyTimer.current ) {
 			clearTimeout( copyTimer.current );
 		}
@@ -40,11 +40,11 @@
 		};
 	}, [] );
 
-	let icon: ReactNode = null;
+	let icon: ComponentType = null;
 	let label: ReactNode = null;
 
 	if ( 'text' !== buttonStyle ) {
-		icon = hasCopied ? <CheckmarkIcon /> : <ClipboardIcon />;
+		icon = hasCopied ? CheckmarkIcon : ClipboardIcon;
 	}
 
 	const defaultLabel = __( 'Copy to clipboard', 'jetpack-components' );
@@ -58,6 +58,7 @@
 			aria-label={ defaultLabel }
 			icon={ icon }
 			children={ label }
+			// @ts-expect-error The ref type here is messed up
 			ref={ copyRef }
 			{ ...buttonProps }
 		/>

projects/js-packages/components/components/icon-tooltip/index.tsx

@@ -1,6 +1,6 @@
 import { Popover } from '@wordpress/components';
 import clsx from 'clsx';
-import { useCallback, useState, ReactElement, FC } from 'react';
+import { useCallback, useState, ReactElement, FC, ComponentProps } from 'react';
 import Button from '../button/index.tsx';
 import Gridicon from '../gridicon/index.tsx';
 import { IconTooltipProps, Placement, Position } from './types.ts';
@@ -20,6 +20,8 @@
 	return mapping[ placement ] as Position;
 };
 
+type PopoverProps = ComponentProps< typeof Popover >;
+
 /**
  * Generate Icon Tooltip
  *
@@ -55,7 +57,7 @@
 		[ isVisible, setIsVisible ]
 	);
 
-	const args = {
+	const args: PopoverProps = {
 		// To be compatible with deprecating prop `position`.
 		position: placementsToPositions( placement ),
 		placement,
@@ -64,6 +66,7 @@
 		resize: false,
 		flip: false,
 		offset, // The distance (in px) between the anchor and the popover.
+		// @ts-expect-error TODO investigate whether this is a valid value for `focusOnMount`.
 		focusOnMount: 'container' as const,
 		onClose: hideTooltip,
 		className: 'icon-tooltip-container',

projects/js-packages/components/components/icons/stories/index.stories.tsx

@@ -1,8 +1,8 @@
 import * as allIcons from '../index.tsx';
 import styles from './style.module.scss';
-import type { StoryFn, Meta } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
-const meta: Meta< typeof allIcons > = {
+const meta = {
 	title: 'JS Packages/Components/Icons',
 	component: allIcons,
 	parameters: {},
@@ -60,7 +60,7 @@ function IconsStory() {
 	);
 }
 
-const Template: StoryFn< typeof allIcons > = args => <IconsStory { ...args } />;
+const Template: StoryFn = args => <IconsStory { ...args } />;
 
 const DefaultArgs = {};
 export const Default = Template.bind( {} );

projects/js-packages/components/components/jetpack-footer/test/component.tsx

@@ -1,6 +1,6 @@
 import { jest } from '@jest/globals';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '@testing-library/user-event';
 import JetpackFooter from '../index.tsx';
 
 describe( 'JetpackFooter', () => {

projects/js-packages/components/components/pricing-card/test/component.tsx

@@ -4,6 +4,7 @@
 /* eslint-disable testing-library/no-manual-cleanup */
 
 import { jest } from '@jest/globals';
+// @ts-expect-error /pure subpath apparently exists
 import { render, screen, cleanup } from '@testing-library/react/pure';
 import PricingCard from '../index.tsx';
 

projects/js-packages/components/components/pricing-card/types.ts

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import type { Button } from '@wordpress/components';
-import type { ComponentProps, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 export type PricingCardProps = {
 	/**
@@ -36,7 +35,7 @@ export type PricingCardProps = {
 	/**
 	 * The CTA callback to be called on click.
 	 */
-	onCtaClick?: ComponentProps< typeof Button >[ 'onClick' ];
+	onCtaClick?: React.MouseEventHandler< HTMLButtonElement >;
 	/**
 	 * Optional informative text.
 	 */

projects/js-packages/components/components/pricing-table/stories/index.stories.tsx

@@ -25,7 +25,6 @@ const Template: StoryFn< typeof PricingTable > = args => {
 						offPrice={ 4.98 }
 						legend="/month, billed yearly"
 						currency="USD"
-						hideDiscountLabel={ args?.hideDiscountLabel }
 					/>
 					<Button fullWidth>Get Premium</Button>
 				</PricingTableHeader>

projects/js-packages/components/components/radio-control/index.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import styles from './styles.module.scss';
 import type { FC, ReactNode } from 'react';
 
-interface RadioControlProps {
+export interface RadioControlProps {
 	/** The current value. */
 	selected: string;
 
@@ -29,7 +29,7 @@ interface RadioControlProps {
 	onChange: ( value: string ) => void;
 }
 
-const RadioControl: FC< RadioControlProps > = ( {
+export const RadioControl: FC< RadioControlProps > = ( {
 	selected,
 	className,
 	disabled,

projects/js-packages/components/components/radio-control/stories/index.stories.tsx

@@ -1,7 +1,8 @@
+import { Meta } from '@storybook/react';
 import { useCallback, useState } from 'react';
-import RadioControl from '../index.tsx';
+import { RadioControl } from '../index.tsx';
 
-export default {
+const meta = {
 	title: 'JS Packages/Components/Radio Control',
 	component: RadioControl,
 	parameters: {
@@ -14,7 +15,7 @@ export default {
 			description: 'Whether or not the radio control is currently disabled.',
 			table: {
 				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
+				defaultValue: { summary: '' },
 			},
 		},
 		help: {
@@ -31,11 +32,13 @@ export default {
 			description: 'If true, the label will only be visible to screen readers.',
 			table: {
 				type: { summary: 'boolean' },
-				defaultValue: { summary: false },
+				defaultValue: { summary: '' },
 			},
 		},
 	},
-};
+} satisfies Meta< typeof RadioControl >;
+
+export default meta;
 
 const options = [
 	{ label: 'One', value: 'one' },

projects/js-packages/components/components/split-button/stories/index.stories.tsx

@@ -5,7 +5,10 @@ const meta: Meta< typeof SplitButton > = {
 	title: 'JS Packages/Components/Split Button',
 	component: SplitButton,
 	argTypes: {
-		variant: { type: 'select', options: [ undefined, 'secondary', 'primary', 'tertiary', 'link' ] },
+		variant: {
+			control: { type: 'select' },
+			options: [ undefined, 'secondary', 'primary', 'tertiary', 'link' ],
+		},
 	},
 	args: {
 		controls: [

projects/js-packages/components/components/split-button/types.ts

@@ -6,7 +6,14 @@ type AllowedDropdownMenuProps = Pick<
 	'controls' | 'popoverProps' | 'toggleProps' | 'label'
 >;
 
-export type SplitButtonProps = Omit< ComponentProps< typeof Button >, 'controls' > &
+export type SplitButtonProps = Omit<
+	// Extract only the button props to avoid the link props polluting the type.
+	Extract<
+		ComponentProps< typeof Button >,
+		{ onClick?: React.MouseEventHandler< HTMLButtonElement > }
+	>,
+	'controls'
+> &
 	AllowedDropdownMenuProps &
 	// make `controls` prop required
 	Required< Pick< AllowedDropdownMenuProps, 'controls' > >;

projects/js-packages/components/components/status/index.tsx

@@ -4,7 +4,7 @@ import Text from '../text/index.tsx';
 import styles from './style.module.scss';
 import type { JSX } from 'react';
 
-interface StatusProps {
+export interface StatusProps {
 	status?: 'active' | 'error' | 'inactive' | 'action' | 'initializing';
 	label?: string;
 	className?: string;

projects/js-packages/components/components/testimonials/test/component.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '@testing-library/user-event';
 import Testimonials from '../index.tsx';
 import { Testimonial } from '../testimonial.tsx';
 

projects/js-packages/components/components/toggle-control/index.tsx

@@ -4,7 +4,7 @@ import { useCallback } from 'react';
 import styles from './styles.module.scss';
 import type { FC, ReactNode } from 'react';
 
-interface ToggleControlProps {
+export interface ToggleControlProps {
 	/** Whether or not the toggle is currently enabled. */
 	checked?: boolean;
 

projects/js-packages/components/package.json

@@ -90,7 +90,7 @@
 	"scripts": {
 		"build": "pnpm run clean && pnpm run compile-ts",
 		"clean": "rm -rf build/",
-		"compile-ts": "tsc --pretty",
+		"compile-ts": "tsc --pretty --project tsconfig.build.json",
 		"test": "NODE_OPTIONS=--experimental-vm-modules jest",
 		"test-coverage": "pnpm run test --coverage",
 		"typecheck": "tsc --noEmit"

projects/js-packages/components/tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+	"extends": "./tsconfig.json",
+	"exclude": [ "**/node_modules/**/*", "**/build/**/*", "**/test/**/*" ]
+}

projects/js-packages/components/tsconfig.json

@@ -1,8 +1,7 @@
 {
 	"extends": "jetpack-js-tools/tsconfig.tsc.json",
-	"include": [ "./index.ts", "./tools/jp-redirect/index.ts" ],
+	"include": [ "./index.ts", "./components", "./lib", "./tools" ],
 	"compilerOptions": {
-		"typeRoots": [ "./node_modules/@types/" ],
 		"sourceMap": false,
 		"outDir": "./build/",
 		"target": "es2022",