Created basic Recipies UI flow mocks

src/lib/components/examples/Recipies.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import { Stepper, Step } from '@skeletonlabs/skeleton';
+	import { recipeStore } from '$lib/components/recipies/recipeStore';
+	import { createMessage } from '$lib/services/messages/messages';
+
+	let name = '';
+	let email = '';
+	let lockedState = true;
+
+	function logOperation(text) {
+		const message = {
+			text: text,
+			sender: 'user',
+			type: 'chat'
+		};
+		createMessage(message);
+	}
+
+	function operation1() {
+		if (name) {
+			recipeStore.update((state) => {
+				state.context.name = name;
+				state.step = 1;
+				return state;
+			});
+			logOperation('Name added: ' + name);
+		} else {
+			alert('Error: Please enter a name');
+		}
+	}
+
+	function operation2() {
+		if (email) {
+			recipeStore.update((state) => {
+				state.context.email = email;
+				state.step = 2;
+				return state;
+			});
+			logOperation('Email added: ' + email);
+		} else {
+			alert('Error: Please enter an email');
+		}
+	}
+
+	function completeAndPrepareForRestart() {
+		logOperation('Recipe Completed. Preparing for restart...');
+		recipeStore.update((state) => {
+			state.step = 3;
+			return state;
+		});
+	}
+
+	function restartRecipe() {
+		name = '';
+		email = '';
+		recipeStore.set({
+			id: 'createUser',
+			step: 0,
+			context: {},
+			error: null
+		});
+	}
+
+	$: lockedState = ($recipeStore.step === 0 && !name) || ($recipeStore.step === 1 && !email);
+
+	function onStepHandler(e) {
+		if (e.detail.state.current === 1) {
+			operation1();
+		} else if (e.detail.state.current === 2) {
+			operation2();
+		} else if (e.detail.state.current === 3) {
+			completeAndPrepareForRestart();
+		}
+	}
+</script>
+
+<div class="flex items-center justify-center w-full h-full">
+	<Stepper on:step={onStepHandler} start={$recipeStore.step} class="w-full max-w-2xl">
+		<Step locked={lockedState}>
+			<svelte:fragment slot="header">Enter Name</svelte:fragment>
+			<div>
+				<label for="name">Name:</label>
+				<input type="text" class="text-black" bind:value={name} />
+			</div>
+		</Step>
+		<Step locked={lockedState}>
+			<svelte:fragment slot="header">Enter Email</svelte:fragment>
+			<div>
+				<label for="email">Email:</label>
+				<input type="text" class="text-black" bind:value={email} />
+			</div>
+		</Step>
+		<Step>
+			<svelte:fragment slot="header">Completed</svelte:fragment>
+			<h2>Recipe Completed</h2>
+			<p>Your Name: {$recipeStore.context.name}</p>
+			<p>Your Email: {$recipeStore.context.email}</p>
+		</Step>
+		<Step>
+			<svelte:fragment slot="header">Restart</svelte:fragment>
+			<h2>Ready to start over?</h2>
+			<button on:click={restartRecipe}>Restart</button>
+		</Step>
+	</Stepper>
+</div>

