upkeep: add TS support for PostMeta component

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

@@ -1,10 +1,31 @@
 import { RichText } from '@wordpress/block-editor';
 import { __experimentalNumberControl as NumberControl, ToggleControl } from '@wordpress/components';
-import PropTypes from 'prop-types';
+import type { ToggleControlProps } from '@wordpress/components/src/toggle-control/types';
 import { usePostMetaValue, useIsSupportedMetaField } from '../../hooks';
 import { toSentence } from './utilities';
 
-export const PostMeta = (props) => {
+interface PostMetaProps {
+	/**
+	 * The meta key to use.
+	 */
+	metaKey: string;
+
+	/**
+	 * The children render prop.
+	 */
+	children?: ((metaValue: any, setMetaValue: (value: any) => void) => React.ReactNode);
+
+	/**
+	 * Additional props to pass to the component.
+	 */
+	[key: string]: any;
+}
+
+export const PostMeta: React.FC<PostMetaProps> & {
+	String: React.FC<MetaStringProps>;
+	Number: React.FC<MetaNumberProps>;
+	Boolean: React.FC<MetaBooleanProps>;
+} = (props) => {
 	const { metaKey, children } = props;
 	const [isSupported] = useIsSupportedMetaField(metaKey);
 	const [metaValue, setMetaValue] = usePostMetaValue(metaKey);
@@ -31,48 +52,53 @@ export const PostMeta = (props) => {
 	return <MetaString {...props} />;
 };
 
-PostMeta.propTypes = {
-	metaKey: PropTypes.string.isRequired,
-};
+interface MetaStringProps {
+	/**
+	 * The meta key to use.
+	 */
+	metaKey: string;
+
+	/**
+	 * A valid HTML tag.
+	 */
+	tagName?: keyof JSX.IntrinsicElements;
+}
 
-const MetaString = (props) => {
+const MetaString: React.FC<MetaStringProps> = (props) => {
 	const { metaKey, tagName = 'p' } = props;
 	const [metaValue, setMetaValue] = usePostMetaValue(metaKey);
 
 	return <RichText value={metaValue} onChange={setMetaValue} tagName={tagName} {...props} />;
 };
 
-MetaString.propTypes = {
-	metaKey: PropTypes.string.isRequired,
-	tagName: PropTypes.string,
-};
-
-MetaString.defaultProps = {
-	tagName: 'p',
-};
+interface MetaNumberProps {
+	/**
+	 * The meta key to use.
+	 */
+	metaKey: string;
+}
 
-const MetaNumber = (props) => {
+const MetaNumber: React.FC<MetaNumberProps> = (props) => {
 	const { metaKey } = props;
 	const [metaValue, setMetaValue] = usePostMetaValue(metaKey);
 
-	return <NumberControl value={metaValue} onChange={setMetaValue} {...props} />;
+	return <NumberControl value={metaValue} onChange={value => setMetaValue(parseInt(value ?? ''))} {...props} />;
 };
 
-MetaNumber.propTypes = {
-	metaKey: PropTypes.string.isRequired,
-};
+interface MetaBooleanProps extends Pick<ToggleControlProps, 'label'> {
+	/**
+	 * The meta key to use.
+	 */
+	metaKey: string;
+}
 
-const MetaBoolean = (props) => {
+const MetaBoolean: React.FC<MetaBooleanProps> = (props) => {
 	const { metaKey } = props;
 	const [metaValue, setMetaValue] = usePostMetaValue(metaKey);
 
 	return <ToggleControl checked={metaValue} onChange={setMetaValue} {...props} />;
 };
 
-MetaBoolean.propTypes = {
-	metaKey: PropTypes.string.isRequired,
-};
-
 PostMeta.String = MetaString;
 PostMeta.Number = MetaNumber;
 PostMeta.Boolean = MetaBoolean;

components/post-meta/utilities.js → components/post-meta/utilities.ts

@@ -1,17 +1,17 @@
 // Checks whether character is Uppercase.
 // Crude version. Checks only A-Z.
-function isCaps(char) {
+function isCaps(char: string) {
 	if (char.match(/[A-Z]/)) return true;
 	return false;
 }
 
 // Checks whether character is digit.
-function isDigit(char) {
+function isDigit(char: string) {
 	if (char.match(/[0-9]/)) return true;
 	return false;
 }
 
-export function toKebab(string) {
+export function toKebab(string: string) {
 	return string
 		.split('')
 		.map((letter, index) => {
@@ -39,7 +39,7 @@ export function toKebab(string) {
 		.replace(/[-_\s]+/g, '-');
 }
 
-export function toSentence(string) {
+export function toSentence(string: string) {
 	const interim = toKebab(string).replace(/-/g, ' ');
 	return interim.slice(0, 1).toUpperCase() + interim.slice(1);
 }