samuelandert.eth/auth.andert.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added Basic xstate store management POC

Browse Source
This commit is contained in:
Samuel Andert 2023-08-01 11:58:34 +02:00
parent 3d2960390a
commit 125d7d997e
10 changed files with 224 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/Balance.svelte
View File

@ -1,4 +1,4 @@
<script> <script lang="ts">
import { fetchBalance } from '@wagmi/core'; import { fetchBalance } from '@wagmi/core';
import { onMount } from 'svelte'; import { onMount } from 'svelte';

2
src/lib/components/Wallet/Wallet.svelte
View File

@ -2,6 +2,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { connectWallet } from '$lib/services/wallet/wallet'; import { connectWallet } from '$lib/services/wallet/wallet';
import WalletConnect from '$lib/WalletConnect.svelte'; import WalletConnect from '$lib/WalletConnect.svelte';
import Send from '$lib/Send.svelte';
// export let id; // export let id;
export let store; export let store;
@ -21,6 +22,7 @@
<div class="mb-4 text-lg font-medium"> <div class="mb-4 text-lg font-medium">
PKP Wallet: <span class="text-blue-600">{$store.pkpWallet.address}</span> PKP Wallet: <span class="text-blue-600">{$store.pkpWallet.address}</span>
</div> </div>
<Send pkpWallet={$store.pkpWallet} />
{/if} {/if}
<WalletConnect /> <WalletConnect />
</div> </div>

14
src/lib/components/examples/CheckValidation.svelte Normal file
View File

@ -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>

240
src/lib/components/examples/Form.svelte
View File

