Part1 of refactoring InputFields into their own components.

src/lib/components/refactor/inputfields/TextInput.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { createMachine, interpret } from 'xstate';
+	import { writable } from 'svelte/store';
+
+	export let form;
+	export let errors;
+	export let validate;
+	export let field;
+	export let constraints;
+
+	const machine = createMachine({
+		id: 'field',
+		initial: 'notValid',
+		states: {
+			notValid: {
+				on: {
+					VALIDATE: 'valid'
+				}
+			},
+			valid: {
+				on: {
+					INVALIDATE: 'notValid'
+				}
+			}
+		}
+	});
+
+	const service = interpret(machine);
+	service.start();
+
+	const state = writable(service.state.value);
+
+	form.subscribe(async (value) => {
+		const validationResult = await validate();
+		if (validationResult.valid) {
+			service.send('VALIDATE');
+		} else {
+			service.send('INVALIDATE');
+		}
+		state.set(service.state.value);
+	});
+</script>
+
+<div class="mb-4">
+	{#if $errors[field.name]}
+		<span class="block mb-2 font-semibold text-red-500">{$errors[field.name]}</span>
+	{:else}
+		<label for={field.name} class="block mb-2 font-semibold text-white"
+			>{field.name.charAt(0).toUpperCase() + field.name.slice(1)}</label
+		>
+	{/if}
+
+	<input
+		name={field.name}
+		type="text"
+		class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+		bind:value={$form[field.name]}
+		aria-invalid={$errors[field.name] ? 'true' : undefined}
+		{...constraints[field.name]}
+	/>
+</div>