Refactor QueryControls component to TypeScript

packages/components/src/query-controls/README.md

@@ -9,29 +9,29 @@ import { QueryControls } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
 const QUERY_DEFAULTS = {
-	category: 1,
+	category: '1',
 	categories: [
 		{
-			id: 1,
+			id: '1',
 			name: 'Category 1',
 			parent: 0,
 		},
 		{
-			id: 2,
+			id: '2',
 			name: 'Category 1b',
 			parent: 1,
 		},
 		{
-			id: 3,
+			id: '3',
 			name: 'Category 2',
 			parent: 0,
 		},
 	],
 	maxItems: 20,
-	minItems: 1,	
+	minItems: 1,
 	numberOfItems: 10,
 	order: 'asc',
-	orderBy: 'title',	
+	orderBy: 'title',
 };
 
 const MyQueryControls = () => {
@@ -69,17 +69,17 @@ const QUERY_DEFAULTS = {
 	selectedCategories: [ 1 ],
 	categories: [
 		{
-			id: 1,
+			id: '1',
 			name: 'Category 1',
 			parent: 0,
 		},
 		{
-			id: 2,
+			id: '2',
 			name: 'Category 1b',
 			parent: 1,
 		},
 		{
-			id: 3,
+			id: '3',
 			name: 'Category 2',
 			parent: 0,
 		},
@@ -123,17 +123,16 @@ An array of author IDs that is passed into an `AuthorSelect` sub-component.
 -   Required: No
 -   Platform: Web
 
-#### selectedAuthorId
+#### `selectedAuthorId`: `string`
 
 The selected author ID.
 
--   Type: `Number`
 -   Required: No
 -   Platform: Web
 
 #### categoriesList
 
-An array of category IDs; renders a `CategorySelect` sub-component when passed in conjunction with `onCategoryChange`.
+An array of categories; renders a `CategorySelect` sub-component when passed in conjunction with `onCategoryChange`.
 
 -   Type: `Array`
 -   Required: No

packages/components/src/query-controls/author-select.js → packages/components/src/query-controls/author-select.tsx

@@ -3,14 +3,15 @@
  */
 import { buildTermsTree } from './terms';
 import TreeSelect from '../tree-select';
+import type { AuthorSelectProps } from './types';
 
 export default function AuthorSelect( {
 	label,
 	noOptionLabel,
 	authorList,
 	selectedAuthorId,
 	onChange,
-} ) {
+}: AuthorSelectProps ) {
 	if ( ! authorList ) return null;
 	const termsTree = buildTermsTree( authorList );
 	return (

packages/components/src/query-controls/category-select.js → packages/components/src/query-controls/category-select.tsx

@@ -3,10 +3,12 @@
  */
 import { buildTermsTree } from './terms';
 import TreeSelect from '../tree-select';
+
 /**
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
+import type { CategorySelectProps } from './types';
 
 export default function CategorySelect( {
 	label,
@@ -15,7 +17,7 @@ export default function CategorySelect( {
 	selectedCategoryId,
 	onChange,
 	...props
-} ) {
+}: CategorySelectProps ) {
 	const termsTree = useMemo( () => {
 		return buildTermsTree( categoriesList );
 	}, [ categoriesList ] );

packages/components/src/query-controls/index.native.js

@@ -79,7 +79,6 @@ const QueryControls = memo(
 						noOptionLabel={ __( 'All' ) }
 						selectedCategoryId={ selectedCategoryId }
 						onChange={ onCategoryChange }
-						hideCancelButton={ true }
 					/>
 				) }
 				{ onNumberOfItemsChange && (

packages/components/src/query-controls/index.js → packages/components/src/query-controls/index.tsx

@@ -6,15 +6,43 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import CategorySelect from './category-select';
-import { RangeControl, SelectControl, FormTokenField } from '../';
 import AuthorSelect from './author-select';
+import CategorySelect from './category-select';
+import FormTokenField from '../form-token-field';
+import RangeControl from '../range-control';
+import SelectControl from '../select-control';
+import type { QueryControlsProps } from './types';
 
 const DEFAULT_MIN_ITEMS = 1;
 const DEFAULT_MAX_ITEMS = 100;
 const MAX_CATEGORIES_SUGGESTIONS = 20;
 
-export default function QueryControls( {
+/**
+ * Select controls that query for entities.
+ *
+ * ```jsx
+ * const MyQueryControls = () => (
+ *   <QueryControls
+ *     { ...{ maxItems, minItems, numberOfItems, order, orderBy } }
+ *     onOrderByChange={ ( newOrderBy ) => {
+ *       updateQuery( { orderBy: newOrderBy } )
+ *     }
+ *     onOrderChange={ ( newOrder ) => {
+ *       updateQuery( { order: newOrder } )
+ *     }
+ *     categoriesList={ categories }
+ *     selectedCategoryId={ category }
+ *     onCategoryChange={ ( newCategory ) => {
+ *       updateQuery( { category: newCategory } )
+ *     }
+ *     onNumberOfItemsChange={ ( newNumberOfItems ) => {
+ *       updateQuery( { numberOfItems: newNumberOfItems } )
+ *     } }
+ *   />
+ * );
+ * ```
+ */
+export function QueryControls( {
 	authorList,
 	selectedAuthorId,
 	categoriesList,
@@ -31,7 +59,7 @@ export default function QueryControls( {
 	onNumberOfItemsChange,
 	onOrderChange,
 	onOrderByChange,
-} ) {
+}: QueryControlsProps ) {
 	return [
 		onOrderChange && onOrderByChange && (
 			<SelectControl
@@ -59,6 +87,10 @@ export default function QueryControls( {
 					},
 				] }
 				onChange={ ( value ) => {
+					if ( typeof value !== 'string' ) {
+						return;
+					}
+
 					const [ newOrderBy, newOrder ] = value.split( '/' );
 					if ( newOrder !== order ) {
 						onOrderChange( newOrder );
@@ -87,7 +119,7 @@ export default function QueryControls( {
 					selectedCategories &&
 					selectedCategories.map( ( item ) => ( {
 						id: item.id,
-						value: item.name || item.value,
+						value: item.name || item.value || '',
 					} ) )
 				}
 				suggestions={ Object.keys( categorySuggestions ) }
@@ -119,3 +151,5 @@ export default function QueryControls( {
 		),
 	];
 }
+
+export default QueryControls;

packages/components/src/query-controls/terms.js → packages/components/src/query-controls/terms.ts

@@ -3,14 +3,21 @@
  */
 import { groupBy } from 'lodash';
 
+/**
+ * Internal dependencies
+ */
+import type { Entity, TermsWithChildren } from './types';
+
 /**
  * Returns terms in a tree form.
  *
- * @param {Array} flatTerms Array of terms in flat format.
+ * @param flatTerms Array of terms in flat format.
  *
- * @return {Array} Array of terms in tree format.
+ * @return Array of terms in tree format.
  */
-export function buildTermsTree( flatTerms ) {
+export function buildTermsTree(
+	flatTerms: readonly Entity[]
+): TermsWithChildren {
 	const flatTermsWithParentAndChildren = flatTerms.map( ( term ) => {
 		return {
 			children: [],
@@ -23,7 +30,7 @@ export function buildTermsTree( flatTerms ) {
 	if ( termsByParent.null && termsByParent.null.length ) {
 		return flatTermsWithParentAndChildren;
 	}
-	const fillWithChildren = ( terms ) => {
+	const fillWithChildren = ( terms: Entity[] ): TermsWithChildren => {
 		return terms.map( ( term ) => {
 			const children = termsByParent[ term.id ];
 			return {

packages/components/src/query-controls/test/terms.js → packages/components/src/query-controls/test/terms.ts

@@ -6,60 +6,76 @@ import { buildTermsTree } from '../terms';
 describe( 'buildTermsTree()', () => {
 	it( 'Should return same array as input with null parent and empty children added if parent is never specified.', () => {
 		const input = Object.freeze( [
-			{ id: 2232, dummy: true },
-			{ id: 2245, dummy: true },
+			{ id: 2232, name: 'foo', dummy: true },
+			{ id: 2245, name: 'baz', dummy: true },
 		] );
 		const output = Object.freeze( [
-			{ id: 2232, parent: null, children: [], dummy: true },
-			{ id: 2245, parent: null, children: [], dummy: true },
+			{
+				id: 2232,
+				name: 'foo',
+				parent: null,
+				children: [],
+				dummy: true,
+			},
+			{
+				id: 2245,
+				name: 'baz',
+				parent: null,
+				children: [],
+				dummy: true,
+			},
 		] );
 		const termsTreem = buildTermsTree( input );
 		expect( termsTreem ).toEqual( output );
 	} );
 	it( 'Should return same array as input with empty children added if all the elements are top level', () => {
 		const input = Object.freeze( [
-			{ id: 2232, parent: 0, dummy: true },
-			{ id: 2245, parent: 0, dummy: false },
+			{ id: 2232, name: 'foo', parent: 0, dummy: true },
+			{ id: 2245, name: 'baz', parent: 0, dummy: false },
 		] );
 		const output = [
-			{ id: 2232, parent: 0, children: [], dummy: true },
-			{ id: 2245, parent: 0, children: [], dummy: false },
+			{ id: 2232, name: 'foo', parent: 0, children: [], dummy: true },
+			{ id: 2245, name: 'baz', parent: 0, children: [], dummy: false },
 		];
 		const termsTreem = buildTermsTree( input );
 		expect( termsTreem ).toEqual( output );
 	} );
 	it( 'Should return element with its child if a child exists', () => {
 		const input = Object.freeze( [
-			{ id: 2232, parent: 0 },
-			{ id: 2245, parent: 2232 },
+			{ id: 2232, name: 'foo', parent: 0 },
+			{ id: 2245, name: 'baz', parent: 2232 },
 		] );
 		const output = [
 			{
 				id: 2232,
+				name: 'foo',
 				parent: 0,
-				children: [ { id: 2245, parent: 2232, children: [] } ],
+				children: [
+					{ id: 2245, name: 'baz', parent: 2232, children: [] },
+				],
 			},
 		];
 		const termsTreem = buildTermsTree( input );
 		expect( termsTreem ).toEqual( output );
 	} );
 	it( 'Should return elements with multiple children and elements with no children', () => {
 		const input = Object.freeze( [
-			{ id: 2232, parent: 0 },
-			{ id: 2245, parent: 2232 },
-			{ id: 2249, parent: 0 },
-			{ id: 2246, parent: 2232 },
+			{ id: 2232, name: 'a', parent: 0 },
+			{ id: 2245, name: 'b', parent: 2232 },
+			{ id: 2249, name: 'c', parent: 0 },
+			{ id: 2246, name: 'd', parent: 2232 },
 		] );
 		const output = [
 			{
 				id: 2232,
+				name: 'a',
 				parent: 0,
 				children: [
-					{ id: 2245, parent: 2232, children: [] },
-					{ id: 2246, parent: 2232, children: [] },
+					{ id: 2245, name: 'b', parent: 2232, children: [] },
+					{ id: 2246, name: 'd', parent: 2232, children: [] },
 				],
 			},
-			{ id: 2249, parent: 0, children: [] },
+			{ id: 2249, name: 'c', parent: 0, children: [] },
 		];
 		const termsTreem = buildTermsTree( input );
 		expect( termsTreem ).toEqual( output );