Merge branch 'main' of https://github.com/appwrite/appwrite-console-poc into feat-platforms

2026-06-06 19:27:48 +00:00 · 2022-10-13 13:24:22 +02:00
parent 9140803402 d94ee785fd
commit 1f4846dc35
7 changed files with 143 additions and 43 deletions
@@ -9,8 +9,8 @@
            "version": "0.0.1",
            "dependencies": {
                "@aw-labs/appwrite-console": "^6.0.0",
-                "@aw-labs/icons": "0.0.0-58",
-                "@aw-labs/ui": "0.0.0-58",
+                "@aw-labs/icons": "0.0.0-61",
+                "@aw-labs/ui": "0.0.0-61",
                "echarts": "^5.4.0",
                "prismjs": "^1.29.0",
                "tippy.js": "^6.3.7",
@@ -79,16 +79,18 @@
            }
        },
        "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-58",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-58.tgz",
-            "integrity": "sha512-xUD5DQcYVNiKhDSpxMO24G/4l7txgAdwochK01tJA6wXhuPAcp5Yjuofjm2bGkMzCuze4Vs+SVvhsBxzVXRPrA=="
+            "version": "0.0.0-61",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-61.tgz",
+            "integrity": "sha512-kZdiDF+ywVvcoC8R+lZNnxwuxNeCmMNwyoqoFL+VANNeRL6pfABYDUwTRG4cZmY4n/oswe5FeILjl/HlSSf5/w=="
        },
        "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-58",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-58.tgz",
-            "integrity": "sha512-W3bTvAPX4ig5qLBvGn/VpNaDk62RqO4oDa0poube2WuElkVvaGwFAR0wCwmisdi2NeXyGJqt20g3Y/Mz4K2yMA==",
+            "version": "0.0.0-61",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-61.tgz",
+            "integrity": "sha512-v0+4CWP7x7cNo0sqZlZOeqp3RK45fS+LMg/lVEpyByaluMqXDIPe7p522vp0hgsN2YKtpilbxg0vlqLCIvEa8w==",
            "dependencies": {
-                "@aw-labs/icons": "*"
+                "@aw-labs/icons": "*",
+                "normalize.css": "^8.0.1",
+                "the-new-css-reset": "^1.7.3"
            }
        },
        "node_modules/@babel/code-frame": {
@@ -5888,6 +5890,11 @@
                "node": ">=0.10.0"
            }
        },
+        "node_modules/normalize.css": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+            "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+        },
        "node_modules/npm-run-path": {
            "version": "4.0.1",
            "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -7148,6 +7155,11 @@
            "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
            "dev": true
        },
+        "node_modules/the-new-css-reset": {
+            "version": "1.7.3",
+            "resolved": "https://registry.npmjs.org/the-new-css-reset/-/the-new-css-reset-1.7.3.tgz",
+            "integrity": "sha512-AiDZRlaS6ccC6CVHMEg+DQyZwfO0/KUvsz+vwmoOw9MlyNv/CaiOEhV1W3iw8ajQbWF0sXWYYhdKGMlCNyILPA=="
+        },
        "node_modules/tiny-glob": {
            "version": "0.2.9",
            "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
@@ -7776,16 +7788,18 @@
            }
        },
        "@aw-labs/icons": {
-            "version": "0.0.0-58",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-58.tgz",
-            "integrity": "sha512-xUD5DQcYVNiKhDSpxMO24G/4l7txgAdwochK01tJA6wXhuPAcp5Yjuofjm2bGkMzCuze4Vs+SVvhsBxzVXRPrA=="
+            "version": "0.0.0-61",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-61.tgz",
+            "integrity": "sha512-kZdiDF+ywVvcoC8R+lZNnxwuxNeCmMNwyoqoFL+VANNeRL6pfABYDUwTRG4cZmY4n/oswe5FeILjl/HlSSf5/w=="
        },
        "@aw-labs/ui": {
-            "version": "0.0.0-58",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-58.tgz",
-            "integrity": "sha512-W3bTvAPX4ig5qLBvGn/VpNaDk62RqO4oDa0poube2WuElkVvaGwFAR0wCwmisdi2NeXyGJqt20g3Y/Mz4K2yMA==",
+            "version": "0.0.0-61",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-61.tgz",
+            "integrity": "sha512-v0+4CWP7x7cNo0sqZlZOeqp3RK45fS+LMg/lVEpyByaluMqXDIPe7p522vp0hgsN2YKtpilbxg0vlqLCIvEa8w==",
            "requires": {
-                "@aw-labs/icons": "*"
+                "@aw-labs/icons": "*",
+                "normalize.css": "^8.0.1",
+                "the-new-css-reset": "^1.7.3"
            }
        },
        "@babel/code-frame": {
@@ -12161,6 +12175,11 @@
            "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
            "dev": true
        },
