Merge branch 'main' of github.com:appwrite/console into feat-custom-i…

…d-pattern

CONTRIBUTING.md

@@ -33,12 +33,17 @@ If you are worried or don’t know where to start, check out our next section ex
 
 ## Development
 
-Once you've created a project and installed dependencies with `npm install`, start a development server:
+Once you've created a project and installed dependencies with `npm install`, create a `.env` file using `.env.example` as a template.
+
+Finally, start a development server:
 
 ```bash
 npm run dev
 ```
 
+> **Note**
+> If http://localhost:3000 is blank and the browser console logs have a `TypeError: Failed to fetch dynamically imported module: http://localhost:3000/.svelte-kit/generated/nodes/0.js` error, try to turn off any ad blocker you have and reload the page ([reference](https://github.com/sveltejs/kit/issues/3308#issuecomment-1149942109)).
+
 ### Build
 
 ```bash

package.json

@@ -20,47 +20,47 @@
     },
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
-        "analytics": "^0.8.1",
+        "@appwrite.io/pink": "^0.0.3",
         "@aw-labs/appwrite-console": "^13.1.0",
-        "@aw-labs/icons": "0.0.0-82",
-        "@aw-labs/ui": "0.0.0-82",
         "@popperjs/core": "^2.11.6",
-        "@sentry/svelte": "^7.19.0",
-        "@sentry/tracing": "^7.19.0",
-        "echarts": "^5.4.0",
-        "pretty-bytes": "^6.0.0",
+        "@sentry/svelte": "^7.36.0",
+        "@sentry/tracing": "^7.36.0",
+        "analytics": "^0.8.1",
+        "echarts": "^5.4.1",
+        "pretty-bytes": "^6.1.0",
         "prismjs": "^1.29.0",
         "tippy.js": "^6.3.7",
-        "web-vitals": "^3.0.3"
+        "web-vitals": "^3.1.1"
     },
     "devDependencies": {
-        "@playwright/test": "^1.27.1",
-        "@sveltejs/adapter-static": "1.0.0-next.46",
-        "@sveltejs/kit": "1.0.0-next.525",
-        "@sveltejs/vite-plugin-svelte": "^1.1.0",
-        "@testing-library/dom": "^8.19.0",
+        "@playwright/test": "^1.30.0",
+        "@sveltejs/adapter-static": "1.0.6",
+        "@sveltejs/kit": "1.3.10",
+        "@sveltejs/vite-plugin-svelte": "^2.0.2",
+        "@testing-library/dom": "^8.20.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/svelte": "^3.2.2",
         "@testing-library/user-event": "^14.4.3",
         "@types/prismjs": "^1.26.0",
-        "@typescript-eslint/eslint-plugin": "^5.41.0",
-        "@typescript-eslint/parser": "^5.41.0",
-        "@vitest/ui": "^0.24.3",
-        "eslint": "^8.26.0",
-        "eslint-config-prettier": "^8.5.0",
+        "@typescript-eslint/eslint-plugin": "^5.50.0",
+        "@typescript-eslint/parser": "^5.50.0",
+        "@vitest/ui": "^0.28.4",
+        "eslint": "^8.33.0",
+        "eslint-config-prettier": "^8.6.0",
         "eslint-plugin-svelte3": "^4.0.0",
+        "jsdom": "^21.1.0",
         "pre-commit": "^1.2.2",
-        "prettier": "^2.7.1",
-        "prettier-plugin-svelte": "^2.8.0",
-        "sass": "^1.55.0",
-        "svelte": "^3.52.0",
-        "svelte-check": "^2.9.2",
+        "prettier": "^2.8.3",
+        "prettier-plugin-svelte": "^2.9.0",
+        "sass": "^1.58.0",
+        "svelte": "^3.55.1",
+        "svelte-check": "^3.0.3",
         "svelte-jester": "^2.3.2",
-        "svelte-preprocess": "^4.10.7",
-        "tslib": "^2.4.0",
-        "typescript": "^4.8.4",
-        "vite": "^3.2.1",
-        "vitest": "^0.24.3"
+        "svelte-preprocess": "^5.0.1",
+        "tslib": "^2.5.0",
+        "typescript": "^4.9.5",
+        "vite": "^4.1.1",
+        "vitest": "^0.28.4"
     },
     "type": "module",
     "pre-commit": [

src/app.html

@@ -4,6 +4,44 @@
         <meta charset="utf-8" />
         <meta name="description" content="" />
         <link rel="icon" href="/favicon.png" />
+        <link
+            rel="preload"
+            href="/fonts/inter/inter-v8-latin-600.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="/fonts/inter/inter-v8-latin-regular.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="/fonts/poppins/poppins-v19-latin-500.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="/fonts/poppins/poppins-v19-latin-600.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="/fonts/poppins/poppins-v19-latin-700.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link
+            rel="preload"
+            href="/fonts/source-code-pro/source-code-pro-v20-latin-regular.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin />
+        <link rel="preload" as="style" type="text/css" href="/fonts/main.css" />
+        <link rel="stylesheet" href="/fonts/main.css" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         %sveltekit.head%
     </head>

src/lib/actions/analytics.ts

@@ -18,7 +18,7 @@ export function trackEvent(name: string, data: object = null): void {
     if (!isTrackingAllowed()) {
         return;
     }
-    const path = get(page).routeId;
+    const path = get(page).route.id;
     analytics.track(name, { ...data, path });
     sendEventToGrowth(name, path, data);
 }

src/lib/components/alert.svelte

@@ -19,7 +19,8 @@
         {#if dismissible}
             <button
                 type="button"
-                class="x-button"
+                class="button is-text is-only-icon"
+                style="--button-size:1.5rem;"
                 aria-label="close alert box"
                 on:click={() => dispatch('dismiss')}>
                 <span class="icon-x" aria-hidden="true" />
@@ -31,15 +32,15 @@
             class:icon-exclamation={type === 'warning'}
             class:icon-exclamation-circle={type === 'error'}
             aria-hidden="true" />
-        <div class="content">
+        <div class="alert-content">
             {#if $$slots.title}
-                <h6 class="title">
+                <h6 class="alert-title">
                     <slot name="title" />
                 </h6>
             {/if}
-            <p class="message"><slot /></p>
+            <p class="alert-message"><slot /></p>
             {#if buttons?.length}
-                <div class="buttons u-flex">
+                <div class="alert-buttons u-flex">
                     {#each buttons as button}
                         <button class="button is-text" on:click={button.method}>
                             <span class="text">{button.name}</span>

src/lib/components/card.svelte

@@ -7,6 +7,9 @@
     export let danger = false;
     export let href: string = null;
 
+    //allows to add the href attribute without throwing an error
+    let attributes = { href } as Record<string, string>;
+
     function getElement(): string {
         switch (true) {
             case !!href:
@@ -27,6 +30,6 @@
     class:is-danger={danger}
     on:click
     on:keyup={clickOnEnter}
-    {href}>
+    {...attributes}>
     <slot />
 </svelte:element>

src/lib/components/collapsibleItem.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     export let withIndentation = false;
+    export let open = false;
 </script>
 
 <li class="collapsible-item">
-    <details class="collapsible-wrapper">
+    <details class="collapsible-wrapper" {open}>
         <summary class="collapsible-button">
             <slot name="beforetitle" />
             <div>

src/lib/components/dropListLink.svelte

@@ -4,10 +4,13 @@
     export let href: string;
     export let icon: string = null;
     export let disabled = false;
+
+    //allows to add the disabled attribute to <a> tag without throwing an error
+    let attributes = { disabled } as Record<string, boolean>;
 </script>
 
 <li class="drop-list-item" on:click on:keyup={clickOnEnter}>
-    <a {href} class="drop-button" {disabled}>
+    <a {href} class="drop-button" {...attributes}>
         <span class="text"><slot /></span>
         {#if icon}
             <span class={`icon-${icon}`} aria-hidden="true" />

src/lib/components/eventModal.svelte

@@ -179,6 +179,9 @@
         inputData = null;
         showInput = false;
     }
+
+    //allows to add the href attribute without throwing an error
+    const attributes = { type: 'text', readonly: 'readonly' } as Record<string, string>;
 </script>
 
 <Modal bind:show on:submit={create} size="big">
@@ -279,13 +282,13 @@
         </div>
     {:else}
         <div class="input-text-wrapper" style="--amount-of-buttons:2">
-            <div type="text" readonly style="min-height: 2.5rem;">
+            <div {...attributes} style="min-height: 2.5rem;">
                 {#if inputData}
                     <span>{inputData}</span>
                 {:else}
                     {#each Array.from(eventString.values()) as route, i}
                         <button
-                            class:u-opacity-0-5={helper !== route.description}
+                            class:u-opacity-50={helper !== route.description}
                             on:mouseenter={() => {
                                 helper = route.description;
                             }}
@@ -294,7 +297,7 @@
                             }}>
                             {route.value}
                         </button>
-                        <span class="u-opacity-0-5">
+                        <span class="u-opacity-50">
                             {i + 1 < eventString?.size ? '.' : ''}
                         </span>
                     {/each}

src/lib/components/feedbackGeneral.svelte

@@ -34,7 +34,8 @@
         <h4 class="body-text-1">How can we improve?</h4>
         <button
             type="button"
-            class="x-button u-margin-inline-start-auto"
+            class="button is-text is-only-icon u-margin-inline-start-auto"
+            style="--button-size:1.5rem;"
             aria-label="Close Modal"
             title="Close Modal"
             on:click={() => (show = false)}>

src/lib/components/feedbackNPS.svelte

@@ -37,7 +37,8 @@
         <h4 class="body-text-1">How are we doing?</h4>
         <button
             type="button"
-            class="x-button u-margin-inline-start-auto"
+            class="button is-text is-only-icon u-margin-inline-start-auto"
+            style="--button-size:1.5rem;"
             aria-label="Close Modal"
             title="Close Modal"
             on:click={() => (show = false)}>

src/lib/components/innerModal.svelte

@@ -14,7 +14,8 @@
                     </h4>
                     <button
                         type="button"
-                        class="x-button"
+                        class="button is-text is-only-icon"
+                        style="--button-size:1.5rem;"
                         aria-label="Close"
                         title="Close"
                         on:click={() => (show = false)}>

src/lib/components/modal.svelte

@@ -91,7 +91,8 @@
                 {#if closable}
                     <button
                         type="button"
-                        class="x-button"
+                        class="button is-text is-only-icon"
+                        style="--button-size:1.5rem;"
                         aria-label="Close Modal"
                         title="Close Modal"
                         on:click={() =>

src/lib/components/searchQuery.svelte

@@ -46,7 +46,7 @@
 
             url.search = value;
 
-            goto(url, { keepfocus: true });
+            goto(url, { keepFocus: true });
         }, debounce);
     };
 </script>
@@ -63,7 +63,11 @@
                 bind:value={search} />
             <span class="icon-search" aria-hidden="true" />
             {#if isWithEndButton && search}
-                <button class="x-button" aria-label="Clear search" on:click={() => (search = '')}>
+                <button
+                    class="button is-text is-only-icon"
+                    style="--button-size:1.5rem;"
+                    aria-label="Clear search"
+                    on:click={() => (search = '')}>
                     <span class="icon-x" aria-hidden="true" />
                 </button>
             {/if}

src/lib/components/uploadBox.svelte

@@ -20,15 +20,15 @@
                 <span class="amount">{$uploader.files.length}</span>
             </h4>
             <button
-                class="icon-button"
+                class="upload-box-button"
                 class:is-open={!$uploader.isCollapsed}
                 aria-label="toggle upload box"
                 on:click={() => uploader.toggle()}>
                 <span class="icon-cheveron-up" aria-hidden="true" />
             </button>
             <button
                 on:click={() => uploader.reset()}
-                class="icon-button"
+                class="upload-box-button"
                 aria-label="close upload box">
                 <span class="icon-x" aria-hidden="true" />
             </button>
@@ -52,7 +52,7 @@
                             <label for={file.name} class="file-name u-trim">{file.name}</label>
 
                             <button
-                                class="icon-button"
+                                class="upload-box-button"
                                 aria-label="Failed"
                                 on:mouseenter={() => (hovering = true)}
                                 on:mouseleave={() => (hovering = false)}
@@ -74,7 +74,7 @@
                             <label for={file.name} class="file-name u-trim">{file.name}</label>
                             <Pill danger>Failed</Pill>
                             <button
-                                class="icon-button"
+                                class="upload-box-button"
                                 aria-label="Failed"
                                 on:click|preventDefault={() => uploader.removeFromQueue(file.$id)}>
                                 <span class="icon-x" />

src/lib/elements/forms/button.svelte

@@ -14,6 +14,9 @@
     export let noMargin = false;
     export let event: string = null;
 
+    //allows to add the disabled attribute to <a> tag without throwing an error
+    let attributes = { disabled } as Record<string, boolean>;
+
     function track() {
         if (!event) {
             return;
@@ -28,7 +31,7 @@
 {#if href}
     <a
         on:click={track}
-        {disabled}
+        {...attributes}
         {href}
         target={external ? '_blank' : ''}
         rel={external ? 'noopener noreferrer' : ''}

src/lib/elements/forms/helper.svelte

@@ -4,10 +4,10 @@
 
 <p
     class="helper u-margin-block-start-12"
-    class:u-info={type === 'info'}
-    class:u-error={type === 'error'}
-    class:u-success={type === 'success'}
-    class:u-warning={type === 'warning'}>
+    class:u-color-text-info={type === 'info'}
+    class:u-color-text-danger={type === 'error'}
+    class:u-color-text-success={type === 'success'}
+    class:u-color-text-warning={type === 'warning'}>
     {#if type}
         <span
             class:icon-info={type === 'info' || type === 'neutral'}

src/lib/elements/forms/index.ts

@@ -21,4 +21,5 @@ export { default as InputPhone } from './inputPhone.svelte';
 export { default as InputCron } from './inputCron.svelte';
 export { default as InputURL } from './inputURL.svelte';
 export { default as InputId } from './inputId.svelte';
+export { default as InputSecret } from './inputSecret.svelte';
 export { default as Helper } from './helper.svelte';