src/lib/components/examples/TreeForm.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { superForm } from 'sveltekit-superforms/client';
+	import { TreeSchema } from '$lib/types/treeSchema'; // Import the TreeType schema
+	import { afterUpdate } from 'svelte';
+	import { writable } from 'svelte/store';
+
+	const initialFormData = { name: '', age: '' }; // Replace email with age
+
+	const { form, errors, validate, constraints, capture, restore } = superForm(initialFormData, {
+		validators: TreeSchema, // Use TreeSchema
+		warnings: {
+			noValidationAndConstraints: false
+		},
+		validationMethod: 'oninput',
+		clearOnSubmit: 'errors-and-message'
+	});
+
+	export const snapshot = { capture, restore };
+	const successMessage = writable<string | null>(null);
+
+	async function handleSubmit() {
+		const validationResult = await validate();
+		if (!validationResult.valid) {
+			return;
+		}
+		console.log(form);
+		successMessage.set('Form submitted successfully!');
+	}
+
+	function handleReset() {
+		form.set({});
+		successMessage.set(null);
+	}
+
+	afterUpdate(() => {
+		const messageContainer = document.getElementById('message-container');
+		if (messageContainer) {
+			messageContainer.scrollIntoView({ behavior: 'smooth' });
+		}
+	});
+</script>
+
+{#if $successMessage}
+	<!-- Success message code remains the same -->
+{:else}
+	<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
+		<!-- Name field remains the same -->
+
+		<div class="mb-4">
+			{#if $errors.age}
+				<span class="block mb-2 font-semibold text-red-500">{$errors.age}</span>
+			{:else}
+				<label for="age" class="block mb-2 font-semibold text-white">Age</label>
+			{/if}
+
+			<input
+				name="age"
+				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.age}
+				aria-invalid={$errors.age ? 'true' : undefined}
+				{...constraints.age}
+			/>
+		</div>
+
+		<!-- Submit button code remains the same -->
+	</form>
+{/if}

src/lib/components/examples/UserForm.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { superForm } from 'sveltekit-superforms/client';
+	import { UserSchema } from '$lib/types/UserSchema';
+	import currentStep from './Recipies.svelte';
+
+	const initialFormData = { name: '', email: '' };
+
+	const { form, errors, validate, constraints } = superForm(initialFormData, {
+		validators: UserSchema,
+		warnings: {
+			noValidationAndConstraints: false
+		},
+		validationMethod: 'oninput',
+		clearOnSubmit: 'errors-and-message'
+	});
+
+	async function handleSubmit() {
+		const validationResult = await validate();
+
+		if (validationResult.valid) {
+			console.log(form);
+			currentStep.update((val) => val + 1); // move to the next step
+		}
+	}
+</script>
+
+<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
+	<div class="mb-4">
+		{#if $errors.name}
+			<span class="block mb-2 font-semibold text-red-500">{$errors.name}</span>
+		{:else}
+			<label for="name" class="block mb-2 font-semibold text-white">Name</label>
+		{/if}
+
+		<input
+			name="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.name}
+			aria-invalid={$errors.name ? 'true' : undefined}
+			{...constraints.name}
+		/>
+	</div>
+
+	<div class="mb-4">
+		{#if $errors.email}
+			<span class="block mb-2 font-semibold text-red-500">{$errors.email}</span>
+		{:else}
+			<label for="email" class="block mb-2 font-semibold text-white">Email</label>
+		{/if}
+
+		<input
+			name="email"
+			type="email"
+			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.email}
+			aria-invalid={$errors.email ? 'true' : undefined}
+			{...constraints.email}
+		/>
+	</div>
+
+	<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}
+	>
+		Submit
+	</button>
+</form>

src/lib/components/recipies/recipeStore.ts

@@ -0,0 +1,8 @@
+import { writable } from 'svelte/store';
+
+export const recipeStore = writable({
+    id: 'createUser',
+    step: 0,
+    context: {},
+    error: null
+});

src/lib/components/recipies/userService.ts

@@ -0,0 +1,13 @@
+// userService.ts
+export function createUser(name: string, email: string): Promise<string> {
+    return new Promise((resolve, reject) => {
+        // Simulating an API call.
+        setTimeout(() => {
+            if (name && email) {
+                resolve('User created successfully');
+            } else {
+                reject(new Error('Failed to create user'));
+            }
+        }, 2000);
+    });
+}

src/lib/types/TreeSchema.ts

@@ -0,0 +1,18 @@
+import { z } from 'zod';
+
+// Define custom validation messages
+const validationMessages = {
+    name: {
+        minLength: 'Name must be at least 3 characters.',
+        maxLength: 'Name must contain at most 50 characters.',
+    },
+    age: {
+        min: 'Age must be at least 0 years.',
+        max: 'Age must be at most 5000 years.'
+    }
+};
+
+export const TreeSchema = z.object({
+    name: z.string().min(3, validationMessages.name.minLength).max(50, validationMessages.name.maxLength),
+    age: z.number().min(0, validationMessages.age.min).max(5000, validationMessages.age.max)
+});

src/routes/test/+page.svelte

@@ -3,7 +3,26 @@
 
 	let composite = {
 		id: 'test',
-		component: 'Flows'
+		layout: {
+			areas: `
+				"top bottom"
+			`,
+			columns: '1fr 500px',
+			rows: '1fr'
+		},
+		children: [
+			{
+				id: 'recipietest',
+				component: 'Recipies',
+				slot: 'top'
+			},
+			{
+				id: 'bottommessage',
+				component: 'Messages',
+				slot: 'bottom',
+				map: { messages: '@data:queryMessages' }
+			}
+		]
 	};
 </script>