Upgrade for Ink 3 (#58)

package.json

@@ -10,19 +10,18 @@
 		"url": "github.com/vadimdemedes"
 	},
 	"main": "build",
+	"types": "build/index.d.ts",
 	"engines": {
 		"node": ">=10"
 	},
 	"scripts": {
-		"test": "xo && FORCE_COLOR=1 ava && npm run typecheck",
-		"build": "babel src --out-dir=build",
-		"prepare": "npm run build",
-		"pretest": "npm run build",
-		"typecheck": "tsc --noEmit --jsx react index.test-d.tsx"
+		"test": "tsc --noEmit && xo && FORCE_COLOR=1 ava",
+		"build": "tsc",
+		"prepare": "tsc",
+		"pretest": "tsc"
 	},
 	"files": [
-		"build",
-		"index.d.ts"
+		"build"
 	],
 	"keywords": [
 		"ink",
@@ -37,51 +36,54 @@
 		"query"
 	],
 	"dependencies": {
-		"chalk": "^3.0.0",
-		"prop-types": "^15.5.10"
+		"chalk": "^4.1.0",
+		"type-fest": "^0.15.1"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.1.2",
-		"@babel/core": "^7.1.2",
-		"@babel/plugin-proposal-class-properties": "^7.1.0",
-		"@babel/preset-react": "^7.0.0",
+		"@ava/babel": "^1.0.1",
+		"@babel/preset-react": "^7.10.1",
+		"@sindresorhus/tsconfig": "^0.7.0",
 		"@types/react": "^16.8.8",
 		"@vdemedes/prettier-config": "^1.0.0",
-		"ava": "^1.3.1",
-		"babel-eslint": "^10.0.1",
-		"eslint-config-xo-react": "^0.17.0",
-		"eslint-plugin-react": "^7.11.1",
+		"ava": "^3.9.0",
+		"delay": "^4.3.0",
+		"eslint-config-xo-react": "^0.23.0",
+		"eslint-plugin-react": "^7.20.0",
+		"eslint-plugin-react-hooks": "^4.0.4",
 		"husky": "^4.2.5",
-		"ink": "^2.0.0",
-		"ink-testing-library": "^1.0.0",
+		"ink": "^3.0.0-3",
+		"ink-testing-library": "^2.0.0",
 		"prettier": "^2.0.5",
 		"pretty-quick": "^2.0.1",
 		"react": "^16.5.2",
 		"sinon": "^7.2.7",
-		"typescript": "^3.3.3333",
-		"xo": "^0.24.0"
+		"typescript": "^3.9.5",
+		"xo": "^0.32.0"
 	},
 	"peerDependencies": {
-		"ink": "^2.0.0",
+		"ink": "^3.0.0-3",
 		"react": "^16.5.2"
 	},
-	"babel": {
-		"plugins": [
-			"@babel/plugin-proposal-class-properties"
-		],
-		"presets": [
-			"@ava/stage-4",
-			"@babel/preset-react"
-		]
+	"ava": {
+		"babel": {
+			"testOptions": {
+				"presets": [
+					"@babel/preset-react"
+				]
+			}
+		}
 	},
 	"xo": {
-		"parser": "babel-eslint",
 		"extends": [
 			"xo-react"
 		],
+		"plugins": [
+			"react"
+		],
 		"prettier": true,
 		"rules": {
-			"react/no-unused-prop-types": 1,
+			"react/no-unused-prop-types": 0,
+			"react/prop-types": 0,
 			"unicorn/no-hex-escape": 0
 		}
 	},

readme.md

@@ -2,6 +2,8 @@
 
 > Text input component for [Ink](https://github.com/vadimdemedes/ink).
 
+Looking for a version compatible with Ink 2.x? Check out [previous release](https://github.com/vadimdemedes/ink-text-input/tree/v3.3.0).
+
 ## Install
 
 ```
@@ -11,34 +13,23 @@ $ npm install ink-text-input
 ## Usage
 
 ```jsx
-import React from 'react';
-import { render, Box } from 'ink';
+import React, { useState } from 'react';
+import { render, Box, Text } from 'ink';
 import TextInput from 'ink-text-input';
 
-class SearchQuery extends React.Component {
-	constructor() {
-		super();
-
-		this.state = {
-			query: ''
-		};
-
-		this.handleChange = this.handleChange.bind(this);
-	}
+const SearchQuery = () => {
+	const [query, setQuery] = useState('');
 
-	render() {
-		return (
-			<Box>
-				<Box marginRight={1}>Enter your query:</Box>
-				<TextInput value={this.state.query} onChange={this.handleChange} />
+	return (
+		<Box>
+			<Box marginRight={1}>
+				<Text>Enter your query:</Text>
 			</Box>
-		);
-	}
 
-	handleChange(query) {
-		this.setState({ query });
-	}
-}
+			<TextInput value={query} onChange={setQuery} />
+		</Box>
+	);
+};
 
 render(<SearchQuery />);
 ```
@@ -61,14 +52,14 @@ Text to display when `value` is empty.
 
 ### showCursor
 
-Type: `boolean`<br>
+Type: `boolean`\
 Default: `true`
 
 Whether to show cursor and allow navigation inside text input with arrow keys.
 
 ### highlightPastedText
 
-Type: `boolean`<br>
+Type: `boolean`\
 Default: `false`
 
 Highlight pasted text.
@@ -102,7 +93,7 @@ This component also exposes an [uncontrolled](https://reactjs.org/docs/uncontrol
 
 ```jsx
 import React from 'react';
-import { render, Box } from 'ink';
+import { render, Box, Text } from 'ink';
 import { UncontrolledTextInput } from 'ink-text-input';
 
 const SearchQuery = () => {
@@ -112,15 +103,14 @@ const SearchQuery = () => {
 
 	return (
 		<Box>
-			<Box marginRight={1}>Enter your query:</Box>
+			<Box marginRight={1}>
+				<Text>Enter your query:</Text>
+			</Box>
+
 			<UncontrolledTextInput onSubmit={handleSubmit} />
 		</Box>
 	);
 };
 
 render(<SearchQuery />);
 ```
-
-## License
-
-MIT © [Vadim Demedes](https://github.com/vadimdemedes)