+        "normalize.css": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+            "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+        },
        "npm-run-path": {
            "version": "4.0.1",
            "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -13056,6 +13075,11 @@
            "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
            "dev": true
        },
+        "the-new-css-reset": {
+            "version": "1.7.3",
+            "resolved": "https://registry.npmjs.org/the-new-css-reset/-/the-new-css-reset-1.7.3.tgz",
+            "integrity": "sha512-AiDZRlaS6ccC6CVHMEg+DQyZwfO0/KUvsz+vwmoOw9MlyNv/CaiOEhV1W3iw8ajQbWF0sXWYYhdKGMlCNyILPA=="
+        },
        "tiny-glob": {
            "version": "0.2.9",
            "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
@@ -19,8 +19,8 @@
    },
    "dependencies": {
        "@aw-labs/appwrite-console": "^6.0.0",
-        "@aw-labs/icons": "0.0.0-58",
-        "@aw-labs/ui": "0.0.0-58",
+        "@aw-labs/icons": "0.0.0-61",
+        "@aw-labs/ui": "0.0.0-61",
        "echarts": "^5.4.0",
        "prismjs": "^1.29.0",
        "tippy.js": "^6.3.7",
@@ -4,35 +4,41 @@
    export let currentSub = 0;
    export let isSub = false;
    export let step: { text: string; substeps?: { text: string }[] };
+
+    //TODO: remove inline styling
 </script>

 <li
+    on:click|preventDefault
    class:steps-item={!isSub}
    class:steps-sub-item={isSub}
-    aria-label={` ${completed ? 'done' : current ? 'current' : ''} step`}>
+    style={`cursor: ${completed ? 'pointer' : 'default'};`}
+    aria-label={`${completed ? 'done' : current ? 'current' : ''} step`}>
    {#if isSub}
        <span class="text">{step.text}</span>
    {:else}
-        {#if completed}
-            <div class="bullet is-done">
-                <span class="icon-check" aria-hidden="true" />
-            </div>
-        {:else}
-            <div class="bullet" class:is-current={current} />
-        {/if}
-        <div class="step-item-content">
-            <span class="text">{step.text}</span>
-            {#if step?.substeps}
-                <ul class="steps-sub">
-                    {#each step.substeps as subStep, index}
-                        <svelte:self
-                            isSub={true}
-                            step={subStep}
-                            current={currentSub === index}
-                            completed={index < currentSub} />
-                    {/each}
-                </ul>
+        <div class="steps-item-wrapper">
+            {#if completed}
+                <div class="bullet is-done">
+                    <span class="icon-check" aria-hidden="true" />
+                </div>
+            {:else}
+                <div class="bullet" class:is-current={current} />
            {/if}
+            <div class="step-item-content">
+                <span class="text">{step.text}</span>
+                {#if step?.substeps}
+                    <ul class="steps-sub">
+                        {#each step.substeps as subStep, index}
+                            <svelte:self
+                                isSub={true}
+                                step={subStep}
+                                current={currentSub === index}
+                                completed={index < currentSub} />
+                        {/each}
+                    </ul>
+                {/if}
+            </div>
        </div>
    {/if}
 </li>
@@ -1,21 +1,33 @@
 <script lang="ts">
+    import { createEventDispatcher } from 'svelte';
    import Step from './step.svelte';

    export let steps: {
        text: string;
+        optional: boolean;
        substeps?: {
            text: string;
        }[];
    }[];
    export let currentStep = 1;
    export let currentSub = 1;
+
+    const dispatch = createEventDispatcher();
+
+    $: firstOptional = steps.findIndex((step) => step.optional);
 </script>

 <ol class="steps">
    {#if steps}
        {#each steps as step, index}
            {@const stepNumber = index + 1}
+            {#if firstOptional === index}
+                <li class="steps-item">
+                    <h3 class="eyebrow-heading-3">OPTIONAL</h3>
+                </li>
+            {/if}
            <Step
+                on:click={() => dispatch('step', stepNumber)}
                bind:currentSub
                current={currentStep === stepNumber}
                completed={stepNumber < currentStep}
@@ -4,6 +4,7 @@
        {
            label: string;
            component: typeof SvelteComponent;
+            optional?: boolean;
        }
    >;
 </script>
@@ -14,22 +15,40 @@
    import { addNotification } from '$lib/stores/notifications';
    import { wizard } from '$lib/stores/wizard';
    import { createEventDispatcher, type SvelteComponent } from 'svelte';
+    import WizardExitModal from './wizardExitModal.svelte';

    export let title: string;
    export let steps: WizardStepsType;
+    export let confirmExit = false;
    export let finalAction = 'Create';

    const dispatch = createEventDispatcher();

    let currentStep = 1;
+    let showExitModal = false;

    function handleKeydown(event: KeyboardEvent) {
-        if (event.key === 'Escape') {
+        if (event.key === 'Escape' && !showExitModal) {
            event.preventDefault();
            wizard.hide();
        }
    }

+    function handleExit() {
+        if (confirmExit) {
+            showExitModal = true;
+        } else {
+            wizard.hide();
+        }
+    }
+
+    function handleStepClick(e: CustomEvent<number>) {
+        const step = e.detail;
+        if (step < currentStep) {
+            currentStep = step;
+        }
+    }
+
    async function submit() {
        if ($wizard.interceptor) {
            try {
@@ -67,15 +86,17 @@
        <div class="body-text-1">{title}</div>

        <slot name="header" />
-        <button class="x-button" aria-label="close wizard" on:click={wizard.hide}>
+        <button class="x-button" aria-label="close wizard" on:click={handleExit}>
            <span class="icon-x" aria-hidden="true" />
        </button>
    </header>

    <aside class="wizard-side">
        <Steps
-            steps={sortedSteps.map(([, { label }]) => ({
-                text: label
+            on:step={handleStepClick}
+            steps={sortedSteps.map(([, { label, optional }]) => ({
+                text: label,
+                optional
            }))}
            {currentStep} />
    </aside>
@@ -91,6 +112,10 @@
            {/each}
            <div class="form-footer">
                <div class="u-flex u-main-end u-gap-12">
+                    {#if sortedSteps[currentStep - 1][1].optional}
+                        <Button text on:click={() => (isLastStep = true)} submit
+                            >Skip optional steps</Button>
+                    {/if}
                    {#if currentStep === 1}
                        <Button secondary on:click={wizard.hide}>Cancel</Button>
                        <Button submit>Next</Button>
@@ -106,3 +131,9 @@
        </Form>
    </div>
 </section>
+
+{#if showExitModal}
+    <WizardExitModal bind:show={showExitModal} on:exit={() => wizard.hide()}>
+        <slot name="exit">this process</slot>
+    </WizardExitModal>
+{/if}
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { createEventDispatcher } from 'svelte';
+
+    export let show = false;
+    const dispatch = createEventDispatcher();
+
+    function handleSubmit() {
+        dispatch('exit');
+    }
+</script>
+
+<Form noMargin on:submit={handleSubmit}>
+    <Modal bind:show warning>
+        <svelte:fragment slot="header">Exit Process</svelte:fragment>
+        <p>
+            Are you sure you want to exit from <slot />? All data will be deleted. This action is
+            irreversible.
+        </p>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (show = false)}>Cancel</Button>
+            <Button secondary submit>Exit</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
@@ -72,7 +72,8 @@
    });
    stepsComponents.set(2, {
        label: 'Set permissions',
-        component: Step2
+        component: Step2,
+        optional: true
    });
 </script>