@ -1,10 +1,16 @@
<script lang="ts"> <script lang="ts">
import { superForm, message } from 'sveltekit-superforms/client'; import { superForm } from 'sveltekit-superforms/client';
import { UserSchema } from '$lib/types/UserSchema'; import { UserSchema } from '$lib/types/UserSchema';
import { afterUpdate } from 'svelte'; import { afterUpdate } from 'svelte';
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import { RangeSlider, SlideToggle } from '@skeletonlabs/skeleton'; import { RangeSlider, SlideToggle } from '@skeletonlabs/skeleton';
export let store;
export let services;
let isStoreLoaded = false;
$: if ($store) isStoreLoaded = true;
const initialFormData = { const initialFormData = {
name: '', name: '',
email: '', email: '',
@ -17,19 +23,42 @@
const fields = ['name', 'email', 'about', 'age', 'favoriteFood', 'slider', 'toggle']; 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, validators: UserSchema,
warnings: { warnings: {
noValidationAndConstraints: false noValidationAndConstraints: false
}, },
validationMethod: 'oninput', // Trigger validation on input events validationMethod: 'oninput', // Trigger validation on input events
// Set the clearOnSubmit option to clear both errors and message on submit
clearOnSubmit: 'errors-and-message' clearOnSubmit: 'errors-and-message'
}); });
export const snapshot = { capture, restore };
const successMessage = writable<string | null>(null); 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() { async function handleSubmit() {
// Manually validate the form // Manually validate the form
const validationResult = await validate(); const validationResult = await validate();
@ -61,103 +90,110 @@
}); });
</script> </script>
<div class="flex items-center justify-center min-h-screen overflow-scroll"> {#if isStoreLoaded}
{#if $successMessage} <div class="flex items-center justify-center min-h-screen overflow-scroll">
<!-- Display the success message instead of the form --> <div class="w-full">
<aside class="w-full max-w-md p-4 alert variant-ghost" id="message-container"> STORE: {JSON.stringify($store)}
<!-- Icon --> {#if $successMessage}
<!-- <div>(icon)</div> --> <!-- Display the success message instead of the form -->
<!-- Message --> <aside class="w-full max-w-md p-4 alert variant-ghost" id="message-container">
<div class="alert-message"> <!-- Icon -->
<h3 class="h3">Success</h3> <!-- <div>(icon)</div> -->
<p>{$successMessage}</p> <!-- Message -->
</div> <div class="alert-message">
<!-- Actions (in this case, only the Reset button) --> <h3 class="h3">Success</h3>
<div class="alert-actions"> <p>{$successMessage}</p>
<button </div>
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" <!-- Actions (in this case, only the Reset button) -->
on:click={handleReset} <div class="alert-actions">
> <button
Reset 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"
</button> on:click={handleReset}
</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} 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'} {#if field === 'about'}
<textarea <textarea
name={field} 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" 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]} bind:value={$form[field]}
aria-invalid={$errors[field] ? 'true' : undefined} aria-invalid={$errors[field] ? 'true' : undefined}
{...constraints[field]} {...constraints[field]}
/> />
{:else if field === 'favoriteFood'} {:else if field === 'favoriteFood'}
<select <select
name={field} 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" 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]} bind:value={$form[field]}
aria-invalid={$errors[field] ? 'true' : undefined} aria-invalid={$errors[field] ? 'true' : undefined}
{...constraints[field]} {...constraints[field]}
> >
<option value="">Select...</option> <option value="">Select...</option>
<option value="apple">Apple</option> <option value="apple">Apple</option>
<option value="banana">Banana</option> <option value="banana">Banana</option>
<option value="coconut">Coconut</option> <option value="coconut">Coconut</option>
<option value="strawberry">Strawberry</option> <option value="strawberry">Strawberry</option>
<option value="mango">Mango</option> <option value="mango">Mango</option>
</select> </select>
{:else if field === 'age'} {:else if field === 'age'}
<input <input
name={field} name={field}
type="number" 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" 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]} bind:value={$form[field]}
aria-invalid={$errors[field] ? 'true' : undefined} aria-invalid={$errors[field] ? 'true' : undefined}
{...constraints[field]} {...constraints[field]}
/> />
{:else if field === 'slider'} {:else if field === 'slider'}
<RangeSlider name={field} bind:value={$form[field]} min={0} max={100} step={1} ticked> <RangeSlider
<div class="flex items-center justify-between"> name={field}
<div class="text-xs">{$form[field]} / 100</div> bind:value={$form[field]}
</div> min={0}
</RangeSlider> max={100}
{:else if field === 'toggle'} step={1}
<SlideToggle name={field} bind:checked={$form[field]} /> ticked
{:else} >
<input <div class="flex items-center justify-between">
name={field} <div class="text-xs">{$form[field]} / 100</div>
type="text" </div>
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" </RangeSlider>
bind:value={$form[field]} {:else if field === 'toggle'}
aria-invalid={$errors[field] ? 'true' : undefined} <SlideToggle name={field} bind:checked={$form[field]} />
{...constraints[field]} {:else}
/> <input
{/if} name={field}
</div> type="text"
{/each} 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]}
<button aria-invalid={$errors[field] ? 'true' : undefined}
type="submit" {...constraints[field]}
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 || {/if}
$errors.email || </div>
$errors.about || {/each}
$errors.age || <button
$errors.favoriteFood} 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"
Submit disabled={!$store.isValidated}
</button> >
</form> Submit
{/if} </button>
</div> </form>
{/if}
</div>
</div>
{/if}

8
src/lib/components/examples/bugs.md
View File

@ -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]}

1
src/lib/components/examples/feedback.md Normal file
View File

@ -0,0 +1 @@
{"core":{},"composite.Interpreter2":{"id":"validation"},"helloEarthAlert":{}}

27
src/lib/services/validationRecipe.ts Normal file
View File

@ -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;
}

2
src/lib/types/UserSchema.ts
View File

@ -29,7 +29,7 @@ const validationMessages = {
}; };
export const UserSchema = z.object({ 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), email: z.string().email(validationMessages.email.isEmail),
about: z.string().max(500, validationMessages.about.maxLength), about: z.string().max(500, validationMessages.about.maxLength),
age: z.number().min(18, validationMessages.age.min).max(120, validationMessages.age.max), age: z.number().min(18, validationMessages.age.min).max(120, validationMessages.age.max),

39
src/routes/form/+page.svelte Normal file
View File

@ -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} />

2
src/routes/helloearth/+page.svelte
View File

@ -6,7 +6,7 @@
store: { store: {
title: 'Hello Earth', title: 'Hello Earth',
description: 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' helloMapMe: 'this is going to be mapped'
}, },
layout: { layout: {