feat: onboarding

package.json

@@ -20,8 +20,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^10.0.0",
-        "@aw-labs/icons": "0.0.0-72",
-        "@aw-labs/ui": "0.0.0-72",
+        "@aw-labs/icons": "0.0.0-73",
+        "@aw-labs/ui": "0.0.0-73",
         "@popperjs/core": "^2.11.6",
         "echarts": "^5.4.0",
         "pretty-bytes": "^6.0.0",

src/lib/components/card.svelte

@@ -1,8 +1,30 @@
 <script lang="ts">
+    import { clickOnEnter } from '$lib/helpers/a11y';
+
     export let isTile = false;
     export let isDashed = false;
+    export let isButton = false;
+    export let href: string = null;
+
+    function getElement(): string {
+        switch (true) {
+            case !!href:
+                return 'a';
+            case isButton:
+                return 'button';
+            default:
+                return 'article';
+        }
+    }
 </script>
 
-<article class="card" class:is-border-dashed={isDashed} class:common-section={!isTile}>
+<svelte:element
+    this={getElement()}
+    class="card"
+    class:common-section={!isTile}
+    class:is-border-dashed={isDashed}
+    on:click
+    on:keyup={clickOnEnter}
+    {href}>
     <slot />
-</article>
+</svelte:element>

src/lib/layout/shell.svelte

@@ -3,6 +3,7 @@
     import { browser } from '$app/environment';
     import { wizard } from '$lib/stores/wizard';
     import { log } from '$lib/stores/logs';
+    import { beforeNavigate } from '$app/navigation';
 
     export let isOpen = false;
     export let showSideNavigation = false;
@@ -24,6 +25,16 @@
             }
         }
     };
+
+    beforeNavigate((n) => {
+        /**
+         * Hide wizard when navigation is triggered by popstate.
+         */
+        if (n.type === 'popstate' && $wizard.show) {
+            wizard.hide();
+            n.cancel();
+        }
+    });
 </script>
 
 <svelte:window bind:scrollY={y} />

src/lib/layout/wizard.svelte

@@ -103,7 +103,9 @@
             {currentStep} />
     </aside>
     <div class="wizard-media">
-        <slot name="media" />
+        {#if $wizard.media}
+            <img src={$wizard.media} alt="wizard media" loading="lazy" />
+        {/if}
     </div>
     <div class="wizard-main">
         <Form noStyle on:submit={submit}>
@@ -115,11 +117,12 @@
             <div class="form-footer">
                 <div class="u-flex u-main-end u-gap-12">
                     {#if !isLastStep && sortedSteps[currentStep - 1][1].optional}
-                        <Button text on:click={() => dispatch('finish')}
-                            >Skip optional steps</Button>
+                        <Button text on:click={() => dispatch('finish')}>
+                            Skip optional steps
+                        </Button>
                     {/if}
                     {#if currentStep === 1}
-                        <Button secondary on:click={wizard.hide}>Cancel</Button>
+                        <Button secondary on:click={handleExit}>Cancel</Button>
                         <Button submit>Next</Button>
                     {:else if isLastStep}
                         <Button secondary on:click={() => currentStep--}>Back</Button>

src/lib/stores/wizard.ts

@@ -3,23 +3,27 @@ import { writable } from 'svelte/store';
 
 export type WizardStore = {
     show: boolean;
+    media?: string;
     component?: typeof SvelteComponent;
     interceptor?: () => Promise<void>;
 };
 
 function createWizardStore() {
-    const { subscribe, update } = writable<WizardStore>({
+    const { subscribe, update, set } = writable<WizardStore>({
         show: false,
         component: null,
-        interceptor: null
+        interceptor: null,
+        media: null
     });
 
     return {
         subscribe,
-        start: (component: typeof SvelteComponent) =>
+        set,
+        start: (component: typeof SvelteComponent, media: string = null) =>
             update((n) => {
                 n.show = true;
                 n.component = component;
+                n.media = media;
 
                 return n;
             }),
@@ -34,6 +38,7 @@ function createWizardStore() {
             update((n) => {
                 n.show = false;
                 n.component = null;
+                n.media = null;
 
                 return n;
             })