field_types

services/ui/src/components/auth/AuthConfirmPage.tsx

@@ -213,7 +213,6 @@ const AuthConfirmPage = (props: {
 								<Field
 									kind={FieldKind.INPUT}
 									fieldKey="token"
-									label={true}
 									value={form()?.token?.value}
 									valid={form()?.token?.valid}
 									config={AUTH_FIELDS.token}

services/ui/src/components/auth/AuthForm.tsx

@@ -1,7 +1,7 @@
 import { createSignal, createEffect, createMemo } from "solid-js";
 import axios from "axios";
 
-import Field from "../field/Field";
+import Field, { FieldHandler } from "../field/Field";
 import AUTH_FIELDS from "./config/fields";
 import {
 	BENCHER_API_URL,
@@ -43,7 +43,7 @@ export const AuthForm = (props: Props) => {
 	);
 	const [form, setForm] = createSignal(initForm());
 
-	const handleField = (key, value, valid) => {
+	const handleField: FieldHandler = (key, value, valid) => {
 		setForm({
 			...form(),
 			[key]: {
@@ -187,7 +187,6 @@ export const AuthForm = (props: Props) => {
 				<Field
 					kind={FieldKind.CHECKBOX}
 					fieldKey="consent"
-					label=""
 					value={form()?.consent?.value}
 					valid={form()?.consent?.valid}
 					config={AUTH_FIELDS.consent}

services/ui/src/components/field/Field.tsx

@@ -1,11 +1,31 @@
-import Input from "./kinds/Input";
-import Checkbox from "./kinds/Checkbox";
+import Input, { InputConfig, InputValue } from "./kinds/Input";
+import Checkbox, { CheckboxConfig, CheckboxValue } from "./kinds/Checkbox";
 import Switch from "./kinds/Switch";
 import Select from "./kinds/Select";
 import FieldKind from "./kind";
 import Radio from "./kinds/Radio";
 
-const Field = (props) => {
+type FieldValue = CheckboxValue | InputValue;
+
+type FieldConfig = CheckboxConfig | InputConfig;
+
+export type FieldHandler = (
+	key: string,
+	value: FieldValue,
+	valid: boolean,
+) => void;
+
+export type FieldValueHandler = (value: FieldValue) => void;
+
+const Field = (props: {
+	kind: FieldKind;
+	fieldKey: string;
+	label?: string;
+	value: FieldValue;
+	valid: boolean;
+	config: FieldConfig;
+	handleField: FieldHandler;
+}) => {
 	function handleField(value) {
 		switch (props.kind) {
 			case FieldKind.CHECKBOX:
@@ -24,10 +44,11 @@ const Field = (props) => {
 				break;
 			case FieldKind.INPUT:
 			case FieldKind.NUMBER:
+				const config = props.config as InputConfig;
 				props.handleField(
 					props.fieldKey,
 					value,
-					props.config.validate ? props.config.validate(value) : true,
+					config.validate ? config.validate(value) : true,
 				);
 				break;
 		}
@@ -38,8 +59,8 @@ const Field = (props) => {
 			case FieldKind.CHECKBOX:
 				return (
 					<Checkbox
-						value={props.value}
-						config={props.config}
+						value={props.value as CheckboxValue}
+						config={props.config as CheckboxConfig}
 						handleField={handleField}
 					/>
 				);
@@ -73,9 +94,9 @@ const Field = (props) => {
 			case FieldKind.NUMBER:
 				return (
 					<Input
-						value={props.value}
+						value={props.value as InputValue}
 						valid={props.valid}
-						config={props.config}
+						config={props.config as InputConfig}
 						handleField={handleField}
 					/>
 				);

services/ui/src/components/field/kinds/Checkbox.tsx

@@ -1,4 +1,18 @@
-const Checkbox = (props) => {
+import { JSX } from "solid-js";
+import { FieldValueHandler } from "../Field";
+
+export type CheckboxValue = boolean;
+
+export interface CheckboxConfig {
+	label: string;
+	placeholder: JSX.Element;
+}
+
+const Checkbox = (props: {
+	value: CheckboxValue;
+	config: CheckboxConfig;
+	handleField: FieldValueHandler;
+}) => {
 	return (
 		<div class="field" id={props.config.label}>
 			<input

services/ui/src/components/field/kinds/Input.tsx

@@ -1,8 +1,26 @@
-const Input = (props) => {
+import { FieldValueHandler } from "../Field";
+
+export type InputValue = string | number | null | undefined;
+
+export interface InputConfig {
+	icon: string;
+	type: string;
+	placeholder?: string;
+	value: InputValue;
+	disabled?: boolean;
+	validate: (value: InputValue) => boolean;
+}
+
+const Input = (props: {
+	value: InputValue;
+	valid: boolean;
+	config: InputConfig;
+	handleField: FieldValueHandler;
+}) => {
 	return (
 		<div class="control has-icons-left has-icons-right">
 			<span class="icon is-small is-left">
-				<i class={props.config.icon}></i>
+				<i class={props.config.icon} />
 			</span>
 			<input
 				class="input"
@@ -14,7 +32,7 @@ const Input = (props) => {
 			/>
 			{props.valid && (
 				<span class="icon is-small is-right">
-					<i class="fas fa-check"></i>
+					<i class="fas fa-check" />
 				</span>
 			)}
 		</div>

services/ui/src/components/field/kinds/Radio.tsx

@@ -26,7 +26,7 @@ const Radio = (props) => {
 			<div class="level-left">
 				<div class="level-item">
 					<div class="icon is-small is-left">
-						<i class={props.config.icon}></i>
+						<i class={props.config.icon} />
 					</div>
 				</div>
 				<div class="level-item">

services/ui/src/components/field/kinds/Select.tsx

@@ -1,6 +1,6 @@
 const Select = (props) => {
 	function getStatus() {
-		let selected = props.value.options.find((option) => {
+		const selected = props.value.options.find((option) => {
 			return props.value.selected === option.value;
 		});
 		if (selected?.status) {

services/ui/src/components/field/kinds/Switch.tsx

@@ -9,6 +9,7 @@ const Switch = (props) => {
 				checked={props.value}
 				disabled={props.config?.disabled}
 			/>
+			{/* rome-ignore lint/a11y/useKeyWithClickEvents: TODO */}
 			<label
 				for={props.config?.label}
 				onClick={(_event) => {
@@ -17,7 +18,7 @@ const Switch = (props) => {
 					}
 					props.handleField(!props.value);
 				}}
-			></label>
+			/>
 		</div>
 	);
 };