Cleaning Up files
This commit is contained in:
Samuel Andert
parent
cbf059acca
commit
2ca67e0981
@ -1,6 +1,5 @@
|
||||
// src/lib/components/Recipies/machines/authMachine.ts
|
||||
import { createMachine } from 'xstate';
|
||||
import { formMachine } from './formMachine';
|
||||
|
||||
export const recipeMachine = createMachine(
|
||||
{
|
||||
|
||||
@ -1,52 +0,0 @@
|
||||
<script>
|
||||
export let services;
|
||||
export let store;
|
||||
|
||||
let isStoreLoaded = false;
|
||||
|
||||
$: if (services && services.helloEarthAlert) {
|
||||
// services.helloEarthAlert.alertMe();
|
||||
}
|
||||
$: if (services.core) {
|
||||
// services.core.testAlert();
|
||||
}
|
||||
|
||||
$: if ($store) isStoreLoaded = true;
|
||||
</script>
|
||||
|
||||
{#if isStoreLoaded}
|
||||
<div class="container p-12">
|
||||
<h1 class="h1">
|
||||
{#if $store.title}{$store.title}{/if}
|
||||
</h1>
|
||||
<h2 class="py-6 h2">
|
||||
{#if $store.description}{$store.description}{/if}
|
||||
</h2>
|
||||
<h3 class="mt-4 h3">Wallet Address</h3>
|
||||
{#if $store.pkpWallet}
|
||||
<p>{$store.pkpWallet.address}</p>
|
||||
{/if}
|
||||
|
||||
<h4 class="mt-4 h4">store: hello (init default)</h4>
|
||||
{#if $store.hello}{$store.hello}{/if}
|
||||
<h4 class="mt-4 h4">map: hello2 : "@hello:helloMapMe"</h4>
|
||||
{#if $store.hello2}{$store.hello2}{/if}
|
||||
|
||||
<h4 class="mt-4 h4">map: "todos": "@data:queryTodos"</h4>
|
||||
{#if $store.todos}
|
||||
<dl class="list-dl">
|
||||
{#each $store.todos as todo}
|
||||
<div>
|
||||
<span class="flex-auto">
|
||||
<dd>{todo.text}</dd>
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
</dl>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="container">
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
{/if}
|
||||
@ -1,69 +0,0 @@
|
||||
<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>
|
||||
@ -1,50 +0,0 @@
|
||||
<!-- src/lib/components/machines/SignIn.svelte -->
|
||||
<script lang="ts">
|
||||
import { useMachine } from '@xstate/svelte';
|
||||
import { SignInMachine } from './signInMachine';
|
||||
import { superForm } from 'sveltekit-superforms/client';
|
||||
import { HelloUserSchema } from '$lib/types/HelloUserSchema';
|
||||
|
||||
const { state, send } = useMachine(SignInMachine);
|
||||
|
||||
const initialFormData = {
|
||||
email: '',
|
||||
name: ''
|
||||
};
|
||||
|
||||
const { form, errors, validate, constraints } = superForm(initialFormData, {
|
||||
validators: HelloUserSchema,
|
||||
warnings: {
|
||||
noValidationAndConstraints: false
|
||||
},
|
||||
validationMethod: 'oninput',
|
||||
clearOnSubmit: 'errors-and-message'
|
||||
});
|
||||
|
||||
async function handleNext(field) {
|
||||
const validationResult = await validate(field);
|
||||
if (validationResult.valid) {
|
||||
send({ type: 'NEXT', value: form[field] });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if $state.matches('notSignedIn')}
|
||||
<button on:click={() => send('START')}>Start Sign In</button>
|
||||
{:else if $state.matches('email')}
|
||||
<div>
|
||||
<label for="email">Email:</label>
|
||||
<input id="email" type="email" bind:value={form.email} {...constraints.email} />
|
||||
{#if errors.email}<span>{$errors.email}</span>{/if}
|
||||
<button on:click={() => handleNext('email')}>Next</button>
|
||||
</div>
|
||||
{:else if $state.matches('name')}
|
||||
<div>
|
||||
<label for="name">Name:</label>
|
||||
<input id="name" type="text" bind:value={form.name} {...constraints.name} />
|
||||
{#if errors.name}<span>{$errors.name}</span>{/if}
|
||||
<button on:click={() => handleNext('name')}>Next</button>
|
||||
</div>
|
||||
{:else if $state.matches('signedIn')}
|
||||
<!-- <Composite id="account" component="Account" /> -->account signed in
|
||||
{/if}
|
||||
@ -1,35 +0,0 @@
|
||||
// src/lib/components/machines/SignInMachine.ts
|
||||
import { createMachine, assign } from 'xstate';
|
||||
|
||||
export const SignInMachine = createMachine({
|
||||
id: 'signIn',
|
||||
initial: 'notSignedIn',
|
||||
context: {
|
||||
email: '',
|
||||
name: ''
|
||||
},
|
||||
states: {
|
||||
notSignedIn: {
|
||||
on: { START: 'email' }
|
||||
},
|
||||
email: {
|
||||
on: {
|
||||
NEXT: {
|
||||
target: 'name',
|
||||
actions: assign({ email: (_, event) => event.value })
|
||||
}
|
||||
}
|
||||
},
|
||||
name: {
|
||||
on: {
|
||||
NEXT: {
|
||||
target: 'signedIn',
|
||||
actions: assign({ name: (_, event) => event.value })
|
||||
}
|
||||
}
|
||||
},
|
||||
signedIn: {
|
||||
type: 'final'
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -70,6 +70,7 @@
|
||||
</script>
|
||||
|
||||
<div class="w-full p-6 border-2 border-red-500">
|
||||
My ID is: {$me.id} <br />
|
||||
My state is: {$me.state}
|
||||
{#if $successMessage}
|
||||
<aside class="w-full max-w-md p-4 alert variant-ghost" id="message-container">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
export let me;
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col h-screen border-2 border-green-500">
|
||||
<div class="flex flex-col w-full h-full border-2 border-green-500">
|
||||
<section class="p-8 h-96">
|
||||
<p>My ID is: {$me.id}</p>
|
||||
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { onDestroy } from 'svelte';
|
||||
import Composer from './Composer.svelte';
|
||||
import FallBack from './FallBack.svelte';
|
||||
import components from '$lib/core/componentLoader';
|
||||
import { createComposerStore, getComposerStore } from './composerStores';
|
||||
import { coreServices } from './coreServices';
|
||||
@ -116,8 +115,8 @@
|
||||
return `
|
||||
grid-template-areas: ${layout.areas};
|
||||
${layout.gap ? `gap: ${layout.gap};` : ''}
|
||||
${layout.columns ? `grid-template-columns: ${layout.columns};` : ''}
|
||||
${layout.rows ? `grid-template-rows: ${layout.rows};` : ''}
|
||||
${layout.columns ? `grid-template-columns: ${layout.columns};` : '1fr'}
|
||||
${layout.rows ? `grid-template-rows: ${layout.rows};` : '1fr'}
|
||||
`;
|
||||
}
|
||||
|
||||
@ -130,7 +129,6 @@
|
||||
const module = await components[componentName]();
|
||||
return module.default;
|
||||
}
|
||||
return FallBack;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
<script>
|
||||
export let id;
|
||||
console.log(`FallBack component rendered with id ${id}`);
|
||||
</script>
|
||||
@ -5,30 +5,17 @@
|
||||
|
||||
let composer = {
|
||||
id: 'ComposerParent',
|
||||
machine: {
|
||||
initial: 'NOTREADY',
|
||||
states: {
|
||||
NOTREADY: {
|
||||
on: { TOGGLE: 'READY' }
|
||||
},
|
||||
READY: {
|
||||
on: { TOGGLE: 'NOTREADY' }
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
columns: '1fr 1fr',
|
||||
rows: 'auto 1fr',
|
||||
areas: `
|
||||
"topleft topright"
|
||||
"mainleft mainright"
|
||||
"left right"
|
||||
`
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: 'ComposerCharly',
|
||||
component: 'ComposerCharly',
|
||||
slot: 'mainright',
|
||||
id: 'ComposerQueries',
|
||||
component: 'ComposerQueries',
|
||||
slot: 'right',
|
||||
data: {
|
||||
map: {
|
||||
todos: queryTodos,
|
||||
@ -55,49 +42,10 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'ComposerBob',
|
||||
component: 'ComposerBob',
|
||||
slot: 'topleft',
|
||||
machine: {
|
||||
initial: 'READY',
|
||||
states: {
|
||||
NOTREADY: {
|
||||
on: { TOGGLE: 'READY' }
|
||||
},
|
||||
READY: {
|
||||
on: { TOGGLE: 'NOTREADY' }
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'ComposerAlice',
|
||||
component: 'ComposerAlice',
|
||||
slot: 'topright',
|
||||
machine: {
|
||||
initial: 'RED',
|
||||
states: {
|
||||
GREEN: {
|
||||
on: { SWITCH: 'YELLOW' }
|
||||
},
|
||||
YELLOW: {
|
||||
on: { SWITCH: 'RED' }
|
||||
},
|
||||
RED: {
|
||||
on: { SWITCH: 'GREEN' }
|
||||
}
|
||||
},
|
||||
on: {
|
||||
READY: 'GREEN',
|
||||
NOTREADY: 'RED'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'ComposerForm',
|
||||
component: 'ComposerForm',
|
||||
slot: 'mainleft',
|
||||
slot: 'left',
|
||||
machine: {
|
||||
id: 'validation',
|
||||
initial: 'notValidated',
|
||||
|
||||
44
src/routes/composer/graphql/+page.svelte
Normal file
44
src/routes/composer/graphql/+page.svelte
Normal file
@ -0,0 +1,44 @@
|
||||
<script lang="ts">
|
||||
import Composer from '$lib/core/refactor/Composer.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import type { PageData } from '../../test/$houdini';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
let composer;
|
||||
|
||||
$: ({ queryTest } = data);
|
||||
|
||||
onMount(async () => {
|
||||
composer = await {
|
||||
id: 'ComposerGraph',
|
||||
component: 'ComposerGraph',
|
||||
data: {
|
||||
gql: {
|
||||
test: $queryTest.data
|
||||
}
|
||||
},
|
||||
machine: {
|
||||
initial: 'LOADING',
|
||||
states: {
|
||||
LOADING: {
|
||||
on: {
|
||||
TOGGLE: {
|
||||
target: 'READY'
|
||||
}
|
||||
}
|
||||
},
|
||||
READY: {
|
||||
on: {
|
||||
TOGGLE: {
|
||||
target: 'LOADING'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<Composer {composer} />
|
||||
57
src/routes/composer/stateToState/+page.svelte
Normal file
57
src/routes/composer/stateToState/+page.svelte
Normal file
@ -0,0 +1,57 @@
|
||||
<script lang="ts">
|
||||
import Composer from '$lib/core/refactor/Composer.svelte';
|
||||
|
||||
let composer = {
|
||||
id: 'ComposerParent',
|
||||
layout: {
|
||||
rows: '1fr 1fr',
|
||||
areas: `
|
||||
"top"
|
||||
"bottom"
|
||||
`
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: 'ComposerBob',
|
||||
component: 'ComposerBob',
|
||||
slot: 'top',
|
||||
machine: {
|
||||
initial: 'READY',
|
||||
states: {
|
||||
NOTREADY: {
|
||||
on: { TOGGLE: 'READY' }
|
||||
},
|
||||
READY: {
|
||||
on: { TOGGLE: 'NOTREADY' }
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'ComposerAlice',
|
||||
component: 'ComposerAlice',
|
||||
slot: 'bottom',
|
||||
machine: {
|
||||
initial: 'RED',
|
||||
states: {
|
||||
GREEN: {
|
||||
on: { SWITCH: 'YELLOW' }
|
||||
},
|
||||
YELLOW: {
|
||||
on: { SWITCH: 'RED' }
|
||||
},
|
||||
RED: {
|
||||
on: { SWITCH: 'GREEN' }
|
||||
}
|
||||
},
|
||||
on: {
|
||||
READY: 'GREEN',
|
||||
NOTREADY: 'RED'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
|
||||
<Composer {composer} />
|
||||
@ -1,60 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Composer from '$lib/core/refactor/Composer.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import type { PageData } from '../test/$houdini';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
let composer;
|
||||
|
||||
$: ({ queryTest } = data);
|
||||
|
||||
onMount(async () => {
|
||||
composer = await {
|
||||
id: 'ComposerParent',
|
||||
machine: {
|
||||
initial: 'NOTREADY',
|
||||
states: {
|
||||
NOTREADY: {
|
||||
on: { TOGGLE: 'READY' }
|
||||
},
|
||||
READY: {
|
||||
on: { TOGGLE: 'NOTREADY' }
|
||||
}
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: 'ComposerGraph',
|
||||
component: 'ComposerGraph',
|
||||
data: {
|
||||
gql: {
|
||||
test: $queryTest.data
|
||||
}
|
||||
},
|
||||
machine: {
|
||||
initial: 'LOADING',
|
||||
states: {
|
||||
LOADING: {
|
||||
on: {
|
||||
TOGGLE: {
|
||||
target: 'READY'
|
||||
}
|
||||
}
|
||||
},
|
||||
READY: {
|
||||
on: {
|
||||
TOGGLE: {
|
||||
target: 'LOADING'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<Composer {composer} />
|
||||
Loading…
Reference in New Issue
Block a user