From 590b9b13f28153edcfed8bebcf9a1969377f35eb Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Fri, 25 Oct 2024 11:22:07 +0200
Subject: [PATCH 1/4] WIP combobox based on select component

---
 v2/pink-sb/src/lib/Combobox.svelte            | 41 ++++++++++++
 v2/pink-sb/src/lib/input/Select.svelte        | 66 +++++++++----------
 v2/pink-sb/src/lib/input/types.ts             | 21 ++++++
 .../src/stories/Combobox.stories.svelte       | 65 ++++++++++++++++++
 4 files changed, 159 insertions(+), 34 deletions(-)
 create mode 100644 v2/pink-sb/src/lib/Combobox.svelte
 create mode 100644 v2/pink-sb/src/stories/Combobox.stories.svelte

diff --git a/v2/pink-sb/src/lib/Combobox.svelte b/v2/pink-sb/src/lib/Combobox.svelte
new file mode 100644
index 0000000000..7ba1cfe024
--- /dev/null
+++ b/v2/pink-sb/src/lib/Combobox.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+    import Select from './input/Select.svelte';
+    import type { SelectProps } from './input/types';
+
+    type ComboboxProps = SelectProps & {
+        options: SelectProps['options'];
+        placeholder?: SelectProps['placeholder'];
+        label?: SelectProps['label'];
+        value?: SelectProps['value'];
+        id?: SelectProps['id'];
+        state?: SelectProps['state'];
+        helper?: SelectProps['helper'];
+        disabled?: SelectProps['disabled'];
+        readonly?: SelectProps['readonly'];
+    };
+
+    export let options: ComboboxProps['options'];
+    export let placeholder: ComboboxProps['placeholder'];
+    export let label: ComboboxProps['label'];
+    export let value: ComboboxProps['value'];
+    export let id: ComboboxProps['id'];
+    export let state: ComboboxProps['state'];
+    export let helper: ComboboxProps['helper'];
+    export let disabled: ComboboxProps['disabled'] = false;
+    export let readonly: ComboboxProps['readonly'] = false;
+</script>
+
+<div>
+    <Select
+        {options}
+        {placeholder}
+        {label}
+        {value}
+        {id}
+        {state}
+        {helper}
+        {disabled}
+        {readonly}
+        isSearchable={true}
+    />
+</div>
diff --git a/v2/pink-sb/src/lib/input/Select.svelte b/v2/pink-sb/src/lib/input/Select.svelte
index 59b0d3c8cd..13773f7ba3 100644
--- a/v2/pink-sb/src/lib/input/Select.svelte
+++ b/v2/pink-sb/src/lib/input/Select.svelte
@@ -1,38 +1,26 @@
 <script lang="ts">
     import Base from './Base.svelte';
-    import type { States } from './types.js';
+    import type { SelectProps, States } from './types.js';
     import { createSelect } from '@melt-ui/svelte';
     import { Icon, Badge } from '$lib/index.js';
-    import { createEventDispatcher, type ComponentType } from 'svelte';
+    import { createEventDispatcher } from 'svelte';
     import { IconChevronDown, IconChevronUp } from '@appwrite.io/pink-icons-svelte';
-    import type { HTMLInputAttributes } from 'svelte/elements';
-
-    type $$Props = Omit<HTMLInputAttributes, 'value'> & {
-        options: Array<{
-            label: string;
-            value: string | boolean | number | null;
-            disabled?: boolean;
-            readonly?: boolean;
-            badge?: string;
-            leadingIcon?: ComponentType;
-            trailingIcon?: ComponentType;
-        }>;
-    } & Partial<{
-            value: string | boolean | number | null;
-            label: string;
-            state: States;
-            helper: string;
-        }>;
 
     export let state: States = 'default';
