Merge branch 'v2' into feat-skeleton-loader

# Conflicts: # v2/pink-sb/src/lib/Skeleton.svelte
appwrite · Nov 14, 2024 · 3bfbf0b · 3bfbf0b
2 parents deb2ce6 + d0e74bb
commit 3bfbf0b
Show file tree

Hide file tree

Showing 9 changed files with 196 additions and 55 deletions.
diff --git a/v2/pink-sb/package.json b/v2/pink-sb/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@appwrite.io/pink-svelte",
-    "version": "1.0.0-next.79",
+    "version": "1.0.0-next.83",
     "scripts": {
         "dev": "storybook dev -p 6006",
         "dev:package": "svelte-kit sync && svelte-package --watch",

diff --git a/v2/pink-sb/src/lib/Dialog.svelte b/v2/pink-sb/src/lib/Dialog.svelte
@@ -6,7 +6,7 @@
     import Icon from './Icon.svelte';
 
     export let title: string;
-    export let description: string;
+    export let description: string = '';
     export let open = false;
 
     let dialog: HTMLDialogElement;
@@ -45,13 +45,19 @@
                         <Icon icon={IconX} />
                     </Button>
                 </Stack>
-                <p>{description}</p>
+                {#if description}
+                    <p>{description}</p>
+                {/if}
             </header>
             <footer>
-                <Stack direction="row" gap="s" justifyContent="flex-end">
-                    <Button variant="text" on:click={() => (open = false)}>Cancel</Button>
-                    <Button>Save</Button>
-                </Stack>
+                <slot name="footer">
+                    <Stack direction="row" gap="s" justifyContent="flex-end">
+                        <Button variant="text" size="s" on:click={() => (open = false)}>
+                            Cancel
+                        </Button>
+                        <Button on:click size="s">Save</Button>
+                    </Stack>
+                </slot>
             </footer>
         {/if}
     </section>
@@ -73,6 +79,7 @@
             border-radius: var(--border-radius-l);
             border: var(--border-width-s) solid var(--color-border-neutral);
             background: var(--color-bgcolor-neutral-primary);
+            color: var(--color-fgcolor-neutral-primary);
 
             /* box-shadow/neutral/XL */
             box-shadow:

diff --git a/v2/pink-sb/src/lib/Modal.svelte b/v2/pink-sb/src/lib/Modal.svelte
@@ -0,0 +1,125 @@
+<script lang="ts">
+    import Title from '$lib/typography/Title.svelte';
+    import Button from '$lib/button/Button.svelte';
+    import Stack from '$lib/layout/Stack.svelte';
+    import { IconX } from '@appwrite.io/pink-icons-svelte';
+    import Icon from './Icon.svelte';
+
+    export let title: string;
+    export let description = '';
+    export let open = false;
+
+    let dialog: HTMLDialogElement;
+
+    function handleBLur(event: MouseEvent) {
+        if (event.target === dialog) {
+            dialog.close();
+        }
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            dialog.close();
+        }
+    }
+
+    $: if (dialog) {
+        if (open) {
+            dialog.showModal();
+        } else {
+            dialog.close();
+        }
+    }
+</script>
+
+<svelte:window on:mousedown={handleBLur} on:keydown={handleKeydown} />
+
+<dialog bind:this={dialog} on:close={() => (open = false)}>
+    <section>
+        {#if open}
+            <header>
+                <Stack gap="xl" justifyContent="space-between" direction="row" alignItems="center">
+                    <Title size="s">{title}</Title>
+                    <Button icon variant="ghost" size="s" on:click={() => (open = false)}>
+                        <Icon icon={IconX} />
+                    </Button>
+                </Stack>
+                {#if description}
+                    <p>{description}</p>
+                {/if}
+            </header>
+            <div class="content">
+                <Stack gap="xl">
+                    <slot />
+                </Stack>
+            </div>
+            <footer>
+                <slot name="footer">
+                    <Stack direction="row" gap="s" justifyContent="flex-end">
+                        <Button variant="text" size="s" on:click={() => (open = false)}>
+                            Cancel
+                        </Button>
+                        <Button on:click size="s">Save</Button>
+                    </Stack>
+                </slot>
+            </footer>
+        {/if}
+    </section>
+</dialog>
+
+<style lang="scss">
+    dialog {
+        padding: 0;
+        border: none;
+        background: none;
+        overflow: visible;
+        section {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            width: 600px;
+            border-radius: var(--border-radius-l);
+            border: var(--border-width-s) solid var(--color-border-neutral);
+            background: var(--color-bgcolor-neutral-primary);
+            color: var(--color-fgcolor-neutral-primary);
+
+            /* box-shadow/neutral/XL */
+            box-shadow:
+                0px 56px 32px 0px rgba(0, 0, 0, 0.02),
+                0px 6px 14px 0px rgba(0, 0, 0, 0.04),
+                0px 24px 25px 0px rgba(0, 0, 0, 0.03);
+
+            header,
+            footer {
+                display: flex;
+                width: 100%;
+                padding: var(--space-8);
+                flex-direction: column;
+                align-items: flex-start;
+                gap: var(--gap-xxs);
+                border-top: var(--border-width-s) solid var(--color-border-neutral);
+            }
+            header {
+                border-bottom: var(--border-width-s) solid var(--color-border-neutral);
+                background: var(--color-bgcolor-neutral-primary);
+
+                p {
+                    color: var(--color-fgcolor-neutral-secondary);
+                    font-family: var(--font-family-sansserif);
+                    font-size: var(--font-size-s);
+                    font-style: normal;
+                    font-weight: 400;
+                    line-height: 140%; /* 19.6px */
+                    letter-spacing: -0.063px;
+                }
+            }
+            .content {
+                width: 100%;
+                padding: var(--space-8);
+            }
+        }
+    }
+</style>
diff --git a/v2/pink-sb/src/lib/index.ts b/v2/pink-sb/src/lib/index.ts
@@ -15,7 +15,6 @@ export { default as Layout } from './layout/index.js';
 export { default as Input } from './input/index.js';
 export { default as Selector } from './selector/index.js';
 export { default as Tabs } from './tabs/index.js';
-export { default as Skeleton } from './Skeleton.svelte';
 export { default as ActionList } from './action-list/index.js';
 export { default as Upload } from './upload/index.js';
 export { default as Dialog } from './Dialog.svelte';
@@ -28,6 +27,8 @@ export { default as InlineCode } from './InlineCode.svelte';
 export { default as Popover } from './Popover.svelte';
 export { default as Fieldset } from './Fieldset.svelte';
 export { default as Image } from './Image.svelte';
+export { default as Modal } from './Modal.svelte';
+export { default as Spinner } from './Spinner.svelte';
 export { Toast } from './toast/index.js';
 export * as Button from './button/index.js';
 export * as Link from './link/index.js';

diff --git a/v2/pink-sb/src/lib/input/Select.svelte b/v2/pink-sb/src/lib/input/Select.svelte
@@ -16,6 +16,7 @@
             badge?: string;
             leadingIcon?: ComponentType;
             trailingIcon?: ComponentType;
+            leadingHtml?: string;
         }>;
     } & Partial<{
             value: string | boolean | number | null;
@@ -35,6 +36,7 @@
     export let readonly: $$Props['readonly'] = false;
 
     const dispatch = createEventDispatcher();
+    let selectedLeadingHtml: undefined | string = undefined;
 
     const {
         elements: { trigger, menu, option },
@@ -55,6 +57,7 @@
         portal: null,
         onSelectedChange(event) {
             value = event.next?.value;
+            selectedLeadingHtml = options.find((option) => option.value === value)?.leadingHtml;
             dispatch('change', value);
             return event.next;
         }
@@ -76,14 +79,24 @@
         disabled={disabled || readonly}
     >
         <span>
-            {$selectedLabel || placeholder}
+            {#if $selectedLabel}
+                {#if selectedLeadingHtml}
+                    {@html selectedLeadingHtml}
+                {/if}
+                {$selectedLabel}
+            {:else}
+                {placeholder}
+            {/if}
         </span>
         <Icon size="m" icon={$open ? IconChevronUp : IconChevronDown} />
     </button>
     {#if $open}
         <ul {...$menu} use:menu>
-            {#each options as { value, label, badge, disabled, readonly, leadingIcon, trailingIcon }}
+            {#each options as { value, label, badge, disabled, readonly, leadingIcon, trailingIcon, leadingHtml }}
                 <li {...$option({ value, label, disabled })} use:option>
+                    {#if leadingHtml}
+                        {@html leadingHtml}
+                    {/if}
                     {#if leadingIcon}
                         <Icon size="s" icon={leadingIcon} />
                     {/if}
@@ -104,6 +117,11 @@
     @use './input';
     @use '../../scss/mixins/transitions';
 
+    button span {
+        display: flex;
+        gap: var(--space-3);
+    }
+
     .input {
         @include transitions.common;
         @include input.wrapper;

diff --git a/v2/pink-sb/src/lib/typography/Title.svelte b/v2/pink-sb/src/lib/typography/Title.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     export let size: 'xl' | 'l' | 'm' | 's' = 'm';
     export let truncate = false;
-    export let color: string = '';
+    export let color = '--color-fgcolor-neutral-primary';
 </script>
 
 {#if size === 'xl'}

diff --git a/v2/pink-sb/src/stories/Modal.stories.svelte b/v2/pink-sb/src/stories/Modal.stories.svelte
@@ -0,0 +1,31 @@
+<script context="module" lang="ts">
+    import Modal from '$lib/Modal.svelte';
+    import type { MetaProps } from '@storybook/addon-svelte-csf';
+
+    export const meta: MetaProps = {
+        title: 'Components/Modal',
+        component: Modal,
+        args: {
+            title: 'Modal Title',
+            description: 'This is a Modal description title.'
+        }
+    };
+</script>
+
+<script>
+    import { Button } from '$lib/button/index.js';
+    import Text from '$lib/input/Text.svelte';
+    import { Story } from '@storybook/addon-svelte-csf';
+    let open = false;
+</script>
+
+<Story name="Default" let:args>
+    <Modal {...args} bind:open>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestiae voluptatem
+            alias omnis quod.
+        </p>
+        <Text placeholder="Type something here" />
+    </Modal>
+    <Button on:click={() => (open = !open)}>Open Modal</Button>
+</Story>
diff --git a/v2/pink-sb/src/stories/Skeleton.stories.svelte b/v2/pink-sb/src/stories/Skeleton.stories.svelte
diff --git a/v2/pink-sb/src/stories/input/Select.stories.svelte b/v2/pink-sb/src/stories/input/Select.stories.svelte
@@ -22,7 +22,9 @@
                 },
                 {
                     label: 'Option 3',
-                    value: 'option3'
+                    value: 'option3',
+                    leadingHtml:
+                        "<img src='https://cloud.appwrite.io/v1/avatars/flags/de?width=22&height=15' alt='Flag of Germany'/>"
                 },
                 {
                     label: 'Option 4',