From 720282dbfd34cb07da9fc23a134121d26a6a7979 Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Tue, 8 Aug 2023 08:41:47 +0200
Subject: [PATCH] Successfully abstracted the InputTypes to dynamically
 composer Forms.

---
 .../components/refactor/ComposerForm.svelte   | 72 ++++++-------------
 .../refactor/inputfields/NumberInput.svelte   | 20 ++++++
 .../refactor/inputfields/SelectInput.svelte   | 37 ++++------
 .../refactor/inputfields/SliderInput.svelte   | 31 ++++----
 .../refactor/inputfields/TextAreaInput.svelte | 19 +++++
 .../refactor/inputfields/TextInput.svelte     | 58 +++------------
 .../refactor/inputfields/ToggleInput.svelte   |  9 +--
 7 files changed, 98 insertions(+), 148 deletions(-)
 create mode 100644 src/lib/components/refactor/inputfields/NumberInput.svelte
 create mode 100644 src/lib/components/refactor/inputfields/TextAreaInput.svelte

diff --git a/src/lib/components/refactor/ComposerForm.svelte b/src/lib/components/refactor/ComposerForm.svelte
index 260f480..b75406c 100644
--- a/src/lib/components/refactor/ComposerForm.svelte
+++ b/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}
-</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">
+	{#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>
 				<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
-							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]}
-						/>
+						<TextAreaInput {form} {errors} {validate} {field} {constraints} />
 					{:else if field.type === 'select'}
-						<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>
+						<SelectInput {form} {errors} {validate} {field} {constraints} />
 					{:else if field.type === 'slider'}
-						<RangeSlider
-							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>
+						<SliderInput {form} {errors} {validate} {field} {constraints} />
 					{: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}
diff --git a/src/lib/components/refactor/inputfields/NumberInput.svelte b/src/lib/components/refactor/inputfields/NumberInput.svelte
new file mode 100644
index 0000000..9faa93b
--- /dev/null
+++ b/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]}
+/>
diff --git a/src/lib/components/refactor/inputfields/SelectInput.svelte b/src/lib/components/refactor/inputfields/SelectInput.svelte
index c2b5235..5be1e7a 100644
--- a/src/lib/components/refactor/inputfields/SelectInput.svelte
+++ b/src/lib/components/refactor/inputfields/SelectInput.svelte
@@ -10,26 +10,17 @@
 	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>
+<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>
diff --git a/src/lib/components/refactor/inputfields/SliderInput.svelte b/src/lib/components/refactor/inputfields/SliderInput.svelte
index 6bd1c43..fb5a4b6 100644
--- a/src/lib/components/refactor/inputfields/SliderInput.svelte
+++ b/src/lib/components/refactor/inputfields/SliderInput.svelte
@@ -11,21 +11,16 @@
 	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>
+<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>
diff --git a/src/lib/components/refactor/inputfields/TextAreaInput.svelte b/src/lib/components/refactor/inputfields/TextAreaInput.svelte
new file mode 100644
index 0000000..0e95370
--- /dev/null
+++ b/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]}
+/>
diff --git a/src/lib/components/refactor/inputfields/TextInput.svelte b/src/lib/components/refactor/inputfields/TextInput.svelte
index 3a3af48..2b5a8e7 100644
--- a/src/lib/components/refactor/inputfields/TextInput.svelte
+++ b/src/lib/components/refactor/inputfields/TextInput.svelte
@@ -7,55 +7,13 @@
 	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>
+<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]}
+/>
diff --git a/src/lib/components/refactor/inputfields/ToggleInput.svelte b/src/lib/components/refactor/inputfields/ToggleInput.svelte
index cf1c00c..aeb6c8e 100644
--- a/src/lib/components/refactor/inputfields/ToggleInput.svelte
+++ b/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>
+<SlideToggle name={field.name} bind:checked={$form[field.name]} {...constraints[field.name]} />