-    export let options: $$Props['options'];
-    export let placeholder: $$Props['placeholder'] = 'Select an option';
-    export let disabled: $$Props['disabled'] = false;
-    export let label: $$Props['label'] = undefined;
-    export let value: $$Props['value'] = undefined;
-    export let id: $$Props['id'] = undefined;
-    export let helper: $$Props['helper'] = undefined;
-    export let readonly: $$Props['readonly'] = false;
+    export let options: SelectProps['options'];
+    export let placeholder: SelectProps['placeholder'] = 'Select an option';
+    export let disabled: SelectProps['disabled'] = false;
+    export let label: SelectProps['label'] = undefined;
+    export let value: SelectProps['value'] = undefined;
+    export let id: SelectProps['id'] = undefined;
+    export let helper: SelectProps['helper'] = undefined;
+    export let readonly: SelectProps['readonly'] = false;
+    export let isSearchable: SelectProps['isSearchable'] = false;
+
+    let searchQuery: string = '';
+    $: filteredOptions = isSearchable
+        ? options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()))
+        : options;
 
     const dispatch = createEventDispatcher();
 
@@ -56,6 +44,7 @@
         onSelectedChange(event) {
             value = event.next?.value;
             dispatch('change', value);
+            searchQuery = event.next?.label;
             return event.next;
         }
     });
@@ -63,7 +52,7 @@
 
 <Base {id} {label} {helper} {state}>
     <input type="hidden" {...$$restProps} {disabled} {readonly} {value} on:invalid />
-    <button
+    <div
         {...$trigger}
         use:trigger
         class="input"
@@ -74,15 +63,20 @@
         class:warning={state === 'warning'}
         class:error={state === 'error'}
         disabled={disabled || readonly}
+        role={!isSearchable && 'button'}
     >
