improove input component

Author: sawinjer

source/components/Form/Form.tsx

@@ -1,12 +1,13 @@
 import React, { useMemo, useState } from "react";
 import { Box, Text, useFocus, useFocusManager, useInput } from "ink";
-import { Field } from "./interfaces.js";
+import { Field, Validate } from "./interfaces.js";
 import { BooleanInput } from "../BooleanInput.js";
 import { MultiSelectInput } from "../MultiSelectInput.js";
 import { Button } from "../Button.js";
 import { InputWithLabel } from "../InputWithLabel.js";
 import { useArrowFocus } from "../../hooks/useArrowFocus.js";
 import figlet from "figlet";
+import { IntNumbersRegExp, NumberRegExp } from "../../utils/regexps.js";
 
 interface Props {
 	title?: string;
@@ -44,7 +45,7 @@ export const Form: React.FC<Props> = (props) => {
 	const onSubmit = () => {
 		const errors: Record<string, string> = {};
 		for (const field of props.fields) {
-			if (field.required && !result[field.name]) {
+			if (field.required && field.type === "string" && !result[field.name]) {
 				errors[field.name] = "This field is required";
 			}
 
@@ -56,8 +57,8 @@ export const Form: React.FC<Props> = (props) => {
 				errors[field.name] = "This field is required";
 			}
 
-			// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-			const errorMessage = field.validate?.(result[field.name] as any);
+			const validate = field.validate as Validate<unknown> | undefined;
+			const errorMessage = validate?.(result[field.name]);
 
 			if (errorMessage) {
 				errors[field.name] = errorMessage;
@@ -182,6 +183,21 @@ const FieldView = <T extends Field>(field: FieldViewProps<T>) => {
 		);
 	}
 
+	if (field.type === "number") {
+		return (
+			<Box borderColor={borderColor} borderStyle="round" flexDirection="column">
+				<InputWithLabel
+					validateRegExp={field.int ? IntNumbersRegExp : NumberRegExp}
+					label={field.label}
+					focus={field.focused}
+					value={(field.value as number)?.toString() || ""}
+					onChange={field.onChange}
+				/>
+				{ErrorText}
+			</Box>
+		);
+	}
+
 	if (field.type === "boolean") {
 		return (
 			<Box

source/components/Form/interfaces.ts

@@ -2,26 +2,23 @@ export type Field = (
 	| StringInputField
 	| BooleanInputField
 	| StringArrayInputField
+	| NumberInputField
 ) &
 	InputFieldBase;
 
-type StringInputField = {
-	type: "string";
-	deafultValue?: string;
-	validate?: (value?: string) => string | undefined;
-};
-
-type BooleanInputField = {
-	type: "boolean";
-	deafultValue?: boolean;
-	validate?: (value?: boolean) => string | undefined;
-};
+export type Validate<V> = (value: V) => string | undefined;
+type InputField<K extends string, V> = {
+	type: K;
+	deafultValue?: V;
+} & (
+	| { required: true; validate?: Validate<V> }
+	| { required?: false | undefined; validate?: Validate<V | undefined> }
+);
 
-type StringArrayInputField = {
-	type: "string[]";
-	deafultValue?: string[];
-	validate?: (value?: string[]) => string | undefined;
-};
+type StringInputField = InputField<"string", string>;
+type BooleanInputField = InputField<"boolean", boolean>;
+type StringArrayInputField = InputField<"string[]", string[]>;
+type NumberInputField = InputField<"number", number> & { int?: boolean };
 
 type InputFieldBase = {
 	name: string;

source/components/InputWithLabel.tsx

@@ -4,13 +4,27 @@ import TextInput, { Props as OriginalProps } from "ink-text-input";
 
 interface Props extends OriginalProps {
 	label?: string;
+	validateRegExp?: RegExp;
 }
 
 export const InputWithLabel: React.FC<Props> = (props) => {
-	const { label, ...rest } = props;
+	const { label, onChange, ...rest } = props;
+
+	const handleChange = (value: string) => {
+		if (!props.validateRegExp || !value) {
+			onChange(value);
+			return;
+		}
+
+		if (!props.validateRegExp.test(value)) {
+			return;
+		}
+
+		onChange(value);
+	};
 
 	if (!label) {
-		return <TextInput {...rest} />;
+		return <TextInput {...rest} onChange={handleChange} />;
 	}
 
 	return (
@@ -19,7 +33,7 @@ export const InputWithLabel: React.FC<Props> = (props) => {
 				<Text color="grey">{label}</Text>
 			</Box>
 
-			<TextInput {...rest} />
+			<TextInput {...rest} onChange={handleChange} />
 		</Box>
 	);
 };