Successfully abstracted the InputTypes to dynamically composer Forms.

src/lib/components/refactor/ComposerForm.svelte

@@ -2,8 +2,12 @@
 	import { superForm } from 'sveltekit-superforms/client';
 	import { afterUpdate } from 'svelte';
 	import { writable } from 'svelte/store';
-	import { RangeSlider, SlideToggle } from '@skeletonlabs/skeleton';
+	import TextInput from './inputFields/TextInput.svelte';
-	import TextInput from './inputfields/TextInput.svelte';
+	import ToggleInput from './inputFields/ToggleInput.svelte';
+	import SliderInput from './inputFields/SliderInput.svelte';
+	import SelectInput from './inputFields/SelectInput.svelte';
+	import TextAreaInput from './inputFields/TextAreaInput.svelte';
+	import NumberInput from './inputFields/NumberInput.svelte';
 
 	export let me;
 
@@ -52,7 +56,6 @@
 	}
 
 	function handleReset() {
-		// Reset the form and remove the message
 		form.set({});
 		successMessage.set(null);
 	}
@@ -69,18 +72,15 @@
 <div class="p-6">
 	My ID is: {$me.id} <br />
 	My state is: {$me.state}
+	{#if $me.state === 'validated'}
+		<aside id="message-container" class="p-4 mt-4 bg-green-500 rounded-md">
+			<div class="flex items-center justify-between">
+				<div>
+					<h2 class="text-lg font-semibold text-white">Success!</h2>
+					<p class="mt-1 text-white">{$me.message}</p>
 				</div>
-
-<div class="flex items-center justify-center w-full h-full p-6">
-	{#if $successMessage}
-		<aside class="w-full max-w-md p-4 alert variant-ghost" id="message-container">
-			<div class="alert-message">
-				<h3 class="h3">Success</h3>
-				<p>{$successMessage}</p>
-			</div>
-			<div class="alert-actions">
 				<button
-					class="px-4 py-2 mt-4 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+					class="p-1 ml-2 text-white bg-red-500 rounded-full hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500"
 					on:click={handleReset}
 				>
 					Reset
@@ -98,46 +98,20 @@
 							>{field.name.charAt(0).toUpperCase() + field.name.slice(1)}
 						</label>
 					{/if}
-					{#if field.type === 'text' || field.type === 'email' || field.type === 'number'}
+					{#if field.type === 'text'}
+						<TextInput {form} {errors} {validate} {field} {constraints} />
+					{:else if field.type === 'email'}
 						<TextInput {form} {errors} {validate} {field} {constraints} />
 					{:else if field.type === 'textarea'}
-						<textarea
+						<TextAreaInput {form} {errors} {validate} {field} {constraints} />
-							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]}
-						/>
 					{:else if field.type === 'select'}
-						<select
+						<SelectInput {form} {errors} {validate} {field} {constraints} />
-							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>
 					{:else if field.type === 'slider'}
-						<RangeSlider
+						<SliderInput {form} {errors} {validate} {field} {constraints} />
-							name={field.name}
-							bind:value={$form[field.name]}
-							min={0}
-							max={100}
-							step={1}
-							ticked
-						>
-							<div class="flex items-center justify-between">
-								<div class="text-xs">{$form[field.name]} / 100</div>
-							</div>
-						</RangeSlider>
 					{:else if field.type === 'toggle'}
-						<SlideToggle name={field.name} bind:checked={$form[field.name]} />
+						<ToggleInput {form} {errors} {validate} {field} {constraints} />
+					{:else if field.type === 'number'}
+						<NumberInput {form} {errors} {validate} {field} {constraints} />
 					{/if}
 				</div>
 			{/each}

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

@@ -0,0 +1,20 @@
+<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(0);
+</script>
+
+<input
+	name={field.name}
+	type="number"
+	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]}
+/>

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

@@ -10,14 +10,6 @@
 	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"
@@ -32,4 +24,3 @@
 	<option value="strawberry">Strawberry</option>
 	<option value="mango">Mango</option>
 </select>
-</div>

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

@@ -11,10 +11,6 @@
 	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]}
@@ -28,4 +24,3 @@
 		<div class="text-xs">{$form[field.name]} / 100</div>
 	</div>
 </RangeSlider>
-</div>

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

@@ -0,0 +1,19 @@
+<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>
+
+<textarea
+	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]}
+/>

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

@@ -7,49 +7,8 @@
 	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"
@@ -58,4 +17,3 @@
 	aria-invalid={$errors[field.name] ? 'true' : undefined}
 	{...constraints[field.name]}
 />
-</div>

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

@@ -7,13 +7,6 @@
 	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>