-        <span>
-            {$selectedLabel || placeholder}
-        </span>
+        {#if isSearchable}
+            <input type="text" class="search-input" bind:value={searchQuery} />
+        {:else}
+            <span>
+                {$selectedLabel || placeholder}
+            </span>
+        {/if}
         <Icon size="medium" icon={$open ? IconChevronUp : IconChevronDown} />
-    </button>
+    </div>
     {#if $open}
         <ul {...$menu} use:menu>
-            {#each options as { value, label, badge, disabled, readonly, leadingIcon, trailingIcon }}
+            {#each filteredOptions as { value, label, badge, disabled, readonly, leadingIcon, trailingIcon }}
                 <li {...$option({ value, label, disabled })} use:option>
                     {#if leadingIcon}
                         <Icon size="small" icon={leadingIcon} />
@@ -165,4 +159,8 @@
             }
         }
     }
+    .search-input {
+        flex-grow: 1;
+        color: var(--color-fgcolor-neutral-primary);
+    }
 </style>
diff --git a/v2/pink-sb/src/lib/input/types.ts b/v2/pink-sb/src/lib/input/types.ts
index eb97507766..494e209901 100644
--- a/v2/pink-sb/src/lib/input/types.ts
+++ b/v2/pink-sb/src/lib/input/types.ts
@@ -1 +1,22 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type ComponentType } from 'svelte';
+
 export type States = 'default' | 'success' | 'warning' | 'error';
+
+export type SelectProps = Omit<HTMLInputAttributes, 'value'> & {
+    options: Array<{
+        label: string;
+        value: string | boolean | number | null;
+        disabled?: boolean;
+        readonly?: boolean;
+        badge?: string;
+        leadingIcon?: ComponentType;
+        trailingIcon?: ComponentType;
+    }>;
+    isSearchable?: boolean;
+} & Partial<{
+        value: string | boolean | number | null;
+        label: string;
+        state: States;
+        helper: string;
+    }>;
diff --git a/v2/pink-sb/src/stories/Combobox.stories.svelte b/v2/pink-sb/src/stories/Combobox.stories.svelte
new file mode 100644
index 0000000000..8d966960bf
--- /dev/null
+++ b/v2/pink-sb/src/stories/Combobox.stories.svelte
@@ -0,0 +1,65 @@
+<script context="module" lang="ts">
+    import type { MetaProps } from '@storybook/addon-svelte-csf';
+    import { Story } from '@storybook/addon-svelte-csf';
+    import Combobox from '$lib/Combobox.svelte';
+
+    export const meta: MetaProps = {
+        title: 'Components/Combobox',
+        component: Combobox,
+        args: {
+            id: 'id',
+            name: 'name',
+            label: 'Label',
+            placeholder: 'Select option',
+            value: '',
+            options: [
+                {
+                    label: 'Option 1',
+                    value: 'option1'
+                },
+                {
+                    label: 'Option 2',
+                    value: 'option2'
+                },
+                {
+                    label: 'Option 3',
+                    value: 'option3'
+                },
+                {
+                    label: 'Option 4',
+                    badge: 'badge',
+                    value: 'option4'
+                },
+                {
+                    label: 'Option 5',
+                    disabled: true,
+                    value: 'option5'
+                }
+            ]
+        },
+        argTypes: {
+            state: {
+                options: ['default', 'success', 'warning', 'error'],
+                control: { type: 'select' }
+            }
+        }
+    };
+</script>
+
+<div class="container">
+    <div class="wrapper">
+        <Story name="Default" let:args>
+            <Combobox {...args} />
+        </Story>
+    </div>
+</div>
+
+<style>
+    .container {
+        margin: 100px auto;
+        width: fit-content;
+    }
+    .wrapper {
+        padding: 100px;
+    }
+</style>

From b213f475e058ca881aa4bf03d620c2ce7fc611f5 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 21 Nov 2024 16:13:20 +0100
Subject: [PATCH 2/4] Fix wrong merge

---
 v2/pink-sb/src/lib/input/types.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/v2/pink-sb/src/lib/input/types.ts b/v2/pink-sb/src/lib/input/types.ts
index 494e209901..7e8420713a 100644
--- a/v2/pink-sb/src/lib/input/types.ts
+++ b/v2/pink-sb/src/lib/input/types.ts
@@ -12,6 +12,7 @@ export type SelectProps = Omit<HTMLInputAttributes, 'value'> & {
         badge?: string;
         leadingIcon?: ComponentType;
         trailingIcon?: ComponentType;
+        leadingHtml?: string;
     }>;
     isSearchable?: boolean;
 } & Partial<{

From 4db18b67d39da6f345bfa23a234b49c0ce63217a Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 21 Nov 2024 16:26:13 +0100
Subject: [PATCH 3/4] Fix wrong merge

---
 v2/pink-sb/src/lib/input/Select.svelte | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/v2/pink-sb/src/lib/input/Select.svelte b/v2/pink-sb/src/lib/input/Select.svelte
index 46e857e45e..6661cb6cd6 100644
--- a/v2/pink-sb/src/lib/input/Select.svelte
+++ b/v2/pink-sb/src/lib/input/Select.svelte
@@ -70,19 +70,19 @@
         {#if isSearchable}
             <input type="text" class="search-input" bind:value={searchQuery} />
         {:else}
-        <span>
-            {#if $selectedLabel}
-                {#if selectedLeadingHtml}
-                    {@html selectedLeadingHtml}
+            <span>
+                {#if $selectedLabel}
+                    {#if selectedLeadingHtml}
+                        {@html selectedLeadingHtml}
+                    {/if}
+                    {$selectedLabel}
+                {:else}
+                    {placeholder}
                 {/if}
-                {$selectedLabel}
-            {:else}
-                {placeholder}
-            {/if}
-        </span>
-            {/if}
+            </span>
+        {/if}
         <Icon size="m" icon={$open ? IconChevronUp : IconChevronDown} />
-    </button>
+    </div>
     {#if $open}
         <ul {...$menu} use:menu>
             {#each filteredOptions as { value, label, badge, disabled, readonly, leadingIcon, trailingIcon, leadingHtml }}

From 59b2612a8d700a241497b460071bd09278d9d100 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 21 Nov 2024 16:31:01 +0100
Subject: [PATCH 4/4] Fix imports

---
 v2/pink-sb/src/lib/Combobox.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/v2/pink-sb/src/lib/Combobox.svelte b/v2/pink-sb/src/lib/Combobox.svelte
index 7ba1cfe024..91fbefe9f5 100644
--- a/v2/pink-sb/src/lib/Combobox.svelte
+++ b/v2/pink-sb/src/lib/Combobox.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import Select from './input/Select.svelte';
-    import type { SelectProps } from './input/types';
+    import { Input } from '$lib/index.js';
+    import type { SelectProps } from '$lib/input/types.js';
 
     type ComboboxProps = SelectProps & {
         options: SelectProps['options'];
@@ -26,7 +26,7 @@
 </script>
 
 <div>
-    <Select
+    <Input.Select
         {options}
         {placeholder}
         {label}