Merge pull request #82 from appwrite/feat-onboarding

feat: onboarding

src/lib/components/card.svelte

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

src/lib/components/dropList.svelte

@@ -11,55 +11,29 @@
     type Placement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
     let element: HTMLDivElement;
     let tooltip: HTMLDivElement;
+    let arrow: HTMLDivElement;
     let instance: Instance;
-    let currentArrow: Placement;
-
-    $: [arrowHorizontal, arrowPosition] = applyArrow(currentArrow);
-
-    function applyArrow(value: Placement): [string: 'start' | 'end', string: 'top' | 'bottom'] {
-        switch (value) {
-            case 'bottom-start':
-                return ['start', 'bottom'];
-            case 'bottom-end':
-                return ['end', 'bottom'];
-            case 'top-start':
-                return ['start', 'top'];
-            case 'top-end':
-                return ['end', 'top'];
-            default:
-                return ['start', 'bottom'];
-        }
-    }
 
     onMount(() => {
         instance = createPopper(element, tooltip, {
             placement,
-            onFirstUpdate(state) {
-                if (currentArrow !== state.placement) {
-                    currentArrow = state.placement as Placement;
-                }
-            },
             modifiers: [
                 {
-                    name: 'offset',
+                    name: 'arrow',
                     options: {
-                        offset: [0, noArrow ? 0 : 12]
+                        element: arrow
                     }
                 },
                 {
-                    name: 'flip',
+                    name: 'offset',
                     options: {
-                        fallbackPlacements: ['top-start', 'top-end', 'bottom-start', 'bottom-end']
+                        offset: [0, noArrow ? 0 : 6]
                     }
                 },
                 {
-                    name: 'placementLogger',
-                    enabled: true,
-                    phase: 'main',
-                    fn({ state }) {
-                        if (currentArrow !== state.placement) {
-                            currentArrow = state.placement as Placement;
-                        }
+                    name: 'flip',
+                    options: {
+                        fallbackPlacements: ['top-start', 'top-end', 'bottom-start', 'bottom-end']
                     }
                 }
             ]
@@ -87,16 +61,10 @@
     <slot />
 </div>
 
-<div bind:this={tooltip} style="z-index: 10">
+<div class="drop-tooltip" bind:this={tooltip} style="z-index: 10">
+    <div class="drop-arrow" class:u-hide={!show} bind:this={arrow} />
     {#if show}
-        <div
-            class="drop"
-            style="position: revert"
-            class:is-no-arrow={noArrow}
-            class:is-arrow-start={arrowHorizontal === 'start'}
-            class:is-arrow-end={arrowHorizontal === 'end'}
-            class:is-block-start={arrowPosition === 'top'}
-            class:is-block-end={arrowPosition === 'bottom'}>
+        <div class="drop is-no-arrow" style="position: revert">
             <section
                 class:u-overflow-y-auto={scrollable}
                 class:u-max-height-200={scrollable}
@@ -109,3 +77,38 @@
         </div>
     {/if}
 </div>
+
+<style global lang="scss">
+    .drop-tooltip[data-popper-placement^='top'] > .drop-arrow {
+        bottom: -4px;
+    }
+
+    .drop-tooltip[data-popper-placement^='bottom'] > .drop-arrow {
+        top: -4px;
+    }
+
+    .drop-tooltip[data-popper-placement^='left'] > .drop-arrow {
+        right: -4px;
+    }
+
+    .drop-tooltip[data-popper-placement^='right'] > .drop-arrow {
+        left: -4px;
+    }
+    .drop-arrow,
+    .drop-arrow::before {
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        z-index: -1;
+    }
+
+    .drop-arrow::before {
+        content: '';
+        transform: rotate(45deg);
+        background: hsl(var(--color-neutral-200));
+
+        body.theme-light & {
+            background: hsl(var(--color-neutral-10));
+        }
+    }
+</style>

src/lib/layout/progress.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { afterNavigate, beforeNavigate } from '$app/navigation';
+    import { navigating } from '$app/stores';
 
     let width: number;
     let updater: ReturnType<typeof setTimeout>;
@@ -53,14 +53,15 @@
         return 0;
     }
 
-    beforeNavigate(start);
-    afterNavigate(complete);
+    $: if ($navigating) {
+        start();
+    } else {
+        complete();
+    }
 
     $: barStyle = (width && width * 100 && `width: ${width * 100}%;`) || '';
 </script>
 
-<svelte:head />
-
 {#if width}
     <div class="progress-bar" class:progress-bar-hiding={completed} style={barStyle} />
 {/if}

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/usage.svelte

@@ -60,13 +60,15 @@
             <Heading tag="h6" size="6">{last(count).value}</Heading>
             <p>{countMetadata.title}</p>
             <div class="u-margin-block-start-16" />
-            <BarChart
-                series={[
-                    {
-                        name: countMetadata.legend,
-                        data: [...count.map((e) => [e.date, e.value])]
-                    }
-                ]} />
+            <div style="height: 12rem;">
+                <BarChart
+                    series={[
+                        {
+                            name: countMetadata.legend,
+                            data: [...count.map((e) => [e.date, e.value])]
+                        }
+                    ]} />
+            </div>
         {/if}
     </Card>
     <Tiles>

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