NumberControl: refactor to TypeScript

packages/components/src/color-picker/input-with-slider.tsx

@@ -7,6 +7,7 @@ import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { RangeControl, NumberControlWrapper } from './styles';
 import { COLORS } from '../utils/colors-values';
+import { ensureNumber, ensureString } from '../utils/values';
 
 interface InputWithSliderProps {
 	min: number;
@@ -32,8 +33,14 @@ export const InputWithSlider = ( {
 				max={ max }
 				label={ label }
 				hideLabelFromVision
-				value={ value }
-				onChange={ onChange }
+				value={ ensureString( value ) }
+				onChange={ ( nextValue?: string ) => {
+					if ( typeof nextValue === 'undefined' ) {
+						return;
+					}
+
+					onChange?.( ensureNumber( nextValue ) );
+				} }
 				prefix={
 					<Spacer
 						as={ Text }

packages/components/src/input-control/README.md

@@ -105,5 +105,5 @@ Type of the input element to render. Defaults to "text".
 
 The current value of the input.
 
--   Type: `String | Number`
+-   Type: `String`
 -   Required: Yes

packages/components/src/number-control/README.md

@@ -27,58 +27,60 @@ const Example = () => {
 
 ## Props
 
+TODO: Should point at `InputControl` for overlapping props
+
 ### dragDirection
 
 Determines the drag axis to increment/decrement the value.
-Directions: `n` | `e` | `s` | `w`
 
--   Type: `String`
+-   Type: `n` | `e` | `s` | `w`
 -   Required: No
 -   Default: `n`
 
 ### dragThreshold
 
-If `isDragEnabled` is true, this controls the amount of `px` to have been dragged before the value changes.
+If `isDragEnabled` is `true`, this controls the amount of `px` to have been dragged before the value changes.
 
 -   Type: `Number`
 -   Required: No
 -   Default: `10`
 
 ### hideHTMLArrows
 
-If true, the default `input` HTML arrows will be hidden.
+If `true`, the default `input` HTML arrows will be hidden.
 
--   Type: `Boolean`
+-   Type: `boolean`
 -   Required: No
 -   Default: `false`
 
 ### isDragEnabled
 
-If true, enables mouse drag gesture to increment/decrement the number value. Holding `SHIFT` while dragging will increase the value by the `shiftStep`.
+If `true`, enables mouse drag gesture to increment/decrement the value. Holding `SHIFT` while dragging will increase the value by the `shiftStep`.
 
--   Type: `Boolean`
+-   Type: `boolean`
 -   Required: No
+-   Default: `true`
 
 ### isShiftStepEnabled
 
-If true, pressing `UP` or `DOWN` along with the `SHIFT` key will increment the value by the `shiftStep` value.
+If `true`, pressing `UP` or `DOWN` along with the `SHIFT` key will increment the value by the `shiftStep` value.
 
--   Type: `Boolean`
+-   Type: `boolean`
 -   Required: No
 -   Default: `true`
 
 ### label
 
-If this property is added, a label will be generated using label property as the content.
+The text content of the label. If not specified, a label won't be displayed.
 
--   Type: `String`
+-   Type: `string` // It's actually a React.Node
 -   Required: No
 
 ### labelPosition
 
-The position of the label (`top`, `side`, `bottom`, or `edge`).
+The position of the label.
 
--   Type: `String`
+-   Type: `top` | `side` | `bottom` | `edge`
 -   Required: No
 
 ### max

packages/components/src/number-control/index.js → packages/components/src/number-control/index.tsx

@@ -1,8 +1,8 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
 import classNames from 'classnames';
+import type { Ref } from 'react';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,9 @@ import { Input } from './styles/number-control-styles';
 import * as inputControlActionTypes from '../input-control/reducer/actions';
 import { composeStateReducers } from '../input-control/reducer/reducer';
 import { add, subtract, roundClamp } from '../utils/math';
-import { isValueEmpty } from '../utils/values';
+import { isValueEmpty, ensureNumber, ensureString } from '../utils/values';
+import type { Props } from './types';
+import type { DragAction } from '../input-control/reducer/actions';
 
 export function NumberControl(
 	{
@@ -28,40 +30,41 @@ export function NumberControl(
 		isDragEnabled = true,
 		isShiftStepEnabled = true,
 		label,
-		max = Infinity,
-		min = -Infinity,
+		max: maxProp = Infinity,
+		min: minProp = -Infinity,
 		required = false,
-		shiftStep = 10,
-		step = 1,
+		shiftStep: shiftStepProp = 10,
+		step: stepProp = 1,
 		type: typeProp = 'number',
 		value: valueProp,
 		...props
-	},
-	ref
+	}: Props,
+	ref: Ref< any >
 ) {
-	const isStepAny = step === 'any';
-	const baseStep = isStepAny ? 1 : parseFloat( step );
+	const min = ensureNumber( minProp );
+	const max = ensureNumber( maxProp );
+	const shiftStep = ensureNumber( shiftStepProp );
+
+	const isStepAny = stepProp === 'any';
+	const baseStep = isStepAny ? 1 : ensureNumber( stepProp );
 	const baseValue = roundClamp( 0, min, max, baseStep );
-	const constrainValue = ( value, stepOverride ) => {
+	const constrainValue = ( value: number, stepOverride?: number ) => {
 		// When step is "any" clamp the value, otherwise round and clamp it
 		return isStepAny
 			? Math.min( max, Math.max( min, value ) )
 			: roundClamp( value, min, max, stepOverride ?? baseStep );
 	};
 
-	const autoComplete = typeProp === 'number' ? 'off' : null;
+	const autoComplete = typeProp === 'number' ? 'off' : undefined;
 	const classes = classNames( 'components-number-control', className );
 
-	/**
-	 * "Middleware" function that intercepts updates from InputControl.
-	 * This allows us to tap into actions to transform the (next) state for
-	 * InputControl.
-	 *
-	 * @param {Object} state  State from InputControl
-	 * @param {Object} action Action triggering state change
-	 * @return {Object} The updated state to apply to InputControl
-	 */
-	const numberControlStateReducer = ( state, action ) => {
+	// "Middleware" function that intercepts updates from InputControl.
+	// This allows us to tap into actions to transform the (next) state for
+	// `InputControl`.
+	const numberControlStateReducer: Props[ '__unstableStateReducer' ] = (
+		state,
+		action
+	) => {
 		const { type, payload } = action;
 		const event = payload?.event;
 		const currentValue = state.value;
@@ -73,14 +76,16 @@ export function NumberControl(
 			type === inputControlActionTypes.PRESS_UP ||
 			type === inputControlActionTypes.PRESS_DOWN
 		) {
-			const enableShift = event.shiftKey && isShiftStepEnabled;
+			const enableShift =
+				( event as KeyboardEvent | undefined )?.shiftKey &&
+				isShiftStepEnabled;
 
 			const incrementalValue = enableShift
-				? parseFloat( shiftStep ) * baseStep
+				? shiftStep * baseStep
 				: baseStep;
 			let nextValue = isValueEmpty( currentValue )
 				? baseValue
-				: currentValue;
+				: ensureNumber( currentValue );
 
 			if ( event?.preventDefault ) {
 				event.preventDefault();
@@ -94,21 +99,22 @@ export function NumberControl(
 				nextValue = subtract( nextValue, incrementalValue );
 			}
 
-			state.value = constrainValue(
-				nextValue,
-				enableShift ? incrementalValue : null
+			state.value = ensureString(
+				constrainValue(
+					nextValue,
+					enableShift ? incrementalValue : undefined
+				)
 			);
 		}
 
 		/**
 		 * Handles drag to update events
 		 */
 		if ( type === inputControlActionTypes.DRAG && isDragEnabled ) {
-			const [ x, y ] = payload.delta;
-			const enableShift = payload.shiftKey && isShiftStepEnabled;
-			const modifier = enableShift
-				? parseFloat( shiftStep ) * baseStep
-				: baseStep;
+			const { payload: dragPayload } = action as DragAction;
+			const [ x, y ] = dragPayload.delta;
+			const enableShift = dragPayload.shiftKey && isShiftStepEnabled;
+			const modifier = enableShift ? shiftStep * baseStep : baseStep;
 
 			let directionModifier;
 			let delta;
@@ -139,9 +145,11 @@ export function NumberControl(
 				delta = Math.ceil( Math.abs( delta ) ) * Math.sign( delta );
 				const distance = delta * modifier * directionModifier;
 
-				state.value = constrainValue(
-					add( currentValue, distance ),
-					enableShift ? modifier : null
+				state.value = ensureString(
+					constrainValue(
+						add( ensureNumber( currentValue ?? 0 ), distance ),
+						enableShift ? modifier : undefined
+					)
 				);
 			}
 		}
@@ -157,7 +165,9 @@ export function NumberControl(
 
 			state.value = applyEmptyValue
 				? currentValue
-				: constrainValue( currentValue );
+				: ensureString(
+						constrainValue( ensureNumber( currentValue ?? 0 ) )
+				  );
 		}
 
 		return state;
@@ -177,7 +187,7 @@ export function NumberControl(
 			min={ min }
 			ref={ ref }
 			required={ required }
-			step={ step }
+			step={ stepProp }
 			type={ typeProp }
 			value={ valueProp }
 			__unstableStateReducer={ composeStateReducers(

packages/components/src/number-control/stories/index.js

@@ -32,10 +32,10 @@ function Example() {
 		label: text( 'label', 'Number' ),
 		min: number( 'min', 0 ),
 		max: number( 'max', 100 ),
-		placeholder: text( 'placeholder', 0 ),
+		placeholder: text( 'placeholder', '0' ),
 		required: boolean( 'required', false ),
 		shiftStep: number( 'shiftStep', 10 ),
-		step: text( 'step', 1 ),
+		step: text( 'step', '1' ),
 	};
 
 	return (

packages/components/src/number-control/styles/number-control-styles.js → packages/components/src/number-control/styles/number-control-styles.ts

@@ -1,17 +1,21 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+
 /**
  * Internal dependencies
  */
 import InputControl from '../../input-control';
+import type { Props } from '../types';
 
-const htmlArrowStyles = ( { hideHTMLArrows } ) => {
+const htmlArrowStyles = ( {
+	hideHTMLArrows,
+}: Pick< Props, 'hideHTMLArrows' > ) => {
 	if ( ! hideHTMLArrows ) return ``;
 
+	// TODO: rewrite using Emotion selection from `InputControl` component
 	return css`
 		input[type='number']::-webkit-outer-spin-button,
 		input[type='number']::-webkit-inner-spin-button {