Cleaning Up xStateFlows and abstracting generic interfaces

src/lib/components/maschines/SignIn.svelte

@@ -0,0 +1,50 @@
+<!-- src/lib/components/machines/SignIn.svelte -->
+<script lang="ts">
+	import { useMachine } from '@xstate/svelte';
+	import { SignInMachine } from './signInMachine';
+	import { superForm } from 'sveltekit-superforms/client';
+	import { HelloUserSchema } from '$lib/types/HelloUserSchema';
+
+	const { state, send } = useMachine(SignInMachine);
+
+	const initialFormData = {
+		email: '',
+		name: ''
+	};
+
+	const { form, errors, validate, constraints } = superForm(initialFormData, {
+		validators: HelloUserSchema,
+		warnings: {
+			noValidationAndConstraints: false
+		},
+		validationMethod: 'oninput',
+		clearOnSubmit: 'errors-and-message'
+	});
+
+	async function handleNext(field) {
+		const validationResult = await validate(field);
+		if (validationResult.valid) {
+			send({ type: 'NEXT', value: form[field] });
+		}
+	}
+</script>
+
+{#if $state.matches('notSignedIn')}
+	<button on:click={() => send('START')}>Start Sign In</button>
+{:else if $state.matches('email')}
+	<div>
+		<label for="email">Email:</label>
+		<input id="email" type="email" bind:value={form.email} {...constraints.email} />
+		{#if errors.email}<span>{$errors.email}</span>{/if}
+		<button on:click={() => handleNext('email')}>Next</button>
+	</div>
+{:else if $state.matches('name')}
+	<div>
+		<label for="name">Name:</label>
+		<input id="name" type="text" bind:value={form.name} {...constraints.name} />
+		{#if errors.name}<span>{$errors.name}</span>{/if}
+		<button on:click={() => handleNext('name')}>Next</button>
+	</div>
+{:else if $state.matches('signedIn')}
+	<!-- <Composite id="account" component="Account" /> -->account signed in
+{/if}