From 125d7d997e742b3c65faca50b0c5a552333c5654 Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Tue, 1 Aug 2023 11:58:34 +0200
Subject: [PATCH] Added Basic xstate store management POC

---
 src/lib/components/Balance.svelte             |   2 +-
 src/lib/components/Wallet/Wallet.svelte       |   2 +
 .../examples/CheckValidation.svelte           |  14 +
 src/lib/components/examples/Form.svelte       | 240 ++++++++++--------
 src/lib/components/examples/bugs.md           |   8 -
 src/lib/components/examples/feedback.md       |   1 +
 src/lib/services/validationRecipe.ts          |  27 ++
 src/lib/types/UserSchema.ts                   |   2 +-
 src/routes/form/+page.svelte                  |  39 +++
 src/routes/helloearth/+page.svelte            |   2 +-
 10 files changed, 224 insertions(+), 113 deletions(-)
 create mode 100644 src/lib/components/examples/CheckValidation.svelte
 delete mode 100644 src/lib/components/examples/bugs.md
 create mode 100644 src/lib/components/examples/feedback.md
 create mode 100644 src/lib/services/validationRecipe.ts
 create mode 100644 src/routes/form/+page.svelte

diff --git a/src/lib/components/Balance.svelte b/src/lib/components/Balance.svelte
index 8a04bd6..6fc53d5 100644
--- a/src/lib/components/Balance.svelte
+++ b/src/lib/components/Balance.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { fetchBalance } from '@wagmi/core';
 	import { onMount } from 'svelte';
 
diff --git a/src/lib/components/Wallet/Wallet.svelte b/src/lib/components/Wallet/Wallet.svelte
index 06c8e0c..13cd80d 100644
--- a/src/lib/components/Wallet/Wallet.svelte
+++ b/src/lib/components/Wallet/Wallet.svelte
@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { connectWallet } from '$lib/services/wallet/wallet';
 	import WalletConnect from '$lib/WalletConnect.svelte';
+	import Send from '$lib/Send.svelte';
 
 	// export let id;
 	export let store;
@@ -21,6 +22,7 @@
 		<div class="mb-4 text-lg font-medium">
 			PKP Wallet: <span class="text-blue-600">{$store.pkpWallet.address}</span>
 		</div>
+		<Send pkpWallet={$store.pkpWallet} />
 	{/if}
 	<WalletConnect />
 </div>
diff --git a/src/lib/components/examples/CheckValidation.svelte b/src/lib/components/examples/CheckValidation.svelte
new file mode 100644
index 0000000..554166e
--- /dev/null
+++ b/src/lib/components/examples/CheckValidation.svelte
@@ -0,0 +1,14 @@
+<!-- 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
index ad26853..24b50bc 100644
--- a/src/lib/components/examples/Form.svelte
+++ b/src/lib/components/examples/Form.svelte
@@ -1,10 +1,16 @@
 <script lang="ts">
-	import { superForm, message } from 'sveltekit-superforms/client';
+	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: '',
@@ -17,19 +23,42 @@
 
 	const fields = ['name', 'email', 'about', 'age', 'favoriteFood', 'slider', 'toggle'];
 
-	const { form, errors, validate, constraints, capture, restore } = superForm(initialFormData, {
+	const { form, errors, validate, constraints } = superForm(initialFormData, {
 		validators: UserSchema,
 		warnings: {
 			noValidationAndConstraints: false
 		},
 		validationMethod: 'oninput', // Trigger validation on input events
-		// Set the clearOnSubmit option to clear both errors and message on submit
 		clearOnSubmit: 'errors-and-message'
 	});
 
-	export const snapshot = { capture, restore };
 	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
+		);
+	}
+
+	$: {
+		if (
+			!$errors.name &&
+			!$errors.email &&
+			!$errors.about &&
+			!$errors.age &&
+			!$errors.favoriteFood
+		) {
+			services.validationRecipe.validateMe().send('VALIDATE');
+		} else {
+			services.validationRecipe.validateMe().send('INVALIDATE');
+		}
+	}
+
 	async function handleSubmit() {
 		// Manually validate the form
 		const validationResult = await validate();
@@ -61,103 +90,110 @@
 	});
 </script>
 
