From e1fd73a7e82bf33b39cf31e7ace19f2e3dd5b878 Mon Sep 17 00:00:00 2001 From: Samuel Andert Date: Fri, 28 Jul 2023 15:41:05 +0200 Subject: [PATCH] Created basic Recipies UI flow mocks --- src/lib/components/examples/Recipies.svelte | 105 ++++++++++++++++++++ src/lib/components/examples/TreeForm.svelte | 68 +++++++++++++ src/lib/components/examples/UserForm.svelte | 69 +++++++++++++ src/lib/components/recipies/recipeStore.ts | 8 ++ src/lib/components/recipies/userService.ts | 13 +++ src/lib/types/TreeSchema.ts | 18 ++++ src/routes/test/+page.svelte | 21 +++- 7 files changed, 301 insertions(+), 1 deletion(-) create mode 100644 src/lib/components/examples/Recipies.svelte create mode 100644 src/lib/components/examples/TreeForm.svelte create mode 100644 src/lib/components/examples/UserForm.svelte create mode 100644 src/lib/components/recipies/recipeStore.ts create mode 100644 src/lib/components/recipies/userService.ts create mode 100644 src/lib/types/TreeSchema.ts diff --git a/src/lib/components/examples/Recipies.svelte b/src/lib/components/examples/Recipies.svelte new file mode 100644 index 0000000..9efb393 --- /dev/null +++ b/src/lib/components/examples/Recipies.svelte @@ -0,0 +1,105 @@ + + +
+ + + Enter Name +
+ + +
+
+ + Enter Email +
+ + +
+
+ + Completed +

Recipe Completed

+

Your Name: {$recipeStore.context.name}

+

Your Email: {$recipeStore.context.email}

+
+ + Restart +

Ready to start over?

+ +
+
+
diff --git a/src/lib/components/examples/TreeForm.svelte b/src/lib/components/examples/TreeForm.svelte new file mode 100644 index 0000000..877841b --- /dev/null +++ b/src/lib/components/examples/TreeForm.svelte @@ -0,0 +1,68 @@ + + +{#if $successMessage} + +{:else} +
+ + +
+ {#if $errors.age} + {$errors.age} + {:else} + + {/if} + + +
+ + +
+{/if} diff --git a/src/lib/components/examples/UserForm.svelte b/src/lib/components/examples/UserForm.svelte new file mode 100644 index 0000000..caf9b8e --- /dev/null +++ b/src/lib/components/examples/UserForm.svelte @@ -0,0 +1,69 @@ + + +
+
+ {#if $errors.name} + {$errors.name} + {:else} + + {/if} + + +
+ +
+ {#if $errors.email} + {$errors.email} + {:else} + + {/if} + + +
+ + +
diff --git a/src/lib/components/recipies/recipeStore.ts b/src/lib/components/recipies/recipeStore.ts new file mode 100644 index 0000000..5c0c7bd --- /dev/null +++ b/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 +}); diff --git a/src/lib/components/recipies/userService.ts b/src/lib/components/recipies/userService.ts new file mode 100644 index 0000000..0d7b493 --- /dev/null +++ b/src/lib/components/recipies/userService.ts @@ -0,0 +1,13 @@ +// userService.ts +export function createUser(name: string, email: string): Promise { + 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); + }); +} diff --git a/src/lib/types/TreeSchema.ts b/src/lib/types/TreeSchema.ts new file mode 100644 index 0000000..c88cae6 --- /dev/null +++ b/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) +}); diff --git a/src/routes/test/+page.svelte b/src/routes/test/+page.svelte index f2de5cb..aa2dcbf 100644 --- a/src/routes/test/+page.svelte +++ b/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' } + } + ] };