Part1 of refactoring InputFields into their own components.

src/lib/components/refactor/ComposerForm.svelte

@@ -3,10 +3,16 @@
 	import { afterUpdate } from 'svelte';
 	import { writable } from 'svelte/store';
 	import { RangeSlider, SlideToggle } from '@skeletonlabs/skeleton';
+	import TextInput from './inputfields/TextInput.svelte';
 
 	export let me;
 
-	const { initialFormData, fields, validators } = $me.context;
+	const { fields, validators } = $me.context;
+
+	const initialFormData = fields.reduce((acc, field) => {
+		acc[field.name] = field.placeholder;
+		return acc;
+	}, {});
 
 	const { form, errors, validate, constraints } = superForm(initialFormData, {
 		validators: validators,
@@ -83,31 +89,32 @@
 		</aside>
 	{:else}
 		<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
-			{#each fields as field}
+			{#each fields as field (field.name)}
 				<div class="mb-4">
-					{#if $errors[field]}
+					{#if $errors[field.name]}
-						<span class="block mb-2 font-semibold text-red-500">{$errors[field]}</span>
+						<span class="block mb-2 font-semibold text-red-500">{$errors[field.name]}</span>
 					{:else}
-						<label for={field} class="block mb-2 font-semibold text-white"
+						<label for={field.name} class="block mb-2 font-semibold text-white"
-							>{field.charAt(0).toUpperCase() + field.slice(1)}
+							>{field.name.charAt(0).toUpperCase() + field.name.slice(1)}
 						</label>
 					{/if}
-
+					{#if field.type === 'text' || field.type === 'email' || field.type === 'number'}
-					{#if field === 'about'}
+						<TextInput {form} {errors} {validate} {field} {constraints} />
+					{:else if field.type === 'textarea'}
 						<textarea
-							name={field}
+							name={field.name}
 							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]}
+							bind:value={$form[field.name]}
-							aria-invalid={$errors[field] ? 'true' : undefined}
+							aria-invalid={$errors[field.name] ? 'true' : undefined}
-							{...constraints[field]}
+							{...constraints[field.name]}
 						/>
-					{:else if field === 'favoriteFood'}
+					{:else if field.type === 'select'}
 						<select
-							name={field}
+							name={field.name}
 							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]}
+							bind:value={$form[field.name]}
-							aria-invalid={$errors[field] ? 'true' : undefined}
+							aria-invalid={$errors[field.name] ? 'true' : undefined}
-							{...constraints[field]}
+							{...constraints[field.name]}
 						>
 							<option value="">Select...</option>
 							<option value="apple">Apple</option>
@@ -116,32 +123,21 @@
 							<option value="strawberry">Strawberry</option>
 							<option value="mango">Mango</option>
 						</select>
-					{:else if field === 'age'}
+					{:else if field.type === 'slider'}
-						<input
+						<RangeSlider
-							name={field}
+							name={field.name}
-							type="number"
+							bind:value={$form[field.name]}
-							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"
+							min={0}
-							bind:value={$form[field]}
+							max={100}
-							aria-invalid={$errors[field] ? 'true' : undefined}
+							step={1}
-							{...constraints[field]}
+							ticked
-						/>
+						>
-					{:else if field === 'slider'}
-						<RangeSlider name={field} bind:value={$form[field]} min={0} max={100} step={1} ticked>
 							<div class="flex items-center justify-between">
-								<div class="text-xs">{$form[field]} / 100</div>
+								<div class="text-xs">{$form[field.name]} / 100</div>
 							</div>
 						</RangeSlider>
-					{:else if field === 'toggle'}
+					{:else if field.type === 'toggle'}
-						<SlideToggle name={field} bind:checked={$form[field]} />
+						<SlideToggle name={field.name} bind:checked={$form[field.name]} />
-					{:else}
-						<input
-							name={field}
-							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]}
-							aria-invalid={$errors[field] ? 'true' : undefined}
-							{...constraints[field]}
-						/>
 					{/if}
 				</div>
 			{/each}

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { writable } from 'svelte/store';
+
+	export let form;
+	export let errors;
+	export let validate;
+	export let field;
+	export let constraints;
+
+	const state = writable('');
+</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}
+	<select
+		name={field.name}
+		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]}
+	>
+		<option value="">Select...</option>
+		<option value="apple">Apple</option>
+		<option value="banana">Banana</option>
+		<option value="coconut">Coconut</option>
+		<option value="strawberry">Strawberry</option>
+		<option value="mango">Mango</option>
+	</select>
+</div>

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { writable } from 'svelte/store';
+	import { RangeSlider } from '@skeletonlabs/skeleton';
+
+	export let form;
+	export let errors;
+	export let validate;
+	export let field;
+	export let constraints;
+
+	const state = writable(0);
+</script>
+
+<div class="mb-4">
+	<label for={field.name} class="block mb-2 font-semibold text-white">
+		{field.name.charAt(0).toUpperCase() + field.name.slice(1)}
+	</label>
+	<RangeSlider
+		name={field.name}
+		bind:value={$form[field.name]}
+		min={0}
+		max={100}
+		step={1}
+		ticked
+		{...constraints[field.name]}
+	>
+		<div class="flex items-center justify-between">
+			<div class="text-xs">{$form[field.name]} / 100</div>
+		</div>
+	</RangeSlider>
+</div>

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>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { writable } from 'svelte/store';
+	import { SlideToggle } from '@skeletonlabs/skeleton';
+
+	export let form;
+	export let errors;
+	export let validate;
+	export let field;
+	export let constraints;
+
+	const state = writable(false);
+</script>
+
+<div class="mb-4">
+	<label for={field.name} class="block mb-2 font-semibold text-white">
+		{field.name.charAt(0).toUpperCase() + field.name.slice(1)}
+	</label>
+	<SlideToggle name={field.name} bind:checked={$form[field.name]} {...constraints[field.name]} />
+</div>

src/routes/composer/form/+page.svelte

@@ -20,14 +20,13 @@
 					id: 'validation',
 					initial: 'notValidated',
 					context: {
-						initialFormData: {
+						fields: [
-							name: '',
+							{ name: 'name', type: 'text', placeholder: '' },
-							email: '',
+							{ name: 'email', type: 'email', placeholder: '' },
-							about: '',
+							{ name: 'about', type: 'textarea', placeholder: '' },
-							age: '',
+							{ name: 'age', type: 'number', placeholder: '' },
-							favoriteFood: ''
+							{ name: 'favoriteFood', type: 'select', placeholder: '' }
-						},
+						],
-						fields: ['name', 'email', 'about', 'age', 'favoriteFood'],
 						validators: UserSchema
 					},
 					states: {