-<div class="flex items-center justify-center min-h-screen overflow-scroll">
-	{#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 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}
 						>
-					{/if}
+							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={$errors.name ||
-					$errors.email ||
-					$errors.about ||
-					$errors.age ||
-					$errors.favoriteFood}
-			>
-				Submit
-			</button>
-		</form>
-	{/if}
-</div>
+							{#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}
diff --git a/src/lib/components/examples/bugs.md b/src/lib/components/examples/bugs.md
deleted file mode 100644
index 3720ddc..0000000
--- a/src/lib/components/examples/bugs.md
+++ /dev/null
@@ -1,8 +0,0 @@
-/src/lib/components/examples/Form.svelte:98:7 'type' attribute cannot be dynamic if input uses two-way binding
-/src/lib/components/examples/Form.svelte:98:7
-96 |              <input
-  97 |                name={field}
-  98 |                type={field === 'age' ? 'number' : 'text'}
-                      ^
-  99 |                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"
- 100 |                bind:value={$form[field]}
diff --git a/src/lib/components/examples/feedback.md b/src/lib/components/examples/feedback.md
new file mode 100644
index 0000000..6b726cc
--- /dev/null
+++ b/src/lib/components/examples/feedback.md
@@ -0,0 +1 @@
+{"core":{},"composite.Interpreter2":{"id":"validation"},"helloEarthAlert":{}}
\ No newline at end of file
diff --git a/src/lib/services/validationRecipe.ts b/src/lib/services/validationRecipe.ts
new file mode 100644
index 0000000..3beb6c4
--- /dev/null
+++ b/src/lib/services/validationRecipe.ts
@@ -0,0 +1,27 @@
+import { createMachine, interpret } from 'xstate';
+
+const validationMachine = createMachine({
+    id: 'validation',
+    initial: 'notValidated',
+    states: {
+        notValidated: {
+            on: {
+                VALIDATE: 'validated'
+            }
+        },
+        validated: {
+            on: {
+                INVALIDATE: 'notValidated'
+            }
+        }
+    }
+});
+
+
+export function validateMe() {
+    const service = interpret(validationMachine).onTransition((state) => {
+        console.log('Current validation state:', state.value);
+    }).start();
+
+    return service;
+}
\ No newline at end of file
diff --git a/src/lib/types/UserSchema.ts b/src/lib/types/UserSchema.ts
index 86af77b..b0a212f 100644
--- a/src/lib/types/UserSchema.ts
+++ b/src/lib/types/UserSchema.ts
@@ -29,7 +29,7 @@ const validationMessages = {
 };
 
 export const UserSchema = z.object({
-    name: z.string().min(3, validationMessages.name.minLength).max(10, validationMessages.name.maxLength),
+    name: z.string().nonempty('Name is required.').min(3, validationMessages.name.minLength).max(10, validationMessages.name.maxLength),
     email: z.string().email(validationMessages.email.isEmail),
     about: z.string().max(500, validationMessages.about.maxLength),
     age: z.number().min(18, validationMessages.age.min).max(120, validationMessages.age.max),
diff --git a/src/routes/form/+page.svelte b/src/routes/form/+page.svelte
new file mode 100644
index 0000000..c244e07
--- /dev/null
+++ b/src/routes/form/+page.svelte
@@ -0,0 +1,39 @@
+<!-- src/routes/form/+page.svelte -->
+<script lang="ts">
+	import Composite from '$lib/core/Composite.svelte';
+
+	let composite = {
+		id: 'testform',
+		store: {
+			isValidated: false
+		},
+		layout: {
+			areas: `
+				"checkvalidation form"
+			`,
+			columns: '1fr 3fr',
+			rows: 'auto'
+		},
+		children: [
+			{
+				id: 'checkvalidation',
+				component: 'CheckValidation',
+				slot: 'checkvalidation',
+				map: {
+					isValidated: '@testform:isValidated'
+				}
+			},
+			{
+				id: 'form',
+				component: 'Form',
+				slot: 'form',
+				map: {
+					isValidated: '@testform:isValidated'
+				},
+				services: ['validationRecipe', 'helloEarthAlert']
+			}
+		]
+	};
+</script>
+
+<Composite {composite} />
diff --git a/src/routes/helloearth/+page.svelte b/src/routes/helloearth/+page.svelte
index b485ab0..eacbac0 100644
--- a/src/routes/helloearth/+page.svelte
+++ b/src/routes/helloearth/+page.svelte
@@ -6,7 +6,7 @@
 		store: {
 			title: 'Hello Earth',
 			description:
-				'Here you can find all the references, how to use the store and mapping logic of store to store and data to store maps',
+				'how to use the store and mapping logic of store to store and data to store maps',
 			helloMapMe: 'this is going to be mapped'
 		},
 		layout: {