Components: Integrate TextInput component [WIP]

docs/manifest.json

@@ -1193,6 +1193,12 @@
 		"markdown_source": "../packages/components/src/text-highlight/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "TextInput",
+		"slug": "text-input",
+		"markdown_source": "../packages/components/src/text-input/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Text",
 		"slug": "text",

packages/components/package.json

@@ -58,7 +58,9 @@
 		"memize": "^1.1.0",
 		"moment": "^2.22.1",
 		"re-resizable": "^6.4.0",
+		"react-autosize-textarea": "^7.1.0",
 		"react-dates": "^17.1.1",
+		"react-number-format": "^4.6.0",
 		"react-resize-aware": "^3.1.0",
 		"react-spring": "^8.0.20",
 		"react-use-gesture": "^9.0.0",

packages/components/src/index.js

@@ -119,6 +119,7 @@ export { Text as __experimentalText } from './text';
 export { default as TextControl } from './text-control';
 export { default as TextareaControl } from './textarea-control';
 export { default as TextHighlight } from './text-highlight';
+export { TextInput as __experimentalTextInput } from './text-input';
 export { default as Tip } from './tip';
 export { default as ToggleControl } from './toggle-control';
 export { default as Toolbar } from './toolbar';

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

@@ -0,0 +1,215 @@
+# TextInput
+
+`TextInput` is a form component that users can enter content into.
+
+## Table of contents
+
+## Usage
+
+```jsx live
+import { __experimentalTextInput as TextInput } from '@wordpress/components';
+
+function Example() {
+	return <TextInput placeholder="First name" />;
+}
+```
+
+## Props
+
+##### \_\_\_debugger
+
+**Type**: `Function`
+
+For development only. Callback when a reducer action is dispatched.
+
+##### align
+
+**Type**: `CSS['alignItems']`
+
+Aligns children using CSS Flexbox `align-items`. Vertically aligns content if the `direction` is `row`, or horizontally aligns content if the `direction` is `column`.
+
+In the example below, `flex-start` will align the children content to the top.
+
+##### arrow
+
+**Type**: `boolean`,`"stepper"`
+
+Renders specified incrementer/decrementer arrows.
+
+##### defaultValue
+
+**Type**: `boolean`
+
+The default (initial) state to use if `value` is undefined.
+
+##### direction
+
+**Type**: `FlexDirection`
+
+The direction flow of the children content can be adjusted with `direction`. `column` will align children vertically and `row` will align children horizontally.
+
+##### disabled
+
+**Type**: `boolean`
+
+Determines if element is disabled.
+
+##### error
+
+**Type**: `boolean`
+
+Renders an error state.
+
+##### expanded
+
+**Type**: `boolean`
+
+Expands to the maximum available width (if horizontal) or height (if vertical).
+
+##### format
+
+**Type**: `"number"`,`"type"`
+
+Modifies how `value` can be adjusted.
+
+##### gap
+
+**Type**: `number`
+
+Spacing in between each child can be adjusted by using `gap`. The value of `gap` works as a multiplier to the library's grid system (base of `4px`).
+
+##### isClickable
+
+**Type**: `boolean`
+
+Renders a `cursor: pointer` on hover.
+
+##### isCommitOnBlurOrEnter
+
+**Type**: `boolean`
+
+Fires the `onChange` callback after pressing `ENTER` or focusing away.
+
+##### isFocused
+
+**Type**: `boolean`
+
+Renders focus styles.
+
+##### isInline
+
+**Type**: `boolean`
+
+Renders as an inline element (layout).
+
+##### isResizable
+
+**Type**: `boolean`
+
+Allows for the a multiline `TextInput` to tbe resizable by dragging.
+
+##### isRounded
+
+**Type**: `boolean`
+
+Renders with rounded corners.
+
+##### isShiftStepEnabled
+
+**Type**: `boolean`
+
+Enables larger `step` increment/decrement values when holding down `Shift`.
+
+##### isSubtle
+
+**Type**: `boolean`
+
+Renders a subtle `TextInput`.
+
+##### justify
+
+**Type**: `CSS['justifyContent']`
+
+Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`.
+In the example below, `flex-start` will align the children content to the left.
+
+##### label
+
+**Type**: `string`
+
+Label for the form element.
+
+##### maxRows
+
+**Type**: `number`
+
+Maximum number of rows to show for a multiline `TextInput`.
+
+##### minRows
+
+**Type**: `number`
+
+Alias for `rows`.
+
+##### multiline
+
+**Type**: `boolean`
+
+Renders `TextInput` to allow for multiline lines (`textarea`).
+
+##### onChange
+
+**Type**: `Function`
+
+Callback function when the `value` is committed.
+
+##### onHeightChange
+
+**Type**: `Function`
+
+Callback function when the height changes with a multiline `TextInput`.
+
+##### prefix
+
+**Type**: `React.ReactElement`
+
+Renders prefix content within `TextInput`.
+
+##### size
+
+**Type**: `"large"`,`"medium"`,`"small"`
+
+Determines the size of `TextInput`.
+
+##### suffix
+
+**Type**: `React.ReactElement`
+
+Renders prefix content within `TextInput`.
+
+##### validate
+
+**Type**: `Function`
+
+Determines if the next `value` should be committed.
+
+##### value
+
+**Type**: `any`
+
+Value for the form element.
+
+##### wrap
+
+**Type**: `boolean`
+
+Determines if children should wrap.
+
+<!-- /Automatically Generated -->
+<!-- /props -->
+
+## See Also
+
+-   [Button](../button/)
+-   [Select](../select/)
+-   [UnitInput](../unitinput/)

packages/components/src/text-input/hooks/use-text-input-state-utils.js

@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+import { useDrag } from 'react-use-gesture';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+
+import { clearSelection } from '../../utils/clear-selection';
+
+import * as styles from '../styles';
+
+/**
+ * @typedef Props
+ * @property {(int: number|undefined) => void} [increment] Increment text input number value callback.
+ * @property {(int: number|undefined) => void} [decrement] Decrement text input number value callback.
+ * @property {boolean} [isTypeNumeric] Whether the type is numeric.
+ * @property {string} [dragAxis] The drag axis, e.g., `x` or `y`.
+ */
+
+/**
+ * @param {Props} props
+ */
+export function useBaseDragHandlers( {
+	decrement = noop,
+	dragAxis,
+	increment = noop,
+	isTypeNumeric = true,
+} ) {
+	const [ dragState, setDragState ] = useState(
+		/** @type {undefined | 'x' | 'y'} */ ( undefined )
+	);
+	const threshold = 10;
+
+	useEffect( () => {
+		if ( dragState ) {
+			clearSelection();
+
+			if ( dragState === 'x' ) {
+				document.documentElement.classList.add(
+					styles.globalDraggableX
+				);
+				document.documentElement.classList.remove(
+					styles.globalDraggableY
+				);
+			} else {
+				document.documentElement.classList.remove(
+					styles.globalDraggableX
+				);
+				document.documentElement.classList.add(
+					styles.globalDraggableY
+				);
+			}
+		} else {
+			document.documentElement.classList.remove(
+				styles.globalDraggableX
+			);
+			document.documentElement.classList.remove(
+				styles.globalDraggableY
+			);
+		}
+	}, [ dragState ] );
+
+	const dragGestures = useDrag(
+		( state ) => {
+			const [ x, y ] = state.delta;
+			setDragState( state.dragging ? state.axis : undefined );
+
+			const isMovementY = state.axis === 'y';
+			const movement = isMovementY ? y * -1 : x;
+
+			if ( Math.abs( movement ) === 0 ) return;
+
+			const shouldIncrement = movement > 0;
+
+			let boost = movement === threshold ? 0 : movement;
+			boost = shouldIncrement ? boost : boost * -1;
+			boost = boost - 1;
+
+			if ( shouldIncrement ) {
+				increment( boost );
+			} else {
+				decrement( boost );
+			}
+		},
+		{ axis: dragAxis, threshold }
+	);
+
+	const handleOnMouseUp = useCallback( () => setDragState( undefined ), [] );
+
+	const baseGestures = isTypeNumeric
+		? dragGestures()
+		: {
+				onPointerDown: noop,
+				onPointerMove: noop,
+				onPointerUp: noop,
+				onPointerCancel: noop,
+		  };
+
+	const gestures = {
+		...baseGestures,
+		onMouseUp: handleOnMouseUp,
+	};
+
+	return gestures;
+}