Merge branch 'feat-pink-v2' into feat-new-onboarding-flow

# Conflicts: # package.json # pnpm-lock.yaml
appwrite · Nov 15, 2024 · 4ed5860 · 4ed5860
2 parents 192352b + 1b46830
commit 4ed5860
Show file tree

Hide file tree

Showing 43 changed files with 1,881 additions and 162 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
         "@appwrite.io/pink": "0.25.0",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "1.0.0-next.7",
-        "@appwrite.io/pink-svelte": "1.0.0-next.83",
+        "@appwrite.io/pink-svelte": "1.0.0-next.85",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.33.1",
         "@stripe/stripe-js": "^3.5.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/components/card.svelte b/src/lib/components/card.svelte
@@ -33,18 +33,19 @@
     export let style = '';
     export let padding: $$Props['padding'] = 'm';
     export let radius: $$Props['radius'] = 'm';
+    export let variant: $$Props['variant'] = 'primary';
 
     $: resolvedClasses = [!isTile && 'common-section', classes].filter(Boolean).join(' ');
 </script>
 
 {#if href}
-    <Card.Link class={resolvedClasses} on:click {href} {style} {padding} {radius}>
+    <Card.Link class={resolvedClasses} {href} {style} {padding} {radius} {variant} on:click>
         <Layout.Stack gap="xl">
             <slot />
         </Layout.Stack>
     </Card.Link>
 {:else if isButton}
-    <Card.Button class={resolvedClasses} {style} {padding} {radius} on:click>
+    <Card.Button class={resolvedClasses} {style} {padding} {radius} {variant} on:click>
         <Layout.Stack gap="xl">
             <slot />
         </Layout.Stack>
@@ -55,7 +56,8 @@
         {style}
         border={isDashed ? 'dashed' : 'solid'}
         {padding}
-        {radius}>
+        {radius}
+        {variant}>
         <Layout.Stack gap="xl">
             <slot />
         </Layout.Stack>

diff --git a/src/lib/components/emptyFilter.svelte b/src/lib/components/emptyFilter.svelte
@@ -1,26 +1,28 @@
 <script lang="ts">
+    import { Card, Empty, Layout } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
-    import { EmptySearch } from '.';
     import { queries } from './filters';
 
     export let resource: string;
 </script>
 
-<EmptySearch hidePages>
-    <div class="common-section">
-        <div class="u-text-center common-section">
-            <b class="body-text-2 u-bold">Sorry, we couldn't find any {resource}.</b>
-            <p>There are no {resource} that match your filters.</p>
-        </div>
-        <div class="u-flex common-section u-main-center">
-            <Button
-                secondary
-                on:click={() => {
-                    queries.clearAll();
-                    queries.apply();
-                }}>
-                Clear filters
-            </Button>
-        </div>
-    </div>
-</EmptySearch>
+<Card.Base padding="none">
+    <Empty
+        title={`Sorry, we couldn't find any ${resource}`}
+        description={`There are no ${resource} that match your filters.`}
+        type="secondary">
+        <svelte:fragment slot="actions">
+            <Layout.Stack direction="row" justifyContent="center">
+                <Button
+                    secondary
+                    on:click={() => {
+                        queries.clearAll();
+                        queries.apply();
+                    }}>
+                    Clear filters
+                </Button>
+                <slot />
+            </Layout.Stack>
+        </svelte:fragment>
+    </Empty>
+</Card.Base>
diff --git a/src/lib/components/emptySearch.svelte b/src/lib/components/emptySearch.svelte
@@ -9,7 +9,7 @@
 
 <Card.Base padding="none">
     <Empty
-        title={`Sorry, we couldn't find ‘${search}’`}
+        title={`Sorry, we couldn't find ${search ? `‘${search}’` : `any ${target}`}`}
         description={`There are no ${target} that match your search.`}
         type="secondary">
         <svelte:fragment slot="actions">

diff --git a/src/lib/components/filters/filters.svelte b/src/lib/components/filters/filters.svelte
@@ -158,13 +158,13 @@
                     {/if}
                     <div class="u-flex u-gap-8">
                         {#if singleCondition}
-                            <Button text on:click={toggleDropdown}>Cancel</Button>
+                            <Button size="s" text on:click={toggleDropdown}>Cancel</Button>
                         {:else}
-                            <Button disabled={applied === 0} text on:click={clearAll}>
+                            <Button size="s" disabled={applied === 0} text on:click={clearAll}>
                                 Clear all
                             </Button>
                         {/if}
-                        <Button on:click={apply} disabled={isButtonDisabled}>Apply</Button>
+                        <Button size="s" on:click={apply} disabled={isButtonDisabled}>Apply</Button>
                     </div>
                 </div>
             </div>
@@ -174,7 +174,7 @@
 
 <div class="is-only-mobile">
     <slot name="mobile" {disabled} toggle={toggleMobileModal}>
-        <Button secondary on:click={toggleMobileModal} {fullWidthMobile}>
+        <Button size="s" secondary on:click={toggleMobileModal} {fullWidthMobile}>
             <i class="icon-filter u-opacity-50" />
             Filters
             {#if applied > 0}
@@ -185,11 +185,8 @@
         </Button>
     </slot>
 
-    <Modal
-        title="Filters"
-        description="Apply filter rules to refine the table view"
-        bind:show={showFiltersMobile}
-        size="big">
+    <Modal title="Filters" bind:show={showFiltersMobile} size="big">
+        <span slot="description"> Apply filter rules to refine the table view </span>
         {#if displayQuickFilters}
             <slot name="quick" />
         {:else}
@@ -219,11 +216,12 @@
                 {/if}
                 <div class="u-flex u-gap-8">
                     {#if singleCondition}
-                        <Button text on:click={() => (showFiltersMobile = false)}>Cancel</Button>
+                        <Button size="s" text on:click={() => (showFiltersMobile = false)}
+                            >Cancel</Button>
                     {:else}
-                        <Button text on:click={clearAll}>Clear all</Button>
+                        <Button size="s" text on:click={clearAll}>Clear all</Button>
                     {/if}
-                    <Button on:click={apply} disabled={isButtonDisabled}>Apply</Button>
+                    <Button size="s" on:click={apply} disabled={isButtonDisabled}>Apply</Button>
                 </div>
             </div>
         </svelte:fragment>

diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
-    import { Alert, ModalWrapper } from '$lib/components';
-    import { trackEvent } from '$lib/actions/analytics';
+    import { Alert } from '$lib/components';
     import { Form } from '$lib/elements/forms';
     import { disableCommands } from '$lib/commandCenter';
     import { beforeNavigate } from '$app/navigation';
-    import { Modal } from '@appwrite.io/pink-svelte';
+    import { Layout, Modal } from '@appwrite.io/pink-svelte';
 
     export let show = false;
-    export let size: 'small' | 'big' | 'huge' = null;
     export let icon: string = null;
     export let state: 'success' | 'warning' | 'error' | 'info' = null;
     export let error: string = null;
@@ -18,7 +16,6 @@
         return;
     };
     export let title = '';
-    export let description = '';
 
     let alert: HTMLElement;
 
@@ -33,7 +30,10 @@
     }
 </script>
 
-<Modal {title} bind:open={show} description="test">
+<Modal {title} bind:open={show}>
+    <svelte:fragment slot="description">
+        <slot name="description" />
+    </svelte:fragment>
     <Form isModal {onSubmit}>
         {#if error}
             <div bind:this={alert}>
@@ -50,6 +50,8 @@
         <slot />
     </Form>
     <svelte:fragment slot="footer">
-        <slot name="footer" />
+        <Layout.Stack direction="row" justifyContent="flex-end">
+            <slot name="footer" />
+        </Layout.Stack>
     </svelte:fragment>
 </Modal>
diff --git a/src/lib/components/permissions/custom.svelte b/src/lib/components/permissions/custom.svelte
@@ -25,13 +25,11 @@
     $: disabled = !value || $groups.has(value);
 </script>
 
-<Modal
-    title="Custom permission"
-    description="Custom permissions allow you to grant access to specific users or teams using their ID and
-role."
-    bind:show
-    on:close={reset}
-    onSubmit={create}>
+<Modal title="Custom permission" bind:show on:close={reset} onSubmit={create}>
+    <span slot="description">
+        Custom permissions allow you to grant access to specific users or teams using their ID and
+        role.
+    </span>
     <FormList>
         <FormItem>
             <InputText

diff --git a/src/lib/components/permissions/label.svelte b/src/lib/components/permissions/label.svelte
@@ -32,12 +32,10 @@
     $: disabled = !value || $groups.has(value);
 </script>
 
-<Modal
-    title="Label"
-    description="Labels allow you to grant access to users with the specified label."
-    bind:show
-    on:close={reset}
-    onSubmit={create}>
+<Modal title="Label" bind:show on:close={reset} onSubmit={create}>
+    <span slot="description">
+        Labels allow you to grant access to users with the specified label.
+    </span>
     <FormList>
         <FormItem>
             <InputText id="label" label="Label" placeholder="Enter label" bind:value />

diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte
@@ -78,6 +78,7 @@
         {#if $columns?.length}
             <DropList bind:show={showSelectColumns} scrollable wrapperFullWidth={fullWidthMobile}>
                 <Button
+                    size="s"
                     secondary
                     on:click={() => (showSelectColumns = !showSelectColumns)}
                     {fullWidthMobile}>

diff --git a/src/lib/elements/forms/button.svelte b/src/lib/elements/forms/button.svelte
@@ -14,7 +14,7 @@
     export let danger = false;
     export let icon = false;
     export let link = false;
-    export let size: Props['size'] = 'medium';
+    export let size: Props['size'] = 'm';
     export let disabled = false;
     export let external = false;
     export let href: string = null;

diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
@@ -50,6 +50,7 @@
     {maxlength}
     {label}
     {nullable}
+    {readonly}
     autofocus={autofocus || undefined}
     autocomplete={autocomplete ? 'on' : 'off'}
     helper={error}

diff --git a/src/routes/(console)/project-[project]/databases/create.svelte b/src/routes/(console)/project-[project]/databases/create.svelte
@@ -60,7 +60,7 @@
             cronExpression(policy);
 
             return sdk.forProject.backups.createPolicy(
-                policy.id,
+                ID.unique(),
                 ['databases'],
                 policy.retained,
                 policy.schedule,

diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Alert, Modal, PaginationWithLimit } from '$lib/components';
+    import { Modal, PaginationWithLimit } from '$lib/components';
     import { Container } from '$lib/layout';
     import ContainerHeader from './containerHeader.svelte';
     import BackupPolicy from './policy.svelte';
@@ -244,10 +244,6 @@
     onSubmit={createPolicies}
     bind:show={$showCreatePolicy}
     bind:error={policyCreateError}>
-    <Alert type="info">
-        Backups do not currently support backing up relationships between data
-    </Alert>
-
     <CreatePolicy bind:totalPolicies isShowing={$showCreatePolicy} isFromBackupsTab />
 
     <svelte:fragment slot="footer">
@@ -262,9 +258,7 @@
         changes or rollback safeguards.
         <b>Depending on the size of your data, this may take a while.</b>
     </p>
-    <Alert type="info"
-        >Backups do not currently support backing up relationships between data.
-    </Alert>
+
     <svelte:fragment slot="footer">
         <Button text on:click={() => ($showCreateBackup = false)}>Cancel</Button>
         <Button submit>Create</Button>

diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/delete.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/delete.svelte
@@ -48,8 +48,11 @@
             Are you sure you want to delete <b>{$database.name}</b>?
         </p>
 
-        <p class="text" data-private>
-            <b>Once deleted, this database cannot be restored. This action is irreversible.</b>
+        <p class="text">
+            <b>
+                Once deleted, this database and its backups cannot be restored. This action is
+                irreversible.
+            </b>
         </p>
 
         <div class="input-check-box-friction">

diff --git a/src/routes/(console)/project-[project]/databases/table.svelte b/src/routes/(console)/project-[project]/databases/table.svelte
@@ -173,10 +173,11 @@
             {selected.length > 1 ? 'databases' : 'database'}?
         </p>
 
-        <p class="text" data-private>
-            <b
-                >Once deleted, {selected.length > 1 ? 'these databases' : 'this database'} cannot be
-                restored. This action is irreversible.</b>
+        <p class="text">
+            <b>
+                Once deleted, {selected.length > 1 ? 'these databases' : 'this database'} and its backups
+                cannot be restored. This action is irreversible.
+            </b>
         </p>
 
         <div class="input-check-box-friction">