From e85f0323ca2cf13d26287bc25022f890cd35c8da Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Mon, 7 Aug 2023 09:10:24 +0200
Subject: [PATCH] further cleanup

---
 .../examples/CheckValidation.svelte           |  14 --
 src/lib/components/examples/Form.svelte       | 185 ------------------
 2 files changed, 199 deletions(-)
 delete mode 100644 src/lib/components/examples/CheckValidation.svelte
 delete mode 100644 src/lib/components/examples/Form.svelte

diff --git a/src/lib/components/examples/CheckValidation.svelte b/src/lib/components/examples/CheckValidation.svelte
deleted file mode 100644
index 554166e..0000000
--- a/src/lib/components/examples/CheckValidation.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- src/lib/components/CheckValidation.svelte -->
-<script lang="ts">
-	export let store;
-
-	$: console.log('checkvalidation: ' + $store.isValidated);
-</script>
-
-<div class="flex items-center justify-center w-12 h-12 m-10 rounded-full">
-	{#if $store.isValidated}
-		<div class="w-full h-full bg-green-500 rounded-full" />
-	{:else}
-		<div class="w-full h-full bg-red-500 rounded-full" />
-	{/if}
-</div>
diff --git a/src/lib/components/examples/Form.svelte b/src/lib/components/examples/Form.svelte
deleted file mode 100644
index e979239..0000000
--- a/src/lib/components/examples/Form.svelte
+++ /dev/null
@@ -1,185 +0,0 @@
-<script lang="ts">
-	import { superForm } from 'sveltekit-superforms/client';
-	import { UserSchema } from '$lib/types/UserSchema';
-	import { afterUpdate } from 'svelte';
-	import { writable } from 'svelte/store';
-	import { RangeSlider, SlideToggle } from '@skeletonlabs/skeleton';
-
-	export let store;
-	export let services;
-	let isStoreLoaded = false;
-
-	$: if ($store) isStoreLoaded = true;
-
-	const initialFormData = {
-		name: '',
-		email: '',
-		about: '',
-		age: '',
-		favoriteFood: ''
-		// slider: 0,
-		// toggle: false
-	};
-
-	const fields = ['name', 'email', 'about', 'age', 'favoriteFood'];
-
-	const { form, errors, validate, constraints } = superForm(initialFormData, {
-		validators: UserSchema,
-		warnings: {
-			noValidationAndConstraints: false
-		},
-		validationMethod: 'oninput', // Trigger validation on input events
-		clearOnSubmit: 'errors-and-message'
-	});
-
-	const successMessage = writable<string | null>(null);
-
-	// Update the isValidated property of the store whenever the errors object changes
-	$: {
-		$store.isValidated = !(
-			$errors.name ||
-			$errors.email ||
-			$errors.about ||
-			$errors.age ||
-			$errors.favoriteFood
-		);
-	}
-
-	async function handleSubmit() {
-		// Manually validate the form
-		const validationResult = await validate();
-
-		// Prevent submission if there are errors
-		if (!validationResult.valid) {
-			return;
-		}
-
-		// Here, we'll just log the form data
-		console.log(form);
-
-		// Set the success message after successful submission
-		successMessage.set('Form submitted successfully!');
-	}
-
-	function handleReset() {
-		// Reset the form and remove the message
-		form.set({});
-		successMessage.set(null);
-	}
-
-	// After update, scroll to the message container for better user experience
-	afterUpdate(() => {
-		const messageContainer = document.getElementById('message-container');
-		if (messageContainer) {
-			messageContainer.scrollIntoView({ behavior: 'smooth' });
-		}
-	});
-</script>
-
-{#if isStoreLoaded}
-	<div class="flex items-center justify-center min-h-screen overflow-scroll">
-		<div class="w-full">
-			STORE: {JSON.stringify($store)}
-			{#if $successMessage}
-				<!-- Display the success message instead of the form -->
-				<aside class="w-full max-w-md p-4 alert variant-ghost" id="message-container">
-					<!-- Icon -->
-					<!-- <div>(icon)</div> -->
-					<!-- Message -->
-					<div class="alert-message">
-						<h3 class="h3">Success</h3>
-						<p>{$successMessage}</p>
-					</div>
-					<!-- Actions (in this case, only the Reset button) -->
-					<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"
-							on:click={handleReset}
-						>
-							Reset
-						</button>
-					</div>
-				</aside>
-			{:else}
-				<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
-					{#each fields as field}
-						<div class="mb-4">
-							{#if $errors[field]}
-								<span class="block mb-2 font-semibold text-red-500">{$errors[field]}</span>
-							{:else}
-								<label for={field} class="block mb-2 font-semibold text-white"
-									>{field.charAt(0).toUpperCase() + field.slice(1)}
-								</label>
-							{/if}
-
-							{#if field === 'about'}
-								<textarea
-									name={field}
-									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]}
-								/>
-							{:else if field === 'favoriteFood'}
-								<select
-									name={field}
-									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]}
-								>
-									<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 === 'age'}
-								<input
-									name={field}
-									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]}
-									aria-invalid={$errors[field] ? 'true' : undefined}
-									{...constraints[field]}
-								/>
-							{: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>
-								</RangeSlider>
-							{:else if field === 'toggle'}
-								<SlideToggle name={field} bind:checked={$form[field]} />
-							{: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}
-					<button
-						type="submit"
-						class="w-full 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"
-						disabled={!$store.isValidated}
-					>
-						Submit
-					</button>
-				</form>
-			{/if}
-		</div>
-	</div>
-{/if}