Fix: use proper eslint for ts

.eslintignore

@@ -1,3 +1,7 @@
 example
 cypress
-**/*.test.js
+**/*.test.js
+**/*.test.ts
+**/*.test.txs
+dist/
+cypress.config.js

.eslintrc

@@ -1,10 +1,13 @@
 {
-    "extends": ["@10up/eslint-config/react"],
-    "rules": {
-        "import/no-unresolved": 0,
-        "import/no-extraneous-dependencies": 0,
-        "react/jsx-props-no-spreading": 0,
-        "jsdoc/check-tag-names": 0,
+	"parser": "@typescript-eslint/parser",
+	"extends": [
+		"@10up/eslint-config/react"
+	],
+	"rules": {
+		"import/no-unresolved": 0,
+		"import/no-extraneous-dependencies": 0,
+		"react/jsx-props-no-spreading": 0,
+		"jsdoc/check-tag-names": 0,
 		"import/extensions": 0
-    }
+	}
 }

components/author/context.ts

@@ -32,4 +32,4 @@ export const AuthorContext = createContext<Author>({
 
 export const useAuthor = () => {
 	return useContext(AuthorContext);
-}
+};

components/author/index.tsx

@@ -3,21 +3,21 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useAuthor } from './context';
 
 interface NameProps {
-  tagName?: keyof JSX.IntrinsicElements;
-  [key: string]: unknown;
+	tagName?: keyof JSX.IntrinsicElements;
+	[key: string]: unknown;
 }
 
 export const Name: React.FC<NameProps> = (props) => {
-  const { tagName: TagName = 'span', ...rest } = props;
-  const { name, link } = useAuthor();
+	const { tagName: TagName = 'span', ...rest } = props;
+	const { name, link } = useAuthor();
 
-  const wrapperProps = { ...rest };
+	const wrapperProps = { ...rest };
 
-  if (TagName === 'a' && link) {
-    wrapperProps.href = link;
-  }
+	if (TagName === 'a' && link) {
+		wrapperProps.href = link;
+	}
 
-  return <TagName {...wrapperProps}>{name}</TagName>;
+	return <TagName {...wrapperProps}>{name}</TagName>;
 };
 
 interface FirstNameProps {
@@ -66,6 +66,7 @@ export const Avatar: React.FC<AvatarProps> = (props) => {
 
 	const avatarSourceUrl = avatarUrls ? avatarUrls[avatarUrls.length - 1] : defaultAvatar;
 
+	// eslint-disable-next-line jsx-a11y/alt-text
 	return <img src={avatarSourceUrl} {...rest} />;
 };
 

components/color-settings/index.tsx

@@ -9,64 +9,64 @@ interface ColorSettingProps {
 	/**
 	 * If this property is added, a label will be generated using label property as the content.
 	 */
-	label?: string,
+	label?: string;
 
 	/**
 	 * If true, the label will only be visible to screen readers.
 	 */
-	hideLabelFromVision?: boolean,
+	hideLabelFromVision?: boolean;
 
 	/**
 	 * If this property is added, a help text will be generated using help property as the content.
 	 */
-	help?: string,
+	help?: string;
 
 	/**
 	 * If no className is passed only components-base-control is used.
 	 */
-	className?: string,
+	className?: string;
 
 	/**
 	 * Whether to allow custom color or not.
 	 */
-	disableCustomColors?: boolean,
+	disableCustomColors?: boolean;
 
 	/**
 	 * currently active value.
 	 */
-	value?: string,
+	value?: string;
 
 	/**
 	 * Whether the palette should have a clearing button or not.
 	 */
-	clearable?: boolean,
+	clearable?: boolean;
 
 	/**
 	 * Array with the colors to be shown.
 	 */
-	colors: Array<Color>,
+	colors: Array<Color>;
 
 	/**
 	 * Callback called when a color is selected.
 	 */
-	onChange: Function,
+	onChange: Function;
 }
 
 interface Color {
 	/**
 	 * Color name.
 	 */
-	name: string,
+	name: string;
 
 	/**
 	 * Color hex code.
 	 */
-	color: string,
+	color: string;
 }
 
 // eslint-disable-next-line import/prefer-default-export
 export const ColorSetting: React.FC<ColorSettingProps> = ({
-	label= '',
+	label = '',
 	help = '',
 	className = '',
 	hideLabelFromVision = false,

components/content-search/SearchItem.tsx

@@ -68,6 +68,11 @@ interface SearchItemProps {
 	renderType?: (suggestion: Suggestion) => string;
 }
 
+export function defaultRenderItemType(suggestion: Suggestion): string {
+	// Rename 'post_tag' to 'tag'. Ideally, the API would return the localised CPT or taxonomy label.
+	return suggestion.type === 'post_tag' ? 'tag' : suggestion.subtype;
+}
+
 const SearchItem: React.FC<SearchItemProps> = ({
 	suggestion,
 	onClick,
@@ -127,9 +132,4 @@ const SearchItem: React.FC<SearchItemProps> = ({
 	);
 };
 
-export function defaultRenderItemType(suggestion: Suggestion): string {
-	// Rename 'post_tag' to 'tag'. Ideally, the API would return the localised CPT or taxonomy label.
-	return suggestion.type === 'post_tag' ? 'tag' : suggestion.subtype;
-}
-
 export default SearchItem;

components/content-search/index.tsx

@@ -116,8 +116,8 @@ const ContentSearch: React.FC<ContentSearchProps> = ({
 	fetchInitialResults,
 }) => {
 	const [searchString, setSearchString] = useState('');
-	const [searchQueries, setSearchQueries] = useState<{[key: string]: QueryCache}>({});
-	const [selectedItem, setSelectedItem] = useState<number|null>(null);
+	const [searchQueries, setSearchQueries] = useState<{ [key: string]: QueryCache }>({});
+	const [selectedItem, setSelectedItem] = useState<number | null>(null);
 	const [currentPage, setCurrentPage] = useState(1);
 	const [isFocused, setIsFocused] = useState(false);
 
@@ -219,13 +219,16 @@ const ContentSearch: React.FC<ContentSearchProps> = ({
 			const normalizedResults = filterResults(result);
 
 			if (mode === 'user') {
-				return normalizedResults.map((item) => ({
-						id: item.id,
-						subtype: mode,
-						title: item.name || '',
-						type: mode,
-						url: item.link || '',
-					} as SearchResult));
+				return normalizedResults.map(
+					(item) =>
+						({
+							id: item.id,
+							subtype: mode,
+							title: item.name || '',
+							type: mode,
+							url: item.link || '',
+						}) as SearchResult,
+				);
 			}
 
 			return normalizedResults;
@@ -255,7 +258,7 @@ const ContentSearch: React.FC<ContentSearchProps> = ({
 		if (!searchQueries[preparedQuery] || searchQueries[preparedQuery].controller === 1) {
 			setSearchQueries((queries) => {
 				// New queries.
-				const newQueries: {[key: string]: QueryCache} = {};
+				const newQueries: { [key: string]: QueryCache } = {};
 
 				// Remove errored or cancelled queries.
 				Object.keys(queries).forEach((query) => {
@@ -314,7 +317,7 @@ const ContentSearch: React.FC<ContentSearchProps> = ({
 				})
 					.then((results: Response) => {
 						const totalPages = parseInt(
-							( results.headers && results.headers.get('X-WP-TotalPages') ) || '0',
+							(results.headers && results.headers.get('X-WP-TotalPages')) || '0',
 							10,
 						);
 
@@ -401,7 +404,11 @@ const ContentSearch: React.FC<ContentSearchProps> = ({
 					if (i === currentPage) {
 						isLoading = false;
 
-						if ( searchQuery.totalPages && searchQuery.currentPage && searchQuery.totalPages > searchQuery.currentPage) {
+						if (
+							searchQuery.totalPages &&
+							searchQuery.currentPage &&
+							searchQuery.totalPages > searchQuery.currentPage
+						) {
 							showLoadMore = true;
 						}
 					}
@@ -424,9 +431,7 @@ const ContentSearch: React.FC<ContentSearchProps> = ({
 	useEffect(() => {
 		document.addEventListener('mouseup', (e: MouseEvent) => {
 			// Bail if anywhere inside search container is clicked.
-			if (
-				searchContainer.current?.contains(e.target as Node)
-			) {
+			if (searchContainer.current?.contains(e.target as Node)) {
 				return;
 			}
 
@@ -436,7 +441,11 @@ const ContentSearch: React.FC<ContentSearchProps> = ({
 
 	return (
 		<StyledComponentContext cacheKey="tenup-component-content-search">
-			<StyledNavigableMenu ref={searchContainer} onNavigate={handleOnNavigate} orientation="vertical">
+			<StyledNavigableMenu
+				ref={searchContainer}
+				onNavigate={handleOnNavigate}
+				orientation="vertical"
+			>
 				<StyledSearchControl
 					value={searchString}
 					onChange={(newSearchString) => {
@@ -454,7 +463,12 @@ const ContentSearch: React.FC<ContentSearchProps> = ({
 				{hasSearchString || hasInitialResults ? (
 					<>
 						<List className={`${NAMESPACE}-list`}>
-							{isLoading && currentPage === 1 && <StyledSpinner onPointerEnterCapture={null} onPointerLeaveCapture={null} />}
+							{isLoading && currentPage === 1 && (
+								<StyledSpinner
+									onPointerEnterCapture={null}
+									onPointerLeaveCapture={null}
+								/>
+							)}
 
 							{!isLoading && !hasSearchResults && (
 								<li
@@ -468,8 +482,7 @@ const ContentSearch: React.FC<ContentSearchProps> = ({
 									{__('Nothing found.', '10up-block-components')}
 								</li>
 							)}
-							{
-								(!isLoading || currentPage > 1) &&
+							{(!isLoading || currentPage > 1) &&
 								searchResults &&
 								searchResults.map((item, index) => {
 									if (!item.title.length) {
@@ -522,7 +535,12 @@ const ContentSearch: React.FC<ContentSearchProps> = ({
 							</LoadingContainer>
 						)}
 
-						{isLoading && currentPage > 1 && <StyledSpinner onPointerEnterCapture={null} onPointerLeaveCapture={null} />}
+						{isLoading && currentPage > 1 && (
+							<StyledSpinner
+								onPointerEnterCapture={null}
+								onPointerLeaveCapture={null}
+							/>
+						)}
 					</>
 				) : null}
 			</StyledNavigableMenu>

components/counter/index.tsx

@@ -1,8 +1,8 @@
 import { forwardRef } from '@wordpress/element';
 import cx from 'classnames';
 import styled from '@emotion/styled';
-import { StyledComponentContext } from '../styled-components-context';
 import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, FC } from 'react';
+import { StyledComponentContext } from '../styled-components-context';
 
 const StyledSvg = styled('svg')`
 	transform: rotate(-90deg);
@@ -63,9 +63,7 @@ interface CircularProgressBarProps {
 	percentage: number;
 }
 
-const CircularProgressBar: FC<CircularProgressBarProps> = ({
-	percentage
-}) => {
+const CircularProgressBar: FC<CircularProgressBarProps> = ({ percentage }) => {
 	const radius = 90;
 	const circumference = 2 * Math.PI * radius;
 
@@ -164,32 +162,28 @@ interface CounterProps {
 	[key: string]: unknown;
 }
 
-const Counter: ForwardRefExoticComponent<PropsWithoutRef<CounterProps> & RefAttributes<HTMLDivElement>> = forwardRef<HTMLDivElement, CounterProps>(
-	({
-		count,
-		limit,
-		...rest
-	}, ref ) => {
-		const percentage = (count / limit) * 100;
-		return (
-			<StyledComponentContext cacheKey="tenup-component-counter">
-				<StyledCounter
-					className={cx('tenup--block-components__character-count', {
-						'is-over-limit': count > limit,
-					})}
-					ref={ref}
-					{...rest}
-				>
-					<div className="tenup--block-components__character-count__label">
-						<span className="tenup--block-components__character-count__count">{count}</span>{' '}
-						/{' '}
-						<span className="tenup--block-components__character-count__limit">{limit}</span>
-					</div>
-					<CircularProgressBar percentage={percentage} />
-				</StyledCounter>
-			</StyledComponentContext>
-		);
-	}
-);
+const Counter: ForwardRefExoticComponent<
+	PropsWithoutRef<CounterProps> & RefAttributes<HTMLDivElement>
+> = forwardRef<HTMLDivElement, CounterProps>(({ count, limit, ...rest }, ref) => {
+	const percentage = (count / limit) * 100;
+	return (
+		<StyledComponentContext cacheKey="tenup-component-counter">
+			<StyledCounter
+				className={cx('tenup--block-components__character-count', {
+					'is-over-limit': count > limit,
+				})}
+				ref={ref}
+				{...rest}
+			>
+				<div className="tenup--block-components__character-count__label">
+					<span className="tenup--block-components__character-count__count">{count}</span>{' '}
+					/{' '}
+					<span className="tenup--block-components__character-count__limit">{limit}</span>
+				</div>
+				<CircularProgressBar percentage={percentage} />
+			</StyledCounter>
+		</StyledComponentContext>
+	);
+});
 
 export { CircularProgressBar, Counter };